電子商務網頁制作0課件3

1、主編：謝嶸我們在瀏覽電子商務網站時注意到，受歡迎的網站大都顏色艷麗、布局美觀。在一個頁面上，既要羅列出海量的商品信息，又要使頁面看起來整齊漂亮，它們是怎樣做到的呢？這樣的網站大部分都是由表格來進行布局排版的，只是因為沒有顯示表格的邊框，所以在瀏覽時根本看不出表格的存在。因此，掌握表格的操作是制作出整齊美觀的電子商務網頁的必修課。 項目3 用表格布局網站 項目導學 體驗活動一：認識表格及其基本操作 活動任務：新建一個表格并在表格中插入圖片和文字，利用“屬性”面板修改表格的參數(shù)。活動指導：在Dreamweaver CS4中，只要在“表格”對話框中設置行列數(shù)、邊框、表格位置等參數(shù)，就可以插入表格。表

2、格由行和列組成，行和列交叉所形成的矩形區(qū)域，即表格中的一個矩形就稱為單元格。在表格中可以合并或拆分多個單元格。 項目3 用表格布局網站 體驗活動一：認識表格及其基本操作 活動步驟：啟動Dreamweaver CS4軟件。單擊“站點”菜單上的“管理站點”命令，單擊“完成”按鈕，打開“我的站點1”。打開“newbook.html”頁面，然后單擊“插入”菜單上的“表格”命令 項目3 用表格布局網站 體驗活動一：認識表格及其基本操作 活動步驟：在彈出的“表格”對話框中，設置表格為3行2列，標題選擇“左”對齊，單擊“確定”按鈕。在“newbook.html”頁面中出現(xiàn)了一個表格。 項目3 用表格布局網站

3、 體驗活動一：認識表格及其基本操作 活動步驟：選中第一行的兩個單元格，單擊“屬性”面板上的“合并單元格”按鈕。在合并過的單元格中輸入文字“圖書分類”。 項目3 用表格布局網站 體驗活動一：認識表格及其基本操作 活動步驟：在“插入”面板上單擊“圖像”按鈕，在彈出的對話框中，打開“image”文件夾中的“1.jpg”文件。將“2.jpg”插入到左邊列下方的單元格中。 項目3 用表格布局網站 體驗活動一：認識表格及其基本操作 活動步驟：在表格的右邊列輸入如圖所示的文字。選中表格的第二行和第三行，在“屬性”面板中設置它的“水平”為“居中對齊”，“垂直”為“居中”。 項目3 用表格布局網站 體驗活動一：

4、認識表格及其基本操作 活動步驟：選中表格的第一行，在“屬性”面板中設置“背景顏色”為“#FFFF66”，設置“高”為“50”。保存網頁，單擊F12鍵，在瀏覽器中預覽網頁的效果。 項目3 用表格布局網站 體驗活動二：表格的基本操作活動任務：利用表格制作圓角矩形樣式?；顒又笇В罕砀袷蔷匦蔚幕蛘叫蔚模瑘A角矩形使頁面的效果更加美觀。表格直接決定了網頁是否美觀，內容組織是否清晰，其實合理利用表格可以美化頁面。 項目3 用表格布局網站 體驗活動二：表格的基本操作活動步驟：打開“index.html”頁面后，單擊“插入”面板上的“表格”按鈕，插入一個3行3列的表格，表格寬度為300，邊框粗細為0像素。給每

5、個單元格編號以方便下面的操作。 項目3 用表格布局網站 體驗活動二：表格的基本操作活動步驟：選中單元格，單擊插入工具欄上的“圖像”按鈕在彈出的對話框中，如圖3-16所示，選擇站點image文件夾中的“top_01.jpg”文件。 項目3 用表格布局網站 體驗活動二：表格的基本操作活動步驟：圖像插入單元格1內后，將該單元格的寬和高需按照插入的圖像寬和高設置。 項目3 用表格布局網站 體驗活動二：表格的基本操作活動步驟：圖像插入單元格1內后，將該單元格的寬和高需按照插入的圖像寬和高設置。 項目3 用表格布局網站 體驗活動二：表格的基本操作活動步驟：單元格2中插入“top_02.jpg”文件；單元格

6、3中插入“top_03.jpg”文件；單元格4中插入“cen_02.jpg”文件；單元格6中插入“cen_01.jpg”文件；單元格7中插入“bot_01.jpg”文件；單元格8中插入“bot_02.jpg”文件；單元格9中插入“bot_03.jpg”文件。 項目3 用表格布局網站 體驗活動二：表格的基本操作活動步驟：單元格5中輸入“歡迎光臨網上書城！”，將單元格2中的圖片“top_02.jpg”文件將它的寬設為260，同樣的方法設置單元格8中的圖片“bot_02.jpg”文件的寬度為260。 項目3 用表格布局網站 體驗活動二：表格的基本操作活動步驟：選中文字“歡迎光臨網上書城！”，設置居中

7、對齊。選中表格，在屬性面板上設置“填充”、“間距”、“邊框”均為0。保存頁面，按F12鍵并在瀏覽器中預覽。 項目3 用表格布局網站 活動小結完成體驗活動一和體驗活動二后，填寫下表 項目3 用表格布局網頁 “插入”菜單“插入”“表格”“插入”面板“插入”“常用”插入表格的方法和步驟體驗活動三：處理表格中的數(shù)據(jù)活動任務：用表格工具處理數(shù)據(jù)，對數(shù)據(jù)進行排序操作。活動指導：學習新的新建頁面的方法和打開方法。在實際工作中，利用“文件”面板來完成這樣的工作更便于對頁面的管理，不容易造成頁面保存路徑的出錯。 項目3 用表格布局網站 體驗活動三：處理表格中的數(shù)據(jù)活動步驟：雙擊“文件”面板上的“shuping.

8、html”文件，打開該頁面。選中表格，從表格中可以看到“排行”列的數(shù)字不是按順序排列的。選擇“命令”菜單欄中的“排序表格”命令。 項目3 用表格布局網站 體驗活動三：處理表格中的數(shù)據(jù)活動步驟：在彈出的“對話框中，在“排序按”下拉列表中選擇“列”、“順序”下拉列表中選擇“按數(shù)字順序”，在后面的排序方式中選擇“升序”項。表格中“排行”列的序號從小到大進行升序排列。 項目3 用表格布局網站 相關知識一、表格的HTML標簽以開始以標簽結束，它代表的是一個表格標簽。 項目3 用表格布局網站 相關知識一、表格的HTML標簽width：是表格的寬度，可以使用像素或者百分比為單位。hight：代表表格或是單元格的高度，可以使用像素或者百分比為單位。border：是表格的邊框的寬度，使用像素表示。cellspacing：代表單元格的間距。cellpadding：代表單元格與單元格內容之間的間隔距離。tr：代表一行。td：代表一個單元格。 項目3 用表格布局網站 相關知識二、表格制作技巧用文件夾來保存文檔；在Dreamweaver中，“設計”視圖中顯示的表格有時候是正常的，但因為在網