chapter3課件(利用表格設(shè)計(jì)和制作網(wǎng)頁).doc

網(wǎng)頁實(shí)訓(xùn)利用表格設(shè)計(jì)和制作網(wǎng)頁4第3單元 利用表格設(shè)計(jì)和制作網(wǎng)頁實(shí)訓(xùn)目標(biāo)F調(diào)整第2個(gè)外表格各單元格的寬度，效果如圖6.28所示。操作步驟如下：（1）將插入點(diǎn)置于第1個(gè)單元格中，將單元格的寬度設(shè)置為130像素。（2）將第1個(gè)單元格拆分為2行，其中第2行單元格的高度設(shè)置為60像素，并將“用戶登錄”圖像置于第2行單元格中。在單元格屬性面板的“水平”下拉列表框中選擇“右對齊”。設(shè)置單元格屬性前后的效果對照（3）將插入點(diǎn)置于第2個(gè)單元格中，將單元格的寬度設(shè)置為260像素。F設(shè)置第3個(gè)外表格及其內(nèi)嵌表格的單元格屬性，效果如圖所示。操作步驟如下：設(shè)置垂直對齊方式為“頂端”前后的效果對照（1）將第3個(gè)外表格的第1列的單元格的垂直對齊方式設(shè)置為“頂端”。（2）將第3個(gè)外表格的第2行第2列的單元格高度設(shè)置為136像素。（3）將的“未來都市”及“未來旅游”欄目表格中的第1行的行高均設(shè)置為30像素。F為第4個(gè)外表格中的各單元格分別設(shè)置背景顏色，操作步驟如下：（1）將插入點(diǎn)置于第1行的單元格中，在屬性面板的背景顏色文本框中直接輸入事先設(shè)計(jì)好的顏色代碼“#034A82”。（2）同時(shí)選中表格的第2行和第3行，在屬性面板的背景顏色文本框中直接輸入事先設(shè)計(jì)好的顏色代碼“#A8D4F0”。并將其行高分別設(shè)置為30像素和60像素。（3）將第3行單元格的“水平”對齊方式設(shè)置為“居中對齊”。任務(wù)五、表格的高級應(yīng)用技巧F將第4個(gè)表格的第1行單元格制作水平線細(xì)線，效果如圖所示。操作步驟如下：水平線細(xì)線（1）將插入點(diǎn)置于第4個(gè)表格的第1行單元格中。（2）在單元格屬性面板的“高”文本框中輸入2并在單元格中插入一個(gè)大小為1像素的spacer.gif透明圖像。spacer.gif透明圖像的制作方法為：（a）在菜單欄中選擇“編輯”“首選參數(shù)”命令，打開“首選參數(shù)”對話框，如圖所示。（b）在“分類”列表中中選擇“布局模式”，然后在對話框的右邊單擊創(chuàng)建按鈕，打開“保存間隔圖像文件為”對話框，Dreamweaver自動生成大小為1像素的spacer.gif圖像，將其保存到本地站點(diǎn)的images文件夾下。 “首選參數(shù)”對話框（c）在“首選參數(shù)”對話框中單擊“確定”。（4）再選取第1行單元格，并將高度調(diào)整為5像素（大致和頁眉上的橫線高度相同）。F將第1個(gè)表格中的內(nèi)嵌導(dǎo)航欄表格制作成立體導(dǎo)航欄表格，效果如圖所示。操作步驟如下： 立體導(dǎo)航欄表格（1）選中第1個(gè)表格中的內(nèi)嵌導(dǎo)航欄表格，將邊框設(shè)置為1，邊框顏色設(shè)置為“#FFFFFF”。（2）在表格屬性面板中單擊快速標(biāo)簽編輯器按鈕，在標(biāo)簽編輯框中添加代碼“bordercolo