邊做邊學(xué)-DreamweaverCS5網(wǎng)頁設(shè)計(jì)案例教程

使用表格【實(shí)戰(zhàn)演練】——租車網(wǎng)頁使用“表格”按鈕，插入表格；使用“頁面屬性”命令，設(shè)置頁面的邊距、頁面標(biāo)題；使用“圖像”按鈕，插入圖像布局網(wǎng)頁。〔最終效果參看光盤中的“Ch05>效果>租車網(wǎng)頁>index.html5-1〕5-1設(shè)置頁面屬性并插入表格啟動(dòng)DreamweaverCS5Untitled-1.html選擇“文件>保存”命令，彈出“另存為”對話框，在“保存在”選項(xiàng)的下拉列表中選擇站點(diǎn)名目保存路徑，在“文件名”選項(xiàng)的文本框中輸入“index到編輯窗口。>頁面屬性”命令，在彈出的“頁面屬性”對話框左側(cè)“分類”選項(xiàng)列表0，如5-2所示，單擊“確定”按鈕。單擊“插入”面板“常用”選項(xiàng)卡中的“表格”按鈕，在彈出的“表格”對話框中進(jìn)展設(shè)置，如圖5-3所示，單擊“確定”按鈕，效果如圖5-4所示。保持表格的選取狀態(tài)，在“屬性”面板“對齊”選項(xiàng)的下拉列表中選擇“居中對齊”選項(xiàng)。40第5章 使用表格CHAPTER5圖5-2 圖5-35-4設(shè)置單元格背景顏色并插入圖像將光標(biāo)置入到第1行單元格中，在“屬性”面板“水平”選項(xiàng)的下拉列表中選擇“居中對齊”選項(xiàng)，將“高”選項(xiàng)設(shè)為254〔#4488CF，如圖5-55-6所示。5-55-6單擊“插入”面板“常用”選項(xiàng)卡中的“圖像”按鈕，在彈出的“選擇圖像源文件”Ch05>素材>租車網(wǎng)頁>imagesimg_03.jpg5-7所示。5-741邊做邊學(xué)—— DreamweaverCS5 網(wǎng)頁設(shè)計(jì)案例教程2行單元格中，單擊“插入”面板“常用”選項(xiàng)卡中的“圖像”按鈕，在彈出的“選擇圖像源文件”對話框中選擇光盤“Ch05>>images”文件等中 夾中的img_06.jpg，單擊“確定”按鈕完成圖片的插入，效果如圖5-8所示。等職業(yè)教育數(shù)字藝術(shù)類規(guī)劃教材5-8用一樣的方法分別將img_07.jpg、img_08.jpg文件插入到第3行和第4行的單元格中，5-9所示。5-9保存文檔，按F12鍵預(yù)覽效果，如圖5-10所示。5-10【實(shí)戰(zhàn)演練】——設(shè)計(jì)家園網(wǎng)頁使用“導(dǎo)入表格式數(shù)據(jù)”命令，導(dǎo)入外部表格數(shù)據(jù)；使用“屬性”面板，轉(zhuǎn)變表格的高度和對齊方式；使用“CSS〔最終效果參看光盤中的“Ch05>效果>設(shè)計(jì)家園網(wǎng)頁>index.html5-1〕42第5章 使用表格CHAPTER55-1>翻開”命令，在彈出的“翻開”對話框中選擇“Ch05>>設(shè)計(jì)家園網(wǎng)頁>index.html5-2所示。將光標(biāo)放置在5-3所示。選擇“插入>表格對象>導(dǎo)入表格式數(shù)據(jù)”命令，彈出“導(dǎo)入表格式數(shù)據(jù)”對話框。圖5-2 圖5-3”對話框，在光盤名目下的“Ch05>>info.txt”文件，單擊“翻開”按鈕，返回到對話框中，如圖5-4所示，單擊“確定”按鈕，導(dǎo)入表格式數(shù)據(jù)，效果如圖5-5所示。圖5-4 圖5-543邊做邊學(xué)—— DreamweaverCS5 網(wǎng)頁設(shè)計(jì)案例教程保持表格的選取狀態(tài)，在“屬性”面板中進(jìn)展設(shè)置，如圖5-6所示，表格效果如圖5-7所示。中等職業(yè)教育數(shù)字術(shù)藝 圖5-6術(shù)類規(guī)劃教材5-71Shift1列，在“屬性”面板“水35，表格效果如圖5-8所示。5-9示。圖5-8 圖5-9CSS樣式”命令，彈出“CSS樣式”面板，單擊面板中的“建CSS規(guī)則”按鈕

，在彈出的“建CSS規(guī)章”對話框中進(jìn)展設(shè)置，如圖5-10所示，單擊“確定”按鈕，彈出“.text的CSS規(guī)章定義”對話框，在左側(cè)的“分類”選項(xiàng)列表中選擇“類型”選項(xiàng)，將“Color5-11所示。在左側(cè)的“分類”選項(xiàng)列表中選擇“背景”選項(xiàng)，將“Background-color”選項(xiàng)設(shè)為紅色〔#D80100，如圖5-12所示，單擊“確定”按鈕，創(chuàng)立樣式。選中如圖5-13單元格。44第5章 使用表格CHAPTER5圖5-10 圖5-11圖5-12 圖5-13在“屬性”面板“類”選項(xiàng)的下拉列表中選擇“text5-145-15所示。圖5-14 圖5-15單擊面板中的“建CSS規(guī)章”按鈕，在彈出的“建CSS規(guī)章”對話框中進(jìn)展設(shè)5-16.BJCSS規(guī)章定義”對話框，在左側(cè)的“分類”選項(xiàng)列表中選擇“背景”選項(xiàng)，將“Background-color”選項(xiàng)設(shè)為淺灰色〔#CCC，如5-17所示，單擊“確定”按鈕，創(chuàng)立樣式。圖5-16 圖5-1745邊做邊學(xué)—— DreamweaverCS5 網(wǎng)頁設(shè)計(jì)案例教程選中如圖5-18BJ用樣式，如圖5-19所示，效果如圖5-20所示。用一樣的方法為其他單元格添加樣式，如圖等中 5-21所示。等職業(yè)教育數(shù)字藝術(shù)規(guī)類 圖5-18 圖5-19規(guī)劃教材圖5-20 圖5-21保存文檔，按F12鍵預(yù)覽效果，如圖5-22所示。5-2246第5章 使用表格綜合演練——流行音樂網(wǎng)頁【案例分析】流行音樂風(fēng)格多樣，形態(tài)豐富，所以流行音樂網(wǎng)站要突出流行、時(shí)尚等元素，符合年輕人的

CHAPTER5特點(diǎn)和需求，網(wǎng)頁設(shè)計(jì)要求突出視覺上的效果，迎合年輕人的喜好和風(fēng)格?！驹O(shè)計(jì)理念】在網(wǎng)頁設(shè)計(jì)、制作過程中，網(wǎng)頁背景承受深藍(lán)色。使畫面具有奇特的吸引力，人物的剪影以及炫酷的效果在畫面的中心更加突出，黑白字體的使用，使畫面干凈，下方歌曲的的名目介紹，直觀清楚，整體風(fēng)格時(shí)尚豐富，符合年輕人的特點(diǎn)?！緦W(xué)問要點(diǎn)】使用“導(dǎo)入表格式數(shù)據(jù)”命令，導(dǎo)入外部表格數(shù)據(jù)；使用“屬性”面板，轉(zhuǎn)變表格的寬度、單元格的高度和表格的對齊方式；使用“CSS〔最終效果參看光盤中的“Ch05>效果>流行音樂網(wǎng)頁>index.html5-1〕>翻開”命令，在彈出的“翻開”對話框中選擇“Ch05>>流行音樂網(wǎng)頁>index.html5-2所示。圖5-1 圖5-25-3所示的單元格中，選擇“插入>表格對象>導(dǎo)入表格式數(shù)據(jù)”5-4所示。47邊做邊學(xué)—— DreamweaverCS5 網(wǎng)頁設(shè)計(jì)案例教程中等職業(yè)教育數(shù)字藝類術(shù) 圖5-3 圖5-4類規(guī)劃 3 單擊“確定”按鈕，效果如圖5-5所示。保持表格的選取狀態(tài)，在“屬性”面板中，將教材 “寬”選項(xiàng)設(shè)設(shè)410，在“對齊”選項(xiàng)的下拉列表中選擇“居中對齊”選項(xiàng)，如圖5-6所示，5-7所示。5-55-65-74 CSS樣式”命令，彈出“CSS樣式”面板，單擊面板中的“建CSS規(guī)則”按鈕

，在彈出的“建CSS規(guī)章”對話框中進(jìn)展設(shè)置，如圖5-8所示，單擊“確定”按鈕，彈出“.text的CSS規(guī)章定義”對話框，在左側(cè)的“分類”選項(xiàng)列表中選擇“類型”選項(xiàng)，將“Font-familyFont-size”選項(xiàng)設(shè)為14Color”選項(xiàng)設(shè)為淺灰色#535353，其他選項(xiàng)的設(shè)置如圖5-9所示，單擊“確定”按鈕，創(chuàng)立樣式。48第5章 使用表格CHAPTER5圖5-8 圖5-9選中如圖5-10所示的單元格，在“屬性”面板“水平”選項(xiàng)下拉列表中選擇“居中對24text5-12所示。F125-13所示。圖5-10 圖5-11圖5-12 圖5-1349邊做邊學(xué)—— DreamweaverCS5 網(wǎng)頁設(shè)計(jì)案例教程綜合演練——建筑信息資訊網(wǎng)頁中等職教業(yè) 5.4.1 【案例分析】教育數(shù)藝字 建筑信息網(wǎng)供給建筑行業(yè)資訊、工程信息、工程治理、建筑百科、合同大全、專家觀點(diǎn)、房藝術(shù)類劃規(guī) 地產(chǎn)業(yè)、建筑論文、機(jī)械設(shè)備、建筑考試、家裝寶典等建筑詢問，網(wǎng)頁設(shè)計(jì)要求符合建筑行業(yè)的劃教材特色。【設(shè)計(jì)理念】在網(wǎng)頁設(shè)計(jì)、制作過程中，網(wǎng)頁背景承受白蘭搭配，藍(lán)色的格子的脫離效果使畫面產(chǎn)生了豐富的立體效果，設(shè)計(jì)圖紙的使用，是網(wǎng)頁更具技術(shù)感。畫面豐富整齊舒適，給人信任的感覺，沒有多余的修飾搭配，符合建筑信息這一行業(yè)特色。【學(xué)問要點(diǎn)】使用“頁面屬性”命令，設(shè)置頁面的邊距和標(biāo)題；使用“表格”按鈕，插入表格；使用“圖〔Ch05>效果>建筑信息資訊網(wǎng)頁>l5-1〕5-1啟動(dòng)DreamweaverCS5Untitled-1.html>保存”命令，彈出“另存為”對話框，在“保存在”選項(xiàng)的下拉列表中選擇站點(diǎn)名目保存路徑，在“文件名”選項(xiàng)的文本框中輸入“index到編輯窗口。>頁面屬性”命令，在彈出的“頁面屬性”對話框左側(cè)“分類”選項(xiàng)列表0，如5-2所示。50第5章 使用表格在左側(cè)“分類”選項(xiàng)列表中選擇“標(biāo)題/編碼”選項(xiàng)，在“標(biāo)題”選項(xiàng)右側(cè)的文本框中5-3所示，單擊“確定”按鈕，完成頁面屬性的修改。圖5-2 圖5-3

CHAPTER5單擊“插入”面板“常用”選項(xiàng)卡中的“表格”按鈕，在彈出的“表格”對話框中，將“行數(shù)”選項(xiàng)設(shè)為321062圖5-4所示，單擊“確定”按鈕，效果如圖5-5所示。保持表格的選取狀態(tài)，在“屬性”面板“對齊”選項(xiàng)的下拉列表中選擇“居中對齊”選項(xiàng)。圖5-4 圖5-5將光標(biāo)置入到如圖5-6所示的單元格中，單擊“插入”面板“常用”選項(xiàng)卡中的“圖像”按鈕 ，在彈出的“選擇圖像源文件”對話框中選擇光盤“Ch05>素材>建筑信息資訊網(wǎng)頁>imagesimg_01.jpg5-7所示。圖5-6 圖5-7將光標(biāo)置入到第1行第2列單元格中，單擊“插入”面板“常用”選項(xiàng)卡中的“圖像”按鈕 ，在彈出的“選擇圖像源文件”對話框中選擇光盤“Ch05>素材>建筑信息資訊網(wǎng)頁>imagesimg_02.jpg5-8所示。51邊做邊學(xué)—— DreamweaverCS5 網(wǎng)頁設(shè)計(jì)案例教程中等職業(yè) 圖5-8教數(shù)育 7 將第2行全部單元格選中，如圖5-9所示，單擊“屬性”面板中的“合并所選單元格，數(shù)藝字 使用跨度按鈕藝類術(shù) 所示。類規(guī)劃教材

5-1035-115-95-105-11將光標(biāo)置入到第2行單元格中單“插入面“常用選項(xiàng)卡中“圖像按鈕 在彈出的“選擇圖像源文件”對話框中選擇光盤“Ch05>素材>建筑信息資訊網(wǎng)頁>images”文件夾中的“img