網(wǎng)頁(yè)設(shè)計(jì)與制作大綱(常用版)

網(wǎng)頁(yè)設(shè)計(jì)與制作大綱（常用版）(可以直接使用，可編輯完整版資料，歡迎下載）

《網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)教程》大綱網(wǎng)頁(yè)設(shè)計(jì)與制作大綱（常用版）(可以直接使用，可編輯完整版資料，歡迎下載）一、課程的地位與性質(zhì)“網(wǎng)頁(yè)設(shè)計(jì)與制作”是高職動(dòng)漫設(shè)計(jì)與制作專業(yè)的職業(yè)技術(shù)課程，重點(diǎn)講述網(wǎng)頁(yè)設(shè)計(jì)與制作的基礎(chǔ)知識(shí)、基本理論和基本技能，是一門(mén)包含了網(wǎng)頁(yè)、網(wǎng)站的概念、網(wǎng)頁(yè)主要工具軟件HTML、dreamweaver中文版的使用等諸多知識(shí)的操作性極強(qiáng)的技能型應(yīng)用課程。“網(wǎng)頁(yè)設(shè)計(jì)與制作”以“信息技術(shù)與應(yīng)用”和“計(jì)算機(jī)輔助平面設(shè)計(jì)”為前期基礎(chǔ)課程。二、課程的任務(wù)與目的通過(guò)對(duì)網(wǎng)頁(yè)設(shè)計(jì)與制作基礎(chǔ)知識(shí)和技能的學(xué)習(xí),使學(xué)生系統(tǒng)了解網(wǎng)頁(yè)、網(wǎng)站的概念、網(wǎng)頁(yè)主要工具軟件dreamweaver的使用等基礎(chǔ)知識(shí)，熟練運(yùn)用網(wǎng)頁(yè)制作的工具軟件，使學(xué)生具有網(wǎng)頁(yè)、網(wǎng)站制作的知識(shí)與能力，具備應(yīng)用電腦獨(dú)立開(kāi)發(fā)網(wǎng)頁(yè)、網(wǎng)站并將網(wǎng)站上傳并測(cè)試的技能，具備解決網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站開(kāi)發(fā)中出現(xiàn)各種問(wèn)題的能力。本課程培養(yǎng)學(xué)生的職業(yè)素養(yǎng)和創(chuàng)新能力，為日后走向工作崗位打下理論與實(shí)踐基礎(chǔ)。通過(guò)本課程的學(xué)習(xí)實(shí)現(xiàn)學(xué)生思想過(guò)硬、理論基礎(chǔ)扎實(shí)、實(shí)際工作能力強(qiáng)的教學(xué)目標(biāo)。三、課程總體結(jié)構(gòu)、教學(xué)環(huán)節(jié)和課時(shí)分配章課程內(nèi)容課時(shí)小計(jì)講授實(shí)驗(yàn)案例其他1Intelnet和www660002HTML基礎(chǔ)808003網(wǎng)頁(yè)規(guī)劃和網(wǎng)頁(yè)設(shè)計(jì)606004網(wǎng)頁(yè)制作與編程工具404005建立本地站點(diǎn)404006制作第一個(gè)網(wǎng)頁(yè)404007表格及其應(yīng)用404008CSS基礎(chǔ)及應(yīng)用4049框架基礎(chǔ)及應(yīng)用40410行為及應(yīng)用20211層與動(dòng)畫(huà)40412JavaScript編程基礎(chǔ)60613實(shí)例網(wǎng)站制作40414復(fù)習(xí)220合計(jì)62854四、教學(xué)內(nèi)容第一章概述6學(xué)時(shí)教學(xué)目的：掌握HTML的基本語(yǔ)法、學(xué)會(huì)用HTML編寫(xiě)簡(jiǎn)單網(wǎng)頁(yè)。教學(xué)重點(diǎn)與難點(diǎn)：HTML的基本語(yǔ)法、HTML的主要標(biāo)記、表格標(biāo)記及其屬性、超級(jí)連接標(biāo)記。第一節(jié)Internet簡(jiǎn)介一、Internet的歷史二、Internet的網(wǎng)絡(luò)結(jié)構(gòu)三、Internet的應(yīng)用第二節(jié)Internet的IP地址與域名一、IP地址及結(jié)構(gòu)二、IP地址分類三、IP地址的特殊屬性四、域名系統(tǒng)第三節(jié)Web站點(diǎn)和網(wǎng)頁(yè)一、Web站點(diǎn)和網(wǎng)頁(yè)二、Web的運(yùn)行機(jī)制第二章HTML基礎(chǔ)8學(xué)時(shí)教學(xué)目的：掌握HTML的基本語(yǔ)法、學(xué)會(huì)用HTML編寫(xiě)簡(jiǎn)單網(wǎng)頁(yè)。教學(xué)重點(diǎn)與難點(diǎn)：HTML的基本語(yǔ)法、HTML的主要標(biāo)記、表格標(biāo)記及其屬性、超級(jí)連接標(biāo)記。第一節(jié)HTML簡(jiǎn)介一、HTML的特點(diǎn)二、HTML的基本框架第二節(jié)HTML編程入門(mén)一、HTML程序結(jié)構(gòu)二、編寫(xiě)一個(gè)簡(jiǎn)單網(wǎng)頁(yè)第三節(jié)常用HTML標(biāo)記一、文本相關(guān)標(biāo)記二、圖片的HTML標(biāo)記三、層的HTML標(biāo)記四、滾動(dòng)標(biāo)記第四節(jié)列表標(biāo)記一、無(wú)序列表二、有序列表三、定義列表第五節(jié)表格標(biāo)記和屬性第六節(jié)超級(jí)連接一、程序編寫(xiě)步驟二、程序清單第七節(jié)支持多媒體一、插入音樂(lè)文件二、插入視屏文件第三章網(wǎng)站規(guī)劃和網(wǎng)頁(yè)設(shè)計(jì)6學(xué)時(shí)教學(xué)目的：掌握網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站規(guī)劃的基本方法。教學(xué)重點(diǎn)與難點(diǎn)：網(wǎng)站規(guī)劃、網(wǎng)站內(nèi)容組織和導(dǎo)航、網(wǎng)頁(yè)色彩設(shè)計(jì)、網(wǎng)頁(yè)版面設(shè)計(jì)第一節(jié)網(wǎng)站規(guī)劃一、網(wǎng)站內(nèi)容規(guī)劃二、題材的選擇與定位第二節(jié)網(wǎng)站創(chuàng)意和風(fēng)格一、設(shè)計(jì)創(chuàng)意的獲得二、確定網(wǎng)站風(fēng)格三、網(wǎng)站內(nèi)容組織第三節(jié)頁(yè)面內(nèi)容設(shè)計(jì)一、頁(yè)面整體視覺(jué)效果二、頁(yè)面內(nèi)容編排第四節(jié)信息結(jié)構(gòu)和導(dǎo)航設(shè)計(jì)一、網(wǎng)站的信息結(jié)構(gòu)二、網(wǎng)站導(dǎo)航設(shè)計(jì)第五節(jié)網(wǎng)站首頁(yè)設(shè)計(jì)一、確定網(wǎng)站首頁(yè)功能模塊二、設(shè)計(jì)首頁(yè)的版面第六節(jié)網(wǎng)頁(yè)色彩一、色彩的視覺(jué)效果二、頁(yè)面色彩搭配三、HTML的色彩屬性值第四章網(wǎng)頁(yè)制作與編程工具4學(xué)時(shí)教學(xué)目的：掌握DreamweaverMX工作區(qū)、菜單的基本使用方法。教學(xué)重點(diǎn)與難點(diǎn)：DreamweaverMX開(kāi)發(fā)環(huán)境的界面布局與基本操作。第一節(jié)DreamweaverMX網(wǎng)頁(yè)開(kāi)發(fā)環(huán)境一、選擇工作區(qū)二、工作區(qū)窗口三、面板組和屬性檢查器四、編輯代碼和視圖切換第二節(jié)其他相關(guān)工具第三節(jié)圖片處理基礎(chǔ)一、網(wǎng)頁(yè)圖像文件格式二、圖片的Web格式第五章建立本地站點(diǎn)4學(xué)時(shí)教學(xué)目的：掌握在Dreamweaver中建立和維護(hù)站點(diǎn)的方法教學(xué)重點(diǎn)與難點(diǎn)：在Dreamweaver中建立站點(diǎn)并維護(hù)站點(diǎn)第一節(jié)網(wǎng)站文件結(jié)構(gòu)一、網(wǎng)站名稱二、設(shè)計(jì)站點(diǎn)結(jié)構(gòu)第二節(jié)在Dreamweaver中定義站點(diǎn)第三節(jié)維護(hù)和管理站點(diǎn)一、站點(diǎn)面板二、編輯和刪除站點(diǎn)三、在站點(diǎn)中操作文件第四節(jié)制作網(wǎng)頁(yè)的基本流程第六章制作第一個(gè)網(wǎng)頁(yè)4學(xué)時(shí)教學(xué)目的：掌握各種網(wǎng)頁(yè)元素及其屬性的設(shè)置方法第一節(jié)實(shí)訓(xùn)準(zhǔn)備第二節(jié)文本元素一、文本輸入二、設(shè)置文本屬性第三節(jié)圖像元素一、插入圖象二、設(shè)置圖像的屬性第四節(jié)超級(jí)鏈接一、文本超級(jí)鏈接二、錨點(diǎn)鏈接三、郵件鏈接四、創(chuàng)建空鏈接和腳本鏈接五、圖片超級(jí)鏈接六、翻轉(zhuǎn)圖片鏈接第五節(jié)flash元素一、插入flash按鈕二、插入flash文本三、插入flash動(dòng)畫(huà)第七章表格及其應(yīng)用4學(xué)時(shí)教學(xué)目的：掌握表格的基本操作方法。第一節(jié)實(shí)訓(xùn)準(zhǔn)備第二節(jié)表格基礎(chǔ)一、表格的基本操作二、設(shè)置表格屬性三、設(shè)置單元格屬性四、表格的修改五、在表格中插入元素第三節(jié)表格排版技術(shù)一、表格排版二、用表格制作細(xì)線第四節(jié)表格技巧和應(yīng)用一、制作細(xì)線表框二、制作圓角表格三、制作陰影表格四、處理表格數(shù)據(jù)第五節(jié)實(shí)例表格布局步驟第八章CSS基礎(chǔ)及應(yīng)用4學(xué)時(shí)教學(xué)目的：掌握CSS的基本概念，掌握用Dreamweaver定義CSS樣式的方法，能按給定的樣式規(guī)格說(shuō)明制作符合設(shè)計(jì)要求的CSS樣式，并能對(duì)樣式進(jìn)行修改和引用。第一節(jié)CSS基礎(chǔ)知識(shí)一、CSS的語(yǔ)法規(guī)則二、在網(wǎng)頁(yè)中添加CSS樣式第二節(jié)Dreamweaver中的CSS一、新建樣式和樣式文件二、設(shè)置樣式參數(shù)三、編輯CSS樣式參數(shù)四、引用CSS樣式五、附加樣式表六、利用CSS浮動(dòng)面板第三節(jié)CSS應(yīng)用一、用CSS修飾文本二、改變超級(jí)鏈接的樣式三、用CSS美化表格第四節(jié)CSS的擴(kuò)展屬性一、陰影濾波器二、alpha濾波器第九章框架基礎(chǔ)及應(yīng)用4學(xué)時(shí)教學(xué)目的：掌握框架的基本概念和操作方法，會(huì)用框架制作網(wǎng)頁(yè)；掌握設(shè)置和修改框架屬性的方法，以及框架頁(yè)面導(dǎo)航的鏈接方法第一節(jié)框架介紹一、實(shí)例設(shè)計(jì)說(shuō)明二、創(chuàng)建框架集三、保存框架四、框架浮動(dòng)面板和屬性設(shè)置第二節(jié)實(shí)例框架制作一、素材準(zhǔn)備二、布局分析三、實(shí)現(xiàn)方法和步驟第三節(jié)內(nèi)嵌框架第十章行為及應(yīng)用2學(xué)時(shí)教學(xué)目的：理解行為的工作原理，掌握事件和動(dòng)作等基本概念；掌握行為面板的使用方法；掌握常用事件和動(dòng)作的添加方法。第一節(jié)行為面板的使用第二節(jié)添加行為一、播放聲音二、彈出消息窗口三、彈出公告牌窗口四、改變對(duì)象屬性五、檢查插件六、顯示/隱藏層七、交換多張圖片八、拖動(dòng)層第十一章層與動(dòng)畫(huà)4學(xué)時(shí)教學(xué)目的：掌握層、層面板的操作方法；掌握層的屬性設(shè)置方法，層與表格的轉(zhuǎn)換方法。掌握層、動(dòng)畫(huà)、行為等技術(shù)的綜合應(yīng)用方法。第一節(jié)層的屬性設(shè)置與操作一、創(chuàng)建層的方法二、層的屬性設(shè)置三、層的操作四、層的浮動(dòng)面板第二節(jié)用層制作拼圖游戲第三節(jié)用層制作下拉菜單第四節(jié)網(wǎng)頁(yè)動(dòng)畫(huà) 一、時(shí)間軸面板二、時(shí)間軸動(dòng)畫(huà)三、制作浮動(dòng)廣告第十二章JavaScript編程基礎(chǔ)6學(xué)時(shí)教學(xué)目的：了解JavaScript語(yǔ)言基本知識(shí)，掌握J(rèn)avaScript程序的網(wǎng)頁(yè)應(yīng)用方法。教學(xué)重點(diǎn)與難點(diǎn)：JavaScript的基本數(shù)據(jù)類型和程序結(jié)構(gòu)、自定義函數(shù)及調(diào)用、常用內(nèi)部對(duì)象、JavaScript程序的網(wǎng)頁(yè)應(yīng)用方法。第一節(jié)JavaScript語(yǔ)言的特點(diǎn)第二節(jié)JavaScript和Java的區(qū)別第三節(jié)在網(wǎng)頁(yè)中嵌入JavaScript程序一、JavaScript的開(kāi)始于結(jié)束標(biāo)記二、在JavaScript中使用注釋標(biāo)記第四節(jié)JavaScript的基本數(shù)據(jù)類型一、常量二、變量第五節(jié)程序結(jié)構(gòu)一、分支結(jié)構(gòu)二、循環(huán)結(jié)構(gòu)第六節(jié)自定義函數(shù)一、函數(shù)的構(gòu)成二、函數(shù)的定義和調(diào)用三、鏈接JavaScript腳本程序四、JavaScript的內(nèi)部函數(shù)五、函數(shù)的返回值第七節(jié)JavaScript的內(nèi)部對(duì)象一、數(shù)組對(duì)象Array二、日期對(duì)象Date三、數(shù)學(xué)對(duì)象Math四、字符串對(duì)象String第十三章實(shí)例網(wǎng)站制作6學(xué)時(shí)教學(xué)重點(diǎn)與難點(diǎn)：實(shí)例網(wǎng)站設(shè)計(jì)說(shuō)明、制作和程序應(yīng)用詳解第一節(jié)實(shí)例說(shuō)明一、設(shè)計(jì)說(shuō)明二、實(shí)例圖解第二節(jié)創(chuàng)建實(shí)訓(xùn)網(wǎng)站一、網(wǎng)站結(jié)構(gòu)設(shè)計(jì)二、建立站點(diǎn)三、站點(diǎn)結(jié)構(gòu)實(shí)現(xiàn)第三節(jié)制作第一個(gè)網(wǎng)頁(yè)一、制作準(zhǔn)備二、頁(yè)面布局分析三、制作步驟與參數(shù)四、CSS樣式規(guī)格第四節(jié)制作第二個(gè)網(wǎng)頁(yè)一、制作準(zhǔn)備二、頁(yè)面布局分析三、制作步驟與參數(shù)四、制作圖片熱區(qū)鏈接五、網(wǎng)站鏈接結(jié)構(gòu)第五節(jié)制作第三個(gè)網(wǎng)頁(yè)一、制作準(zhǔn)備二、頁(yè)面布局示意三、制作步驟與參數(shù)四、設(shè)置文本的CSS第六節(jié)制作第四個(gè)網(wǎng)頁(yè)一、制作準(zhǔn)備二、頁(yè)面布局示意三、制作步驟與參數(shù)四、時(shí)間軸面板的操作方法第七節(jié)制作第五個(gè)網(wǎng)頁(yè)一、制作準(zhǔn)備二、頁(yè)面布局分析三、制作步驟與參數(shù)四、制作時(shí)間軸動(dòng)畫(huà)第八節(jié)制作第六個(gè)網(wǎng)頁(yè)一、制作準(zhǔn)備二、頁(yè)面布局分析三、制作步驟與參數(shù)第九節(jié)程序應(yīng)用：交換圖片 一、程序應(yīng)用背景 二、程序源碼與說(shuō)明 三、使用程序的步驟第十節(jié)程序應(yīng)用：圖片漸顯漸隱 一、程序應(yīng)用背景二、程序說(shuō)明與應(yīng)用1三、程序說(shuō)明與應(yīng)用2四、程序說(shuō)明與應(yīng)用3第十一節(jié)程序應(yīng)用：圖片旋轉(zhuǎn)運(yùn)動(dòng)一、程序應(yīng)用背景二、程序源碼與說(shuō)明 三、使用程序的步驟第十二節(jié)網(wǎng)頁(yè)背景移動(dòng)與音樂(lè)第十三節(jié)程序應(yīng)用：星光閃入一、程序應(yīng)用背景二、程序說(shuō)明與使用五、教學(xué)建議1、必須以實(shí)際出發(fā)，密切聯(lián)系當(dāng)前網(wǎng)絡(luò)的實(shí)際情況，要按照洋為中用、外為我用的精神，認(rèn)真學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)知識(shí)，加強(qiáng)動(dòng)手能力的培養(yǎng)，不斷提高解決實(shí)際問(wèn)題的能力。2、在學(xué)習(xí)中不僅要注重HTML和dreamweaver基本知識(shí)的掌握，還要對(duì)網(wǎng)頁(yè)的主要概念和操作內(nèi)容進(jìn)行模擬和訓(xùn)練，通過(guò)課堂學(xué)習(xí)、課后練習(xí)和模擬實(shí)驗(yàn)、實(shí)訓(xùn)及到業(yè)務(wù)部門(mén)實(shí)習(xí)，使基本技能的訓(xùn)練得到加強(qiáng)，培養(yǎng)學(xué)生實(shí)際操作的能力。3、考試：①考試形式：無(wú)紙化考試,實(shí)驗(yàn)課考試。②評(píng)卷標(biāo)準(zhǔn)：60%期末卷面+40%平時(shí)成績(jī)及上機(jī)操作六、使用說(shuō)明本大綱適用于電子商務(wù)專業(yè)。本大綱推薦使用的教材為《網(wǎng)頁(yè)設(shè)計(jì)與制作實(shí)訓(xùn)教程》（中國(guó)水利水電社出版，白征、李云程主編，21世紀(jì)高職高專新概念教材，2006年7月出版）編寫(xiě)人：（簽字）董華亮教研室主任：（簽字）系（部）主任：（簽字）編寫(xiě)日期:200執(zhí)行日期:200網(wǎng)頁(yè)的設(shè)計(jì)與制作第27卷第10期

2021年10月

赤峰學(xué)院(自然科學(xué)版)

JournalofChifengUniversity(NaturalScienceEdition)

V01.27No.1O

0et.2021

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

吳振華

(赤峰學(xué)院物理與電子信息工程系,內(nèi)蒙古赤峰024000)

摘要:本文是以指導(dǎo)”赤峰學(xué)院第四屆’挑戰(zhàn)杯’大學(xué)生課外學(xué)術(shù)科技作品競(jìng)賽”的網(wǎng)頁(yè)設(shè)計(jì)——物

理與電子信息工程系網(wǎng)建站為例談?wù)劸W(wǎng)頁(yè)設(shè)計(jì)的相關(guān)問(wèn)題.首先說(shuō)明了系網(wǎng)站的頁(yè)面設(shè)計(jì)與制作主題,站

點(diǎn)的規(guī)劃以及網(wǎng)頁(yè)設(shè)計(jì)的風(fēng)格,最后簡(jiǎn)要地介紹所需工具,材料的收集和網(wǎng)頁(yè)的制作.在對(duì)學(xué)生的指導(dǎo)上

重點(diǎn)突出設(shè)計(jì)思想和制作流程.本網(wǎng)站主要由物理系簡(jiǎn)介,教學(xué)管理,專業(yè)簡(jiǎn)介,課程簡(jiǎn)介,精品課程,EDP

考試,信息資源以及學(xué)生管理等欄目組成主頁(yè).

關(guān)鍵詞:頁(yè)面布局;站點(diǎn)規(guī)劃;網(wǎng)頁(yè)制作

中圖分類號(hào):TP391文獻(xiàn)標(biāo)識(shí)碼:A文章編號(hào):1673—260X(2021)10—0037—03

對(duì)非計(jì)算機(jī)專業(yè)的學(xué)生,如何讓其在最短的時(shí)

間內(nèi)能夠掌握網(wǎng)頁(yè)設(shè)計(jì)制作技術(shù),并能制作出好的

參賽作品是問(wèn)題的關(guān)鍵.根據(jù)學(xué)生的實(shí)際情況初步

制定指導(dǎo)計(jì)劃:一是根據(jù)參賽作品的要求確定網(wǎng)頁(yè)

制作的主題,以方便對(duì)素材的收集和準(zhǔn)備工作;二

是選擇網(wǎng)頁(yè)制作工具,確定指導(dǎo)學(xué)習(xí)的內(nèi)容.最終

目的是使學(xué)生在最短的時(shí)間內(nèi)掌握網(wǎng)頁(yè)制作技術(shù),

并能做出高質(zhì)量的作品參加競(jìng)賽.

1站點(diǎn)的規(guī)劃與設(shè)計(jì)

1.1確定網(wǎng)頁(yè)設(shè)計(jì)制作的主題

確定網(wǎng)頁(yè)設(shè)計(jì)的主題是決定網(wǎng)頁(yè)設(shè)計(jì)活動(dòng)最

關(guān)鍵的一步.主題是否鮮明,不僅是參賽作品能否

中成功的問(wèn)題,更是網(wǎng)頁(yè)設(shè)計(jì)制作的一個(gè)非常重要

的技術(shù)指標(biāo).由于作品確定以物理與電子信息工程

系為網(wǎng)站作為主題,就要以專業(yè)設(shè)置,課程建設(shè),教

學(xué)管理等因素確定網(wǎng)頁(yè)設(shè)計(jì)及制作的類型.有了明

確的主題,并要按照視覺(jué)心理規(guī)律和形式將主題傳

達(dá)給評(píng)判人.這就要求網(wǎng)頁(yè)設(shè)計(jì)不但要簡(jiǎn)練,清晰

和精確,而且在強(qiáng)調(diào)藝術(shù)性的同時(shí),更應(yīng)該注重通

過(guò)獨(dú)特的風(fēng)格和強(qiáng)烈的視覺(jué)沖擊力,來(lái)鮮明地突出

設(shè)計(jì)主題.

1.2規(guī)劃站點(diǎn)的結(jié)構(gòu)

根據(jù)參賽作品要求及素材的具體情況,決定采

用樹(shù)形結(jié)構(gòu),如圖1所示,處于頂部的是站點(diǎn)的首

頁(yè),在首頁(yè)上鏈接若干個(gè)二級(jí)網(wǎng)頁(yè),每個(gè)二級(jí)網(wǎng)頁(yè)

圖1系站點(diǎn)結(jié)構(gòu)

鏈接若干三級(jí)網(wǎng)頁(yè).

1.3確定網(wǎng)頁(yè)的風(fēng)格

在網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中包含著主觀和客觀兩方面

的因素.在確立了網(wǎng)頁(yè)主題和結(jié)構(gòu)之后,就要在顏

色搭配,頁(yè)面布局和內(nèi)容結(jié)構(gòu)進(jìn)行風(fēng)格設(shè)計(jì).網(wǎng)頁(yè)

風(fēng)格的設(shè)計(jì)雖然沒(méi)有統(tǒng)一的標(biāo)準(zhǔn),但一定要符合人

們的心里感受,要么給人生動(dòng)活潑,要么給人雅致

整潔,要么給人寧重嚴(yán)肅.成功的網(wǎng)頁(yè)設(shè)計(jì)給人們

留下的都是難忘的記憶.只有形成了自己風(fēng)格的網(wǎng)

頁(yè),才能有無(wú)限的生命力.

顏色搭配是網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的關(guān)鍵.當(dāng)我們距離

顯示器較遠(yuǎn)時(shí)候,看到的不是網(wǎng)頁(yè)優(yōu)美的版面或者

是美麗和圖片,而是網(wǎng)頁(yè)的色彩.網(wǎng)頁(yè)色彩搭配設(shè)

計(jì)包括背景色彩,色調(diào)的選擇和文字,圖片色彩的

選擇.我們知道:白紙黑字是永遠(yuǎn)的主題,誰(shuí)都說(shuō)不

出不好來(lái).而網(wǎng)頁(yè)最常用流行色是:

?

蘭色——藍(lán)天白云,沉靜整潔的顏色.

?

綠色——綠白相間,雅致而有生氣.

?

橙色——活潑熱烈,標(biāo)準(zhǔn)商業(yè)色調(diào).

?

暗紅——寧重,嚴(yán)肅,高貴,需要配黑和灰來(lái)

壓制刺激的紅色.

幾種固定搭配是:

?

藍(lán)白橙——藍(lán)為主調(diào).白底,藍(lán)標(biāo)題欄,橙色

按鈕或ICON做點(diǎn)綴.

?

綠白蘭——綠為主調(diào).白底,綠標(biāo)題欄,蘭色

或橙色按鈕或ICON做點(diǎn)綴.

?

橙白紅——橙為主調(diào).白底,橙標(biāo)題欄,暗紅

或桔紅色按鈕或ICON做點(diǎn)綴.

?

暗紅黑——暗紅主調(diào).黑或灰底,暗紅標(biāo)題

欄,文字內(nèi)容背景為淺灰色.

在具體的設(shè)計(jì)制作中,主頁(yè)采用了深藍(lán),淺藍(lán)

一

37—

和白色幾種顏色的搭配,其它頁(yè)面根據(jù)內(nèi)容的需要

進(jìn)行了亮色與暗色近似色的搭配,并且在一個(gè)頁(yè)面

里都控制在3—4種色彩內(nèi).

頁(yè)面布局設(shè)計(jì)頁(yè)面布局類型有不同的分類

方法,有的將網(wǎng)頁(yè)布局分為”國(guó)”字型,拐角型,標(biāo)題

正文型,左右框架型,上下框架型,綜合框架型,封

面型,Flash型,變化型等;還有的將網(wǎng)頁(yè)布局分為

骨骼型,滿版型,分割型,中軸型,曲線型,傾斜型,

對(duì)稱型,焦點(diǎn)型,三角型,自由型等;不管那類分法

都可以簡(jiǎn)單地概括為:

(1)最上面是網(wǎng)站的標(biāo)題以及橫幅廣告條,接

下來(lái)就是導(dǎo)航鏈接,在下面就是網(wǎng)站的主要內(nèi)容,

左右分2欄,或3欄或4欄,最下面是網(wǎng)站的一些

基本信息,聯(lián)系方式,版權(quán)聲明等.

(2)上面是標(biāo)題及廣告橫幅,接下來(lái)的左側(cè)是

一

窄列鏈接等,右列是很寬的正文,下面也是一些

網(wǎng)站的輔助信息.在這種類型中,一種很常見(jiàn)的類

型是最上面是標(biāo)題及廣告,左側(cè)是導(dǎo)航鏈接.

(3)最上面是標(biāo)題或類似的一些東西,下面是

正文.

(4)左右或是上下為分兩部分,左面或上面是

導(dǎo)航鏈接,有時(shí)最上面會(huì)有一個(gè)小的橫幅,右面或

下面是正文.

(5)在網(wǎng)站的首頁(yè),放置一些小的動(dòng)畫(huà)或圖片,

再配上幾個(gè)簡(jiǎn)單的鏈接或者僅是一個(gè)”進(jìn)人”的鏈

接甚至直接在首頁(yè)的圖片上做鏈接而沒(méi)有任何提

示的頁(yè)面.

(6)以上頁(yè)面結(jié)構(gòu)的結(jié)合,做的無(wú)規(guī)律可循,相

對(duì)復(fù)雜一些,大多和圖片結(jié)合進(jìn)行的布局.

本例中,主頁(yè)采用了最上面是網(wǎng)站的標(biāo)題,接

下來(lái)是跑馬燈消息,導(dǎo)航鏈接,在下面就是網(wǎng)站的

主要內(nèi)容.左中右分3欄,左邊是最新消息滾動(dòng)窗

口,中間部分是系的主要內(nèi)容,最右邊是圖片切換

窗口.最下面是網(wǎng)站的版權(quán)聲明等.

內(nèi)容結(jié)構(gòu)設(shè)計(jì)內(nèi)容結(jié)構(gòu)設(shè)計(jì)的比較簡(jiǎn)單,頁(yè)

面鏈接的層深為二級(jí).并采用樹(shù)形結(jié)構(gòu),各欄目之

間都能方便地跳轉(zhuǎn).

在進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)時(shí),需要注意:

?

盡量使用網(wǎng)頁(yè)中的標(biāo)準(zhǔn)色彩.文字的鏈接色

彩,圖片的主題色,背景色,邊框的色彩等都要使用

標(biāo)準(zhǔn)色彩.

?

網(wǎng)頁(yè)中要使用標(biāo)準(zhǔn)字體和字號(hào).在所有的標(biāo)

題,文字,圖片里要使用統(tǒng)一的標(biāo)準(zhǔn)字體.

?

在網(wǎng)頁(yè)中使用統(tǒng)一的圖片處理效果.

?

網(wǎng)頁(yè)中盡量使用自己設(shè)計(jì)的花邊,圖案和按

鈕,以突出網(wǎng)頁(yè)的特點(diǎn).

2工具的選用和介紹

2.1網(wǎng)頁(yè)制作工具選用的是AdobeDreamweaver

cs軟件

一

38一

Dreamweaver是美國(guó)MACROMEDIA公司開(kāi)發(fā)

的集網(wǎng)頁(yè)制作和管理網(wǎng)站于一身的所見(jiàn)即所得網(wǎng)

頁(yè)編輯器.它是第一套針對(duì)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)師特別發(fā)

展的視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具,利用它可以輕而易舉地

制作出跨越平臺(tái)限制和跨越瀏覽器限制的充滿動(dòng)

感的網(wǎng)頁(yè).

它包含HomeSite和BBEdit等主流文字編輯

器.幀(frames)和表格的制作速度快的令您無(wú)法想像.

進(jìn)階表格編輯功能使您簡(jiǎn)單的選擇單格,行,欄或

作未連續(xù)之選取.甚至可以排序或格式化表格群

組,Dreamweaver支援精準(zhǔn)定位,利用可輕易轉(zhuǎn)換成

表格的圖層以拖拉置放的方式進(jìn)行版面配置.所見(jiàn)

即所得Dreamweaver成功整合動(dòng)態(tài)式出版視覺(jué)編

輯及電子商務(wù)功能,提供超強(qiáng)的支援能力給

Third—party廠商,包含ASP,Apache,BroadVision,

ColdFusion,iCAT,Tango與自行發(fā)展的應(yīng)用軟體.

目前版本的DreamweaverCS5最突出的亮點(diǎn)有三

處:①對(duì)CMS的支持功能;②對(duì)CSS的校驗(yàn);③對(duì)

PHP更好的支持.CS5還內(nèi)置了webkit引擎,可以

模仿Safari,Chrome瀏覽器預(yù)覽網(wǎng)頁(yè)效果.

2.2動(dòng)畫(huà)制作工具選用的是AdobeFlashCS軟件

Flash是一種創(chuàng)作工具,設(shè)計(jì)人員和開(kāi)發(fā)人員

可使用它來(lái)創(chuàng)建演示文稿,應(yīng)用程序和其它允許用

戶交互的內(nèi)容.Flash可以包含簡(jiǎn)單的動(dòng)畫(huà),視頻內(nèi)

容,復(fù)雜演示文稿和應(yīng)用程序以及介于它們之間的

任何內(nèi)容.通常,使用Flash創(chuàng)作的各個(gè)內(nèi)容單元稱

為應(yīng)用程序,即使它們可能只是很簡(jiǎn)單的動(dòng)畫(huà).您

也可以通過(guò)添加圖片,聲音,視頻和特殊效果,構(gòu)建

包含豐富媒體的Flash應(yīng)用程序.Flash特別適用于

創(chuàng)建通過(guò)Intemet提供的內(nèi)容,因?yàn)樗奈募浅?/p>

小.Flash是通過(guò)廣泛使用矢量圖形做到這一點(diǎn)的.

與位圖圖形相比,矢量圖形需要的內(nèi)存和存儲(chǔ)空間

小很多,因?yàn)樗鼈兪且詳?shù)學(xué)公式而不是大型數(shù)據(jù)集

來(lái)表示的.位圖圖形之所以更大,是因?yàn)閳D像中的

每個(gè)像素都需要一組單獨(dú)的數(shù)據(jù)來(lái)表示.

2.3圖像處理工具選用的是AdobePhotoshop軟

件

Photoshop:它是由Adobe公司開(kāi)發(fā)的圖形處理

系列軟件之一,主要應(yīng)用于在圖像處理,廣告設(shè)計(jì)

的一個(gè)電腦軟件.平面設(shè)計(jì)是Photoshop應(yīng)用最為

廣泛的領(lǐng)域,無(wú)論是我們正在閱讀的圖書(shū)封面,還

是大街上看到的招帖,海報(bào),這些具有豐富圖像的

平面印刷品,基本上都需要Photoshop軟件對(duì)圖像

進(jìn)行處理.

3網(wǎng)頁(yè)設(shè)計(jì)制作的過(guò)程

3.1資料信息的收集

在確定主題,規(guī)劃站點(diǎn)結(jié)構(gòu)和內(nèi)容之后,還要

收集相關(guān)的資料信息.資料信息是人類的科學(xué)文化

知識(shí),各種思想和各種實(shí)踐活動(dòng)賴以記錄,保存,交

流和傳播的一切印刷品和視聽(tīng)材料的統(tǒng)稱.資料信

息搜集是有一定技巧的.包括;規(guī)劃資料,具體搜

索,編輯整理等.

將需要的資料信息搜集完成后,并不是可以直

接應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)中,因?yàn)檫@些資料往往是凌亂

的,不系統(tǒng)的,還需要大量的編輯工作.首先要仔細(xì)

分析資料信息,確定哪些需要,哪些不需要,哪些需

要修改和整理.

本例網(wǎng)頁(yè)”物理與電子信息工程系”需要搜集

準(zhǔn)備的信息資料有以下幾種:

?

“物理系概況”欄目方面的圖片及相關(guān)文字資

料,可以到系辦去搜集.

?

“教學(xué)管理”,”精品課程”等欄目的相關(guān)資料

到系教務(wù)辦去搜集.

?

“專業(yè)介紹”,”課程介紹”,”EDP考試”,”信息

資源”等欄目相關(guān)內(nèi)容到系各教研室去搜集.

?

“精彩瞬間”,”學(xué)生管理”等欄目的相關(guān)資料

到系學(xué)生辦去搜集.

以上幾點(diǎn)都是實(shí)現(xiàn)網(wǎng)頁(yè)工程項(xiàng)目所需要的前

期搜集準(zhǔn)備工作,這是完成網(wǎng)頁(yè)設(shè)計(jì)不可缺少的一

個(gè)步驟.

3.2網(wǎng)頁(yè)的制作

首先用Photoshop圖形處理軟件來(lái)處理圖片,

制作LOGO和超鏈接圖標(biāo);其次用Flash軟件制作

所需的動(dòng)畫(huà);最后利用Dreamweaver軟件制作網(wǎng)頁(yè).

本例中的網(wǎng)頁(yè)是用html語(yǔ)言編寫(xiě)的一個(gè)關(guān)于

“物理與電子信息工程系”的網(wǎng)站,htnl中文翻譯為

“超文本標(biāo)記語(yǔ)言”,所謂”超文本”就是指頁(yè)面內(nèi)可

以包含圖片,鏈接,多媒體等非問(wèn)字的元素,通過(guò)

html語(yǔ)言將這些元素表示出來(lái),就形成了html代

碼.

html的結(jié)構(gòu)包括頭部head,主體body兩大部

分,其中頭部描述瀏覽器所需的信息,而主體則包

含所要說(shuō)明的具體內(nèi)容.另外,html是網(wǎng)絡(luò)的通用

語(yǔ)言一種簡(jiǎn)單,通用的全置標(biāo)記語(yǔ)言.它允許網(wǎng)頁(yè)

制作人建立文本與圖片相結(jié)合的復(fù)雜頁(yè)面,這些頁(yè)

面可以被網(wǎng)上任何其他人瀏覽到,無(wú)論使用的是什

么類型的電腦或?yàn)g覽器.其主要特點(diǎn)如下:

(1)簡(jiǎn)易性,html版本升級(jí)采用超集方式,從而

更加靈活方便.

(2)可擴(kuò)展性,html語(yǔ)言的廣泛應(yīng)用帶來(lái)了加

強(qiáng)功能,增加標(biāo)識(shí)符等要求,html采取子類元素的

方式,為系統(tǒng)擴(kuò)展帶來(lái)保證.

(3)平臺(tái)無(wú)關(guān)性.雖然Pc機(jī)大行其道,但使用

MAC等其他機(jī)器的大有人在,HTML可以使用在

廣泛的平臺(tái)上.

部分頁(yè)面采用DIV+CSS進(jìn)行頁(yè)面布局.

DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)(或稱”WEB標(biāo)準(zhǔn)”)中常用術(shù)

語(yǔ)之一,DIV+CSS是一種網(wǎng)頁(yè)的布局方法,這一種

網(wǎng)頁(yè)布局方法有別于傳統(tǒng)的HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言

中的表格(table)定位方式,真正地達(dá)到了w3c內(nèi)容

與表現(xiàn)相分離.其優(yōu)點(diǎn)在于:①使頁(yè)面載人得更快

.

②降低流量費(fèi)用.③修改設(shè)計(jì)時(shí)更有效率.④保持

視覺(jué)的一致性.⑤更好地被搜索引擎收錄.⑥對(duì)瀏覽

者和瀏覽器更具親和力.我們都知道網(wǎng)站做出來(lái)是

給瀏覽者使用的,對(duì)瀏覽者和瀏覽器更具親和力,

DIV+CSS在這方面更具優(yōu)勢(shì)-由于CSS富含豐富的

樣式,使頁(yè)面更加靈活性,它可以根據(jù)不同的瀏覽

器,而達(dá)到顯示效果的統(tǒng)一和不變形.

在”專業(yè)簡(jiǎn)介”,”課程簡(jiǎn)介”以及”精彩瞬間”還

用到了iframe元素.iframe元素的功能是在一個(gè)

html內(nèi)嵌一個(gè)文檔,創(chuàng)建一個(gè)浮動(dòng)的幀,可以嵌在

網(wǎng)頁(yè)中的任意部分.Iframe雖然內(nèi)嵌在另一個(gè)

HTML文件中,但它保持相對(duì)的獨(dú)立,是一個(gè)”獨(dú)立

王國(guó)”,在單一HTML中的特性同樣適用于浮動(dòng)幀

中.通過(guò)Iframe標(biāo)記,我們可將那些不變的內(nèi)容以

Iframe來(lái)表示,這樣,不必重復(fù)寫(xiě)相同的內(nèi)容,這有

點(diǎn)象程序設(shè)計(jì)中的過(guò)程或函數(shù),減省了多少繁瑣的

手工勞動(dòng).

3-3網(wǎng)頁(yè)測(cè)試

在制作過(guò)程中隨時(shí)瀏覽每一張網(wǎng)頁(yè),及時(shí)發(fā)現(xiàn)

網(wǎng)頁(yè)中的錯(cuò)誤,并改之.

本次參賽作品——網(wǎng)頁(yè)設(shè)計(jì)制作是靜態(tài)網(wǎng)頁(yè).

靜態(tài)網(wǎng)頁(yè)是相對(duì)于動(dòng)態(tài)網(wǎng)頁(yè)而言.也就是以.htm,.

html,.shtml,.xml等為后后綴的.在html格式的網(wǎng)頁(yè)

上,也可以出現(xiàn)動(dòng)畫(huà),滾動(dòng)字母等.這些”動(dòng)態(tài)效果”

只是視覺(jué)上的,與動(dòng)態(tài)網(wǎng)頁(yè)是不同的概念.

靜態(tài)網(wǎng)頁(yè)每個(gè)網(wǎng)頁(yè)都有一個(gè)固定的URL.且網(wǎng)

頁(yè)htm,.html,.shtml等常見(jiàn)形式的后綴,網(wǎng)頁(yè)內(nèi)容

一

經(jīng)發(fā)布到網(wǎng)站服務(wù)器上,無(wú)論是否有用戶訪問(wèn),

每個(gè)靜態(tài)網(wǎng)頁(yè)的內(nèi)容都是保存在網(wǎng)站服務(wù)器上的,

每個(gè)網(wǎng)頁(yè)都是一個(gè)獨(dú)立的文件.靜態(tài)網(wǎng)頁(yè)的內(nèi)容相

對(duì)穩(wěn)定,因此容易被搜索引擎檢索靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)

據(jù)庫(kù)的支持,在網(wǎng)站制作和維護(hù)方面工作量較大,

因此當(dāng)網(wǎng)站信息量很大時(shí)完全依靠靜態(tài)網(wǎng)頁(yè)制作

方式比較困難.靜態(tài)網(wǎng)頁(yè)的交互性交叉,在功能方

面有較大的限制.盡管”靜態(tài)網(wǎng)頁(yè)”存在許多不足,

但是初學(xué)者要學(xué)好網(wǎng)頁(yè)制作不妨從”靜態(tài)網(wǎng)頁(yè)”制

作學(xué)起.

做好一個(gè)網(wǎng)頁(yè)不是一件容易的事,對(duì)個(gè)人的要

求是全方位的,需要有扎實(shí)的知識(shí)和綜合素質(zhì),要

有全身心投入到網(wǎng)頁(yè)世界的決心和勇氣,去不斷的

學(xué)習(xí),去不斷的探索;同時(shí)去不斷的充實(shí),去不斷的

完善自我.

一

39—

《網(wǎng)頁(yè)設(shè)計(jì)與制作》教學(xué)大綱適用專業(yè)（類）：計(jì)算機(jī)類、電子商務(wù)類專業(yè)總學(xué)時(shí)：80（理論教學(xué)50，獨(dú)立實(shí)訓(xùn)：30）編制人：徐凱制訂時(shí)間：2021年3月一．課程介紹隨著計(jì)算機(jī)網(wǎng)絡(luò)的迅速發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)已成為當(dāng)今社會(huì)上一種非常熱門(mén)的技術(shù)?！毒W(wǎng)頁(yè)設(shè)計(jì)與制作》課程是我院計(jì)算機(jī)網(wǎng)絡(luò)和計(jì)算機(jī)應(yīng)用專業(yè)的一門(mén)核心課程，它涵蓋了HTML語(yǔ)言、DREAMWEAVER及JavaScript腳本語(yǔ)言等三部分內(nèi)容，全面介紹WEB站點(diǎn)設(shè)計(jì)的基本操作技術(shù)和使用技巧。二．課程的性質(zhì)和任務(wù)1.課程的性質(zhì)（本課程在整個(gè)教學(xué)體系中的地位）本課程是計(jì)算機(jī)類專業(yè)的一門(mén)主要專業(yè)課，是本類專業(yè)的核心技能課程。2.課程任務(wù)本課程的培養(yǎng)目標(biāo)是使學(xué)生掌握網(wǎng)頁(yè)設(shè)計(jì)與制作的基本知識(shí)，使學(xué)生具備利用常用網(wǎng)頁(yè)設(shè)計(jì)工具進(jìn)行多媒體網(wǎng)頁(yè)設(shè)計(jì)的技能，培養(yǎng)學(xué)生進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)的邏輯思維和抽象思維的能力，為今后從事網(wǎng)站的建設(shè)和管理工作打下良好的基礎(chǔ)。三．課程目標(biāo)1.知識(shí)目標(biāo)（1）熟練掌握網(wǎng)頁(yè)制作軟件Dreamweaver8的基本操作和使用技能（2）掌握網(wǎng)頁(yè)制作的基本規(guī)范和站點(diǎn)的建立（3）熟練掌握網(wǎng)頁(yè)中頁(yè)面屬性的設(shè)置方法（4）熟練掌握在網(wǎng)頁(yè)中插入圖像、flash動(dòng)畫(huà)、背景音樂(lè)、視頻文件等多媒體元素的方法（5）掌握各種超級(jí)鏈接的使用方法（6）熟練掌握用表格和層布局網(wǎng)頁(yè)的方法（7）掌握表單在網(wǎng)頁(yè)中的使用方法（8）掌握框架、模板和庫(kù)制作網(wǎng)頁(yè)的方法（9）掌握網(wǎng)頁(yè)特效的制作方法（10）掌握域名和空間的申請(qǐng)過(guò)程（11）掌握網(wǎng)站測(cè)試的方法（12）掌握網(wǎng)頁(yè)的上傳和網(wǎng)頁(yè)的維護(hù)2.技能與素質(zhì)目標(biāo)（1）培養(yǎng)學(xué)生收集、處理信息，準(zhǔn)備、加工素材的能力（2）培養(yǎng)學(xué)生設(shè)計(jì)網(wǎng)頁(yè)、布局網(wǎng)頁(yè)的能力（3）培養(yǎng)學(xué)生的策劃能力、色彩感悟力、和想象力（4）培養(yǎng)學(xué)生勤奮學(xué)習(xí)，發(fā)現(xiàn)問(wèn)題后解決問(wèn)題的能力（5）培養(yǎng)學(xué)生自主學(xué)習(xí)能力和知識(shí)應(yīng)用能力（6）具有高度責(zé)任心和良好的團(tuán)隊(duì)合作的能力三．教學(xué)內(nèi)容及學(xué)時(shí)分配1．理論教學(xué)，共50學(xué)時(shí)理論項(xiàng)目名稱計(jì)劃課時(shí)教學(xué)內(nèi)容和知識(shí)目標(biāo)教材章節(jié)網(wǎng)站名稱項(xiàng)目1：網(wǎng)頁(yè)賞析2（1）欣賞優(yōu)秀的網(wǎng)頁(yè)，激發(fā)學(xué)習(xí)網(wǎng)頁(yè)設(shè)計(jì)的興趣（2）分析優(yōu)秀網(wǎng)頁(yè)的布局結(jié)構(gòu)、視覺(jué)效果等（3）了解構(gòu)成網(wǎng)頁(yè)的基本元素（文本、圖像、動(dòng)畫(huà)、聲音等）（4）了解網(wǎng)頁(yè)的相關(guān)概念和術(shù)語(yǔ)（網(wǎng)頁(yè)、網(wǎng)站、域名、WWW等）項(xiàng)目2：網(wǎng)頁(yè)制作工具2（1）了解一些制作網(wǎng)頁(yè)軟件（Frontpage）、圖像處理軟件（photoshop，F(xiàn)ireworks）、動(dòng)畫(huà)制作軟件（Flash）等的使用（2）了解Dreamweaver的版本（3）了解Dreamweaver的安裝與卸載過(guò)程（4）熟悉Dreamweaver8的啟動(dòng)與退出、工作界面布局和工作環(huán)境（5）學(xué)會(huì)用Dreamweaver創(chuàng)建不同格式的項(xiàng)目文件項(xiàng)目3：規(guī)劃站點(diǎn)2（1）掌握創(chuàng)建站點(diǎn)的操作過(guò)程（2）掌握管理站點(diǎn)的操作過(guò)程（多個(gè)站點(diǎn)、站點(diǎn)的導(dǎo)入和導(dǎo)出）（2）學(xué)會(huì)創(chuàng)建站點(diǎn)目錄結(jié)構(gòu)、管理站點(diǎn)的文件（3）掌握網(wǎng)站的規(guī)劃（文件結(jié)構(gòu)和層次結(jié)構(gòu)）（4）掌握目錄名和網(wǎng)頁(yè)的命名規(guī)范、色彩搭配、尺寸規(guī)范項(xiàng)目4：頁(yè)面控制2（1）掌握Dreamweaver8的參數(shù)設(shè)置方法（2）設(shè)置頁(yè)面頭內(nèi)容（設(shè)置通用頭、添加Meta、關(guān)鍵字、頁(yè)面刷新）（3）掌握頁(yè)面屬性的設(shè)置方法（背景效果、邊距、標(biāo)題字樣式）（4）掌握調(diào)整頁(yè)面視圖尺寸的方法項(xiàng)目5：文本操作2（1）掌握在網(wǎng)頁(yè)中輸入文本（2）掌握文本屬性參數(shù)的設(shè)置（字體、大小、顏色、對(duì)齊方式等）（3）掌握對(duì)文本編輯的操作（添加、拷貝、刪除、剪切、查找和替換、撤銷）（4）掌握在網(wǎng)頁(yè)中插入文本列表和特殊符號(hào)（5）掌握輸入空格和實(shí)現(xiàn)文本換行的方法（6）學(xué)會(huì)在網(wǎng)頁(yè)中插入水平線和日期及屬性的設(shè)置（7）掌握檢查頁(yè)面文字拼寫(xiě)的方法項(xiàng)目6：圖像操作2（1）掌握?qǐng)D像的插入方法（2）掌握?qǐng)D像屬性的設(shè)置方法（圖像的屬性、圖像熱點(diǎn)）（3）掌握?qǐng)D像與文本混合編排的方法（4）掌握插入鼠標(biāo)經(jīng)過(guò)圖像的方法（5）了解插入圖像占位符的操作方法（6）掌握交互圖像的制作方法（7）掌握插入導(dǎo)航條的制作方法項(xiàng)目7：使用表格2（1）掌握在網(wǎng)頁(yè)中插入表格（2）掌握表格中參數(shù)的設(shè)置（行數(shù)、列數(shù)、寬度、邊框、對(duì)齊方式、單元格間距、邊距、背景等）（3）掌握表格的基本操作方法（拆分、刪除，合并等）（4）掌握布局頁(yè)面表格的方法（5）掌握繪制嵌套表格的方法（6）掌握在表格中插入文字和圖片并定位的方法項(xiàng)目8：層的使用2（1）掌握描繪層和插入層、選擇層和激活層（2）掌握層的屬性設(shè)置方法、調(diào)整層的大小和位置（3）掌握在層中輸入文本和插入圖像的方法（4）掌握嵌套層的創(chuàng)建（5）掌握利用層布局頁(yè)面的方法（6）了解層與表格之間的相互轉(zhuǎn)換方法（7）掌握使用層制作下拉菜單的方法項(xiàng)目9：HTML語(yǔ)言2（1）掌握Dreamweaver8的HTML源代碼編輯功能。（2）掌握快速標(biāo)簽編輯器、標(biāo)簽選擇器和標(biāo)簽編輯器的使用方法（3）掌握常用的HTML標(biāo)記的含義及其應(yīng)用（4）學(xué)會(huì)手工修改HTML代碼（文本、圖像、表格）項(xiàng)目10：制作多媒體頁(yè)面2（1）掌握在網(wǎng)頁(yè)中插入flash動(dòng)畫(huà)（透明Flash背景）及屬性的設(shè)置（2）掌握在網(wǎng)頁(yè)中插入flash按鈕和flash文本及屬性的設(shè)置（3）掌握在網(wǎng)頁(yè)中插入視頻和音頻的操作方法（4）掌握在頁(yè)面中插入背景音樂(lè)（5）學(xué)會(huì)制作flash圖像查看器項(xiàng)目11：超級(jí)鏈接（上）2（1）掌握絕對(duì)路徑和相對(duì)路徑的概念（2）掌握創(chuàng)建頁(yè)面間的鏈接和網(wǎng)站間的鏈接的操作方法（文本、圖像和動(dòng)畫(huà)）（3）掌握屬性檢查器中的“目標(biāo)”選項(xiàng)的含義（4）掌握創(chuàng)建E-mail鏈接的操作方法項(xiàng)目12：超級(jí)鏈接（下）2（1）掌握制作下載超鏈接的方法（2）掌握制作腳本鏈接的方法（3）掌握創(chuàng)建錨點(diǎn)鏈接的方法（4）掌握制作圖像映射的方法（5）學(xué)會(huì)通過(guò)手工修改HTML的方式實(shí)現(xiàn)鏈接（6）掌握測(cè)試鏈接的有效性的操作方法項(xiàng)目13：表單網(wǎng)頁(yè)（上）2（1）掌握在表單網(wǎng)頁(yè)中插入表單域（2）掌握在表單域中插入文本域（3）掌握隱藏域的制作方法（4）掌握在表單域中插入單選按鈕組和復(fù)選框（5）掌握在表單域中插入列表和菜單項(xiàng)目14：表單網(wǎng)頁(yè)（下）2（1）掌握按鈕、圖像域和文件域的制作方法（2）掌握標(biāo)簽和字段集的制作方法（3）掌握跳轉(zhuǎn)菜單的制作方法（4）學(xué)會(huì)通過(guò)手工修改HTML的方式實(shí)現(xiàn)表單網(wǎng)頁(yè)項(xiàng)目15：CSS美化網(wǎng)頁(yè)（上）2（1）掌握CSS樣式表的基本語(yǔ)法和定義位置（2）掌握CSS樣式表的創(chuàng)建方法（3）掌握CSS美化普通文本、美化背景項(xiàng)目16：CSS美化網(wǎng)頁(yè)（下）2（1）掌握CSS美化表單、美化鏈接、美化圖像（2）掌握CSS美化鼠標(biāo)、光標(biāo)、頁(yè)面滾動(dòng)條（3）掌握外部樣式表的使用項(xiàng)目17：網(wǎng)頁(yè)特效（上）2（1）學(xué)會(huì)使用時(shí)間軸制作特效的操作方法（2）學(xué)會(huì)使用插件制作特效的操作方法項(xiàng)目18：網(wǎng)頁(yè)特效（下）2（1）學(xué)會(huì)使用行為制作特效的操作方法（播放聲音、彈出瀏覽器窗口、設(shè)置狀態(tài)欄信息、檢查表單、設(shè)置框架文本、設(shè)置狀態(tài)欄文本、設(shè)置導(dǎo)航欄圖像、顯示隱藏彈出式菜單）項(xiàng)目19：JS技術(shù)（上）2（1）掌握J(rèn)avaScript的基本語(yǔ)法（2）了解JavaScript的對(duì)象，掌握Window對(duì)象、Document對(duì)象和常用的內(nèi)置對(duì)象（3）掌握J(rèn)avaScript代碼嵌入HTML代碼的方法項(xiàng)目20：JS技術(shù)（下）2熟悉應(yīng)用JavaScript技術(shù)制作幾種常見(jiàn)的網(wǎng)頁(yè)特效（日期/時(shí)間、圖片、文字、表單、頁(yè)面）項(xiàng)目21：框架網(wǎng)頁(yè)2（1）掌握在網(wǎng)頁(yè)中創(chuàng)建框架的操作方法（2）掌握為框架命名并導(dǎo)入框架源文件的操作方法（3）掌握保存框架集文件和各個(gè)框架操作文件（4）掌握設(shè)置框架集屬性和框架屬性的操作方法（5）掌握編輯框架內(nèi)容的操作方法（6）了解設(shè)置超級(jí)鏈接的操作方法項(xiàng)目22：模板和庫(kù)2（1）理解模板和庫(kù)的作用（2）掌握模板的創(chuàng)建和將已有網(wǎng)頁(yè)生成模板的操作方法（3）掌握模板的編輯，包括創(chuàng)建可編輯區(qū)域、定義可編輯區(qū)域、定義重復(fù)區(qū)域和更新模板（4）掌握庫(kù)的創(chuàng)建、庫(kù)的編輯（5）掌握用庫(kù)和模板制作網(wǎng)頁(yè)項(xiàng)目23：實(shí)例分析4（1）掌握網(wǎng)站的開(kāi)發(fā)流程，了解網(wǎng)站的規(guī)劃與組織（2）掌握網(wǎng)頁(yè)設(shè)計(jì)的規(guī)范（3）熟練制作首頁(yè)（4）熟練制作其他頁(yè)面（5）培養(yǎng)制作布局較為復(fù)雜網(wǎng)頁(yè)的能力（6）學(xué)會(huì)綜合利用文字、圖片、flash動(dòng)畫(huà)、視頻文件等素材制作網(wǎng)頁(yè)項(xiàng)目24：網(wǎng)站的上傳和維護(hù)2（1）掌握網(wǎng)站測(cè)試的方法（檢查鏈接、生成站點(diǎn)報(bào)告、檢查目標(biāo)瀏覽器、驗(yàn)證站點(diǎn)）（2）了解域名的設(shè)計(jì)與申請(qǐng)方法（3）掌握申請(qǐng)網(wǎng)站空間的過(guò)程（4）設(shè)置遠(yuǎn)程主機(jī)的信息（5）掌握網(wǎng)站的發(fā)布方法（6）掌握網(wǎng)站頁(yè)面的上傳（7）了解網(wǎng)站的維護(hù)與更新2．獨(dú)立實(shí)訓(xùn)，共30學(xué)時(shí)實(shí)訓(xùn)項(xiàng)目名稱計(jì)劃課時(shí)教學(xué)內(nèi)容及能力目標(biāo)教材章節(jié)網(wǎng)站名稱實(shí)訓(xùn)1：工具軟件的使用2（1）了解一些制作網(wǎng)頁(yè)、處理圖像、制作動(dòng)畫(huà)等軟件（2）熟悉Dreamweaver8的啟動(dòng)與退出（3）熟悉Dreamweaver8的界面布局和工作環(huán)境實(shí)訓(xùn)2：站點(diǎn)規(guī)劃和網(wǎng)頁(yè)的整體設(shè)置2（1）掌握Dreamweaver8的參數(shù)設(shè)置方法（2）熟練掌握站點(diǎn)創(chuàng)建和管理的操作方法（3）掌握頁(yè)面屬性的設(shè)置方法（4）掌握設(shè)置頁(yè)面的尺寸規(guī)范和色調(diào)搭配（5）掌握網(wǎng)站中網(wǎng)頁(yè)名稱和目錄的命名規(guī)范實(shí)訓(xùn)3：文本和圖像的操作2（1）掌握在網(wǎng)頁(yè)中輸入文本、輸入空格、實(shí)現(xiàn)文本換行和編輯文本的方法（2）學(xué)會(huì)在網(wǎng)頁(yè)中插入水平線、日期和特殊符號(hào)（3）掌握網(wǎng)頁(yè)文本格式化操作（4）掌握?qǐng)D像的插入方法，圖像屬性的設(shè)置方法（5）掌握?qǐng)D像與文本混合編排的方法實(shí)訓(xùn)4：表格的使用2（1）掌握表格和單元格的添加、刪除、合并的