實驗一-分析電子商務(wù)網(wǎng)站與信息搜索

實驗一Dreamweaver8入門及基本操作的實驗【實驗?zāi)康摹?、掌握Dreamweaver8啟動和退出的方法2、熟悉Dreamweaver8的網(wǎng)頁文檔窗口、站點(diǎn)管理面板及各種常用面板。3、掌握本地站點(diǎn)的設(shè)置方法和制作一個簡單網(wǎng)頁的過程。4、了解網(wǎng)頁文檔代碼的基本格式,了解代碼編輯的基本方法。5、掌握常用快捷鍵的用法?！緦嶒炣浖脚_】硬件:PC機(jī)一臺軟件：Dreamweaver8+Fireworks8+InternetExplorer8【實驗內(nèi)容與要求】1、網(wǎng)頁編輯器的基本操作(1)用不同的方法啟動和退出Dreamweaver8.(2)用快捷鍵打開和關(guān)閉【插入】欄和【屬性】面板。(3)觀察Dreamweaver8工作窗口右面的【CSS】浮動面板、【文件】浮動面板、【框架】浮動面板、【層】浮動面板等浮動面板，了解其主要功能。(4)啟動Dreamweaver8后,將窗口設(shè)置為955X600(1024X800,最大值)；打開、關(guān)閉標(biāo)尺顯示，設(shè)置標(biāo)尺單位分別為厘米、英寸、像素；顯示和隱藏網(wǎng)格，設(shè)置網(wǎng)格屬性，【間隔】為10像素，【顯示】為先，【顏色】#CCCC99,選中【靠齊到網(wǎng)格】復(fù)選框。2、建立網(wǎng)站的基本操作實驗要求:(1)在本地計算機(jī)的當(dāng)前盤中建立名為MySite的文件夾,并將本實驗素材復(fù)制到MySite文件夾中，然后打開【站點(diǎn)管理】面板,將該文件夾設(shè)為本地站點(diǎn).(2)把MySite中的img文件夾設(shè)置為【默認(rèn)圖像】文件夾，設(shè)置【鏈接相對于】為“文檔”。(3)打開【文件】浮動面板，取消本地站點(diǎn)中只讀文件的只讀屬性.3、制作簡單網(wǎng)頁(1)按下列要求制作圖1-1所示的網(wǎng)頁，并將網(wǎng)頁以excel-1。html為名保存在本地站點(diǎn)中。①新建網(wǎng)頁文檔，設(shè)置網(wǎng)頁屬性；頁面的背景圖像為img文件夾中的文件0100.jpg,背景圖像為“橫向重復(fù)”【左邊距】、【右邊距】、【上邊距】、【下邊距】為0像素，網(wǎng)頁標(biāo)題為“歡迎訪問電子商務(wù)網(wǎng)站”.網(wǎng)頁屬性設(shè)置完后，將網(wǎng)頁以excel-1。html為名保存在本地站點(diǎn)MySite中。②在網(wǎng)頁合適的位置插入圖像earth.gif，并啟動外部圖像編輯軟件在圖像上添加文字“Welcome”.③在網(wǎng)頁中輸入橫排帶陰影的文字："Business—to-Customer”和“商務(wù)網(wǎng)站歡迎您”.④在預(yù)覽網(wǎng)頁后，將網(wǎng)頁以excel-1.html為名保存在本地站點(diǎn)MySite中。圖1-1網(wǎng)頁應(yīng)用練習(xí)樣張一(2)按下列要求制作如圖1—2所示的網(wǎng)頁，并將網(wǎng)頁以excel-2.html為名保存在本地站點(diǎn)中。①新建網(wǎng)頁文檔，設(shè)置網(wǎng)頁屬性;頁面的背景圖像為img文件夾中的文件bg0005。jpg，背景圖像為“重復(fù)”，【左邊距】、【右邊距】、【上邊距】、【下邊距】為0像素，網(wǎng)頁標(biāo)題為“書”.網(wǎng)頁屬性設(shè)置完后，將網(wǎng)頁以excel-2。html為名保存在本地站點(diǎn)MySite中。②在網(wǎng)頁合適的位置插入圖像bg0012.gif,并將圖像的大小調(diào)整為500X40像素。在網(wǎng)頁的第三行居中插入圖像Welcome.jpg.③在網(wǎng)頁的第三行居中依次插入shu。swf、shu。gif、shu4。swf.選中逐幀圖像文件shuogif后，啟動外部圖像編輯軟件，在shu.gif的最后一幀居中導(dǎo)入圖像shu。jpg。④在網(wǎng)頁的下方輸入文字“知識的源泉，精神的糧食”，將文字設(shè)置為“隸書”、紅色、36像素。⑤預(yù)覽網(wǎng)頁后，將網(wǎng)頁以exel-2.html為文件名保存在本地站點(diǎn)MySite中。圖1—2網(wǎng)頁應(yīng)用練習(xí)樣張二(3)按下列要求創(chuàng)建如圖1—3所示的網(wǎng)站相冊網(wǎng)頁，將網(wǎng)頁以index。html為名保存在本地站點(diǎn)中。①用photo文件夾中的t1。jpg—18。jpg圖像創(chuàng)建網(wǎng)站相冊，網(wǎng)頁和相冊標(biāo)題為“書——知識的源泉”標(biāo)題字體為“隸書”，標(biāo)題背景顏色為"#FFFF99"，網(wǎng)頁背景圖像為bg00060jpg.②源圖像文件夾為MySite文件夾下Poto子文件夾，目標(biāo)文件夾為本地根文件夾MySite。③頁面圖像縮略圖尺寸為100X100像素，每行列數(shù)為4列，，縮略圖和相片格式為.JPEG.④預(yù)覽網(wǎng)頁后，將網(wǎng)頁index。html背景圖像改為bg0026.jpg后保存在本地站點(diǎn)MySite中。圖1—3網(wǎng)頁應(yīng)用聯(lián)系樣張三(4)打開網(wǎng)頁文件exel—1。html,將clock.txt文件中的代碼加入到網(wǎng)頁腳本中，使網(wǎng)頁瀏覽時右下角出現(xiàn)一個時鐘特效.3、實驗參考步驟1)Dreamweaver8中窗口、標(biāo)尺和網(wǎng)格的基本操作如下。①單擊網(wǎng)頁編輯區(qū)下方狀態(tài)欄中的【窗口大小】下拉式按鈕，然后在打開的快捷菜單中選擇合適的尺寸。圖1-4【網(wǎng)格設(shè)置】對話框②選擇【查看】標(biāo)尺顯示命令，然后分別選擇【像素】、【英寸】、【厘米】，觀察設(shè)置后的不同結(jié)果。③選擇【查看】I【網(wǎng)絡(luò)】|【顯示網(wǎng)絡(luò)】命令，可以在編輯區(qū)顯示王哥，選擇【網(wǎng)格設(shè)置】命令，可以打開【網(wǎng)格設(shè)置】對話框，如圖1-4所示。④設(shè)計者可以將【間隔】(即網(wǎng)格密度)設(shè)為50像素，將【顯示】(即網(wǎng)格顯示方式)設(shè)為線或者點(diǎn)，將【顏色】(即網(wǎng)格線條顏色)設(shè)為#CCCC99,選擇【靠齊到網(wǎng)格】復(fù)選框使對象同網(wǎng)格靠齊。2)制作簡單網(wǎng)頁的基本操作(1)按題目要求制作網(wǎng)頁exel-1.html,操作步驟如下。.將素材文件夾中的material子文件夾復(fù)制到當(dāng)前硬盤的根文件夾中，然后改名為MySite。.啟動Dreamweaver8,在【起始頁】中選擇創(chuàng)建新的【HTML】項目，此時創(chuàng)建了一個未命名的空白網(wǎng)頁。.選擇【站點(diǎn)】I【新建站點(diǎn)】命令。單擊【高級】標(biāo)簽，在【高級】選項卡中設(shè)置【本地信息】。在【站點(diǎn)名稱】文本框中輸入“我的站點(diǎn)”,單擊【本地根文件夾】文本框右邊的圖標(biāo)，選擇當(dāng)前硬盤根文件夾下的MySite,將其設(shè)置為本地站點(diǎn)的根文件夾。單擊【默認(rèn)圖像文件夾】文本框右邊的圖標(biāo)，選擇文件夾MySite下的img為默認(rèn)的圖像文件夾。在【鏈接相對于】選項中選擇【文檔】單選按鈕.其它參數(shù)默認(rèn)，并單擊【確定】按鈕完成新站點(diǎn)創(chuàng)建。.在Dreamweaver8網(wǎng)頁編輯器窗口中為新網(wǎng)頁設(shè)置頁面屬性，選擇【修改】I【頁面屬性】命令，在【頁面屬性】對話框中設(shè)置各項參數(shù).在【分類】列表框中選擇【外觀】選項，單擊【背景圖像】右邊的【瀏覽】按鈕，選擇本地站點(diǎn)的文件夾img中的文件bg0100。jpg,在【重復(fù)】下拉列表框中選擇“橫向重復(fù)”按鈕,使選擇的圖像重復(fù)布滿網(wǎng)頁.將【左邊距】、【右邊距】、【上邊距】、【下邊距】分別設(shè)置為0后,單擊【確認(rèn)】按鈕確認(rèn)。.選擇【文件】I【另存為】命令，將網(wǎng)頁excel-1.html為名保存在本地站點(diǎn)MySite中。.選擇【插入】1【布局對象】I【層】命令，在網(wǎng)頁文檔窗口合適的位置繪制插入圖像定位用的層Layerl,并將光標(biāo)插入在層中。選擇【插入】欄的【常用】選項,單擊插入圖像按鈕,在打開的【選擇圖像源文件】對話框選擇要插入的圖像文件,將img文件夾中的圖像文件earth.gif插入層中,并將包含圖像的層調(diào)整至合適位置。.單擊圖像earth.gif將其選中，在【屬性】面板中單擊【編輯】區(qū)域中的按鈕，啟動外部圖像編輯器Fireworks對圖像進(jìn)行編輯.在打開的圖像處理軟件Fireworks的文檔編輯器窗口中，單擊文本工具，在【屬性】面板中設(shè)置文字屬性，字體為“ArialBlack”,大小為“30〃，顏色為“#000000”（黑色）。在合適的位置為圖像添加文字“Welcome”.選中文字，按快捷鍵Ctrl+V,將文字復(fù)制一份，并將文字顏色改為“#FFFFFF〃（白色），適當(dāng)調(diào)整文字,是文字產(chǎn)生陰影效果.單擊文檔窗口左上角的【完成】按鈕，返回Dreamweaver8..選擇【插入】欄的【布局】選項，單擊【繪制層】按鈕，在網(wǎng)頁文檔窗口合適的位置繪制插入文字定位用的層Layer2和Layer3,并在層中輸入文字“8口$1口0$$—土0—。口$土0山0^’。在【屬性】面板中設(shè)置文字的屬性，字體為“Arial”，大小為“36”，層Layer2中文字顏色為“黑色”，層Layer3中文字顏色為“白色〃，適當(dāng)調(diào)整層的位置,使文字產(chǎn)生陰影效果。.用同樣的方法，在網(wǎng)頁中插入文字“商務(wù)網(wǎng)站歡迎您”，如圖1—1所示..按F12鍵預(yù)覽網(wǎng)頁，選擇【文件】I【保存】命令，將網(wǎng)頁以exal—1。html為名保存在本地站點(diǎn)MySite中。（2）制作網(wǎng)頁exel-2.html,操作步驟如下。.在Dreamweaver8網(wǎng)頁編輯器中新建一個頁面。選擇【修改】I【頁面屬性】命令,在【頁面屬性】對話框中設(shè)置各項參數(shù)..在【分類】列表框中選擇【外觀】選項，單擊【背景圖像】右邊的【瀏覽】按鈕，選擇本地站點(diǎn)的文件夾img中的文件bg0005.jpg,在【重復(fù)】下拉列表框中選擇“重復(fù)”按鈕,使選擇的圖像重復(fù)布滿網(wǎng)頁.將【左邊距】、【右邊距】、【上邊距】、【下邊距】分別設(shè)置為0后，單擊【確認(rèn)】按鈕確認(rèn)。在【分類】列表框中選擇【標(biāo)題/編碼】選項,在【標(biāo)題】文本框中輸入：書,其他參數(shù)默認(rèn)，然后單擊【確認(rèn)】按鈕確認(rèn)。.選擇【文件】|【另存為】命令，將網(wǎng)頁以excel—2。html為名保存在本地站點(diǎn)MySite中.注意：這一步是非常重要的一步，千萬不要省略。完成了這一步驟后,在網(wǎng)頁上插入的都是相對路徑的對象，這樣可避免很多因路徑問題找不到對象的錯誤。④.將光標(biāo)定位在第二行，選擇【插入】1【圖像】命令或選擇【插入】欄【常用】選項,單擊插入圖像按鈕，在打開的【選擇圖像源文件】對話框zhng,選擇本地站點(diǎn)下img文件夾中的圖像文件bg0012.gif,單擊【確定】按鈕確認(rèn).選中該圖片對象，在【屬性】面板中，將參數(shù)【寬】設(shè)置為500像素，【高】設(shè)置為40像素，然后單擊【居中】按鈕，使圖片在頁面上居中,在將光標(biāo)定位在第三行，用上述相同的方法插入文件Welcome.jpg。⑤.將光標(biāo)定位在第四行，在【屬性】面板中單擊【居中】按鈕，選擇【插入】欄的【常用】選項，單擊插入Flash按鈕和插入圖像按鈕，在網(wǎng)頁中依次插入shu2.swf,shu。gif,shu4.swf。⑥.單擊圖像shu。gif將其選中，在【屬性】面板中單擊區(qū)域中的按鈕，啟動外部圖像編輯器Fireworks對圖像進(jìn)行編輯，在打開的圖像處理然見Fireworks的文檔編輯窗口中，選擇【窗口】|【幀】命令，打開【幀】面板,單擊【幀6】,選中第6幀.⑦.選擇【文件】I【導(dǎo)入】命令，導(dǎo)入圖像shu°jpg。此時,鼠標(biāo)指針成直角，在被編輯圖像左上角單擊鼠標(biāo)，插入圖像shu.jpg。單擊Fireworks編輯器窗口左上角的【完成】按鈕，返回Dreamweaver8.⑧.在網(wǎng)頁合適的位置輸入文字“知識的源泉，精神的糧食”。在【屬性】面板匯總設(shè)置文職的屬性,字體為“隸書”大小為36，文字顏色為“紅色〃。⑨.按F12鍵預(yù)覽網(wǎng)頁，選擇【文件】I【保存】命令，將網(wǎng)頁exel-2。html為名保存在本地站點(diǎn)MySite中。(3)制作網(wǎng)站相冊index。html,操作步驟.選擇【文件】I【新建】命令，創(chuàng)建新文檔。.選擇【命令】|【創(chuàng)建網(wǎng)站相冊】命令，在打開的【創(chuàng)建網(wǎng)站相冊】對話框中輸入各類參數(shù)，如圖1-5所示.圖1—5【穿件圖像相冊】對話框.單擊【確定】按鈕，Dreamweaver8自動啟動Fireworks8為網(wǎng)頁圖像完成批處理.選擇【修改】|【頁面屬性】命令，將MySite\img中的bg0006.jpg圖片作為該網(wǎng)頁的背景,將標(biāo)題字體設(shè)置為“隸書”，標(biāo)題背景顏色設(shè)置為“＃FFFF99”。.選擇【文件】I【保存】命令，將網(wǎng)頁以index。html為名保存在本地站點(diǎn)MySite中。(4)添加HTML代碼。.打開文件內(nèi)。。憶土乂3按快捷鍵Ctrl+A和Ctrl+C,將clock.txt文件中的代碼全選后復(fù)制到剪貼板。.打開網(wǎng)頁文件exel-1.html,單擊網(wǎng)頁編輯窗口左上角的【代碼】按鈕，切換到【代碼】視圖，在標(biāo)簽〈body〉下一行起始位置插入光標(biāo)，接回車鍵插入空行，在空行處按快捷鍵Ctrl+V，將代碼添加到網(wǎng)頁的〈body＞與＜/body＞標(biāo)簽的中間..單擊網(wǎng)頁編輯窗口左上角的