網(wǎng)頁(yè)設(shè)計(jì)與制作

目　錄

項(xiàng)目活動(dòng)一　初識(shí)網(wǎng)頁(yè)　1
任務(wù)一　優(yōu)秀網(wǎng)頁(yè)賞析　1
一、優(yōu)秀網(wǎng)頁(yè)賞析　2
二、網(wǎng)頁(yè)的版面布局　3
三、網(wǎng)頁(yè)的色彩搭配　5
四、網(wǎng)頁(yè)的基本元素　7
成長(zhǎng)加油站　9
實(shí)踐演練　網(wǎng)頁(yè)賞析　9
任務(wù)二　瀏覽網(wǎng)頁(yè)　10
一、WWW服務(wù)　11
二、認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站　11
三、靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)　14
四、常用網(wǎng)頁(yè)設(shè)計(jì)軟件　15
實(shí)踐演練　淘寶網(wǎng)頁(yè)面體驗(yàn)　16

項(xiàng)目活動(dòng)二　Dreamweaver初體驗(yàn)　18
任務(wù)一　創(chuàng)建和管理站點(diǎn)　18
一、Dreamweaver的工作環(huán)境　19
二、站點(diǎn)的創(chuàng)建與管理　20
三、網(wǎng)頁(yè)頁(yè)面屬性的設(shè)置　26
成長(zhǎng)加油站　Dreamweaver的操作界面　27
實(shí)踐演練　膠南旅游——膠南民間藝術(shù)網(wǎng)頁(yè)　28
任務(wù)二　HTML語(yǔ)言　30
HTML標(biāo)記　30
成長(zhǎng)加油站　HTML結(jié)構(gòu)　33
實(shí)踐演練　珠山秀色掩古剎網(wǎng)頁(yè)　33
任務(wù)三　文本操作　35
一、在網(wǎng)頁(yè)中輸入與編輯文本　36
二、在網(wǎng)頁(yè)中添加與編輯列表　37
代碼解讀　HTML的列表標(biāo)記　40
實(shí)踐演練　大珠山·小珠山網(wǎng)頁(yè)　40
任務(wù)四　圖像操作　41
一、在網(wǎng)頁(yè)中插入和編輯圖像　42
二、設(shè)置交換圖像　43
三、設(shè)置圖像導(dǎo)航條　44
成長(zhǎng)加油站　圖像文件的格式　46
實(shí)踐演練　美圖膠南網(wǎng)頁(yè)　47

項(xiàng)目活動(dòng)三　表格布局　49
任務(wù)一　表格的基本操作　49
成長(zhǎng)加油站　表格的基本操作　51
代碼解讀　52
任務(wù)二　表格屬性的設(shè)置　52
成長(zhǎng)加油站　表格相關(guān)成長(zhǎng)　54
一、表格的屬性　54
二、單元格屬性　56
三、表格常用的裝飾方法　56
實(shí)踐演練　青島西海岸度假勝地　57

項(xiàng)目活動(dòng)四　布局表格　59
任務(wù)　設(shè)置跟蹤圖像　59
成長(zhǎng)加油站　跟蹤圖像相關(guān)成長(zhǎng)　61
一、什么是跟蹤圖像　61
二、跟蹤圖像的優(yōu)點(diǎn)　61
三、設(shè)置跟蹤圖像的步驟　62
實(shí)踐演練　青島西海岸度假勝地　63

項(xiàng)目活動(dòng)五　層的布局　64
任務(wù)一　創(chuàng)建層　64
成長(zhǎng)加油站　層屬性的設(shè)置　65
一、層的創(chuàng)建　65
二、屬性的設(shè)置　65
任務(wù)二　應(yīng)用層　68
成長(zhǎng)加油站　層的應(yīng)用　70
代碼解讀　HTML的層標(biāo)記　70
實(shí)踐演練　青島西海岸度假勝地　71

項(xiàng)目活動(dòng)六　框架頁(yè)面設(shè)計(jì)與制作　73
任務(wù)　使用框架制作網(wǎng)頁(yè)　73
成長(zhǎng)加油站　框架相關(guān)知識(shí)　77
代碼解讀　框架代碼和浮動(dòng)框架代碼　78
實(shí)踐演練　青島西海岸度假勝地　79

項(xiàng)目活動(dòng)七　超鏈接與導(dǎo)航欄　81
任務(wù)一　常見(jiàn)的幾種超鏈接　81
成長(zhǎng)加油站　超鏈接的概念和路徑　84
代碼解讀　　84
任務(wù)二　導(dǎo)航條超鏈接的設(shè)置　84
成長(zhǎng)加油站　超鏈接的分類　88
一、超鏈接的分類(按要鏈接的文件所處的位置分類)　88
二、超鏈接的創(chuàng)建　88
實(shí)踐演練　青島西海岸度假勝地　89

項(xiàng)目活動(dòng)八　網(wǎng)頁(yè)中的動(dòng)感元素　90
任務(wù)一　Flash文本　90
成長(zhǎng)加油站　插入Flash文本對(duì)象　91
任務(wù)二　Flash按鈕　92
成長(zhǎng)加油站　插入Flash按鈕　93
任務(wù)三　插入Shockwave影片　94
成長(zhǎng)加油站　Shockwave影片的插入　96
代碼解讀　Flash動(dòng)畫標(biāo)記　97
實(shí)踐演練　青島西海岸度假勝地　97

項(xiàng)目活動(dòng)九　模板和庫(kù)　99
任務(wù)一　模板的創(chuàng)建　99
成長(zhǎng)加油站　模板相關(guān)成長(zhǎng)　101
一、模板簡(jiǎn)介　101
二、創(chuàng)建模板　101
任務(wù)二　應(yīng)用模板制作網(wǎng)頁(yè)　103
成長(zhǎng)加油站　105
一、用模板創(chuàng)建網(wǎng)頁(yè)　105
二、利用模板更新頁(yè)面　105
三、與模板脫離　105
任務(wù)三　庫(kù)在網(wǎng)頁(yè)制作中的應(yīng)用　105
成長(zhǎng)加油站　庫(kù)的基礎(chǔ)知識(shí)　　106
實(shí)踐演練　青島西海岸度假勝地　107

項(xiàng)目活動(dòng)十　表單頁(yè)面設(shè)計(jì)與制作　109
任務(wù)　表單的制作　109
成長(zhǎng)加油站　表單相關(guān)成長(zhǎng)　　114
一、表單　114
二、設(shè)置表單結(jié)果的處理方式　115
代碼解讀　表單標(biāo)記　115
實(shí)踐演練　留言板　117

項(xiàng)目活動(dòng)十一　用CSS美化網(wǎng)頁(yè)　118
任務(wù)一　使用CSS樣式美化網(wǎng)頁(yè)文本　118
成長(zhǎng)加油站　CSS其他美化設(shè)置　119
任務(wù)二　使用CSS樣式美化表單　120
一、新建CSS樣式　120
二、將CSS樣式添加到頁(yè)面　122
三、修改邊框效果　122
四、添加各種不同的邊框效果　123
成長(zhǎng)加油站　CSS相關(guān)成長(zhǎng)　125
一、CSS的基本語(yǔ)法　125
二、建立CSS樣式　126
三、在網(wǎng)頁(yè)中插入CSS的方法　126
代碼解讀　去掉文字超鏈接的下畫線和顏色的HTML代碼　126
實(shí)踐演練　珠山秀色掩古剎　127

項(xiàng)目活動(dòng)十二　特效頁(yè)面設(shè)計(jì)與制作　129
任務(wù)一　浮動(dòng)圖片的制作　129
任務(wù)二　彈出窗口的制作　132
成長(zhǎng)加油站　行為和事件的相關(guān)成長(zhǎng)　134
代碼解讀　調(diào)用JavaScript代碼　135
一、JavaScript代碼如何加入html頁(yè)面中　135
二、外部獨(dú)立的JS文件，鏈入html代碼中，JS文件名通常是“文件名.js”　135
實(shí)踐演練　青島西海岸度假勝地　136

項(xiàng)目活動(dòng)十三　整站開(kāi)發(fā)案例解析　137
任務(wù)一　讀書網(wǎng)案例解析　137
一、讀書網(wǎng)　138
二、編輯首頁(yè)頁(yè)面　139
三、次頁(yè)面的編輯　143
任務(wù)二　尚實(shí)教育網(wǎng)案例解析　145
任務(wù)三　電子相冊(cè)案例解析　151
實(shí)踐演練　美化網(wǎng)頁(yè)　155

項(xiàng)目活動(dòng)十四　發(fā)布與維護(hù)網(wǎng)站　156
任務(wù)一　網(wǎng)站的發(fā)布　156
一、發(fā)布站點(diǎn)前的準(zhǔn)備工作　157
二、發(fā)布網(wǎng)站　160
成長(zhǎng)加油站　虛擬主機(jī)　161
任務(wù)二　站點(diǎn)的日常維護(hù)　163
成長(zhǎng)加油站　網(wǎng)站維護(hù)的主要內(nèi)容　163
實(shí)踐演練　發(fā)布“膠南旅游網(wǎng)”網(wǎng)站　164
拓展提高　網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)的借鑒與模仿　165
一、網(wǎng)頁(yè)藝術(shù)設(shè)計(jì)　165
二、借鑒和模仿　168
實(shí)訓(xùn)參考實(shí)例　170
實(shí)例一　旅游信息類網(wǎng)站——瑯琊臺(tái)旅游網(wǎng)網(wǎng)站　170
一、制作瑯琊臺(tái)旅游網(wǎng)首頁(yè)　170
二、制作二級(jí)公司介紹頁(yè)面　177
實(shí)例二　網(wǎng)上商城類網(wǎng)站——茶園網(wǎng)站前臺(tái)制作　179
一、建立“茶園”站點(diǎn)　180
二、“茶園”首頁(yè)制作　183