全套課件·《網(wǎng)頁(yè)制作與設(shè)計(jì)教程(第二版)

1、網(wǎng)頁(yè)制作與設(shè)計(jì)教程 第1章 網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)是一個(gè)很大的課題。本章將網(wǎng)頁(yè)設(shè)計(jì)的軟件透明化，從網(wǎng)站的主題、結(jié)構(gòu)、風(fēng)格、布局等講述一個(gè)網(wǎng)站的制作構(gòu)思。這是從一個(gè)最大的范圍去講述網(wǎng)站設(shè)計(jì)這個(gè)主題的。 教學(xué)重點(diǎn)與難點(diǎn)網(wǎng)站的目錄結(jié)構(gòu)網(wǎng)站的連接結(jié)構(gòu)網(wǎng)站創(chuàng)意網(wǎng)站布局1.1 定位網(wǎng)站的主題和名稱 一、題材的選擇 美國(guó)個(gè)人電腦雜志（PC Magazine評(píng)出的2001年度排名前100位的全美知名網(wǎng)站的十類題材，這對(duì)于讀者進(jìn)行網(wǎng)站設(shè)計(jì)，也許有一些參考價(jià)值。第一類：網(wǎng)上求職第二類：網(wǎng)上聊天/即時(shí)信息/ICQ第三類：網(wǎng)站社區(qū)/討論郵件列表第四類：計(jì)算機(jī)技術(shù)第五類：網(wǎng)頁(yè)/網(wǎng)站開發(fā)第六類：娛樂(lè)網(wǎng)站第七類：旅行第八類：參

2、考/資訊第九類：家庭/教育第十類：生活/時(shí)尚 在選擇題材時(shí)，可從下面幾個(gè)方面進(jìn)行考慮：1主題要小而精 定位要小，內(nèi)容要精。2題材最好是自己擅長(zhǎng)或者喜愛(ài)的內(nèi)容3題材不要太濫或者目標(biāo)太高 二、網(wǎng)站名稱的選擇 一般建議按以下規(guī)則取名：1名稱要正氣2名稱要易記3名稱要有特色 名稱平實(shí)可以接受，但如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺(jué)沖擊和空間想象力，則為上品。在體現(xiàn)網(wǎng)站主題的同時(shí)，要有這畫龍點(diǎn)睛之筆。1.2 定位網(wǎng)站的CI形象 CI（Corporate Identity）是借用廣告詞語(yǔ)，意思是通過(guò)視覺(jué)來(lái)統(tǒng)一企業(yè)的形象。1.設(shè)計(jì)網(wǎng)站的標(biāo)志（logo）2.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)色彩3.設(shè)計(jì)網(wǎng)站的標(biāo)準(zhǔn)字體4.設(shè)計(jì)

3、網(wǎng)站的宣傳標(biāo)語(yǔ)1.3 確定網(wǎng)站的欄目和版塊 一般的網(wǎng)站欄目安排要注意以下幾個(gè)方面：1一定記住要緊扣主題2設(shè)一個(gè)最近更新或網(wǎng)站指南欄目3設(shè)定一個(gè)可以雙向交流的欄目4設(shè)一個(gè)下載欄目或常見問(wèn)題回答欄目 欄目實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主題明確顯示出來(lái)。在指定欄目的時(shí)候，要仔細(xì)考慮，合理安排。 劃分欄目需要注意的是：（1）盡可能將網(wǎng)站最有價(jià)值的內(nèi)容列在欄目上。（2）盡可能方便訪問(wèn)者的瀏覽和查詢。（3）盡可能刪除與主題無(wú)關(guān)的欄目。1.4 確定網(wǎng)站的目錄結(jié)構(gòu)和鏈接結(jié)構(gòu)一、網(wǎng)站的目錄結(jié)構(gòu) 建立目錄結(jié)構(gòu)的一些建議：1不要將所有文件都存放在根目錄下2按欄目?jī)?nèi)容建立子目錄 在設(shè)置網(wǎng)站的目錄結(jié)構(gòu)時(shí)，需

4、要注意的問(wèn)題有：（1）不要使用中文名字的目錄名。（2）不要使用過(guò)長(zhǎng)的目錄名。（3）盡量使用意義明確的目錄名，盡量做到“見名知意”。（4）目錄的層次不要太多，建議不要超過(guò)3層。二、網(wǎng)站的鏈接結(jié)構(gòu) 一般情況下，建立網(wǎng)站的鏈接結(jié)構(gòu)有以下兩種基本方式：1樹狀鏈接結(jié)構(gòu)2星狀鏈接結(jié)構(gòu) 鏈接結(jié)構(gòu)的設(shè)計(jì)，在實(shí)際的網(wǎng)頁(yè)制作中是非常重要的一環(huán)，采用什么樣的鏈接結(jié)構(gòu)將直接影響到版面的布局。1.5 確定網(wǎng)站的整體風(fēng)格和創(chuàng)意設(shè)計(jì)一、 網(wǎng)站風(fēng)格 風(fēng)格是抽象的，是指站點(diǎn)的整體形象給瀏覽者的感受。 風(fēng)格是獨(dú)特的 風(fēng)格是有人性的如何樹立網(wǎng)站風(fēng)格 ？（1）要肯定風(fēng)格是建立在有價(jià)值內(nèi)容之上的。一個(gè)網(wǎng)站有風(fēng)格而沒(méi)有內(nèi)容，就像繡花枕頭

5、一包草，像一個(gè)性格傲慢但目不識(shí)丁的人。所以首先必須保證內(nèi)容的質(zhì)量和價(jià)值。（2）要徹底搞清楚自己希望站點(diǎn)給人的印象是什么。（3）在明確自己的網(wǎng)站印象后，開始努力建立和加強(qiáng)這種印象。二、網(wǎng)站創(chuàng)意 創(chuàng)意（idea）是網(wǎng)站生存的關(guān)鍵。1創(chuàng)意是傳達(dá)信息的一種特別方式2創(chuàng)意是將現(xiàn)有的要素重新組合 創(chuàng)意的目的是更好地宣傳推廣網(wǎng)站。如果創(chuàng)意很好卻對(duì)網(wǎng)站發(fā)展毫無(wú)意義，就像給奶牛穿高跟鞋，那么寧可放棄這個(gè)創(chuàng)意。1.6 首頁(yè)設(shè)計(jì) 設(shè)計(jì)好一個(gè)首頁(yè)，一般的步驟是：（1）確定首頁(yè)的功能模塊。包括：網(wǎng)站名稱（logo）、主菜單（menu）、新聞（whats new）、搜索（search）、友情鏈接（links）、郵件列表（

6、maillist）、計(jì)數(shù)器（count）、版權(quán)（copyright）（2）設(shè)計(jì)首頁(yè)的版面。（3）處理技術(shù)上的細(xì)節(jié)。1.7 版面布局 版面布局也是一個(gè)創(chuàng)意的問(wèn)題，但要比站點(diǎn)整體的創(chuàng)意容易，有規(guī)律。版面布局一般可分為以下步驟：1草案2粗略布局3定案1.8 網(wǎng)頁(yè)色彩搭配 通常的做法是：主要內(nèi)容文字用非彩色（黑色），邊框、背景、圖片用彩色。這樣頁(yè)面整體不單調(diào)，看主要內(nèi)容也不會(huì)眼花。 在網(wǎng)頁(yè)配色中，要注意的是：不要將所有顏色都用到，盡最控制在三種色彩以內(nèi)。背景和前文的對(duì)比盡最要大，絕對(duì)不要用花紋繁復(fù)的圖案作背景。第2章 網(wǎng)頁(yè)文件的規(guī)劃與創(chuàng)意 本章探討在制作網(wǎng)頁(yè)之前，我們?nèi)绾芜M(jìn)行網(wǎng)頁(yè)文件的規(guī)劃與創(chuàng)意。為了

7、提高網(wǎng)頁(yè)的視覺(jué)吸引力，有效地傳達(dá)信息，給人以審美感受，網(wǎng)頁(yè)文件的創(chuàng)意非常重要。只有做好網(wǎng)頁(yè)文件的規(guī)劃與創(chuàng)意，才能很好地組織起豐富的網(wǎng)頁(yè)素材以實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)的目標(biāo)。教學(xué)重點(diǎn)與難點(diǎn)網(wǎng)頁(yè)文件的規(guī)劃網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)網(wǎng)頁(yè)的制作技巧2.1 網(wǎng)頁(yè)文件的規(guī)劃 一、網(wǎng)頁(yè)文件的種類（1）公司、單位信息發(fā)布（2）出版物，即電子報(bào)刊（3）個(gè)人主頁(yè)（4）在線購(gòu)物站點(diǎn)（5）專題介紹（6）實(shí)用信息服務(wù)二、 網(wǎng)頁(yè)文件的規(guī)劃 網(wǎng)頁(yè)文件的規(guī)劃也就是網(wǎng)頁(yè)文件的內(nèi)容組織和結(jié)構(gòu)設(shè)計(jì)。 合理的結(jié)構(gòu)設(shè)計(jì)對(duì)于網(wǎng)頁(yè)文件的規(guī)劃是至關(guān)重要的。（1） 分級(jí)結(jié)構(gòu)（2） 線性結(jié)構(gòu)（3） Web結(jié)構(gòu)三、網(wǎng)頁(yè)文件的設(shè)計(jì)原則1 總體設(shè)計(jì)2主題鮮明、結(jié)構(gòu)合理3組織

8、網(wǎng)頁(yè)4設(shè)計(jì)首頁(yè)的考慮 首頁(yè)（Homepage）作為網(wǎng)頁(yè)文件的第一頁(yè)，在整個(gè)網(wǎng)頁(yè)文件中具有舉足輕重的作用。5網(wǎng)頁(yè)設(shè)計(jì)的標(biāo)準(zhǔn) 2.2 網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì) 網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)一般應(yīng)遵循以下兩個(gè)原則：（1）依據(jù)信息內(nèi)容的意義和結(jié)構(gòu)進(jìn)行情節(jié)化、理性化的統(tǒng)調(diào)布局和必要的圖像符號(hào)化處理。（2）網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)還必須重視“形象思維”的情感象征意義的傳達(dá)，以有別于知識(shí)性思考形式審美結(jié)構(gòu)的營(yíng)造。一、 網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的意義、功能和目的 網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)是否成功，除了其內(nèi)容因素外，首先要看其在視覺(jué)上能否引人注目。 網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)包括文字排列方向、字群聚散組合，字體大小風(fēng)格的選擇，圖片的分布及色彩與空白的經(jīng)營(yíng)，不僅追求網(wǎng)頁(yè)形式的變化，

9、更重視各視覺(jué)元素的不同形式和構(gòu)成能給人在感情上造成不同的心理感受，并體現(xiàn)不同的主題。二、網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的構(gòu)成要素及其作用1標(biāo)題 標(biāo)題是表達(dá)信息主題的短句，標(biāo)題有主標(biāo)題與子標(biāo)題之分。2標(biāo)語(yǔ) 標(biāo)語(yǔ)是具有韻味的意義完整的句子。3正文4網(wǎng)頁(yè)名稱5標(biāo)志6插圖 將所傳達(dá)的信息內(nèi)容賦以視覺(jué)化的造型稱為插圖。7圖標(biāo)8背景9動(dòng)畫 動(dòng)畫不僅能增添網(wǎng)頁(yè)的視覺(jué)趣味效果，同時(shí)，也可以用來(lái)進(jìn)一步突出網(wǎng)頁(yè)和信息內(nèi)容的主題和風(fēng)格。三、網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的原理和準(zhǔn)則 進(jìn)行網(wǎng)頁(yè)的創(chuàng)意設(shè)計(jì)時(shí)，應(yīng)遵循以下幾條構(gòu)成原則：（1） 內(nèi)容與形式表現(xiàn)必須統(tǒng)一和有序，形式表現(xiàn)必須服從內(nèi)容要求，在造型上各構(gòu)成要素規(guī)格化的設(shè)計(jì)樣式要統(tǒng)一。（2） 必須考慮網(wǎng)

10、頁(yè)上各構(gòu)成要素之間的視覺(jué)流程，能自然而有序地達(dá)到信息訴求重點(diǎn)的位置，突出主題。（3） 注意保護(hù)網(wǎng)頁(yè)在視覺(jué)上的相對(duì)均衡感，不論是正常的均衡或是異常的均衡，均應(yīng)有相應(yīng)的均衡和律動(dòng)感，使其在網(wǎng)頁(yè)上得到正確的配置，否則會(huì)失去必要的安定感。（4） 突出主題要素。（5） 注意網(wǎng)頁(yè)設(shè)計(jì)中的空白處理。（6） 注重整體的對(duì)比因素。（7） 在視覺(jué)上著力強(qiáng)調(diào)網(wǎng)頁(yè)的訴求重點(diǎn)。（8） 注意提高網(wǎng)頁(yè)信息內(nèi)容的視讀性。（9）創(chuàng)造一定的韻律感。 它反映在網(wǎng)頁(yè)設(shè)計(jì)中利用有力的線條、形體及色彩形成一種有節(jié)奏性的律動(dòng)感，能引導(dǎo)人的視覺(jué)以一種流暢而有停頓的方式運(yùn)動(dòng)。既有視覺(jué)的連續(xù)性又有間歇性，使人能夠抑揚(yáng)起落地瀏覽整個(gè)網(wǎng)頁(yè)，閱讀時(shí)感

11、到輕松而又富于韻味。四、網(wǎng)頁(yè)創(chuàng)意設(shè)計(jì)的形式法則和表現(xiàn)手法1視覺(jué)流程2點(diǎn)、線、面3形狀間的組合和構(gòu)成關(guān)系4形狀與空間關(guān)系5構(gòu)架與空間6節(jié)奏與韻律7對(duì)比，調(diào)和與統(tǒng)一8裝飾與趣味9特異2.3 網(wǎng)頁(yè)的創(chuàng)作步驟一、 網(wǎng)頁(yè)的準(zhǔn)備1確定主題與設(shè)計(jì)風(fēng)格 每一類網(wǎng)頁(yè)都有其特定的目的和獨(dú)特的風(fēng)格。2資料的收集與整理 網(wǎng)頁(yè)中最常見的問(wèn)題是不能有足夠的素材來(lái)體現(xiàn)制作者的理念。二、網(wǎng)頁(yè)的制作 網(wǎng)頁(yè)的制作分為六個(gè)部分：1標(biāo)題2文字3圖片4背景5特殊效果6網(wǎng)頁(yè)排版2.4 網(wǎng)頁(yè)制作基礎(chǔ) 一、設(shè)計(jì)前的考慮因素1總體規(guī)劃2網(wǎng)站主題3用戶優(yōu)先 最高的行動(dòng)準(zhǔn)則就是“用戶優(yōu)先”。沒(méi)有用戶去光顧，任何主頁(yè)都沒(méi)有意義。4響應(yīng)時(shí)間5內(nèi)容第一

12、二、設(shè)計(jì)過(guò)程的考慮因素1主頁(yè)的特征2主頁(yè)設(shè)計(jì)元素3代表性的頁(yè)面4分類 5交互性6鏈接7長(zhǎng)文件處理8避免濫用技術(shù)9及時(shí)地維護(hù)與更新2.5 網(wǎng)頁(yè)制作常用工具簡(jiǎn)介1. FrontPage 20002. Dreamweaver3. Flash4.其他工具和設(shè)計(jì)技術(shù) 包括：Fireworks、Photoshop等處理圖象的軟件，以及HTML、JavaScript、VBScript、ASP、CSS、PHP和XML等語(yǔ)言環(huán)境和設(shè)計(jì)技術(shù)第3章 網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言HTML HTML是網(wǎng)頁(yè)制作的一種規(guī)范、一種標(biāo)準(zhǔn)。本章介紹了用HTML制作網(wǎng)頁(yè)的各種標(biāo)記符的設(shè)置方法，包括網(wǎng)頁(yè)數(shù)據(jù)的編輯與格式化、在網(wǎng)頁(yè)中使用超鏈接和插入圖

13、片、網(wǎng)頁(yè)中的表格設(shè)計(jì)以及表格與文字的混排等。教學(xué)重點(diǎn)與難點(diǎn)在網(wǎng)頁(yè)中使用超鏈接與圖片的編排列表的使用表格與文字的混排3.1 HTML概述 HTML（HyperText Markup Language）超文本標(biāo)記語(yǔ)言，幾乎所有的網(wǎng)頁(yè)都是以HTML格式書寫的。 HTML以標(biāo)識(shí)符來(lái)標(biāo)識(shí)、排列各對(duì)象。標(biāo)識(shí)符本身以“”標(biāo)識(shí)，標(biāo)識(shí)符內(nèi)的內(nèi)容稱為元素（element），元素代表了標(biāo)識(shí)符的意義，元素是與大小寫無(wú)關(guān)的。 用超文本標(biāo)記語(yǔ)言（HTML）編寫的網(wǎng)頁(yè)文件其實(shí)只是很平常、很普通的文本文件?？梢杂媚闼煜さ奈淖志庉嬈鱽?lái)編輯它，如Edit、Word、寫字板、記事本等，但一定要以純文本方式保存，瀏覽器只能識(shí)別純文

14、本格式的文件。 標(biāo)記HTML的開始，在文件結(jié)束處要有對(duì)應(yīng)的符號(hào)。3.2 網(wǎng)頁(yè)數(shù)據(jù)編輯與格式化一、創(chuàng)建HTML文檔1用工具軟件創(chuàng)建HTML文檔 用比較完善的工具軟件來(lái)制作網(wǎng)頁(yè)，像FronPage2000，Dreamweaver 4等2用編輯工具編寫HTML文檔 EDIT、記事本、寫字板、Word等編輯工具可以用來(lái)編輯HTML文檔。二、標(biāo)簽格式 在HTML文件中，重要的文字部分都由“標(biāo)簽”括起來(lái)，這樣文字就成了特別的文字，而標(biāo)簽本身則以“”號(hào)標(biāo)識(shí)，標(biāo)簽內(nèi)的內(nèi)容稱為元素，它代表了標(biāo)簽的意義。如： 中南省委宣傳部主頁(yè) 括住的文字稱為“內(nèi)容”，整個(gè)標(biāo)簽稱為一個(gè)“元件”。三、標(biāo)題格式 HTML提供六種標(biāo)題

15、格式，其所用的標(biāo)記符為（標(biāo)題n，n=16）， 的字體最大， 的字體最小。其屬性如下：（1）ALIGN=LEFT，CENTER，RIGHT：文字左對(duì)齊（LEFT）、居中（CENTER）或右對(duì)齊（RIGHT）。（2）ID：指定標(biāo)記符的ID選擇器。（3）STYLE：指定標(biāo)記符的樣式表命令。（4）CLASS：指定標(biāo)記符的樣式類型。（5）LANG：指定標(biāo)題文字的語(yǔ)種。（6）DIR：指定標(biāo)題文字的方向。（7）TITLE：指定標(biāo)記符的標(biāo)題。 此外，還有一些鼠標(biāo)操作的屬性。四、段落格式1分段與換行符 分段標(biāo)記符用于將文檔劃分為段落，標(biāo)記符為 要將文字強(qiáng)制換行，而不是另起段落，可以用換行標(biāo)記符BR實(shí)現(xiàn)該功能。注

16、意，BR僅單獨(dú)使用，而非成對(duì)出現(xiàn)。2. 添加水平線 添加水平線的標(biāo)記符為（與BR類似，HR也不包括結(jié)束標(biāo)記符。3. 段落對(duì)齊（1） ALIGN屬性 ALIGN屬性用于設(shè)置段落的對(duì)齊方式，其常見取值有4種：RIGHT（右對(duì)齊）、LEFT（左對(duì)齊）、CENTER（居中對(duì)齊）、JUSTIFY（兩端對(duì)齊）。（2）DIV標(biāo)記符（3）CENTER標(biāo)記符（4）格式的嵌套五、 文字格式1字符格式 通過(guò)表3.1的標(biāo)記符設(shè)置字符格式2字體大小、字符顏色和字體樣式（1） SIZE屬性：控制文字的大小（2）COLOR屬性：控制文字的顏色（3）FACE屬性：指定字體樣式六、列表格式1有序列表 定義有序列表需要使用有序列

17、表標(biāo)記符和列表項(xiàng)（List item）標(biāo)記符，語(yǔ)法如下： List item1 List item22無(wú)序列表 無(wú)序列表標(biāo)記符和列表項(xiàng)標(biāo)記符3定義列表 定義列表的制作需要3個(gè)標(biāo)記符：定義列表標(biāo)記符，用來(lái)指定定義列表的開頭與結(jié)尾；定義術(shù)語(yǔ)（Definition term）標(biāo)記符，用來(lái)指定第一層數(shù)據(jù)；定義描述標(biāo)記符，用來(lái)指定第二層數(shù)據(jù)。標(biāo)記符必須有結(jié)束標(biāo)記，但和標(biāo)記符的結(jié)束標(biāo)記可以省略。3.3 在網(wǎng)頁(yè)中建立超鏈接一、超鏈接標(biāo)記符 創(chuàng)建一個(gè)超鏈接需要使用標(biāo)記符，A是Anchor的首字母，標(biāo)記符的最基本屬性是HREF，用于指定鏈接到的文件位置。 其他屬性見教材。二、創(chuàng)建超鏈接1指向本地網(wǎng)頁(yè)的鏈接：絕對(duì)

18、URL2 鏈接至位于相同文件夾的文件： 相對(duì)URL方式3鏈接至位于不同文件夾的文件4指向其他網(wǎng)頁(yè)的鏈接，如： 我要上網(wǎng)易5頁(yè)面的特定部分鏈接6連接至E-mail地址的超鏈接3.4 在網(wǎng)頁(yè)中插入圖片一、插入圖片 用標(biāo)記符在HTML文件中插入圖片，標(biāo)記符常用的屬性見教材。二、圖片布局 可以使用HEIGHT、WIDTH、BORDER屬性指定圖片的高度、寬度以及是否具有框線。1圖片的高度、寬度 ，如： 圖片的邊框 還可以用標(biāo)記符的SOLID屬性設(shè)置邊框顏色，格式。3. 圖片的對(duì)齊方式 圖片的對(duì)齊是指圖片本身在頁(yè)面中的對(duì)齊和圖片與文本的對(duì)齊。3.5 表格設(shè)計(jì)一、創(chuàng)建基本表格 可以用標(biāo)記符創(chuàng)建一個(gè)表格，并

19、在它的中間加入標(biāo)題和需要的數(shù)據(jù)。表格定義的代碼為： 具體表格內(nèi)容 1. 表格的標(biāo)題元素定義了表格的說(shuō)明。如： 在這里輸入標(biāo)題 行里的內(nèi)容 標(biāo)題的屬性ALIGN決定了標(biāo)題的對(duì)齊方式。TOP是將標(biāo)題放在表格的頂部，BOTTOM將標(biāo)題放在表格的下面。2. 行、表頭和數(shù)據(jù) 定義一個(gè)表格，需從第一行逐級(jí)向下，并且按行中單元格的順序開始定義。行、表頭和數(shù)據(jù)定義的代碼為： 表頭 數(shù)據(jù) 二、 表格及文字的對(duì)齊與布局1表格在頁(yè)面中的對(duì)齊 利用表格的ALIGN屬性，可以將表格顯示在頁(yè)面的左邊或右邊。如果沒(méi)有設(shè)置這一屬性，表格單獨(dú)顯示為頁(yè)面的一行，在頁(yè)面的左側(cè)。ALIGN=”LEFT”將表格按左邊對(duì)齊，而表格的所有

20、文本顯示在表格右側(cè)和頁(yè)面之間的位置。ALIGN=”RIGHT”將表格按右邊對(duì)齊，文本顯示在表格的左側(cè)。2. 表格內(nèi)數(shù)據(jù)的對(duì)齊 ALIGN屬性為單元格數(shù)據(jù)提供水平對(duì)齊方式，該屬性有LEFT（左對(duì)齊）、RIGHT（右對(duì)齊）、CENTER（居中）3個(gè)值。VALIGN屬性定義單元格數(shù)據(jù)的垂直對(duì)齊方式，該屬性有TOP（頂部對(duì)齊）、BOTTOM（底部對(duì)齊）、MIDDLE（中間對(duì)齊）3個(gè)值。三、設(shè)置表格尺寸 設(shè)置表格邊框尺寸 利用的BORDER屬性可以設(shè)置表格邊框的尺寸，它以指定的粗度來(lái)顯示表格邊框。如： 2. 設(shè)置表格尺寸 利用的WIDTH和HEIGHT屬性可以設(shè)置表格尺寸。如： 3. 設(shè)置表元間隙 利用

21、標(biāo)記符的CELLSPACING屬性可以設(shè)置表元的間隙。如： 4. 設(shè)置表元內(nèi)部空白 利用標(biāo)記符中的CELLPDDING屬性來(lái)，以像素為單位來(lái)設(shè)置它的值。如： 四、設(shè)置表格的色彩 設(shè)置表格、行或行中單元的相關(guān)顏色，可以在、和標(biāo)記符里使用BGCOLOR、BORDERCOLOR、BORDERCOLORLIGHT、BORDERCOLORDARK等屬性。 COLOR的值可以是以十六進(jìn)制表示的顏色，或者是16種顏色（BLACK、WHITE、GREEN、MAROON、OLIVE、MAVY、PURPLE、GRAY、RED、YELLOW、BLUE、TEAL、LIME、AQUA、FUCHSIA和SILVER）中的

22、一種。五、創(chuàng)建跨多行、多列的表元 跨越多列 在或標(biāo)記符里利用COLSPAN屬性，并在其后寫上想要跨越的列數(shù)。 跨越多行 在或標(biāo)記符里利用ROWSPAN屬性，并在其后寫上想要跨越的列數(shù)。第4章 FrontPage 2000網(wǎng)頁(yè)設(shè)計(jì)技術(shù) 本章從FrontPage的視圖入手，先介紹用FrontPage設(shè)計(jì)網(wǎng)頁(yè)的基本操作，包括網(wǎng)頁(yè)的編輯、文本的修飾、列表與表格的使用、運(yùn)用圖象、設(shè)置鏈接、聲音處理等，然后介紹FrontPage的高級(jí)應(yīng)用，包括懸停按鈕、滾動(dòng)字幕、計(jì)數(shù)器與動(dòng)態(tài)效果等，最后介紹表單的使用、樣式與框架等。教學(xué)重點(diǎn)與難點(diǎn)文本的修飾與美化、列表與表格的使用圖象與聲音對(duì)象的使用懸停按鈕、滾動(dòng)字幕的設(shè)

23、置使用表單與樣式4.1 FrontPage 2000簡(jiǎn)介 打開FrontPage 2000，我們發(fā)現(xiàn)它與其它Office軟件的窗口大致相似，主窗口由標(biāo)題欄、菜單欄、工具欄、視圖欄、編輯區(qū)和狀態(tài)欄等組成。1標(biāo)題欄、菜單欄、工具欄、狀態(tài)欄 與Office其他組件類似。2視圖欄 管理Web站點(diǎn)的工具。3工作區(qū) 是管理站點(diǎn)和編輯網(wǎng)頁(yè)的主要場(chǎng)所。 在站點(diǎn)的“網(wǎng)頁(yè)”視圖模式下，網(wǎng)頁(yè)編輯區(qū)的下方有三個(gè)編輯按鈕它們分別代表三種編輯模式：普通、HTML和預(yù)覽。用戶一般在普通模式下設(shè)計(jì)網(wǎng)頁(yè)，如果切換到HTML模式下，將會(huì)看到系統(tǒng)自動(dòng)生成的 HTML程序。4.2 FrontPage 2000的視圖 FrontPag

24、e 2000提供了六種視圖模式，即網(wǎng)頁(yè)視圖、文件夾視圖、報(bào)表視圖、導(dǎo)航視圖、超鏈接視圖和任務(wù)視圖。它們是用戶進(jìn)行網(wǎng)站設(shè)計(jì)的有力工具，靈活運(yùn)用視圖模式，將極大地方便設(shè)計(jì)操作和網(wǎng)站管理。一、網(wǎng)頁(yè)視圖 網(wǎng)頁(yè)視圖為網(wǎng)頁(yè)的設(shè)計(jì)提供了一個(gè)工作場(chǎng)所，可以在這個(gè)環(huán)境下對(duì)網(wǎng)頁(yè)進(jìn)行設(shè)計(jì)和修改。二、文件夾視圖 打開一個(gè)網(wǎng)頁(yè)后，系統(tǒng)默認(rèn)是以文件夾視圖來(lái)顯示的，文件夾視圖與Windows中的資源管理器相似，它能夠顯示當(dāng)前的Web中的內(nèi)容是如何組織的。三、報(bào)表視圖 報(bào)表視圖相當(dāng)于屬性檢查，它能給出當(dāng)前網(wǎng)站的有關(guān)屬性。靈活應(yīng)用報(bào)表視圖能夠使用戶方便地了解網(wǎng)頁(yè)的屬性，便于把握和修改網(wǎng)頁(yè)。四、導(dǎo)航視圖 導(dǎo)航視圖清楚地顯示了We

25、b的結(jié)構(gòu)，用戶可以從中了解到網(wǎng)站中各部分之間的邏輯關(guān)系，它反映了網(wǎng)站的整個(gè)脈絡(luò)。五、超鏈接視圖 超鏈接視圖以圖形化的界面顯示了當(dāng)前網(wǎng)頁(yè)和其他文件之間的超鏈接關(guān)系，也可以顯示網(wǎng)站與網(wǎng)站之間的超鏈接。六、任務(wù)視圖 任務(wù)視圖用任務(wù)列表的方式對(duì)任務(wù)進(jìn)行管理，操作人員可以把詳細(xì)的任務(wù)放在任務(wù)列表中，這樣它就會(huì)提醒設(shè)計(jì)人員需要完成哪些任務(wù)，還剩哪些任務(wù)沒(méi)有完成。4.3 FrontPage 2000的編輯方法一、標(biāo)題段落 在網(wǎng)頁(yè)內(nèi)輸入標(biāo)題時(shí)，用戶可先設(shè)置標(biāo)題的格式，然后再輸入標(biāo)題的內(nèi)容，F(xiàn)rontPage 2000提供了6級(jí)標(biāo)題。二、修飾文本 FrontPage提供了“字體”對(duì)話框與各種格式工具按鈕，可根據(jù)

26、需要選擇設(shè)置，以美化文本。1字體選擇 “字體”列表框不但顯示字體的名稱，同時(shí)還給出了字體的實(shí)際樣式。2字體大小 字符的大小共有6級(jí)，其中默認(rèn)級(jí)別是3。3字體顏色 選中文字，用“調(diào)色板”為文字設(shè)置顏色。4字符效果 字符的一般效果 “加粗”、“傾斜”和“下劃線” 使用上標(biāo)和下標(biāo)5字符間距 控制網(wǎng)頁(yè)的文本間距、段落間距以及文本相對(duì)于基準(zhǔn)線的垂直位置。 “普通”、“擴(kuò)充”、“緊縮”三種 “間距大小”以“pt”為單位三、插入水平線 在網(wǎng)頁(yè)中插入水平線有分隔文本內(nèi)容的作用。選擇“插入”菜單的“Horizontal Line”項(xiàng)，可在網(wǎng)頁(yè)中插入了一條水平線。 可以對(duì)水平線進(jìn)行長(zhǎng)短或?qū)捳睦臁?還可以對(duì)水平

27、線屬性進(jìn)行設(shè)置，在水平線上單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“Horizontal Line Properties”彈出屬性對(duì)話框，然后進(jìn)行屬性設(shè)置。4.4 使用列表 使用列表和表格來(lái)規(guī)范網(wǎng)頁(yè)內(nèi)容可以使網(wǎng)頁(yè)層次分明、結(jié)構(gòu)清晰。列表有項(xiàng)目列表、編號(hào)列表、定義列表三種。一、項(xiàng)目列表 項(xiàng)目列表也稱為無(wú)序列表，它將在項(xiàng)目前添加標(biāo)志符號(hào)?？梢詫D片作為新的項(xiàng)目標(biāo)志。二、編號(hào)列表 在網(wǎng)頁(yè)中的內(nèi)容存在順序關(guān)系時(shí)，可應(yīng)用編號(hào)列表。三、定義列表 定義列表就是在網(wǎng)頁(yè)內(nèi)定義詞匯、術(shù)語(yǔ)的列表，具體的定義內(nèi)容將以首行縮進(jìn)的方式出現(xiàn)在列表的下一行。四、 列表嵌套 允許列表嵌套，并且不限制嵌套級(jí)數(shù)。五、列表的折疊 應(yīng)用列表的

28、折疊技術(shù)，可以將次級(jí)列表隱藏在上一級(jí)列表內(nèi)，只有在瀏覽者電擊上級(jí)列表時(shí)，才會(huì)打開次級(jí)列表的內(nèi)容。再一次單擊上級(jí)列表時(shí)，次級(jí)列表又將隱藏在上級(jí)列表中。步驟： （1）選擇“創(chuàng)建一個(gè)嵌套的列表；（2）在列表上單擊鼠標(biāo)右鍵，選擇“列表屬性”對(duì)話框。（3）啟用可折疊大綱”復(fù)選框。4.5 使用表格一、 創(chuàng)建表格 三種方式：菜單、工具欄、手繪二、填充表格 表格的內(nèi)容可以是文本、圖片、音頻文件、視頻文件或超鏈接等。三、表格屬性1標(biāo)題屬性2對(duì)齊格式屬性 水平對(duì)齊方式有左對(duì)齊、右對(duì)齊、居中、兩端對(duì)齊四種方式，垂直對(duì)齊方式有頂部對(duì)齊、底部對(duì)齊、中部和基準(zhǔn)對(duì)齊四種方式。3邊框?qū)傩?邊框的大小和邊框的顏色。4背景屬性

29、包括背景顏色和背景圖象兩種屬性。5間隔屬性 表格的間隔由兩個(gè)因素確定：一是單元格的填充，即單元格之間的間隔距離；一是單元格間距即單元格內(nèi)部的間隔。6大小屬性 包括表格的寬度和高度。有兩種單位：一個(gè)是像素，另一個(gè)是百分比。4.6 圖形運(yùn)用一、添加圖形 打開“插入”菜單的“圖片”子菜單，執(zhí)行“來(lái)自文件”命令，選擇圖象文件的名稱。二、編輯圖形 包括設(shè)置圖象的特殊效果、剪切圖象、添加文本。1添加文本 圖片工具欄的“文本按鈕”就是用來(lái)在圖象內(nèi)添加文本信息的。2圖象的特殊效果 旋轉(zhuǎn)90度； 圖象翻轉(zhuǎn)； 修正對(duì)比度； 調(diào)整亮度； 黑白處理； 圖象弱化； 突出效果； 采樣與還原； 調(diào)整圖象大小； 設(shè)置對(duì)齊方式

30、； 使用折疊文本； 設(shè)置間隔距離； 設(shè)置透明背景三、設(shè)置背景圖形 1設(shè)置網(wǎng)頁(yè)的背景色 打開“格式”菜單，執(zhí)行其中的“背景”命令，在隨后出現(xiàn)的“網(wǎng)頁(yè)屬性”對(duì)話框內(nèi)選擇“背景”項(xiàng)。 2設(shè)置圖片為網(wǎng)頁(yè)背景 打開“格式”菜單，執(zhí)行其中的“背景”命令，在出現(xiàn)的“網(wǎng)頁(yè)屬性”對(duì)話框內(nèi)選擇“背景”項(xiàng)在“格式”欄中選擇“背景圖片”項(xiàng)。4.7 設(shè)置鏈接 鏈接（Hyperlink，簡(jiǎn)稱Link）是網(wǎng)頁(yè)中的動(dòng)態(tài)部分。一、鏈接的建立 點(diǎn)擊工具欄中的“Link”按鈕，然后在URL文本框內(nèi)輸入要鏈接的網(wǎng)頁(yè)的URL。也可以先輸入文字，然后拖動(dòng)鼠標(biāo)選定要建立超鏈接的文字，單擊鼠標(biāo)右鍵，在彈出的對(duì)話框中，選擇其中的超鏈接。二、目

31、標(biāo) 當(dāng)用鼠標(biāo)按下一個(gè)鏈接后，網(wǎng)頁(yè)能夠移動(dòng)到當(dāng)前網(wǎng)頁(yè)或網(wǎng)絡(luò)上的另一個(gè)網(wǎng)頁(yè)上的某一位置，我們稱此位置為目標(biāo)或下錨處（Anchor）。 使用目標(biāo)可以使我們?cè)跒g覽網(wǎng)頁(yè)時(shí)迅速翻動(dòng)到想瀏覽的內(nèi)容。 目標(biāo)建立好后，就可以在網(wǎng)頁(yè)內(nèi)建立鏈接。4.8 音頻的使用 音頻格式包括： Microsoft WAV文件：擴(kuò)展名是“.wav”。 Macintosh Sound文件：擴(kuò)展名是“.au”。 MIDI文件：MIDI文件只能存儲(chǔ)音樂(lè)文件，擴(kuò)展名是“.mid”。一、插入音頻 打開“插入”菜單中的“高級(jí)”子菜單，執(zhí)行“插件”命令，在“數(shù)據(jù)源”內(nèi)輸入插入音頻文件的地址。二、背景音樂(lè) 在IE瀏覽器中可以播放音頻文件，可以控制

32、播放的次數(shù)，這就是設(shè)置背景音樂(lè)，在用戶打開網(wǎng)頁(yè)時(shí)，音樂(lè)將隨之而出。 “網(wǎng)頁(yè)屬性”- -“常規(guī)”- “背景音樂(lè)”欄中輸入音頻文件的地址-設(shè)置播放次數(shù) 注意：Netscape Navigator瀏覽器不支持不用插件的音頻文件插入操作，只有用IE才可以。4.9 FrontPage 2000的高級(jí)應(yīng)用一、懸停按鈕 懸停是設(shè)置在超鏈接處的按鈕。它的效果是：當(dāng)鼠標(biāo)點(diǎn)擊懸停按鈕處的超鏈接時(shí)，懸停按鈕的顏色和形狀都會(huì)發(fā)生變化。 選擇“插入”菜單，執(zhí)行其中的“組件”子菜單，從“組件”子菜單中選擇“懸停按鈕”命令，便出現(xiàn)“懸停按鈕屬性”對(duì)話框。 在“懸停按鈕屬性”對(duì)話框中，可以設(shè)置懸停按鈕有關(guān)屬性： 1設(shè)置按鈕文

33、本 2設(shè)置鏈接對(duì)象 3字體設(shè)置 4顏色設(shè)置 5尺寸設(shè)置二、移動(dòng)字幕 移動(dòng)字幕是能夠移動(dòng)的動(dòng)態(tài)的文字。 在FrontPage 主窗口中打開“插入”菜單，執(zhí)行其中的“活動(dòng)元素”子菜單，從“組件”子菜單中選擇“字幕”命令，在“字幕屬性”對(duì)話框中設(shè)置字幕屬性。包括：1文本設(shè)置；2方向設(shè)置；3速度設(shè)置；4表現(xiàn)方式設(shè)置；5 對(duì)齊方式設(shè)置；6大小設(shè)置；7重復(fù)設(shè)置；8背景顏色設(shè)置三、網(wǎng)站計(jì)數(shù)器 在FrongPage 主窗口打開“插入”菜單，執(zhí)行其中的“組件”子菜單，從“組件”子菜單中選擇“站點(diǎn)計(jì)數(shù)器”命令，出現(xiàn)“站點(diǎn)計(jì)數(shù)器屬性對(duì)話框，通過(guò)這個(gè)對(duì)話框，我們可以設(shè)置它的屬性，包括： 字符設(shè)置； 起始點(diǎn)設(shè)置；3.位

34、數(shù)設(shè)置。四、FrontPage 2000的動(dòng)態(tài)效果 打開網(wǎng)頁(yè)，選擇要進(jìn)行動(dòng)態(tài)效果設(shè)計(jì)的內(nèi)容，它可以是普通文本，也可以是圖形。在FrontPage 主窗口中打開“格式”菜單，選取“DHTML效果”對(duì)話框，通過(guò)這個(gè)對(duì)話框，可以進(jìn)行動(dòng)態(tài)效果的設(shè)計(jì)。 1選擇事件 在“開啟”對(duì)話框中選擇發(fā)生的事件類型，這些事件就是用戶對(duì)網(wǎng)頁(yè)進(jìn)行的一些操作動(dòng)作，包括單擊、雙擊或移動(dòng)鼠標(biāo)等。 網(wǎng)頁(yè)加載 網(wǎng)頁(yè)加載是打開網(wǎng)頁(yè)的操作，可以選擇某種動(dòng)態(tài)效果，在網(wǎng)頁(yè)加載時(shí)生效。 單擊和雙擊 發(fā)生這種事件時(shí)，可以使用“飛到”或“格式”兩種動(dòng)態(tài)效果。 鼠標(biāo)移動(dòng) 鼠標(biāo)移動(dòng)時(shí)間是指在瀏覽器窗口或預(yù)覽窗口中，鼠標(biāo)經(jīng)過(guò)效果文本或圖片的操作。 選

35、擇動(dòng)態(tài)類型 動(dòng)態(tài)類型是與事件類型相對(duì)應(yīng)的，因此不能隨便選擇，而應(yīng)由事件類型來(lái)決定。 飛入 飛到 格式 旋轉(zhuǎn) 選擇動(dòng)態(tài)類型的效果 設(shè)置動(dòng)態(tài)類型的效果，也就是動(dòng)態(tài)類型的屬性。 飛行方式 格式效果 在選擇完事件類型、動(dòng)態(tài)類型和動(dòng)態(tài)類型的效果后，就完成了一個(gè)動(dòng)態(tài)效果的設(shè)置?？梢渣c(diǎn)擊“DHTML效果”對(duì)話框右下方的效果顯示圖標(biāo)，觀察所設(shè)置的動(dòng)態(tài)效果。4.10 使用表單 創(chuàng)建表單的方式有三種：表單模板、表單向?qū)Ш妥远x表單。一、使用表單模板二、使用表單向?qū)?使用表單模板只能創(chuàng)建最簡(jiǎn)單的幾種表單，而用表單向?qū)?，就可以隨心所欲地創(chuàng)建表單。4.11 使用樣式 樣式就是網(wǎng)頁(yè)設(shè)計(jì)時(shí)事先確立的一些規(guī)則，比如說(shuō)文本之間

36、的縮進(jìn)量、空白大小、字體的類型、顏色和大小等。樣式表是網(wǎng)頁(yè)中字體、段落和版面等各種屬性的集合。主題樣式能對(duì)整個(gè)網(wǎng)站起規(guī)范作用，使網(wǎng)站風(fēng)格統(tǒng)一與和諧。一、創(chuàng)建與使用樣式 在主窗口中選擇“格式”菜單，執(zhí)行其中的“樣式”命令，彈出“樣式”對(duì)話框，選擇要?jiǎng)?chuàng)建的樣式類型。二、使用主題樣式 使用主題樣式可以對(duì)整個(gè)網(wǎng)站進(jìn)行規(guī)范，使網(wǎng)站具有同一種風(fēng)格。4.12 使用框架 使用框架能使網(wǎng)頁(yè)之間的關(guān)系更明顯，便于了解網(wǎng)頁(yè)的結(jié)構(gòu)，也可以使設(shè)計(jì)思路更清晰，使網(wǎng)頁(yè)便于管理。 框架網(wǎng)頁(yè)創(chuàng)建和設(shè)置過(guò)程：見教材第5章 網(wǎng)站網(wǎng)頁(yè)的上傳與維護(hù) 本章介紹了進(jìn)行網(wǎng)頁(yè)發(fā)布的一般方法，以及如何對(duì)已發(fā)布的網(wǎng)頁(yè)進(jìn)行測(cè)試與維護(hù)，最后簡(jiǎn)單討論了

37、網(wǎng)站可能遇到的安全問(wèn)題及我們應(yīng)該采取的對(duì)策。教學(xué)重點(diǎn)與難點(diǎn)網(wǎng)頁(yè)的上傳網(wǎng)頁(yè)的測(cè)試網(wǎng)站的安全5.1 發(fā)布網(wǎng)頁(yè)一、網(wǎng)頁(yè)空間的申請(qǐng) 租用專線 質(zhì)量好，費(fèi)用高 租用網(wǎng)頁(yè)空間或虛擬主機(jī) 價(jià)格合適 申請(qǐng)免費(fèi)網(wǎng)頁(yè)空間 天上掉下來(lái)的餡餅二、為網(wǎng)站注冊(cè)域名 目前，可以通過(guò)“中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心”（CNNIC）的域名注冊(cè)系統(tǒng)申請(qǐng)諸如.、.、.等域名，詳細(xì)的申請(qǐng)程序及繳費(fèi)方式可以到CNNIC網(wǎng)站查詢，其地址為。也可到等網(wǎng)站申請(qǐng)域名。三、 上傳工具簡(jiǎn)介 FTP軟件有很多，如WS-FTP Pro、CuteFTP、LeechFTP、FLASHftp等。四、發(fā)布網(wǎng)頁(yè)的步驟 以在發(fā)布為例： 登陸到億唐 租用服務(wù)器或虛擬主機(jī)。

38、根據(jù)億唐的要求，辦理手續(xù)。 上傳已制作的網(wǎng)頁(yè)5.2 網(wǎng)頁(yè)測(cè)試一、網(wǎng)頁(yè)測(cè)試法 1. 盡量多使用幾種不同的Web瀏覽器測(cè)試網(wǎng)頁(yè) 2. 盡量不要使用最新版本的瀏覽器進(jìn)行網(wǎng)頁(yè)測(cè)試 3. 盡量在多種操作系統(tǒng)中測(cè)試網(wǎng)頁(yè)二、測(cè)試項(xiàng)目 1. 鏈接測(cè)試 主要看網(wǎng)頁(yè)中是否有超鏈接掉鏈的情況。 2. 外觀測(cè)試 3. 速度測(cè)試 速度越快越好。 4. 腳本和程序測(cè)試 測(cè)試頁(yè)面中的JavaScript以及CGI程序是否能正常工作。5.3 網(wǎng)站維護(hù)一、網(wǎng)站更新 進(jìn)行網(wǎng)頁(yè)更新最有用的依據(jù)是日志記錄。二、網(wǎng)站升級(jí) 服務(wù)器軟件的升級(jí)和操作系統(tǒng)的升級(jí)。5.4 安全問(wèn)題 1. 病毒 2. 特洛伊木馬 會(huì)使你的計(jì)算機(jī)受到別人的控制。

39、3. 黑客 “好心”的黑客有可能幫你修補(bǔ)系統(tǒng)。 4. 工業(yè)間諜 真正的危險(xiǎn)者。第6章 Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)技術(shù) Dreamweaver是一套視覺(jué)化的網(wǎng)頁(yè)開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺(tái)和瀏覽器限制的充滿動(dòng)感的網(wǎng)頁(yè)。 通過(guò)Dreamweaver 提供的“所見即得”的友好編輯功能，編寫ASP、JSP、CFML甚至PHP程序，從而創(chuàng)建動(dòng)態(tài)網(wǎng)站系統(tǒng)。教學(xué)重點(diǎn)與難點(diǎn)頁(yè)面版面設(shè)計(jì)使用資源面板創(chuàng)建模板6.1 Dreamweaver 簡(jiǎn)介一、操作界面 Dreamweaver 4由兩個(gè)部分組成，即頁(yè)面編輯器和站點(diǎn)管理器。 1.頁(yè)面編輯器 分為五個(gè)部分：菜單欄、工具欄、控制面板、文件工作區(qū)、

40、狀態(tài)欄。其中控制面板有屬性面板、對(duì)象面板、樣式面板、幫助面板等。2站點(diǎn)管理器的構(gòu)成 站點(diǎn)管理器左側(cè)窗口顯示了站點(diǎn)地圖，右側(cè)窗口顯示了當(dāng)前網(wǎng)站中的文件列表。一般來(lái)說(shuō)，在做站點(diǎn)時(shí)應(yīng)先建立好站點(diǎn)，再開始網(wǎng)頁(yè)的制作，這樣可以保證頁(yè)面內(nèi)文件鏈接的正確性。6.2 Dreamweaver 制作基礎(chǔ)一、創(chuàng)建網(wǎng)頁(yè) 啟動(dòng)Dreamweaver 4，就會(huì)自動(dòng)生成一個(gè)白色背景的文件工作區(qū)，這里就是設(shè)計(jì)和制作網(wǎng)頁(yè)的地方，可以在這里輸入網(wǎng)頁(yè)設(shè)計(jì)過(guò)程中所需要的文字、圖片、表格、Flash動(dòng)畫等。 網(wǎng)頁(yè)的背景顏色的，以及文字的顏色都是可以通過(guò)“Page Properties”設(shè)置的。二、文字的編輯 可以直接在網(wǎng)頁(yè)中輸入文字，

41、可以在【Text】下設(shè)置文字的格式，如字體、字號(hào)、顏色、粗體、斜體，段落居左、居中及居右，添加項(xiàng)目符號(hào)及編號(hào)等。此外，還可以利用HTML樣式和CSS樣式對(duì)文字進(jìn)行統(tǒng)一格式設(shè)置。 可以利用屬性面板更改文字的大小、顏色、字體等。三、插入圖像 在網(wǎng)頁(yè)中插入一幅圖片時(shí)，圖片文件必須位于當(dāng)前站點(diǎn)中。 在對(duì)象面板中選擇插入圖片圖標(biāo)，此時(shí)系統(tǒng)將打開“選擇圖像源文件”對(duì)話框。找到需要插入的圖片文件，選擇“Select”。 Dreamwaver支持常用的網(wǎng)頁(yè)圖片格式有擴(kuò)展名為“GIF”、“JPG”、“JPEG”、“PNG”的圖形文件。四、插入鼠標(biāo)變換圖片 該圖片對(duì)象的特點(diǎn)是當(dāng)鼠標(biāo)經(jīng)過(guò)該圖片時(shí)，圖片內(nèi)容會(huì)自動(dòng)更新

42、。實(shí)際上，它是由兩幅圖片組成的，一幅為主圖片，顯示在頁(yè)面中；一幅為滾動(dòng)圖片，當(dāng)鼠標(biāo)經(jīng)過(guò)圖片所在區(qū)域時(shí)顯示。單擊對(duì)象面板中的圖標(biāo)，或者選擇【Insert】菜單的“Interactive Images”子菜單中的“Rollover Image”命令可實(shí)現(xiàn)該操作。五、創(chuàng)建圖片熱點(diǎn) 在插入的圖片上，可以是交換式圖片，可以把圖片分為若干個(gè)區(qū)域，每個(gè)區(qū)被稱為“熱點(diǎn)”，可以為每個(gè)熱點(diǎn)指定相關(guān)的鏈接。當(dāng)單擊某個(gè)熱點(diǎn)時(shí)，系統(tǒng)顯示相關(guān)的網(wǎng)頁(yè)。當(dāng)繪制完熱區(qū)后，屬性面板會(huì)顯示熱區(qū)的屬性。 還可以調(diào)整熱點(diǎn)區(qū)尺寸。六、插入水平線 在對(duì)象面板中選擇按鈕，在頁(yè)面中點(diǎn)擊，畫面會(huì)自動(dòng)生成一條水平線，在水平線上單擊，可以設(shè)置水平線

43、的寬度、高度、對(duì)齊方式、是否有陰影等參數(shù)。七、插入郵件鏈接 創(chuàng)建郵件鏈接的作用是當(dāng)瀏覽者點(diǎn)擊該鏈接時(shí)，系統(tǒng)將自動(dòng)啟動(dòng)計(jì)算機(jī)中的郵件發(fā)送程序。八、插入日期 在對(duì)象面板中選擇按鈕，在頁(yè)面中點(diǎn)擊，會(huì)彈出對(duì)話框，可以設(shè)置日期格式、星期格式、時(shí)間格式，點(diǎn)擊“OK”，就會(huì)在頁(yè)面中自動(dòng)加上時(shí)間。九、插入Flash對(duì)象 1插入Flash影片 2制作Flash文字 3制作Flash按鈕十、表格的應(yīng)用 1插入表格 2表格屬性面板 表格屬性面板中的設(shè)置項(xiàng)對(duì)整個(gè)表格起作用，如果想對(duì)表中的某一行單獨(dú)設(shè)置，首先選中表的某一行，再利用單元格屬性面板進(jìn)行設(shè)置。 3表格的選取 4添加表格內(nèi)容5單元格的合并與拆分十一、 層的應(yīng)用

44、 層是網(wǎng)頁(yè)中的一種容器，它可定位在頁(yè)面上的任意位置，并且其中可包含文本、圖像、表單等所有可直接用于文檔的元素。 1創(chuàng)建層 2層的大小調(diào)整 3層的移動(dòng) 4層的屬性面板5層控制面板6層的動(dòng)態(tài)效果十二、框架的應(yīng)用 創(chuàng)建普通框架集 利用框架屬性面板來(lái)設(shè)置該框架是否要邊線以及邊線的顏色、邊線寬度、框架的名稱和框架中所要顯示的源文件。 可以查看框架集的文件的源代碼，這里面只保存了框架信息和它所對(duì)應(yīng)的源文件。十三、行為面板的使用 通過(guò)行為面板可以在網(wǎng)頁(yè)上制作出一些簡(jiǎn)單的交互效果。行為由兩個(gè)部分組成，即事件和動(dòng)作，通過(guò)事件的響應(yīng)執(zhí)行對(duì)應(yīng)的動(dòng)作。 事件是用于指明執(zhí)行某項(xiàng)動(dòng)作的條件，動(dòng)作實(shí)際上是一段執(zhí)行特定任務(wù)的

45、預(yù)先寫好的JavaScript代碼，如打開窗口、播放聲音等都是動(dòng)作。十四、模板的運(yùn)用1準(zhǔn)備模板2定義區(qū)域3應(yīng)用模板6.3 用Dreamweaver 建立Web站點(diǎn)一、定義一個(gè)本地站點(diǎn) 當(dāng)定義一個(gè)本地站點(diǎn)時(shí)，首先應(yīng)該確認(rèn)讓Dreamweaver 在哪兒為這個(gè)站點(diǎn)存儲(chǔ)所有的文件。二、 創(chuàng)建站點(diǎn)首頁(yè) 當(dāng)建立完站點(diǎn)之后，就可以打開站點(diǎn)管理器，通過(guò)它管理站點(diǎn)，往站點(diǎn)內(nèi)添加網(wǎng)頁(yè)及其它文件，三、查看站點(diǎn)文件和鏈接 當(dāng)建立完首頁(yè)之后，就可以編輯首頁(yè)，然后添加與其相關(guān)的網(wǎng)頁(yè)，網(wǎng)頁(yè)之間的相互鏈接可以通過(guò)站點(diǎn)管理器來(lái)查看。6.4 Dreamweaver 制作網(wǎng)頁(yè)實(shí)例一、網(wǎng)頁(yè)布局設(shè)計(jì) 以表格形式組織。二、網(wǎng)頁(yè)內(nèi)容設(shè)計(jì)

46、 圖片的處理與制作，要借助Fireworks或者Photoshop完成，F(xiàn)lash動(dòng)畫在Flash中完成，對(duì)于圖像、動(dòng)畫，可以在插入對(duì)象之后，賦予它們不同的屬性，比如超鏈接、動(dòng)作設(shè)置等。第7章 Photoshop圖像處理基礎(chǔ) 6.0版本的Photoshop比以前版本加強(qiáng)了網(wǎng)絡(luò)方面的功能以及文字編輯能力，重新布局了菜單系統(tǒng)，使操作更加簡(jiǎn)便、功能更加強(qiáng)勁。它的出現(xiàn)使人們告別了對(duì)圖片進(jìn)行修正的傳統(tǒng)的手工方式，還可使人們通過(guò)想象，創(chuàng)造出現(xiàn)實(shí)世界里無(wú)法拍攝到的圖像。教學(xué)重點(diǎn)與難點(diǎn)工具箱的使用使用圖層色彩和色彩調(diào)整7.1 Photoshop簡(jiǎn)介一、操作界面 Photoshop6.0的整個(gè)界面分為四個(gè)部分：

47、菜單欄、工具欄、控制面板、狀態(tài)欄。 菜單欄 工具欄 控制面板 狀態(tài)欄二、工具箱三、控制面板 1.導(dǎo)航器和信息面板 2. 顏色、色板和樣式面板 3. 動(dòng)作和歷史記錄 4. 圖層、通道及路徑四、色彩模式 1RGB模式 RGB就是色光的色彩模式。R代表紅色，G代表綠色，B代表藍(lán)色，三種色彩疊加形成了其他色彩，所以RGB模式是一種加色模式。 2CMYK模式 減色模式，C代表青色，M代表洋紅色，Y、K代表黃、黑色。色彩范圍不及RGB。 3HSB模式 在HSB模式中，H代表色相，S代表飽和度，B代表亮度。 4Lab模式 Lab模式既不依賴于光線，又不依賴于顏料。它是CIE組織確定的一個(gè)理論上包括了人眼可見

48、的所有色彩的色彩模式。 5索引顏色模式 6灰度模式 7位圖模式 8多通道模式 9雙色調(diào)模式五、文件格式 PSD和PDD文件格式：PSD文件和PDD文件是Photoshop軟件專用的格式，能保存圖像數(shù)據(jù)的每一個(gè)細(xì)小部分，包括像素信息，顏色模式信息，圖層信息，通道信息，蒙版信息，PSD和PDD格式文件特別大。 1BMP格式 BMP 是 DOS 和 Windows 兼容計(jì)算機(jī)系統(tǒng)的標(biāo)準(zhǔn) Windows 圖像格式。 2GIF格式 GIF 是一種 LZW 壓縮格式，用來(lái)最小化文件大小和電子傳遞時(shí)間。 3PCX格式 4TGA格式 5PXR格式 6JPEG格式 JPEG格式是所有壓縮格式中最卓越的，JPEG

49、 格式支持 CMYK、RGB 和灰度顏色模式，不支持 Alpha 通道。 7TIFF格式 TIFF 是一種靈活的位圖圖像格式，實(shí)際上被所有繪畫、圖像編輯和頁(yè)面排版應(yīng)用程序所支持。 8EPS格式 9Filmstrip格式7.2 Photoshop處理圖像實(shí)例一、網(wǎng)站logon圖標(biāo)的制作二、背景圖案的制作第8章 Flash動(dòng)畫制作基礎(chǔ) Flash 5能夠創(chuàng)作出極具吸引力的高效網(wǎng)頁(yè)。它可以輕易與Macromedia 公司的圖像處理軟件FreeHand和Fireworks集成，直接導(dǎo)入這些軟件制作的圖像。它還提供功能強(qiáng)大的開發(fā)工具，使用戶可以創(chuàng)建高級(jí)的網(wǎng)站和網(wǎng)絡(luò)應(yīng)用。教學(xué)重點(diǎn)與難點(diǎn)幀的操作元件的概念元

50、件的應(yīng)用8.1 Flash簡(jiǎn)介一、操作界面 Flash5的整個(gè)界面包括：菜單欄、工具欄、工具箱、控制面板、舞臺(tái)、時(shí)間軸以及活動(dòng)窗口。二、工具箱三、 控制面板 1信息、變形、描繪、填充面板 2混色面板與色彩樣本面板 3字符面板、段落面板、文本選項(xiàng)面板 4實(shí)例面板、特效面板、幀面板、聲音面板 5對(duì)齊面板(Actions) 、場(chǎng)景面板（Scene） 6剪輯參數(shù)面板 7 動(dòng)作面板 8動(dòng)畫管理器面板四、圖庫(kù)窗口 圖庫(kù)窗口可以用來(lái)存放和組織我們創(chuàng)建的符號(hào)，還是存放導(dǎo)入聲音，位圖圖形的地方。五、時(shí)間軸與舞臺(tái) 舞臺(tái)與時(shí)間軸是動(dòng)畫制作的主要場(chǎng)所。時(shí)間軸是調(diào)整和控制動(dòng)畫的地方。六、工具條按鈕和工具提示8.2 Fl

51、ash動(dòng)畫范例一、網(wǎng)站logon動(dòng)畫的制作二、滾動(dòng)圖片動(dòng)畫的制作第9章 Fireworks 4圖形處理 使用Fireworks可以創(chuàng)建和編輯位圖、矢量圖形和動(dòng)畫，還可以實(shí)現(xiàn)網(wǎng)頁(yè)設(shè)計(jì)中常見的交互效果，比如翻轉(zhuǎn)圖像，下拉菜單等，設(shè)計(jì)完成以后，可以將它輸為HTML和JavaScript代碼的網(wǎng)頁(yè)文件，還能輸出為可以在Photoshop、Ilstrator和Flash等軟件中編輯的格式。教學(xué)重點(diǎn)與難點(diǎn)位圖和矢量圖交互按鈕的制作圖標(biāo)的制作9.1 Fireworks簡(jiǎn)介一、操作界面 Fireworks4的整個(gè)界面里包括：菜單欄、工具欄、工具箱、控制面板、文件窗口以及活動(dòng)窗口。二、 工具箱 三、控制面板 1

52、筆觸、填充、效果、信息面板 2優(yōu)化面板（Optimize）、對(duì)象面板（Object）、行為面板（Behaviors） 3混色面板(Mixer)、色彩樣本面板(Swatches)、面板(Table)、選項(xiàng)面板 4層面板（Layers）、框架面板（Frames）、歷史面板（History） 5樣式面板（Styles）、庫(kù)面板（library）、超鏈接面板（URL）四、文件窗口 Fireworks 的文件窗口是我們繪制和編輯創(chuàng)作的地方，標(biāo)題欄顯示了文件的名字和當(dāng)前的顯示放大率。五、工具欄 主工具欄（main）、調(diào)整欄（modify），主工具欄主要用于打開、保存、復(fù)制、粘貼和打印文件等。調(diào)整工具欄用于

53、對(duì)工作區(qū)的對(duì)象進(jìn)行組合、放置、定方向和對(duì)齊等功能。六、工具箱矢量模式與位圖模式 1矢量圖 矢量圖使用線段和曲線描述圖像，所以稱為矢量，同時(shí)圖形也包含了色彩和位置信息。 2位圖 位圖使用稱為像素的一格一格的小點(diǎn)來(lái)描述圖像。 9.2 Fireworks交互按鈕的制作一、文件的建立二、制作過(guò)程 1繪制一個(gè)矩形 2轉(zhuǎn)化為Symbols(符號(hào)) 3編輯按鈕9.3 網(wǎng)站logon圖標(biāo)的制作1. 新建2. 調(diào)入標(biāo)志3. 粘貼標(biāo)志4. 標(biāo)志的處理5. 輸入文字6. 圖層調(diào)整第10章 其他工具介紹 隨著電腦軟件技術(shù)的發(fā)展，網(wǎng)頁(yè)設(shè)計(jì)軟件也不斷的發(fā)展，各種各樣的網(wǎng)頁(yè)制作工具，層出不窮，要制作自己有特色的網(wǎng)頁(yè)，就需要

54、我們掌握和了解各種網(wǎng)頁(yè)制作工具，利用好各種工具的特點(diǎn)，這樣，在制作網(wǎng)頁(yè)時(shí)，就會(huì)更加輕松，更加有效果。教學(xué)重點(diǎn)與難點(diǎn)工具的分類工具的選擇10.1 網(wǎng)頁(yè)設(shè)計(jì)工具軟件的簡(jiǎn)介 以網(wǎng)頁(yè)制作的內(nèi)容來(lái)劃分網(wǎng)頁(yè)制作工具，可分為如下幾種： 1. Web創(chuàng)作與網(wǎng)站管理軟件 2. HTML編輯軟件 3.動(dòng)畫制作軟件 4.圖形圖像制作處理軟件 5.音頻視頻制作處理軟件10. 2 Web創(chuàng)作與網(wǎng)站管理軟件 GoLive6是一個(gè)優(yōu)秀的可視化網(wǎng)頁(yè)開發(fā)工具，提供有更加靈活的源代碼編輯器，能快速方便地編輯、檢查HTML代碼，而且能非常容易地增加動(dòng)態(tài)HTML、層疊樣式表、編輯QuickTime物件，還預(yù)設(shè)有JavaScript事

55、件和更加先進(jìn)的網(wǎng)站管理功能，預(yù)覽設(shè)計(jì)結(jié)果的操作也更加方便。10.3 HTML編輯軟件 HTML編輯軟件有很多很多，如HotDog、CoofeeCup、HomeSite等幾個(gè)比較大的軟件，在網(wǎng)上可以找出很多比較小的HTML編輯軟件來(lái)如Mini NoteTab、Arachnophilia等等，當(dāng)然，我們也可以用系統(tǒng)自帶的“記事本”來(lái)修改編輯Html文件。10.4 動(dòng)畫制作軟件 1. Adobe Imageready3.0 2. LiveMotion 2.0 3.Ulead GIF Animator 4. Ulead Cool 3D10.5 圖形圖像軟件 圖形圖像制作處理軟件非常之多，如Photos

56、hop、Firework、CorelDraw、Illustrator、Freehand等等。10.6 音頻視頻處理軟件 多媒體信息已成網(wǎng)頁(yè)的一個(gè)重要內(nèi)容，因此，制作網(wǎng)頁(yè)時(shí)往往會(huì)用到音頻、視頻編輯制作軟件。音頻、視頻的編輯制作軟件有也有很多，比較常用的有Adobe Premiere 6.0。第11章 在網(wǎng)頁(yè)中使用JavaScript JavaScript是一種基于對(duì)象的腳本語(yǔ)言，可嵌入到HTML網(wǎng)頁(yè)中。它除了內(nèi)置了一些常用對(duì)象，還可以使用瀏覽器提供的對(duì)象，甚至可以創(chuàng)建新對(duì)象。通過(guò)采用事件驅(qū)動(dòng)機(jī)制，使其能在客戶端（瀏覽器）與用戶實(shí)現(xiàn)大量的交互、還能創(chuàng)建出驚人的特效。教學(xué)重點(diǎn)與難點(diǎn)事件驅(qū)動(dòng)機(jī)制對(duì)象的

57、概念和使用JavaScript內(nèi)置對(duì)象瀏覽器對(duì)象11.1 JavaScript 簡(jiǎn)介 JavaScript是一種簡(jiǎn)潔的、面向?qū)ο蟮?、跨平臺(tái)的描述語(yǔ)言，JavaScript和Java很類似，但并不相同。Java是一種比JavaScript復(fù)雜許多的語(yǔ)言，由SUN公司開發(fā)；而JavaScript則是簡(jiǎn)單而小巧的語(yǔ)言，由Netscape公司推出。一、JavaScript的特點(diǎn) JavaScript是一種基于對(duì)象(Object Based)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語(yǔ)言。 1.基于對(duì)象 2.簡(jiǎn)單性 3.安全性 4.動(dòng)態(tài)性 5.跨平臺(tái)二、JavaScrip運(yùn)行和編輯環(huán)境三

58、、在Html中嵌入JavaScript腳本 在Html中使用JavaScript時(shí)，應(yīng)將JavaScript程序放在標(biāo)記間。1.在Html中加入已有的JavaScript腳本文件2.考慮不支持JavaScript的瀏覽器 可以把JavaScript源程序放在HTML的注釋標(biāo)記內(nèi)，從而使不支持JavaScript的瀏覽器把它當(dāng)作HTML的注釋而忽略JavaScript源程序。11.2 JavaScript語(yǔ)言結(jié)構(gòu)一、數(shù)據(jù)和運(yùn)算符 1數(shù)據(jù)：有六種數(shù)據(jù)類型 JavaScript是一種對(duì)數(shù)據(jù)類型變量要求不太嚴(yán)格的語(yǔ)言，所以不必聲明每一個(gè)變量的類型，變量聲明盡管不是必須的，但在使用變量之前先進(jìn)行聲明是一

59、種好的習(xí)慣。2運(yùn)算符 （1） 算術(shù)運(yùn)算符 （2） 比較運(yùn)算符 （3） 邏輯運(yùn)算符 （4） 字符串運(yùn)算符 （5） 位運(yùn)算符 （6） 賦值運(yùn)算符二、語(yǔ)句和程序控制 1一般語(yǔ)句 （1） 數(shù)據(jù)聲明語(yǔ)句 var 變量名=初始值 （2） 賦值語(yǔ)句 由賦值表達(dá)式組成的語(yǔ)句。 （3） 注釋語(yǔ)句 /：?jiǎn)涡凶⑨?，從?”開始到本行行尾都為注釋； /*/：多行注釋，從“/*”開始到“*/”結(jié)束為注釋。2選擇結(jié)構(gòu) （1） if.else語(yǔ)句 if (條件) 執(zhí)行分支語(yǔ)句1 else 執(zhí)行分支語(yǔ)句2 （2） switch語(yǔ)句 switch (expression) case label1: 語(yǔ)句串1； case lab

60、el2: 語(yǔ)句串2； case label3: 語(yǔ)句串3； . default : 語(yǔ)句串3； 3循環(huán)結(jié)構(gòu) （1） for語(yǔ)句 for (循環(huán)變量初始化; 循環(huán)變量結(jié)束條件; 循環(huán)變量自增/減變化) 循環(huán)體 （2） while語(yǔ)句 while (循環(huán)條件) 循環(huán)體 （3） do-while語(yǔ)句 do 循環(huán)體 while(循環(huán)條件); （4） break語(yǔ)句 break語(yǔ)句結(jié)束當(dāng)前的各種循環(huán)，并執(zhí)行循環(huán)語(yǔ)句的下一條語(yǔ)句。 （5） continue語(yǔ)句： continue語(yǔ)句結(jié)束當(dāng)前的循環(huán)，跳過(guò)本次循環(huán)并馬上開始下一個(gè)循環(huán)。4函數(shù)定義語(yǔ)句：function，return function 函數(shù)名(