任務32搭建首頁說課講解

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

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

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

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

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

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

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

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

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

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

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

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