第一講網(wǎng)頁設(shè)計(jì)概述

第一講網(wǎng)頁設(shè)計(jì)概述第1頁，課件共54頁，創(chuàng)作于2023年2月本門課程教材

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

你的目標(biāo)由你選擇訂SMART的目標(biāo)Specific確定的Measurable能夠衡量的Achievable可達(dá)成的Realistic現(xiàn)實(shí)的Time時(shí)間限制行動(dòng)目標(biāo)實(shí)現(xiàn)現(xiàn)在成功即實(shí)現(xiàn)自己所設(shè)定的目標(biāo)第8頁，課件共54頁，創(chuàng)作于2023年2月掌握網(wǎng)頁編程基礎(chǔ)html相關(guān)知識(shí)知識(shí)目標(biāo)

熟練掌握網(wǎng)頁制作軟件Dreamweaver的基本操作和使用技能掌握網(wǎng)頁頁面布局的各種方法掌握表單網(wǎng)頁制作方法掌握?qǐng)D片與多媒體文件的添加、調(diào)整掌握建立各種形式的超級(jí)鏈接的方法CSS層疊樣式表的應(yīng)用理解行為的作用，掌握設(shè)置行為的方法第9頁，課件共54頁，創(chuàng)作于2023年2月

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

學(xué)會(huì)通過網(wǎng)站、書籍、素材光盤等方式收集所需的文字資料、圖像資料、Flash動(dòng)畫和網(wǎng)頁特效等。培養(yǎng)制作靜態(tài)網(wǎng)頁的能力培養(yǎng)設(shè)計(jì)網(wǎng)站的綜合能力培養(yǎng)策劃能力、色彩感悟能力；充分培養(yǎng)和提高動(dòng)手能力第10頁，課件共54頁，創(chuàng)作于2023年2月

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

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

第16頁，課件共54頁，創(chuàng)作于2023年2月HTMLHTML通過標(biāo)記符（Tag）標(biāo)記網(wǎng)頁的各個(gè)組成部分，通過在網(wǎng)頁中添加標(biāo)記符，指示瀏覽器如何顯示網(wǎng)頁內(nèi)容。瀏覽器按順序閱讀網(wǎng)頁文件（HTML文件）。任何網(wǎng)頁頁面都是以HTML語言為核心和基礎(chǔ)的。第17頁，課件共54頁，創(chuàng)作于2023年2月網(wǎng)頁的分類按所處位置分類按網(wǎng)頁在網(wǎng)站中所處的位置可將網(wǎng)頁分為主頁和子頁兩類。第18頁，課件共54頁，創(chuàng)作于2023年2月按表現(xiàn)形式分類

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

第20頁，課件共54頁，創(chuàng)作于2023年2月動(dòng)態(tài)網(wǎng)頁動(dòng)態(tài)網(wǎng)頁中除了基本網(wǎng)頁中的元素外，還包括一些程序，這些應(yīng)用程序需要瀏覽器與服務(wù)器之間發(fā)生交互行為。

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

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

1.文本

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

2.圖像

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

第24頁，課件共54頁，創(chuàng)作于2023年2月3.超級(jí)鏈接

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

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

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

第25頁，課件共54頁，創(chuàng)作于2023年2月6.表單

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

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

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

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

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

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

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

(2).Dreamweaver

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

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

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

動(dòng)畫制作軟件

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

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

2.搜集材料圍繞主題搜集材料，作為自己制作網(wǎng)頁的素材。第47頁，課件共54頁，創(chuàng)作于2023年2月3.規(guī)劃網(wǎng)站

⑴

主題欄的設(shè)置

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

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

按欄目?jī)?nèi)容建立子目錄。

每個(gè)目錄下分別為圖像文件創(chuàng)建一個(gè)子目錄image（圖像較少時(shí)可不創(chuàng)建）。目錄的層次不要太深，主要欄目最好能直接從首頁到達(dá)。盡量使用意義明確的非中文目錄。第48頁，課件共54頁，創(chuàng)作于2023年2月⑶

顏色搭配網(wǎng)頁選用的背景應(yīng)和頁面的色調(diào)相協(xié)調(diào)，色彩搭配要遵循和諧、均衡、重點(diǎn)突出的原則。⑷網(wǎng)站標(biāo)志Logo人教網(wǎng)Logo網(wǎng)易Logo搜狐Logo新浪Logo清華大學(xué)Logo263Logo第49頁，課件共54頁，創(chuàng)作于2023年2月⑸

版面布局

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