任務(wù)32搭建首頁(yè)說課講解

任務(wù)3-2搭建首頁(yè)任務(wù)要求1、能使用表格設(shè)計(jì)網(wǎng)站主頁(yè)的主體和局部布局結(jié)構(gòu)2、能設(shè)計(jì)與制作導(dǎo)航欄3、能插入對(duì)應(yīng)的文檔和圖片等資源。任務(wù)效果圖操作步驟：主頁(yè)不同于其它頁(yè)面，在這里顯示了系統(tǒng)中最常見、最重要和最關(guān)鍵的信息。由作品預(yù)覽可看出，整個(gè)頁(yè)面分為頂部、中部和底部3大部分。頂部主要包括網(wǎng)站圖標(biāo)、主題展示、導(dǎo)航條等內(nèi)容，我們可以將各種對(duì)象放置在一個(gè)表格的不同單元格中。中部分為左、右兩個(gè)區(qū)域，左側(cè)是我購(gòu)買的商品、商品導(dǎo)航、商品排行榜、友情鏈接4個(gè)欄目；右側(cè)是實(shí)現(xiàn)搜索、新品上架、精品推薦3個(gè)欄目。底部是版權(quán)信息等內(nèi)容。

一、在站點(diǎn)根目錄（E:\gshop2.0）下新建“衢州恒創(chuàng)網(wǎng)上商城”首頁(yè)index.asp文件，并對(duì)“頁(yè)面屬性”進(jìn)行相應(yīng)設(shè)置。1、新建index.asp文件，操作如圖3-2_2所示。2、設(shè)置“頁(yè)面屬性”單擊“修改”菜單，選擇“頁(yè)面屬性”菜單項(xiàng)，對(duì)頁(yè)面屬性進(jìn)行設(shè)置，操作如圖3-2_3所示任務(wù)3-2搭建首頁(yè)操作步驟：二、使用表格對(duì)商城主頁(yè)進(jìn)行布局根據(jù)商城切片圖可知，商城頂部主要包括網(wǎng)站圖標(biāo)、主題展示、導(dǎo)航條等內(nèi)容；左側(cè)是我購(gòu)買的商品、商品導(dǎo)航、商品排行榜、友情鏈接4個(gè)欄目；底部是版權(quán)信息等內(nèi)容。用戶在瀏覽商城不同的頁(yè)面時(shí)，這些區(qū)域的界面結(jié)構(gòu)、版面內(nèi)容只有略微改變或完全不變，因此可以將這些區(qū)域單獨(dú)設(shè)計(jì)成一個(gè)獨(dú)立的頁(yè)面，以“包含文件”的方式嵌套進(jìn)主頁(yè)布局中。右側(cè)是實(shí)現(xiàn)搜索、新品上架、精品推薦3個(gè)欄目。因此可以將該商城的布局表格初設(shè)為5行2列，再根據(jù)切片圖逐步細(xì)化。

1、新建表格并合并相應(yīng)單元格，如圖3--2-4所示。任務(wù)3-2搭建首頁(yè)嘗試練習(xí)：按圖3-2_5所示，完成如下操作：1、將第2、3、4行第1列的3個(gè)單元格合并2、將第5行的2個(gè)單元格合并。任務(wù)3-2搭建首頁(yè)表格屬性表格Id：用來(lái)設(shè)置表格的Id標(biāo)識(shí)，便于以表格為對(duì)象進(jìn)行編程中的調(diào)用。行、列：用來(lái)設(shè)置表格的行數(shù)和列數(shù)。寬、高：用來(lái)設(shè)置表格的寬度和高度，其右側(cè)的下拉框用來(lái)設(shè)置寬度的單位，有兩個(gè)選項(xiàng)“百分比”和“像素”。填充：用來(lái)設(shè)置單元格邊框與其內(nèi)容之間的距離，單位是像素。間距：用來(lái)設(shè)置表格中單元格之間的距離，單位是像素。輸入的數(shù)值越大，單元格之間的邊框線就越粗，實(shí)際單元格與單元格之間的距離就越大。對(duì)齊：用來(lái)設(shè)置表格相對(duì)于同一段落中其他頁(yè)面元素的對(duì)齊方式。包括：“默認(rèn)”、“左對(duì)齊”、“居中對(duì)齊”和“右對(duì)齊”，其中“默認(rèn)”的對(duì)齊方式是以瀏覽器默認(rèn)的對(duì)齊方式來(lái)對(duì)齊的，大多為“左對(duì)齊”。邊框：用來(lái)設(shè)置表格邊框的寬度，其單位為像素。和：用來(lái)刪除表格中的所有明確指出的列寬或者行高，表格中的單元格可以根據(jù)內(nèi)容自動(dòng)調(diào)整到最合適的寬度和高度。和：前者用來(lái)將表格的所有寬度的單位轉(zhuǎn)換為“像素”；后者用來(lái)將表格的所有寬度的單位轉(zhuǎn)換為“百分比”。背景顏色：用來(lái)設(shè)置表格的背景顏色。邊框顏色：用來(lái)設(shè)置表格的邊框顏色。背景圖像：用來(lái)設(shè)置表格的背景圖像，應(yīng)使用相對(duì)路徑設(shè)置背景圖像。任務(wù)3-2搭建首頁(yè)操作步驟：三、制作各模塊

1、制作“商品搜索欄”版塊。

設(shè)置圖3-2_10所示單元格背景色為“#ffffc8”。

２、制作“新品上架”版塊。（1）插入“新品上架”圖像。（2）設(shè)置單元格背景為新插入“新品上架”圖片的單元格設(shè)置背景，背景圖案為站點(diǎn)根目錄下的“1.gif”文件，具體操作如圖3-2_12所示。任務(wù)3-2搭建首頁(yè)嘗試練習(xí)：按圖3-2_13所示，使用站點(diǎn)根目錄下的“images”文件夾下的相關(guān)素材，完成如下操作：１、標(biāo)記“

”處的單元格插入圖像“4.gif”;標(biāo)記“

”處的單元格設(shè)置背景為“1.gif。２、所有標(biāo)記為“

”的單元格均插入同一圖像“39.pnt”；對(duì)應(yīng)的相同單元格（即標(biāo)記為“

”）的背景色設(shè)為“#fbe0e3”。３、所有標(biāo)記為“

”的單元格背景色均設(shè)為“#FFFF99”。４、所有標(biāo)記為“

”的所在單元格均插入圖像“sort-ddcart.gif”。任務(wù)3-2搭建首頁(yè)操作步驟：3、為“商品搜索欄”模塊輸入“商品名”；為“新品上架”模塊輸入“定價(jià)”、“品牌”、“優(yōu)惠價(jià)”、“VIP價(jià)”等文字。操作如圖3-2_14所示。4、將“商品名”設(shè)置為“宋體”、“12px”，操作如圖3-2_15所示。任務(wù)3-2搭建首頁(yè)嘗試練習(xí)：1、將