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

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

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

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

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

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

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

”處的單元格插入圖像“4.gif”;標記“

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

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

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

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

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