網(wǎng)頁設(shè)計(jì)與制作
第1章網(wǎng)站開發(fā)基礎(chǔ)
1.2網(wǎng)站開發(fā)流程
1.網(wǎng)站總體策劃：（1）目標(biāo)用戶定位和網(wǎng)站的主題定位（2）網(wǎng)站整體風(fēng)格創(chuàng)意設(shè)計(jì)（3）網(wǎng)頁的色彩搭配（4）網(wǎng)站的層次結(jié)構(gòu)和鏈?zhǔn)浇Y(jié)構(gòu)（5）版面布局設(shè)計(jì)
2.設(shè)計(jì)和制作素材：搜集的素材一般包括跟主題有關(guān)的文字圖片資料；一些優(yōu)秀的頁面風(fēng)格；開放的源代碼。設(shè)計(jì)和制作的素材包括網(wǎng)站的Logo、Banner、背景圖片、列表圖表、橫幅廣告等。
3.建立站點(diǎn)：安裝和配置IIS；在Dreamweaver中創(chuàng)建站點(diǎn)。
4.制作網(wǎng)頁：創(chuàng)建CSS樣式；制作網(wǎng)站首頁；制作網(wǎng)站的其他頁面；制作超鏈接
5.測(cè)試和發(fā)布網(wǎng)站：發(fā)布網(wǎng)站前必須要測(cè)試網(wǎng)站，測(cè)試網(wǎng)頁內(nèi)容、鏈接的正確性和在不同瀏覽器中的兼容性等。發(fā)布網(wǎng)站先申請(qǐng)站點(diǎn)域名和租用服務(wù)器空間，然后通過FTP工具把網(wǎng)站上傳到服務(wù)器上。
1.4 HTML的概念：HTML是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記性語言。
1.4.3HTML標(biāo)簽
標(biāo)簽表示：<標(biāo)簽名稱 屬性>
1.<標(biāo)簽>元素</標(biāo)簽>,標(biāo)簽的作用范圍:<標(biāo)簽>→<標(biāo)簽>.例：<h2>demo<h2>,即將demo這段文本以2號(hào)標(biāo)題來顯示，這對(duì)標(biāo)簽之外的文本不受這組標(biāo)簽影響。
2.<標(biāo)簽 屬性名=”屬性值”>元素</標(biāo)簽>
一個(gè)標(biāo)簽可以包含多個(gè)屬性屬性之間無先后次序，用空格分開。
例：<body background=”back_ground.gif” text=”red”>hello</body>,其中background屬性用來表示HTML文檔的背景圖片，tect屬性用來表示文本的顏色。
3.<標(biāo)簽>
空標(biāo)簽：標(biāo)簽單獨(dú)出現(xiàn)，只有開始標(biāo)簽而沒有結(jié)束標(biāo)簽。
(1)<html>和</html>在最外層，表示這對(duì)標(biāo)簽里的代碼是HTML語言。
(2)<head>和</head>標(biāo)簽里是網(wǎng)頁中的頭部信息，如網(wǎng)頁總標(biāo)題，網(wǎng)頁關(guān)鍵字等。無頭部信息可不要這對(duì)標(biāo)簽
(3)<title>和</title>.在<head>和</head>這對(duì)雙標(biāo)簽的中間還包含著<title>和</title>這對(duì)標(biāo)簽，網(wǎng)頁標(biāo)題的內(nèi)容，標(biāo)題出現(xiàn)在IE瀏覽器窗口。
考點(diǎn)：
1.<p>和</p>.文本段落的標(biāo)簽。
2.<br>:換行符。<br>標(biāo)簽是空標(biāo)簽(它沒有結(jié)束標(biāo)簽，因此這是錯(cuò)誤的:<br></br>)。
快捷鍵：F12預(yù)覽網(wǎng)頁； Shift+Enter分段(行間距小)；
前景色、背景色的調(diào)整：前景色是alt+del 背景色是ctrl+del 前后交換是X
1.4.4HTML文檔的基本結(jié)構(gòu)p18-p19
<html>
<head>
<title>一個(gè)簡(jiǎn)單的網(wǎng)頁</title>（頭部信息）
</head>
</body>（網(wǎng)頁內(nèi)容：文本、鏈接、圖像、動(dòng)畫等）
<h1>歡迎光臨</h1>
<br>
<front size=”5” face=”華文行楷” color=”red”>
這是我的第一個(gè)主頁，歡迎大家的訪問！ </front>
</body>
</html>
Ps:去掉第6、7、8、10行是HTML的基本結(jié)構(gòu)。
第2章 DreamweaverCS5基礎(chǔ)
2.1.2 Dreamweaver軟件界面P23圖2-3
2.1.4視圖模式種類及其適應(yīng)情況
1）代碼視圖(寫代碼，主要用于這個(gè)，利用Dreamweaver工具編輯網(wǎng)頁代碼)，
2）拆分視圖(編寫代碼邊看視圖，直觀地編輯網(wǎng)頁中的元素，又可以觀察到相關(guān)的代碼）
3）設(shè)計(jì)視圖 (可視化設(shè)計(jì)，以所見所得的方式編輯網(wǎng)頁)
第3章制作網(wǎng)頁內(nèi)容
1.創(chuàng)建超鏈接的方法：給文字創(chuàng)建超鏈接；給圖片創(chuàng)建超鏈接；添加email鏈接，mailto:(冒號(hào)后不能空格)電子郵件地址；添加空連接。
2.創(chuàng)建超鏈接的路徑：
1)絕對(duì)路徑:是被鏈接文檔的完整URL,包括所使用的傳輸協(xié)議（網(wǎng)頁通常是：http://）。在創(chuàng)建外部鏈接時(shí)必須使用絕對(duì)路徑。
2）文檔相對(duì)路徑：就是以以前文檔所在位置為起點(diǎn)到被連接文檔經(jīng)由的路徑。主要用于創(chuàng)建內(nèi)部鏈接。如：images/google.gif
3）站點(diǎn)根目錄相對(duì)路徑：是指所有路徑都開始于當(dāng)前站點(diǎn)的根目錄。站點(diǎn)根目錄相對(duì)路徑以一個(gè)正斜杠開始，該正斜杠表示站點(diǎn)根文件夾，如/images/google.gif.移動(dòng)含有根目錄相對(duì)連接的文檔時(shí)，不需要更改鏈接。
4.DW新建CSS規(guī)則選擇器的類型及其特點(diǎn)。
1類 ：定義的時(shí)候前面必須加點(diǎn)（.）,格式是.xxx，可以在一個(gè)頁面中調(diào)用多次；
2.ID（用于任何HTML元素）名稱以“#”開頭，一般中只用在網(wǎng)頁中的一個(gè)元素上
3．標(biāo)簽（重新定義HTML元素）可以實(shí)現(xiàn)用CSS重新定義HTML標(biāo)簽外觀的功能。
4.復(fù)合內(nèi)容（基于選擇的內(nèi)容）：a:link 超鏈接的正常狀態(tài)，無任何動(dòng)作
a:visited 訪問過的超鏈接狀態(tài)
a：hover 鼠標(biāo)指針指向超鏈接的狀態(tài)
a：active 選中超鏈接狀態(tài)
第4章CSS樣式表
CSS樣式表：內(nèi)部用于當(dāng)前網(wǎng)頁內(nèi)部；外部連接到多個(gè)網(wǎng)頁上
1. 創(chuàng)建內(nèi)部CSS樣式表：
（1）用DW打開網(wǎng)頁文檔4.3.1.html
（2）單擊“樣式表”面板中的“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框
（3）在“選擇器類型”下拉列表中選擇“類（可用于任何HTML元素）”在“選擇器名稱”文本框里輸入要定義的CSS樣式的名稱.ziti，在“規(guī)則定義”下拉列表中選擇“僅限該文檔”
（4）單擊“確定”按鈕，在“.ziti的CSS規(guī)則定義”對(duì)話框中，設(shè)置完成后，單擊“確定”按鈕，此時(shí)，可以在“CSS樣式”面板里 看到增加了一個(gè).ziti的CSS樣式
或 (1)執(zhí)行“窗口“l"CSS樣式”命令.打開“CSS樣式”面板。
(2)在“CSS樣式”面板中單擊“新建CSS樣式”按鈕。
在“CSS樣式，面板的底部的按鈕功能如下。
.“附加樣式表”按鈕:在HTML文檔中鏈接一個(gè)外部的CSS文件。二
.“新建CSS樣式，按鈕:編輯新的CSS樣式文件。
.“編輯樣式表’按鈕:編輯原有的CSS規(guī)則。
.“刪除CSS樣式”按鈕:刪除選中的CSS規(guī)則。
(3)彈出“新建Css規(guī)則”對(duì)話框。
(4〕在對(duì)話框中如果設(shè)置“選擇器類型’為“標(biāo)簽“，則在“選擇器名稱”下拉列表中選擇一個(gè)HTML標(biāo)簽，也可以直接插入這個(gè)標(biāo)簽。
在“新建CSS規(guī)則’對(duì)話框中可以進(jìn)行如下設(shè)置。
.選擇器名稱:用來設(shè)里新建的樣式表的名稱。
.選擇器類型:用來定義樣式類型，并將其運(yùn)用到特定的部分。如果選擇“類”選項(xiàng)，要在“選擇器名稱”文本框中翰人自定義樣式的名稱，其名稱可以是字母和數(shù)字的組合，如果沒有輸入符號(hào)“.”Dweaver會(huì)自動(dòng)輸入;如果選擇“標(biāo)簽”選項(xiàng)，需要在“選擇器名稱”下拉列表中選擇一個(gè)HTML標(biāo)簽，也可以直接摘人這個(gè)標(biāo)簽;如果選擇“復(fù)合認(rèn)”選項(xiàng)，需要在“選擇器名稱.下拉列表中選擇一個(gè)選擇器的類型.上海網(wǎng)站建設(shè)也可以直接輸入一個(gè)選擇器類型。
.規(guī)則定義:用來設(shè)置新建的CSS語句的位置。CSS樣式按照使用方法可以分為內(nèi)部樣式和外部樣式。如果想把CSS語句新建在網(wǎng)頁內(nèi)部.可以選擇“僅限該文檔”選項(xiàng).
(5)如果選擇“復(fù)合內(nèi)容”，則在對(duì)話框中的“選擇器類型”下拉列表中選擇“復(fù)合內(nèi)容”選項(xiàng).在“選擇器名稱’下拉列表中選擇一個(gè)選擇器的類型.也可以直接輸人一個(gè)選擇器類型。
(6)在此選擇“選擇器類型’下拉列表中的“類”選項(xiàng).然后在“選擇器名稱’文本框中輸入body。由于創(chuàng)建的是css樣式內(nèi)部樣式表，所以在“規(guī)則定義”中選擇“僅限該文檔”。
(7）單擊“確定”按鈕.彈出“body的css規(guī)則定義”對(duì)話框.在對(duì)話框中將“Font-family"，設(shè)置為宋體，“font-size"設(shè)置為12像素，"Line-height"設(shè)置為200%， "Color"設(shè)置為#000000。
(8)單擊“確定”按鈕.在"Css樣式"面板中可以看到上海網(wǎng)站建設(shè)新建的樣式表和屬性。
2. 外部樣式表
（1） 在開始頁的“新建”列表中選擇CSS選項(xiàng)新建一個(gè)外部CSS文件，將其保存為mycss.css
（2） 單擊“樣式表”面板中的“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對(duì)話框
在“選擇器類型”下拉列表中選擇“類（可用于任何HTML元素）”在“選擇器名稱”文本框里輸入要定義的CSS樣式的名稱.text，在“規(guī)則定義”下拉列表中選擇“僅限該文檔”
（3） 單擊“確定”按鈕，在“.text的CSS規(guī)則定義”對(duì)話框中，設(shè)置完成后，單擊“確定”按鈕，此時(shí)，可以在“CSS樣式”面板里 看到增加了一個(gè).text的CSS樣式
（4） 將上面創(chuàng)建的外部CSS樣式表文件，連接到某個(gè)網(wǎng)頁上，在DW中打開網(wǎng)頁文件4.3.1.html
（5） 在“CSS樣式表”面板中單擊“附加樣式表”彈出的“連接外部樣式”對(duì)話框中的“添加選項(xiàng)區(qū)域中”選中“鏈接”按鈕，然后單擊瀏覽按鈕，選擇創(chuàng)建的外部鏈?zhǔn)奖砦募?span style="font-family:Calibri">mycss.css
（6） 單擊“確定”按鈕，返回“鏈接外部鏈?zhǔn)奖怼睂?duì)話框
（7） 單擊“確定”按鈕，外部鏈?zhǔn)奖砦募?span style="font-family:Calibri">mycss.css就會(huì)自動(dòng)連接到網(wǎng)頁中
內(nèi)部樣式表與外部樣式表的區(qū)別
首先它們都是CSS，美化修飾網(wǎng)頁的，其中：內(nèi)部樣式表是寫在HTML的<head></head>里面的，內(nèi)部樣式表只對(duì)當(dāng)前所在的網(wǎng)頁有效；如果很多網(wǎng)頁需要用到同樣的樣式(Styles)，用外部樣式表，將樣式(Styles)寫在一個(gè)以.css為后綴的CSS文件里，然后在每個(gè)需要用到這些樣式的網(wǎng)頁里引用這個(gè)CSS文件即可，較方便。使用外部樣式表，相對(duì)于內(nèi)部樣式的，有以下優(yōu)點(diǎn)： 1、樣式代碼可以復(fù)用。一個(gè)外部CSS文件，可以被很多網(wǎng)頁共用。 2、便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個(gè)網(wǎng)頁。 3、提高網(wǎng)頁顯示的速度。如果樣式寫在網(wǎng)頁里，會(huì)降低網(wǎng)頁顯示的速度，如果網(wǎng)頁引用一個(gè)CSS文件，這個(gè)CSS文件多半已經(jīng)在緩存區(qū)(其它網(wǎng)頁早已經(jīng)引用過它)，網(wǎng)頁顯示的速度就比較快。
第5章網(wǎng)頁布局
1.利用表格進(jìn)行網(wǎng)頁布局p104-105
<table width=”500” height=”200” border=”2” cellpadding=”1” cellspacing=”1” bordercolor=”#000FF” bgcolor=”#999999”>
<tr>
<td bgcolor=”#999999”>設(shè)置單元格背景</td>
<td>灰色背景</td>
<td>黃色背景</td>
</tr>
<tr>
<td> </td>
<td align=”center”>居中對(duì)齊</td>
<td align=”left”>左對(duì)齊 </td>
</tr>
</table>
2.
<body>
<table width=”760” boder=”0” cellspacing=”0” ceiipadding=”0”>
<tr>
<td>. </td>
<td> </td>
<td>rowspan=”2”> </td>
</tr>
<tr>
<td>rowspan=”2”> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
5.2.4用表格布局網(wǎng)頁圖5-17p105
5.3框架
框架集定義了解P110
框架集<frameset></frameset>
框架集<frame/>
框架可以進(jìn)行拆分和刪除
框架集建立后是否可以添加移動(dòng)刪除？
5.4.2 DIV+ CSS布局原理、特征p123
利用DIV+ CSS布局網(wǎng)頁是一種盒子模式的開發(fā)技術(shù)，通過由CSS定義的大小不易的盒子和盒子嵌套來編排網(wǎng)頁。因?yàn)橛眠@種方式編排的網(wǎng)頁代碼簡(jiǎn)潔、更新方便，能兼容更多的瀏覽器。
DIV+ CSS布局原理及特點(diǎn)：使用div劃分網(wǎng)頁邏輯區(qū)域;使用css控制每個(gè)div的外觀位置以實(shí)現(xiàn)網(wǎng)頁布局特點(diǎn)。特點(diǎn)：本身沒有樣式；是塊元素；通常充當(dāng)容器；要區(qū)分各個(gè)div，因此常要使用id屬性
p123 用法(2個(gè))
第8章ps
調(diào)整圖像色彩
使用“色相/飽和度”、 “替換顏色”、“匹配顏色”、“變化”調(diào)整
調(diào)整圖像色調(diào)p222
（1） 色階：調(diào)整圖像色調(diào)的明暗度
（2） 曲線：調(diào)整圖像色調(diào)的明暗度比色階更為準(zhǔn)確、靈活
（3） 色彩平衡：能夠調(diào)整圖像暗調(diào)區(qū)域，高光區(qū)域和中間色調(diào)區(qū)域的色彩成分，并混合各種色彩以達(dá)到色彩平衡
剪切蒙版的類型和特征
（1） 剪貼蒙版實(shí)際上是兩個(gè)或多個(gè)有特殊關(guān)系的圖層關(guān)系的總稱，必須有上下了兩個(gè)圖層，利用下方圖層中圖像的形狀對(duì)上層圖像進(jìn)行剪切，最終以下方圖層中的圖像的形狀規(guī)定上方圖層中圖像的范圍，從而得到豐富的效果。
（2） 圖層蒙版是為圖層添加的遮罩，起到隱藏或顯示圖像的作用，只能用介于黑白兩個(gè)色間的256級(jí)灰度色繪圖。用黑色繪圖可以隱藏圖像，白色繪圖可以顯示圖像，灰度色繪圖能夠使本層圖像呈現(xiàn)若隱若現(xiàn)的朦朧效果
（3） 矢量蒙版可以控制或隱藏圖層區(qū)域，能創(chuàng)建具有銳利邊緣的蒙版，是由鉛筆或形狀工具使用路徑方式創(chuàng)建的，而路徑可以使用多種工具進(jìn)行編輯，所以矢量蒙版常常用來布局對(duì)象
摳圖：
規(guī)則的：矩形選框，橢圓選框，單行選框，單列選框；
不規(guī)則的:套索，多邊形套索，磁性套索，快速選擇，魔棒工具
Flash
快捷鍵：
保存Ctrl+S 測(cè)試影片Ctrl+Enter 修改“｜”組合” Ctrl+G
修改“｜”分離文本Ctrl+B 復(fù)制Ctrl+C 粘貼Ctrl+V 插入普通幀F(xiàn)5
插入關(guān)鍵幀F(xiàn)6 插入空白幀F(xiàn)7 修改｜轉(zhuǎn)換為元件F8 打開顏色面板Shift+F9
是對(duì)象按原來的長(zhǎng)度比以中心點(diǎn)為基準(zhǔn)縮小和放大Alt+Shift 文件保存 Ctrl+s
Shift開始幀+選取連續(xù)幀的最后一幀 Ctrl可以選取多個(gè)不連續(xù)的幀
Ctrl同時(shí)選中要導(dǎo)入的多個(gè)圖像文件 Shift同時(shí)選擇兩個(gè)文件之間的所有連續(xù)圖像文件
選取連續(xù)多個(gè)幀：先點(diǎn)擊起點(diǎn)幀，按住Shift鍵后再單擊需要選取的連續(xù)幀的最后一幀
3. 補(bǔ)間動(dòng)畫類型，區(qū)別p315
（1） 形狀補(bǔ)間動(dòng)畫
通過形狀補(bǔ)間可以創(chuàng)建類似于形變的動(dòng)畫效果，是一個(gè)形狀逐漸變成另一個(gè)形狀
（2） 傳統(tǒng)補(bǔ)間動(dòng)畫
在某一個(gè)時(shí)間點(diǎn)（也就是另一個(gè)關(guān)鍵幀）可以設(shè)置實(shí)例，組或文本等對(duì)象的位置，尺寸和旋轉(zhuǎn)等屬性，在另一個(gè)時(shí)間點(diǎn)（也就是另一個(gè)關(guān)鍵幀）可以改變對(duì)象的這下屬性。在這兩個(gè)關(guān)鍵幀間定義了傳統(tǒng)補(bǔ)間，F(xiàn)lash就會(huì)自動(dòng)補(bǔ)上中間的動(dòng)畫過程。
（3） 沿路徑運(yùn)動(dòng)的補(bǔ)間動(dòng)畫
利用傳統(tǒng)補(bǔ)間動(dòng)畫制作的位置移動(dòng)動(dòng)畫是沿著直線進(jìn)行的，可是在生活中，有很多運(yùn)動(dòng)路徑是弧線或不規(guī)則的，在Flash中利用“沿路徑的傳統(tǒng)補(bǔ)間”就可以制作出這樣的效果。講一個(gè)或多個(gè)圖層鏈接到一個(gè)引導(dǎo)圖層，是一個(gè)或多個(gè)對(duì)象沿同一條路徑運(yùn)動(dòng)的動(dòng)畫形式被稱為“路徑動(dòng)畫”。這種動(dòng)畫視圖可以使一個(gè)或多個(gè)對(duì)象完成曲線或不規(guī)則運(yùn)動(dòng)
元件
元件是指可以重復(fù)來利用的圖形，動(dòng)畫片段或按鈕，保存在“庫”面板中。在制作動(dòng)畫的過程中，將需要的元件從“庫”面板中拖拽到場(chǎng)景上，場(chǎng)景中的對(duì)象成為該元件的一個(gè)實(shí)例。如果庫中的元件發(fā)生改變（如對(duì)元件重新編輯），則元件的實(shí)例也會(huì)隨之變化。同時(shí)，實(shí)例可以具備自己的個(gè)性，它的更改不會(huì)影響庫中的元件本身。
元件優(yōu)點(diǎn)：可以重復(fù)利用；便于大量制作；有助于減少影片文件的大小
元件的類型：影片剪輯元件；按鈕元件；圖形元件
