1、第5章網(wǎng)站布局,技能目標(biāo),5.1網(wǎng)站頁面布局,5.2表格的應(yīng)用,5.3層的運(yùn)用,5.4框架的使用,技能目標(biāo),了解常用網(wǎng)頁內(nèi)容的組成要素了解常見網(wǎng)頁的布局方式掌握表格的基本操作，并能使用表格進(jìn)行頁面布局的設(shè)計(jì)掌握層的使用方法，利用層對(duì)頁面元素進(jìn)行定位掌握框架的使用方法，能夠使用框架對(duì)頁面進(jìn)行設(shè)計(jì),網(wǎng)頁設(shè)計(jì)是否美觀，直接影響到客戶對(duì)網(wǎng)站的第一感覺。在網(wǎng)頁設(shè)計(jì)的各種要素中，網(wǎng)頁布局設(shè)計(jì)是其中的重要一項(xiàng)。網(wǎng)頁布局設(shè)計(jì)就是在頁面內(nèi)對(duì)組成網(wǎng)頁的基本元素進(jìn)行合理地組織安排，使網(wǎng)頁更便于閱讀和理解，看起來美觀、清晰。雖然內(nèi)容是網(wǎng)站的靈魂，但訪問者不愿意看到只注重內(nèi)容的站點(diǎn)，只有當(dāng)網(wǎng)頁排版和網(wǎng)頁內(nèi)容成功結(jié)合時(shí)，

2、才是真正受人歡迎的網(wǎng)站。,5.1網(wǎng)站頁面布局,頁面尺寸由于訪問者計(jì)算機(jī)配置的不同，瀏覽網(wǎng)頁時(shí)的顯示模式也會(huì)有所區(qū)別?，F(xiàn)在使用較多的是800600和1024768的分辨率，所以在設(shè)計(jì)網(wǎng)頁時(shí)，就要考慮使用這兩種分辨率。在800600的屏幕顯示模式下，IE窗口內(nèi)能看到的部分為780428個(gè)像素；而在分辨率是1024768的模式下，頁面的顯示尺寸應(yīng)為1007600個(gè)像素。這兩種尺寸都是按照在瀏覽時(shí)網(wǎng)頁正好占滿整個(gè)屏幕的情況而定的，當(dāng)一屏顯示不完時(shí)，頁面上會(huì)出現(xiàn)垂直和水平的滾動(dòng)條，通過對(duì)滾動(dòng)條的拖動(dòng)，可以查看到所有的內(nèi)容。頁面組成頁頭網(wǎng)頁標(biāo)志導(dǎo)航欄內(nèi)容板塊頁腳頁面布局上下型左右型混合型,5.1網(wǎng)站頁面布

3、局,表格是頁面布局中極為有用的設(shè)計(jì)工具，它為網(wǎng)頁帶來了結(jié)構(gòu)的概念，可以控制文本和圖形在頁面上出現(xiàn)的位置，使網(wǎng)頁上的各個(gè)元素排列的井然有序?，F(xiàn)在幾乎所有的大型網(wǎng)站的主頁都是用表格來進(jìn)行布局的，網(wǎng)頁設(shè)計(jì)者們已經(jīng)把表格當(dāng)作頁面布局最有力的工具之一。,5.2表格的應(yīng)用,案例5-2用表格工具制作網(wǎng)頁設(shè)計(jì)并制作出一個(gè)名為“書香文軒”的網(wǎng)頁，使用表格作為布局工具，如圖所示為制作完成的頁面。,5.2表格的應(yīng)用,案例5-2用表格工具制作網(wǎng)頁【案例分析】制作網(wǎng)頁之前，首先要對(duì)其進(jìn)行布局規(guī)劃，本例中的頁面可以劃分為頁頭、主體、頁腳三部分。我們可以考慮用34個(gè)大的表格來實(shí)現(xiàn)它。,5.2表格的應(yīng)用,案例5-2用表格工具

4、制作網(wǎng)頁【操作步驟】（演示操作）1新建文檔2繪制表格，設(shè)置表格屬性表格的基本操作：插入表格合并單元格拆分單元格3插入圖像，輸入文字信息4保存網(wǎng)頁，預(yù)覽效果,5.2表格的應(yīng)用,案例5-2用表格工具制作網(wǎng)頁案例小結(jié)：表格主要是由行和列以及行列交叉處的單元格構(gòu)成，利用行和列的合并、拆分功能，可以制作出各種形式的表格。在用表格制作頁面之前，一定要先對(duì)這個(gè)頁面進(jìn)行規(guī)劃設(shè)計(jì)，最好畫出草圖，標(biāo)出每一部分的尺寸，結(jié)合這個(gè)尺寸準(zhǔn)備好圖片等素材，或者根據(jù)找到的素材尺寸來修改規(guī)劃的草圖，這樣才能在制作網(wǎng)面的過程中井井有條。如果希望制作的頁面在不同分辨率的屏幕上顯示時(shí)都位于屏幕的中間，就要在設(shè)計(jì)時(shí)將表格的對(duì)齊方式設(shè)為

5、居中對(duì)齊。合并和拆分單元格的操作是最為常用的表格操作，一定要多多練習(xí)，熟練掌握。嵌套表格時(shí)一定要好好進(jìn)行規(guī)劃，由外向內(nèi)開始設(shè)計(jì)。通過屬性面板還可以對(duì)表格進(jìn)行多種設(shè)置，這些操作只有多加練習(xí)才能運(yùn)用自如。,5.2表格的應(yīng)用,案例5-2用表格工具制作網(wǎng)頁課堂小練習(xí)：將本節(jié)實(shí)例中的圖書換成你最喜歡的圖書資料，制作出新的網(wǎng)頁。,5.2表格的應(yīng)用,案例5-3使用布局表格工具制作網(wǎng)頁制作出一個(gè)名為“我的音樂盒”的網(wǎng)頁，使用布局表格進(jìn)行設(shè)計(jì)?！景咐治觥窟@次的案例不僅使用前面學(xué)到的普通表格設(shè)計(jì)，而且還要嘗試一種在新在布局模式下，使用布局表格對(duì)頁面進(jìn)行規(guī)劃。仔細(xì)分析這個(gè)頁面，可以看出，它主要是由logo欄、名稱

6、欄、導(dǎo)航條、左側(cè)項(xiàng)目區(qū)、右側(cè)內(nèi)容區(qū)和下方的版權(quán)聯(lián)系區(qū)共6個(gè)部分組成，那么在設(shè)計(jì)時(shí)，就可以結(jié)合這個(gè)特點(diǎn)來進(jìn)行操作。,5.2表格的應(yīng)用,案例5-3使用布局表格工具制作網(wǎng)頁【操作步驟】（演示操作）1新建文檔2進(jìn)入布局模式，繪制表格3切換回標(biāo)準(zhǔn)模式，插入圖像，輸入文字信息4保存網(wǎng)頁，預(yù)覽效果,5.2表格的應(yīng)用,案例5-3使用布局表格工具制作網(wǎng)頁案例小結(jié)：在布局模式中，使用布局表格設(shè)計(jì)頁面，避免了使用表格時(shí)“規(guī)規(guī)矩矩”的感覺和不夠靈活的缺點(diǎn)，而是通過鼠標(biāo)的拖動(dòng)就可以畫出需要大小的單元格。布局模式的使用使設(shè)計(jì)頁面布局更加方便、快捷、靈活。當(dāng)然，使用哪一種工具并不是固定的，在具體設(shè)計(jì)網(wǎng)頁的時(shí)候，要結(jié)合實(shí)際情

7、況和自己的使用習(xí)慣來決定選擇表格還是布局表來進(jìn)行頁面的布局。課堂小練習(xí)：將本次實(shí)例中的內(nèi)容換成你最喜歡的音樂，制作出自己的“音樂盒”。,5.2表格的應(yīng)用,層是一種網(wǎng)頁元素定位技術(shù)，使用它可以為頁面元素精確定位。層可以放置在頁面上的任意位置，也就是說，層可以在頁面中隨意移動(dòng)和定位，比表格更加靈活方便。在層里面，可以放置文本、圖像等對(duì)象。而且，利用層還可以實(shí)現(xiàn)網(wǎng)頁的部分重疊效果，這在表格中是不能做到的。除了可以定位外，利用層還可以控制頁面元素的顯示和隱藏。在Dreamweaver9中，“層”又被稱為“AP元素”。在本節(jié)內(nèi)容中，將通過兩個(gè)案例來學(xué)習(xí)層在進(jìn)行頁面設(shè)計(jì)時(shí)的使用方法和技巧。,5.3層的運(yùn)用

8、,案例5-4使用層實(shí)現(xiàn)網(wǎng)頁中圖片的顯示與隱藏制作一個(gè)與旅游相關(guān)的網(wǎng)頁，單擊頁面下方的每一個(gè)小圖片，都會(huì)在中間顯示出放大后的效果。,5.3層的運(yùn)用,案例5-4使用層實(shí)現(xiàn)網(wǎng)頁中圖片的顯示與隱藏【案例分析】在這個(gè)案例中，依然可以用表格或者布局表來對(duì)頁面進(jìn)行布局，不同的是，因?yàn)橹虚g的大圖片是會(huì)隨著瀏覽者單擊不同的小圖片而發(fā)生變化，所以這里簡單的使用表格是不夠的，要使用層來處理圖片的顯示和隱藏的效果。,5.3層的運(yùn)用,案例5-4使用層實(shí)現(xiàn)網(wǎng)頁中圖片的顯示與隱藏【操作步驟】（演示操作）1新建文檔2繪制表格,插入圖片3繪制層，設(shè)置層屬性4添加行為5保存網(wǎng)頁，預(yù)覽效果,5.3層的運(yùn)用,案例5-4使用層實(shí)現(xiàn)網(wǎng)頁

9、中圖片的顯示與隱藏案例小結(jié)：通過這個(gè)案例，了解層的概念，掌握如何創(chuàng)建層和使用層的方法，也練習(xí)通過層的顯示和隱藏來實(shí)現(xiàn)頁面的切換效果。那么，大家開動(dòng)腦筋想一想，在平時(shí)瀏覽網(wǎng)頁時(shí)，還有哪些效果是可以用層來實(shí)現(xiàn)的？課堂小練習(xí)：你最喜歡的景色是哪里的？將本節(jié)實(shí)例內(nèi)容換成你喜歡的風(fēng)景圖片，動(dòng)手練習(xí)框架的使用。,5.3層的運(yùn)用,案例5-5使用層實(shí)現(xiàn)網(wǎng)頁中圖片的顯示與隱藏相信大家都玩過拼圖游戲，把一張張小卡片拼在一起，組合成一個(gè)完整的圖像。今天這個(gè)案例的目標(biāo)就是利用層在網(wǎng)頁中制作出拼圖游戲來?！景咐治觥客ㄟ^觀察圖片可以看出，這個(gè)拼圖游戲是把4個(gè)圖片拼合起來，而且要實(shí)現(xiàn)在頁面內(nèi)的自由移動(dòng)。為了實(shí)現(xiàn)這個(gè)目的，

10、需要繪制4個(gè)層用來分別放置這些圖片。,5.3層的運(yùn)用,案例5-5使用層實(shí)現(xiàn)網(wǎng)頁中圖片的顯示與隱藏【操作步驟】（演示操作）1新建文檔2繪制表格，插入圖片3繪制層，插入圖片4添加行為5保存網(wǎng)頁，預(yù)覽效果課堂小練習(xí)：結(jié)合上面這個(gè)案例，自己學(xué)做一個(gè)類似的拼圖游戲，練習(xí)層的使用方法。,5.3層的運(yùn)用,框架的作用就是把一個(gè)頁面劃分為若干個(gè)小窗口，每個(gè)窗口中顯示不同的網(wǎng)頁，并且在替換窗口中的網(wǎng)頁時(shí)，對(duì)其他窗口不會(huì)有影響?？蚣苤饕蓛蓚€(gè)部分組成：框架集和單個(gè)框架?？蚣芗x了一個(gè)框架結(jié)構(gòu)的頁面中顯示的框架數(shù)、框架的大小、框架的位置以及各個(gè)框架的網(wǎng)頁文件和其他屬性?？蚣苁侵冈诳蚣茼撁嬷卸x的一個(gè)區(qū)域。,5.4框

11、架的使用,案例5-6使用框架工具制作網(wǎng)上商店頁面相信大家都知道網(wǎng)上開店吧，下面做一個(gè)用來展示商品的頁面，名為“丁鐺的店”，如圖所示。,5.4框架的使用,案例5-6使用框架工具制作網(wǎng)上商店頁面【案例分析】在這個(gè)頁面中，可以通過單擊左側(cè)的不同分類，來查看對(duì)應(yīng)的不同商品。每次出現(xiàn)的頁面，上部和左部都不會(huì)改變，只是右側(cè)的內(nèi)容變化。如果在每一個(gè)頁面中都要做出整個(gè)網(wǎng)頁來，是件很麻煩的事情。不過，在這個(gè)例子中，只需要利用框架，就簡單多了。,5.4框架的使用,案例5-6使用框架工具制作網(wǎng)上商店頁面【操作步驟】（演示操作）1新建文檔2插入框架，保存3設(shè)置框架屬性4在框架內(nèi)添加表格，插入圖片和文字5設(shè)置鏈接6保存

12、網(wǎng)頁，預(yù)覽效果,5.4框架的使用,案例5-6使用框架工具制作網(wǎng)上商店頁面案例小結(jié)：框架頁面常被用于信息導(dǎo)航，瀏覽者單擊某一個(gè)項(xiàng)目，相應(yīng)的內(nèi)容就會(huì)顯示在內(nèi)容框架中，查找信息非常方便，而且通過這種方法制作網(wǎng)頁，避免了相同部分的重復(fù)操作，給設(shè)計(jì)者帶來了便利。,5.4框架的使用,本章內(nèi)容是學(xué)習(xí)Dreamweaver進(jìn)行網(wǎng)頁設(shè)計(jì)的基礎(chǔ)，分別具體介紹了頁面布局、表格、層和框架的使用方法。表格主要用來構(gòu)建網(wǎng)頁的結(jié)構(gòu)，控制文本和圖形在頁面上出現(xiàn)的位置，使網(wǎng)頁上的各個(gè)元素排列的合理美觀。其中需要熟練掌握編輯表格的各種操作及使用表格布局頁面的方法。層可以用來實(shí)現(xiàn)一些移動(dòng)的效果，而且可以隨意的往層中放入文字、圖片及其他層。用它可以制作出頁面中