第1章 網(wǎng)頁設(shè)計與制作概述.ppt

1、第1章 網(wǎng)頁設(shè)計與制作概述,Dreamweaver網(wǎng)頁設(shè)計與制作教程,主 編 楊 繼,中國水利水電出版社,第1章 網(wǎng)頁設(shè)計與制作概述,第1章 網(wǎng)頁設(shè)計與制作概述,第1章 網(wǎng)頁設(shè)計與制作概述,內(nèi)容提要 網(wǎng)絡(luò)基礎(chǔ)知識 網(wǎng)頁設(shè)計基礎(chǔ)知識 HTML語言基礎(chǔ) 網(wǎng)站的設(shè)計流程,第1章 網(wǎng)頁設(shè)計與制作概述,Internet 也叫“因特網(wǎng)”它是一個開放的、互連的、遍及全球的計算機網(wǎng)絡(luò)，是一個能使世界上各種不同類型的計算機之間交換各種數(shù)據(jù)信息的通信媒介,第1章 網(wǎng)頁設(shè)計與制作概述,1.1 網(wǎng)絡(luò)基礎(chǔ)知識,計算機網(wǎng)絡(luò) 計算機網(wǎng)絡(luò)是將分布在不同物理位置的具有獨立功能的計算機系統(tǒng)，利用通信設(shè)備和線路相互連接起來，在網(wǎng)絡(luò)

2、協(xié)議和軟件的支持下進行數(shù)據(jù)通信、實現(xiàn)資源共享的計算機系統(tǒng)的集合。,第1章 網(wǎng)頁設(shè)計與制作概述,1.1 網(wǎng)絡(luò)基礎(chǔ)知識,50年代 中心面向終端,第一代計算機網(wǎng)絡(luò)中心面向終端,第1章 網(wǎng)頁設(shè)計與制作概述,1.1 網(wǎng)絡(luò)基礎(chǔ)知識,以共享為目的的計算機網(wǎng)絡(luò)。 典型代表ARPANET,第二代計算機網(wǎng)絡(luò)多主機互聯(lián)的計算機網(wǎng)絡(luò),20世紀 60年代,第1章 網(wǎng)頁設(shè)計與制作概述,1.1 網(wǎng)絡(luò)基礎(chǔ)知識,第三代計算機網(wǎng)絡(luò) 具有統(tǒng)一的網(wǎng)絡(luò)體系結(jié)構(gòu)的開放標(biāo)準(zhǔn)化網(wǎng)絡(luò),1984年，國際標(biāo)準(zhǔn)化組織ISO正式頒布了一個開放系統(tǒng)互連參考模型，簡稱OSI模型。該模型共分七個層次，有時也稱為OSI七層模型。,第1章 網(wǎng)頁設(shè)計與制作概述,

3、1.1 網(wǎng)絡(luò)基礎(chǔ)知識,第四代計算機網(wǎng)絡(luò)以因特網(wǎng)為代表的互聯(lián)網(wǎng),特點：互聯(lián)、高速和更為廣泛的應(yīng)用,80年代局域網(wǎng)迅速發(fā)展,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.2 WWW簡介,WWW萬維網(wǎng)（World Wide Web環(huán)球信息網(wǎng)，萬維網(wǎng)） WWW不是傳統(tǒng)意義上的物理網(wǎng)絡(luò)，是基于Internet的、由軟件和協(xié)議組成的、以超文本文件為基礎(chǔ)的全球分布式信息網(wǎng)絡(luò)，所以稱為萬維網(wǎng) WWW的系統(tǒng)結(jié)構(gòu)采用的是客戶/服務(wù)器結(jié)構(gòu)模式 瀏覽者的主機是客戶機，提供信息的主機是服務(wù)器。,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.2 WWW簡介,WWW萬維網(wǎng)（World Wide Web環(huán)球信息網(wǎng)，萬維網(wǎng)） 客戶機上運行的是IE

4、之類的瀏覽器程序 瀏覽器程序的主要作用就是對HTML標(biāo)記語言進行解釋并且將它顯示在瀏覽器窗口中。 在Web服務(wù)器上，運行的是WWW服務(wù)器程序 可以是Windows下的IIS，也可以是Linux下的Apache或其它的WWW服務(wù)器程序。,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.2 WWW簡介,WWW萬維網(wǎng)的工作流程 靜態(tài)網(wǎng)頁,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.2 WWW簡介,WWW萬維網(wǎng)的工作流程 動態(tài)網(wǎng)頁,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.3統(tǒng)一資源定位器,統(tǒng)一資源定位器（URL，Uniform Resource Locator） URL的格式為： :/ ftp:/ 大部分主機會提供一個缺省的

5、文件名，如 index.html、default.html等。,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.3統(tǒng)一資源定位器,表1.3 部分傳輸協(xié)議的含義,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.4 IP地址與域名,Internet上計算機的地址有兩種表示形式： IP地址和域名。 IP地址由32位二進制數(shù)字組成 國際通行一種“點分十進制表示法” 例 10110110 11011001 10111110 01101101 182 217 190 109,每組取值范圍0-255,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.4 IP地址與域名,IP地址分為5類：A、B、C、D、E。 A類（ -127.25

6、5.255.255） Internet有126個A類地址，每個A類地址可連接16387064臺主機 B類（-55） 每個B類地址可連接64516臺主機，Internet有16256個B類地址； C類（-223. 255.255.255） 每個C類地址可連接254臺主機，Internet有2054512個C類地址。,第1章 網(wǎng)頁設(shè)計與制作概述,0,1,1,0,1,0,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.4 IP地址與域名,DNS域名服務(wù)系統(tǒng)，是因特網(wǎng)中一項核心服務(wù)， 它將域名和IP地址相互映射到一個分布式數(shù)據(jù)系統(tǒng)，通過該系統(tǒng)將域名與I

7、P地址一一對應(yīng)，并將域名映射成IP地址，實現(xiàn)快速連接站點的目的。 中山大學(xué)網(wǎng)址：,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.4 IP地址與域名,域名就是Internet上主機的名字，它采用層次結(jié)構(gòu)，每一層構(gòu)成一個子域名，級別從左到右逐漸增高，并用圓點隔開，表現(xiàn)形式為： 主機名.n級子域名.二級子域名.頂級域名. （通常2n5）,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.4 IP地址與域名,表1.1 部分國家和地區(qū)的頂層域名,第1章 網(wǎng)頁設(shè)計與制作概述,1.1.4 IP地址與域名,表1.2 國際通用頂級域名,第1章 網(wǎng)頁設(shè)計與制作概述,1.2網(wǎng)頁設(shè)計的基礎(chǔ)知識,構(gòu)成網(wǎng)頁的基本元素 文本、圖片、動畫、聲音、鏈

8、接、表單等。,圖片,鏈接,表單,文本,GIF、JPEG/JPG和PNG,互功能的重要元素,第1章 網(wǎng)頁設(shè)計與制作概述,1.2.2網(wǎng)頁制作和美化的工具,FrontPage FrontPage是微軟公司開發(fā)的網(wǎng)頁制作工具。 Dreamweaver Dreamweaver是Macromedia公司出品的網(wǎng)頁制作工具，可以說是當(dāng)前最流行的網(wǎng)頁編輯器。 它支持所見即所得的方式編輯網(wǎng)頁，有強大的站點管理功能，便于站點的維護和管理； 支持最新的HTML語言的擴展功能； 支持層技術(shù)，還提供了層動畫； 內(nèi)置強大的交互式網(wǎng)頁制作功能。,第1章 網(wǎng)頁設(shè)計與制作概述,1.2.2網(wǎng)頁制作和美化的工具,Photoshop

9、 Photoshop是Adobe公司最著名的圖像處理軟件，是圖像制作首選工具。它對圖像的處理方式多樣，特別是對圖像的濾鏡處理，可以制作出許多特殊的圖像效果。Photoshop CS版提供的功能可以輕松地將圖像進行切片等操作，方便網(wǎng)頁使用，支持將圖像存儲為網(wǎng)頁支持的GIF、JPEG、PNG等格式。 Fireworks Fireworks是Macromedia公司專門為制作網(wǎng)頁圖像設(shè)計開發(fā)的軟件。它也有一個集成的網(wǎng)頁圖像開發(fā)環(huán)境。具有同時按位圖圖形和矢量圖形的模式進行編輯的特點。Fireworks也可以制作簡單的翻頁型動畫。,第1章 網(wǎng)頁設(shè)計與制作概述,1.2.2網(wǎng)頁制作和美化的工具,Flash

10、Flash是Macromedia公司專門為網(wǎng)頁動畫設(shè)計開發(fā)的軟件。用該軟件制作的動畫采用的“流”控制技術(shù)，可以一邊下載動畫，一邊播放。 在Flash中，大量的圖形是矢量圖形，因此，用Flash制作的圖形在放大與縮小的操作中沒有失真，而且用它制作的動畫文件所占的體積較小，這些都是Flash特有的優(yōu)點。 另外，F(xiàn)lash也提供了動作屬性的功能，通過動作屬性可以輕松地完成一些特殊的控制以及進行一些交互處理，不用編寫一行代碼也可以完成許多精彩的控制效果。,第1章 網(wǎng)頁設(shè)計與制作概述,1.2.3網(wǎng)頁的色彩搭配,第1章 網(wǎng)頁設(shè)計與制作概述,1.2.3網(wǎng)頁的色彩搭配,第1章 網(wǎng)頁設(shè)計與制作概述,1.2.3網(wǎng)

11、頁的色彩搭配,網(wǎng)頁色彩搭配的原則： 色彩的鮮明性 色彩的獨特性 色彩的聯(lián)想性 色彩搭配的合理性 色彩的藝術(shù)性,第1章 網(wǎng)頁設(shè)計與制作概述,1.2.3網(wǎng)頁的色彩搭配,網(wǎng)頁色彩搭配的技巧： 同種色彩搭配 鄰居色彩搭配 對比色彩搭配 暖色色彩搭配 冷色色彩搭配 有主色的混合色彩搭配。,第1章 網(wǎng)頁設(shè)計與制作概述,網(wǎng)站色彩的使用,藍色調(diào)為主，加上白色和紅色，強調(diào)權(quán)威與真實,第1章 網(wǎng)頁設(shè)計與制作概述,網(wǎng)站色彩的使用,橙色為主，白色為輔，具有輕快，時尚的效果,第1章 網(wǎng)頁設(shè)計與制作概述,網(wǎng)站色彩的使用,綠色為主，白色為輔，產(chǎn)生舒適、優(yōu)雅、適于閱讀的氣氛,第1章 網(wǎng)頁設(shè)計與制作概述,網(wǎng)站色彩的使用,紅色為

12、主，產(chǎn)生熱情、活力的感覺，充滿歡樂的氣氛,第1章 網(wǎng)頁設(shè)計與制作概述,1.3HTML語言基礎(chǔ),HTML是網(wǎng)頁主要的組成部分，HTML網(wǎng)頁文件是組成網(wǎng)站的基本單位。每個網(wǎng)頁都是由HTML語言組成。 HTML（HyperText Markup Language，超文本標(biāo)記語言） 所謂超文本，就是可以加入圖片、聲音、動畫、視頻、鏈接等內(nèi)容。 HTML文件可以直接由瀏覽器IE解釋執(zhí)行，無須編譯。 HTML跨平臺（Windows、Linux）。 HTML文件即根據(jù)HTML語法規(guī)則寫出來的文件。一般擴展名為.html或.htm,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.1HTML語言簡介,HTML語言的語法規(guī)則

13、 單標(biāo)簽：單獨使用就能完整地表達意思。 換行，插入一條水平線。 雙標(biāo)簽：由“始標(biāo)簽”和“尾標(biāo)簽”構(gòu)成，成對出現(xiàn)。 語法格式：內(nèi)容，如文字加粗標(biāo)簽文字 標(biāo)簽的屬性 語法格式： 如,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.2HTML文檔的基本結(jié)構(gòu),HTML文檔的基本結(jié)構(gòu),在最外層， 表示這對標(biāo)記間的內(nèi)容是 HTML文檔。,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.3HTML的常用標(biāo)記及其用法,標(biāo)題標(biāo)記,該標(biāo)記主要用于 定義文章內(nèi)章節(jié) 標(biāo)題的顯示格式。 其中“i”是數(shù)字1到6中 任意一個，表示尺寸。,該標(biāo)記主要用于 定義文章內(nèi)章節(jié) 標(biāo)題的顯示格式。 其中“i”是數(shù)字1到6中 任意一個，表示尺寸。,該標(biāo)記主要用

14、于 定義文章內(nèi)章節(jié) 標(biāo)題的顯示格式。 其中“i”是數(shù)字1到6中 任意一個，表示尺寸。,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.3HTML的常用標(biāo)記及其用法,文本標(biāo)記 下劃線標(biāo)記、粗體字標(biāo)記、斜體字標(biāo)記。,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.3HTML的常用標(biāo)記及其用法,段落標(biāo)記,Align屬性定義 新開始的一行內(nèi)容在 頁面中的對齊位置， 屬性值可以是left、 Center、right。,Align屬性定義 新開始的一行內(nèi)容在 頁面中的對齊位置， 屬性值可以是left、 Center、right。,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.3HTML的常用標(biāo)記及其用法,強制換行標(biāo)記,第1章 網(wǎng)頁設(shè)計與制

15、作概述,1.3.3HTML的常用標(biāo)記及其用法,列表標(biāo)記、,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.3HTML的常用標(biāo)記及其用法,表格標(biāo)記,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.3HTML的常用標(biāo)記及其用法,表1.1 表格標(biāo)簽,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.3HTML的常用標(biāo)記及其用法,圖像標(biāo)記 ,第1章 網(wǎng)頁設(shè)計與制作概述,1.3.3HTML的常用標(biāo)記及其用法,超鏈接標(biāo)記,指明該處是一個鏈接， href表明鏈接目標(biāo)。,指明該處是一個鏈接， href表明鏈接目標(biāo)。,第1章 網(wǎng)頁設(shè)計與制作概述,從上面的介紹中可以看到，如果完全用HTML代碼編寫網(wǎng)頁是一件非常辛苦的事情。 首先是工作量大，每一個細小

16、的地方都要編寫， 其次需要記憶大量的HTML標(biāo)記符，另外，還不知道書寫的代碼在瀏覽器中顯示出來到底是什么模樣，必須在瀏覽器中才可以看到，往往需要反復(fù)修改、保存、瀏覽才能達到預(yù)想的效果，效率很低。 因此人們開發(fā)了很多的工具軟件來設(shè)計網(wǎng)頁。它們特點之一就是以所見即所得的方式來編寫網(wǎng)頁。Macromedia公司的Dreamweaver是眾多可視化網(wǎng)頁編輯工具中的佼佼者，據(jù)統(tǒng)計，世界上70的網(wǎng)站都是用它開發(fā)的.,第1章 網(wǎng)頁設(shè)計與制作概述,1.4 網(wǎng)站建設(shè)的流程,網(wǎng)站的功能可以有很多，包括各類宣傳網(wǎng)站、資料庫、信息或商務(wù)平臺等。在建設(shè)網(wǎng)站前，首先應(yīng)該有一個整體的規(guī)劃和目標(biāo)。具體的工作流程一般可以通過以

17、下步驟實現(xiàn)。 1.4.1 整體規(guī)劃 在網(wǎng)頁設(shè)計前，首先要對所要制作的網(wǎng)站的特點進行分析并選擇相應(yīng)的設(shè)計思路，從而確定主題與設(shè)計風(fēng)格。 1以宣傳為目的的網(wǎng)站 要求設(shè)計美觀，能夠在網(wǎng)站視覺效果上表達創(chuàng)意和使所要宣傳的內(nèi)容一目了然。如各類企業(yè)的宣傳型網(wǎng)站，就需要表現(xiàn)該企業(yè)的企業(yè)文化和特色。這種網(wǎng)站特點是頁面大量運用圖片和動畫。,第1章 網(wǎng)頁設(shè)計與制作概述,2以信息傳遞為目的的網(wǎng)站 主要強調(diào)信息量和信息搜索的方便快捷，主要以文本為表現(xiàn)形式。如搜狐，網(wǎng)易等門戶網(wǎng)站等。 3其他功能性網(wǎng)站 強調(diào)網(wǎng)站的功能,具有一定的用戶針對性和功能針對性。如各類商務(wù)網(wǎng)站（淘寶，ebay等）；各類學(xué)習(xí)網(wǎng)站，網(wǎng)絡(luò)詞典，網(wǎng)絡(luò)圖書

18、館。 主題確定以后，就要根據(jù)網(wǎng)站的功能來選擇網(wǎng)站所使用的技術(shù)。首先要確定Web服務(wù)器平臺，是采用Windows的IIS，還是Linux的Apache；然后要根據(jù)網(wǎng)站功能的復(fù)雜程度決定是采用靜態(tài)網(wǎng)站還是動態(tài)網(wǎng)站。對于動態(tài)網(wǎng)站，還要考慮使用何種數(shù)據(jù)庫及采用什么技術(shù)來支持。,第1章 網(wǎng)頁設(shè)計與制作概述,1.4.2 網(wǎng)頁設(shè)計與制作,網(wǎng)站的前期工作完成后，就需要按確定的主題進行資料和素材的搜集，采用網(wǎng)頁制作工具去設(shè)計并完成每一個網(wǎng)頁的制作。網(wǎng)頁設(shè)計工作主要包括：網(wǎng)站的形象設(shè)計、布局與版面的設(shè)計和頁面制作與程序設(shè)計。 網(wǎng)站的形象設(shè)計：包括網(wǎng)站的標(biāo)志設(shè)計、中英文設(shè)計、網(wǎng)站的主體顏色及字體設(shè)計 文字是網(wǎng)頁中非

19、常重要的頁面元素，網(wǎng)站內(nèi)容是通過文字信息來傳遞的。最適合網(wǎng)頁正文顯示的字號大小為9像素或12像素。字體的選擇最好是采用Windows自帶字體，如果確實要使用特殊的字體，就要將文字制成圖像，插入到頁面中去，否則有可能在瀏覽器內(nèi)無法正常顯示。,第1章 網(wǎng)頁設(shè)計與制作概述,常見的頁面布局技術(shù)有三種： 一是表格布局技術(shù)，方法是將各種網(wǎng)頁元素放到無邊框的表格中，使用表格來對他們進行定位； 二是通過CSS技術(shù)進行完全地定位文本和圖像； 三是利用DIVCSS布局技術(shù)可以較好地做到信息結(jié)構(gòu)清晰、內(nèi)容和表現(xiàn)相分離。,第1章 網(wǎng)頁設(shè)計與制作概述,網(wǎng)站頁面版式可以分為兩大類： 一類稱為“形象頁面”，這種頁面多用于企

20、業(yè)的形象宣傳，它的特點是頁面以圖像、Flash為主，文字內(nèi)容較少； 另一類稱為“內(nèi)容頁面”，多數(shù)信息資訊類網(wǎng)站大多采用此版式，其特點是信息多，根據(jù)信息內(nèi)容分類來劃分頁面結(jié)構(gòu)，最常見的結(jié)構(gòu)布局方式有“同”字形、“廠”字形、左右框架型和L型等。,第1章 網(wǎng)頁設(shè)計與制作概述,LOGO欣賞,第1章 網(wǎng)頁設(shè)計與制作概述,版面設(shè)計,網(wǎng)頁版面布局可按創(chuàng)意草案、粗略布局、最后定案 三個步驟來進行。,第1章 網(wǎng)頁設(shè)計與制作概述,幾種常見的頁面布局樣式：,“廠”字型,主菜單以及橫條網(wǎng)站標(biāo)志+廣告條,主 菜 單,顯 示內(nèi)容,第1章 網(wǎng)頁設(shè)計與制作概述,幾種常見的頁面布局樣式：,“口”字型,主菜單,主要內(nèi)容,友情鏈接

21、等,第1章 網(wǎng)頁設(shè)計與制作概述,幾種常見的頁面布局樣式：,自由式，又稱POP布局,頁面布局像一張宣傳海報，以一張精美圖片作為頁面的設(shè)計中心，菜單欄目自由擺放。,第1章 網(wǎng)頁設(shè)計與制作概述,測試項目 1. 鏈接測試 主要看網(wǎng)頁中是否有超鏈接掉鏈的情況。 2. 外觀測試 3. 速度測試 速度越快越好。 4. 腳本和程序測試 測試頁面中的JavaScript以及CGI程序是否能正常工作。,返回,第1章 網(wǎng)頁設(shè)計與制作概述,1.4.4 網(wǎng)頁的上傳與發(fā)布,網(wǎng)站制作完成后，就可以利用FTP等方式上傳到服務(wù)器并發(fā)布到互聯(lián)網(wǎng)上了。 網(wǎng)站空間的獲取一般有自設(shè)服務(wù)器、租用網(wǎng)頁空間或虛擬主機、申請免費網(wǎng)頁空間三種方法。 同時，還可以通過“中國互聯(lián)網(wǎng)絡(luò)信息中心”(CNNIC)的域名注冊系統(tǒng)申請諸如.com、.cn、.net等域名，詳細的申請方式可以到CNNIC網(wǎng)站查詢。 利用域名可以使瀏覽者更容易記住你的網(wǎng)站。網(wǎng)頁上傳以后，還必須保持內(nèi)容的經(jīng)常性更新，這樣才能不斷吸引訪問者點擊瀏覽。,第1章 網(wǎng)頁設(shè)計與制作概述,1.4 網(wǎng)站建設(shè)的流程,網(wǎng)頁和網(wǎng)站 網(wǎng)站是網(wǎng)頁的集合，是一個整體，其中包括一個首頁和若干個網(wǎng)頁。網(wǎng)站設(shè)計者先把整個網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后再分別制作各個網(wǎng)頁。大多數(shù)網(wǎng)站為網(wǎng)站瀏覽者提供一個首頁，首頁再鏈接多個網(wǎng)頁。一般來說，一個網(wǎng)站是由很多網(wǎng)頁構(gòu)建而成的。 一般網(wǎng)站,第1章 網(wǎng)頁設(shè)計與制作