實(shí)驗(yàn)五(第12周).doc

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