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

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

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

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

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

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

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

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

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

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

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

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

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

閱讀超文本文件l

獲取Internet資源l

保存訪問(wèn)記錄l

具有安全保密功能l

具有字符格式化功能l

具有書(shū)簽功能l

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

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

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

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

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

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

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

主題欄的設(shè)置

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

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

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

按欄目?jī)?nèi)容建立子目錄。

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

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

顏色搭配網(wǎng)頁(yè)選用的背景應(yīng)和頁(yè)面的色調(diào)相協(xié)調(diào)，色彩搭配要遵循和諧、均衡、重點(diǎn)突出的原則。⑷網(wǎng)站標(biāo)志Logo

人教網(wǎng)Logo網(wǎng)易Logo搜狐Logo新浪Logo清華大學(xué)Logo263Logo網(wǎng)頁(yè)設(shè)計(jì)與制作》⑸

版面布局

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

圖像的運(yùn)用

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

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

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

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

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

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

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

的工作窗口中文Dreamweaver

CS6的文檔窗口

1.5..2中文Dreamweaver

CS6的浮動(dòng)面板1.5.3中文Dreamweaver

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

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

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

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

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

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

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

浮動(dòng)面板——“插入”面板（2）“表單”面板

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

“文本”屬性的CSS面板

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

“圖像”屬性面板

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

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

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

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

浮動(dòng)面板（1）資源面板

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

（2）行為面板

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

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

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

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

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

。（6）層面板

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

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

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

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

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

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

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

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

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