第4章 情景4——建立公司在線電子相冊(cè)

1、第四章第四章 情景情景4建立公司在線電子相冊(cè)建立公司在線電子相冊(cè) 本章主要介紹了在Dreamweaver CS5中如何使用表格。表格是網(wǎng)頁(yè)中非常重要的元素，它的作用主要有兩個(gè)：一是對(duì)數(shù)據(jù)進(jìn)行合理的組織，另外一個(gè)就是用來(lái)布局網(wǎng)頁(yè)。使用表格可以簡(jiǎn)單快速的進(jìn)行網(wǎng)頁(yè)布局，但是維護(hù)起來(lái)相對(duì)復(fù)雜，所以對(duì)于后期維護(hù)較高的網(wǎng)頁(yè)還是采用Div+CSS布局。本章內(nèi)容通過(guò)建立某公司在線電子相冊(cè)深入學(xué)習(xí)表格。具體涉及以下內(nèi)容：插入表格設(shè)置表格和單元格屬性修改表格嵌套表格表格布局頁(yè)面4.1 任務(wù)一：規(guī)劃相冊(cè)并且制作相冊(cè)目錄任務(wù)一：規(guī)劃相冊(cè)并且制作相冊(cè)目錄4.1.1 知識(shí)要點(diǎn)知識(shí)要點(diǎn)1表格的插入表格的插入 一個(gè)表格由行、

2、列、單元格三個(gè)部分組成，在“菜單欄”中選擇“插入”|“表格”（Ctrl+Alt+T），或者在“插入欄”選擇“常用”或“布局”類別單擊表格圖標(biāo)，彈出對(duì)話框如圖所示。2選擇表格、單元格選擇表格、單元格在表格的邊框線上單擊或選擇狀態(tài)欄上的標(biāo)簽。拖選表格（類似文本的選擇）。將鼠標(biāo)放置到一行的左側(cè)，單擊選擇一行或選擇狀態(tài)欄上的標(biāo)簽。將鼠標(biāo)放置到一列的上面，單擊選擇一列。按Ctrl鍵單擊需要選擇的單元格，可以選擇不連續(xù)的單元格。按shift鍵選擇連續(xù)的單元格。拖動(dòng)選擇單元，將光標(biāo)定位一個(gè)單元格之內(nèi)，拖動(dòng)鼠標(biāo)覆蓋需要選擇的單元格區(qū)域或選擇狀態(tài)欄上的標(biāo)簽。3設(shè)置表格和單元格屬性設(shè)置表格和單元格屬性選擇表格后，

3、打開(kāi)“屬性檢查器”如圖所示,可以設(shè)置屬性。行、列數(shù)：設(shè)置表格行數(shù)和列數(shù)。寬、高：設(shè)置表格的寬度和高度，單位可以是像素也可以百分比。填充（單元格邊距）：?jiǎn)卧窭锏膬?nèi)容和單元格邊的距離。間距（單元格間距）：?jiǎn)卧窈蛦卧裰g的距離。對(duì)齊方式：表格在頁(yè)面中的對(duì)齊（左、中、右）。邊框：表格邊框的粗細(xì)。類：設(shè)置表格的CSS樣式。清除行高、列寬：刪除表格中所有指定的行高和列寬。表格寬度單位的轉(zhuǎn)換： 表示單位轉(zhuǎn)換為像素， 表示單位轉(zhuǎn)換為百分比。選擇單元格后，打開(kāi)“屬性檢查器”如圖所示，設(shè)置單元格屬性。單元格文本水平和垂直方向的對(duì)齊方式。單元格的寬度和高度。背景顏色、背景圖像。不換行：強(qiáng)制單元格不自動(dòng)換行。單

4、元格合并：選中同行或同列相鄰的單元格，進(jìn)行合并。單元格拆分：選中一個(gè)單元格進(jìn)行拆分成多行或多列。 4刪除、添加表格的行和列刪除、添加表格的行和列 （1）刪除行或列：選擇要?jiǎng)h除的行、列，在“菜單欄”中選擇“修改”|“表格”|“刪除行、列”或直接按下“Delete”鍵。（2）添加行或列：選擇要添加的行、列位置的單元格，在“”菜單欄選中擇“修改”|“表格”|“插入行、列”，或點(diǎn)擊右鍵，在彈出的快捷菜單中選擇“插入行、列”命令。5嵌套表格嵌套表格 在一個(gè)表格的單元格內(nèi)插入另一個(gè)表格稱為嵌套表格，這個(gè)表格的寬度要受它所在單元格的寬度限制，一般嵌套表格的寬度設(shè)置的用相對(duì)單元格寬度的百分比為單位。6表格式數(shù)

5、據(jù)的導(dǎo)入表格式數(shù)據(jù)的導(dǎo)入 將具有表格數(shù)據(jù)特點(diǎn)的文本文件（文本通過(guò)逗號(hào)、tab、空格等符號(hào)進(jìn)行分割），以表格的形式導(dǎo)入到Dreamweaver CS5中。具體操作在“菜單欄”中選擇“插入”|“表格對(duì)象”|“導(dǎo)入表格式數(shù)據(jù)”命令打開(kāi)“導(dǎo)入表格式數(shù)據(jù)”對(duì)話框，選擇“素材4”文件夾中的的文本文件，設(shè)置分隔符、表格寬度、邊框等，單擊“確定”按鈕。如圖所示。7表格數(shù)據(jù)的排序表格數(shù)據(jù)的排序在Dreamweaver CS5 中可以對(duì)表格中的數(shù)據(jù)排序，可以按“筆畫(huà)”、“數(shù)字”，“日期”和“拼音”四個(gè)類型排序，并且可以對(duì)三個(gè)關(guān)鍵字排序。具體操作是選中表格，在“菜單欄”中選擇“命令”|“排序表格”，在打開(kāi)的“排序表

6、格”對(duì)話框中設(shè)置為哪列排序，按照什么類型排序（字母和數(shù)字），怎么排序（升序降），如圖所示。（注：第一行的數(shù)據(jù)作為表頭，不參加排序）4.1.2 工作任務(wù)和設(shè)計(jì)效果工作任務(wù)和設(shè)計(jì)效果 本任務(wù)是為某公司制作一套電子相冊(cè)目錄，主要使用表格進(jìn)行布局，需要使用表格創(chuàng)建和修改以及單元格屬性設(shè)置等，效果如圖 所示。4.1.3 制作相冊(cè)目錄制作相冊(cè)目錄1建立站點(diǎn) 創(chuàng)建一個(gè)“公司相冊(cè)”站點(diǎn)，并且給素材進(jìn)行分類?！癷mages”文件夾放置主頁(yè)相關(guān)的圖片，“pages”文件夾放置除主頁(yè)以外的其他網(wǎng)頁(yè)，并且在其中建立一個(gè)“photos”文件夾放子頁(yè)的圖像。新建網(wǎng)頁(yè)，保存命名為“index.html”作為相冊(cè)目錄頁(yè)，站點(diǎn)

7、結(jié)構(gòu)如圖所示。 2設(shè)置頁(yè)面屬性 單擊“屬性檢查器”中的“頁(yè)面屬性”按鈕，在彈出對(duì)話框中設(shè)置網(wǎng)頁(yè)背景圖像，設(shè)置主頁(yè)背景圖像為“s_body_bg.gif”，文字大小12像素，文字顏色 #B51C8C，如圖所示。3制作相冊(cè)標(biāo)題樣式（1）輸入標(biāo)題并且設(shè)置“HTML格式”。在頁(yè)面中輸入標(biāo)題“公司電子相冊(cè)”，選擇文本，打開(kāi)“屬性檢查器”設(shè)置“格式”屬性的值為“標(biāo)題2”，如圖所示。（2）設(shè)置標(biāo)題“CSS樣式” 在“屬性檢查器”中點(diǎn)擊按鈕，點(diǎn)擊“編輯規(guī)則”彈出“新建CSS規(guī)則”對(duì)話框，設(shè)置“選擇器類型”為“標(biāo)簽”，標(biāo)簽名稱設(shè)置為“h2”，點(diǎn)擊“確定”后彈出“h2的CSS規(guī)則定義”對(duì)話框，在“類型”分類設(shè)置字

8、體、大小、顏色，如圖左所示，在 “區(qū)塊”分類中設(shè)置居中對(duì)齊，如圖右所示，點(diǎn)擊“確定”按鈕。3插入相冊(cè)目錄所需表格 插入一個(gè)6行5列的表格，寬度為780像素，邊距為5，間距為0，邊框?yàn)?，如圖所示。4設(shè)置目錄表格樣式 在表格邊線上單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“編輯標(biāo)簽”命令，在彈出的“標(biāo)簽編輯器”中的“常規(guī)”分類中設(shè)置“居中對(duì)齊”，如圖左所示，在“瀏覽器特定”分類中設(shè)置“背景圖像”和“邊框顏色”如圖右所示。5設(shè)置單元格屬性選擇表格第二行，在“屬性檢查器”中設(shè)置單元格高為30，背景色為#99FFCC，如圖所示，同樣地方式設(shè)置第四、六行的行高和顏色。選擇表格的所有單元格，在“屬性檢查器”中設(shè)

9、置水平、垂直都居中對(duì)齊。 在表格最下方插入一行，且合并該行所有單元格，設(shè)背景色設(shè)為#00FF00，單元格高為5像素。切換到代碼視圖中，刪除單元格標(biāo)簽之間的“&nbsp”，設(shè)置完表格效果如圖所示。在表格的單元格插入教材提供的素材中的相對(duì)應(yīng)的項(xiàng)目縮略圖像，并在每幅圖像下面的單元格中輸入圖像名稱，至此公司相冊(cè)的目錄頁(yè)編輯完成 4.1.4工作任務(wù)總結(jié)工作任務(wù)總結(jié) 本工作任務(wù)是利用表格制作公司相冊(cè)目錄頁(yè)面，通過(guò)完成這個(gè)任務(wù)，學(xué)習(xí)在Dreamweaver CS5插入表格，設(shè)置表格的背景圖象、邊框線的顏色等屬性，設(shè)置單元格的背景色、對(duì)齊方式、合并單元格等表格相關(guān)的基本操作。4.2 任務(wù)二：制作圖像展

10、示頁(yè)面并且鏈接網(wǎng)站任務(wù)二：制作圖像展示頁(yè)面并且鏈接網(wǎng)站4.2.1 工作任務(wù)和設(shè)計(jì)效果工作任務(wù)和設(shè)計(jì)效果 本任務(wù)制作電子相冊(cè)的圖片展示頁(yè)面并且建立與目錄頁(yè)面的超級(jí)鏈接，圖片展示頁(yè)面的效果如圖所示。 通過(guò)本任務(wù)綜合訓(xùn)練使用表格進(jìn)行頁(yè)面的布局。4.2.2 布局頁(yè)面布局頁(yè)面1新建網(wǎng)頁(yè)保存在站點(diǎn)文件夾中的“pages”文件夾下，命名為“xm1.html”，按照“index.html”設(shè)置頁(yè)面屬性的方式設(shè)置二級(jí)頁(yè)面的文檔屬性。2插入2行2列表格，設(shè)置表格寬度是780像素，其他參數(shù)為0。在表格的“屬性檢查器”中設(shè)置表格居中對(duì)齊。3在第一行第一個(gè)單元格中插入公司標(biāo)志logo，并且設(shè)置其背景色為白色在第二單元格

11、中插入標(biāo)題圖片“head.jpg”，如圖所示 。4合并第二行中的兩個(gè)單元格，設(shè)高度為為60（與所給的背景圖的尺寸相同），選中單元格單擊右鍵，在彈出的快捷菜單中選擇“編輯標(biāo)簽”命令，在彈出的對(duì)話框中設(shè)置單元格背景圖形為“head_bg.jpg”，在單元格中輸入廣告詞文本，如圖所示。5光標(biāo)定位在表格最后，插入1列2行表格，設(shè)置寬度780像素，表格居中對(duì)齊。在第一行插入項(xiàng)目介紹圖（xm-1.jpg），設(shè)置單元格邊距為20，水平和垂直均設(shè)置居中，背景圖像為“s_main_bg.gif”。下面單元格設(shè)置高度為50像素，背景顏色紫色“#B71F8E”，水平和垂直均設(shè)置居中。在單元格內(nèi)再嵌套一個(gè)1行3列表格

12、，設(shè)置寬度為140像素，每個(gè)單元格插入導(dǎo)航按鈕，并且設(shè)置單元格格式為居中對(duì)齊，如圖所示。6制作1像素黑色表格線框選中下面的2行1列表格執(zhí)行剪切操作，再插入一個(gè)1行1列的表格，寬度780像素，背景顏色黑色，單元格邊距（填充）為“1px”，表格居中對(duì)齊，在當(dāng)前新表格的單元格中粘貼剛才剪切的表格，并且修改這個(gè)表格的寬度為778像素，保存預(yù)覽效果如圖所示。7修改插入的項(xiàng)目大圖為xm-2.jpg、xm-3.jpg，分別另存為xm2.html 、xm3.html兩個(gè)二級(jí)頁(yè)面。 4.2.3 鏈接所有頁(yè)面鏈接所有頁(yè)面1目錄和展示頁(yè)面鏈接 在目錄頁(yè)面中，選擇“項(xiàng)目1”的縮略圖，在鏈接屬性中連接到“xm1.htm

13、l”，如圖所示。使用同樣地方式將項(xiàng)目2、項(xiàng)目3的縮略圖分別鏈接到xm2.html、xm3.html頁(yè)面。2導(dǎo)航的制作在每個(gè)二級(jí)頁(yè)面下方的三個(gè)導(dǎo)航按鈕上設(shè)置鏈接，鏈接到目錄頁(yè)“index.html”，鏈接到前面一個(gè)二級(jí)頁(yè)面，鏈接到下一個(gè)二級(jí)頁(yè)面，至此公司相冊(cè)編輯完成。4.2.4工作任務(wù)總結(jié)工作任務(wù)總結(jié) 這個(gè)工作任務(wù)是利用表格、表格屬性、單元格數(shù)據(jù)和表格嵌套等技術(shù)和技巧布局相冊(cè)的二級(jí)頁(yè)面，并且集合第三章的鏈接技術(shù)完成相冊(cè)目錄頁(yè)和相冊(cè)內(nèi)容之間的鏈接。 使用表格布局時(shí)要注意表格尤其要注意尺寸、邊距、邊框和填充等值的準(zhǔn)確，否則布局效果會(huì)大打折扣。表格嵌套在很多情況下可以簡(jiǎn)化布局操作，但是嵌套過(guò)多也會(huì)使頁(yè)

14、面臃腫，通常建議嵌套不要超過(guò)三層，合理的使用單元格合并可以減少嵌套的使用。4.4 知識(shí)運(yùn)用與拓展知識(shí)運(yùn)用與拓展 1、頁(yè)面布局常見(jiàn)類型如下、頁(yè)面布局常見(jiàn)類型如下：“同”字型：這種結(jié)構(gòu)是網(wǎng)上見(jiàn)到最多的，采用這種結(jié)構(gòu)的網(wǎng)頁(yè)，往往將導(dǎo)航區(qū)置于頁(yè)面頂端，一些如廣告條、友情鏈接、搜索引擎、注冊(cè)按鈕、登陸面板、欄目條等內(nèi)容置于頁(yè)面兩側(cè)，中間為主體內(nèi)容，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等?！皬S”字型：它去掉了“同”字形布局的最右邊的部分，給主內(nèi)容區(qū)釋放了更多空間?！叭弊中尾季郑?這是一種簡(jiǎn)潔明快的網(wǎng)頁(yè)布局，這種布局的特點(diǎn)是在頁(yè)面上由橫向兩條色塊將網(wǎng)頁(yè)整體分割為3部分?！按ā弊中尾季郑赫麄€(gè)頁(yè)面在垂直方向分為三列，網(wǎng)站的內(nèi)容按欄目分布在這三列中。標(biāo)