第1章網(wǎng)頁概述

第1章網(wǎng)頁概述2014.11第1章網(wǎng)頁概述網(wǎng)頁基礎(chǔ)1.1Web的常用術(shù)語1.2網(wǎng)頁制作工具1.3網(wǎng)站開發(fā)流程1.4DreamweaverCS6的工作窗口

1.5網(wǎng)頁設(shè)計與制作》本章要點(diǎn)在學(xué)習(xí)制作一個網(wǎng)頁之前，首先應(yīng)了解一些網(wǎng)頁與網(wǎng)站的基本知識，了解常用的網(wǎng)頁制作工具，熟悉網(wǎng)站開發(fā)的工作流程。Web的起源與基本結(jié)構(gòu)Web的常用術(shù)語網(wǎng)頁制作工具網(wǎng)站開發(fā)的工作流程中文DreamweaverCS6的基本操作

網(wǎng)頁設(shè)計與制作》

1.1網(wǎng)頁基礎(chǔ)瀏覽器Web的起源Web的特點(diǎn)HTMLWeb的結(jié)構(gòu)網(wǎng)頁基礎(chǔ)Web頁包括的主要元素有：文本、圖像、超鏈接、導(dǎo)航欄、表格、表單、多媒體及特殊效果等。網(wǎng)頁設(shè)計與制作》1.1.1Web的起源1982年TimBerners-Lee最先提出了Web概念，他的目的是使靠近瑞士日內(nèi)瓦的歐洲高能物理研究所的工作人員及分散在世界各地的物理學(xué)家能夠共享研究課題。由于該系統(tǒng)未能擺脫當(dāng)時國際互聯(lián)網(wǎng)的影響——使用文本方式進(jìn)行通信，因此沒有得到公眾的有力支持。90年代初，美國的NEXT公司推出了第一個Web瀏覽器的商業(yè)軟件，人們開始在網(wǎng)絡(luò)里運(yùn)用多媒體技術(shù)，美麗的圖形、圖片，多樣化的語言文字、超鏈接等技術(shù)開始在網(wǎng)絡(luò)上嶄露頭角，從而打破了傳統(tǒng)的純文本模式。網(wǎng)頁設(shè)計與制作》1.1.2Web的特點(diǎn)瀏覽Web時所看到的文件稱為Web頁，又稱為網(wǎng)頁。

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

一個Web由一個或多個Web頁組成，這些Web頁相互連接在一起。Web所包含的是雙向信息，一方面瀏覽者可以通過瀏覽器瀏覽他人的信息，另一方面瀏覽者也可以通過Web服務(wù)器建立自己的網(wǎng)站和發(fā)布自己的信息。網(wǎng)頁設(shè)計與制作》1.1.3HTMLHTML通過標(biāo)記符（Tag）標(biāo)記網(wǎng)頁的各個組成部分，通過在網(wǎng)頁中添加標(biāo)記符，指示瀏覽器如何顯示網(wǎng)頁內(nèi)容。瀏覽器按順序閱讀網(wǎng)頁文件（HTML文件）。以IE瀏覽器為例，在瀏覽器窗口選擇“查看”菜單中的“源文件”選項(xiàng)后，系統(tǒng)將自動啟動記事本或?qū)懽职澹@示該網(wǎng)頁的HTML源文件。

網(wǎng)頁設(shè)計與制作》1.1.4Web的結(jié)構(gòu)菜單欄地址欄狀態(tài)欄標(biāo)題欄網(wǎng)頁網(wǎng)頁設(shè)計與制作》Web頁包括的主要元素有：文本、圖像、超級鏈接、導(dǎo)航欄、表格、表單、多媒體及特殊效果等。1.文本網(wǎng)頁的主體一般以文本為主。在制作網(wǎng)頁時，可以根據(jù)需要設(shè)置文本的字體、字號、顏色以及所需要的其他格式。

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

網(wǎng)頁設(shè)計與制作》3.超級鏈接超級鏈接是網(wǎng)頁中最有用的功能。超級鏈接是從一個網(wǎng)頁指向另一個目的端的鏈接，該鏈接既可以指向本地網(wǎng)站的另一個網(wǎng)頁，也可以指向世界各地的其他網(wǎng)頁。當(dāng)瀏覽者單擊超級鏈接時，其指向的目的端的內(nèi)容將顯示在瀏覽者的Web瀏覽器中。不論是文字還是圖像，都可以設(shè)置超級鏈接。超級鏈接一般包括兩種類型：站內(nèi)鏈接和站外鏈接。4.導(dǎo)航欄導(dǎo)航欄是網(wǎng)站設(shè)計者在規(guī)劃網(wǎng)站結(jié)構(gòu)時必須考慮的一個問題。設(shè)置導(dǎo)航欄的目的是讓瀏覽者順利的瀏覽，避免迷失方向。導(dǎo)航欄能使瀏覽者方便地返回主頁或繼續(xù)下一頁的訪問。導(dǎo)航欄可以是按鈕、文本或圖像。站點(diǎn)的每個網(wǎng)頁上均應(yīng)設(shè)置導(dǎo)航欄，導(dǎo)航欄應(yīng)放置在網(wǎng)頁比較明顯的位置。

網(wǎng)頁設(shè)計與制作》5.表格網(wǎng)頁中的表格是一種用于控制網(wǎng)頁頁面布局的有效方法。為了達(dá)到理想的視覺效果，通常不顯示邊框。使用表格輔助布局，可以實(shí)現(xiàn)網(wǎng)頁橫豎分明的風(fēng)格。

6.表單表單是一種特殊的網(wǎng)頁元素，通常用于收集信息或?qū)崿F(xiàn)一些交互式的效果。表單的主要功能是接收瀏覽者在瀏覽器端的輸入信息，然后將這些信息發(fā)送到瀏覽者設(shè)置的目的端。例如，申請電子郵箱就需要填寫一系列的表單。在圖1-3中，用于登錄的登錄名、密碼、搜索引擎等都是表單。7.多媒體及特殊效果為了吸引瀏覽者，許多網(wǎng)頁還包含有聲音、動畫、視頻等多媒體元素，以及懸停按鈕、Java控件、ActiveX控件等特殊效果。

網(wǎng)頁設(shè)計與制作》1.1.5瀏覽器1、瀏覽器的作用是“翻譯”HTML標(biāo)記語言，并按照規(guī)定的格式顯示出來。

2、瀏覽器具有以下基本功能：l

閱讀超文本文件l

獲取Internet資源l

保存訪問記錄l

具有安全保密功能l

具有字符格式化功能l

具有書簽功能l

處理具有交互功能的FORM表單l

發(fā)送或接收E—mail網(wǎng)頁設(shè)計與制作》1.2Web的常用術(shù)語1URL統(tǒng)一資源定位器。是在Internet尋找資源、獲取文件、使用電子郵件、查閱新聞的地址。

絕對的URL，將完整地給出協(xié)議種類（例如HTTP、FTP）、服務(wù)器的主機(jī)域名、路徑和網(wǎng)頁文件名。相對的URL只給出網(wǎng)頁文件名，省略了路徑。2網(wǎng)頁網(wǎng)頁是使用HTML語言所寫的文本文件。每個網(wǎng)頁都是磁盤上的一個文件，可以單獨(dú)瀏覽。3主頁也稱為首頁。是所在站點(diǎn)中所有網(wǎng)頁文件的起點(diǎn)和交點(diǎn)，也是瀏覽一個網(wǎng)站的起點(diǎn)。主頁應(yīng)給出站點(diǎn)的基本信息和主要內(nèi)容，是瀏覽者可以一目了然地了解站點(diǎn)的基本主題。網(wǎng)頁設(shè)計與制作》1.3網(wǎng)頁制作工具網(wǎng)頁編輯工具Dreamweaver是一個用于可視化設(shè)計與管理網(wǎng)頁和網(wǎng)站的工具，支持最新的Web技術(shù)，包含可視化網(wǎng)頁設(shè)計、圖像編輯、全局查找替換、處理Flash和Shockwave等媒體格式和動態(tài)HTML。它與Flash、Fireworks配合使用，功能更為強(qiáng)大，是目前專業(yè)人士首選的網(wǎng)頁制作工具。網(wǎng)頁圖像與動畫制作工具Flash

是專門為制作網(wǎng)頁而設(shè)計的一個交互性矢量動畫設(shè)計軟件。Fireworks是專門設(shè)計的Web圖形工具軟件，它可以用較少的步驟生成較小但質(zhì)量很高的JPEG和GIF圖像。Photoshop是著名的圖形圖像處理軟件。它能夠?qū)崿F(xiàn)各種專業(yè)化的圖像處理，是專業(yè)圖像創(chuàng)作的首選軟件。網(wǎng)頁設(shè)計與制作》1.4網(wǎng)站開發(fā)流程網(wǎng)站規(guī)劃1.確定網(wǎng)站的主題與名稱2.搜集材料3.規(guī)劃網(wǎng)站—主題欄的設(shè)置—目錄結(jié)構(gòu)設(shè)計—顏色搭配—網(wǎng)站Logo—版面布局—圖像的運(yùn)用網(wǎng)站制作1.制作網(wǎng)站（1）建立本地站點(diǎn)（2）創(chuàng)建子文件夾，保存頁面文件和圖像文件（3）添加需要的空網(wǎng)頁（4）設(shè)計網(wǎng)頁尺寸（5）設(shè)置網(wǎng)頁屬性：標(biāo)題、背景、背景顏色、鏈接顏色、文字顏色等（6）向網(wǎng)頁中插入對象（7）建立超級鏈接（8）預(yù)覽和保存網(wǎng)頁。

2.上傳與測試網(wǎng)站后期維護(hù)1.推銷網(wǎng)站2.維護(hù)更新網(wǎng)頁設(shè)計與制作》1.4.1網(wǎng)站規(guī)劃1.確定網(wǎng)站的主題與名稱

確定網(wǎng)站主題應(yīng)遵循以下原則：

（1）主題鮮明。一個網(wǎng)站必須要有一個明確的主題，在主題范圍內(nèi)做到內(nèi)容全而精。（2）明確設(shè)立網(wǎng)站的目的。（3）體現(xiàn)自己的個性。把自己的興趣、愛好盡情地發(fā)揮出來，突出自己的個性，辦出自己的特色網(wǎng)頁設(shè)計與制作》2.搜集材料圍繞主題搜集材料，作為自己制作網(wǎng)頁的素材。3.規(guī)劃網(wǎng)站⑴

主題欄的設(shè)置

突出主題。把主題欄放在最明顯的地方，讓瀏覽者更快、更明確的知道網(wǎng)站所表現(xiàn)的內(nèi)容。

設(shè)計一個“最近更新”欄目，讓瀏覽者一目了然的知道更新內(nèi)容。欄目不要設(shè)置太多。⑵

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

按欄目內(nèi)容建立子目錄。

每個目錄下分別為圖像文件創(chuàng)建一個子目錄image（圖像較少時可不創(chuàng)建）。

目錄的層次不要太深，主要欄目最好能直接從首頁到達(dá)。盡量使用意義明確的非中文目錄。網(wǎng)頁設(shè)計與制作》⑶

顏色搭配網(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網(wǎng)頁設(shè)計與制作》⑸

版面布局

版面布局一般應(yīng)遵循的原則是：突出重點(diǎn)、平衡和諧，將網(wǎng)站標(biāo)志（Logo）、主菜單等最重要的模塊放在突出的位置。⑹

圖像的運(yùn)用

圖像是為主頁內(nèi)容服務(wù)的，不能讓圖像喧賓奪主。

圖像要兼顧大小和美觀。圖片不僅要好看，還應(yīng)在保證圖片質(zhì)量的情況下盡量縮小圖片的大?。醋止?jié)數(shù)）。圖像過大將影響網(wǎng)頁的傳輸速度。

合理地采用JPEG和GIF圖像格式。顏色較少的（256色以內(nèi)）圖像，可處理為GIF格式；色彩比較豐富的圖像，最好處理為JPEG格式。網(wǎng)頁設(shè)計與制作》1.4.2網(wǎng)站制作1.制作網(wǎng)站包括以下步驟

⑴建立本地站點(diǎn)：建立站點(diǎn)根文件夾，用于存放首頁、相關(guān)網(wǎng)頁和網(wǎng)站中用到的其他文件。⑵在站點(diǎn)根文件夾下創(chuàng)建子文件夾：將頁面文件和圖像文件分開存放。⑶向站點(diǎn)添加所需要的空網(wǎng)頁。⑷設(shè)計網(wǎng)頁尺寸：頁面大小一般選擇800×600規(guī)格。⑸設(shè)置網(wǎng)頁屬性：包括頁面標(biāo)題、背景圖像、背景顏色、鏈接顏色、文字顏色等。⑹向網(wǎng)頁中插入文本、圖形圖像、動畫等對象。⑺建立所需要的超級鏈接。⑻預(yù)覽和保存網(wǎng)頁。網(wǎng)頁設(shè)計與制作》2.上傳與測試

測試評估主要包括上傳前的兼容性測試、鏈接測試和上傳后的實(shí)地測試。

利用FTP工具將網(wǎng)頁發(fā)布到所申請的主頁服務(wù)器上。

網(wǎng)站上傳之后，繼續(xù)通過瀏覽器進(jìn)行實(shí)地測試，發(fā)現(xiàn)問題，及時修改，然后再上傳測試。網(wǎng)頁設(shè)計與制作》1.4.3后期維護(hù)1.推銷網(wǎng)站網(wǎng)頁上傳之后，需要不斷地進(jìn)行宣傳，以便讓更多的朋友認(rèn)識它，從而提高網(wǎng)站的訪問率與知名度。推廣網(wǎng)站的方法很多，例如，利用E-mail、新聞組、與別的網(wǎng)站交換鏈接（友情鏈接）、到搜索引擎上注冊、加入交換廣告等。2.維護(hù)更新網(wǎng)站必須定期維護(hù)、定期更新，只有不斷地補(bǔ)充新內(nèi)容，才能吸引瀏覽者。同時，隨著軟硬件的進(jìn)步，網(wǎng)頁的設(shè)計也應(yīng)由文字向多媒體、由平面圖像向立體動畫或影片、由單向傳播向交互式發(fā)展。網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6

的工作窗口中文Dreamweaver

CS6的文檔窗口

1.5..2中文Dreamweaver

CS6的浮動面板1.5.3中文Dreamweaver

CS6的工作窗口1.5.1網(wǎng)頁設(shè)計與制作》1.5中文Dreamweaver

CS6的工作窗口工作窗口1.5.1插入工具欄面板組文件面板屬性面板文檔工具欄菜單欄網(wǎng)頁設(shè)計與制作》·插入工具欄：包含用于將各種類型的對象插入到文檔中的工具按鈕。例如，圖像、表格、層、框架等。

·菜單欄：菜單欄中的每一項(xiàng)均有一個下拉菜單，DreamweaverCS6中的大部分操作均可通過下拉菜單實(shí)現(xiàn)。

·文件面板：用于創(chuàng)建站點(diǎn)、管理組成站點(diǎn)的文件和文件夾?！っ姘褰M：包含一些打開和關(guān)閉常用面板和檢查器的按鈕?！傩詸z查器：用于查看和更改所選對象或文本的各種屬性。每種對象都具有不同的屬性。

·標(biāo)題欄：顯示當(dāng)前正在編輯的網(wǎng)頁名稱與文件名。1.5中文DreamweaverCS6的工作窗口網(wǎng)頁設(shè)計與制作》文檔窗口——標(biāo)題欄、頁面編輯區(qū)1.5.2標(biāo)準(zhǔn)工具欄標(biāo)題欄1.5中文DreamweaverCS6的工作窗口網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口文檔窗口——狀態(tài)欄1.5.2文檔狀態(tài)欄標(biāo)簽選擇文件大小以及下載速度窗口大小縮放工具與比例選取工具手型工具窗口大小區(qū)域菜單

標(biāo)準(zhǔn)工具欄

網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口用于選擇標(biāo)記、設(shè)置窗口大小以及調(diào)整文件的下載速度?！?biāo)簽選擇：顯示當(dāng)前插入點(diǎn)的HTML源代碼標(biāo)簽，在標(biāo)簽上單擊鼠標(biāo)右鍵可控制HTML代碼，單擊body可選擇整個文檔的正文部分?！の募笮∫约跋螺d速度：顯示當(dāng)前網(wǎng)頁的文件大小以及下載速度?！ご翱诖笮。涸诖翱诖笮^(qū)域單擊鼠標(biāo)，可設(shè)置當(dāng)前編輯窗口的大小。文檔窗口——狀態(tài)欄1.5.2網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口浮動面板——“插入”面板（1）1.5.3“常用”工具欄網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口1.5.3“布局”面板與“框架”選項(xiàng)

浮動面板——“插入”面板（2）“表單”面板

網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口1.5.3浮動面板——“屬性”面板“文本”屬性的HTML面板

“文本”屬性的CSS面板

網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口1.5.3浮動面板——“屬性”面板“表格”屬性面板

“圖像”屬性面板

網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口1.5.3浮動面板——面板組（1）網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口1.5.3浮動面板——面板組（2）網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口1.5.3浮動面板——面板組（3）網(wǎng)頁設(shè)計與制作》1.5中文DreamweaverCS6的工作窗口1.5.3浮動面板——面板組（4）網(wǎng)頁設(shè)計與制作》1.5.3

浮動面板所有浮動面板都可以由“窗口”菜單控制顯示或隱藏，部分常用浮動面板還可通過啟動器來顯示或隱藏。1、插入面板

使用“窗口”菜單的“插入”選項(xiàng)或按快捷鍵Ctrl+F2可顯示或隱藏插入面板。2、屬性面板使用“窗口”菜單的“屬性”選項(xiàng)或按快捷鍵Ctrl+F3，可顯示或隱藏屬性面板。屬性面板中的項(xiàng)目是隨著網(wǎng)頁中選定對象的不同而改變的。在屬性面板中，詳細(xì)地列出了所選對象的屬性參數(shù)，用戶可以通過屬性面板查看或修改這些參數(shù)。3、面板組

使用“窗口”菜單中的選項(xiàng)，可以顯示或隱藏各種面板。網(wǎng)頁設(shè)計與制作》1.5.3

浮動面板（1）資源面板

資源面板中列出了當(dāng)前網(wǎng)頁或站點(diǎn)中用到的各種網(wǎng)頁元素。資源面板中的工具按鈕從上到下依次是：圖像、顏色、URLs(超級鏈接)、Flash動畫、Shockwave、影片、腳本、模板、庫。

（2）行為面板

行為面板是編輯網(wǎng)頁中由特定事件觸發(fā)交互行為的地方，能為網(wǎng)頁添加很多特殊效果。（3）CSS樣式面板

可以方便地定義CSS樣式和管理CSS樣式。（4）代碼檢查器

列出了當(dāng)前網(wǎng)頁文件的HTML源代碼，對不同的HTML源代碼將用不同的顏色顯示，并用黃色高亮顯示錯誤代碼。

網(wǎng)頁設(shè)計與制作》1.5.3

浮動面板（5）框架面板框架面板以一種在文檔窗口中不能顯示的方式顯示框架集的層次結(jié)構(gòu)

。（6）層面板

列出了當(dāng)前網(wǎng)頁中的層對象列表和疊放優(yōu)先順序：先建立的層位于列表的底部，最后建立的層位于列表的上部。使用層面板可以防止層重疊，改變層的可見性和疊放順序。（7）歷史記錄面板

歷史記錄面板自動記錄了用戶最近進(jìn)行的50步操作?？梢酝ㄟ^歷史記錄面板撤消已完成的操作。（8）參考面板

通過參考面板，用戶可以快速地獲得JavaScript、HTML、CSS和BrowserDOMs等的參考信息。

網(wǎng)頁設(shè)計與制作》1.5.4使用面板、菜單和輔助設(shè)計工具1顯示和隱藏面板5使用網(wǎng)格4使用標(biāo)尺2調(diào)整面板形狀與面板組合3使用快捷方式輔助操作網(wǎng)頁設(shè)計與制作》1顯示和隱藏面板使用“窗口”菜單，可以顯示和隱藏各個面板。當(dāng)面板選項(xiàng)前具有“

”標(biāo)志時，表示該面板已經(jīng)顯示，單擊該選項(xiàng)則關(guān)閉顯示。網(wǎng)頁設(shè)計與制作》2調(diào)整面板形狀與面板組合（1）調(diào)整大小

使用鼠標(biāo)拖動面板的上、下、左、右邊框或四個角，可以調(diào)整面板的大小。

網(wǎng)頁設(shè)計與制作》2調(diào)整面板形狀與面板組合（2）組合面板在Dreamweaver

中，大多數(shù)面板可以合并成一個綜合面板，以簡化工作窗口。但屬性面板、啟動器、站點(diǎn)窗口、源代碼窗口不能合并組合。操作實(shí)例1-1將“參考”面板組合到“代碼檢查器”中操作方法：①分別打開“代碼檢查器”面板與“參考”面板。②在“參考”面板標(biāo)題欄上單擊鼠標(biāo)左鍵，按住并拖動至“代碼檢查器”面板上。

當(dāng)“代碼檢查器”面板邊框變?yōu)榇志€條時松開鼠標(biāo)，即可完成面板合并