浙江師范大學(xué)自考網(wǎng)頁設(shè)計（01040）

時間：2023-10-17 05:12:02 | 來源：網(wǎng)站運營

時間：2023-10-17 05:12:02 來源：網(wǎng)站運營

浙江師范大學(xué)自考網(wǎng)頁設(shè)計（01040）：浙江省高等教育自學(xué)考試課程考試大綱

課程名稱：網(wǎng)頁設(shè)計（實踐） 課程代碼：01040

請注意：問末最后一句話是重點！重點！重點！

第一部分 課程性質(zhì)與學(xué)習(xí)目的

一、課程性質(zhì)與特點

本課程是高等教育自學(xué)考試藝術(shù)設(shè)計專業(yè)所開設(shè)的專業(yè)課程之一。本課程屬藝術(shù)設(shè)計專業(yè)中視覺傳達(dá)設(shè)計方向必修的基礎(chǔ)實踐課程。本門課程從圖像處理、簡單動畫制作和整體網(wǎng)頁制作三部分著手，在分析網(wǎng)站類型的基礎(chǔ)上，總結(jié)不同網(wǎng)頁的色彩和布局特點，并在具體的網(wǎng)頁設(shè)計創(chuàng)作中引導(dǎo)學(xué)生思路。網(wǎng)頁設(shè)計課程的內(nèi)容涉及知識面廣，是一門綜合設(shè)計課程。

二、課程設(shè)置的目的和要求

其目的是通過教學(xué)，使學(xué)生掌握網(wǎng)頁制作的基本知識、基本理論和基本應(yīng)用等方面的內(nèi)容。了解HTML基本概念，網(wǎng)頁設(shè)計的方法，網(wǎng)頁中的動態(tài)效果等。通過對網(wǎng)頁制作技術(shù)和工具的學(xué)習(xí)，使學(xué)生對網(wǎng)頁設(shè)計中所涉及的相關(guān)知識有一個全面的了解。

三、與本專業(yè)其它課程的關(guān)系

網(wǎng)頁設(shè)計課程是為藝術(shù)設(shè)計專業(yè)、視覺傳達(dá)設(shè)計方向?qū)W生開設(shè)的一門實踐類專業(yè)基礎(chǔ)課程，是藝術(shù)設(shè)計實踐中的重要內(nèi)容。本課程的教學(xué)能夠讓學(xué)生加深對PHOTOSHOP軟件的理解和應(yīng)用，掌握簡單動畫原理和制作手段，了解網(wǎng)頁設(shè)計的方法，是前期基礎(chǔ)造型課程和軟件課程的延展和靈活運用，也為其他設(shè)計課程如系列書籍裝幀設(shè)計、綜合設(shè)計應(yīng)用等課程的打下堅實的基礎(chǔ)。

第二部分 課程內(nèi)容與考核要求

網(wǎng)站建設(shè)基礎(chǔ)理論部分

第一章 網(wǎng)站類型

一、學(xué)習(xí)目的與要求

通過本章的學(xué)習(xí)，要求了解網(wǎng)站類型的劃分方法，掌握不同網(wǎng)站類型體現(xiàn)出的色彩特點和布局特點。初步了解網(wǎng)頁設(shè)計的基礎(chǔ)知識。

二、考核知識點與考核要求

1、網(wǎng)站類型的劃分方法（一般）

劃分方法：按照網(wǎng)站用途（①門戶網(wǎng)站②行業(yè)網(wǎng)站③娛樂網(wǎng)站）、持有者劃分（①個人網(wǎng)站②企業(yè)網(wǎng)站③政府網(wǎng)站）商業(yè)目的、網(wǎng)站內(nèi)容、網(wǎng)站所用編程語言來劃分。

2、不同類型的網(wǎng)站有什么特點（重點）

企業(yè)網(wǎng)站：把企業(yè)信息產(chǎn)品業(yè)務(wù)都?xì)w類到網(wǎng)站內(nèi)然后進(jìn)行推廣達(dá)到宣傳效果給企業(yè)帶來盈利。

電商網(wǎng)站：電商網(wǎng)站也是隨著現(xiàn)在時代的發(fā)達(dá)而發(fā)展起來的，商城網(wǎng)站建設(shè)有分為兩種一種是垂直電商網(wǎng)站一種是綜合電商網(wǎng)站，大家都知道賣東西，但是其中也是有分別的，垂直類只買單一的一類產(chǎn)品，綜合類及就是所有的東西都有賣前提是有商家入駐。

門戶網(wǎng)站：網(wǎng)易、搜狐、騰訊、新浪等這類的就是屬于門戶類網(wǎng)站，門戶類網(wǎng)站的作用都是實時都有最新的社會熱點或者時間報道出來，也是很多人關(guān)注著方面的因為門戶的信息是非常龐大的，門戶網(wǎng)站就是頻道多滿足用戶多項需求。

行業(yè)網(wǎng)站：就是多種行業(yè)整個于一個網(wǎng)站內(nèi)，也是分為多頻道行業(yè)。多種行業(yè)集中在一個網(wǎng)站里，說白了就是用戶找商家的一個平臺。

論壇網(wǎng)站：屬于一類興趣愛好者集中發(fā)表聲明或者熱門信息，最新消息等大家可以共同討論的一個網(wǎng)站，這類網(wǎng)站大多都是相關(guān)興趣愛好者會關(guān)注和使用到。

生活服務(wù)類網(wǎng)站：最典型的代表就是58、趕集這樣的網(wǎng)站，把所有的需求都收集在一起讓商家入駐，用戶通過網(wǎng)站來查找精準(zhǔn)的服務(wù)。

3、設(shè)計簡單的布局草圖（次重點）

第二章 網(wǎng)頁的配色、風(fēng)格

一、學(xué)習(xí)目的與要求

掌握網(wǎng)頁的色彩搭配方法，了解網(wǎng)頁的不同風(fēng)格和表現(xiàn)方式，了解網(wǎng)頁信息規(guī)劃和基本網(wǎng)頁結(jié)構(gòu)。

二、考核知識點與考核要求

1、色彩基礎(chǔ)知識和網(wǎng)頁安全色的使用。（次重點）

色彩基礎(chǔ)知識：

色彩三要素：色相、明度、純度

網(wǎng)頁安全色的使用：

216網(wǎng)頁安全色是指在不同硬件環(huán)境、不同操作系統(tǒng)、不同瀏覽器中都能夠正常顯示顏色集合（調(diào)色板）。使用216網(wǎng)頁安全色進(jìn)行網(wǎng)頁配色可以避免原有顏色失真問題。

網(wǎng)站的主色調(diào)是根據(jù)網(wǎng)站內(nèi)容確定的。也可以根據(jù)網(wǎng)站訪問群體的類別、社會背景、心理需求和場合來確定。

2、不同顏色在網(wǎng)頁中的應(yīng)用。（重點）

網(wǎng)頁是在電腦屏幕上通過網(wǎng)絡(luò)瀏覽器來進(jìn)行瀏覽的頁面，具有與書籍、雜志等傳統(tǒng)頁面媒介一樣的視覺元素，同樣要求主體突出，條理清晰，便于閱讀；色調(diào)明快，引人注目，能予人以好感且體現(xiàn)出自己的特色。網(wǎng)頁作為活動的媒介，又因為它的載體——電腦顯示屏是和傳統(tǒng)的紙張、書籍不同的，這就造成了閱讀方式的不同。如只能采取某種固定的閱讀姿勢、發(fā)光顯示屏造成視覺疲勞、頁面上的動畫和音效分散視覺注意力。讀者基于這種特殊閱讀方式會產(chǎn)生特殊的閱讀感受，這時，網(wǎng)頁色彩就起到了把握頁面整體視覺印象的作用。

不同的顏色有著不同的含義：

紅色：熱情、奔放、喜悅、莊嚴(yán)

黃色：高貴、富有、燦爛、活潑

黑色：嚴(yán)肅、夜晚、沉著

白色：純潔、簡單、潔凈

藍(lán)色：天空、清爽、科技

綠色：植物、生命、生機

灰色：莊重、沉穩(wěn)

紫色：浪漫、富貴

棕色：大地、厚樸

……

公司色：在現(xiàn)在企業(yè)中，公司的CI形象顯得尤其重要，每一個公司的CI設(shè)計必然要有標(biāo)準(zhǔn)的顏色。比如新浪網(wǎng)的主色調(diào)是一種介于淺黃和深黃之間的顏色，同時形象宣傳、海報、廣告使用的顏色都和網(wǎng)站的顏色一致。

風(fēng)格色：許多網(wǎng)站使用顏色秉承的是公司的風(fēng)格。比如海爾使用的顏色是一種中性的綠色，即充滿朝氣有不失自己的創(chuàng)新精神。女性網(wǎng)站使用粉紅色的較多，大公司使用藍(lán)色的較多……這些都是在突出自己的風(fēng)格。 　

習(xí)慣色：這些網(wǎng)站的顏色使用很大一部分是憑自己的個人愛好，以個人網(wǎng)站較多使用，比如自己喜歡紅色、紫色、黑色等，在做網(wǎng)站的時候就傾向于這種顏色。每一個人都有自己喜歡的顏色，因此這種類型稱為習(xí)慣色。

制作冰箱、空調(diào)、文具、學(xué)校之類的設(shè)計可以用青色。

制作可口可樂可以用紅色。

同一頁面盡量不要超過4種顏色。

在設(shè)計時，通常以一種顏色為主色調(diào)，其他對比色作為點綴，起到畫龍點睛的作用。

3、網(wǎng)頁配色方案。（重點）

網(wǎng)站配色方案一：簡單的、時尚的、高雅的

如今極簡設(shè)計已普遍被應(yīng)用于網(wǎng)頁設(shè)計中，當(dāng)然這擁有充分理由。輕量級的布局和低維修成本使其靈活適合于響應(yīng)式設(shè)計。自然優(yōu)雅極具美感，使得很多品牌和機構(gòu)青睞并采用。然而贊賞這一設(shè)計風(fēng)格和創(chuàng)造它是兩碼事。

看起來，由于極簡主義元素不多，復(fù)制某種風(fēng)格似乎變的及其容易。然而事實卻正好相反，由于設(shè)計師可利用的元素極少，創(chuàng)造一個極簡主義的設(shè)計設(shè)計師往往要付出更多思考和努力。對極簡主義來說，無聊始終是一種威脅，所以改變你的布局以進(jìn)一步吸引用戶，交替沿z字形布局模式可以幫助閱讀。

網(wǎng)站配色方案二：簡單的、潔凈的、進(jìn)步的

當(dāng)你的網(wǎng)站上沒有大量裝飾性元素的時候，內(nèi)容就成了主角，這便于訪客瀏覽。有一個調(diào)查顯示，79%的受訪用戶只是在瀏覽一個新頁面，只有16%的用戶會逐字逐句去讀一個頁面。通過把網(wǎng)站的內(nèi)容放在前面中間的位置，讓訪客能快速瀏覽那些是什么內(nèi)容。

網(wǎng)站配色方案三：高尚的、自然的、安穩(wěn)的

高尚一般要用低亮度的黃綠色，色彩亮度降下去，注意色彩的平衡，頁面就會顯得安穩(wěn)

網(wǎng)站配色方案四：冷靜的、自然的

綠色是冷靜、自然印象的主角，但是綠色作為頁面的主要色彩，容易陷入過于消極的感覺傳達(dá)，因此應(yīng)該特別重視圖案的設(shè)計。

網(wǎng)站配色方案五：傳統(tǒng)的、穩(wěn)重的、古典的

傳統(tǒng)的內(nèi)容一般要降低色彩的飽和度，特別是棕色很適合。前面介紹紫色也是高雅和優(yōu)雅印象的常用色相。

網(wǎng)站配色方案六：傳統(tǒng)的、高雅的、優(yōu)雅的

灰色是最為平衡的色彩，并且是塑料金屬質(zhì)感的主要色彩之一，因而要表達(dá)高雅、時尚，可以適當(dāng)使用，甚至大面積使用。但是要注重圖案和質(zhì)感的構(gòu)造。

網(wǎng)站配色方案七：忠厚的、穩(wěn)重的、有品位的

亮度、飽和度偏低的色彩會給人忠厚、穩(wěn)重的感覺。這樣的搭配為了避免色彩過于保守，使頁面僵化、消極，應(yīng)當(dāng)注重冷暖結(jié)合和明暗對比。

網(wǎng)站配色方案八：輕快的、華麗的、動感的

動感的印象空間中少不了低亮度的色彩，甚至可以用適當(dāng)?shù)暮谏钆?。其他有彩色的飽和度高，對比強烈?br>
網(wǎng)站配色方案九：運動型的、輕快的

運動的色彩要強化激烈、刺激的感受，同時還要體現(xiàn)健康、快樂、陽光。因此飽和度較高、亮度偏低的色彩在這類印象中經(jīng)常登場。

網(wǎng)站配色方案十：華麗、花哨、女性化

女性化的頁面中紫色和品紅是主角、粉紅、綠色也是常用色相。一般它們之間要進(jìn)行高飽和的搭配。

4、網(wǎng)頁風(fēng)格和結(jié)構(gòu)設(shè)計。（重點）

網(wǎng)站建設(shè)中網(wǎng)頁布局大致可分為：“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等

國字類型：也被稱為同字型，頂部是網(wǎng)站的標(biāo)題、橫幅廣告條，然后是網(wǎng)站的主體內(nèi)容個，而左右分別是一些比較小的內(nèi)容條，中間就是主要內(nèi)容，最底部是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這也是現(xiàn)在網(wǎng)上見到的差不多最多的一種結(jié)構(gòu)類型

拐角型：這種類型其實與國字型很相近的，只是在形式上不一樣，最上面的部分是網(wǎng)站的標(biāo)題以及網(wǎng)站的橫幅廣告條，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接

標(biāo)題正文類型：上面是網(wǎng)站的標(biāo)題，或者是類似的東西，接著就是網(wǎng)站的正文內(nèi)容，例如是一些文章或者是注冊登錄頁面

左右框架類型：這是一種左右為分別兩頁的框架結(jié)構(gòu)，一般布局是：左邊是導(dǎo)航鏈接，最上面有時是一個小的標(biāo)題或標(biāo)致，而右面就是主要內(nèi)容，最常使用是論壇網(wǎng)站，企業(yè)網(wǎng)站中的內(nèi)頁有很多是采用這種布局方式的；這種類型的布局的特點是結(jié)構(gòu)清晰明了

上下框架類型：與左右框架類型類似，只是這種類型是上下兩頁的框架

綜合框架類型：其實就是左右框架類型和上下框架類型的結(jié)合體

封面型：這種類型基本上是出現(xiàn)在一些網(wǎng)站的首頁，多是精美平面結(jié)合小動畫，再加幾個簡單鏈接或僅是一個“進(jìn)入”鏈接或無任何提示

Flash型：其實這與封面型結(jié)構(gòu)是類似的，采用了目前非常游戲行的Flash，與封面型不同的是，由于Flash強大的功能，頁面所表達(dá)的信息更豐富，其視覺效果及聽覺效果如果處理得當(dāng)，絕不差于傳統(tǒng)的多媒體

變化型：即上面幾種類型的結(jié)合與變化，但所實現(xiàn)的功能的實質(zhì)是那種上、左、右結(jié)構(gòu)的綜合框架型

第三章 網(wǎng)頁構(gòu)成

一、學(xué)習(xí)目的與要求

掌握網(wǎng)頁中包含哪些基本元素，分辨率對網(wǎng)頁空間的影響，以及網(wǎng)頁中點、線、面的作用。

二、考核知識點與考核要求

1、網(wǎng)頁構(gòu)成的基本元素。（次重點）

網(wǎng)站Logo

網(wǎng)站banner

導(dǎo)航欄

文本

圖象

多媒體

2、網(wǎng)頁空間和尺寸。（重點）

現(xiàn)在比較流行的網(wǎng)頁寬度是950px，網(wǎng)頁兩邊留出少許白邊，簡潔又大方。

1024*768下，網(wǎng)頁寬度保持在1002以內(nèi)，如果滿框顯示的話,高度是612-615之間就不會出現(xiàn)水平滾動條和垂直滾動條。

3、網(wǎng)頁中的點、線、面。（重點）

點構(gòu)成線，線構(gòu)成面，這些是平面構(gòu)成中的基本要素，也是所有平面設(shè)計的基本要素。那么將這些基礎(chǔ)中的基礎(chǔ)運用在網(wǎng)頁設(shè)計中，又是怎樣的效果呢？

點、線、面這三個東西不單純的指一個點、一根線、一個平面。我們要善于利用文字和圖形的排布，為自己的網(wǎng)頁增添效果。

網(wǎng)頁中的每一個文字，每一個點，每一個圖形都是這個網(wǎng)頁的組成元件，文字可組成圖形，圖形也可組成文字，這些都不是限定死的。

線：線是具有情感的。比如水平線給人開闊，安寧，平靜的感覺；斜線具有動力，不安，速度和現(xiàn)代意識；垂直線具有莊嚴(yán)，挺拔，力量，向上的感覺；曲線給人柔軟流暢的女性特征；自由曲線是最好的情感抒發(fā)手段。

面：若點與線的構(gòu)成大多為細(xì)節(jié)處理，那么面的構(gòu)成則直接影響著網(wǎng)頁整體風(fēng)格和布局，與線搭配構(gòu)成空間透視效果。

平面構(gòu)成中的形式在網(wǎng)頁中常見的有：漸變形式、發(fā)射形式、對比構(gòu)成。而漸變亦有形狀漸變，顏色漸變。?這些表現(xiàn)形式即豐富了畫面，又能反應(yīng)出網(wǎng)頁的整體氛圍

網(wǎng)頁設(shè)計并不是單純的作圖，還需要考慮到功能性和閱讀性，因此顏色漸變成為網(wǎng)頁中常用的表達(dá)方式，形狀漸變卻很少見。

用明度漸變的方式來表現(xiàn)地圖背景，很好的展示了地圖的樣式，又沒有因為色彩繁多復(fù)雜而看不清主體內(nèi)容。

強烈的色彩對比也會引起人們的視覺停留，這種對比方式一般多用于對立狀態(tài)或者有著正反義詞組的頁面，也有時出現(xiàn)在Q版卡通頁面中，對比色色彩鮮艷亮麗，反應(yīng)出孩子的多彩世界。

4、網(wǎng)頁中的字體設(shè)計。（次重點）

網(wǎng)頁字體最好是常用字體，不要出現(xiàn)生僻字體，防止用戶因沒安裝字體出現(xiàn)錯誤。

字體大小最好以默認(rèn)為主，一般是12PT，現(xiàn)在流行的小中字體9PT。

特殊字體和藝術(shù)字體的設(shè)置，最好以圖片格式插入，以保證所有人看到的頁面是一樣的。

第四章 網(wǎng)頁的布局

一、學(xué)習(xí)目的與要求

了解版式設(shè)計的相關(guān)視覺原理，掌握網(wǎng)頁的布局方法。

二、考核知識點與考核要求

1、如何在設(shè)計中提高視覺傳達(dá)效率（次重點）

直接表達(dá)，通過文字圖片直接把需要展現(xiàn)內(nèi)容傳達(dá)給觀眾，沒有太多的渲染和鋪設(shè)。

相對：通過燈光照射、明暗對比，突出需要表達(dá)的內(nèi)容，讓觀眾容易抓住重點

利用人的視覺習(xí)慣，將重要內(nèi)容放在視覺中心

可以利用與人們情感有關(guān)的物件來表達(dá)，抓住觀眾心理

2、網(wǎng)頁的版式設(shè)計（次重點）

網(wǎng)頁版式設(shè)計在整個網(wǎng)站中具有重要的信息傳播及引導(dǎo)性作用，它決定了網(wǎng)站的個性特征和藝術(shù)蘊性，決定了網(wǎng)頁的整體視覺印象。

網(wǎng)頁版式設(shè)計網(wǎng)頁版式設(shè)計是指在有限的屏幕空間內(nèi)，按照設(shè)計師的想法、意圖將網(wǎng)頁的形態(tài)要數(shù)按照一定的藝術(shù)規(guī)律進(jìn)行組織和布局，使其形成整體視覺印象，最終達(dá)到有效傳達(dá)信息的視覺設(shè)計。它以有效傳達(dá)信息為目標(biāo)，利用視覺藝術(shù)規(guī)律，將網(wǎng)頁的文字、圖像、動畫、音頻、視頻等元素組織起來，產(chǎn)生感官上的美感和精神上的享受，充分體現(xiàn)了設(shè)計師的藝術(shù)風(fēng)格。

印刷品都有固定的規(guī)格尺寸，網(wǎng)頁則不然，它的尺寸是由讀者來控制的。這使網(wǎng)頁設(shè)計者不能精確控制頁面上每個元素的尺寸和位置。而且，網(wǎng)頁的組織結(jié)構(gòu)不像印刷品那樣為線性組合，這給網(wǎng)頁的版式設(shè)計帶來了一定的難度。具體表現(xiàn)如下：印刷品設(shè)計者可以指定使用的紙張和油墨，而網(wǎng)頁設(shè)計者卻不能要求瀏覽者使用什么樣的電腦或瀏覽器。

網(wǎng)頁版式設(shè)計的動態(tài)設(shè)計成為增強網(wǎng)頁可讀性，參與性與趣味性的有力手段。

網(wǎng)頁版式設(shè)計中的點、線、面對網(wǎng)頁的各形態(tài)要素進(jìn)行點、線、面對組合，是網(wǎng)頁版式設(shè)計的基本方法之一。點線面之間相互作用可以組合成各種各樣的視覺形象，形成千變?nèi)f化的視覺空間。有意識的從抽象角度運用點線面構(gòu)成來組織網(wǎng)頁的版式，是形成網(wǎng)頁強烈的視覺形式感和設(shè)計感的有效方法。

色彩總的應(yīng)用原則應(yīng)該是“總體協(xié)調(diào)，局部對比”，也就是，網(wǎng)頁的整體色彩效果應(yīng)該是和諧的，只有局部的、小范圍的地方可以有一些強烈色彩的對比。在色彩的運用上，可以根據(jù)網(wǎng)頁內(nèi)容的需要，分別采用不同的主色調(diào)。

3、網(wǎng)頁的布局方法（重點）

網(wǎng)頁版式設(shè)計的布局合理化布局不但要單純、簡練、清晰和精確，而且在強調(diào)藝術(shù)性的同時，更應(yīng)該注重通過獨特的風(fēng)格和強烈的視覺沖擊力，來鮮明地突出設(shè)計主題。要通過網(wǎng)頁頁面結(jié)構(gòu)的分割和造型空間的確立，合理安排組成網(wǎng)頁各元素的合理位置。使頁面內(nèi)容和形式有機統(tǒng)一，要具有整體美感。要考慮頁面的美觀和可讀性，還要考慮網(wǎng)絡(luò)瀏覽的特性。

版式設(shè)計必須依據(jù)人們在視覺上的心理和生理特點，確定各種視覺構(gòu)成元素之間的視覺關(guān)系和瀏覽秩序。合理的視覺流程應(yīng)是在人們認(rèn)識過程的心理順序和思維發(fā)展的邏輯一致的基礎(chǔ)上，根據(jù)信息的主次來確定各元素的順序，并通過精心安排引導(dǎo)瀏覽者。（1）要符合人的視覺習(xí)慣（2）要保證有效的傳達(dá)信息（3）突出主要信息（4）保持視覺引導(dǎo)的節(jié)奏感和流暢感。

九中常見的頁面表達(dá)方式：

①視覺框架：一致的顏色、字體和布局，界面統(tǒng)一感，用戶會下意識忽視那些不變的，從而注重變化的地方，方面用戶識別當(dāng)前任務(wù)和解決相關(guān)問題。

②中央舞臺：就是把重要的內(nèi)容放在頁面或窗口最大最顯眼的地方，將一些輔助工具和內(nèi)容放置在它周圍小的面板上。比如表格、圖形處理器、數(shù)據(jù)處理類等就常用這種格式。

③標(biāo)題區(qū)域：把內(nèi)容定義幾個不同的欄目，并給每個欄目一個醒目的標(biāo)題，同時在視覺上對欄目進(jìn)行區(qū)分，并把他們排列在頁面中。對于需要在頁面上顯示大量內(nèi)容，同時希望頁面更加整潔、容易快速掃描可以選擇這個方式。

④模態(tài)Tab：將內(nèi)容的不同模塊組織成一個小型的Tab，這樣每次只能看到一個小的模塊和內(nèi)容，然后通過單擊來切換不同的模態(tài)Tab。當(dāng)你需要在頁面上顯示大量各種各樣內(nèi)容，包括文本、列表、按鈕甚至圖像視屏等，而你又沒有辦法讓他們?nèi)匡@示在頁面上時，可以用這種方式。

⑤可收起面板：把次要和可選內(nèi)容放到可以打開和收起的面板上。比如想看位置地圖這些。

⑥右/左對齊：設(shè)計兩欄的表單或表格時，將左面標(biāo)簽右對齊，右面元素左對齊，讓布局更加有序。

⑦對角線平衡：一種不對稱的方式布置頁面，通過將元素放在左上角和右下角來平衡頁面。比如對一個頁面或?qū)υ捒蝽撁孢M(jìn)行布局，頂上一個標(biāo)題，下面一個鏈接或按鈕，同時這個頁面固定高度，不需要上下滾動，這時通過對角線來達(dá)到平衡。

⑧響應(yīng)式展開：先顯示一點界面，然后通過每個步驟依次展開頁面，從而引導(dǎo)用戶完成一系列步驟。視覺上將任務(wù)有效的拆分。

還有一種網(wǎng)上沒搜到。

第五章 網(wǎng)頁GIF動畫和細(xì)節(jié)制作

一、學(xué)習(xí)目的與要求

掌握GIF動畫制作方法，能獨立制作網(wǎng)頁中文字、圖片的動態(tài)效果；了解網(wǎng)頁中細(xì)節(jié)設(shè)計的重要性，能在PHOTOSHOP軟件中將線條、底紋等網(wǎng)頁細(xì)節(jié)制作出來。

二、考核知識點與考核要求

1、網(wǎng)頁簡單GIF動畫制作（重點）

插入-常用-媒體-Flash,或Flash視頻。

2、線條、底紋等細(xì)節(jié)設(shè)計在網(wǎng)頁設(shè)計中的作用（次重點）

適當(dāng)?shù)剡\用一些花邊和底紋，能使版面顯得新穎、美觀、大方，起到一定的烘托作用。

一、花邊在版面中主要作用

１．突出重點，造成強勢。重要稿件可以借助線條使其地位突出。如給整篇文章加外框，或在文章的欄隙內(nèi)加細(xì)線等，就會因與其他文章在版面處理上的不同而引起讀者的注意。

２．區(qū)分作用。在文章與文章之間加花邊，使文章更清楚地分開，避免錯覺，以便閱讀。

３．結(jié)合作用。一組反映同一主題的稿件，往往需要用花邊將他們歸納到一起，形成一個整體的感覺，以便與其他類型的稿子區(qū)分。此外，當(dāng)一篇新聞稿配有評論、照片和照片說明時，要用線條將其結(jié)合在一起。言論文章一般用楷體字，而楷體字如沙子，給人以松散的感覺，因此，言論文章常用花邊圍框，把文章“捆”起來，以顯得緊湊。

４．表達(dá)感情。由于花邊的形狀各不相同，他們的風(fēng)格和感情色彩也不同。由各種花紋組成的花邊顯得比較生動、活潑，裝飾性較強；文武線和粗細(xì)不同的直線則顯得樸實、深沉、嚴(yán)肅。喜訊、好人好事、奇聞異事等適宜用花邊裝飾；而批判性或揭露性的報道、反映困難情況的報道、能引起人們哀痛情緒的報道，就不宜加帶花紋的花邊。同樣，在一般新聞?wù)掌蝻L(fēng)景照片的周圍加一個黑線框，可使畫面產(chǎn)生更為精巧的感覺，但如果畫面是一個人的肖像，加上一個黑線框，就容易使人聯(lián)想到遺像。

５．美化作用。版面上適當(dāng)運用線條，可以使整個版面增加變化，顯得生動?；ㄟ吘哂幸欢ǖ脑煨兔?，也能產(chǎn)生裝飾性的審美效果。

６．形成版面風(fēng)格。遵循一定的規(guī)律運用線條，還可以形成某種版面風(fēng)格。比如《新聞出版報》每一篇文章都排成矩形，且用線框圍起來，形成一個又一個區(qū)域，版面成了許多版塊拼成的整體，整個版面一目了然，簡潔、明快、清新、秀麗。

二、底紋的運用

底紋在版面上是一個面，它不是獨立地出現(xiàn)在版面上，而是和標(biāo)題或文字等結(jié)合在一起。過去不做帶底紋標(biāo)題的《人民日報》，現(xiàn)在也一改嚴(yán)肅的面孔，每個版都用起底紋來了。底紋這種特殊的“面”，在版面上越來越普遍地運用，為版面增添了現(xiàn)代的色彩。

１、底紋的作用。

①突出重點。給標(biāo)題加上底紋，就在版面上形成一塊塊各具特色的“面”，格外引人注目，在版面上容易造成強勢。因此，給重點稿件的標(biāo)題加上底紋，就能起到突出重點的作用。

②美化版面。除純黑色的底紋外，絕大多數(shù)底紋都是有圖案的，特別是各種不掩字的淺色或彩色底紋，除了本身具有圖案外，其外形也可以“剪裁”成各種各樣的形狀，鋪在版面的任意一個地方，平衡美化版面。因此，底紋具有天然的美化功能。在版面上適當(dāng)?shù)剡\用底紋，可使版面更加活躍。

③表達(dá)感情。由于底紋有不同的圖案和不同的層次，所以它具有不同的感情色彩。在運用底紋的時候，就必須十分重視這一點。如文章的內(nèi)容是喜慶的事，給標(biāo)題加底紋時可選圖案活潑一些，淺一些的（彩色除外），而不宜加一塊深色的底紋，掛一塊“黑板”在那里。而內(nèi)容莊重、嚴(yán)肅的文章，選用的底紋則不可太花哨。

２、底紋的運用

①底紋與標(biāo)題內(nèi)容相結(jié)合。由于底紋由各種不同圖案構(gòu)成，因此，在用底紋裝飾標(biāo)題時，如果能將標(biāo)題內(nèi)容與圖案結(jié)合起來，就會使標(biāo)題與底紋相得益彰，對讀者的感染力就更強。但如果結(jié)合得不好，則可能弄巧成拙。政治、經(jīng)濟等內(nèi)容較嚴(yán)肅的消息，標(biāo)題底紋最好素一些，而文化、藝術(shù)等內(nèi)容輕松的文章或通訊的標(biāo)題，底紋可選活潑一些。

②底紋與底紋的搭配。在用底紋裝飾一條標(biāo)題時，有時不止用一種底紋。因為標(biāo)題常常既有主題，又有引題或副題，為了使標(biāo)題富于裝飾變化，常常主題用一種底紋，引題或副題用另一種底紋。由此，就必須考慮底紋與底紋的搭配，搭配的形式不外三種：一是素底紋與素底紋。一般是深淺相配，分別做成陰字與陽字。二是花底紋與素底紋，由于素底紋花紋較為細(xì)密，因而與之搭配的花底紋圖案不宜過大，否則反差太大，給人以格格不入之感。三是花底紋與花底紋，這種搭配不易掌握，一般不用。

③底紋與花邊配合。在美化標(biāo)題時，花邊和底紋配合，這種線和面的結(jié)合，往往產(chǎn)生強烈的裝飾效果。有時，底紋四周加花邊框還是必需的。如運用圖案較大的底紋時，周圍往往缺缺洼洼，用花邊圍一個框，就顯得完美了。

④底紋與字體字號的配合。黑體、宋體等比較莊重的字體宜配素底紋；而楷體、行楷、隸書、魏碑等比較活潑的字體配上適當(dāng)?shù)幕ǖ准y則特別美觀。字號如果較大，則不論什么底紋都可搭配，如字號較小，則不宜用線條太粗、圖案太大的花紋，否則，字將淹沒在花底紋里難以辨認(rèn)。

⑤花紋與花樣字配合。在底紋上，可做各種花樣字。深底紋宜做成陰字或黑字勾白邊；淺底紋宜做成黑字或空心字勾黑邊；任何底紋都宜做成黑字白邊黑框；不論是空心黑邊立體或是黑字白邊立體，底紋都不宜太深。

3、在PHOTOSHOP軟件中制作網(wǎng)頁細(xì)節(jié)（重點）

1、圖像局部截取和圖像尺寸調(diào)整

做網(wǎng)頁設(shè)計時經(jīng)常要用到的某張圖像一部分，這就需要截取圖像的局部。圖像局部截取的方法很多，但使用Photoshop操作起來更方便。具體操作步驟如下：

（1）在Photoshop中打開原始圖像；

（2）在工具欄中選擇相應(yīng)的選區(qū)工具，如矩形選框工具或橢圓選框工具，在圖像上需要截取的局部建立選區(qū)。為了截取更精確，通常在選擇選區(qū)工具以后，在工具選項欄中“樣式”里設(shè)定選區(qū)的尺寸，如“固定大小”，并設(shè)定寬度和高度值，這樣單擊圖像就可以建立固定尺寸的選區(qū)；

（3）建立好選區(qū)后，可以將鼠標(biāo)按住選區(qū)內(nèi)部拖拽移動選區(qū)位置，使截取的內(nèi)容符合需要；

（4）單擊菜單“編輯-拷貝”或者我們熟悉Ctrl+C復(fù)制選區(qū)內(nèi)容；

（5）單擊菜單“文件-新建”或按下快捷鍵Ctrl+N新建畫布，此時畫布的尺寸默認(rèn)就是選區(qū)的尺寸，單擊菜單“編輯-粘貼”或按下快捷鍵Ctrl+V將選區(qū)內(nèi)容粘貼到新畫布中；

（6）在新文件圖像中根據(jù)需要進(jìn)一步操作，如添加文字等，最后將新文件保存。
注：圖像尺寸的調(diào)整也是網(wǎng)頁設(shè)計中的常用操作，網(wǎng)頁中的圖像文件大小在保證清晰度的情況下應(yīng)該盡量小，不然會影響網(wǎng)頁打開速度，所以頁面中用到的圖像都有調(diào)整到相應(yīng)尺寸。在Photoshop中打開圖像，單擊“圖像-圖像大小”菜單或者Ctrl+Alt+I進(jìn)行尺寸修改，調(diào)整完后保存即可。

2、透明背景圖像的制作

有些圖像放在網(wǎng)頁中需要背景透明才能達(dá)到效果，比如在已有背景色的區(qū)域放置一個圖像，這個圖像只有背景透明才能融合在區(qū)域中。在Photoshop中制作透明背景圖像可以通過以下步驟來操作：

（1）在Photoshop中打開原圖像，使用選取工具將需要保留的圖像部分選中，如果原圖像背景色單一，可以使用魔棒工具很方便地選取背景色，然后單擊菜單“選擇-反向”反向選中需要保留的部分；

（2）單擊菜單“編輯-拷貝”或按下快捷鍵Ctrl+C復(fù)制選區(qū)內(nèi)容，單擊菜單“文件-新建”或按下快捷鍵Ctrl+N新建畫布，注意新建畫布的“背景內(nèi)容”項選擇“透明”；

（3）單擊菜單“編輯-粘貼”或按下快捷鍵Ctrl+V將選區(qū)內(nèi)容粘貼到新畫布中；

（4）按下快捷鍵Ctrl+T適當(dāng)調(diào)整粘貼內(nèi)容的尺寸，調(diào)整完后按回車鍵，還可以使用移動工具調(diào)整內(nèi)容的位置；

（5）單擊菜單“文件-存儲”或按下快捷鍵Ctrl+S保存為gif或png格式文件。

3、圖像融合

圖像融合是指將兩張或更多的圖像合成一張圖像，這個操作在網(wǎng)頁設(shè)計中也經(jīng)常用到，比如給網(wǎng)頁做個banner圖像或背景圖像等，下面以兩張相同高度圖像拼接融合為例來說明操作過程，基本步驟如下：

（1）在Photoshop中打開第一張圖像，然后使用移動工具將第二張圖像拖進(jìn)來并調(diào)整到合適的擺放位置；

（2）如果兩張圖像的色調(diào)不太一致，可以對色相、飽和度等屬性進(jìn)行調(diào)整；

（3）選擇第二張圖像所在圖層，建立蒙版，選擇漸變工具從兩張圖像的結(jié)合處拖拽形成黑白漸變，再適當(dāng)調(diào)整不透明度。

4、圖像倒影和陰影制作

圖像倒影效果在網(wǎng)頁中也很常見，倒影不僅增強圖像的立體感覺，也使得圖像表現(xiàn)力更強。倒影效果一般分為平面倒影和立體倒影，平面倒影的制作可以通過以下步驟實現(xiàn)：

（1）在Photoshop中將需要做倒影的素材導(dǎo)入文檔，按下快捷鍵Ctrl+J復(fù)制該圖層；

（2）單擊菜單“編輯-變換-垂直翻轉(zhuǎn)”將翻轉(zhuǎn)的圖層拖至原始圖層的下方；

（3）為翻轉(zhuǎn)的圖層添加圖層蒙版，選中漸變工具并選擇線性漸變，在圖層蒙版上拖出漸變就產(chǎn)生了倒影效果。
陰影效果也是常用的圖像效果，具體實現(xiàn)步驟如下：

（1）把需要做陰影效果的圖層復(fù)制并建立選區(qū)，填充為黑色；

（2）按下快捷鍵Ctrl+T并右鍵單擊鼠標(biāo)選擇“扭曲”，拖動鼠標(biāo)調(diào)整陰影的形狀和大??；

（3）減少陰影圖層的透明度，然后單擊菜單“濾鏡-模糊-高斯模糊”，再把陰影圖層放置在原圖層的下面。

5、特殊字體的使用

文字是圖像處理中頻繁使用的元素，網(wǎng)頁設(shè)計中的圖像上通常都需要添加一些文字內(nèi)容，如廣告宣傳語、導(dǎo)航文字等。文字的添加可以使用Photoshop的文字工具來完成，通常圖像上的文字都采用特殊字體，而計算機中默認(rèn)情況下卻都不具備這些字體，這就需要我們?nèi)ゾW(wǎng)上下載所需字體并安裝在計算機中才能使用。舉例說明，比如我們要在圖像上添加一種“方正粗倩簡體”的文字，很明顯，計算機中默認(rèn)沒有該字體，我們必須進(jìn)行以下步驟操作：

（1）從網(wǎng)上下載“方正粗倩簡體”字體?？梢栽诎俣戎兴阉鳌白煮w下載”關(guān)鍵字，很多網(wǎng)站都提供字體下載；

（2）安裝字體。下載的字體通常是一個.ttf格式的文件，直接復(fù)制該文件，打開C:WindowsFonts文件夾并進(jìn)行粘貼，這樣就完成了字體安裝；

（3）重啟Photoshop軟件，可以看到字體列表中就有了新安裝的字體，當(dāng)然，計算機中的其他軟件都可以使用這種字體。當(dāng)然如果你有能力的話也可以自己設(shè)計字體，但是對一些初中級的學(xué)生來說，下載是最好的辦法了，省去了很多時間，你懂的！

6、繪制網(wǎng)站LOGO

網(wǎng)站標(biāo)志或稱LOGO，它是一個網(wǎng)站的名片，是能夠體現(xiàn)網(wǎng)站形象的一個重要元素。一個好的網(wǎng)站LOGO能夠體現(xiàn)出網(wǎng)站的內(nèi)涵并能傳遞給瀏覽者一些關(guān)于網(wǎng)站的理念信息。一般來說，網(wǎng)站LOGO的設(shè)計是很重要的，它不僅要契合網(wǎng)站同時也要獨具個性，能吸引網(wǎng)站瀏覽者。網(wǎng)站LOGO可以采用Photoshop軟件進(jìn)行繪制，具體可以采用以下步驟：

（1）新建畫布，使用鋼筆工具大致勾畫出LOGO輪廓路徑；

（2）選擇“轉(zhuǎn)換點工具”，將某些直線路徑轉(zhuǎn)換為曲線并調(diào)整相應(yīng)的弧度；

（3）選擇“直接選擇工具”，根據(jù)需要移動一些錨點的位置，通過曲線弧度調(diào)整逐步達(dá)到設(shè)計效果；

（4）按下快捷鍵Ctrl+Enter，將路徑轉(zhuǎn)換為選區(qū)，然后對選區(qū)進(jìn)行填充；

（5）根據(jù)需要添加文字等內(nèi)容并保存文檔。

7、網(wǎng)頁繪制和切圖

Dreamweaver等網(wǎng)頁設(shè)計軟件在圖像處理方面的功能很弱，只使用該軟件進(jìn)行網(wǎng)頁設(shè)計會給網(wǎng)頁美觀帶來局限性，所以通常先采用圖像處理軟件繪制網(wǎng)頁效果圖，然后采用切圖等手段轉(zhuǎn)換為網(wǎng)頁。繪制網(wǎng)頁的工具很多，Photoshop是一個很不錯的選擇，方法如下：

（1）首先新建一個畫布，在當(dāng)前普遍1024*768以上分辨率的情況下，畫布的寬度設(shè)為1002像素以內(nèi)就能保證用戶打開網(wǎng)頁時不會出現(xiàn)水平滾動條，畫布高度根據(jù)網(wǎng)頁實際內(nèi)容需要設(shè)定，接下來在新建的畫布上繪制網(wǎng)頁的界面，網(wǎng)頁各個部分采用分層和分組，便于修改。

（2）網(wǎng)頁繪制好后，需要利用切片工具和切片選擇工具對圖像進(jìn)行分割，切割圖像的原因是在瀏覽器中，一組小幅圖像比單個大幅圖像下載起來要快速得多，而且也便于網(wǎng)頁在Dreamweaver軟件中編輯。網(wǎng)頁切片時一般要借助輔助線作為參考以確保切圖的精確程度，網(wǎng)頁中輸入的文字部分在切圖時可以先隱藏。

（3）單擊菜單“文件-存儲為Web和設(shè)備所用格式”來保存文件，Photoshop會自動生成一個名為images的文件夾用于存放所有圖片。

8、各式線條的使用

線條在網(wǎng)頁設(shè)計中是不可或缺的元素，線條應(yīng)用得當(dāng)會使網(wǎng)頁布局清晰、層次分明，比如曲線增強網(wǎng)頁的靈活性和流動性，具有時尚感、飄逸感，而直線的應(yīng)用則使網(wǎng)頁顯得簡潔、大方和嚴(yán)謹(jǐn)，不同線條的使用會起到意想不到的效果。一般來說，網(wǎng)頁設(shè)計中經(jīng)常用到直線、曲線、虛線和立體分割線等，下面我們簡單介紹一下：

（1）直線

在Photoshop中繪制直線一般有兩種方法，一種是使用畫筆工具或鉛筆工具，根據(jù)直線粗細(xì)需要設(shè)置好主直徑，按住鼠標(biāo)進(jìn)行繪制，如果要繪制水平或垂直直線，需要按住Shift鍵然后繪制。

（2）曲線

Photoshop中繪制曲線一般會用到鋼筆工具、轉(zhuǎn)換點工具和直接選擇工具等，先用鋼筆工具畫出大致路徑，再用轉(zhuǎn)換點工具將直線變?yōu)榍€并調(diào)整弧度，如果錨點的位置需要移動，則再使用直接選擇工具移動，最后得到滿意的曲線。

（3）虛線

繪制虛線一般使用畫筆工具或鉛筆工具，根據(jù)要繪制的虛線的粗細(xì)選擇畫筆的主直徑，然后設(shè)置畫筆屬性面板中的“間距”值，這樣就可以繪制出虛線，如果要繪制水平或垂直虛線還可以在繪制時按住Shift鍵。

（4）立體分割線

優(yōu)秀的網(wǎng)站設(shè)計在細(xì)節(jié)方面的處理都是照顧十分周全的，立體分割線看起來有一種凹進(jìn)去的感覺，形成一種很好的分隔的感覺。立體分割線其實是由兩條粗細(xì)均為1px的直線組成的，首先繪制一條比背景色暗的直線，然后再繪制一條比背景色亮的直線，線條色彩可選用與背景色同一色系的顏色，兩條線并列排在一起，形成立體凹陷的感覺。

9、背景圖片制作

在制作網(wǎng)頁的時候，經(jīng)常需要給網(wǎng)頁設(shè)置背景圖片。除了可以到網(wǎng)上下載背景圖片外，利用Photoshop強大的功能也同樣可以制作出自己喜愛的背景圖案。自制的背景圖像種類很多，這里以制作一種無縫圖案背景為例來說明：
具體操作步驟如下：

（1）打開Photoshop，新建寬160、高120，背景為白色，分辨率為72像素/英寸的空白文檔；

（2）在工具箱中選擇自定義形狀工具并找到圖1中所示的形狀，在畫布中間繪制出該形狀，繪制時可按住Shift鍵保持同寬高比例，然后將繪制的形狀放在文檔的正中間；

（3）復(fù)制形狀圖層，對復(fù)制的圖層執(zhí)行菜單“濾鏡-其他-位移”命令，完成圖案的位移操作。位移的“水平”和“垂直”參數(shù)值是根據(jù)圖像尺寸來設(shè)置的，一般為圖像“寬度”和“高度”值的一半，本例“水平”設(shè)置為80，垂直設(shè)置為60。

（4）執(zhí)行菜單“文件-存儲”命令，將文件存儲為GIF格式的圖像。打開Dreamweaver軟件，將該圖像以背景圖片平鋪在網(wǎng)頁中，可以看到網(wǎng)頁背景的效果。

10、按鈕制作

按鈕是網(wǎng)頁設(shè)計中常用的元素，經(jīng)常用在導(dǎo)航、跳轉(zhuǎn)等鏈接位置。設(shè)計精美的按鈕能讓網(wǎng)站瀏覽者眼前一亮，目前網(wǎng)頁中常用的按鈕一般都帶有一些立體、漸變效果，這類按鈕可以大致通過以下幾步來實現(xiàn)：

（1）在Photoshop中新建畫布，繪制一個圓角矩形；

（2）雙擊該圓角矩形圖層面板，打開圖層屬性窗口，單擊勾選左側(cè)“斜面和浮雕”選項，并在右側(cè)設(shè)置相應(yīng)的屬性值；

（3）單擊勾選左側(cè)“漸變疊加”選項，在右側(cè)設(shè)置漸變顏色及其他屬性值；

（4）單擊勾選左側(cè)“描邊”選項，在右側(cè)設(shè)置描邊顏色、粗細(xì)、位置、不透明度等屬性值；

（5）選擇文字工具，在按鈕上添加文字并設(shè)定文字樣式等。通過這些設(shè)置能做出滿足一般需求的立體漸變效果按鈕，更多的效果可以在圖層屬性里面繼續(xù)設(shè)置，如內(nèi)陰影、外發(fā)光等。

另外，網(wǎng)頁中有些按鈕當(dāng)鼠標(biāo)放上去時換成另外一個按鈕，兩個按鈕大小一致，區(qū)別就在顏色或文字顏色上。其實第二個按鈕的制作很簡單，只要把第一個按鈕的圖層復(fù)制，修改背景色或文字顏色即可。


第六章 DREAMWEAVER簡單網(wǎng)頁制作

一、學(xué)習(xí)目的與要求

了解DREAMWEAVER軟件的主要功能，熟悉軟件界面；掌握網(wǎng)頁制作的一般流程，能夠獨立制作出較簡單的頁面效果。

二、考核知識點與考核要求

1、DREAMWEAVER軟件概述（一般）

網(wǎng)頁設(shè)計軟件，操作簡單，沒有多余的代碼，可視化，可以插入圖片、視頻等。站點管理便捷、鏈接

2、掌握圖片、文本、水平線等基本網(wǎng)頁元素的插入方法（重點）

插入-常用-圖片（文本）

3、制作一個簡單網(wǎng)頁，了解一般的網(wǎng)頁制作流程（重點）

可以選用固定模板，就是文件-新建-HTML選擇一個模板。

第七章 利用表格布局網(wǎng)頁

一、學(xué)習(xí)目的與要求

掌握網(wǎng)頁制作中的表格布局方法，能夠利用表格定位圖片和文本，制作出完整的網(wǎng)頁效果。

二、考核知識點與考核要求

1、插入表格并對表格的屬性進(jìn)行調(diào)整（重點）

插入表格前，最好先插入表單，然后將光標(biāo)定在表單內(nèi)，插入記錄-表格，在表格對話框中輸入行數(shù)列數(shù)，表格寬度選擇百分比，邊框粗細(xì)輸入0.兩列表格一般左列包含表單標(biāo)簽，如名稱和地址，右列包含表單元素本身，如文本字段和復(fù)選框。記得給自己的表格在屬性中輸入名稱formTable。

2、單元格的合并和拆分，嵌入表格（次重點）

跟用WORD一樣，選中，右擊，表格，選擇拆分或者合并，嵌入：插入記錄-表格

3、設(shè)置頁面屬性（一般）

修改-頁面屬性-對話框打開，可以設(shè)置背景顏色，背景圖像、字體、標(biāo)題大小等

4、制作網(wǎng)頁中的超鏈接。（次重點）

插入-常用-超級鏈接，超級鏈接對話框打開

5、制作表格布局的完整網(wǎng)頁效果（重點）

新建一個空白的HTML,查看-表格模式-布局模式

插入-布局-繪制布局表格

新建一個空白的HTML,然后插入記錄-表格，表格插入好之后可以根據(jù)需要插入圖片，排好版。




第八章 制作網(wǎng)頁中的表單

一、學(xué)習(xí)目的與要求

了解表單的用途及插入方法，利用表格定位表單在網(wǎng)頁中的位置，調(diào)整表單項的視覺效果。

二、考核知識點與考核要求

1、表單的功能（次重點）

表單，在網(wǎng)頁中的作用主要負(fù)責(zé)數(shù)據(jù)采集的功能，比如你可以采集訪問者的名字和e－mail地址、調(diào)查表、留言簿等等。

一個表單有三個基本組成部分：

表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。

表單域（表單元素本身）：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。

表單按鈕（也是表單元素的一種）：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

2、表單和表單項的插入方法（重點）

插入-表單，然后在表單中插入表格，根據(jù)自己需求分行列

然后插入-表單-文本字段，輸入標(biāo)簽輔助功能屬性對話框打開，在ID框中輸入company,在標(biāo)簽文字框中輸入Company Name:,樣式部分選擇，使用for屬性附加標(biāo)簽標(biāo)記。訪問鍵輸入c，Tab鍵輸入10.

插入-表單-Spry驗證文本域，輸入標(biāo)簽輔助功能屬性對話框打開，在ID框中輸入email，在標(biāo)簽文字框中輸入Email：，使用for屬性附加標(biāo)簽標(biāo)記。訪問鍵輸入e，Tab鍵輸入20.在窗口屬性中，類型下拉列表中選擇電子郵件地址，選擇驗證于onBlur,確保選擇了必須的選項。預(yù)覽狀態(tài)選擇必填，選擇這個域旁邊的默認(rèn)錯誤文本，需要提供一個值，刪除，輸入Required,可以設(shè)置其他的預(yù)覽狀態(tài)。

插入-表單-Spry驗證文本域，輸入標(biāo)簽輔助功能屬性對話框打開，在ID框中輸入username，在標(biāo)簽文字框中輸入Username：，用for屬性附加標(biāo)簽標(biāo)記。訪問鍵輸入u，Tab鍵輸入30.屬性中選擇驗證于onBlur,在最小字符中輸入6，選擇這個域旁邊的默認(rèn)錯誤文本，刪除，輸入6 or more characters,可以設(shè)置其他的預(yù)覽狀態(tài)。

插入-表單-文本字段，輸入標(biāo)簽輔助功能屬性對話框打開，在ID框中輸入password，在標(biāo)簽文字框中輸入Password：，用for屬性附加標(biāo)簽標(biāo)記。訪問鍵輸入p，Tab鍵輸入40.從屬性檢查器中，從類型中選擇密碼選項。

插入-表單-文本區(qū)域，輸入標(biāo)簽輔助功能屬性對話框打開，在ID框中輸入business，在標(biāo)簽文字框中輸入Business：，用for屬性附加標(biāo)簽標(biāo)記。訪問鍵輸入b，Tab鍵輸入50.從屬性檢查器中，初始值中輸入一段話，以描述期望在特定的表單元素中看到的內(nèi)容。

插入-表單-單選按鈕框，輸入名稱，和增加條件，輸入標(biāo)簽和值，使用換行符。

插入-表單-復(fù)選框，輸入標(biāo)簽輔助功能屬性對話框打開，在ID框中輸入identity，在標(biāo)簽文字框中輸入Brand Identity:，用for屬性附加標(biāo)簽標(biāo)記。位置在表單后，訪問鍵輸入i，Tab鍵輸入100.然后將光標(biāo)移到表填外部，按空格鍵，繼續(xù)添加兩個復(fù)選框。

插入-表單-列表/菜單，輸入標(biāo)簽輔助功能屬性對話框打開，在ID框中輸入timeline，在標(biāo)簽文字框中輸入Timeline:,用for屬性附加標(biāo)簽標(biāo)記。訪問鍵輸入t，Tab鍵輸入130,窗口-屬性-列表值，單擊添加，輸入項目標(biāo)簽和值

Immediately now

In the next 2 months 2months

Sometime this year year

從屬性檢查器中，從初始化時選定下拉列表中選擇Immediately。

插入-表單-按鈕，輸入標(biāo)簽輔助功能屬性對話框打開，在ID框中輸入submit，在標(biāo)簽文字框中輸入Send to dev/design,用for屬性附加標(biāo)簽標(biāo)記。訪問鍵輸入s，Tab鍵輸入140,選擇Send to dev/design，剪切，粘貼到屬性檢查器中值中。

插入-表單-字段集，在表單任意位置單擊，在字段集對話框中輸入標(biāo)簽，DW就會在左上角用一個帶標(biāo)簽的細(xì)邊框來嵌套整個表格。

3、利用表格定位表單（重點）

我們經(jīng)常在使用表單的時候容易由于前面的提示文字的寬度不一樣而導(dǎo)致后面的表達(dá)無法對齊，這個時候可以先插入表格，利用表格來對齊定位。

4、制作一個完整的表單網(wǎng)頁（重點）

第九章 利用框架布局網(wǎng)頁

一、學(xué)習(xí)目的與要求

了解框架的功能及軟件中預(yù)設(shè)的框架類型，掌握對框架屬性的調(diào)整方法，能夠利用框架的布局功能制作網(wǎng)頁。

二、考核知識點與考核要求

1、插入框架（次重點）

新建-HTML-空白，插入記錄-HTML-框架

2、框架屬性調(diào)整及保存（重點）

新建框架后，在屬性檢查器中-頁面屬性設(shè)置參數(shù)，背景顏色等，修改-框架集-可以拆分。每一個框架都包含一個獨立的HTML文件。

文件-保存-保存全部，保存后的網(wǎng)頁，有Frameset的即是框架主頁，保存全部的時候會多次彈出保存對話框，每次都要點擊保存，并且位置一致。對各個框架部分進(jìn)行保存，為各個框架進(jìn)行命名。

3、利用框架對網(wǎng)頁進(jìn)行布局（重點）

用框架來規(guī)劃網(wǎng)頁本身有很大的缺點，首先不利于網(wǎng)友更好的利用網(wǎng)頁資源，因為大家總不能在線把所有的東西看一遍了，而保存起來框架的缺點就出來了，你將不得不每次多余的保存同樣的兩個頁。

新建-HTML-空白，插入-布局-框架

4、用框架布局網(wǎng)頁的超鏈接設(shè)置（次重點）

選中需要插入鏈接的文本或者圖片，在屬性中設(shè)置，可以在鏈接中輸入，有可以在目標(biāo)中選中要指定跳轉(zhuǎn)的圖片等

第十章 利用層布局網(wǎng)頁

一、學(xué)習(xí)目的與要求

了解層的基本功能，能夠設(shè)置層的屬性，掌握嵌套層的概念，和簡單動作對層的控制。能夠利用層定位網(wǎng)頁中的各種元素。

二、考核知識點與考核要求

1、層的基本功能（次重點）

用層可以更好的定位、布局

層的概念：

層是一種HTML頁面元素，是指具有絕對或者相對位置的DIV標(biāo)簽。

通過 Dreamweaver，您可以使用層來設(shè)計頁面的布局。您可以將層前后放置，隱藏某些層而顯示其他層，以及在屏幕上移動層。您可以在一個層中放置背景圖像，然后在該層的前面放置第二個層，它包含帶有透明背景的文本。

利用層可以非常靈活地放置內(nèi)容。但是，使用舊版本的 Web 瀏覽器的站點訪問者查看層時可能會遇到麻煩。若要確保所有人都能夠查看您的 Web 頁，可以使用層設(shè)計頁面布局，然后將層轉(zhuǎn)換為表。

DIV的意思是區(qū)塊標(biāo)簽。 如果已經(jīng)給 div 標(biāo)簽分配了絕對位置（也就是規(guī)定了這個DIV標(biāo)簽的樣式），它就可充當(dāng)一個 Dreamweaver 層。

①制作動態(tài)效果②排版

2、設(shè)置層的屬性（重點）

插入-布局對象-層，鼠標(biāo)變成十字型，可以拖動

右面的CSS旁邊選擇層

雙擊層的圖標(biāo)或者層的手柄都可以打開層的屬性

層的編號就是層的名稱

3、嵌套層的設(shè)置（重點）

將光標(biāo)放置在層中，插入-布局對象-層

一個新層就出現(xiàn)在原來的層中

首選項參數(shù)設(shè)置中-層-選中如果在層中則使用嵌套

4、簡單動作對層的控制（次重點）

5、利用層布局網(wǎng)頁效果（重點）

第十一章 網(wǎng)頁樣式設(shè)定和多媒體元素的插入

一、學(xué)習(xí)目的與要求

了解網(wǎng)頁樣式表的功能和設(shè)置方法，能夠利用樣式表文件對網(wǎng)頁的效果進(jìn)行控制。掌握聲音、視頻、FLASH動畫等多媒體元素插入網(wǎng)頁中的方法。

二、考核知識點與考核要求

1、網(wǎng)頁樣式表的功能（一般）

2、通過樣式表控制網(wǎng)頁的視覺效果（重點）

3、聲音插入網(wǎng)頁，并利用參數(shù)控制效果（次重點）

4、視頻插入網(wǎng)頁（次重點）

5、FLASH動畫插入網(wǎng)頁，并可將其背景設(shè)置為透明（重點）

編輯首選參數(shù)-分類下選擇-代碼改寫-活動內(nèi)容中的兩個選項打鉤，使用瀏覽器安全模式腳本插入，打開文件時將標(biāo)簽轉(zhuǎn)換為腳本。選擇占位符-插入-常用-媒體（FLASH），屬性設(shè)置背景顏色。

第三部分 有關(guān)說明與實施要求

一、指定教材

《Adobe Dreamweaver CS3經(jīng)典教程》由Adobe公司編寫，陳紅軍、馮曉艷譯，人民郵電出版社2008年出版

知識點整理：

1、頁面名稱顯示*號，說明沒有保存。

2、三擊占位符段落可以全選。

3、所建立的網(wǎng)頁中的圖像什么的，都保存在同一個文件夾比較好。

4、標(biāo)題加背景圖片：先將光標(biāo)定在標(biāo)題上任意位置，-“標(biāo)簽選擇器”-＜div#header＞-“css樣式”（右邊）-正在模式-“Background”（第一行）-“編輯模式”（小鉛筆按鈕）-從彈出的對話框中單擊“背景圖像”瀏覽選擇圖片。注：為了讓圖像能如期望那樣的顯示出來，必須選擇“不重復(fù)”這一值。

5、標(biāo)題改變自身字體顏色：先將光標(biāo)定在標(biāo)題任意位置，-“標(biāo)簽選擇器”-＜h1＞-“css樣式”（右邊）-正在模式-規(guī)則（第二行）＜h1＞-“編輯模式”（小鉛筆按鈕）-從彈出的對話框中單擊“類型”然后改變顏色字體等。

6、段落格式修改：先將光標(biāo)定在段落上任意位置，-“標(biāo)簽選擇器”-＜div#mainContent＞-“css樣式”（右邊）-正在模式--規(guī)則（第二行）＜two…main＞-“編輯模式”（小鉛筆按鈕）-從彈出的對話框中單擊“類型”然后改變字體大小，行間距等。

7、前景圖像可以通過“插入”欄上的“圖像”按鈕直接插入到頁面上，而背景圖像則需要通過CSS添加到設(shè)計上。

8、雙擊“選取工具”，可以讓畫面迅速回到100%。

9、CSS規(guī)則主要是由“選擇器”和“屬性”兩部分組成的。

10、在CSS 所有規(guī)則中，單擊任意一個，對應(yīng)下一欄有屬性，可以編輯，然后所有應(yīng)用了的此屬性的隨之便發(fā)生變化。

11、選擇器類型：1）創(chuàng)建CSS規(guī)則“類”，設(shè)置好定義在main.css中，名稱.more,可以依據(jù)設(shè)計要求，有目的的對其加以應(yīng)用，右擊標(biāo)簽選擇器，選擇.more就可以應(yīng)用該規(guī)則。手動應(yīng)用，重復(fù)多次使用。

2）創(chuàng)建CSS規(guī)則“標(biāo)簽”，為特定的標(biāo)簽應(yīng)用CSS樣式規(guī)則，顏色等，在“全部”狀態(tài)下新建規(guī)則，選擇器類型選擇“標(biāo)簽”，標(biāo)簽框中輸入“h1”（或其他你要定義樣式的標(biāo)簽名稱），同樣定義在main.css 中，自動應(yīng)用。

12、隱藏不適合打印的導(dǎo)航：選中標(biāo)簽#nav（導(dǎo)航欄），新建CSS規(guī)則，選擇器類型選擇“高級”名稱輸入#nav定義在print.css中，在彈出的規(guī)則定義中選擇“區(qū)塊”，顯示（D）選擇“無”。規(guī)則不能重復(fù)使用。

13、ID和類最大的區(qū)別：ID只能應(yīng)用到頁面上的一個標(biāo)簽中，而類卻可以根據(jù)需要，想用多少次就用多少次。

14、對標(biāo)簽應(yīng)用CSS“類”的方法，1）在屬性“樣式”中選擇。2）右擊標(biāo)簽選擇器，從“設(shè)置類”中選擇。

15、使用CSS屬性中的顯示，設(shè)置成“無”none,來隱藏任何CSS樣式內(nèi)容。

16、兩種辦法插入行列，1）屬性輸入。2）修改-表格-插入行列。

17、網(wǎng)站由網(wǎng)頁構(gòu)成，包含導(dǎo)航條、標(biāo)題文本、logo、輸入窗口、按鈕等鏈接。html結(jié)尾的就是網(wǎng)頁，文本，寫標(biāo)記，不能實時預(yù)覽，效率不高，所有用DW軟件可視化編輯軟件來制作網(wǎng)頁。

18、創(chuàng)建圖像鏈接后，當(dāng)鼠標(biāo)經(jīng)過圖像時，會變成手形，這代表鏈接。CSS規(guī)則正在屬性border（邊界）：0。

19、創(chuàng)建電子郵件鏈接：選擇一句話，點擊插入-常用-電子郵件鏈接-彈出對話框，文本信息不變，在E-Mail中輸入收件人地址。

20、命名錨記：同一個頁面添加命名錨記只需要選中文本，然后在鏈接中輸入#+名稱，然后鼠標(biāo)移到需要添加錨記的地方，點擊插入-常用-命名錨記-輸入名稱（名稱）然后就會顯示錨記標(biāo)志。

不同頁面創(chuàng)建錨記：在本頁面選擇文本，然后選擇標(biāo)簽more,然后在鏈接中輸入需要添加錨記的頁面名稱+#+名稱，保存，然后打開需要添加錨記的頁面，選好位置，點插入-常用-命名錨記，對話框打開輸入名稱，確定。

注：名稱前后一樣。

21、鏈接插入頁面的兩種方法：①鏈接，瀏覽文件導(dǎo)航到想要的頁面。②鏈接，指向文件，拖到文件面板內(nèi)的文件中。

22、在頁面內(nèi)創(chuàng)建鏈接，需要兩個元素：首先起始頁窗口位置設(shè)定一個命名錨記；其次要為命名錨記（#加命名錨記名稱如#top）設(shè)置一個鏈接。

23、#號：新建CSS規(guī)則，選擇器高級，選擇器輸入#加名稱，定義在僅對該文檔，開頭的#號標(biāo)記表示一種ID選擇器，這種選擇器每頁只能應(yīng)用一次。

24、DW行為是：當(dāng)被一個特定事件（如單擊鼠標(biāo)，鼠標(biāo)經(jīng)過等）觸發(fā)時，執(zhí)行一個動作（打開一個瀏覽器窗口或是放大圖片等）的JavaScript代碼。

DW行為是事件和動作的組合。事件是觸發(fā)行為的操作，例如：onClick/onMouseOver等。動作是行為中發(fā)生的某些事情，例如：打開瀏覽器窗口、交換圖像或顯示隱藏元素。

應(yīng)用一個行為需要3步驟：

①選擇想要觸發(fā)行為的頁面元素

②選擇要應(yīng)用的行為

③指定行為的設(shè)置或參數(shù)

觸發(fā)的元素是一個被鏈接元素、一系列文本或一個圖像。

因為是空連接，所以不會加載另一個頁面，空鏈接可以是一個#標(biāo)記，也可以是調(diào)用沒有功能的JavaScript函數(shù)，即javascript:;

圖像交換行為應(yīng)用步驟：選擇圖形，屬性中命名**Image，選擇另一個圖像，屬性中使用空鏈接，輸入javascript:;,然后選擇觸發(fā)元素，就是另一個圖像的標(biāo)簽a,然后打開窗口-行為-點+號，添加行為，選擇交換圖像，對話框圖像選擇第一個圖像的名稱**Image,設(shè)定原始檔為瀏覽第二個圖像名稱，下面兩個選框打鉤，確定。

打開瀏覽器窗口操作步驟：選擇符號如+，屬性鏈接中輸入javascript:;,添加行為-打開瀏覽器窗口，瀏覽中選擇圖像，輸入寬820高550，選擇地址工具欄，確定。

實際圖像尺寸是800*530，但還瀏覽器窗口的鉻卻需要稍微大一點的寬度和高度。

上述行為步驟可以粘貼復(fù)制，但是記得換了圖像的名稱，雙擊行為名稱在瀏覽中選擇對應(yīng)的圖像,自定義參數(shù)就可以了。

顯示-隱藏元素行為步驟：點擊符號如？，屬性鏈接中輸入javascript:;,添加行為選擇顯示-隱藏，對話框中選擇要顯示的名稱，點擊顯示，然后確定，行為選擇onMouseOver,然后再添加行為顯示-隱藏，對話框選擇同一名稱，點擊隱藏，確定，然后行為選擇onMouseOut.

25、DW中4個主要Spry組合是：Spry數(shù)據(jù)、Spry表單控件、Spry布局控件和Spry效果。

26、將Spry主詳細(xì)數(shù)據(jù)添加到頁面的第一個任務(wù)是：建立一個到XML數(shù)據(jù)源的鏈接，該數(shù)據(jù)源以數(shù)據(jù)集而知名。

27、插入-表單，插入記錄-表格（2列，左列包含表單標(biāo)簽，如名稱和地址，而右列包含表單元素本身，如文本字段和復(fù)選框），表格命名，在表單屬性，左上角，表格名稱將在之后設(shè)計自己的表單元素時派上用場。

28、文本字段是所有表單元素真正的重負(fù)荷機器，很多表單無一例外都是由文本字段組成。在首選參數(shù)-輔助功能中要確定選擇了“表單對象”復(fù)選框。文本字段的自然限制字符數(shù)是255個。

29、表單元素：文本字段、文本區(qū)域、復(fù)選框和選擇列表。

30、在表格中插入-表單-文本字框（公司名稱、密碼）；或者插入-表單-spry驗證文本域（郵件地址、用戶名）；插入-表單-文本區(qū)域（需要輸入一段話的在屬性“初始值”輸入文本）；插入-表單-單選按鈕組（需要輸入名稱，然后選項“標(biāo)簽”和“值”選擇換行符，并且需要對先插入的單選按鈕添加輔助功能屬性，選中按鈕Ctrl+T,打開快速標(biāo)簽編輯器，在最后兩個字符/>前輸入）；插入-表單-復(fù)選框，彈出“輸入標(biāo)簽輔助功能屬性對話框”填寫后，空一個格，繼續(xù)插入-表單-復(fù)選框步驟；插入-表單-列表/菜單，彈出“輸入標(biāo)簽輔助功能屬性對話框”填寫后，打開窗口屬性，選擇“列表值”，對話框打開，添加輸入，最后在屬性中選擇“初始化時選定”選擇一個；插入-表單-按鈕，彈出的對話框填完后，需要在屬性中將標(biāo)簽文本添加到值中，剪切粘貼就可以；插入-表單-字段集，也就是給這個表單起個名，放在左上角的位置，形成一個帶標(biāo)簽的細(xì)邊框來嵌套整個表格。

31、<form>標(biāo)簽?zāi)康模耗車@所有的表單元素（及包含表單元素的表格）來嵌套標(biāo)簽，也包括一個動作屬性，這個屬性可定義文件或腳本，以處理表單處理程序。

32、表單對象兩個輔助功能屬性：訪問鍵和Tab鍵索引。訪問鍵定義一單個字母，當(dāng)與瀏覽器的修改器共同被按下時，能給相關(guān)的域提供焦點；Tab鍵索引顯示從一個框到下一個框的標(biāo)記順序。

33、Spry表單控件對標(biāo)準(zhǔn)表單對象優(yōu)勢：Spry表單控件包括內(nèi)置的驗證，以確保提交的數(shù)據(jù)在需要時就能完全形成而且可用。

34、標(biāo)準(zhǔn)文本字段針對的是剪短的字符串，而文本區(qū)域能容納多個段落。

35、使用統(tǒng)一名稱的所有單選按鈕都將會在同一單選按鈕組中。

36、單選按鈕-相互排斥的選擇

復(fù)選框-允許用戶根據(jù)自己的需要選擇多個

37、Flash兩種視頻格式：下載視頻和流視頻。

38、插入Flash元素（插入記錄-媒體-圖像查看器）之后，通操作界面右面的Flash元素面板來改變Flash元素的屬性，如顏色，圖片標(biāo)題，圖像出現(xiàn)方式，就跟播放PPT選擇動畫一樣。

二、考試內(nèi)容

本課程考試內(nèi)容覆蓋到章?？荚囍饕攒浖僮餍问綖橹?，通過對各章知識點的理解，制作出要求的完整網(wǎng)頁效果。

三、關(guān)于命題考試的若干規(guī)定

1、本課程的考試應(yīng)根據(jù)本大綱規(guī)定的內(nèi)容來確定考試范圍和考核要求。

2、本課程的考試形式為上機操作，考試時間為150分鐘，采用百分制評分，60分合格。

四、題型示例

上機操作題：

運用DREAMWEAVER CS3軟件制作網(wǎng)頁效果：根據(jù)網(wǎng)頁效果圖和素材，制作完整的網(wǎng)頁效果，并添加超鏈接?？衫帽砀?、層、框架等進(jìn)行網(wǎng)頁布局。

請注意，如果你是杭州師范大學(xué)自考生，那么你很有可能考試的時候遇到考題是用PS對，就是PS制作網(wǎng)頁效果圖。