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

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