實驗五(第12周).doc

實驗五網(wǎng)頁制作練習一 實驗目的:1. 掌握HTML語言的語法規(guī)則，2. 理解CSS技術在網(wǎng)頁制作過程中所起的重要作用，掌握CSS樣式定義的方法。3. 掌握三種在網(wǎng)頁中使用CSS樣式的方法，二 實驗內容:1. 掌握HTML語言的語法規(guī)則2. 掌握三種在網(wǎng)頁中使用CSS樣式的方法3. 掌握可視化操作的技術。三 實驗環(huán)境準備:1. 網(wǎng)站2. 素材(存入images文件夾);3. 制作平臺( DW8或相關軟件。不必安裝IIS)四 實驗題:在DW8中制作個人網(wǎng)站的主頁myindex.htm:1. 啟動DW8，在站點新建一個html文件，打開修改/頁面屬性/設置上邊距和左邊距均為8，背景顏色#f6fbff。2. 從窗口/樣式css中點擊打開樣式表面板。在css面板點擊【附加樣式表】的方法鏈接嵌入mystyle.css文件(p194),3. 打開常用工具欄/新建一個2*3寬770px的表格，居中對齊。在第一行第一個單元格中插入一個前景圖片logo.jpg，并調整單元格大小。選定第一行第二、三個單元格后選屬性面板中”合并”，使之合并為一個單元格，插入一個flash影片或gif動畫，例如插入banner-4.swf。4. 在第二行第一個單元格處插入”e-1行日歷.html”中的內容。在第二行第二個單元格代碼段輸入Page 23第一個水平字幕內容。第二行第三個單元格先插入一個表單，屬性面板中動作(action)欄輸入如下內容/search?hl=zh-CN，然后在表單中插入一個1*2寬266px，右對齊,間距和填充為0的表格，其中第一個單元格插入一個單行文本框，第二個單元格插入一個提交按鈕。5. 對巳使用的文本、控件及或或等使用上述mystyle.css外部樣式表進行設置。方法是:選定對象后在屬性面板中選擇樣式于該對象。如下圖所示:6. 新建一個1*1寬770px的表格，居中對齊，間距和填充為0，單元格內容頂端對齊。插入水平線條indexv1_03.gif7. 再新建一個1*5寬770px的表格，居中對齊。第一列設寬度為190px，第二、四列設寬度為8px，第5列設寬度為146px，l 第一個單元格嵌套一個寬180px，12*3表格，每一行第一、三列插入圖片pearl1.jpg，第二列為鏈接源。l 第二、四個單元格中分別插入背景圖片indexv1_15.jpg和indexv1_16.jpgl 第三個單元格中插入圖片10_r1_c1.gif，并打開”學院簡介.txt”復制其內容到該單元格，選中10_r1_c1.gif 使其左對齊，實現(xiàn)圖文混排效果。并裁剪掉后部一些文字存為2.htm，在此位置加入鏈接源字符:”更多”，鏈接至2.htm。l 在第五個單元格中，設置內容為”頂湍對齊”，插入一個6*1寬146，間距、填充和邊框為0的表格。然后:1.) 先插入一個表單，然后在表單中插入一個4*2寬146px，間距和填充為0，邊框為1的表格，依次制作各控件,2.) 下一個中插入圖片ganggao.gif3.) 下一個中的代碼段輸入以下上滾字幕(參照Page 24)內容: 又見一個春天. 不同的色彩,飄蕩在校園上空，那是愛情的顏色。各種氣息在空氣中彌漫8. 新建一個1*1寬770px的表格，居中對齊，間距和填充為0，單元格內容頂端對齊。插入水平線條crystal.gif9. 新建一個2*1寬770px的表格，居中對齊，間距和填充為0，單元格內容頂端對齊。依次輸入二行內容如下 通訊地址:湖南長沙 410014 Email: 版權所有 Copyright©2000-2004 Inc. All Rights Reserved 10. 打開move_image.htm（移動小精靈），在代碼窗復制.間所有內容，插入到正編輯的文件的代碼窗處，返回到設計窗，選中剛粘貼的圖像，在屬性欄修改鏈接。11. 對本網(wǎng)頁所有的或或等使用上述mystyle.css外部樣式表進行設置。方法是:選定對象后在屬性面板中選擇樣式于該對象。如步驟5.所示。12. 瀏覽本myindex.htm文件，在:查看/文字大