筆記整理1 -- HTML基礎(chǔ)知識與DW簡單使用
筆記整理1 -- HTML基礎(chǔ)知識與DW簡單使用
概念客戶端和服務(wù)器端文件名、基本名、擴展名資源文件和站點什么是HTML關(guān)于W3CW3C的規(guī)范網(wǎng)頁的制作網(wǎng)頁的基本框架通過記事本寫網(wǎng)頁Dreamweaver 設(shè)計器簡介網(wǎng)站與網(wǎng)頁基本概念圖片關(guān)于圖片的基本概念位圖矢量圖分辨率常見的圖片格式JPG/JPEGGIFPNG格式轉(zhuǎn)換圖片的優(yōu)化切片ps和fw常用快捷鍵Dreamweaver的使用插入圖片插入文字插入超鏈接插入表格合并單元格和拆分單元格標簽選擇概念學(xué)習html首先了解客戶端和服務(wù)器端，文件名和擴展名，同時了解打開網(wǎng)頁的執(zhí)行過程、站點、什么是HTML。
客戶端和服務(wù)器端
客戶端：瀏覽者使用的計算機。
注意：管理員其實也是瀏覽者，所以管理員使用的也是客戶端（在服務(wù)器上直接操作除外）。服務(wù)器端：存放網(wǎng)頁文件的計算機。
打開網(wǎng)頁的執(zhí)行過程：
客戶端給服務(wù)器端發(fā)送一個請求，服務(wù)器響應(yīng)將頁面代碼發(fā)送給客戶端，這些代碼通過瀏覽器解析執(zhí)行就生成了我們看到的頁面。文件名、基本名、擴展名
文件名：由基本名和擴展名組成。
比如：demo.txt 其中demo是基本名，txt是擴展名。擴展名：用于區(qū)分文件類型。
網(wǎng)頁的擴展名包括：靜態(tài)網(wǎng)頁的擴展名：html、htm（其他知識點：asp、aspx、php、jsp）資源文件和站點
一個網(wǎng)站中包括HTML頁面，css，JS，圖片，flash動畫或gif動畫等，這些都屬于資源文件。
為了便于管理，我么將這些這些靜態(tài)資源放置到一個文件夾下。這個文件夾稱為站點。
做網(wǎng)站的第一步要先建站點。什么是HTML
HTML（HyperText Mark-up Language 超文本標記語言）
HTML語言的規(guī)則：
命令都要放到<>大部分標記都是成對出現(xiàn)標簽大部分都是<tag>開始</tag>結(jié)束HTML語言不區(qū)分大小寫關(guān)于W3C
W3C world wide web consortium 萬維網(wǎng)協(xié)會
W3C的規(guī)范
W3C的規(guī)范有很多，重要的規(guī)范如下：
一個頁面只能有一個根元素標記必須成對出現(xiàn)（不允許空標記）空標記有時帶斜杠是為了遵循W3C定義的規(guī)范 比如：<br />網(wǎng)頁的制作網(wǎng)頁的基本框架
一個頁面必須具備如下框架：
通過記事本寫網(wǎng)頁
步驟：
在站點文件夾新建一個txt文件，在文件中輸入如下代碼<html> <head> <title> 歡迎進入html世界 </title> </head> <body> 這是我的第一個網(wǎng)頁 </body></html>12345678910更改文件擴展名為html或htm，保存并雙擊網(wǎng)頁，通過瀏覽器打開，打開時可能出現(xiàn)亂碼。Dreamweaver 設(shè)計器簡介
Dreamweaver簡稱dw，是前端開發(fā)中一個非常強大的工具。（文章的最后有一些具體使用）
作用：
1、具備很多提示
參數(shù)設(shè)置：編輯–參數(shù)（快捷鍵:Ctrl+U）更改自動補全的執(zhí)行時間：參數(shù)設(shè)置–代碼提示–結(jié)束標簽2、管理站點文件夾
Dreamweaver 和文件夾建立關(guān)聯(lián)：站點–新建站點–設(shè)置站點名稱和本地文件夾路徑—注意：刪除dw站點，站點文件夾并不會刪除源文件夾。網(wǎng)站與網(wǎng)頁基本概念
網(wǎng)站：所有網(wǎng)頁的集合
首頁（主頁）：當輸入網(wǎng)址后打開的頁面，名稱一般為index或default
如果一個網(wǎng)站中沒有首頁，則這個網(wǎng)站將無法顯示。子頁面：除了首頁以外的頁面。
子頁命名規(guī)則：小寫的英文字母或數(shù)字，不能是中文。（圖片也不能用中文）
頁面尺寸：以不出現(xiàn)水平滾動條為準，目前的頁面寬度以17寸屏（1024*768）為準。
圖片關(guān)于圖片的基本概念
位圖
位圖像素：由屏幕上的像素點來描述圖像。
放大失真，會出現(xiàn)馬賽克模糊。位圖顏色較為豐富。操作位圖的軟件：PS 和 FW
矢量圖
矢量圖形：使用線和面組成圖形，所以稱為矢量。
放大不失真，體積小。顏色數(shù)沒有位圖豐富。操作位圖的軟件：ai，F(xiàn)W
注意：矢量圖不能直接放在網(wǎng)頁上，必須經(jīng)過圖像處理軟件轉(zhuǎn)換成網(wǎng)頁支持的圖片格式（jpg、gif、png）。分辨率
分辨率：在單位長度上的像素數(shù)，用來衡量位圖質(zhì)量好壞的指標，分辨率越大，圖片質(zhì)量越好。通常以“像素/英寸”，網(wǎng)上一般72（像素/英寸）。
網(wǎng)站默認尺寸單位為像素。常見的圖片格式
JPG/JPEG
有損壓縮，顏色數(shù)達到一千六百多萬種，是目前使用量很大的一種圖片格式。
不支持透明，不支持動畫。GIF
顏色數(shù)很少，只有256種。
支持透明，支持透明，圖片質(zhì)量很差，現(xiàn)在已經(jīng)用的很少。二者比較：
gif顏色數(shù)目少，最多256種，一般用于圖標、標識；jpg顏色細膩豐富，支持顏色多達1600多萬種。用于質(zhì)量要求較高的圖像，如人物照片、風景等gif體積小，jpg體積大gif支持透明，jpg沒有透明色gif支持動畫，jpg不支持PNG
無損壓縮，體積小，質(zhì)量好。
支持格式透明，此格式越來越被廣泛應(yīng)用。在項目中用jpg和png格式圖片。格式轉(zhuǎn)換
打開源圖–文件–另存為–選擇格式–保存
圖片的優(yōu)化
使用工具ps和fw
改大小（尺寸）：修改–畫布–大小 或者 直接點擊屬性面板中的“圖像大小”按鈕–更改像素尺寸降分辨率：直接點擊屬性面板中的“圖像大小”按鈕–取消圖像重新取樣選項–更改分辨率降質(zhì)量（壓縮）：文件–圖像預(yù)覽–降低品質(zhì)（品質(zhì)降低應(yīng)適當，否則會失真）做切片：詳細如下切片
做切片：拿到一個效果圖后，將有用的部分給切下來。
注意：拿到效果圖的時候，先看效果圖的尺寸，將效果圖的尺寸調(diào)整到主流瀏覽器再做切片。步驟：
選擇web-切片工具文件–導(dǎo)出，類型選擇“僅圖像”，切片選擇“導(dǎo)出切片”，取消包括無切片區(qū)域切片后一般要拿到Dreamweaver中拼版拼版：用table標記拼版，具體在表格拼版中介紹小技巧：為了切片準確，可以跳出標尺，通過保持拉出輔助線，F(xiàn)W中，顯示/隱藏標尺快捷鍵是ctrl+alt+Rps和fw常用快捷鍵
ctrl+加號：圖片放大ctrl+減號：圖片縮小ctrl+減號：圖片縮小雙擊手型工具：將圖片自適應(yīng)大小顯示雙擊 手型 工具：將圖片自適應(yīng)大小顯示Tab鍵全部顯示/隱藏工具面版（在fw和dw中，F(xiàn)4也可以顯示/隱藏工具面版）按住空格鍵快速切換到手型工具ctrl鍵快速切換到選擇工具Dreamweaver的使用插入圖片
方法一：點擊插入圖片按鈕
方法二：直接將站點中的圖片拖放到相應(yīng)位置
插入文字
注意事項：1.輸入空格：切換到全角，再輸入空格2.回車：換段3.shift+回車：換行插入超鏈接
方法一：選擇文字或圖片，在屬性面板上選擇鏈接的地址
方法二：用指向文件工具連接到指定文件處
鏈接文件在新的瀏覽器中打開，在目標選項中選擇_blank
插入表格
表格的單位：1.像素：絕對單位2.百分比：相對單位最外層表格單位是像素，套用的可以是像素也可以是百分比。邊框：一般調(diào)成0單元格填充：內(nèi)容距邊的距離（默認=1px）一般設(shè)置為0單元格間距：單元格與單元格的距離（默認=2px）一般設(shè)置為0合并單元格和拆分單元格
選中單元格，在屬性面板上會出現(xiàn)合并單元格和拆分單元格按鈕
標簽選擇
標簽選擇用來快速選擇HTML對象。
掃描二維碼推送至手機訪問。
版權(quán)聲明：本文由信途科技轉(zhuǎn)載于網(wǎng)絡(luò)，如有侵權(quán)聯(lián)系站長刪除。
轉(zhuǎn)載請注明出處http://www.quickersubmitter.com/xintu/16444.html
