網(wǎng)頁設(shè)計(jì)第1章

網(wǎng)頁設(shè)計(jì)與制作課程知識(shí)與就業(yè)分析在互聯(lián)網(wǎng)發(fā)展的今天，網(wǎng)頁已經(jīng)成為人們?nèi)粘Ｉ钪胁豢扇鄙俚囊徊糠?，而幾乎所有的企業(yè)都想要建立一個(gè)網(wǎng)站。網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)也已成為當(dāng)今社會(huì)上一種非常熱門的技術(shù)。課程知識(shí)與就業(yè)分析在最近兩年我們對(duì)IT市場(chǎng)進(jìn)行調(diào)查后發(fā)現(xiàn)，隨著整個(gè)社會(huì)進(jìn)入信息化高速發(fā)展的時(shí)期，各行各業(yè)的企事業(yè)單位提供了大量的相關(guān)崗位，針對(duì)有網(wǎng)頁設(shè)計(jì)師、網(wǎng)絡(luò)維護(hù)員、網(wǎng)絡(luò)管理員、軟件工程師、網(wǎng)站運(yùn)營經(jīng)理等崗位群。課程介紹《網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)》是我院計(jì)算機(jī)專業(yè)的一門核心課程，也是一門集理論與實(shí)踐為一體的綜合應(yīng)用課程，主要培養(yǎng)學(xué)生的網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)的綜合技能與素質(zhì)，提高學(xué)生的職業(yè)行為能力。課程目標(biāo)通過本課程的學(xué)習(xí)，使學(xué)生了解網(wǎng)頁設(shè)計(jì)的基本概念和基礎(chǔ)知識(shí)，了解網(wǎng)頁設(shè)計(jì)與網(wǎng)站建設(shè)流程，熟練應(yīng)用網(wǎng)頁制作常用軟件，掌握網(wǎng)頁設(shè)計(jì)與制作技術(shù)，全面掌握網(wǎng)站建設(shè)、管理和維護(hù)技術(shù)。了解網(wǎng)站技術(shù)和其他學(xué)科領(lǐng)域的相互聯(lián)系和相互促進(jìn)的關(guān)系，為后續(xù)課程的學(xué)習(xí)和工作奠定理論和實(shí)踐基礎(chǔ)。課程內(nèi)容考核方式《網(wǎng)頁設(shè)計(jì)與制作》這門課面向培養(yǎng)學(xué)生實(shí)踐動(dòng)手能力，因此我們的考核是面向培養(yǎng)學(xué)生能力的考核方式，期末綜合成績(jī)由以下幾個(gè)部分組成：最終成績(jī)=平時(shí)成績(jī)+實(shí)驗(yàn)成績(jī)+實(shí)驗(yàn)報(bào)告成績(jī)（+課程設(shè)計(jì)成績(jī)）

按時(shí)上課，注意課堂紀(jì)律獨(dú)立完成作業(yè)和實(shí)驗(yàn)報(bào)告上機(jī)課不得做聊天、看電影、上網(wǎng)、打游戲等與學(xué)習(xí)無關(guān)的事情課程要求第一章網(wǎng)頁與網(wǎng)站基礎(chǔ)知識(shí)網(wǎng)頁與網(wǎng)站的概念網(wǎng)頁制件工具網(wǎng)頁的設(shè)計(jì)網(wǎng)站的規(guī)劃1.1網(wǎng)頁與網(wǎng)站的概念I(lǐng)nternet的概述WWW網(wǎng)頁與網(wǎng)站域名與IP地址1.1.1Internet的概述Internet是由成千上萬個(gè)網(wǎng)絡(luò)、上億臺(tái)計(jì)算機(jī)通過特定的網(wǎng)絡(luò)協(xié)議相互連接而成的全球計(jì)算機(jī)網(wǎng)絡(luò)，是提供信息資源查詢和信息資源共享的全球最大的信息資源平臺(tái)。

Internet所提供的服務(wù)主要是WWW、E-mail、FTP、網(wǎng)上傳呼、在線聊天、網(wǎng)上購物、旅行預(yù)訂等等，而其中WWW和E-mail是最常用的服務(wù)。1.1.2WWWWWW(WorldWideWeb)簡(jiǎn)稱為Web或萬維網(wǎng)，客戶端只要通過“瀏覽器”（Browser）就可以非常方便地訪問Internet上的服務(wù)器端，迅速地獲得所需的信息。如圖所示。Internet瀏覽器WEB服務(wù)器HTTP網(wǎng)絡(luò)協(xié)議●用戶通過瀏覽器訪問WEB服務(wù)器的網(wǎng)頁，那么如何查找這些網(wǎng)頁呢？通過在瀏覽器的地址欄中輸入網(wǎng)址，即URL，統(tǒng)一資源定位器?！馯RL的一般格式如下：〈通信協(xié)議〉：//〈主機(jī)域名〉/〈路徑〉/〈文件名〉其中，〈通信協(xié)議〉指提供該文件的服務(wù)器所使用的通信協(xié)議；〈主機(jī)域名〉指上述服務(wù)器所在主機(jī)的域名；〈路徑〉指該文件在主機(jī)上的路徑；〈文件名〉指文件的名稱。

例如/nyist_new/frame.html其中，http是WWW服務(wù)器與WWW客戶之間遵循的通信協(xié)議。www.用來標(biāo)識(shí)該文件存儲(chǔ)在南陽理工的WWW服務(wù)器上，nyist_new是文件所在主機(jī)上的存儲(chǔ)路徑，frame.html這個(gè)文件的名稱。1.1.3網(wǎng)頁與網(wǎng)站◆構(gòu)建WWW的基本單位是網(wǎng)頁。網(wǎng)頁中包含所謂的“超鏈接”，通過已經(jīng)定義好的關(guān)鍵字和圖形，只要用鼠標(biāo)輕輕一點(diǎn)，就可以自動(dòng)跳轉(zhuǎn)到相應(yīng)的其它文件，獲得相應(yīng)的信息，從而實(shí)現(xiàn)網(wǎng)頁之間的鏈接，從而構(gòu)成了WWW的縱橫交織的網(wǎng)狀結(jié)構(gòu)。◆通過超鏈接連接起來的一系列邏輯上可以視為一個(gè)整體的頁面，則叫做網(wǎng)站。瀏覽器是如何訪問某個(gè)網(wǎng)頁或網(wǎng)站的呢？1.1.4域名與IP地址在Internet上的每臺(tái)網(wǎng)絡(luò)設(shè)備都要有一個(gè)唯一的地址才能被訪問到，這個(gè)地址就是IP地址。IP地址是由32bits的二進(jìn)制數(shù)值構(gòu)成，分成4組，轉(zhuǎn)化為十進(jìn)制用點(diǎn)分隔。比如：00

為了使互聯(lián)網(wǎng)上的電腦主機(jī)在通信時(shí)能夠相互識(shí)別，每臺(tái)主機(jī)都分配一個(gè)能表示其位置的IP（InternetProtocol）地址，這如同公用電話網(wǎng)中電話的號(hào)碼一樣。

IP地址是由專門的互聯(lián)網(wǎng)機(jī)構(gòu)來分配。IP地址具有惟一性。Internet的域名管理

DNS域名系統(tǒng)是一種幫助人們?cè)贗nternet上用字符來惟一識(shí)別自己的計(jì)算機(jī)，并保證主機(jī)名（域名）和IP地址一一對(duì)應(yīng)的網(wǎng)絡(luò)服務(wù)。DNS簡(jiǎn)介域名空間

Internet域名具有層次結(jié)構(gòu)。整個(gè)Internet網(wǎng)被劃分成幾個(gè)頂級(jí)域。InterNIC采用兩種方法進(jìn)行分類：一種方法是按組織模式進(jìn)行劃分；另一種方法是按地理模式進(jìn)行劃分。按組織模式進(jìn)行劃分頂級(jí)域名域名類型com商業(yè)機(jī)構(gòu)edu教育機(jī)構(gòu)gov政府內(nèi)容int國際組織mil軍事部門net網(wǎng)絡(luò)支持中心org各種非贏利性組織/國家代碼各個(gè)國家比如：cn代表中國,us代表美國，ca代表加拿大，jp代表日本按地理模式進(jìn)行劃分主機(jī)域名的一般格式為：四級(jí)域名.三級(jí)域名.二級(jí)域名.頂級(jí)域名比如：這個(gè)域名代表我們學(xué)校的一臺(tái)www服務(wù)器，它和惟一的IP地址對(duì)應(yīng)30；www是一臺(tái)主機(jī)名，由sdsy域管理，Sdsy表示我們學(xué)院屬于山西大學(xué)sxu中國教育領(lǐng)域edu中國cn的一部分1.2網(wǎng)頁制作工具1.2.1網(wǎng)頁編輯工具1、FrontPage2、Dreamweaver1.2.2網(wǎng)頁圖像與動(dòng)畫制作工具1、Flash2、Fireworks3、PhotoShop4、PhotoImpact5、COOL3D6、UleadGIFAnimator視覺元素

文字色彩圖形圖像動(dòng)畫音樂視頻裝飾物

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁認(rèn)知網(wǎng)頁設(shè)計(jì)——網(wǎng)頁認(rèn)知架構(gòu)元素（功能模塊）

網(wǎng)站名稱（Logo）廣告條（Banner)導(dǎo)航條(Menu)新聞(News)搜索(Search)友情鏈接(Links)郵件列表(Maillist)計(jì)數(shù)器(Count)版權(quán)(Copyright)

1.3網(wǎng)頁的設(shè)計(jì)網(wǎng)頁主題網(wǎng)頁的文字網(wǎng)頁的色彩網(wǎng)頁版式和布局網(wǎng)頁導(dǎo)航設(shè)計(jì)1.3.1網(wǎng)頁主題

網(wǎng)頁的主題指網(wǎng)頁所要表現(xiàn)的最主要的思想內(nèi)涵，可以說是網(wǎng)頁的靈魂。主題的概念是很模糊的，它是一種約束，是同一站點(diǎn)中各個(gè)頁面于五彩繽紛中體現(xiàn)出統(tǒng)一風(fēng)格的約束；它也是一種力量，是將各個(gè)設(shè)計(jì)者的作品有機(jī)結(jié)合起來的力量。主題必須與Web頁面主要推銷或展示的產(chǎn)品或服務(wù)緊密相關(guān)，同時(shí)它又必須有相當(dāng)?shù)奈Α?.3.2網(wǎng)頁的文字

文字是網(wǎng)頁最主要的表達(dá)形式，盡管圖形使得網(wǎng)頁變得五彩繽紛，但大多數(shù)瀏覽者大部分時(shí)間仍將注意力集中在頁面中的文字上面，他們總是首先瀏覽文字內(nèi)容，而甚少關(guān)心其他頁面元素，甚至對(duì)導(dǎo)航系統(tǒng)也是如此。所以，給瀏覽者一個(gè)親和的文字界面是必要的。文字藝術(shù)與文字應(yīng)用

同一頁面采用三種字體以內(nèi)字型大小變化在3-6個(gè)層次以內(nèi)大標(biāo)題﹑小內(nèi)文﹑粗標(biāo)題﹑細(xì)內(nèi)文應(yīng)用閃爍字效應(yīng)控制得當(dāng)特殊字體應(yīng)用時(shí)應(yīng)使用圖片格式色彩與背景應(yīng)拉開層次

文字藝術(shù)與文字應(yīng)用

同一頁面采用三種字體以內(nèi)字型大小變化在3-6個(gè)層次以內(nèi)大標(biāo)題﹑小內(nèi)文﹑粗標(biāo)題﹑細(xì)內(nèi)文應(yīng)用閃爍字效應(yīng)控制得當(dāng)特殊字體應(yīng)用時(shí)應(yīng)使用圖片格式色彩與背景應(yīng)拉開層次

案例案例如何來評(píng)價(jià)一個(gè)網(wǎng)頁的好壞？視覺效果色彩搭配整體布局1.3.３網(wǎng)頁的色彩

在制作網(wǎng)站的時(shí)候，色彩的選擇和搭配十分重要，因?yàn)橐粋€(gè)網(wǎng)站格調(diào)的確定，往往取決于色彩的選擇與搭配是否適當(dāng)，一般的情況下，從以下幾個(gè)方面來考慮色彩的選擇：色彩的鮮明性

網(wǎng)站色彩的選擇與搭配要鮮艷，這樣比較容易吸引訪問者的注意，而且在訪問者的記憶中駐留的時(shí)間也比較長(zhǎng)。色彩的獨(dú)特性

網(wǎng)站色彩的選擇與搭配要與眾不同，這樣就可以使得訪問者留下深刻的印象。色彩的合適性

網(wǎng)站色彩的選擇與搭配要與網(wǎng)站的內(nèi)容氣氛相適合。色彩的聯(lián)想性

不同的色彩會(huì)產(chǎn)生不同的聯(lián)想，在網(wǎng)站的設(shè)計(jì)中多運(yùn)用具有美好聯(lián)想的色彩，可以使你的網(wǎng)站流露出另外一種氣息。頁面中各處用色的選擇

首先確定主色。主色是指頁面中相對(duì)來說較大面積使用的色彩。主色可以反映出整個(gè)網(wǎng)頁的風(fēng)格，亦可使頁面內(nèi)容以色彩語言表達(dá)出來。接下來是確定輔助色。輔助色可以有多種，其應(yīng)用范圍包括輸入框的顏色，表格邊框顏色、表格的底色、小圖標(biāo)用色、文字顏色以及鏈接色等等。網(wǎng)頁色彩策劃

策劃網(wǎng)站色彩，必須處理好兩種不同色彩來源之間的色彩關(guān)系。設(shè)計(jì)時(shí)應(yīng)把握住不同色彩對(duì)頁面和網(wǎng)站產(chǎn)生的效果，以及它們之間的色彩沖突。

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)強(qiáng)調(diào)色彩詳析

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)強(qiáng)調(diào)色彩詳析

只要能產(chǎn)生色彩落差，視覺沖擊起了作用，強(qiáng)調(diào)色彩就起了作用。

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)單一頁面色彩布局色彩平衡（色彩在頁面的布局）如何保持色彩的頁面平衡是一個(gè)復(fù)雜的實(shí)際操作問題。每組色彩遇到不同的信息內(nèi)容要做細(xì)微的頁面調(diào)整。這些調(diào)整主要表現(xiàn)在色彩的面積、色彩的位置、文字信息的排版和頁面其它元素的協(xié)調(diào)等諸多細(xì)節(jié)上。

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)單一頁面色彩布局

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)單一頁面色彩布局

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)單一頁面色彩布局色彩面積對(duì)比：

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)色彩設(shè)計(jì)既要有理性的一面，還要有感性的一面。不僅要了解色彩的科學(xué)性知識(shí)和合理的配色方法，還要了解色彩表現(xiàn)情感的力量。色彩設(shè)計(jì)不僅僅是為了傳遞某種信息，更重要的是以它特有的魅力激發(fā)起人們的情感反應(yīng)，達(dá)到影響人﹑感染人使人容易接受的目的。

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)色彩設(shè)計(jì)與網(wǎng)站風(fēng)格由色彩形成的特殊風(fēng)格

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)色彩設(shè)計(jì)與網(wǎng)站風(fēng)格由色彩形成的特殊風(fēng)格

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)色彩設(shè)計(jì)與網(wǎng)站風(fēng)格由色彩形成的特殊風(fēng)格

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)色彩設(shè)計(jì)與網(wǎng)站風(fēng)格由色彩形成的特殊風(fēng)格

網(wǎng)頁設(shè)計(jì)——網(wǎng)頁色彩設(shè)計(jì)一、布局設(shè)計(jì)理念頁面尺寸顯示器分辨率的高低決定頁面的顯示尺寸。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428個(gè)像素；分辨率在1024x768的情況下，頁面的顯示尺寸為：1007x600個(gè)像素。寬度：760px左右寬度：960px左右一、布局設(shè)計(jì)理念頁面尺寸頁面版式顯示器分辨率的高低決定顯示頁面的尺寸。T型結(jié)構(gòu)、同字型結(jié)構(gòu)、川字型結(jié)構(gòu)、三字型結(jié)構(gòu)、封面型結(jié)構(gòu)、Flash型結(jié)構(gòu)。T型結(jié)構(gòu)同字結(jié)構(gòu)川字結(jié)構(gòu)三字結(jié)構(gòu)單一結(jié)構(gòu)單一結(jié)構(gòu)二、布局設(shè)計(jì)的方法紙上布局在紙上畫出頁面的布局草圖。

軟件布局手

繪

布

局

草

圖手

繪

布

局

草

圖手

繪

布

局

草

圖手

繪

布

局

草

圖二、布局設(shè)計(jì)的方法紙上布局軟件布局在紙上畫出頁面的布局草圖。

利用軟件來完成頁面的布局。軟

件

布

局

圖WordPhotoshopCS常用軟件三、布局設(shè)計(jì)的技術(shù)表格布局CSS布局框架布局網(wǎng)頁版面設(shè)計(jì)的步驟

（1）畫出頁面的結(jié)構(gòu)草圖：只需畫出頁面的大體結(jié)構(gòu)，注意分辨率，設(shè)定頁面顯示尺寸。

（2）布局細(xì)化和調(diào)整：將需要放置的功能模塊安排在