1、網(wǎng)頁制作與設(shè)計(jì)教程 第1章 網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)是一個(gè)很大的課題。本章將網(wǎng)頁設(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)站的主題和名稱 一、題材的選擇 美國個(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)頁/網(wǎng)站開發(fā)第六類：娛樂網(wǎng)站第七類：旅行第八類：參

2、考/資訊第九類：家庭/教育第十類：生活/時(shí)尚 在選擇題材時(shí)，可從下面幾個(gè)方面進(jìn)行考慮：1主題要小而精 定位要小，內(nèi)容要精。2題材最好是自己擅長(zhǎng)或者喜愛的內(nèi)容3題材不要太濫或者目標(biāo)太高 二、網(wǎng)站名稱的選擇 一般建議按以下規(guī)則取名：1名稱要正氣2名稱要易記3名稱要有特色 名稱平實(shí)可以接受，但如果能體現(xiàn)一定的內(nèi)涵，給瀏覽者更多的視覺沖擊和空間想象力，則為上品。在體現(xiàn)網(wǎng)站主題的同時(shí)，要有這畫龍點(diǎn)睛之筆。1.2 定位網(wǎng)站的CI形象 CI（Corporate Identity）是借用廣告詞語，意思是通過視覺來統(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)語1.3 確定網(wǎng)站的欄目和版塊 一般的網(wǎng)站欄目安排要注意以下幾個(gè)方面：1一定記住要緊扣主題2設(shè)一個(gè)最近更新或網(wǎng)站指南欄目3設(shè)定一個(gè)可以雙向交流的欄目4設(shè)一個(gè)下載欄目或常見問題回答欄目 欄目實(shí)質(zhì)是一個(gè)網(wǎng)站的大綱索引，索引應(yīng)該將網(wǎng)站的主題明確顯示出來。在指定欄目的時(shí)候，要仔細(xì)考慮，合理安排。 劃分欄目需要注意的是：（1）盡可能將網(wǎng)站最有價(jià)值的內(nèi)容列在欄目上。（2）盡可能方便訪問者的瀏覽和查詢。（3）盡可能刪除與主題無關(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、要注意的問題有：（1）不要使用中文名字的目錄名。（2）不要使用過長(zhǎng)的目錄名。（3）盡量使用意義明確的目錄名，盡量做到“見名知意”。（4）目錄的層次不要太多，建議不要超過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)頁制作中是非常重要的一環(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)格而沒有內(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ā)展毫無意義，就像給奶牛穿高跟鞋，那么寧可放棄這個(gè)創(chuàng)意。1.6 首頁設(shè)計(jì) 設(shè)計(jì)好一個(gè)首頁，一般的步驟是：（1）確定首頁的功能模塊。包括：網(wǎng)站名稱（logo）、主菜單（menu）、新聞（whats new）、搜索（search）、友情鏈接（links）、郵件列表（

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

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

8、網(wǎng)頁4設(shè)計(jì)首頁的考慮 首頁（Homepage）作為網(wǎng)頁文件的第一頁，在整個(gè)網(wǎng)頁文件中具有舉足輕重的作用。5網(wǎng)頁設(shè)計(jì)的標(biāo)準(zhǔn) 2.2 網(wǎng)頁的創(chuàng)意設(shè)計(jì) 網(wǎng)頁的創(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)頁的創(chuàng)意設(shè)計(jì)還必須重視“形象思維”的情感象征意義的傳達(dá)，以有別于知識(shí)性思考形式審美結(jié)構(gòu)的營造。一、 網(wǎng)頁創(chuàng)意設(shè)計(jì)的意義、功能和目的 網(wǎng)頁創(chuàng)意設(shè)計(jì)是否成功，除了其內(nèi)容因素外，首先要看其在視覺上能否引人注目。 網(wǎng)頁的創(chuàng)意設(shè)計(jì)包括文字排列方向、字群聚散組合，字體大小風(fēng)格的選擇，圖片的分布及色彩與空白的經(jīng)營，不僅追求網(wǎng)頁形式的變化，

9、更重視各視覺元素的不同形式和構(gòu)成能給人在感情上造成不同的心理感受，并體現(xiàn)不同的主題。二、網(wǎng)頁創(chuàng)意設(shè)計(jì)的構(gòu)成要素及其作用1標(biāo)題 標(biāo)題是表達(dá)信息主題的短句，標(biāo)題有主標(biāo)題與子標(biāo)題之分。2標(biāo)語 標(biāo)語是具有韻味的意義完整的句子。3正文4網(wǎng)頁名稱5標(biāo)志6插圖 將所傳達(dá)的信息內(nèi)容賦以視覺化的造型稱為插圖。7圖標(biāo)8背景9動(dòng)畫 動(dòng)畫不僅能增添網(wǎng)頁的視覺趣味效果，同時(shí)，也可以用來進(jìn)一步突出網(wǎng)頁和信息內(nèi)容的主題和風(fēng)格。三、網(wǎng)頁創(chuàng)意設(shè)計(jì)的原理和準(zhǔn)則 進(jìn)行網(wǎng)頁的創(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、頁上各構(gòu)成要素之間的視覺流程，能自然而有序地達(dá)到信息訴求重點(diǎn)的位置，突出主題。（3） 注意保護(hù)網(wǎng)頁在視覺上的相對(duì)均衡感，不論是正常的均衡或是異常的均衡，均應(yīng)有相應(yīng)的均衡和律動(dòng)感，使其在網(wǎng)頁上得到正確的配置，否則會(huì)失去必要的安定感。（4） 突出主題要素。（5） 注意網(wǎng)頁設(shè)計(jì)中的空白處理。（6） 注重整體的對(duì)比因素。（7） 在視覺上著力強(qiáng)調(diào)網(wǎng)頁的訴求重點(diǎn)。（8） 注意提高網(wǎng)頁信息內(nèi)容的視讀性。（9）創(chuàng)造一定的韻律感。 它反映在網(wǎng)頁設(shè)計(jì)中利用有力的線條、形體及色彩形成一種有節(jié)奏性的律動(dòng)感，能引導(dǎo)人的視覺以一種流暢而有停頓的方式運(yùn)動(dòng)。既有視覺的連續(xù)性又有間歇性，使人能夠抑揚(yáng)起落地瀏覽整個(gè)網(wǎng)頁，閱讀時(shí)感

11、到輕松而又富于韻味。四、網(wǎng)頁創(chuàng)意設(shè)計(jì)的形式法則和表現(xiàn)手法1視覺流程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)頁的創(chuàng)作步驟一、 網(wǎng)頁的準(zhǔn)備1確定主題與設(shè)計(jì)風(fēng)格 每一類網(wǎng)頁都有其特定的目的和獨(dú)特的風(fēng)格。2資料的收集與整理 網(wǎng)頁中最常見的問題是不能有足夠的素材來體現(xiàn)制作者的理念。二、網(wǎng)頁的制作 網(wǎng)頁的制作分為六個(gè)部分：1標(biāo)題2文字3圖片4背景5特殊效果6網(wǎng)頁排版2.4 網(wǎng)頁制作基礎(chǔ) 一、設(shè)計(jì)前的考慮因素1總體規(guī)劃2網(wǎng)站主題3用戶優(yōu)先 最高的行動(dòng)準(zhǔn)則就是“用戶優(yōu)先”。沒有用戶去光顧，任何主頁都沒有意義。4響應(yīng)時(shí)間5內(nèi)容第一

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

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

14、本格式的文件。 標(biāo)記HTML的開始，在文件結(jié)束處要有對(duì)應(yīng)的符號(hào)。3.2 網(wǎng)頁數(shù)據(jù)編輯與格式化一、創(chuàng)建HTML文檔1用工具軟件創(chuàng)建HTML文檔 用比較完善的工具軟件來制作網(wǎng)頁，像FronPage2000，Dreamweaver 4等2用編輯工具編寫HTML文檔 EDIT、記事本、寫字板、Word等編輯工具可以用來編輯HTML文檔。二、標(biāo)簽格式 在HTML文件中，重要的文字部分都由“標(biāo)簽”括起來，這樣文字就成了特別的文字，而標(biāo)簽本身則以“”號(hào)標(biāo)識(shí)，標(biāo)簽內(nèi)的內(nèi)容稱為元素，它代表了標(biāo)簽的意義。如： 中南省委宣傳部主頁 括住的文字稱為“內(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)題文字的語種。（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字符格式 通過表3.1的標(biāo)記符設(shè)置字符格式2字體大小、字符顏色和字體樣式（1） SIZE屬性：控制文字的大小（2）COLOR屬性：控制文字的顏色（3）FACE屬性：指定字體樣式六、列表格式1有序列表 定義有序列表需要使用有序列

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

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

19、在它的中間加入標(biāo)題和需要的數(shù)據(jù)。表格定義的代碼為： 具體表格內(nèi)容 1. 表格的標(biāo)題元素定義了表格的說明。如： 在這里輸入標(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表格在頁面中的對(duì)齊 利用表格的ALIGN屬性，可以將表格顯示在頁面的左邊或右邊。如果沒有設(shè)置這一屬性，表格單獨(dú)顯示為頁面的一行，在頁面的左側(cè)。ALIGN=”LEFT”將表格按左邊對(duì)齊，而表格的所有

20、文本顯示在表格右側(cè)和頁面之間的位置。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è)置表格邊框的尺寸，它以指定的粗度來顯示表格邊框。如： 2. 設(shè)置表格尺寸 利用的WIDTH和HEIGHT屬性可以設(shè)置表格尺寸。如： 3. 設(shè)置表元間隙 利用

21、標(biāo)記符的CELLSPACING屬性可以設(shè)置表元的間隙。如： 4. 設(shè)置表元內(nèi)部空白 利用標(biāo)記符中的CELLPDDING屬性來，以像素為單位來設(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)頁設(shè)計(jì)技術(shù) 本章從FrontPage的視圖入手，先介紹用FrontPage設(shè)計(jì)網(wǎng)頁的基本操作，包括網(wǎng)頁的編輯、文本的修飾、列表與表格的使用、運(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)頁的主要場(chǎng)所。 在站點(diǎn)的“網(wǎng)頁”視圖模式下，網(wǎng)頁編輯區(qū)的下方有三個(gè)編輯按鈕它們分別代表三種編輯模式：普通、HTML和預(yù)覽。用戶一般在普通模式下設(shè)計(jì)網(wǎng)頁，如果切換到HTML模式下，將會(huì)看到系統(tǒng)自動(dòng)生成的 HTML程序。4.2 FrontPage 2000的視圖 FrontPag

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

25、b的結(jié)構(gòu)，用戶可以從中了解到網(wǎng)站中各部分之間的邏輯關(guān)系，它反映了網(wǎng)站的整個(gè)脈絡(luò)。五、超鏈接視圖 超鏈接視圖以圖形化的界面顯示了當(dāng)前網(wǎng)頁和其他文件之間的超鏈接關(guān)系，也可以顯示網(wǎng)站與網(wǎng)站之間的超鏈接。六、任務(wù)視圖 任務(wù)視圖用任務(wù)列表的方式對(duì)任務(wù)進(jìn)行管理，操作人員可以把詳細(xì)的任務(wù)放在任務(wù)列表中，這樣它就會(huì)提醒設(shè)計(jì)人員需要完成哪些任務(wù)，還剩哪些任務(wù)沒有完成。4.3 FrontPage 2000的編輯方法一、標(biāo)題段落 在網(wǎng)頁內(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)頁的文本間距、段落間距以及文本相對(duì)于基準(zhǔn)線的垂直位置。 “普通”、“擴(kuò)充”、“緊縮”三種 “間距大小”以“pt”為單位三、插入水平線 在網(wǎng)頁中插入水平線有分隔文本內(nèi)容的作用。選擇“插入”菜單的“Horizontal Line”項(xiàng)，可在網(wǎng)頁中插入了一條水平線。 可以對(duì)水平線進(jìn)行長(zhǎng)短或?qū)捳睦臁?還可以對(duì)水平

27、線屬性進(jìn)行設(shè)置，在水平線上單擊鼠標(biāo)右鍵，在彈出的菜單中選擇“Horizontal Line Properties”彈出屬性對(duì)話框，然后進(jìn)行屬性設(shè)置。4.4 使用列表 使用列表和表格來規(guī)范網(wǎng)頁內(nèi)容可以使網(wǎng)頁層次分明、結(jié)構(gòu)清晰。列表有項(xiàng)目列表、編號(hào)列表、定義列表三種。一、項(xiàng)目列表 項(xiàng)目列表也稱為無序列表，它將在項(xiàng)目前添加標(biāo)志符號(hào)。可以將圖片作為新的項(xiàng)目標(biāo)志。二、編號(hào)列表 在網(wǎng)頁中的內(nèi)容存在順序關(guān)系時(shí)，可應(yīng)用編號(hào)列表。三、定義列表 定義列表就是在網(wǎng)頁內(nèi)定義詞匯、術(shù)語的列表，具體的定義內(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í)行“來自文件”命令，選擇圖象文件的名稱。二、編輯圖形 包括設(shè)置圖象的特殊效果、剪切圖象、添加文本。1添加文本 圖片工具欄的“文本按鈕”就是用來在圖象內(nèi)添加文本信息的。2圖象的特殊效果 旋轉(zhuǎn)90度； 圖象翻轉(zhuǎn)； 修正對(duì)比度； 調(diào)整亮度； 黑白處理； 圖象弱化； 突出效果； 采樣與還原； 調(diào)整圖象大小； 設(shè)置對(duì)齊方式

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

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

32、播放的次數(shù)，這就是設(shè)置背景音樂，在用戶打開網(wǎng)頁時(shí)，音樂將隨之而出。 “網(wǎng)頁屬性”- -“常規(guī)”- “背景音樂”欄中輸入音頻文件的地址-設(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ì)話框，通過這個(gè)對(duì)話框，我們可以設(shè)置它的屬性，包括： 字符設(shè)置； 起始點(diǎn)設(shè)置；3.位

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

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

36、的縮進(jìn)量、空白大小、字體的類型、顏色和大小等。樣式表是網(wǎng)頁中字體、段落和版面等各種屬性的集合。主題樣式能對(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)頁之間的關(guān)系更明顯，便于了解網(wǎng)頁的結(jié)構(gòu)，也可以使設(shè)計(jì)思路更清晰，使網(wǎng)頁便于管理。 框架網(wǎng)頁創(chuàng)建和設(shè)置過程：見教材第5章 網(wǎng)站網(wǎng)頁的上傳與維護(hù) 本章介紹了進(jìn)行網(wǎng)頁發(fā)布的一般方法，以及如何對(duì)已發(fā)布的網(wǎng)頁進(jìn)行測(cè)試與維護(hù)，最后簡(jiǎn)單討論了

37、網(wǎng)站可能遇到的安全問題及我們應(yīng)該采取的對(duì)策。教學(xué)重點(diǎn)與難點(diǎn)網(wǎng)頁的上傳網(wǎng)頁的測(cè)試網(wǎng)站的安全5.1 發(fā)布網(wǎng)頁一、網(wǎng)頁空間的申請(qǐng) 租用專線 質(zhì)量好，費(fèi)用高 租用網(wǎng)頁空間或虛擬主機(jī) 價(jià)格合適 申請(qǐng)免費(fèi)網(wǎng)頁空間 天上掉下來的餡餅二、為網(wǎng)站注冊(cè)域名 目前，可以通過“中國互聯(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)頁的步驟 以在發(fā)布為例： 登陸到億唐 租用服務(wù)器或虛擬主機(jī)。

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

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

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

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

42、。實(shí)際上，它是由兩幅圖片組成的，一幅為主圖片，顯示在頁面中；一幅為滾動(dòng)圖片，當(dāng)鼠標(biāo)經(jīng)過圖片所在區(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)頁。當(dāng)繪制完熱區(qū)后，屬性面板會(huì)顯示熱區(qū)的屬性。 還可以調(diào)整熱點(diǎn)區(qū)尺寸。六、插入水平線 在對(duì)象面板中選擇按鈕，在頁面中點(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ì)象面板中選擇按鈕，在頁面中點(diǎn)擊，會(huì)彈出對(duì)話框，可以設(shè)置日期格式、星期格式、時(shí)間格式，點(diǎn)擊“OK”，就會(huì)在頁面中自動(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)頁中的一種容器，它可定位在頁面上的任意位置，并且其中可包含文本、圖像、表單等所有可直接用于文檔的元素。 1創(chuàng)建層 2層的大小調(diào)整 3層的移動(dòng) 4層的屬性面板5層控制面板6層的動(dòng)態(tài)效果十二、框架的應(yīng)用 創(chuàng)建普通框架集 利用框架屬性面板來設(shè)置該框架是否要邊線以及邊線的顏色、邊線寬度、框架的名稱和框架中所要顯示的源文件。 可以查看框架集的文件的源代碼，這里面只保存了框架信息和它所對(duì)應(yīng)的源文件。十三、行為面板的使用 通過行為面板可以在網(wǎng)頁上制作出一些簡(jiǎn)單的交互效果。行為由兩個(gè)部分組成，即事件和動(dòng)作，通過事件的響應(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)首頁 當(dāng)建立完站點(diǎn)之后，就可以打開站點(diǎn)管理器，通過它管理站點(diǎn)，往站點(diǎn)內(nèi)添加網(wǎng)頁及其它文件，三、查看站點(diǎn)文件和鏈接 當(dāng)建立完首頁之后，就可以編輯首頁，然后添加與其相關(guān)的網(wǎng)頁，網(wǎng)頁之間的相互鏈接可以通過站點(diǎn)管理器來查看。6.4 Dreamweaver 制作網(wǎng)頁實(shí)例一、網(wǎng)頁布局設(shè)計(jì) 以表格形式組織。二、網(wǎng)頁內(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)的手工方式，還可使人們通過想象，創(chuàng)造出現(xiàn)實(shí)世界里無法拍攝到的圖像。教學(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 壓縮格式，用來最小化文件大小和電子傳遞時(shí)間。 3PCX格式 4TGA格式 5PXR格式 6JPEG格式 JPEG格式是所有壓縮格式中最卓越的，JPEG

49、 格式支持 CMYK、RGB 和灰度顏色模式，不支持 Alpha 通道。 7TIFF格式 TIFF 是一種靈活的位圖圖像格式，實(shí)際上被所有繪畫、圖像編輯和頁面排版應(yīng)用程序所支持。 8EPS格式 9Filmstrip格式7.2 Photoshop處理圖像實(shí)例一、網(wǎng)站logon圖標(biāo)的制作二、背景圖案的制作第8章 Flash動(dòng)畫制作基礎(chǔ) Flash 5能夠創(chuàng)作出極具吸引力的高效網(wǎng)頁。它可以輕易與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)畫管理器面板四、圖庫窗口 圖庫窗口可以用來存放和組織我們創(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)頁設(shè)計(jì)中常見的交互效果，比如翻轉(zhuǎn)圖像，下拉菜單等，設(shè)計(jì)完成以后，可以將它輸為HTML和JavaScript代碼的網(wǎng)頁文件，還能輸出為可以在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）、庫面板（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)來描述圖像。 9.2 Fireworks交互按鈕的制作一、文件的建立二、制作過程 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)頁設(shè)計(jì)軟件也不斷的發(fā)展，各種各樣的網(wǎng)頁制作工具，層出不窮，要制作自己有特色的網(wǎng)頁，就需要

54、我們掌握和了解各種網(wǎng)頁制作工具，利用好各種工具的特點(diǎn)，這樣，在制作網(wǎng)頁時(shí)，就會(huì)更加輕松，更加有效果。教學(xué)重點(diǎn)與難點(diǎn)工具的分類工具的選擇10.1 網(wǎng)頁設(shè)計(jì)工具軟件的簡(jiǎn)介 以網(wǎng)頁制作的內(nèi)容來劃分網(wǎng)頁制作工具，可分為如下幾種： 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)頁開發(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編輯軟件來如Mini NoteTab、Arachnophilia等等，當(dāng)然，我們也可以用系統(tǒng)自帶的“記事本”來修改編輯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)頁的一個(gè)重要內(nèi)容，因此，制作網(wǎng)頁時(shí)往往會(huì)用到音頻、視頻編輯制作軟件。音頻、視頻的編輯制作軟件有也有很多，比較常用的有Adobe Premiere 6.0。第11章 在網(wǎng)頁中使用JavaScript JavaScript是一種基于對(duì)象的腳本語言，可嵌入到HTML網(wǎng)頁中。它除了內(nèi)置了一些常用對(duì)象，還可以使用瀏覽器提供的對(duì)象，甚至可以創(chuàng)建新對(duì)象。通過采用事件驅(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)的描述語言，JavaScript和Java很類似，但并不相同。Java是一種比JavaScript復(fù)雜許多的語言，由SUN公司開發(fā)；而JavaScript則是簡(jiǎn)單而小巧的語言，由Netscape公司推出。一、JavaScript的特點(diǎn) JavaScript是一種基于對(duì)象(Object Based)和事件驅(qū)動(dòng)(Event Driven)并具有安全性能的腳本語言。 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語言結(jié)構(gòu)一、數(shù)據(jù)和運(yùn)算符 1數(shù)據(jù)：有六種數(shù)據(jù)類型 JavaScript是一種對(duì)數(shù)據(jù)類型變量要求不太嚴(yán)格的語言，所以不必聲明每一個(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)算符二、語句和程序控制 1一般語句 （1） 數(shù)據(jù)聲明語句 var 變量名=初始值 （2） 賦值語句 由賦值表達(dá)式組成的語句。 （3） 注釋語句 /：?jiǎn)涡凶⑨專瑥摹?”開始到本行行尾都為注釋； /*/：多行注釋，從“/*”開始到“*/”結(jié)束為注釋。2選擇結(jié)構(gòu) （1） if.else語句 if (條件) 執(zhí)行分支語句1 else 執(zhí)行分支語句2 （2） switch語句 switch (expression) case label1: 語句串1； case lab

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