網(wǎng)頁(yè)設(shè)計(jì)與制作任務(wù)驅(qū)動(dòng)式教程

前言
單元1網(wǎng)頁(yè)認(rèn)識(shí)
任務(wù)1.1確立課程目標(biāo)
1.1.1行業(yè)需求前景
1.1.2行業(yè)需求目標(biāo)
任務(wù)1.2優(yōu)秀網(wǎng)站賞析
1.2.1門(mén)戶(hù)類(lèi)網(wǎng)站
1.2.2商務(wù)類(lèi)網(wǎng)站
1.2.3政府類(lèi)網(wǎng)站
1.2.4娛樂(lè)類(lèi)網(wǎng)站
1.2.5游戲類(lèi)網(wǎng)站
1.2.6“遠(yuǎn)航多彩公司”項(xiàng)目案例
實(shí)驗(yàn)環(huán)節(jié)設(shè)計(jì)
實(shí)驗(yàn)：查找門(mén)戶(hù)類(lèi)網(wǎng)站并分析其特點(diǎn)及架構(gòu)
強(qiáng)化案例：查找電子商務(wù)類(lèi)網(wǎng)站并分析其特點(diǎn)及架構(gòu)
課后習(xí)題
單元2網(wǎng)站策劃
任務(wù)2.1項(xiàng)目引入
2.1.1“遠(yuǎn)航多彩公司”網(wǎng)站開(kāi)發(fā)立項(xiàng)
2.1.2確立設(shè)計(jì)項(xiàng)目的3項(xiàng)原則
2.1.3確定設(shè)計(jì)流程
任務(wù)2.2“遠(yuǎn)航多彩公司”網(wǎng)站策劃
2.2.1確定設(shè)計(jì)策略
2.2.2確定網(wǎng)頁(yè)主題
2.2.3網(wǎng)頁(yè)元素
2.2.4網(wǎng)頁(yè)布局
2.2.5視覺(jué)效果
2.2.6設(shè)計(jì)標(biāo)準(zhǔn)
2.2.7外觀(guān)風(fēng)格
任務(wù)2.3初識(shí)網(wǎng)頁(yè)
2.3.1網(wǎng)站的相關(guān)知識(shí)
2.3.2網(wǎng)頁(yè)中的基本元素與常用術(shù)語(yǔ)
2.3.3靜態(tài)網(wǎng)頁(yè)與動(dòng)態(tài)網(wǎng)頁(yè)
2.3.4網(wǎng)頁(yè)制作的常用軟件
任務(wù)2.4認(rèn)識(shí)網(wǎng)頁(yè)基礎(chǔ)語(yǔ)言
2.4.1關(guān)于HTML
2.4.2了解HTML的基本結(jié)構(gòu)
任務(wù)2.5Dreamweaver CS5簡(jiǎn)介
2.5.1Dreamweaver CS5概述
2.5.2Dreamweaver CS5的新增功能
2.5.3Dreamweaver CS5的操作界面
2.5.4網(wǎng)頁(yè)文檔的基本操作
任務(wù)2.6“遠(yuǎn)航多彩公司”網(wǎng)站欄目結(jié)構(gòu)設(shè)計(jì)
2.6.1創(chuàng)建本地站點(diǎn)與遠(yuǎn)程站點(diǎn)
2.6.2Dreamweaver CS5站點(diǎn)的組成
2.6.3創(chuàng)建站點(diǎn)
2.6.4網(wǎng)站建立目錄規(guī)范
2.6.5網(wǎng)站文件命名規(guī)范
實(shí)驗(yàn)環(huán)節(jié)設(shè)計(jì)
實(shí)驗(yàn)1：用HTML創(chuàng)建表格
實(shí)驗(yàn)2：為“遠(yuǎn)航多彩公司”創(chuàng)建一個(gè)網(wǎng)站的站點(diǎn)
強(qiáng)化案例：建立一個(gè)班級(jí)站點(diǎn)
課后習(xí)題
單元3網(wǎng)頁(yè)布局
任務(wù)3.1使用表格布局頁(yè)面
3.1.1規(guī)劃“相約校園招聘”頁(yè)面表格結(jié)構(gòu)
3.1.2制作頁(yè)眉區(qū)
3.1.3制作主體區(qū)
3.1.4制作版權(quán)區(qū)
3.1.5創(chuàng)建表格
3.1.6編輯表格
3.1.7設(shè)置表格屬性
任務(wù)3.2使用Div+CSS布局頁(yè)面
3.2.1了解CSS
3.2.2創(chuàng)建和管理CSS
3.2.3認(rèn)識(shí)Div標(biāo)簽
3.2.4插入和編輯Div標(biāo)簽
3.2.5使用Div+CSS布局網(wǎng)頁(yè)
3.2.6使用AP Div元素
任務(wù)3.3使用框架布局頁(yè)面
3.3.1創(chuàng)建框架和框架集
3.3.2框架和框架集的基本操作
3.3.3設(shè)置框架和框架集屬性
3.3.4保存框架和框架集
3.3.5制作浮動(dòng)框架頁(yè)面
任務(wù)3.4使用Fireworks切片布局
3.4.1切片概述
3.4.2切片的創(chuàng)建與編輯
3.4.3使用切片布局網(wǎng)頁(yè)
實(shí)驗(yàn)環(huán)節(jié)設(shè)計(jì)
實(shí)驗(yàn)1：CSS制作鼠標(biāo)經(jīng)過(guò)時(shí)改變表格背景屬性
實(shí)驗(yàn)2：使用切片布局網(wǎng)頁(yè)
強(qiáng)化案例：利用HTML代碼或JavaScript代碼，在DW中制作浮動(dòng)層
課后習(xí)題
單元4頁(yè)面制作
任務(wù)4.1“遠(yuǎn)航多彩公司”網(wǎng)站首頁(yè)制作
4.1.1網(wǎng)頁(yè)文本的輸入與編輯
4.1.2使用圖像美化頁(yè)面
4.1.3創(chuàng)建網(wǎng)頁(yè)超鏈接
4.1.4插入Flash動(dòng)畫(huà)
4.1.5插入聲音和視頻
任務(wù)4.2利用表單制作客戶(hù)反饋?lái)?yè)面
4.2.1初識(shí)表單
4.2.2插入表單
4.2.3插入表單對(duì)象
4.2.4插入Spry對(duì)象
實(shí)驗(yàn)環(huán)節(jié)設(shè)計(jì)
實(shí)驗(yàn)1：添加網(wǎng)頁(yè)背景音樂(lè)
實(shí)驗(yàn)2：命名錨記鏈接，網(wǎng)絡(luò)小說(shuō)頁(yè)面的制作
強(qiáng)化案例：添加 Spry 效果
課后習(xí)題
單元5網(wǎng)頁(yè)批量制作
任務(wù)5.1利用模板批量制作網(wǎng)站頁(yè)面
5.1.1創(chuàng)建并保存模板文檔
5.1.2基于模板創(chuàng)建“公司簡(jiǎn)介”頁(yè)面
任務(wù)5.2利用模板更新網(wǎng)頁(yè)
任務(wù)5.3管理資源和庫(kù)
5.3.1使用資源
5.3.2庫(kù)項(xiàng)目基本知識(shí)
5.3.3創(chuàng)建庫(kù)項(xiàng)目
5.3.4應(yīng)用庫(kù)項(xiàng)目
5.3.5編輯庫(kù)項(xiàng)目
任務(wù)5.4在網(wǎng)頁(yè)中添加行為
5.4.1認(rèn)識(shí)行為
5.4.2應(yīng)用行為
實(shí)驗(yàn)環(huán)節(jié)設(shè)計(jì)
實(shí)驗(yàn)1：如何在Dreamweaver中導(dǎo)入網(wǎng)絡(luò)上下載的模板
實(shí)驗(yàn)2：應(yīng)用模板制作網(wǎng)站中的其他子頁(yè)
強(qiáng)化案例：晃動(dòng)圖片
課后習(xí)題
單元6制作網(wǎng)頁(yè)特效
任務(wù)6.1文字特效
6.1.1光暈字制作
6.1.2陰影字制作
6.1.3遮罩字制作
6.1.4動(dòng)感字制作
任務(wù)6.2制作彈出窗口
任務(wù)6.3制作循環(huán)滾動(dòng)文字/圖片
任務(wù)6.4細(xì)線(xiàn)表格的制作
任務(wù)6.5制作廣告圖片自動(dòng)輪換顯示
任務(wù)6.6浮動(dòng)廣告制作
任務(wù)6.7制作圖片放大特效
任務(wù)6.8標(biāo)簽內(nèi)容切換制作
任務(wù)6.9制作拼圖游戲
任務(wù)6.10限制選擇復(fù)選框的數(shù)量
任務(wù)6.11檢驗(yàn)表單
單元7網(wǎng)站測(cè)試與發(fā)布
任務(wù)7.1測(cè)試網(wǎng)站
7.1.1站點(diǎn)中鏈接的測(cè)試
7.1.2改變站點(diǎn)范圍的鏈接
7.1.3瀏覽器兼容性檢查
7.1.4全面檢查站點(diǎn)的報(bào)告
7.1.5用戶(hù)界面可用性測(cè)試
7.1.6清理文檔
任務(wù)7.2發(fā)布站點(diǎn)
7.2.1域名的申請(qǐng)
7.2.2服務(wù)器空間選擇方案
7.2.3配置Web和FTP服務(wù)器
7.2.4使用Dreamweaver CS5上傳、下載網(wǎng)站
7.2.5使用CuteFTP上傳
7.2.6網(wǎng)站維護(hù)與推廣
實(shí)驗(yàn)環(huán)節(jié)設(shè)計(jì)
實(shí)驗(yàn)1： 利用Dreamweaver測(cè)試工具對(duì)自己的站點(diǎn)進(jìn)行測(cè)試
實(shí)驗(yàn)2：利用Dreamweaver自帶的FTP功能上傳文件
強(qiáng)化案例：網(wǎng)站同步
課后習(xí)題
參考文獻(xiàn)