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

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

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

(5)每個(gè)網(wǎng)站都有而且只有一個(gè)首頁，瀏覽者在訪問該站點(diǎn)時(shí)首先訪問這個(gè)文件，首頁文件的名字一般可命名為index.html，首頁文件index.html應(yīng)該放在站點(diǎn)的根文件夾下。 (6)網(wǎng)頁中用到的元素必須用相對(duì)路徑插入，所以新建頁面后，可先將網(wǎng)頁保存在本地站點(diǎn)中。以后在網(wǎng)頁上插入的元素就自動(dòng)以相對(duì)路徑插入。第24頁/共39頁 選擇【站點(diǎn)】｜【站點(diǎn)文件】命令，可以按文件列表的形式查看本地站點(diǎn)，選擇、添加新文件和文件夾，剪切、粘貼、復(fù)制、刪除、重命名文件，具體操作方法如下所述。2.2.2站點(diǎn)中的文件操作第25頁/共39頁1.在本地站點(diǎn)中新建文件夾要在本地站點(diǎn)中新建文件夾可打開【站點(diǎn)】浮動(dòng)面板，選擇【文件】｜【新建文件夾】命令，然后在本地文件列表中命名新建的文件夾。或者，在【站點(diǎn)文件】視圖的某個(gè)文件夾上右擊，并選擇快捷菜單中的【新建文件夾】命令，便可完成新建子文件夾的操作。第26頁/共39頁2.在本地站點(diǎn)中新建文件與在本地站點(diǎn)中新建文件夾一樣，若要在站點(diǎn)中新建文件，可打開【站點(diǎn)】浮動(dòng)面板，選擇【文件】｜【新建文件】命令，然后在本地文件列表中命名新建的文件?；蛘?，在【站點(diǎn)文件】視圖的根文件夾上右擊，并選擇快捷菜單中的【新建文件】命令，便可完成新文件的創(chuàng)建。第27頁/共39頁3.在站點(diǎn)中選擇多個(gè)文件在【站點(diǎn)文件】視圖中選擇多個(gè)文件可用以下操作方法：(1)單擊第一個(gè)文件，按住Shift鍵，然后單擊最后一個(gè)要選擇的文件，可選擇一組連續(xù)的文件。(2)按住Ctrl鍵，然后單擊要選擇的文件，可選擇一組不連續(xù)的文件。第28頁/共39頁4.在本地站點(diǎn)中剪切、粘貼、復(fù)制、刪除、重命名在【站點(diǎn)文件】視圖中對(duì)文件的剪切、粘貼、復(fù)制、刪除、重命名操作可先選中要操作的文件，右擊選中的對(duì)象，在快捷菜單中選擇相應(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)頁時(shí)，默認(rèn)的頁面總是以白色為背景，沒有背景圖像和標(biāo)題。制作一個(gè)頁面時(shí)，一般需要先設(shè)置網(wǎng)頁的頁面標(biāo)題、背景圖像和顏色，文本和超鏈接的顏色，文檔編碼方式，文檔中各元素的顏色等屬性。選擇【修改】｜【頁面屬性】命令，系統(tǒng)將打開【頁面屬性】對(duì)話框。設(shè)計(jì)者可對(duì)頁面的各項(xiàng)參數(shù)進(jìn)行設(shè)置，以下主要介紹對(duì)【外觀】的設(shè)置，其他各項(xiàng)參數(shù)設(shè)置見教材。3.3.2設(shè)置網(wǎng)頁的頁面屬性第31頁/共39頁圖2-15【頁面屬性】對(duì)話框第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)頁文檔保存在本地站點(diǎn)中，然后再將該網(wǎng)頁文檔打開后插入圖像文件，此時(shí)圖像文件以相對(duì)路徑插入。圖像文件不要以URL的絕對(duì)路徑插入，否則會(huì)導(dǎo)致圖像不能顯示。2.3.4網(wǎng)頁圖像的編輯

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