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