第一篇：《網頁設計》大綱

《網頁設計》教學大綱

網頁設計

課程名稱：網頁設計 課程編號：12412219 總學時 36 適用對象：教育技術學本科專業

一、教學目的與任務

1、教學目的：本課程是教育技術學專業的專業課程，具有很強的實踐性，重在掊養學生開發與制作網絡課件及網站的專業技能。

2、教學任務：學生通過本課程的學習之后能掌握網絡課件及網站的開發與制作流程，能獨立制作簡單網絡課程。

二、教學的基本要求

本課程是一門實踐性操作性很強的課程，重在培養學生的網頁設計與制作的能力，為學生制作精品課程打基礎，理論以精講為主，但要注意給學生較多的上機實踐機會，讓學生在動手過程中提高網頁制作能力。

三、教學內容與要求 第一章 WWW概述

（一）教學內容 1.1概述

1.1.1什么是Internet 1.1.2 Internet與TCP/IP協議

1.1.3 Internet網絡地址

1.1.4 連接Internet的方式 1.2 Web服務器

1.2.1 Web/Server概述

1.2.2 Windows Web 服務器的建立

1.2.3 Unix Web服務器的建立

1.3 Internet Explorer 概述

1、設置Internet連接

2、Internet的使用

3、瀏覽Web的捷徑

4、可定義的瀏覽器

5、便攜機的最佳選擇

1.4 Internet Explorer的快捷鍵 1.5 Internet 技術用語一覽

（二）教學要求

本章內容比較簡單且應用最為廣泛,主要講述了Web服務器的工作原理和Internet Explorer的使用方法,教師在講述本章內容時應該多聯系實際.。這樣可提高上課的趣味性。第二章 網頁制作概述

（一）教學內容 2.1 網站的種類

1、公司或單位的信息發布

吳代文

Page 1 of 8 2009、9、5

《網頁設計》教學大綱

2、出版物

3、個人主頁

4、網上購物站點

5、專題介紹

6、實用信息服務 2.2網站結構的規劃

1.分級結構

2.線性結構

3.Web結構

2.3網站的設計原則及標準

1、網站要包括哪些內容

2、怎樣構思一個好網站

3、什么是好的設計

4、慎用圖像

5、設計主頁的考慮 2.4 網頁外觀的設計

1.不要先決定網頁的外觀，然後強迫自已去適應它，應該從你的訪客對像，你要傳達的訊息以及你的制網目標推導出一個最適合的網頁架構 2.每頁排版不要太疏或用太大的字，盡量避免看你的網頁時要作很大的卷動，要知道在一頁的上部分是顯眼而寶貴的地方，不要只放著幾個粗大的字或圖片。

3.切勿以800x600以上的解像度設計網頁。常用的解像度是640x480及800x600。明智的網頁設計者是處處照顧瀏覽者，絕不會炫耀自己有專線、有17寸的顯示器等。

4.不要於每頁插入太多的廣告牌。相信你亦不喜歡瀏覽一些貼滿廣告的網頁吧，你要考慮到該頁內容與廣告的比例，擺放的位置亦很重要，不妨多參考別人的做法。廣告太多，只會令人煩厭。2.5網頁制作工具概述

2.5.1 Frontpage 2.5.2 Dreamweaver 2.6 網頁美化工具

2.6.1 Photoshop 2.6.2 Fireworks 2.6.3 Flash

（二）教學要求

本章主要講述了網站的種類、網站的結構規劃、網站的設計原則及標準等，這三節是本章的重點，教師在講授本章時可以用一些知名網站來作為實例講解。第三章 FrongPage 2000 網頁制作

（一）教學內容

3.1 FrontPage 2000 簡介

1、直觀形象的站點管理

2、強大的模板和向導功能

3、智能化管理

4、強大靈活的主頁制作功能 3.2 FrontPage窗口介紹及視圖

吳代文

Page 2 of 8 2009、9、5

《網頁設計》教學大綱

1、網頁視圖

2、文件夾視圖

3、報表視圖

4、導航視圖

5、超鏈接視圖

6、任務視圖 3.3 創建Web站點 3.4 站點管理

3.4.1 站點設置

3.4.2 配置圖片編輯器

3.4.3 為已有的Web站點添加網頁 3.5 利用FrontPage 制作網頁

（二）教學要求

FrontPage是一款所見即所得的可視化網頁制作工具，本章主要講述如何用FrontPage制作網頁，配制和管理站點，教師在講授本章時應該多舉一些實例，并給學生較多的上機時間。

第四章 使用Dreamweaver Mx制作網頁

（一）教學內容

4.1 Dreamweaver Mx簡介

4.1.1 Dreamweaver 的新特性 4.1.2 Dreamweaver MX 的界面 4.2 建立站點 4.3 建立頁面

4.4 建立超鏈接 4.5 表格

4.5.1 創建表格 4.5.2編輯表格 4.5.3表格的修飾 4.5.4表格的嵌大套 4.5.5套用表格樣式 4.5.6導入表格數據文件 4.5.7用表格進行頁面布局 4.6框架

4.6.1 框架的創建

4.6.2 設置框架及框架集的屬性 4.6.3 對框架頁面的編輯 4.7 表單

4.7.1 表單簡介 4.7.2 插入文本框 4.8 動態效果

4.8.1 時間軸和行為概述 4.8.2 使用時間軸與復選框 4.8.3 內置行為 4.8.4 插入按鈕

吳代文

Page 3 of 8 2009、9、5

《網頁設計》教學大綱

（二）教學要求

Dreamweaver MX是一款所見即所得的可視化網頁制作工具，本章主要講述如何用Dreamweaver MX制作網頁，配制和管理站點，DreamweaverMX比FrontPage更專業，制作網頁的效率更高。教師在講授本章時應該多舉一些實例，并給學生較多的上機時間。

第五章 使用Photoshop 美化網頁

（一）教學內容 5.1概述

5.2顏色模式和文件格式的介紹

5.2.1 顏色模式 5.2.2 文件格式

5.3 Photoshop 5.0的基本操作 5.4 創作特殊效果圖像 5.5 創建特殊效果文字 5.6綜合實例

（二）教學要求

Photoshop是一款功能強大的圖像處理軟件，本章主要講述如何用Photoshop處理圖片，關化網頁，教師在講述本章時，應該注意一些實例，將一些重要的命令和操作用實例的形式傳授給學生。第六章 Fireworks 4.0

（一）教學內容

6.1 Fireworks 4.0的新特性

6.2 安裝Fireworks 4.0 的系統要求 6.3 Fireworks 4.0的安裝

6.4 Fireworks 4.0 的工作界面

6.4.1 菜單欄 6.4.2 工具欄 6.4.3 工作面板 6.4.4 工具箱 6.4.5 制作實例

（二）教學要求

Fireworks 4.0是一款功能強大的網頁圖片處理軟件，它能和Dreamweaver 有效結合在一起，本章主要講述如何用Photoshop處理圖片，關化網頁，教師在講述本章時，應該注意一些實例，將一些重要的命令和操作用實例的形式傳授給學生。

第七章 Flash MX

（一）教學內容 7.1 Flash MX 簡介 7.2 Flash MX 的安裝

7.3 Flash MX 中的一些概念 7.4 Flash MX 的界面組成 7.5 主要繪圖工具的使用

7.6 Flash MX 中的一些基本操作

7.6.1 幀的操作

吳代文

Page 4 of 8 2009、9、5

《網頁設計》教學大綱

7.6.2 圖層的操作

7.6.3 場景的操作 7.6.4 控制面板的作用 7.6.5 創建、轉換組件 7.6.6 預覽和發布 7.7 添加音效

7.7.1 導入聲音文件 7.7.2 在影片中加入聲音 7.7.3 聲音的編輯 7.7.4 加入音效實例

7.8 動畫的制作、編輯及其實例

7.8．1 Flash MX動畫的類型

7.8.2 Flash MX動畫的制作 7.8.3 Flash MX 動畫的編輯 7.8.4 Flash MX 動畫制作實例 7.9 文件的導入、發布和導出

7.9.1 文件的導入 7.9.2 文件的發布 7.9.3 文件的導出

（二）教學要求

Flash MX是一款功能強大的動畫制作軟件，本章主要講述如何用Flash制作動畫美化網頁，教師在講述本章時，應該注意一些實例，將一些重要的命令和操作用實例的形式傳授給學生。

第八章 網頁標置語言HTML、DHTML、CSS、XML

（一）教學內容 8.1 HTML簡介

8.1.1 一個實例 8.1.2 HEAD標簽 8.1.3 BODY標簽

8.1.4 標題文字顯示等級 8.2 格式及文字

8.2.1 格式標準 8.2.2 文字標準 8.3 圖像控制標簽

8.3.1 插入圖像 8.3.2 圖像控制 8.3.3 HR標簽 8.4 網頁中的表

8.4.1 基本表格 8.4.2 表格控制 8.5 網頁中的鏈接

8.5.1 鏈接標簽 8.5.2 鏈接錨點 8.6 網頁的框架結構

吳代文

Page 5 of 8 2009、9、5

《網頁設計》教學大綱

8.6.1 基本語法

8.6.2 Frame 的外觀設置 8.7 網頁中的表單

8.7.1 基本語法 8.7.2 列表框標簽 8.8 基它標簽 8.9 DHTML與CSS 8.9.1 CSS-P初步

8.9.2 通用JavaScript 8.9.3 分層技術

8.9.4 用JavaScript控制圖片 8.9.5 提示效果 8.10 XML 8.10.1 HTML的局限性 8.10.2 XML的興起 8.10.3 XML的應用展望 8.10.4 XML的例子 8.10.5 序

8.10.6 元素聲明 8.10.7 聲明規則

8.10.8 XML的其他組件

（二）教學要求

本章主要講述了網頁標置語言HTML、DHTML、CSS、XML，了解一定的網頁標置語言對于制作網頁很有幫助，教師在講述本章時，應該注意一些實例，將一些重要的命令和操作用實例的形式傳授給學生。第九章 網頁編程

（一）教學內容 9.1 JavaScript 9.1.1 JavaScript語言簡介 9.1.2 JavaScript編程基礎 9.1.3 JavaScript應用實例 9.2 ASP編程

9.2.1 ASP簡介 9.2.2 ASP編程初步

9.2.3 ASP的基本腳本語言 9.2.4 使用SSI 9.2.5 動態數據交換的實現 9.2.6 ASP的內置組件 9.3 PHP編程

9.3.1 PHP簡介 9.3.2 PHP語法簡介 9.3.3 PHP編程實例 9.4 Java與JSP 9.4.1 Java概述

吳代文

Page 6 of 8 2009、9、5

《網頁設計》教學大綱

9.4.2 Java應用程序 9.4.3 Java Applet 9.4.4 Java Applet圖形界面輸入輸出 9.4.5 Java Servlet 9.4.6 JavaServer Pages 9.4.7 JSP與ASP的比較

9.4.8 JSP的基本語法與示例 9.4.9 XML與JSP

（二）教學要求

本章主要大致介紹了一下各種網頁編程語言，使學生能對各種網頁編程語言有一定的了解，本章的重點前兩節，教師在講述本章時，應該注意一些實例，將一些重要的命令和操作用實例的形式傳授給學生。第十章 網站建設實例

（一）教學內容

10.1 網站的設計原則及標準 10.2 準備工作 10.3 具體設計及規劃 10.4 建立網站（Web站點）10.5 主頁的制作 10.6 網頁的上傳與維護

（二）教學要求

本章主要以實例的形式講述如何制作網站，比較全面地應用以前所學的知識來構建并制作一個網站。教師在講述本章時，應該多找一些設計得比較成功的網站并給學生詳細分析。

四、學時分配與教學方式 總學時 ：36 第一章 WWW概述 3學時 第二章 網頁制作概述 3學時 第三章 FrongPage 2000 網頁制作 4學時 第四章 使用Dreamweaver Mx制作網頁 3學時 第五章 使用Photoshop 美化網頁 4學時 第六章 Fireworks 4.0 4學時 第七章 Flash MX 4學時 第八章 網頁標置語言HTML、DHTML、CSS、XML 3學時 第九章 網頁編程 4學時 第十章 網站建設實例 4學時

吳代文

Page 7 of 8 2009、9、5

《網頁設計》教學大綱

教學方式：團體心理咨詢是一門應用性較強的心理學專業的基礎課，其教學方式應以課堂講授和現場訓練為主，同時要結合課堂討論、案例分析、設計方案等方式，提高學生分析心理問題，抓住主要現象的能力，重點形成學生組織開展團體訓練的能力。

五、考核方式

考試加作品

六、本課程與基它課程的關系

本課程是網絡教育應用、網絡課程的開發與制作等后續課程的基礎課程。

七、教材與參考書

《網頁的設計與制作教程》 徐國平主編 高等教育出版社 《Dreamweaver MX 中文版自學手岫》 人民郵電出版社 《新手學建網站》 范德明 編著 人民郵電出版社

吳代文

Page 8 of 8 2009、9、5

第二篇：ASP動態網頁設計復習大綱

ASP動態網頁設計復習大綱

考試范圍：ASP內容

考查重點：第三章及第八章

1、ASP的內置對象及其在具體網頁設計編程中的用法

2、ASP對象的含義

3、循環語句的控制及其區別

4、表單的用法及數據的傳輸方式

5、ASP語句結構

第三篇：網頁設計說明書

網 站 設 計 說 明 書

一、設計理念

本網站定位 本身是用于展示個人作品的一個平臺頁面系統。在展示之余也有推銷網站 建設之功效....頁面主要以 深紅色調風格為主,站點分為有 首頁簡介、關于我的作品、經典作品展示、與我聯系方式等 各個方面子頁面.本站頁面主要展示的是本人在暑假實習公司開發的一些 作品...整體頁面使用到了 CSS 層樣式技術。

二、設計流程

網站主要以自己喜愛的東西而制作，并根據,相應要求 到網上尋找相應的 圖片素材 以及 應用到 PS 圖片設計結束.最后 應用 HTML 網站設計技術 使用 DIV+CSS 進行頁面布局的定位設計.三、使用的工具與技術

網頁制作工具 : Dreamweaver CS5 多媒體設計制作工具:Photoshop 應用到的設計技術： HTML、CSS.四、網站設計說明

網站名稱: 夢幻部落-作品展示廳 整體形象設計包括標準字、Logo、標準色彩、廣告語等.首頁作為網站的形象頁，作為網站的歡迎頁面，引入的元素大致有網站名稱、LOGO、形象圖片、宣傳文字、欄目導航等要素,是彰顯網站整體風格的重要頁面, 并結合 FLASH 動畫來展示.網站形象頁的設計突出..展示為主題，通過文字、形象、圖片的巧妙烘托，令頁面富有 層次感，達到賞心悅目的效果。

五、頁面結構布局

(1)、首頁布局、網站 Logo 幻燈片展示切換 頁面鏈接 站點介紹 頁面介紹 在線聯系方式 頁面底部

(2)、站長個人簡介頁面、網站 Logo 幻燈片展示切換 頁面鏈接 個人簡介 內容 更多鏈接 頁面底部

(3)、作品展示頁面、網站 Logo 幻燈片展示切換 頁面鏈接 作品展示 欄 頁面底部

(4)、聯系方式頁面、網站 Logo 幻燈片展示切換 頁面鏈接 聯系 提交 表單 其他聯系方式 網站建設 套餐 頁面底部

第四篇：網頁設計要點

1、頁面布局的概念包括哪些內容？

答：頁面布局的概念包括：頁面尺寸、整體造型、頁眉、文體、頁腳、圖片、多媒體。

2、圖像抖動是什么？

答：圖像抖動偽造了那些在顏色有限的調色板中不能顯示出來的顏色；在視覺上，近鄰像素傾向于混合而產生在圖像中實際不存在的顏色，從而達到一種補償目的。“抖動”的圖像有很多顆粒，顯得圖像非常粗糙。

3、運用色塊制作網頁時需要掌握的要點有哪些？ 答：（1）冷暖色調在均勻使用時不宜靠近，如果必須時，應當使用中間色（白色或黑色分隔過渡，在對稱色塊構圖中更應該注意。

（2）純度接近同的兩種顏色也不宜放在一起，如亮紅和亮綠。顏色太純，對眼睛有強烈刺激，容易造成眼睛疲勞，應降低其中一種顏色的純度，可以選擇在亮色中加入其它顏色用以平衡的方法，如可以使用墨綠配亮紅色，這樣焦點滯留在紅色上，綠色也不會干擾視線。

（3）整個頁面中最好有一個主色調，否則整個頁面就顯得零亂。在制作非對稱色塊網頁和漸變色網頁時，這是一個原則。

4、論述網頁頁面布局的方法有哪些？

答：在進行網頁布局時，需要有一片空白的空間供創作人員自由發揮，主要可以通過兩種工具來進行創作，第一種工具是紙，在一張白紙上進行布局構思；第二種工具是計算機通過某些軟件來進行網頁布局構思，如Photoshop

5、試比較GIF格式與JPEG格式的原理與各自適用的范圍。答：有一個非常簡單的原則來判斷應該采用哪種文件存儲格式：如果是自己設計的線條簡單、色彩種類比較少的圖形，或者是制作透明圖形、制作動畫，那么就用GIF格式。因為GIF文件能夠做動畫，而且它的壓縮算法是通過精簡色彩集來實現的；如果需要在網頁上放置一張照片，或者是處理過的照片，那么就使用JPEG文件格式，因為JPEG的壓縮算法對包含有復雜的顏色的圖片很有效。

在GIF格式中最多允許有256色，而JPEG則沒有這個限制，且可以顯示所有的RGB顏色。RGB顏色在一般的個人電腦上可以從000000~FFFFFF，也就是所謂的24位真彩色，它共有256*256*256=16777216種不同的色彩。而GIF的顏色只用8位表示，所以其色彩范圍為00~FF，只能顯示256種顏色。在使用彩色照片時，由于彩色照片屬于連續色調的圖像，因此它所包含的顏色數目一般遠遠大于256色。如果把它保存為GIF格式的文件，將不能把這些顏色都顯示出來。GIF的原理是先為所有的顏色建立一個索引，然后選擇其中256種最常見的顏色進行顯示，因此GIF用來處理高清晰度照片是不合適的。

如果顏色數目少于`256色，保存為真彩色的圖像就會造成浪費，因為在保存為真彩色JPEG的過程中，對每一個象素點，都要建立顏色信息，這樣就會有大量的顏色信息是重復的，圖片文件自然就會增大了。而GIF與JPEG不同，如前面所述，他首先在GIF文件頭部建立一個顏色索引表，然后僅僅保存各象素點對應的顏色索引號。當軟件在顯示這個文件時，首先要對GIF圖像進行解碼，就會按照索引號在表中尋找對應的顏色。因此在保存簡單顏色的圖像時，GIF大量采用索引，就比JPEG直接存儲各點的顏色信息節省很多。

6、PHOTOSHOP向量圖的優點和缺點有哪些？ 答：優點主要有：與分辨率無關，用戶可以對圖形進行任意放大或縮小，而不會影響它的清晰度和光滑性；便于修改，通過調整其控制點位置，可輕松修改其形狀。

向量圖的缺點有：不易制作色彩豐富的圖像，而且繪制出來的圖像也很不逼真。

7、網站設計中應注意的幾個方面（通用規則）

答：網頁設計需要遵從一定的通用規則，必須按照一定的規劃、想法來實施。網頁設計的原則不僅體現在網頁的風格、層次構思和網頁的頁面構思中，還包括更多更廣的設計思想。網頁設計不應該從設計者本身出發，而必須要從訪問者的角度來思考問題。共有八個問題要注意：（1）網站設計目的決定設計方案。在設計一個網站之前，應當有一定的目的性。比如制作個人網頁主要是為了宣傳自己或者自娛自樂，而公司的網頁就不僅僅在于宣傳，更多的時候則是提供自己的商務信息并與客戶進行商務活動，有些商業網站則提供有特色的服務，比如搜索引擎。因此在網頁的設計方案中，個人網頁的內容往往由與個人有關的方面組成，包括自我介紹，個人愛好，個人收藏等。

（2）瀏覽者的需求第一位。

（3）頁面的有效性

（4）頁面布局的保持統一性。

頁面布局往往能顯示一個網站的統一性，如使用同樣的背景。

（5）使用表格和適當的幀結構來設計網頁。

使用表格往往可以合理安排許多網頁元素，實現圖文混排的效果。

（6）謹慎使用圖片。

（7）平面設計意識。

（8）減少Java Applet和其它多媒體的使用。

8、論述規劃目錄結構時應當遵循的原則 答：（1）不要將所有文件都存放在根目錄下；

（2）按欄目內容分別建立子目錄；

（3）在每個主目錄下都建立獨立的images目錄；

（4）目錄的層次不要太深；

（5）切忌使用中文目錄；

（6）不要使用過長文件名的目錄；

（7）盡量使用意義明確的目錄。

9、商業站點的風格特征有哪些？ 答：商業公司站點由于其目的與個人站點以及非盈利性的組織完全不一樣，因此它的站點風格也與其他兩類站點的風格完全不一樣。主要體現在以下幾個方面：

（1）公司徽標或商標應當出現在頁面最上方，盡可能做到色彩醒目，同時占用版面小。（2）可以采用主題圖形產品廣告來突出公司形象與風格。主題圖形或產品廣告應精心設計，給瀏覽者以良好的第一映像。

（3）主要欄目一般采用圖文并茂的超級鏈接實現，要考慮到主要欄目圖片、文字間的色彩配合，同時要和主題圖形相互襯托，主題圖形如果較大，則欄目必須縮小。

（4）不要把主題欄目和次要欄目都顯示在同一個頁面上。可以通過站點組織圖表示網站的結構布局，或者采用Java Script來生成可以展開的“目錄樹”。（5）商業欄目一般都有固定的欄目頁面，如Support（技術支持）、Service（服務）、About Us（關于公司）等。這些欄目不是網站的主要欄目，不需要采用很醒目的方式出現，但是它們應為于比較方便用戶單擊的位置，可以采用出現在網頁頂端（或者底端）的細長的導航條的方式。

（6）必須建立站內搜索引擎，以方便瀏覽者在站內查找所需要的信息。

10、非商業組織網站的風格有哪些？ 答：（1）強調頁面的主色調。

（2）主題圖形要求反映單位的風采，設計應有創意、有內涵、莊重中不乏活潑。

（3）超級鏈接的分類一定要清晰，可采用圖形，必要時可建立站內搜索引擎。

（4）信息查看板很重要，因為非商業組織的網站更新不如商業網站頻繁，始終如一的畫面顯得枯燥，所以經常去更新信息查看板，將增加訪問者的訪問興趣。放置信息查看板主要方法有兩種方法，一是在主頁直接放置信息查看板，二是當頁面上主題圖形小，超級鏈接也不多的情況下不宜把信息查看板放在主頁，可以在主頁上增加一個快速進入信息查看板的超級鏈接。

11、簡述站點的層次和典型的站點結構

答：為了合理組織整個站點中的所有內容，便于訪問者查找和瀏覽，一般來說站點都把自身的內容分為多個層次，每個層次逐漸遞進，最后達到最詳細的內容。網站的層次正是指整個站點各個層次之間的結構關系。大部分網站制作的初學者不重視這種層次規劃，以至于網頁風格不統一，在網頁導航上也出現了很多問題。按照專業網頁設計流程，制作網頁前應先設計好導航條，即需要事先規劃好網頁的層次結構。

無論是復雜的商業網站還是簡單的個人網站，在網頁的層次結構上都存在一些共同點，即任何一個網站均可以用三級結構實現，也就是“首頁——欄目頁——文章頁”或“一級頁面——二級頁面——三級頁面”結構。制作好這三級結構，就能制作好其他類型的結構，因為任何網站都是以這三級結構為基礎并在這個基礎上擴張，站點的各級結構各有特點。

目前互聯網上制作首頁大多采用大主題圖形配以少量文字介紹的方法，除了大型的共眾網站外，其他的站點都不必采用制作大量超級鏈接的做法。對于目前的商業網站和個人網站來說這條原則都是適用的。因此，主頁的制作將主要是主題圖形的制作以及頁面構圖

二級頁面是每個欄目的起始頁，該頁面應有與該欄目相對應的主題圖形，相對于整個網站的主題圖形來說，標志要小但必須醒目。當用戶進入該頁面后，需要設置通向其它欄目以及返回首條上的明確指示。

三級頁面是文章頁，位于最底層，當瀏覽者進入欄目后見到的超級鏈接，就是通向大篇幅文本的。由于文章頁本身包含大量文字，圖片不宜安放過多，必要時，可以為文章設計一些文章主題圖形，但這將服務器的負荷更重，一般情況下個人網站應避免這樣做，如果個人網站往往把文章標題做成各種各樣的美術字、特效字，結果將是得不償失。文字可以直接用文本表示，只要色彩、字體搭配得當，就可以制作出美麗的頁面，應把有限的頁面空間留給那些無法用文本表現的裝飾圖片上。

12、論述網頁設計的通用規則。

答：網頁設計需要遵從一定的通用規則，必須按照一定的規劃、想法來實施。網頁設計的原則不僅體現在網頁的風格、層次構思和網頁的頁面構思中，還包括更多更廣的設計思想。網頁設計不應該從設計者本身出發，而必須要從訪問者的角度來思考問題。共有八個問題要注意：（1）網站設計目的決定設計方案。在設計一個網站之前，應當有一定的目的性。比如制作個人網頁主要是為了宣傳自己或者自娛自樂，而公司的網頁就不僅僅在于宣傳，更多的時候則是提供自己的商務信息并與客戶進行商務活動，有些商業網站則提供有特色的服務，比如搜索引擎。因此在網頁的設計方案中，個人網頁的內容往往由與個人有關的方面組成，包括自我介紹，個人愛好，個人收藏等。

（2）瀏覽者的需求第一位。

（3）頁面的有效性

（4）頁面布局的保持統一性。

頁面布局往往能顯示一個網站的統一性，如使用同樣的背景。

（5）使用表格和適當的幀結構來設計網頁。

使用表格往往可以合理安排許多網頁元素，實現圖文混排的效果。

（6）謹慎使用圖片。

（7）平面設計意識。

（8）減少Java Applet和其它多媒體的使用。

13、簡述商業網站的風格特征。答：商業公司站點由于其目的與個人站點以及非盈利性的組織完全不一樣，因此它的站點風格也與其他兩類站點的風格完全不一樣。主要體現在以下幾個方面：

（7）公司徽標或商標應當出現在頁面最上方，盡可能做到色彩醒目，同時占用版面小。（8）可以采用主題圖形產品廣告來突出公司形象與風格。主題圖形或產品廣告應精心設計，給瀏覽者以良好的第一映像。

（9）主要欄目一般采用圖文并茂的超級鏈接實現，要考慮到主要欄目圖片、文字間的色彩配合，同時要和主題圖形相互襯托，主題圖形如果較大，則欄目必須縮小。（10）不要把主題欄目和次要欄目都顯示在同一個頁面上。可以通過站點組織圖表示網站的結構布局，或者采用Java Script來生成可以展開的“目錄樹”。（11）商業欄目一般都有固定的欄目頁面，如Support（技術支持）、Service（服務）、About Us（關于公司）等。這些欄目不是網站的主要欄目，不需要采用很醒目的方式出現，但是它們應為于比較方便用戶單擊的位置，可以采用出現在網頁頂端（或者底端）的細長的導航條的方式。

（12）必須建立站內搜索引擎，以方便瀏覽者在站內查找所需要的信息。

14、什么是網站目錄？簡述網站目錄結構組織建設的原則。答：網站的目錄是指你建立網站時創建的目錄。目錄結構規劃是否合理對于站點本身的上傳維護、站點內容未來的擴充和移植有著重要的影響。規劃目錄結構時應當遵循的幾個原則：（1）不要將所有文件都存放在根目錄下；（2）按欄目內容分別建立子目錄；

（3）在每個主目錄下都建立獨立的images目錄；（4）目錄的層次不要太深；（5）切忌使用中文目錄；

（6）不要使用過長文件名的目錄；（7）盡量使用意義明確的目錄。

15、個人網站的基本風格是什么？

答：個人站點的作用主要在于展示個人的風采和興趣愛好，站點的風格隨各人的愛好、習慣而不同，并無定式。但是總的來說個人網站的基本風格在布局上是有區別的，尤其反映在主頁上。

（1）主題圖形網站最顯著的標志是主頁有一個醒目的圖形，該圖形很大程度上反映了網頁作者希望自己的網頁具有的一種意境：或沉靜或活潑，采用冷或暖色調。主題圖形可以是制作的圖形，也可以采用個人照片。主題圖形式網站的另一個特點是主頁上的超級鏈接不多，而且很少出現大段的文本，只有當瀏覽者進入下一級頁面時，才能看到詳細文本信息。這類網站體現了作者較好的藝術修養，傾向于個性展示。但是由于主題圖形增加了網頁的體積大小，所以不應再出現大段的文本，否則網頁訪問速度就會變慢。

（2）信息發布式個人網站則主要看中網站的信息量，這類網站都發布大量的信息，其作者較熱衷于貢獻信息。為便于瀏覽者訪問，網站的主頁就出現大量的信息，更新信息較多，然后另辟欄目介紹其他信息。網站主題圖形基本上采用類似廣告條的樣式，往往被放置在網頁最上方，其布局類似各公司的徽標，目的在于提醒瀏覽者所處的位置，便于迅速切換欄目。信息式網站以提供大量信息為目的，應避免一切華而不實的設計。

信息式網站學習了如新浪、263等綜合類門戶站點的布局，這些綜合類網站要求主頁面盡可能提供豐富的信息量，通過主頁就可以完成許多信息搜索任務，查找信息簡單方便。因此，這些網站主頁鏈接相當繁多，還有各種免費郵件入口、會員登記入口、搜索引擎入口等，紛繁而有序。

（3）還有一種是介于上述兩種類型之間的網站。這種網站既想突出個人形象，又想發布大量信息，組織形式不鮮明。初學者應注重一定要讓自己的網站簡潔，這樣便于作者控制網頁上的元素。網頁元素包括圖形、圖像、文字、超級鏈接、表格等由作者在網頁上建立的對象。

個人網站具體采用哪種風格形式，應當按照需要決定。如果只為介紹個人及其愛好，其他要加入的資料不多，就可以采用主題圖形式，這種情況下需要掌握一些圖像處理的特殊技能。如果想開設軟件下載、音樂下載、文學作品大全等，對展示個性并不熱衷，采用信息式站點模式比較方便。信息式網頁有一個特點是欄目間的網頁結構相似，可以建立起以一個網頁為基準的模板，從而能夠快速建立其他網頁，這使得管理起站點更為省時、省力。

16、論述建立網站的鏈接結構有哪幾種形式和各自的優缺點。

答：網站的鏈接結構是指頁面之間相互鏈接的拓撲結構，它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在與一個立體的空間中。研究網站的鏈接結構的根本目的在于：用最少的鏈接，使得瀏覽最有效率。

一般地，建立網站的鏈接結構有兩種基本方式：（1）樹形鏈接結構方式（一對一）

類似DOS的目錄結構，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。立體結構看起來就像蒲公英。這樣的鏈接結構瀏覽時，一級級進入，一級級退出。優點是條理清晰，訪問者明確知道自己在什么位置，不會“迷”路。缺點是瀏覽效率低，要進行欄目跳轉時，必須繞經首頁。

（2）星形鏈接結構（一對多）

類似互聯網結構，每個頁面相互之間都建立鏈接。立體結構像東方明珠電視塔上的鋼球。這種連接結構的優點是瀏覽方便，隨時可以到達自己喜歡的頁面。缺點是鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內容。

這兩種基本結構都只是理論上的方式，在實際的網站設計中，總是將這兩種結構混合起來使用。我們希望瀏覽者即可以方便快速的達到自己需要的頁面，又可以清晰的知道自己的位置。所以，最好的辦法是首頁和一級頁面之間用星形鏈接結構，一級和二級頁面之間用樹形鏈接結構。

17、簡述非商業組織的網站風格。答：（1）強調頁面的主色調。

（2）主題圖形要求反映單位的風采，設計應有創意、有內涵、莊重中不乏活潑。

（3）超級鏈接的分類一定要清晰，可采用圖形，必要時可建立站內搜索引擎。

（4）信息查看板很重要，因為非商業組織的網站更新不如商業網站頻繁，始終如一的畫面顯得枯燥，所以經常去更新信息查看板，將增加訪問者的訪問興趣。放置信息查看板主要方法有兩種方法，一是在主頁直接放置信息查看板，二是當頁面上主題圖形小，超級鏈接也不多的情況下不宜把信息查看板放在主頁，可以在主頁上增加一個快速進入信息查看板的超級鏈接。

18、論述規劃網站目錄結構時應當遵循的的原則。答：規劃目錄結構時應當遵循的幾個原則：（1）不要將所有文件都存放在根目錄下；（2）按欄目內容分別建立子目錄；

（3）在每個主目錄下都建立獨立的images目錄；（4）目錄的層次不要太深；（5）切忌使用中文目錄；

（6）不要使用過長文件名的目錄；（7）盡量使用意義明確的目錄。

第五篇：網頁設計論文

網頁設計基礎課程論文

摘要:隨著互聯網的不斷發展和中國網絡人口的日益增長，建立個人網站，不但可以更好的展示自己，而且可以提高自己在計算機應用方面的能力,網站越發普及，網站建設也有新的要求,網站已發展為一種工具，一個企業對外信息展示的工具.以前網站上常見的大幅圖片，長達幾十鐘的flash動畫，已悄然而逝，瀏覽者再也不用為了查找一些信息而必須等待動畫的時間，可以簡單方便的找到自己想要的東西，是瀏覽者主要的目的，也是網站設計時應該考慮的問題。以前只是一味的追求網站的外觀，其實網站是一個公司的對外信息窗口，因此在考慮美觀的同時也得考慮瀏覽者的感受，如有些色調是很亮麗，但是這些過于亮的色彩看的時間長了會讓你的眼睛不舒服，這樣瀏覽的人就不會長時間在網站上逗留，網站沒把公司的信息完全的傳達給客戶． 關鍵詞：網站網頁設計發展趨勢網站標準 正文：一:網頁設計發展趨勢: 1.更多的CSS3 + HTML5 這是期待已久的事情。在過去的幾年設計師已經開始關注和使用CSS3+HTML5，但在以后CSS3+HTML5將會得到更廣泛的應用。網頁設計師最終會拋棄Flash。Flash不再是昔日的王者，新技術（指CSS3+HTML5）將會取而代之 2簡單的配色方案

沒有比純色的背景更直觀更簡潔。純色可以有很多種表達方式。不要老是黑白灰神馬的，太不給力了。多點考慮綠、黃或者紅作為你的網頁主色調。當然，顏色最好保持使用2到3種。調整顏色的透明度，或許會給你意想不到的效果 3.移動互聯網時代的到來

智能手機，ipad和上網本隨處可見，將來這個將會更加明顯。這意味著你的設計需要考慮更多的設備。4.Parallax Scrolling 先來解釋下Parallax Scrolling，Parallax scrolling 是讓多層背景以不同的速度移動，形成運動視差 3D 效果，雖然純屬視覺效果，但在內容滾動時形成的視覺體驗仍然非常出色。2011年的網頁設計趨勢熱點就是要創造這樣的深度視覺效果。5.設計需考慮更多的觸屏設備

觸屏技術應用越來越廣泛，觸屏設備隨處可見。這意味著，你的導航設計不再只是鼠標導航，你必須要要考慮你的設計適合觸屏設備。6.深度判析

深度判析是關于在網頁設計使用維數，這樣可以使你的網頁變得更加真實。如果運用得恰當，那將會是一個虛擬的3D效果，就像3D電影阿凡達那樣。盡管3D技術還沒有去到網站設計，你仍然嘗試使用維數進行設計。7.大背景圖

大背景圖的網頁設計應用在2011年將會更加明顯。這些背景圖像一般是高分辨率，覆蓋這個網站。高清照片是一個迅速抓住你的讀者的好方式，可以產生極具沖擊力的視覺效果-游客的視線會不自覺地落在寬大的背景上。8.不拘謹于頂級域名

嚴格意義上這一點與網頁設計無關，但這一點也是發展的趨勢，將出現更多創造性的域名。.com域名的吸引力越來越少，主要是你很難再找到一個比較短的.com域名。2011年人們開始將視線慢慢轉移到.me、.co和.cc等身上。想想域名的發展，搶先一步，不然你很可能再次錯失先機。9.QR: Quick Response 如果你注意現在越來越多的名片、雜志或者其他地方出現方形條形碼，證明你已經看到2011年的這個趨勢熱門

10.縮略圖設計（Thumbnail Design）

Google已經向瀏覽用戶推出它們的瀏覽預覽技術。過去我們只能通過點擊鏈接才能看到網頁的內容，現在你只需點擊放大鏡然后將鼠標懸停在鏈接上就可以預覽該鏈接的網頁內容。11.持續聯系/ Life Stream Lifestreaming, 一種在線記錄個人日常活動的網絡應用，包括直接通過視頻feed或通過聚焦一個人的網絡在線內容，比如博客日志，在社會性網絡上面的更新，在線相冊，聊天內容甚至只是一些喜歡的網站的鏈接等等.二:網站標準是在W3C（W3C.org）的組織下，商業公司（Netscape、Microsoft等）也認識到統一標準的好處。網站標準開始被建立（1998年2月10日發布XML1.0為標志），并在網站標準組織（webstandards.org）的督促下推廣執行。

為什么要建立網站標準: 我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的“瀏覽器大戰”，為了兼容Netscape和IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，例如支持手機上網的WAP技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了我們大量的帶寬；針對某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網站等等。這是一種惡性循環，是一種巨大的浪費。如何解決這些問題呢？有識之士早已開始思考，需要建立一種普遍認同的標準來結束這種無序和混亂。商業公司（Netscape、Microsoft等）也終于認識到統一標準的好處，因此在W3C（W3C.org）的組織下，網站標準開始被建立（1998年2月10日發布XML1.0為標志），并在網站標準組織（webstandards.org）的督促下推廣執行。

采用網站標準的好處:

對網站瀏覽者的好處：

1、文件下載與頁面顯示速度更快

2、內容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）；

3、內容能被更廣泛的設備所訪問（包括屏幕閱讀機、手持設備、搜索機器人、打印機、電冰箱等）；

4、用戶能夠通過樣式選擇定制自己的表現界面；

5、所有頁面都能提供適于打印的版本。對網站所有者的好處:

1、更少的代碼和組件，容易維護；

2、帶寬要求降低（代碼更簡潔），成本降低。舉個例子：當ESPN.com使用CSS改版后，每天節約超過兩兆字節（terabytes）的帶寬；

3、更容易被搜尋引擎搜索到；

4、改版方便，不需要變動頁面內容；

5、提供打印版本而不需要復制內容；

6、提高網站易用性。在美國，有嚴格的法律條款（Section 508）來約束政府網站必須達到一定的易用性，其他國家也有類似的要求。

參考文獻： 一：溫謙.HTML+CSS網頁設計與布局從入門到精通[M].北京:人民郵電出版社,2010.3 二：http://www.tmdps.cn

三：http://btgyjlbjx.nease.net(北極星網站域名）

課程論文

系院:土木工程學院

專業:建筑工程 姓名:王奎

學號:105140340043 網頁設計基礎