第4章 教育網(wǎng)站靜態(tài)頁面布局

1、本章主要講述Dreamweaver CS5的相關(guān)知識，通過4個任務(wù)分別講解了表格、超級鏈接、列表、圖文混排、表單和模板的相關(guān)知識。通過本章的學(xué)習(xí)，完成平頂山韓創(chuàng)教育網(wǎng)的主頁、列表頁和內(nèi)容頁的制作。PHP+CMS+DreamweaverPHP+CMS+Dreamweaver網(wǎng)站設(shè)計實例教程網(wǎng)站設(shè)計實例教程4.1.1 任務(wù)描述4.1.2 相關(guān)知識4.1.3 任務(wù)實施4.1.4 任務(wù)評價4.1.5 任務(wù)小結(jié)網(wǎng)站的首頁很重要，是一個企業(yè)的門面和形象的象征。一個成功的網(wǎng)站，首先是其靜態(tài)頁面的設(shè)置，主要就是首頁的設(shè)計。只要你的網(wǎng)站首頁足夠hold住全場，你的網(wǎng)站機會吸引更多的瀏覽者，哪怕只是簡單的瀏覽，也

2、對的網(wǎng)站內(nèi)容有所了解。表格表格是頁面布局中極為有用的設(shè)計工具。在設(shè)計頁面時，往往要利用表格來定位頁面元素。使用表格可以導(dǎo)入表格化數(shù)據(jù)，設(shè)計頁面分欄，定位頁面上的文本和圖像等。下面我們通過幾個例子來講解表格的一些基本知識和基本操作。1、創(chuàng)建課程表表格在Dreamweaver CS5中插入表格的方法主要有如下幾種：（1）將光標移動到要插入表格的位置。（2）執(zhí)行如下操作之一：執(zhí)行菜單“插入”“表格”命令按組合鍵打開“表格”對話框，如圖4-1所示。一、 制作課程表（3）輸入相應(yīng)的內(nèi)容：u 行數(shù)：表格由幾行構(gòu)成，在html代碼中，行數(shù)為。u 列數(shù)：表格每一行由幾個單元格構(gòu)成，在html代碼中，列數(shù)為。u

3、 表格寬度：可以輸入像素數(shù)，也可以用百分比表示。u 邊框粗細：表示表格的邊框大小，在html代碼中，邊框為。u 單元格邊距：表示單元格中的內(nèi)容與單元格邊框之間的距離，在html代碼中，單元格的邊距為cellpadding。u 單元格間距：表示相鄰兩個單元格之間的距離，在html代碼中，單元格的間距為cellspacing。u 標題：選擇哪些單元格的內(nèi)容是居中加粗顯示。u 標題：輸入表格的標題。一、 制作課程表一、 制作課程表（4）點擊“確定”按鈕，即可在當前光標位置插入一個表格，如圖4-2所示。2、輸入文字和插入圖片（1）單擊單元格，可以在單元格中輸入文字或插入圖片，效果如下圖4-3所示。一、

4、 制作課程表（2）選擇單元格，設(shè)置單元格內(nèi)容的水平和垂直對齊方式。選擇單元格的方式有如下幾種：u 鼠標左鍵單擊可以選擇任意一個單元格u 按著“ctrl”鍵，然后用鼠標左鍵單擊可以選擇多個單元格u 按著鼠標左鍵拖動可以選擇連續(xù)的單元格一、 制作課程表在單元格“屬性”面板中，可以設(shè)計單元格內(nèi)容水平、垂直方向上的對齊方式。如圖4-5所示。一、 制作課程表（3）在“屬性”面板中可以設(shè)置單元格內(nèi)容是否為“標題”樣式。選擇“標題”樣式后，單元格內(nèi)容自動居中對齊，字體加粗顯示。設(shè)置方式如圖4-6所示。一、 制作課程表（4）在“屬性”面板中，選擇“背景顏色”可以為一個或多個單元格選擇不同的背景顏色，效果如圖4

5、-7所示。一、 制作課程表3、拆分合并單元格（1）合并單元格。選擇需要合并的單元格，在屬性面板單擊 ，對選中的單元格進行合并。如下圖4-8所示，合并“中午”一行單元格，同樣的方式合并1-4節(jié)，和5-8節(jié)，完成后的效果圖如圖4-9所示。一、 制作課程表（2）拆分單元格。單擊“屬性”面板上的 ，可以將一個單元格拆分為多個單元格。選擇“1-2節(jié)3-4節(jié)”單元格單擊 按鈕出現(xiàn)拆分單元格窗口，如圖4-10所示。一、 制作課程表按照行、列的拆分把“1-2節(jié)3-4節(jié)”單元格和“5-6節(jié)7-8節(jié)”單元格依次進行拆分，拆分后的效果如圖4-11所示。一、 制作課程表4、給課程表添加背景圖片（1）選擇整個表格，選擇

6、表格的方式有如下幾種：u 選中任一單元格后，右鍵單擊，選擇“表格”“整個表格”，如圖4-12所示。u 講鼠標移動到表格右下角，當出現(xiàn) ，單擊選中整個表格，如圖4-13所示。一、 制作課程表（2）單擊“拆分”視圖 ，在標記中添加background屬性來添加背景圖片，方式如圖4-14所示。一、 制作課程表（3）表格的背景圖片添加完成后，需要刪除單元格的背景顏色實現(xiàn)最終的效果，效果如圖4-15所示。添加背景圖片的方式同樣適用有單元格，設(shè)置方法與表格相同，在此不再贅述一、 制作課程表設(shè)置表格的邊框可以制作邊框為“1像素”的表格，但是這種表格的邊框看起來仍然不夠美觀，我們可以利用單元格的間距與背景顏色

7、來制作細線表格。下圖4-16給出邊框為“1像素”的表格和細線表格的區(qū)別，細線表格是不是更加精美？準備好一起來制作細線表格吧！二、制作細線表格（1） 插入一個三行三列的表格，各項參數(shù)設(shè)置如圖4-17所示，其中需要特別注意的是單元格的間距設(shè)置為1像素，這一點至關(guān)重要，是我們細線表格能否制作成功很重要的一步。二、制作細線表格（2）選擇“拆分”模式，設(shè)置整個表格的背景顏色為紅色（顏色可以任意指定），設(shè)置方式如圖4-18所示。（3）依次選中所有的單元格，設(shè)置單元格的背景顏色為白色，如圖4-19所示。（4）保存，F(xiàn)12預(yù)覽可以看到效果。為了更明顯的看到細線表格的細，現(xiàn)制作邊框為1像素的表格進行對表，效果如

8、下圖4-20所示。二、制作細線表格二、制作細線表格圖4-18圖4-19精美的虛線表格在網(wǎng)頁中的應(yīng)用非常多，接下來我們來學(xué)習(xí)虛線表格的制作。制作虛線表格我們用到一張輔助圖片，在image文件夾下有一張名稱為dot.jpg圖片。（1）插入一張表格，參數(shù)設(shè)置如圖4-21所示。邊框粗細，單元格間距，單元格邊距設(shè)置為0。三、制作虛線表格（2）依次選中2、4、6行單元格，背景圖片設(shè)置為dot.jpg，方式如圖4-22所示。三、制作虛線表格（3）將第2、4、6行的高度設(shè)置為3像素（圖片的高度為3，設(shè)置行高由圖片的尺寸來決定），同時很重要的一點：在拆分模式下，我們看到雖然2、4、6行沒有任何內(nèi)容，但是卻有一個

9、&nbsp；，這個符號在XHTML代碼中是表示空格，空格默認占據(jù)16像素的高度。為了實現(xiàn)我們設(shè)置的行高3像素，我們必須要將2、4、6行代碼中的&nbsp；刪除掉。方式如圖4-23所示。三、制作虛線表格三、制作虛線表格圖4-23圖4-24（4）輸入文字后保存，F(xiàn)12預(yù)覽，效果如圖4-24所示。1、分析效果圖首先，我們來分析一下韓創(chuàng)教育網(wǎng)主頁的效果圖，該主頁效果圖如圖4-25所示。根據(jù)效果圖我們劃分出相應(yīng)的布局區(qū)域，如圖4-26所示。2、使用表格布局網(wǎng)頁（1）制作首頁頁頭u 在“設(shè)計”視圖下，執(zhí)行“插入”“表格”命令。插入一個1行1列的表格，寬度為988像素，其他屬性為0，設(shè)置表格

10、對齊方式為居中對齊。u 單擊該表格中的單元格，執(zhí)行“插入”“圖片”命令，插入圖片logo.jpg，效果如圖4-27所示。2、使用表格布局網(wǎng)頁（2）制作導(dǎo)航欄執(zhí)行菜單“插入”“表格”命令，插入一個1行8列的表格。設(shè)置表格的寬度為988像素，表格的邊框、單元格邊距、單元格間距都設(shè)置為0。設(shè)置表格對齊方式為居中對齊，設(shè)置前7個單元格每個寬度為100像素，高度為52像素，背景圖片為navback.jpg。第8個單元格插入圖片search.jpg，然后輸入導(dǎo)航欄的欄目文字，效果如圖4-28所示。2、使用表格布局網(wǎng)頁（3）制作banner執(zhí)行菜單“插入”“表格”命令，插入一個1行1列的表格。表格的寬度設(shè)置

11、為988像素，表格的邊框、單元格邊距、單元格間距都設(shè)置為0。設(shè)置表格對齊方式為居中對齊。單擊表格中的單元格，插入圖片banner.jpg。制作完成后效果如圖4-29所示。2、使用表格布局網(wǎng)頁（4）制作上部主體內(nèi)容u 執(zhí)行菜單“插入”“表格”命令，插入一個1行3列的表格。設(shè)置表格的寬度為988像素，表格的邊框、單元格邊距、單元格間距都設(shè)置為0像素。設(shè)置表格對齊方式為居中對齊。u 選擇該表格的第一個單元格，設(shè)置其寬度為390像素，單元格對齊方式為水平居中、垂直頂端對齊。2、使用表格布局網(wǎng)頁u 選擇該表格的第二個單元格，設(shè)置其寬度為290像素，單元格對齊方式為水平居中、垂直頂端對齊。u 選擇該表格的

12、第三個單元格，設(shè)置其寬度為308像素，單元格對齊方式為水平居中、垂直頂端對齊。2、使用表格布局網(wǎng)頁（5）制作欄目間分隔表格u 執(zhí)行菜單“插入”“表格”命令，插入一個1行1列的表格。設(shè)置表格的寬度為988像素，表格的邊框、單元格邊距、單元格間距都設(shè)置為0像素。設(shè)置表格對齊方式為居中對齊。u 選中該表格的單元格，設(shè)置單元格的高度設(shè)置為4像素。在“拆分”模式下，刪除該單元格中的 。這樣做的原因，在前面“虛線表格”的制作中進行了詳細的講解，在此不贅述。制作分隔頁面的作用是為了使頁面看起來更加美觀。2、使用表格布局網(wǎng)頁（6）制作“新聞動態(tài)”欄目1）制作“新聞動態(tài)”欄目標題行u 執(zhí)行菜單

13、“插入”“表格”命令，插入一個1行1列的表格。設(shè)置表格的寬度為390像素，表格的邊框、單元格邊距、單元格間距都設(shè)置為0像素，設(shè)置單元格對齊方式為水平居中、垂直頂端。u 單擊選中該單元格，執(zhí)行菜單“插入”“表格”命令，插入一個1行2列的表格。u 設(shè)置表格的寬度為390像素，表格的邊框、單元格的邊距、單元格的間距都設(shè)置為0像素。設(shè)依次設(shè)置3個單元格寬度為：110像素、106像素、174像素，設(shè)置單元格高度為34像素。在“拆分”模式下，給第一和第二個單元分別設(shè)置背景圖片backtitle1.jpg和backtitle2.jpg。2、使用表格布局網(wǎng)頁2）制作“新聞動態(tài)”欄目主體u 單擊圖4-31中紅色

14、線框選中的單元格，執(zhí)行菜單“插入”“表格”命令，插入一個16行1列的表格。表格寬度設(shè)置為390像素，表格的邊框、單元格的邊距、單元格的間距都設(shè)置為0像素。設(shè)置表格對齊方式為居中對齊。u 根據(jù)“相關(guān)知識”中講解的“制作虛線表格”的方式，制作虛線表格。依次選中表格的第2、4、6、8、10、12、14、16行，設(shè)置單元格的高度為3像素，背景圖片為dot.jpg。在“拆分”模式下，依次刪除第2、4、6、8、10、12、14、16行中的 。制作的原理在“制作虛線表格”中有詳細的講解，有問題的同學(xué)可以返回查閱。2、使用表格布局網(wǎng)頁3）輸入內(nèi)容 根據(jù)效果圖依次設(shè)置單元格的對齊方式，輸入文字

15、，最終的效果如圖4-33所示。2、使用表格布局網(wǎng)頁（7）制作“咨詢 成功案例”欄目為了美觀在“新聞動態(tài)”欄目制作完成后制作分隔表格。制作完成后進行“咨詢 成功案例”欄目的制作。1）制作“咨詢 成功案例”欄目頁頭u 執(zhí)行菜單“插入”“表格”命令，插入一個1行1列的表格。設(shè)置表格的寬度為390像素，表格的邊框、單元格邊距、單元格間距都設(shè)置為0像素，設(shè)置單元格對齊方式為水平居中垂直頂端?！白稍?成功案例”欄目頁頭制作方式與“新聞咨詢”欄目頁頭制作相似，在此不再贅述。制作完成后的效果如圖4-35所示。2、使用表格布局網(wǎng)頁2）制作“咨詢 成功案例”欄目主體u 單擊單元格，執(zhí)行菜單“插入”“表格”命令，插

16、入一個4行3列的表格。表格的寬度設(shè)置為390像素，表格的邊框、單元格的邊距設(shè)置為0像素，單元格的間距設(shè)置為5像素。設(shè)置單元格對齊方式為水平居中、垂直居中，效果如圖4-36所示。圖4-36圖4-352、使用表格布局網(wǎng)頁3）輸入內(nèi)容u 在相應(yīng)的位置輸入文字，插入圖片，設(shè)置CSS樣式后，最終效果如圖4-37所示。2、使用表格布局網(wǎng)頁（8）制作下部區(qū)域u 執(zhí)行菜單“插入”“表格”命令，插入一個1行2列的表格。設(shè)置表格的寬度為988像素，表格的邊框、單元格邊距、單元格間距設(shè)置為0像素。u 依次選中2個單元格，設(shè)置單元格對齊方式為水平居中垂直頂端。左側(cè)單元格的寬度為680像素，右側(cè)單元格的寬度為308像素

17、。u 左側(cè)單元格中制作“管理培訓(xùn)”欄目，表格的寬度設(shè)定為660像素。制作完成后的效果圖如下4-39所示。u 右側(cè)單元格制作“服務(wù)項目”和“企業(yè)鏈接”欄目，表格的寬度設(shè)定為300像素。2、使用表格布局網(wǎng)頁圖4-392、使用表格布局網(wǎng)頁1）“服務(wù)項目”的制作方式如上“新聞動態(tài)”欄目制作，在此不再贅述。2）“企業(yè)鏈接”頁面的制作u 制作方法如下：執(zhí)行菜單“插入”“表格”命令，插入一個2行2列的表格。設(shè)置表格的寬度為300像素，表格的邊框、單元格邊距0，設(shè)置單元格的邊距為5，操作如下圖4-40所示。u 單元格的對齊方式設(shè)置為水平垂直居中更對齊。依次選中4個單元格，在單元中執(zhí)行“插入”“圖片”。選中插入

18、的圖片，在下方的“屬性面板”中，設(shè)置圖片的邊框為1像素 。完成操作后如下圖4-41所示。2、使用表格布局網(wǎng)頁圖4-41圖4-402、使用表格布局網(wǎng)頁（9）制作主頁頁腳u 執(zhí)行菜單“插入”“表格”命令，插入一個1行1列的表格。u 設(shè)置表格的寬度為988像素，表格的邊框、單元格邊距、單元格間距都設(shè)置為0像素，設(shè)置單元格對齊方式為水平居中垂直居中。u 選中表格的單元格，再次輸入一個2行1列的表格，輸入文字。完成制作后的效果如下圖4-43所示。2、使用表格布局網(wǎng)頁（10）完成主頁制作在 中輸入網(wǎng)頁標題，保存為index.html。按F12瀏覽完成主頁的制作，最終效果圖如下4-44所示。評分項目評分項目

19、評分標準評分標準分值分值比例比例任務(wù)結(jié)果任務(wù)結(jié)果熟練掌握框架的應(yīng)用-制作內(nèi)容頁模板010050%任務(wù)過程任務(wù)過程根據(jù)任務(wù)實施過程的態(tài)度、團隊協(xié)作、拓展能力和創(chuàng)新能力等方面進行考核酌情打分20%知識的掌握知識的掌握表格布局酌情打分20%任務(wù)完成時間任務(wù)完成時間在規(guī)定的時間內(nèi)完成任務(wù)者得滿分，每推延1小時扣5分0100分10%本任務(wù)主要講述的是采用表格來布局網(wǎng)頁，使用表格布局網(wǎng)頁。表格用于在頁面上顯示表格式數(shù)據(jù)，以及對文本和圖形進行布局的強有力工具。利用表格布局網(wǎng)頁，可以使整個頁面更規(guī)格的防止網(wǎng)頁元素，并使條目更加清晰。4.2.1 任務(wù)描述4.2.2 相關(guān)知識4.2.3 任務(wù)實施4.2.4 任務(wù)評

20、價4.2.5 任務(wù)小結(jié)本任務(wù)要求我們制作平頂山韓創(chuàng)教育網(wǎng)的列表頁面。該列表頁面要作為“韓創(chuàng)教育”新聞欄目等一系列欄目的列表頁，要求制作出的列表頁面美觀實用。列表頁是phpcms織夢中很重要的一個模板，要制作好列表頁面，我們除了要使用到任務(wù)一中講述的知識，還要掌握列表、超級鏈接的相關(guān)知識。準備好一起進入任務(wù)二的學(xué)習(xí)吧！Html中有三種列表，分表是：項目列表Ul，編號列表OL 和定義列表DL。1、項目列表DW中“插入”面板中選擇“文本”選項，可以選擇“UL 項目列表”，如圖4-45所示。一、列表UL 項目列表的使用方式如下：列表項1列表項2列表項3列表項一、列表：項目列表其中稱為列表項，在項目列表

21、中前方默認的符號為，使用CSS可以改變默認的效果，此知識我們將在第五章中闡述。2、編號列表編號列表的結(jié)構(gòu)為：項目1項目2項目一、列表：編號列表我們通過中國人口大省排名來展示編號列表，效果如圖4-48所示3、定義列表定義列表的結(jié)構(gòu)為：定義術(shù)語定義說明一、列表：定義列表接下來，我們通過例子來看一下什么是定義列表，請看上圖4-49超級鏈接是網(wǎng)頁互相聯(lián)系的橋梁，超級鏈接可以看做是一個“熱點”，它可以從當前網(wǎng)頁定義的位置跳轉(zhuǎn)到其他位置，包括當前頁的某個位置、Internet、本地硬盤或是局域網(wǎng)上的其他文件，甚至跳轉(zhuǎn)到聲音、圖像等多媒體文件。接下來我們通過網(wǎng)頁中國美食網(wǎng)，來掌握常見的超級鏈接的制作方式。二

22、、超級鏈接1、布局網(wǎng)頁 輸入圖文此內(nèi)容涉及表格的布局，該內(nèi)容在任務(wù)一中，已經(jīng)進行了詳細的講解，在此不再贅述。制作完成后的網(wǎng)頁如下圖4-50所示。二、超級鏈接2、 制作導(dǎo)航條（1）創(chuàng)建文字超級鏈接創(chuàng)建文字超級鏈接的方法如下：1）選中要創(chuàng)建超級鏈接的文字2）在“屬性”面板中，執(zhí)行如下操作之一u單擊“鏈接”文本框右側(cè)的文件夾圖標，瀏覽并選擇一個超鏈接文件。u在“鏈接”文本框中直接輸入文檔的路徑和文件名。u使用“指向文件”按鈕 ，將超級鏈接指向“文件”面板中的頁面，如圖4-51所示。二、超級鏈接二、超級鏈接（2）創(chuàng)建圖片超級鏈接1）圖像超鏈接創(chuàng)建方式與文本超級鏈接一樣，區(qū)別在于選擇的不是文字而是圖片。

23、如下圖4-54所示。二、超級鏈接2）圖像熱點超鏈接圖像熱點也叫圖像地圖，是指在一副圖像中定義若干個區(qū)域（這些區(qū)域被稱為熱點），每個區(qū)域中制定一個不同的超鏈接，當單擊不同區(qū)域時可以跳轉(zhuǎn)到相應(yīng)的目標頁面。圖片熱點工具的使用如下圖4-55所示。二、超級鏈接（3）建立外部超級鏈接外部超級鏈接是指來自網(wǎng)站以外的鏈接。建立外部鏈接的方式很簡單，選擇需要創(chuàng)建鏈接的文字或圖片，在“屬性”面板的“鏈接”文本框里輸入網(wǎng)站的URL地址即可。如下圖4-57 在文字“美食天下”上建立外部超級鏈接，連接到“美食天下”網(wǎng)站。二、超級鏈接（4）建立Email郵件超級鏈接在很多網(wǎng)站中會看到網(wǎng)站管理員或公司的Email郵件超級鏈

24、接，單擊這些鏈接，將打開默認的電子郵件程序，并自動填寫郵件地址。建立郵件超級鏈接的方式是：選擇相應(yīng)的文字或圖片，在“屬性”面板的“鏈接”地址欄中輸入：mailto:郵箱地址，如下圖4-58在“聯(lián)系我們”文字上建立郵件超級鏈接。二、超級鏈接（5）建立下載鏈接如果鏈接到的文件不是HTML文件，則該文件將作為下載文件。建立下載鏈接的方式是：選擇建立鏈接的文字或圖片，在“屬性”面板的“鏈接”地址欄中輸入下載文件的名稱。如下圖4-59，點擊“本期雜志”下載對應(yīng)的文件。二、超級鏈接（6）錨記錨記（錨點超級鏈接）是指可在一個網(wǎng)頁的某個位置定義書簽，然后用戶可以建立指向這些書簽的鏈接。在頁面中建立錨記的方式是

25、：首先選擇建立書簽的位置。如下圖4-60，我們在“去摩登日料店吃爐端燒(圖)”后面建立：單擊“插入”面板“命名錨記”。在彈出的窗口中輸入錨記名稱（錨記名稱不能包含空格），例如：我們將錨記命名為“top”，設(shè)置如下圖4-61所示。二、超級鏈接u 選擇需要建立錨記鏈接的文字和圖片，在“屬性”面板的“鏈接”地址欄中輸入：#+錨記名稱，建立錨記鏈接。我們在命名錨記的時候起名為“top”，所以在鏈接的地址中需要輸入的是“#top”，如下圖4-62所示。u 設(shè)置完成后當單擊網(wǎng)頁中的文字“【頂部】”時，會跳轉(zhuǎn)到網(wǎng)頁的頂部即我們設(shè)置的錨記的位置。表格布局在任務(wù)一中已經(jīng)進行了詳細的講述再次不贅述，此處僅講解“管

26、理培訓(xùn)”欄目的制作方式來對表格布局知識進行回顧。u 執(zhí)行菜單“插入”“表格”命令，插入1行2列的表格。設(shè)置表格的寬度為220像素。設(shè)置表格的邊框、單元格的邊距、單元格的間距為0像素。u 設(shè)置表格的第一個單元格的寬度為110像素，高度為34像素。在“拆分”模式下，設(shè)置單元格的背景圖片為“back_title1.jpg”。設(shè)置單元格對齊方式為：水平居中、垂直居中對齊。u 設(shè)置第二個單元格的對齊方式為：水平右對齊垂直居中對齊。1、使用表格布局頁面u 執(zhí)行菜單“插入”“表格”命令，插入一個5行1列的表格。表格的寬度設(shè)置為220像素，設(shè)置表格的邊框和單元格邊距為0像素，單元格間距為10像素，各項參數(shù)設(shè)置

27、如下圖4-66所示。u 單元格的對齊方式為：水平居中、垂直居中對齊。設(shè)置完成后輸入文本內(nèi)容，制作效果如圖4-67所示。1、使用表格布局頁面為導(dǎo)航條建立超級鏈接，導(dǎo)航條中輸入的是文字，所以建立的是文字超級鏈接。建立完成后的效果如圖4-69所示。2、建立文字鏈接在圖片上建立超級鏈接：選擇圖片，在“屬性”面板的“鏈接”的地址欄上輸入對應(yīng)的鏈接地址。制作方法如下圖4-70所示。3、建立圖片超級鏈接制作主內(nèi)容區(qū)的列表項目，對列表項目建立超級鏈接，制作完成后的效果如圖4-71所示。4、建立列表內(nèi)容制作完成最終效果圖如右圖4-72所示5、制作最終效果評分項目評分標準分值比例任務(wù)結(jié)果熟練掌握列表知識-制作列表

28、頁欄目列表04050%熟練掌握文字超級鏈接的使用-制作導(dǎo)航條030熟練掌握圖片超級鏈接的使用-制作鏈接企業(yè)030任務(wù)過程根據(jù)任務(wù)實施過程的態(tài)度、團隊協(xié)作、拓展能力和創(chuàng)新能力等方面進行考核酌情打分20%知識的掌握列表、超級鏈接酌情打分20%任務(wù)完成時間在規(guī)定的時間內(nèi)完成任務(wù)者得滿分，每推延1小時扣5分0100分10%本任務(wù)我們主要講述了列表頁面的制作，在列表頁面的制作中，我們熟練的掌握了列表和超級鏈接的使用。超級鏈接是組成網(wǎng)站的基本元素，是它將千千萬萬個網(wǎng)頁組織成一個個網(wǎng)站，又是它將千千萬萬個網(wǎng)站組織成了風(fēng)靡全球的WWW，因此可以說超級鏈接就是WEB的靈魂。4.3.1 任務(wù)描述4.3.2 相關(guān)知

29、識4.3.3 任務(wù)實施4.3.4 任務(wù)評價4.3.5 任務(wù)小結(jié)本任務(wù)要求我們制作“平頂山韓創(chuàng)教育網(wǎng)”內(nèi)容頁面的制作，要求根據(jù)內(nèi)容頁面的效果圖使用Dreamweaver CS5制作出美觀大方的內(nèi)容頁面。為完成任務(wù)，我們需要掌握圖文混排的知識，以及表單的相關(guān)知識。接下來請打開Dreamweaver CS5，一起進入任務(wù)三的學(xué)習(xí)。1、搭建lufood.html頁面根據(jù)我們學(xué)過的表格布局知識，搭建頁面。搭建完成頁面如下圖4-73所示。一、圖文混排2、設(shè)置圖文混排在內(nèi)容區(qū)輸入文字，插入圖片，在“屬性”面板中設(shè)置圖片的“對齊”方式來實現(xiàn)圖文混排。一、圖文混排設(shè)置“屬性”面板中的“對齊”的含義如下：u 默認

30、值：制定基線對齊u 基線：將文本的基線與選定對象的底部對齊u 頂端：將圖像的頂端與當前行中最高項的頂端對齊u 居中：經(jīng)圖像的中線與當前行的基線對齊u 底部：將文本的底部與選定對象的底部對齊3、最終效果圖圖文混排設(shè)置完成后，最終效果如下圖4-75所示。一、圖文混排1、搭建regist.html頁面頁面搭建完成后的效果，同上圖4-73所示，再次不贅述。2、制作注冊登入模塊在Dreamweaver CS5中，制作表單可以通過“表單對象”來實現(xiàn)。二、表單表單對象從左到右的順序依次是：表單、文本字段、隱藏域、文本域、復(fù)選框、單選按鈕、列表/菜單、跳轉(zhuǎn)菜單、圖像域、文件域、命令按鈕、標簽、字段集和Spry

31、構(gòu)件等。二、表單（1）插入表單單擊“插入”面板“表單”類別中的“表單”按鈕 生成的表單如圖4-77所示。在設(shè)計視圖中，表單以紅色的輪廓虛線表示。選中表單，其“屬性”面板如圖4-78所示。二、表單（2）插入文本域單擊“插入”面板“表單”類別中的“文本域”按鈕 ，生成文本域如圖4-79所示。二、表單文本域的各個屬性含義如下：u 字符寬度：指定域中最多可顯示的字符數(shù)。此數(shù)字可以小于“最多字符數(shù)”u 初始值：制定在首次加載表單時域中顯示的值。u 類型：選擇“單行”顯示的是輸入的字符，選擇“密碼”顯示的是“*”符號。（3）插入單選按鈕單擊“插入”面板“表單”類別中的“單選按鈕”按鈕 ，生成單選按鈕如圖4

32、-80所示。單選按鈕代表互相排斥的選擇。要實現(xiàn)這一效果，同一組單選按鈕的名稱必須一致。二、表單（4）插入復(fù)選框單擊“插入”面板“表單”類別中的“復(fù)選框”按鈕 ，生成復(fù)選框如圖4-81所示。復(fù)選框用于在頁面中某些地方列出幾個項目，允許用戶在一組選項中選擇多個選項。每個復(fù)選框都是一個獨立的元素，都必須有一個唯一的名稱。二、表單（5）插入 列表/菜單單擊“插入”面板“表單”類別中的“列表/菜單”按鈕 ，生成列表如圖4-82所示。二、表單（6）插入文本區(qū)域單擊“插入”面板“表單”類別中的“文本區(qū)域”按鈕 ，生成文本區(qū)域如圖4-83所示。二、表單（7）按鈕單擊“插入”面板“表單”類別中的“按鈕”按鈕 ，

33、生成復(fù)選框如圖4-84所示。按鈕對于一個交互表單來說是必不可少的。二、表單（8）隱藏域隱藏域用語存儲用戶輸入的信息，如用戶姓名、電子郵件地址或者愛好的查看方式，并在該用戶下次訪問此站點時使用這些數(shù)據(jù)。（9）圖像域在表單中，圖像域一般用于表單的相關(guān)操作。它與按鈕的功能和類型相似，只是以圖片的方式顯示。用戶可以再表單中插入一個使用圖像域生成的圖形化按鈕。（10）文件域使用文件域可以讓訪問者上傳自己的文件到服務(wù)器。二、表單學(xué)習(xí)了圖文混排和表單的知識后，讓我們一起來制作韓創(chuàng)教育網(wǎng)站的內(nèi)容頁面吧！首先我們來分析一下內(nèi)容頁的效果圖4-86，同時對內(nèi)容頁進行布局劃分，劃分完成后如圖4-87所示。使用學(xué)過的表

34、格布局，對頁面進行布局，布局完成后的效果圖如下圖4-88所示1、布局頁面在相關(guān)知識中，我們講述了表單的相關(guān)知識，接下來我們動手制作“搜索”欄目。（1）在單元格插入“表單” 。（2）在“表單”中插入“文本域” 。（3）在“表單”中插入“按鈕”。按鈕值輸入“搜索”。2、制作“搜索”欄目輸入文字，插入圖片，設(shè)置圖片的對齊方式，如下圖4-92所示。3、輸入文字，插入圖片保存制作的頁面，按F12進行預(yù)覽，完成頁面的制作。最終完成如下圖4-93所示。4、制作完成評分項目評分標準分值比例任務(wù)結(jié)果熟練掌握表格布局知識-布局韓創(chuàng)教育內(nèi)容頁 01050%50%熟練掌握超級鏈接的使用-制作頁面超級鏈接010熟練掌握

35、圖文混排知識-制作新聞頁面 030任務(wù)過程根據(jù)任務(wù)實施過程的態(tài)度、團隊協(xié)作、拓展能力和創(chuàng)新能力等方面進行考核酌情打分20%20%知識的掌握圖文混排酌情打分20%20%任務(wù)完成時間在規(guī)定的時間內(nèi)完成任務(wù)者得滿分，每推延1小時扣5分020020分10%10%本任務(wù)我們主要學(xué)習(xí)了圖文混排以及表單的知識。網(wǎng)頁內(nèi)容的排版精美與否，圖文混排起著非常重要的作用，熟練掌握圖文混排的使用方法，可以讓我們的網(wǎng)頁制作的更加美觀。表單是用語實現(xiàn)瀏覽者與網(wǎng)頁制作者之間信息交互的一種網(wǎng)頁對象，在Internet中表單被廣泛應(yīng)用于各種信息的搜索與反饋。在今后的php內(nèi)容學(xué)習(xí)中也會廣泛應(yīng)用到表單，所以同學(xué)們要熟練掌握表單的相

36、關(guān)知識。4.4.1 任務(wù)描述4.4.2 相關(guān)知識4.4.3 任務(wù)實施4.4.4 任務(wù)評價4.4.5 任務(wù)小結(jié)本任務(wù)我們主要講述模板的相關(guān)知識，模板屬于站點資源，可以很大程度上提高網(wǎng)頁制作的效率。如果希望站點中的網(wǎng)頁享有某種特性，如相同的布局結(jié)構(gòu)、相似的導(dǎo)航欄等內(nèi)容，模板是非常有用的。準備好了嗎？跟我一起進入任務(wù)四的學(xué)習(xí)吧。新建模板的方式有兩種：一種是從現(xiàn)有文檔中新建模板，另一種是從新建的空白文檔中新建模板。接下來，我們演示制作從現(xiàn)有文檔中新建模板的方式。我們利用已經(jīng)存在的lufood.html（魯菜菜單特點）頁面，制作生成模板用來制作其他菜系特點的頁面。一、新建模板首先，我們觀察lufood.html頁面，確定保存為模板的區(qū)域。由圖4-94，我們可以分析出保存為模板的區(qū)域。紅色線框內(nèi)的內(nèi)容是變化的，其他區(qū)域的內(nèi)容是固定的。一、新建模板1、布局模板頁面利用我們學(xué)過的表格，圖文知識搭建模板頁面，搭建完成后的頁面如下圖4-95所示。一、新建模板2、創(chuàng)建可編輯區(qū)域在模板中，可編輯區(qū)域是要制作的頁面的一部分，對于基于模板的頁面，能夠改變可編輯區(qū)域的內(nèi)容。創(chuàng)建可編輯區(qū)域，可以執(zhí)行以下操作：u選擇要設(shè)置為可編輯區(qū)域的文本或內(nèi)容。u