.第四章y网页设计范例题目.PDFVIP

第四章 網頁設計範例題目 4-13 日本賞櫻自助行程 易 中 難 104 1. 題目說明： 將設計圖進行切圖後，以表格進行網頁版面佈局，並設定內文與符號等。 設計完成的 index.html 擷圖（IE 瀏覽器檢視） 4-14 TQC+ 網頁設計認證指南 Dreamweaver CS6 設計完成的 pict2.html 擷圖（IE 瀏覽器檢視） 2. 作答須知： (1) 題目所需的檔案位於 C:\ANS.CSF\DW01 資料夾，圖片及其它多媒體 元素檔案置於 images 資料夾。 (2) 請依設計需求進行作答，編輯過的檔案，請以原檔名儲存在原路徑。 3. 設計需求： 開啟 編輯，設定頁面標題 關鍵字： (1) index.html / 頁面標題：日本賞櫻自助行 網頁關鍵字：日本賞櫻 日本自助旅行 日本櫻花 , , 第四章 網頁設計範例題目 4-15 (2) 設定導覽列（表格第一列）： 底色：#F9AACA 背景圖：bg.png (3) 中間內文編排： 在頁面的 個空儲存格中，分別插入一個小表格， 欄 列、寬 、 3 1 1 90% 邊框為 0px 、儲存格內距為0px 、儲存格間距為0px 的表格 將 data1.txt 中的 3 段文字，分別複製到上述的 3 個表格之內，並設 定表格中的文字格式為p (4) 文字與圖片連結說明： 將表格第一列導覽列「行程規劃、花期時間、訂房、交通」等文字 設定空的超連結 在右方圖片加上矩形區域連結，連結區域名稱由上至下依序為 、 、 ，替代文字由上至下分別是「大阪城、清 #pict1 pict2.html #pict3 水寺、圓山公園」 (5) 切圖輸出版型： 以 Photoshop 開啟 pict2.psd 進行切圖，分割方式如下圖所示，共計 切割成 7 片： 儲存為網頁，檔名為 pict2.html ，儲存於C:\ANS.CSF\DW01 資料夾 4-16 TQC+ 網頁設計認證指南 Dreamweaver CS6 (6) 開啟 pict2.html 編輯： 將表格設定置中對齊，並刪除灰色圖片 將 data2.txt 中的文字複製到原本灰色圖片的位置，並設定文字格式 為p ，再設定儲存格寬為458 、高為445 、垂直靠上對齊 將「大阪城、清水寺、圓山公園」文字設定成項目清單 將門票「日圓」改成日圓符號 頁面標題設定為「關於清水寺」 4. 評分項目： 項 目 配分 得分 (1) 2 (2) 6