第2章網(wǎng)頁設(shè)計基礎(chǔ)

會計學(xué)1第2章網(wǎng)頁設(shè)計基礎(chǔ)第2章網(wǎng)頁設(shè)計基礎(chǔ)2.1Dreamweaver8簡介2.2創(chuàng)建與編輯本地站點2.3網(wǎng)頁文件的基本操作2.4簡單網(wǎng)頁的制作實例第1頁/共39頁Dreamweaver8是Macromedia公司的集網(wǎng)頁設(shè)計、代碼開發(fā)、網(wǎng)站創(chuàng)建和管理于一體的軟件。它保留了Dreamweaver早期版本的各種優(yōu)點，提供了可視化的布局工具、快速的Web應(yīng)用程序開發(fā)以及廣泛的代碼編輯支持。它新增了對ASP、JSP、ASP.NET、PHP等動態(tài)網(wǎng)頁的支持，可以實現(xiàn)完整的數(shù)據(jù)庫的編寫。Dreamweaver8不僅可以輕松設(shè)計網(wǎng)站前臺的頁面，而且也可以方便地實現(xiàn)網(wǎng)站后臺的各種復(fù)雜功能。2.1Dreamweaver8簡介第2頁/共39頁Dreamweaver8新的工作區(qū)環(huán)境比早期的版本更加靈活、方便、實用。工作區(qū)窗口由標(biāo)題欄、菜單欄、工具欄、網(wǎng)頁文件編輯區(qū)、狀態(tài)欄和浮動面板組等基本部分組成，如下圖所示。啟動Dreamweaver8后，屏幕顯示的是工作區(qū)窗口，此時系統(tǒng)打開一個名為Untitled的空白文檔，在網(wǎng)頁文件編輯區(qū)中，設(shè)計者可以完成網(wǎng)頁的設(shè)計。工作區(qū)窗口各部分功能如下所述。2.1.1Dreamweaver8的工作環(huán)境第3頁/共39頁第4頁/共39頁1.標(biāo)題欄標(biāo)題欄是顯示當(dāng)前網(wǎng)頁的標(biāo)題信息，當(dāng)前被編輯網(wǎng)頁文件的路徑和文件名會在括號里顯示。用標(biāo)題欄左邊和右邊的窗口控制按鈕，可以對窗口完成【最大化】、【最小化】、【移動】、【還原】、【關(guān)閉】等操作。第5頁/共39頁2.菜單欄菜單欄是設(shè)計者選擇操作命令的地方。菜單欄的選項依次為【文件】、【編輯】、【查看】、【插入】、【修改】、【文本】、【命令】、【站點】、【窗口】和【幫助】。浮動面板上的各項操作基本上都有菜單操作命令與之相對應(yīng)，在以后的章節(jié)中會逐一介紹主要的菜單操作命令。第6頁/共39頁3.插入欄選擇【窗口】|【插入】命令，可顯示或隱藏插入欄，快捷鍵CTRL+F2是顯示或隱藏插入欄的切換開關(guān)。插入欄默認(rèn)的9個選項分別為：常用、布局、表單、文本、HTML、應(yīng)用程序、Flash元素、收藏夾、顯示為制表符。單擊【顯示為制表符】選項，可以改變插入欄的顯示方式。第7頁/共39頁4.文檔工具欄 在菜單欄的下面是文檔工具欄。文檔工具欄最左邊的是代碼視圖和設(shè)計視圖的切換按鈕。利用切換按鈕可在【代碼】、【設(shè)計】、【代碼和設(shè)計】的3種視圖方式之間切換，改變網(wǎng)頁的編輯方式。 第8頁/共39頁5.網(wǎng)頁文件編輯區(qū) 網(wǎng)頁文件的編輯區(qū)域是Dreamweaver8的主工作區(qū)。 啟動Dreamweaver8時，就創(chuàng)建了一個空白的網(wǎng)頁文件等待編輯，網(wǎng)頁編輯區(qū)的大小可以通過用鼠標(biāo)拖曳編輯區(qū)右面邊框線來調(diào)整，或者單擊編輯區(qū)右面邊框線上的按鈕，完成最大化或還原網(wǎng)頁編輯區(qū)的操作。第9頁/共39頁6.狀態(tài)欄 狀態(tài)欄顯示當(dāng)前網(wǎng)頁的有關(guān)信息。在狀態(tài)欄中自左至右分別是：標(biāo)簽選擇器（TagSelector）、頁面信息欄（視窗設(shè)置框、頁面信息框）、快速啟動條，它們特點和功能如下所述。1)標(biāo)簽選擇器 編輯網(wǎng)頁時，將光標(biāo)置于網(wǎng)頁某個位置，便會在標(biāo)簽選擇器中顯示相應(yīng)的HTML標(biāo)簽，單擊HTML標(biāo)簽則可選擇網(wǎng)頁中相對應(yīng)的編輯對象。右擊某個HTML標(biāo)簽，選擇快捷菜單中的相應(yīng)命令，可對HTML標(biāo)簽做進一步的編輯。第10頁/共39頁2)

頁面編輯工具選取工具：單擊該工具后，可以用鼠標(biāo)選取網(wǎng)頁文檔中的元素。手形工具：單擊該工具后，可以在【文檔】窗口中移動當(dāng)前文檔?？s放工具：該工具與【設(shè)置顯示比例】彈出式菜單可以縮放文檔的顯示比例。第11頁/共39頁3)視窗設(shè)置框 在視窗設(shè)置框中顯示的當(dāng)前文檔窗口的大小都是以像素為單位的。這個窗口尺寸是動態(tài)顯示的，用鼠標(biāo)拖動文檔窗口邊框改變窗口大小時，顯示的窗口尺寸也會隨之改變。單擊視窗設(shè)置框右邊的小按鈕，在彈出的快捷菜單中選擇【編輯大小】命令，可以定制窗口的大小尺寸。第12頁/共39頁4)網(wǎng)頁信息框 網(wǎng)頁信息框顯示網(wǎng)頁容量、傳輸速率和該網(wǎng)頁在Internet上完全下載的時間（系統(tǒng)默認(rèn)的連接速度為56.0Kbps）。 例如表示當(dāng)前網(wǎng)頁文檔大小為25KB，下載時間約為4秒。將連接速度改為當(dāng)前主流產(chǎn)品的速度56Kbps，便可關(guān)注當(dāng)前正在編輯的網(wǎng)頁下載所需的時間。第13頁/共39頁7.浮動面板和浮動面板組 Dreamweaver8的浮動面板是該軟件的一個特色，它不同于對話框。用對話框來設(shè)置對象的各種屬性后，必須關(guān)閉對話框才能看到設(shè)置的效果。利用浮動面板對網(wǎng)頁對象進行屬性設(shè)置，在網(wǎng)頁編輯窗口中可以直接看到操作的結(jié)果，從而避免了屬性設(shè)置的盲目性，真正實現(xiàn)了“所見即所得”的實時編輯功能。 浮動面板組也是Dreamweaver8的一個特色。設(shè)計者可以按自己的需要組合或拆分浮動面板組中的浮動面板。第14頁/共39頁Dreamweaver8默認(rèn)的浮動面板組有以下5個。(1)【CSS】浮動面板組包含【CSS樣式】、【層】2個浮動面板，主要提供網(wǎng)頁設(shè)計和網(wǎng)頁格式化的工具。(2)【應(yīng)用程序】浮動面板組包含【數(shù)據(jù)庫】、【綁定】、【服務(wù)器行為】、【組件】4個浮動面板，主要提供動態(tài)網(wǎng)頁設(shè)計和數(shù)據(jù)庫管理的工具。(3)【標(biāo)簽檢查器】浮動面板組包含【屬性】、【行為】2個浮動面板，主要提供方便手編代碼的調(diào)試工具。第15頁/共39頁(4)【文件】浮動面板組包含【站點】、【資源】、【代碼片段】3個浮動面板，主要提供管理站點的各種資源。第16頁/共39頁8.【屬性】面板 【屬性】面板位于網(wǎng)頁文件編輯區(qū)下方，是用來顯示、設(shè)置和修改網(wǎng)頁中當(dāng)前選中對象的屬性的重要工具。選擇【窗口】｜【屬性】命令可顯示或隱藏【屬性】面板，Ctrl+F3快捷鍵是顯示或隱藏【屬性】面板的切換開關(guān)。 當(dāng)某個頁面對象的屬性被修改后，可以直接在編輯窗口中預(yù)覽到對象被修改后的結(jié)果，真正實現(xiàn)了交互式面對面地修改網(wǎng)頁對象功能。第17頁/共39頁對于選擇文字、表格、層、表單等不同的對象，【屬性】面板的設(shè)置內(nèi)容也會相應(yīng)有所不同。另外，為了不過多地遮擋網(wǎng)頁編輯窗口，設(shè)計者還可根據(jù)需要單擊【屬性】面板右下角的三角形按鈕，展開和折疊【屬性】面板。如圖3-10所示的是圖像【屬性】面板（折疊），如圖3-11所示的是表格【屬性】面板（展開）。關(guān)于【屬性】面板的具體使用方法將在后面章節(jié)逐一介紹。第18頁/共39頁圖2-10圖像【屬性】面板（折疊）圖2-11表格【屬性】面板（展開）第19頁/共39頁 一個網(wǎng)站主頁可以看成是一系列相關(guān)文檔的集合，設(shè)計者在制作一個網(wǎng)站的主頁時，實際上是將這些相關(guān)文檔通過各種超鏈接把它們聯(lián)系在一起。瀏覽者通過瀏覽器程序從一個網(wǎng)頁轉(zhuǎn)跳到另一個網(wǎng)頁，從而對整個網(wǎng)站的主頁進行訪問。一般情況下應(yīng)先建立本地站點，這樣既可以從全局上控制網(wǎng)站的結(jié)構(gòu)，完成對網(wǎng)頁的編輯調(diào)試工作，又可以提高效率、降低成本。2.2創(chuàng)建新站點第20頁/共39頁創(chuàng)建網(wǎng)站一般有以下幾個步驟。(1)規(guī)劃站點：了解建站的目的，確定站點的主題、風(fēng)格、網(wǎng)站要提供的服務(wù)和網(wǎng)頁要表達的主要內(nèi)容。收集和處理各種有關(guān)的資料。(2)創(chuàng)建站點的基本結(jié)構(gòu)：在計算機中創(chuàng)建本地站點的根文件夾以及存放各種資料的子文件夾，配置好所有系統(tǒng)的參數(shù)和站點測試路徑。(3)網(wǎng)頁設(shè)計：充分利用收集到的數(shù)據(jù)資料，合理地運用Dreamweaver8提供的技術(shù)，最完美地設(shè)計出能表達網(wǎng)站中心思想的Web頁面。第21頁/共39頁所謂本地站點即在本地計算機的硬盤上創(chuàng)建一個文件夾，并把這個文件夾設(shè)置為本地站點的根文件夾。在網(wǎng)頁制作中將會使用大量的圖片、照片、動畫文件和文本文件。一個比較成熟的網(wǎng)站會有很多各種類型的文件。為了便于管理，可在本地站點的根文件夾中分門別類地建立子文件夾，然后按類型把不同的文件存放在不同的子文件夾中，以便使站點結(jié)構(gòu)清晰明了，文件管理更加方便。2.2.1創(chuàng)建本地站點第22頁/共39頁注意：(1)在網(wǎng)頁設(shè)計中，最好不要用中文作為文件名或文件夾名；(2)在本地計算機上制作網(wǎng)頁時，應(yīng)先規(guī)劃好存放文件的文件夾，建立好本地站點;(3)把網(wǎng)頁中用到的素材文件和文檔資料復(fù)制到規(guī)劃好的本地站點的文件夾內(nèi)。制作好的網(wǎng)頁也必須放在本地站點中。(4)每次制作網(wǎng)頁前，必須先設(shè)置好本地站點。第23頁/共39頁

(5)每個網(wǎng)站都有而且只有一個首頁，瀏覽者在訪問該站點時首先訪問這個文件，首頁文件的名字一般可命名為index.html，首頁文件index.html應(yīng)該放在站點的根文件夾下。 (6)網(wǎng)頁中用到的元素必須用相對路徑插入，所以新建頁面后，可先將網(wǎng)頁保存在本地站點中。以后在網(wǎng)頁上插入的元素就自動以相對路徑插入。第24頁/共39頁 選擇【站點】｜【站點文件】命令，可以按文件列表的形式查看本地站點，選擇、添加新文件和文件夾，剪切、粘貼、復(fù)制、刪除、重命名文件，具體操作方法如下所述。2.2.2站點中的文件操作第25頁/共39頁1.在本地站點中新建文件夾要在本地站點中新建文件夾可打開【站點】浮動面板，選擇【文件】｜【新建文件夾】命令，然后在本地文件列表中命名新建的文件夾?；蛘撸凇菊军c文件】視圖的某個文件夾上右擊，并選擇快捷菜單中的【新建文件夾】命令，便可完成新建子文件夾的操作。第26頁/共39頁2.在本地站點中新建文件與在本地站點中新建文件夾一樣，若要在站點中新建文件，可打開【站點】浮動面板，選擇【文件】｜【新建文件】命令，然后在本地文件列表中命名新建的文件?；蛘撸凇菊军c文件】視圖的根文件夾上右擊，并選擇快捷菜單中的【新建文件】命令，便可完成新文件的創(chuàng)建。第27頁/共39頁3.在站點中選擇多個文件在【站點文件】視圖中選擇多個文件可用以下操作方法：(1)單擊第一個文件，按住Shift鍵，然后單擊最后一個要選擇的文件，可選擇一組連續(xù)的文件。(2)按住Ctrl鍵，然后單擊要選擇的文件，可選擇一組不連續(xù)的文件。第28頁/共39頁4.在本地站點中剪切、粘貼、復(fù)制、刪除、重命名在【站點文件】視圖中對文件的剪切、粘貼、復(fù)制、刪除、重命名操作可先選中要操作的文件，右擊選中的對象，在快捷菜單中選擇相應(yīng)的命令或按相應(yīng)的快捷鍵便可完成相應(yīng)的文件操作。第29頁/共39頁2.3.1創(chuàng)建、打開和保存網(wǎng)頁文件

1.創(chuàng)建HTML文檔2.打開已建的HTML文檔3.保存指定文件4.關(guān)閉文件2.3網(wǎng)頁文件的基本操作第30頁/共39頁在創(chuàng)建新網(wǎng)頁時，默認(rèn)的頁面總是以白色為背景，沒有背景圖像和標(biāo)題。制作一個頁面時，一般需要先設(shè)置網(wǎng)頁的頁面標(biāo)題、背景圖像和顏色，文本和超鏈接的顏色，文檔編碼方式，文檔中各元素的顏色等屬性。選擇【修改】｜【頁面屬性】命令，系統(tǒng)將打開【頁面屬性】對話框。設(shè)計者可對頁面的各項參數(shù)進行設(shè)置，以下主要介紹對【外觀】的設(shè)置，其他各項參數(shù)設(shè)置見教材。3.3.2設(shè)置網(wǎng)頁的頁面屬性第31頁/共39頁圖2-15【頁面屬性】對話框第32頁/共39頁1.網(wǎng)頁中文本輸入2.設(shè)置漢字的字體列表3.輸入網(wǎng)頁中的空格4.文本換行5.文本的屬性設(shè)置2.3.3網(wǎng)頁文本的編輯第33頁/共39頁1.網(wǎng)頁圖像格式簡介(1)GIF（GraphicsInterchangeFormat）(2)JPEG（JointPhotographicExpertsGroup）(3)PNG（PortableNetworkGraphic）2.插入網(wǎng)頁圖像的方法注意：應(yīng)先將該網(wǎng)頁文檔保存在本地站點中，然后再將該網(wǎng)頁文檔打開后插入圖像文件，此時圖像文件以相對路徑插入。圖像文件不要以URL的絕對路徑插入，否則會導(dǎo)致圖像不能顯示。2.3.4網(wǎng)頁圖像的編輯

第34頁/共39頁例：制作如圖顯示的網(wǎng)頁。2.4簡單網(wǎng)頁的制作實例第35頁/共39頁本例的制作要求如下：（1）頁面的背景圖片為bg0000.jpg；（2）在合適的位置插入圖片earth.gif；（3）在網(wǎng)