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

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

Internet所提供的服務(wù)主要是WWW、E-mail、FTP、網(wǎng)上傳呼、在線聊天、網(wǎng)上購物、旅行預(yù)訂等等，而其中WWW和E-mail是最常用的服務(wù)。1.1.2WWWWWW(WorldWideWeb)簡稱為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é)議〉：//〈主機域名〉/〈路徑〉/〈文件名〉其中，〈通信協(xié)議〉指提供該文件的服務(wù)器所使用的通信協(xié)議；〈主機域名〉指上述服務(wù)器所在主機的域名；〈路徑〉指該文件在主機上的路徑；〈文件名〉指文件的名稱。

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

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

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

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

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

文字色彩圖形圖像動畫音樂視頻裝飾物

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

網(wǎng)頁設(shè)計——網(wǎng)頁色彩設(shè)計一、布局設(shè)計理念頁面尺寸顯示器分辨率的高低決定頁面的顯示尺寸。一般分辨率在800x600的情況下，頁面的顯示尺寸為：780x428個像素；分辨率在1024x768的情況下，頁面的顯示尺寸為：1007x600個像素。寬度：760px左右寬度：960px左右一、布局設(shè)計理念頁面尺寸頁面版式顯示器分辨率的高低決定顯示頁面的尺寸。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è)計的方法紙上布局在紙上畫出頁面的布局草圖。

軟件布局手

繪

布

局

草

圖手

繪

布

局

草

圖手

繪

布

局

草

圖手

繪

布

局

草

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

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

件

布

局

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

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

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