網頁設計第1章

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

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

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

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

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

IP地址是由專門的互聯網機構來分配。IP地址具有惟一性。Internet的域名管理

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

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

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

網頁設計——網頁認知網頁設計——網頁認知架構元素（功能模塊）

網站名稱（Logo）廣告條（Banner)導航條(Menu)新聞(News)搜索(Search)友情鏈接(Links)郵件列表(Maillist)計數器(Count)版權(Copyright)

1.3網頁的設計網頁主題網頁的文字網頁的色彩網頁版式和布局網頁導航設計1.3.1網頁主題

網頁的主題指網頁所要表現的最主要的思想內涵，可以說是網頁的靈魂。主題的概念是很模糊的，它是一種約束，是同一站點中各個頁面于五彩繽紛中體現出統一風格的約束；它也是一種力量，是將各個設計者的作品有機結合起來的力量。主題必須與Web頁面主要推銷或展示的產品或服務緊密相關，同時它又必須有相當的吸引力。1.3.2網頁的文字

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

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

文字藝術與文字應用

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

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

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

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

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

網站色彩的選擇與搭配要與網站的內容氣氛相適合。色彩的聯想性

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

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

策劃網站色彩，必須處理好兩種不同色彩來源之間的色彩關系。設計時應把握住不同色彩對頁面和網站產生的效果，以及它們之間的色彩沖突。

網頁設計——網頁色彩設計強調色彩詳析

網頁設計——網頁色彩設計強調色彩詳析

只要能產生色彩落差，視覺沖擊起了作用，強調色彩就起了作用。

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

網頁設計——網頁色彩設計單一頁面色彩布局

網頁設計——網頁色彩設計單一頁面色彩布局

網頁設計——網頁色彩設計單一頁面色彩布局色彩面積對比：

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

網頁設計——網頁色彩設計色彩設計與網站風格由色彩形成的特殊風格

網頁設計——網頁色彩設計色彩設計與網站風格由色彩形成的特殊風格

網頁設計——網頁色彩設計色彩設計與網站風格由色彩形成的特殊風格

網頁設計——網頁色彩設計色彩設計與網站風格由色彩形成的特殊風格

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

軟件布局手

繪

布

局

草

圖手

繪

布

局

草

圖手

繪

布

局

草

圖手

繪

布

局

草

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

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

件

布

局

圖WordPhotoshopCS常用軟件三、布局設計的技術表格布局CSS布局框架布局網頁版面設計的步驟

（1）畫出頁面的結構草圖：只需畫出頁面的大體結構，注意分辨率，設定頁面顯示尺寸。

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