第一講網(wǎng)頁設(shè)計概述第一頁，共五十四頁，編輯于2023年，星期一本門課程教材

《網(wǎng)頁設(shè)計基礎(chǔ)》清華大學計算機與信息管理中心中國鐵道出版社第二頁，共五十四頁，編輯于2023年，星期一推薦參考教材1網(wǎng)頁設(shè)計與制作教程（第4版）劉瑞新等編著機械工業(yè)出版社第三頁，共五十四頁，編輯于2023年，星期一推薦參考教材2網(wǎng)頁設(shè)計與制作案例教程李敏主編電子工業(yè)出版社第四頁，共五十四頁，編輯于2023年，星期一推薦參考教材3精通CSS+DIV網(wǎng)頁樣式布局前沿科技主編人民郵電出版社第五頁，共五十四頁，編輯于2023年，星期一課程定位《網(wǎng)頁設(shè)計與制作》是軟件技術(shù)專業(yè)的專業(yè)必修課程《網(wǎng)頁設(shè)計與制作》是以《計算機應(yīng)用基礎(chǔ)》課程為基礎(chǔ)，同時又是軟件技術(shù)專業(yè)各后續(xù)主要專業(yè)課的基礎(chǔ)。通過本課程的學習，應(yīng)掌握網(wǎng)頁設(shè)計與制作的基本理論、基本操作技能和基本分析方法，為以后學習Web應(yīng)用程序開發(fā)等后續(xù)專業(yè)課程打下必備的基礎(chǔ)。第六頁，共五十四頁，編輯于2023年，星期一學習目標學習目標？第七頁，共五十四頁，編輯于2023年，星期一目標

你的目標由你選擇訂SMART的目標Specific確定的Measurable能夠衡量的Achievable可達成的Realistic現(xiàn)實的Time時間限制行動目標實現(xiàn)現(xiàn)在成功即實現(xiàn)自己所設(shè)定的目標第八頁，共五十四頁，編輯于2023年，星期一掌握網(wǎng)頁編程基礎(chǔ)html相關(guān)知識知識目標

熟練掌握網(wǎng)頁制作軟件Dreamweaver的基本操作和使用技能掌握網(wǎng)頁頁面布局的各種方法掌握表單網(wǎng)頁制作方法掌握圖片與多媒體文件的添加、調(diào)整掌握建立各種形式的超級鏈接的方法CSS層疊樣式表的應(yīng)用理解行為的作用，掌握設(shè)置行為的方法第九頁，共五十四頁，編輯于2023年，星期一

培養(yǎng)收集、處理信息，準備、加工素材的能力技能目標

學會通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash動畫和網(wǎng)頁特效等。培養(yǎng)制作靜態(tài)網(wǎng)頁的能力培養(yǎng)設(shè)計網(wǎng)站的綜合能力培養(yǎng)策劃能力、色彩感悟能力；充分培養(yǎng)和提高動手能力第十頁，共五十四頁，編輯于2023年，星期一

具有勤奮學習的態(tài)度，嚴謹求實、創(chuàng)新的工作作風素質(zhì)目標具有良好的心理素質(zhì)和職業(yè)道德素質(zhì)具有高度責任心和良好的團隊合作精神具有一定的科學思維方式和判斷分析問題的能力運用所學的理論知識和技能解決網(wǎng)站開發(fā)過程中所遇到的實際問題的能力第十一頁，共五十四頁，編輯于2023年，星期一考核方式平時作業(yè)實驗報告上課考勤網(wǎng)頁設(shè)計與制作相關(guān)技術(shù)的實際應(yīng)用平時成績(30%)實踐考核(30%)理論考試(40%)相關(guān)的基礎(chǔ)理論、知識點及相關(guān)技術(shù)的應(yīng)用第十二頁，共五十四頁，編輯于2023年，星期一學生作品第十三頁，共五十四頁，編輯于2023年，星期一第一章網(wǎng)頁基礎(chǔ)概述12網(wǎng)頁中的常用術(shù)語34網(wǎng)站開發(fā)的工作流程5什么是網(wǎng)頁？網(wǎng)頁制作工具第十四頁，共五十四頁，編輯于2023年，星期一1什么是網(wǎng)頁？第十五頁，共五十四頁，編輯于2023年，星期一1什么是網(wǎng)頁？瀏覽Web時所看到的文件稱為Web頁，又稱為網(wǎng)頁。

網(wǎng)頁可以將不同類型的多媒體信息（例如文本、圖像、聲音和電影等）組合在一個文檔中。由于這些文檔是用超文本標記語言HTML表示的，因此又稱為HTML文檔或超文本。

第十六頁，共五十四頁，編輯于2023年，星期一HTMLHTML通過標記符（Tag）標記網(wǎng)頁的各個組成部分，通過在網(wǎng)頁中添加標記符，指示瀏覽器如何顯示網(wǎng)頁內(nèi)容。瀏覽器按順序閱讀網(wǎng)頁文件（HTML文件）。任何網(wǎng)頁頁面都是以HTML語言為核心和基礎(chǔ)的。第十七頁，共五十四頁，編輯于2023年，星期一網(wǎng)頁的分類按所處位置分類按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。第十八頁，共五十四頁，編輯于2023年，星期一按表現(xiàn)形式分類

按網(wǎng)頁的表現(xiàn)形式可將網(wǎng)頁分為：靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁。第十九頁，共五十四頁，編輯于2023年，星期一靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁是指客戶端瀏覽器發(fā)送URL請求給服務(wù)器，服務(wù)器查找需要的超文本文件不加處理直接返回給客戶端，在客戶端瀏覽器顯示的頁面是由網(wǎng)頁設(shè)計師先制作完成放在服務(wù)器上的網(wǎng)頁。是純粹HTML格式的網(wǎng)頁，用戶基本上不能參與，只是網(wǎng)站頁面的靜態(tài)發(fā)布。靜態(tài)網(wǎng)頁相對更新起來比較麻煩，適用于一般更新較少的展示型網(wǎng)站。

第二十頁，共五十四頁，編輯于2023年，星期一動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁中除了基本網(wǎng)頁中的元素外，還包括一些程序，這些應(yīng)用程序需要瀏覽器與服務(wù)器之間發(fā)生交互行為。

動態(tài)網(wǎng)頁技術(shù)根據(jù)程序運行的地點不同，又分為服務(wù)器端動態(tài)技術(shù)（ASP、JSP、PHP等）和客戶端動態(tài)技術(shù)（JavaScript、VBScript）。動態(tài)網(wǎng)頁一般涉及數(shù)據(jù)庫操作，例如注冊、登錄、查詢、購物等，都需要設(shè)計強大的服務(wù)器端動態(tài)程序，并考慮各種可能出現(xiàn)的出錯情況，以保證網(wǎng)站的交互性和安全性。第二十一頁，共五十四頁，編輯于2023年，星期一動態(tài)網(wǎng)頁的工作原理：

客戶端瀏覽器向服務(wù)器發(fā)出URL請求，服務(wù)器查找到相應(yīng)的頁面之后，首先讀取動態(tài)網(wǎng)頁上的代碼，根據(jù)代碼中的指令完成網(wǎng)頁，然后將代碼從網(wǎng)頁上去掉，所得的結(jié)果將是一個靜態(tài)網(wǎng)頁；應(yīng)用程序服務(wù)器將該網(wǎng)頁傳送回網(wǎng)頁服務(wù)器，網(wǎng)頁服務(wù)器將網(wǎng)頁發(fā)送到瀏覽器，瀏覽器得到的仍然是一個純HTML的靜態(tài)網(wǎng)頁。第二十二頁，共五十四頁，編輯于2023年，星期一網(wǎng)頁的結(jié)構(gòu)標題欄地址欄菜單欄主頁狀態(tài)欄第二十三頁，共五十四頁，編輯于2023年，星期一網(wǎng)頁中的基本元素網(wǎng)頁中的主要元素有：文本、圖像、超級鏈接、導航欄、表格、表單、多媒體等。

1.文本

網(wǎng)頁的主體一般以文本為主。在制作網(wǎng)頁時，可以根據(jù)需要設(shè)置文本的字體、字號、顏色以及所需要的其他格式。

2.圖像

圖像可以用作標題、網(wǎng)站標志（Logo）、網(wǎng)頁背景、鏈接按扭、導航欄、網(wǎng)頁主圖等。使用最多的文件格式是JPEG和GIF格式。

第二十四頁，共五十四頁，編輯于2023年，星期一3.超級鏈接

超級鏈接是從一個網(wǎng)頁指向另一個目的端的鏈接。4.導航欄

導航欄能使瀏覽者方便地返回主頁或繼續(xù)下一頁的訪問。導航欄可以是按鈕、文本或圖像。5.表格

網(wǎng)頁中的表格是一種用于控制網(wǎng)頁頁面布局的有效方法。

第二十五頁，共五十四頁，編輯于2023年，星期一6.表單

表單通常用于收集信息或?qū)崿F(xiàn)一些交互式的效果。表單的主要功能是接收瀏覽者在瀏覽器端的輸入信息，然后將這些信息發(fā)送到瀏覽者設(shè)置的目的端。7.多媒體網(wǎng)頁包含有聲音、動畫、視頻等多媒體元素。

第二十六頁，共五十四頁，編輯于2023年，星期一2網(wǎng)頁中的常用術(shù)語WWWURL文件傳輸協(xié)議（FTP）IP地址域名超級鏈接網(wǎng)站第二十七頁，共五十四頁，編輯于2023年，星期一2.1WWWWWW（WorldWideWeb），中文稱為萬維網(wǎng)，也可以簡稱網(wǎng)。它是一個大規(guī)模的在線信息集合，是一個資料空間。可以通過一種叫做瀏覽器的應(yīng)用程序進行檢索與查看。第二十八頁，共五十四頁，編輯于2023年，星期一www的起源蒂姆·伯納斯·李（TimBernersLee）第二十九頁，共五十四頁，編輯于2023年，星期一1989年，伯納斯·李提出了“WorldWideWeb”的全球超文本項目計劃。1990年，伯納斯·李開發(fā)出了架構(gòu)起全球信息網(wǎng)的三大基本技術(shù)：http(超文件傳輸協(xié)議——電腦與服務(wù)器之間的溝通語言)、html(超文本標記語言——全球通用的文件格式)，以及URL(網(wǎng)址——文件位置的標示系統(tǒng))。1991年，伯納斯·李把自己開發(fā)的全球信息網(wǎng)放到互聯(lián)網(wǎng)上。于是，一個劃時代的奇跡，在歐洲粒子物理研究所、在伯納斯·李的手中誕生了——這就是今天風靡世界的WWW。第三十頁，共五十四頁，編輯于2023年，星期一www有什么不足的地方嗎？萬維網(wǎng)創(chuàng)始人伯納斯·李于1998年提出了有關(guān)下一代萬維網(wǎng)的構(gòu)想——語義網(wǎng)。語義網(wǎng)是機器可以理解數(shù)據(jù)含義的下一代萬維網(wǎng)。第三十一頁，共五十四頁，編輯于2023年，星期一比爾·蓋茨比爾·蓋茨的豪華住宅第三十二頁，共五十四頁，編輯于2023年，星期一 比爾·蓋茨那幢坐落在西雅圖，被 喻為未來生活預(yù)言的科技住宅無疑 是當今世界上最現(xiàn)代化的豪華住 宅，堪稱是智能建筑的經(jīng)典之作。豪宅內(nèi)共鋪設(shè)各種電纜52英里，房子內(nèi)所有的電器設(shè)備相互連接成了一個智能網(wǎng)絡(luò)。主人在回家途中便可在車內(nèi)利用計算機遙控家中的浴缸自動放水并調(diào)溫，作好一切迎接準備。房屋裝有氣象感知器，可以根據(jù)各項氣象指標，控制室內(nèi)的溫度和通風情況。走進大廳時，空調(diào)系統(tǒng)會將室溫調(diào)整至你感覺最舒適的溫度，音響系統(tǒng)也會針對你的喜好播放音樂，燈光系統(tǒng)自動調(diào)整照明顏色與強度，就連墻上的LCD顯示屏，也會自動顯示你喜愛的世界名畫或播放你上次只看到一半的影片。

第三十三頁，共五十四頁，編輯于2023年，星期一在住宅各處隨意走動時，地板能在6英寸的范圍內(nèi)跟蹤到人的足跡，在有人經(jīng)過時自動打開照明，離去時自動關(guān)閉。每個房間的溫度、照明、音響等等都將隨不同的設(shè)定自動調(diào)整。就算是在水池中，也會從池底“冒”出如影隨形的音樂。

第三十四頁，共五十四頁，編輯于2023年，星期一尤其有意思的是，比爾·蓋茨非常喜歡車道旁邊一棵140歲的老楓樹，所以就通過專門的監(jiān)視系統(tǒng)對其進行24小時的全方位監(jiān)控﹐一旦監(jiān)視系統(tǒng)發(fā)現(xiàn)它有任何干燥的跡象，灌溉系統(tǒng)就會啟動?！谌屙?，共五十四頁，編輯于2023年，星期一是什么尖端的科技系統(tǒng)使得蓋茨先生的豪宅擁有如此高的智能化水平？要等到哪一個世紀才能讓這樣現(xiàn)代化的住宅走入尋常百姓家？通過擴展今天的萬維網(wǎng)（即WWW，是WorldWideWeb的簡稱）就完全可以使這一夢想變?yōu)楝F(xiàn)實。這種擴展后的萬維網(wǎng)稱為語義網(wǎng)(SemanticWeb）。

第三十六頁，共五十四頁，編輯于2023年，星期一2.2URL

URL（UniformResourceLocator）主要是用來指定協(xié)議（如HTTP或FTP）以及對象、文檔、萬維網(wǎng)網(wǎng)頁或其他目標在Internet的位置和存取方式。一個URL被用來標識一個網(wǎng)絡(luò)路徑，可以通過互聯(lián)網(wǎng)在這個URL上訪問到對應(yīng)的資源。通信協(xié)議主機名所要訪問的網(wǎng)頁路徑及名稱

/111/welcome.htm主機名為。所要訪問的網(wǎng)頁路徑及名稱是/111/welcome.htm。第三十七頁，共五十四頁，編輯于2023年，星期一2.3FTPFTPFTP（FileTransferProtocol）是一種廣泛使用的文件傳輸協(xié)議，是快速、高效和可靠的信息傳輸方法。FTP是基于客戶/服務(wù)器模型的TCP/IP的應(yīng)用，所以只要在客戶端和服務(wù)器之間建立了TCP/IP連接，無論兩臺電腦的位置遠近、連接方式的異同以及使用的操作系統(tǒng)的異同，都能通過FTP協(xié)議進行文件的傳輸。第三十八頁，共五十四頁，編輯于2023年，星期一2.4IPIP地址用來標識連接到Internet上電腦的指定編號，每一個IP地址對應(yīng)一臺電腦，這與用電話號碼標識電話網(wǎng)絡(luò)中的電話相同。電腦識別的IP地址由32位二進制數(shù)值組成，電腦上以十進制數(shù)值來顯示，一組數(shù)值分為4部分，每一部分均不能大于255，中間用“.”分隔，如9第三十九頁，共五十四頁，編輯于2023年，星期一2.5域名域名就是常說的網(wǎng)址，它也具有惟一性，如百度的網(wǎng)址、網(wǎng)易的網(wǎng)址等就是一個域名，域名由漢語拼音或英文字符加上數(shù)字表示，在訪問網(wǎng)絡(luò)時，域名將通過域名服務(wù)器轉(zhuǎn)換成IP地址，這種轉(zhuǎn)換是在后臺完成的。第四十頁，共五十四頁，編輯于2023年，星期一2.6超級鏈接超級鏈接是網(wǎng)頁中最常用的元素之一，網(wǎng)頁就是通過無數(shù)的超級鏈接才能組成一個網(wǎng)站。超級鏈接可以鏈接到網(wǎng)站內(nèi)部頁面、對象，也可以鏈接到其他網(wǎng)站，大大方便了用戶在各個頁面對象之間實現(xiàn)跳轉(zhuǎn)。第四十一頁，共五十四頁，編輯于2023年，星期一2.7網(wǎng)站網(wǎng)站就是一個或多個網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當網(wǎng)頁發(fā)布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面。第四十二頁，共五十四頁，編輯于2023年，星期一2.7網(wǎng)站網(wǎng)站就是一個或多個網(wǎng)頁的集合。從廣義上講，網(wǎng)站就是當網(wǎng)頁發(fā)布到Internet上以后，能通過瀏覽器在Internet上訪問的頁面。網(wǎng)易搜狐新浪重大中國政府網(wǎng)中國稅務(wù)網(wǎng)中國日報南方周末聯(lián)眾游戲中國足球旅游咨詢第四十三頁，共五十四頁，編輯于2023年，星期一3網(wǎng)頁制作工具網(wǎng)頁設(shè)計軟件(1).FrontPage

FrontPage是Microsoft公司出品的入門級網(wǎng)頁編輯軟件。

(2).Dreamweaver

Dreamweaver是Macromedia公司推出的網(wǎng)頁制作產(chǎn)品，它是一個用于可視化設(shè)計與管理網(wǎng)頁和網(wǎng)站的工具，它與Macromedia公司的Flash、Fireworks配合使用，被稱為“網(wǎng)頁制作三劍客”。Dreamweaver是目前使用最多的網(wǎng)頁設(shè)計軟件。第四十四頁，共五十四頁，編輯于2023年，星期一網(wǎng)頁圖像與動畫制作工具制作網(wǎng)頁圖像的軟件種類繁多，大多數(shù)網(wǎng)頁設(shè)計人員選擇的是Fireworks或Photoshop。(1).Fireworks

Fireworks是Macromedia公司專門設(shè)計的Web圖形工具軟件，它可以用最少的步驟生成最小但質(zhì)量很高的JPEG和GIF圖像。(2).Photoshop

Photoshop是由Adobe公司出品的著名的圖形圖像處理軟件。

動畫制作軟件

網(wǎng)頁動畫制作中最常用的軟件非Flash莫屬。第四十五頁，共五十四頁，編輯于2023年，星期一4網(wǎng)站開發(fā)的工作流程在制作網(wǎng)頁的過程中，要遵循一定的順序才能協(xié)調(diào)分配整個制作過程的資源與進度。確定主題搜集材料規(guī)劃網(wǎng)站網(wǎng)站規(guī)劃推銷網(wǎng)站維護更新后期維護網(wǎng)站制作制作網(wǎng)站正式上傳測試評估圖網(wǎng)站設(shè)計的工作流程第四十六頁，共五十四頁，編輯于2023年，星期一4.1網(wǎng)站規(guī)劃1.確定網(wǎng)站的主題確定網(wǎng)站主題應(yīng)遵循以下原則：

（1）主題鮮明。一個網(wǎng)站必須要有一個明確的主題，在主題范圍內(nèi)做到內(nèi)容全而精。（2）明確設(shè)立網(wǎng)站的目的。（3）體現(xiàn)自己的個性。把自己的興趣、愛好盡情地發(fā)揮出來，突出自己的個性，辦出自己的特色

2.搜集材料圍繞主題搜集材料，作為自己制作網(wǎng)頁的素材。第四十七頁，共五十四頁，編輯于2023年，星期一3.規(guī)劃網(wǎng)站

⑴

主題欄的設(shè)置

突出主題。把主題欄放在最明顯的地方，讓瀏覽者更快、更明確的知道網(wǎng)站所表現(xiàn)的內(nèi)容。 設(shè)計一個“最近更新”欄目，讓瀏覽者一目了然的知道更新內(nèi)容。 欄目不要設(shè)置太多。⑵

目錄結(jié)構(gòu)設(shè)計

按欄目內(nèi)容建立子目錄。

每個目錄下分別為圖像文件創(chuàng)建一個子目錄image（圖像較少時可不創(chuàng)建）。目錄的層次不要太深，主要欄目最好能直接從首頁到達。盡量使用意義明確的非中文目錄。第四十八頁，共五十四頁，編輯于2023年，星期一⑶

顏色搭配網(wǎng)頁選用的背景應(yīng)和頁面的色調(diào)相協(xié)調(diào)，色彩搭配要遵循和諧、均衡、重點突出的原則。⑷網(wǎng)站標志Logo人教網(wǎng)Logo網(wǎng)易Logo搜狐Logo新浪Logo清華大學Logo263Logo第四十九頁，共五十四頁，編輯于2023年，星期一⑸

版面布局

版面布局一般應(yīng)遵循的原則是：突出重點、平衡和諧，將