構(gòu)建電子商務(wù)網(wǎng)站CHAPTERONE隨著互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，電子商務(wù)已經(jīng)滲透到各行各業(yè)。電子商務(wù)網(wǎng)站作為企業(yè)的重要窗口，不僅是企業(yè)品牌、文化、產(chǎn)品和服務(wù)宣傳的信息平臺，而且通過網(wǎng)站在線交易，能夠降低經(jīng)營成本，拓展發(fā)展空間。本項目將從電子商務(wù)網(wǎng)站的設(shè)計準(zhǔn)則出發(fā)，詳細(xì)介紹如何合理規(guī)劃和設(shè)計電子商務(wù)網(wǎng)站結(jié)構(gòu)，以及如何使用Dreamweaver創(chuàng)建站點(diǎn)等知識。能夠根據(jù)網(wǎng)站的設(shè)計準(zhǔn)則設(shè)計電子商務(wù)網(wǎng)站結(jié)構(gòu)。能夠使用Dreamweaver創(chuàng)建站點(diǎn)。學(xué)習(xí)目標(biāo)Contents目錄電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識1電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計2使用Dreamweaver創(chuàng)建站點(diǎn)3一、電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識初識電子商務(wù)網(wǎng)站01電子商務(wù)網(wǎng)站設(shè)計準(zhǔn)則02一、電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識網(wǎng)頁及網(wǎng)頁設(shè)計2電子商務(wù)網(wǎng)站的定義1網(wǎng)頁構(gòu)成要素31初識電子商務(wù)網(wǎng)站一、電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識電子商務(wù)網(wǎng)站的定義1電子商務(wù)網(wǎng)站是基于瀏覽器/服務(wù)器應(yīng)用方式，買賣雙方互不謀面地進(jìn)行各種商貿(mào)活動，實(shí)現(xiàn)消費(fèi)者的網(wǎng)上購物、商戶之間的網(wǎng)上交易和在線電子支付以及各種商務(wù)活動、交易活動、金融活動和相關(guān)的綜合服務(wù)活動的一種新型的商業(yè)運(yùn)營模式。B2BB2C（天貓、京東商城、亞馬遜）C2C（淘寶）O2OB2QF2C京東商城網(wǎng)站1初識電子商務(wù)網(wǎng)站一、電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識網(wǎng)頁及網(wǎng)頁設(shè)計2DreamweaverPhotoshopFlashCorelDRAWFireworksIllustrator1初識電子商務(wù)網(wǎng)站網(wǎng)頁設(shè)計軟件主要有：一、電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識01文本02圖像03動畫04超鏈接05網(wǎng)站Logo06導(dǎo)航條07表格08框架09表單10橫幅廣告網(wǎng)頁構(gòu)成要素31初識電子商務(wù)網(wǎng)站一、電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識1明確網(wǎng)站建設(shè)目的和用戶需求2總體設(shè)計主題鮮明3設(shè)計人性化的交互界面5準(zhǔn)確無誤的鏈接4網(wǎng)頁形式與內(nèi)容相統(tǒng)一6網(wǎng)站信息的時效性7合理利用多媒體功能8努力提高網(wǎng)站的性能2電子商務(wù)網(wǎng)站設(shè)計準(zhǔn)則Contents目錄電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識1電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計2使用Dreamweaver創(chuàng)建站點(diǎn)3二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計網(wǎng)站的物理結(jié)構(gòu)01網(wǎng)站的邏輯結(jié)構(gòu)02網(wǎng)站的構(gòu)成03網(wǎng)頁的空間結(jié)構(gòu)04網(wǎng)頁的布局結(jié)構(gòu)04二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計1網(wǎng)站的物理結(jié)構(gòu)2樹形結(jié)構(gòu)1扁平式結(jié)構(gòu)二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計2網(wǎng)站的邏輯結(jié)構(gòu)扁平式網(wǎng)站中任意兩個頁面之間都可以相互鏈接，網(wǎng)頁之間的鏈接深度都是1。樹形使用分類、頻道等頁面，對同類屬性的頁面進(jìn)行鏈接地址組織的網(wǎng)站結(jié)構(gòu)。鏈接深度大多大于1。二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計3網(wǎng)站的構(gòu)成網(wǎng)站的構(gòu)成引導(dǎo)用戶瀏覽網(wǎng)站其他部分的內(nèi)容第一時間直觀地給用戶展示想展示的內(nèi)容體現(xiàn)和突出網(wǎng)站主題的作用123風(fēng)格各異1內(nèi)容制勝首頁內(nèi)頁2二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計4網(wǎng)頁的空間結(jié)構(gòu)1.網(wǎng)頁頂部一般在這個位置大多放的是網(wǎng)站Logo，登錄條、頁面橫幅廣告、菜單欄等內(nèi)容都可以放在頂部。2.網(wǎng)頁主體企業(yè)信息、產(chǎn)品介紹、業(yè)務(wù)流程等一系列想要對用戶表達(dá)的內(nèi)容都在這個區(qū)域。3.網(wǎng)頁底部網(wǎng)頁底部大多用于放置友情鏈接、網(wǎng)站版權(quán)信息、使用協(xié)議等，也可以放一些導(dǎo)航鏈接。二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計5網(wǎng)頁的布局結(jié)構(gòu)1“國”字型結(jié)構(gòu)布局頁面結(jié)構(gòu)清晰，主次分明，是適合初學(xué)者使用的布局方法。因為過于規(guī)矩而顯得呆板，如果在細(xì)節(jié)、色彩上安排不得當(dāng)，很容易讓人產(chǎn)生視覺疲勞。優(yōu)點(diǎn)缺點(diǎn)二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計5網(wǎng)頁的布局結(jié)構(gòu)2“廠”字型結(jié)構(gòu)布局二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計5網(wǎng)頁的布局結(jié)構(gòu)3“回”字型結(jié)構(gòu)布局將網(wǎng)頁中不被重視的頁腳利用了起來，增加了主體內(nèi)容，充分利用了頁面的有限空間。使頁面充斥著各種內(nèi)容，可能會給人造成過于繁雜的感覺。優(yōu)點(diǎn)缺點(diǎn)二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計5網(wǎng)頁的布局結(jié)構(gòu)4框架型結(jié)構(gòu)布局由于兼容性和美觀等因素，這種布局目前專業(yè)設(shè)計人員采用的已經(jīng)不多，不過在一些大型論壇上還是比較受青睞的，有些企業(yè)網(wǎng)站也有應(yīng)用。左右框架型A上下框架型B綜合框架型C二、電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計5網(wǎng)頁的布局結(jié)構(gòu)5自由式結(jié)構(gòu)布局精美的平面設(shè)計，富有創(chuàng)意的Flash動畫，精彩的視頻，讓表達(dá)的信息更豐富。這種結(jié)構(gòu)文字過少，難以讓瀏覽者長時間關(guān)注，有時可能因為導(dǎo)航條不太明顯而給用戶操作造成不便。優(yōu)點(diǎn)缺點(diǎn)Contents目錄電子商務(wù)網(wǎng)站設(shè)計基礎(chǔ)知識1電子商務(wù)網(wǎng)站結(jié)構(gòu)設(shè)計2使用Dreamweaver創(chuàng)建站點(diǎn)3三、使用Dreamweaver創(chuàng)建站點(diǎn)初識Dreamweaver01創(chuàng)建站點(diǎn)的準(zhǔn)備02創(chuàng)建與設(shè)置站點(diǎn)03三、使用Dreamweaver創(chuàng)建站點(diǎn)1初識DreamweaverDreamweaver是美國著名的多媒體軟件開發(fā)商Macromedia公司推出的一套專業(yè)可視化網(wǎng)頁開發(fā)工具，用于網(wǎng)頁設(shè)計與制作。定義用于各類素材的集成與發(fā)布，可視性強(qiáng)，且支持Flash、Shockwave、Active等許多外部媒體的發(fā)布，采用浮動面板的設(shè)計風(fēng)格，使用簡單、方便。特點(diǎn)Dreamweaver具有制作效率高、網(wǎng)站管理系統(tǒng)、控制能力強(qiáng)等優(yōu)點(diǎn)。優(yōu)點(diǎn)三、使用Dreamweaver創(chuàng)建站點(diǎn)2創(chuàng)建站點(diǎn)的準(zhǔn)備注冊域名1域名的要求1域名后綴2選擇域名注冊機(jī)構(gòu)進(jìn)行注冊3常見的域名后綴.com（常用于商業(yè)企業(yè)）net（常用于網(wǎng)絡(luò)服務(wù)）.org（非盈利組織）.cn（國內(nèi)域名）.gov只開放給政府機(jī)構(gòu).edu只開放給教育機(jī)構(gòu)三、使用Dreamweaver創(chuàng)建站點(diǎn)2創(chuàng)建站點(diǎn)的準(zhǔn)備申請空間2估算網(wǎng)站大約需要占用多大的容量，根據(jù)所需的容量去找空間。要清楚需要什么類型的空間？考慮以下問題：選擇網(wǎng)絡(luò)線路。選擇電信、移動或聯(lián)通的線路？或者選擇雙線或三線。除了以上選擇，還需要選擇帶寬，考慮需要多快的網(wǎng)速。三、使用Dreamweaver創(chuàng)建站點(diǎn)2創(chuàng)建站點(diǎn)的準(zhǔn)備虛擬主機(jī)適合較為簡單的網(wǎng)站VPS（虛擬專用服務(wù)器）適合稍大的網(wǎng)站獨(dú)立服務(wù)器適合企業(yè)使用網(wǎng)絡(luò)空間類型分為以下三種。三、使用Dreamweaver創(chuàng)建站點(diǎn)3創(chuàng)建與設(shè)置站點(diǎn)01創(chuàng)建站點(diǎn)02編輯站點(diǎn)03刪除站點(diǎn)04修改站點(diǎn)05復(fù)制站點(diǎn)06導(dǎo)出與導(dǎo)入站點(diǎn)三、使用Dreamweaver創(chuàng)建站點(diǎn)3創(chuàng)建與設(shè)置站點(diǎn)1．簡述電子商務(wù)網(wǎng)站建設(shè)應(yīng)該遵循哪些設(shè)計準(zhǔn)則。2．常見的網(wǎng)頁布局結(jié)構(gòu)有哪些？試舉例說明。3．在DreamweaverCS6中創(chuàng)建一個名為“時尚科技”的站點(diǎn)，將其中的本地站點(diǎn)保存在D:\shishangkeji文件夾下，然后為“時尚科技”網(wǎng)站建立一個存放圖片的文件夾images。項目習(xí)題使用Photoshop制作網(wǎng)頁版面CHAPTERTWOPhotoshop是一款集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意等于一體的圖形圖像處理軟件，憑借其便利、專業(yè)的圖像處理功能，已經(jīng)成為網(wǎng)頁設(shè)計與制作的必備工具。通過本項目的學(xué)習(xí)，我們可以熟悉Photoshop的基本操作，利用Photoshop制作文字特效、圖像特效等，并制作出具有專業(yè)水準(zhǔn)的網(wǎng)頁版面。本書將以PhotoshopCS6版本為操作平臺進(jìn)行學(xué)習(xí)。能夠利用Photoshop設(shè)計電子商務(wù)網(wǎng)站首頁。能夠利用Photoshop設(shè)計促銷活動頁。學(xué)習(xí)目標(biāo)Contents目錄Photoshop基本操作1使用Photoshop制作文字特效2使用Photoshop制作圖像特效3電子商務(wù)網(wǎng)站首頁設(shè)計4促銷活動頁設(shè)計5一、Photoshop基本操作認(rèn)識Photoshop工作界面01圖像文件的基本操作02利用工具編輯商品圖片編輯03一、Photoshop基本操作1認(rèn)識Photoshop工作界面菜單欄工具欄編輯窗口選項欄面板組一、Photoshop基本操作2圖像文件的基本操作一、Photoshop基本操作3利用工具編輯商品圖片編輯1選擇工具選框工具矩形選框工具橢圓選框工具單列選框工具單行選框工具套索工具魔棒工具一、Photoshop基本操作3利用工具編輯商品圖片編輯一、Photoshop基本操作3利用工具編輯商品圖片編輯2繪圖工具一、Photoshop基本操作3利用工具編輯商品圖片編輯2繪圖工具仿制圖章工具油漆桶工具一、Photoshop基本操作3利用工具編輯商品圖片編輯3形狀工具01矩形工具02圓角矩形工具03橢圓工具04多邊形工具05直線型工具06自定義工具一、Photoshop基本操作3利用工具編輯商品圖片編輯3形狀工具在工具欄中選擇自定形狀工具。在“形狀”下拉列表框中選擇所需的形狀樣式，然后在圖像中拖動鼠標(biāo)進(jìn)行繪制即可。在繪制過程中也可以進(jìn)行圖層樣式、自選圖形的設(shè)置。Contents目錄Photoshop基本操作1使用Photoshop制作文字特效2使用Photoshop制作圖像特效3電子商務(wù)網(wǎng)站首頁設(shè)計4促銷活動頁設(shè)計5二、使用Photoshop制作文字特效添加文字01浮雕文字特效02金屬文字特效03五、晶瑩剔透文字特效05磨砂涂鴉文字特效04二、使用Photoshop制作文字特效1初識電子商務(wù)網(wǎng)站在工具欄中選擇橫排文字工具，在其選項欄中設(shè)置字體、字號等。1輸入文字二、使用Photoshop制作文字特效1初識電子商務(wù)網(wǎng)站2設(shè)置文字屬性二、使用Photoshop制作文字特效1初識電子商務(wù)網(wǎng)站3創(chuàng)建段落文字二、使用Photoshop制作文字特效1初識電子商務(wù)網(wǎng)站4創(chuàng)建變形文字設(shè)置變形參數(shù)。變形文字效果。二、使用Photoshop制作文字特效1初識電子商務(wù)網(wǎng)站5將文字轉(zhuǎn)換為路徑二、使用Photoshop制作文字特效1初識電子商務(wù)網(wǎng)站6將文字圖層轉(zhuǎn)換為普通圖層二、使用Photoshop制作文字特效2浮雕文字特效二、使用Photoshop制作文字特效3金屬文字特效二、使用Photoshop制作文字特效4磨砂涂鴉文字特效二、使用Photoshop制作文字特效5晶瑩剔透文字特效Contents目錄Photoshop基本操作1使用Photoshop制作文字特效2使用Photoshop制作圖像特效3電子商務(wù)網(wǎng)站首頁設(shè)計4促銷活動頁設(shè)計5三、使用Photoshop制作圖像特效調(diào)整圖像大小01調(diào)整圖像色彩與色調(diào)02應(yīng)用濾鏡特效03三、使用Photoshop制作圖像特效1調(diào)整圖像大小打開網(wǎng)頁圖像，單擊“圖像”|“圖像大小”命令，彈出“圖像大小”對話框，從中設(shè)置“像素大小”“文檔大小”“縮放樣式”“約束比例”等參數(shù)，然后單擊“確定”按鈕。三、使用Photoshop制作圖像特效1調(diào)整圖像大小通過“調(diào)整畫布大小”進(jìn)行設(shè)置，打開網(wǎng)頁圖像，單擊“圖像”|“畫布大小”命令，彈出“畫布大小”對話框，從中設(shè)置畫布“寬度”“高度”“畫布擴(kuò)展顏色”“定位”等參數(shù)，然后單擊“確定”按鈕。三、使用Photoshop制作圖像特效2調(diào)整圖像色彩與色調(diào)在“圖像”|“調(diào)整”菜單下選擇相關(guān)的命令，可以對圖像的色彩與色調(diào)進(jìn)行精確的調(diào)整。三、使用Photoshop制作圖像特效2調(diào)整圖像色彩與色調(diào)在電子商務(wù)網(wǎng)站的制作過程中，比較常用的命令有以下幾種。1色階2亮度/對比度3色相/飽和度三、使用Photoshop制作圖像特效2調(diào)整圖像色彩與色調(diào)1色階三、使用Photoshop制作圖像特效2調(diào)整圖像色彩與色調(diào)2亮度/對比度3色相/飽和度三、使用Photoshop制作圖像特效3應(yīng)用濾鏡特效使用“扭曲”濾鏡創(chuàng)建球面化效果01使用“渲染”濾鏡創(chuàng)建鏡頭光暈效果02使用“風(fēng)格化”濾鏡創(chuàng)建拼貼效果03使用“模糊”濾鏡創(chuàng)建徑向模糊效果04三、使用Photoshop制作圖像特效3應(yīng)用濾鏡特效Contents目錄Photoshop基本操作1使用Photoshop制作文字特效2使用Photoshop制作圖像特效3電子商務(wù)網(wǎng)站首頁設(shè)計4促銷活動頁設(shè)計5四、電子商務(wù)網(wǎng)站首頁設(shè)計頁面頭部的制作01頁面左側(cè)的制作02頁面中間及右側(cè)的制作03頁面底部的制作04四、電子商務(wù)網(wǎng)站首頁設(shè)計1頁面頭部的制作四、電子商務(wù)網(wǎng)站首頁設(shè)計2頁面左側(cè)的制作四、電子商務(wù)網(wǎng)站首頁設(shè)計3頁面中間及右側(cè)的制作四、電子商務(wù)網(wǎng)站首頁設(shè)計4頁面底部的制作Contents目錄Photoshop基本操作1使用Photoshop制作文字特效2使用Photoshop制作圖像特效3電子商務(wù)網(wǎng)站首頁設(shè)計4促銷活動頁設(shè)計5五、促銷活動頁設(shè)計項目習(xí)題綜合運(yùn)用本項目所學(xué)知識，利用“素材文件\項目二\習(xí)題1”中提供的素材，設(shè)計并制作化妝品網(wǎng)店宣傳橫幅廣告，效果如圖所示。0102綜合運(yùn)用本項目所學(xué)知識，利用“素材文件\項目二\習(xí)題2”中提供的素材，設(shè)計并制作茶葉產(chǎn)品的中秋活動促銷頁，效果如圖所示。項目習(xí)題使用Flash制作網(wǎng)頁廣告動畫CHAPTERTHREEFlash動畫因其操作性強(qiáng)、占用空間小、可創(chuàng)造性強(qiáng)等優(yōu)勢，能夠滿足網(wǎng)頁設(shè)計的審美多元化需求，使其在網(wǎng)頁設(shè)計中得到了廣泛的應(yīng)用。在電子商務(wù)網(wǎng)站中，隨處可見應(yīng)用Flash技術(shù)制作的商品展示、網(wǎng)站廣告、Banner及交互動畫，甚至可以使用Flash進(jìn)行視頻交流，這些都極大地提升了用戶的瀏覽興趣。通過本項目的學(xué)習(xí)，讀者可以熟悉Flash的基本操作，并能利用Flash制作電子商務(wù)網(wǎng)站的導(dǎo)航菜單和橫幅廣告。本書將以FlashCS6版本為操作平臺進(jìn)行學(xué)習(xí)。能夠利用Flash制作電子商務(wù)網(wǎng)站導(dǎo)航菜單。能夠利用Flash制作電子商務(wù)網(wǎng)站橫幅廣告。學(xué)習(xí)目標(biāo)Contents目錄認(rèn)識Flash工作界面1Flash工具的應(yīng)用2使用Flash制作導(dǎo)航菜單3使用Flash制作橫幅廣告4一、認(rèn)識Flash工作界面基本功能區(qū)菜單欄編輯欄面板工具箱時間軸面板舞臺窗口選項卡一、認(rèn)識Flash工作界面菜單欄舞臺“時間軸”面板“屬性”面板工具欄基本功能區(qū)一、認(rèn)識Flash工作界面1菜單欄編輯：用于對幀的復(fù)制與粘貼、編輯時的參數(shù)設(shè)置，以及自定義工具面板、字體映射等。視圖：用于快速設(shè)置屏幕上顯示的內(nèi)容，如浮動面板、時間軸和網(wǎng)格標(biāo)尺等。插入：該菜單中的命令利用率非常高，如轉(zhuǎn)換元件和新建元件等。農(nóng)業(yè)眾籌、預(yù)售成為農(nóng)業(yè)電商的重大業(yè)態(tài)。修改：用于修改文檔的屬性和對象的形狀等。一、認(rèn)識Flash工作界面2基本功能區(qū)一、認(rèn)識Flash工作界面3舞臺舞臺是場景白色區(qū)域中的內(nèi)容，即放置動畫內(nèi)容的區(qū)域。在編輯動畫時，可以在整個場景中繪制或編輯圖形，內(nèi)容包括矢量插圖、文本框、按鈕和導(dǎo)入的位圖圖形或視頻剪輯等，也可根據(jù)需要改變舞臺的屬性和形式。一、認(rèn)識Flash工作界面4“時間軸”面板時間軸標(biāo)題播放頭幀播放按鈕“幀居中”按鈕循環(huán)按鈕“繪圖紙”按鈕幀頻指示器運(yùn)行時間指示器一、認(rèn)識Flash工作界面5“屬性”面板一、認(rèn)識Flash工作界面6工具欄Contents目錄認(rèn)識Flash工作界面1Flash工具的應(yīng)用2使用Flash制作導(dǎo)航菜單3使用Flash制作橫幅廣告4一、Flash工具的應(yīng)用文本工具填充工具繪圖工具一、Flash工具的應(yīng)用1文本工具01靜態(tài)文本02動態(tài)文本03輸入文本一、Flash工具的應(yīng)用1文本工具一、Flash工具的應(yīng)用2繪圖工具01線條工具繪制線條設(shè)置繪制對象屬性一、Flash工具的應(yīng)用2繪圖工具01線條工具“實(shí)線”樣式“虛線”樣式一、Flash工具的應(yīng)用2繪圖工具01線條工具“點(diǎn)狀線”樣式“鋸齒狀”樣式一、Flash工具的應(yīng)用2繪圖工具01線條工具“點(diǎn)描”樣式“斑馬線”樣式一、Flash工具的應(yīng)用2繪圖工具02鉛筆工具鉛筆工具“屬性”面板鉛筆模式一、Flash工具的應(yīng)用2繪圖工具03鋼筆工具設(shè)置鋼筆工具參數(shù)一、Flash工具的應(yīng)用2繪圖工具03鋼筆工具使用鋼筆工具繪制直線段設(shè)置筆觸參數(shù)確定錨點(diǎn)一、Flash工具的應(yīng)用2繪圖工具03鋼筆工具使用鋼筆工具繪制直線段繪制圖形一、Flash工具的應(yīng)用2繪圖工具03鋼筆工具使用鋼筆工具繪制曲線繪制曲線繪制直線一、Flash工具的應(yīng)用2繪圖工具03鋼筆工具使用鋼筆工具添加和刪除錨點(diǎn)添加錨點(diǎn)刪除錨點(diǎn)一、Flash工具的應(yīng)用2繪圖工具03鋼筆工具使用添加錨點(diǎn)工具和刪除錨點(diǎn)工具轉(zhuǎn)換為“轉(zhuǎn)換錨點(diǎn)工具”轉(zhuǎn)換為“部分選擇工具”鋼筆工具的交互一、Flash工具的應(yīng)用2繪圖工具04多邊形工具一、Flash工具的應(yīng)用3填充工具01顏料桶工具顏料桶工具“屬性”面板“空隙大小”選項一、Flash工具的應(yīng)用3填充工具02墨水瓶工具墨水瓶工具可以用于改變線條的顏色、寬度和類型，還可為只有填充的圖形添加邊緣線條。03滴管工具一、Flash工具的應(yīng)用3填充工具04刷子工具Contents目錄認(rèn)識Flash工作界面1Flash工具的應(yīng)用2使用Flash制作導(dǎo)航菜單3使用Flash制作橫幅廣告4三、使用Flash制作導(dǎo)航菜單認(rèn)識導(dǎo)航菜單導(dǎo)航菜單設(shè)計三、使用Flash制作導(dǎo)航菜單1認(rèn)識導(dǎo)航菜單頂部導(dǎo)航1側(cè)邊欄導(dǎo)航2底部導(dǎo)航3漢堡包式導(dǎo)航4滾動式導(dǎo)航5三、使用Flash制作導(dǎo)航菜單1認(rèn)識導(dǎo)航菜單頂部導(dǎo)航1優(yōu)點(diǎn)缺點(diǎn)可以一目了然地讓用戶迅速找到自己所需的信息。當(dāng)首頁內(nèi)容過多需要滾屏?xí)r，用戶需要滾動到頂部再去切換導(dǎo)航內(nèi)容。三、使用Flash制作導(dǎo)航菜單1認(rèn)識導(dǎo)航菜單優(yōu)點(diǎn)缺點(diǎn)設(shè)計形式比較多樣，也可以有多種表現(xiàn)形式，比較個性化。效果不是很好，特別是側(cè)邊欄導(dǎo)航寬度較大時，會影響整個網(wǎng)頁的寬度。側(cè)邊欄導(dǎo)航2三、使用Flash制作導(dǎo)航菜單1認(rèn)識導(dǎo)航菜單底部導(dǎo)航3底部導(dǎo)航應(yīng)用性不是很廣，經(jīng)常出現(xiàn)在一些活動或個性化的網(wǎng)站當(dāng)中。一般底部導(dǎo)航被廣泛使用的并不是在PC端網(wǎng)頁中，而是在移動端頁面中。三、使用Flash制作導(dǎo)航菜單1認(rèn)識導(dǎo)航菜單優(yōu)點(diǎn)缺點(diǎn)比較節(jié)約空間，相當(dāng)于將導(dǎo)航設(shè)計成隱藏或彈出的形式，比較具有設(shè)計感。對于一部分用戶而言，漢堡包式導(dǎo)航其實(shí)并不是那么直觀。漢堡包式導(dǎo)航4三、使用Flash制作導(dǎo)航菜單1認(rèn)識導(dǎo)航菜單水平式滾動導(dǎo)航垂直式滾動導(dǎo)航導(dǎo)航內(nèi)容在左右水平方向滾動，當(dāng)用戶首次遇到這類網(wǎng)站導(dǎo)航時體驗感會比較差。垂直式滾動導(dǎo)航在網(wǎng)頁中運(yùn)用得較為廣泛。滾動式導(dǎo)航5三、使用Flash制作導(dǎo)航菜單2導(dǎo)航菜單設(shè)計Contents目錄認(rèn)識Flash工作界面1Flash工具的應(yīng)用2使用Flash制作導(dǎo)航菜單3使用Flash制作橫幅廣告4四、使用Flash制作橫幅廣告認(rèn)識橫幅廣告橫幅廣告設(shè)計四、使用Flash制作橫幅廣告1認(rèn)識橫幅廣告02030401定義作為提示性廣告，瀏覽者可以點(diǎn)擊進(jìn)入以了解更多的信息，是互聯(lián)網(wǎng)廣告中最常見的一種形式。特點(diǎn)展示方式靈活多變。尺寸720像素×90像素、480像素×60像素或233像素×30像素。圖片格式GIF、RichMediaBanner。05表現(xiàn)形式靜態(tài)橫幅、動畫橫幅與互動式橫幅。四、使用Flash制作橫幅廣告2橫幅廣告設(shè)計項目習(xí)題根據(jù)以下提示制作文字轉(zhuǎn)變效果，即由一個文字逐漸轉(zhuǎn)化為另一個文字。（1）新建動畫文件，設(shè)置文檔大小為600×400像素、幀頻為12fps。（2）在第1幀中添加文字“數(shù)碼之家網(wǎng)上商城”，按兩次【Ctrl+B】組合鍵將文字轉(zhuǎn)換為形狀；在第12幀添加文字“購物新體驗”，并將其轉(zhuǎn)換為形狀。（3）在第1幀和第12幀之間創(chuàng)建補(bǔ)間形狀動畫。0102某電商企業(yè)根據(jù)消費(fèi)者調(diào)查，重新設(shè)置網(wǎng)站的導(dǎo)航菜單，內(nèi)容包括：商品分類、會員中心、購物車、積分兌換、幫助中心、活動專區(qū)和留言板等。利用“素材文件\項目三\習(xí)題二”中提供的素材，為該公司設(shè)計導(dǎo)航菜單，效果如圖所示。項目習(xí)題03森馬服飾股份有限公司是一家以虛擬經(jīng)營為特色、以系列成人休閑服為主導(dǎo)產(chǎn)品的品牌服飾企業(yè)。近期公司推出一款女士羽絨服，利用“素材文件\項目三\習(xí)題三”中提供的素材，為該產(chǎn)品設(shè)計橫幅廣告，效果如圖所示。項目習(xí)題04十一臨近，蘇寧電器聯(lián)合多家家電廠商，準(zhǔn)備開啟史無前例的家電大促。請以此為主題，利用“素材文件\項目三\習(xí)題四”中提供的素材，為其設(shè)計一個推廣廣告，效果如圖所示。項目習(xí)題使用Dreamweaver添加網(wǎng)頁元素CHAPTERFOURDreamweaver是Adobe公司推出的一款網(wǎng)頁編輯軟件，用于對網(wǎng)站的設(shè)計、編輯和開發(fā)。由于它支持代碼、拆分、設(shè)計、實(shí)時視圖等多種方式來創(chuàng)作、編寫和修改網(wǎng)頁，并擁有可視化編輯界面，所以在電子商務(wù)網(wǎng)站的設(shè)計與制作中也被廣泛應(yīng)用。本書將以DreamweaverCS6版本為操作平臺進(jìn)行學(xué)習(xí)。本項目主要學(xué)習(xí)如何在網(wǎng)站中添加文本、表格、圖像和Flash等網(wǎng)頁基本元素。能夠?qū)W(wǎng)頁中的文字進(jìn)行編輯，在網(wǎng)頁中插入圖像并美化。能夠?qū)D片及Flash動畫插入到網(wǎng)頁中，并進(jìn)行相應(yīng)的編輯操作。學(xué)習(xí)目標(biāo)Contents目錄認(rèn)識DreamweaverCS6工作界面1添加網(wǎng)頁基本元素——文本和圖像2添加網(wǎng)頁基本元素——列表3添加網(wǎng)頁基本元素——表格4添加網(wǎng)頁基本元素——超鏈接5一、認(rèn)識DreamweaverCS6工作界面文檔窗口面板組“屬性”面板文檔工具欄菜單欄一、認(rèn)識DreamweaverCS6工作界面菜單欄文檔窗口“屬性”面板面板組工具欄一、認(rèn)識DreamweaverCS6工作界面1菜單欄文件：用于查看當(dāng)前文檔或?qū)Ξ?dāng)前文檔進(jìn)行操作。編輯：用于對文檔的各種基本編輯操作。查看：用于設(shè)置文檔的各種視圖，還可顯示或隱藏不同類型的頁面元素和工具欄。插入：提供了工具欄的擴(kuò)充選項，用于將對象插入到當(dāng)前文檔中。修改：用于更改選定頁面元素或項的屬性。使用此菜單可以編輯標(biāo)簽屬性，更改表格元素，為庫和模板執(zhí)行不同的操作。一、認(rèn)識DreamweaverCS6工作界面2工具欄工具欄有兩種顯示方式，一種是以菜單方式顯示，另一種是以面板方式顯示。一、認(rèn)識DreamweaverCS6工作界面3文檔窗口啟動DreamweaverCS6，即可打開其起始頁。單擊起始頁中“新建”欄中的HTML選項，可以新建HTML文檔，并進(jìn)入文檔窗口。一、認(rèn)識DreamweaverCS6工作界面3文檔窗口01“代碼”視圖02“拆分”視圖03“設(shè)計”視圖04實(shí)時視圖一、認(rèn)識DreamweaverCS6工作界面4“屬性”面板“屬性”面板位于狀態(tài)欄的下方，顯示當(dāng)前處于選中狀態(tài)的對象的各種屬性及參數(shù)。單擊“窗口”|“屬性”命令或按【Ctrl+F3】組合鍵，可以打開或關(guān)閉“屬性”面板。一、認(rèn)識DreamweaverCS6工作界面5面板組Contents目錄認(rèn)識DreamweaverCS6工作界面1添加網(wǎng)頁基本元素——文本和圖像2添加網(wǎng)頁基本元素——列表3添加網(wǎng)頁基本元素——表格4添加網(wǎng)頁基本元素——超鏈接5二、添加網(wǎng)頁基本元素——文本和圖像添加文本添加圖像二、添加網(wǎng)頁基本元素——文本和圖像1添加文本要完成某一內(nèi)容的描述，至少要用到大標(biāo)題、小標(biāo)題和段落文字等元素。在網(wǎng)頁中添加文本也要遵循這一原則。二、添加網(wǎng)頁基本元素——文本和圖像1添加文本二、添加網(wǎng)頁基本元素——文本和圖像2添加圖像Contents目錄認(rèn)識DreamweaverCS6工作界面1添加網(wǎng)頁基本元素——文本和圖像2添加網(wǎng)頁基本元素——列表3添加網(wǎng)頁基本元素——表格4添加網(wǎng)頁基本元素——超鏈接5三、添加網(wǎng)頁基本元素——列表添加無序列表添加自定義列表添加有序列表三、添加網(wǎng)頁基本元素——列表1添加無序列表三、添加網(wǎng)頁基本元素——列表2添加有序列表三、添加網(wǎng)頁基本元素——列表3添加自定義列表Contents目錄認(rèn)識DreamweaverCS6工作界面1添加網(wǎng)頁基本元素——文本和圖像2添加網(wǎng)頁基本元素——列表3添加網(wǎng)頁基本元素——表格4添加網(wǎng)頁基本元素——超鏈接5四、添加網(wǎng)頁基本元素——表格Contents目錄認(rèn)識DreamweaverCS6工作界面1添加網(wǎng)頁基本元素——文本和圖像2添加網(wǎng)頁基本元素——列表3添加網(wǎng)頁基本元素——表格4添加網(wǎng)頁基本元素——超鏈接5五、添加網(wǎng)頁基本元素——超鏈接認(rèn)識路徑添加錨記鏈接添加文檔鏈接添加空鏈接五、添加網(wǎng)頁基本元素——超鏈接1認(rèn)識路徑相對路徑用于描述鏈接源與鏈接目標(biāo)之間的相對位置，在網(wǎng)站內(nèi)部各頁面的鏈接中使用相對路徑最合適。相對路徑B絕對路徑提供了鏈接目標(biāo)文檔完整的URL地址，是包含服務(wù)器協(xié)議的完全路徑，如/index.html。絕對路徑A五、添加網(wǎng)頁基本元素——超鏈接2添加文檔鏈接五、添加網(wǎng)頁基本元素——超鏈接3添加錨記鏈接五、添加網(wǎng)頁基本元素——超鏈接4添加空鏈接項目習(xí)題打開“素材文件\項目四\4-11.html”，給網(wǎng)頁左側(cè)的圖片“京東金融”添加超鏈接，鏈接網(wǎng)址為。0102在左側(cè)“熱門促銷”列表中將li列表項都設(shè)置為空鏈接。03在左側(cè)添加“商品排名”列表，并添加列表內(nèi)容和設(shè)置空鏈接，效果如圖所示。項目習(xí)題04在網(wǎng)頁底部“文本提示處”添加一個表格，顯示商品的屬性，效果如圖所示。項目習(xí)題使用CSS樣式美化網(wǎng)頁CHAPTERFIVECSS（CascadingStyleSheet，層疊樣式表）是一種用于控制網(wǎng)頁元素樣式顯示的標(biāo)記性語言，也是目前流行的網(wǎng)頁設(shè)計技術(shù)。將網(wǎng)頁結(jié)構(gòu)和樣式分離，HTML負(fù)責(zé)網(wǎng)頁的結(jié)構(gòu)設(shè)計，CSS負(fù)責(zé)網(wǎng)頁的美化設(shè)計，這樣有利于網(wǎng)頁的加載和搜索。本項目將學(xué)習(xí)如何使用CSS樣式美化網(wǎng)頁。學(xué)會創(chuàng)建CSS樣式，以及設(shè)置和編輯CSS樣式?？梢允炀毜乩肅SS樣式來美化網(wǎng)頁。學(xué)習(xí)目標(biāo)Contents目錄認(rèn)識CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5一、認(rèn)識CSS樣式表了解CSS的基本語法在網(wǎng)頁中引用CSS的方式一、認(rèn)識CSS樣式表1了解CSS的基本語法CSS的樣式規(guī)則自定義的類ID和復(fù)合內(nèi)容123屬性1選擇器聲明2HTML標(biāo)簽值一、認(rèn)識CSS樣式表2在網(wǎng)頁中引用CSS的方式01直接添加在HTML標(biāo)記中02將樣式表內(nèi)嵌到HTML文件中03將外部樣式表鏈接到HTML文件上04聯(lián)合使用樣式表Contents目錄認(rèn)識CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5二、在Dreamweaver中創(chuàng)建CSS創(chuàng)建CSS規(guī)則創(chuàng)建CSS文件二、在Dreamweaver中創(chuàng)建CSS1創(chuàng)建CSS規(guī)則二、在Dreamweaver中創(chuàng)建CSS2創(chuàng)建CSS文件Contents目錄認(rèn)識CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5三、應(yīng)用CSS選擇器應(yīng)用元素選擇器應(yīng)用類選擇器應(yīng)用ID選擇器應(yīng)用后代選擇器應(yīng)用群組選擇器應(yīng)用通配符選擇器三、應(yīng)用CSS選擇器1應(yīng)用元素選擇器三、應(yīng)用CSS選擇器2應(yīng)用群組選擇器三、應(yīng)用CSS選擇器3應(yīng)用類選擇器三、應(yīng)用CSS選擇器4應(yīng)用ID選擇器三、應(yīng)用CSS選擇器5應(yīng)用后代選擇器三、應(yīng)用CSS選擇器6應(yīng)用通配符選擇器Contents目錄認(rèn)識CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5四、CSS繼承性、特殊性、層疊性和重要性繼承性層疊性重要性特殊性四、CSS繼承性、特殊性、層疊性和重要性1繼承性四、CSS繼承性、特殊性、層疊性和重要性2特殊性四、CSS繼承性、特殊性、層疊性和重要性3層疊性四、CSS繼承性、特殊性、層疊性和重要性4重要性Contents目錄認(rèn)識CSS樣式表1在Dreamweaver中創(chuàng)建CSS2應(yīng)用CSS選擇器3CSS繼承性、特殊性、層疊性和重要性4使用CSS格式化排版5五、使用CSS格式化排版文字排版CSS背景列表排版表格排版段落排版鏈接樣式五、使用CSS格式化排版1文字排版字

體屬

性值字體類型font-family宋體、微軟雅黑字號大小font-size像素，如12像素字體顏色color16進(jìn)制顏色表示法字體加粗font-weightbold字體傾斜font-styleitalic下劃線text-decorationunderline刪除線text-decorationline-through文字排版常用的CSS規(guī)則五、使用CSS格式化排版1文字排版五、使用CSS格式化排版2段落排版段落排版常用的CSS規(guī)則字

體屬

性值段落縮進(jìn)text-indent2em行間距l(xiāng)ine-height2em或像素值中文字間距或英文中字母與字母的間距l(xiāng)etter-spacing像素值英文單詞之間的間距word-spacing像素值對齊方式text-alignleft（左對齊）、right（右對齊）、centent（居中對齊）五、使用CSS格式化排版2段落排版五、使用CSS格式化排版3CSS背景CSS背景規(guī)則相關(guān)屬性列表屬

性描

述background簡寫屬性，作用是將背景屬性設(shè)置在一個聲明中background-color設(shè)置元素的背景顏色background-image把圖像設(shè)置為背景background-position設(shè)置背景圖像的起始位置background-repeat設(shè)置背景圖像是否及如何重復(fù)background-attachment背景圖像是否固定或者隨著頁面的其余部分滾動五、使用CSS格式化排版3CSS背景background-position屬性值列表單一關(guān)鍵字描

述center背景圖片設(shè)置在中間top背景圖片設(shè)置頂部bottom背景圖片設(shè)置到底部right背景圖片設(shè)置到右邊left背景圖片設(shè)置到左邊五、使用CSS格式化排版3CSS背景五、使用CSS格式化排版4列表排版列表排版屬性值列表屬性描述list-style簡寫屬性，用于把所有用于列表的屬性設(shè)置于一個聲明中l(wèi)ist-style-image將圖像設(shè)置為列表項標(biāo)志list-style-position設(shè)置列表中列表項標(biāo)志的位置list-style-type設(shè)置列表項標(biāo)志的類型五、使用CSS格式化排版4列表排版五、使用CSS格式化排版5表格排版五、使用CSS格式化排版6鏈接樣式鏈接的四種狀態(tài)鏈接狀態(tài)描述a:link普通的、未被訪問的鏈接a:visited用戶已訪問的鏈接a:hover鼠標(biāo)指針位于鏈接的上方a:active鏈接被點(diǎn)擊的時刻五、使用CSS格式化排版6鏈接樣式項目習(xí)題打開“素材文件\項目五\5-26.html”，利用本項目所學(xué)知識，對網(wǎng)頁進(jìn)行格式化排版，使其達(dá)到如左圖所示的網(wǎng)頁效果。操作提示：設(shè)置內(nèi)嵌式樣式表<style>，設(shè)置body屬性，設(shè)置背景顏色樣式，設(shè)置h標(biāo)題樣式，設(shè)置ul樣式，并設(shè)置超鏈接樣式，如右圖所示。使用DIV+CSS布局網(wǎng)頁CHAPTERSIX在網(wǎng)站頁面設(shè)計中，網(wǎng)頁的結(jié)構(gòu)布局非常重要。上一個項目我們學(xué)習(xí)了CSS格式化排版，本項目將學(xué)習(xí)如何通過HTML語言中的DIV標(biāo)簽，結(jié)合CSS樣式來進(jìn)行網(wǎng)頁布局。DIV布局是網(wǎng)頁設(shè)計中主流布局方式。學(xué)會使用DIV+CSS進(jìn)行不同結(jié)構(gòu)的網(wǎng)頁布局。能夠使用DIV+CSS布局網(wǎng)站首頁。學(xué)習(xí)目標(biāo)Contents目錄使用CSS盒子模型1標(biāo)準(zhǔn)流和div標(biāo)記2盒子的浮動和定位3使用CSS布局電子商務(wù)網(wǎng)站首頁4一、使用CSS盒子模型認(rèn)識CSS盒子模型CSS盒子模型的邊框、內(nèi)邊距和外邊距一、使用CSS盒子模型1認(rèn)識CSS盒子模型一、使用CSS盒子模型2CSS盒子模型的邊框、內(nèi)邊距和外邊距Contents目錄使用CSS盒子模型1標(biāo)準(zhǔn)流和div標(biāo)記2盒子的浮動和定位3使用CSS布局電子商務(wù)網(wǎng)站首頁4二、標(biāo)準(zhǔn)流和div標(biāo)記標(biāo)準(zhǔn)流div標(biāo)記盒子在標(biāo)準(zhǔn)流中的定位二、標(biāo)準(zhǔn)流和div標(biāo)記1標(biāo)準(zhǔn)流所謂標(biāo)準(zhǔn)流，是指在沒有任何外部干涉時，網(wǎng)頁中各個元素盒子的排列規(guī)則，也就是網(wǎng)頁默認(rèn)的、自然的排列布局方式。一個網(wǎng)頁中的元素可以分為兩類：塊級元素：大部分HTML標(biāo)記都屬于塊級元素，每個塊級元素都占據(jù)著一個矩形的區(qū)域，并且跟同級的兄弟塊依次垂直排列，左右撐滿。行內(nèi)元素：網(wǎng)頁中有一部分元素屬于行內(nèi)元素，基本都是用于文字修飾的標(biāo)記。二、標(biāo)準(zhǔn)流和div標(biāo)記1標(biāo)準(zhǔn)流二、標(biāo)準(zhǔn)流和div標(biāo)記2div標(biāo)記二、標(biāo)準(zhǔn)流和div標(biāo)記盒子在標(biāo)準(zhǔn)流中的定位方式：塊級元素之間的垂直定位margin屬性1嵌套盒子之間的margin屬性23盒子在標(biāo)準(zhǔn)流中的定位二、標(biāo)準(zhǔn)流和div標(biāo)記3盒子在標(biāo)準(zhǔn)流中的定位塊級元素之間的垂直定位margin屬性1二、標(biāo)準(zhǔn)流和div標(biāo)記3div標(biāo)記嵌套盒子之間的margin屬性2Contents目錄使用CSS盒子模型1標(biāo)準(zhǔn)流和div標(biāo)記2盒子的浮動和定位3使用CSS布局電子商務(wù)網(wǎng)站首頁4三、盒子的浮動和定位盒子浮動清除浮動影響和盒子定位三、盒子的浮動和定位1盒子浮動三、盒子的浮動和定位2清除浮動影響和盒子定位使用clear屬性清除浮動的影響01盒子的定位02靜態(tài)定位1相對定位2絕對定位3三、盒子的浮動和定位2清除浮動影響和盒子定位Contents目錄使用CSS盒子模型1標(biāo)準(zhǔn)流和div標(biāo)記2盒子的浮動和定位3使用CSS布局電子商務(wù)網(wǎng)站首頁4四、使用CSS布局電子商務(wù)網(wǎng)站首頁使用DIV布局頁面結(jié)構(gòu)對網(wǎng)頁主體布局對網(wǎng)頁底部布局組合首頁布局對網(wǎng)頁頭部布局四、使用CSS布局電子商務(wù)網(wǎng)站首頁1使用DIV布局頁面結(jié)構(gòu)四、使用CSS布局電子商務(wù)網(wǎng)站首頁2對網(wǎng)頁頭部布局四、使用CSS布局電子商務(wù)網(wǎng)站首頁3對網(wǎng)頁主體布局四、使用CSS布局電子商務(wù)網(wǎng)站首頁4對網(wǎng)頁底部布局四、使用CSS布局電子商務(wù)網(wǎng)站首頁5組合首頁布局項目習(xí)題打開“素材文件\項目六\習(xí)題效果.html”，按照此網(wǎng)頁效果設(shè)計一個“商品描述”網(wǎng)頁，如圖所示。操作提示：（1）用div標(biāo)記布局出一行兩列，注意要清除浮動影響。（2）打開“素材文件\項目六\習(xí)題效果.html”，根據(jù)布局圖完成網(wǎng)頁效果。（3）使用圖片和文本的布局以及CSS樣式設(shè)置左側(cè)的“店鋪熱銷”欄目。使用行為和表單CHAPTERSEVEN行為是Dreamweaver中設(shè)計網(wǎng)頁動作的交互面板，是預(yù)先設(shè)計好的JavaScript代碼；表單是用戶和服務(wù)器之間的橋梁，專門用于接收訪問者填寫的信息，使網(wǎng)頁具有交互功能。本項目將學(xué)習(xí)如何在網(wǎng)頁中創(chuàng)建行為和表單。能夠創(chuàng)建所需類型的表單。可以修改表單對象的屬性。靈活掌握不同行為特效的屬性。學(xué)習(xí)目標(biāo)Contents目錄使用行為1使用表單2“新用戶注冊”表單設(shè)計3使用行為驗證用戶注冊4一、使用行為認(rèn)識行為和事件“行為”面板一、使用行為1認(rèn)識行為和事件事件動作行為是某個事件和由該事件觸發(fā)的動作組合，事件用于指明執(zhí)行某個動作的條件。例如，將鼠標(biāo)指針移到對象上方、離開對象、單擊對象、雙擊對象等都是事件。動作是行為的另一個組成部分，它由預(yù)先編寫的JavaScript代碼組成，利用這些代碼可以執(zhí)行特定的任務(wù)，如打開瀏覽器窗口、彈出信息等。當(dāng)發(fā)生某個事件時執(zhí)行某個動作的過程稱為行為，行為是事件和動作的組合。行為1一、使用行為1認(rèn)識行為和事件鼠標(biāo)事件鍵盤事件事件2頁面事件表單事件一、使用行為2“行為”面板一、使用行為2“行為”面板“顯示設(shè)置事件”按鈕1“顯示所有事件”按鈕2“添加行為”按鈕3“刪除事件”按鈕4“上拉”和“下拉”按鈕5一、使用行為2“行為”面板Contents目錄使用行為1使用表單2“新用戶注冊”表單設(shè)計3使用行為驗證用戶注冊4二、使用表單了解表單創(chuàng)建表單設(shè)置表單屬性二、使用表單1了解表單二、使用表單2創(chuàng)建表單二、使用表單3設(shè)置表單屬性表單ID：用于輸入表單名稱，以便在腳本語言中調(diào)用并控制該表單。方法：用于選擇表單數(shù)據(jù)傳輸?shù)椒?wù)器的方法。動作：用于輸入處理該表單的動態(tài)頁或腳本的路徑，可以是URL地址、HTTP地址，也可以是Mailto地址。目標(biāo)：用于選擇服務(wù)器返回反饋數(shù)據(jù)的顯示方式。編碼類型：用于指定提交服務(wù)器處理數(shù)據(jù)所使用MIME編碼類型。Contents目錄使用行為1使用表單2“新用戶注冊”表單設(shè)計3使用行為驗證用戶注冊4三、“新用戶注冊”表單設(shè)計插入按鈕插入文本字段插入單選按鈕插入文件域插入列表和菜單插入復(fù)選框三、“新用戶注冊”表單設(shè)計1插入文本字段三、“新用戶注冊”表單設(shè)計2插入復(fù)選框三、“新用戶注冊”表單設(shè)計3插入單選按鈕三、“新用戶注冊”表單設(shè)計4插入文件域三、“新用戶注冊”表單設(shè)計5插入列表和菜單三、“新用戶注冊”表單設(shè)計6插入按鈕Contents目錄使用行為1使用表單2“新用戶注冊”表單設(shè)計3使用行為驗證用戶注冊4四、使用行為驗證用戶注冊檢查表單設(shè)置密碼僅為數(shù)字檢查郵箱格式四、使用行為驗證用戶注冊1檢查表單四、使用行為驗證用戶注冊2設(shè)置密碼僅為數(shù)字四、使用行為驗證用戶注冊3檢查郵箱格式項目習(xí)題打開“素材文件\項目二\7-3.html”，利用表單創(chuàng)建一個會員登錄界面，并設(shè)置檢查表單，效果如圖所示。項目習(xí)題操作提示：（1）在<divclass="main">中插入一個表單，在<label>選項后插入文本字段，如圖所示。項目習(xí)題操作提示：（2）為兩個文本字段添加id屬性，然后添加“登錄”按鈕。（3）為用戶名和密碼兩個文本框添加“檢查表單”行為，如圖所示。制作網(wǎng)頁特效CHAPTEREIGHT通過DIV+CSS布局完成網(wǎng)頁設(shè)計后，還需要對網(wǎng)頁添加交互式特性，例如，使用“圖像交換”特效可以進(jìn)行網(wǎng)站廣告圖片的輪換；對表單進(jìn)行驗證，可以使用交互方式來設(shè)計，還有很多瀏覽器特性，這些都是通過JavaScript腳本來實(shí)現(xiàn)的。本項目主要學(xué)習(xí)如何使用JavaScript制作網(wǎng)頁特效和驗證表單等。學(xué)會JavaScript腳本的基礎(chǔ)知識。運(yùn)用JavaScript腳本實(shí)現(xiàn)常見網(wǎng)頁特效和表單驗證。學(xué)習(xí)目標(biāo)Contents目錄認(rèn)識JavaScript腳本語言1使用JavaScript制作網(wǎng)頁特效2使用JavaScript驗證表單3JavaScript網(wǎng)頁特效實(shí)例4一、認(rèn)識JavaScript腳本語言JavaScript簡介JavaScript的基本結(jié)構(gòu)使用JavaScript向頁面輸出信息一、認(rèn)識JavaScript腳本語言1JavaScript簡介可以實(shí)現(xiàn)網(wǎng)頁異步更新，不重新加載整個網(wǎng)頁便可對網(wǎng)頁部分更新。1特點(diǎn)基于客戶端運(yùn)行，JavaScript代碼傳到瀏覽器進(jìn)行處理。2特點(diǎn)幾乎所有瀏覽器都支持JavaScript。3特點(diǎn)JavaScript的特點(diǎn)一、認(rèn)識JavaScript腳本語言2JavaScript的基本結(jié)構(gòu)JavaScript腳本需要放在<script></script>標(biāo)簽內(nèi)，然后嵌入到HTML代碼中，這樣才能被瀏覽器讀取并執(zhí)行。一、認(rèn)識JavaScript腳本語言3使用JavaScript向頁面輸出信息使用JavaScript可以動態(tài)地向網(wǎng)頁輸出信息，主要有以下兩種方法。使用alert語句1使用document.write()語句2一、認(rèn)識JavaScript腳本語言3使用JavaScript向頁面輸出信息一、認(rèn)識JavaScript腳本語言3使用JavaScript向頁面輸出信息輸出類型代碼實(shí)例輸出結(jié)果輸出值document.write("hello,world!");Hello,world!輸出變量varstr="我愛學(xué)習(xí)HTML網(wǎng)頁!";document.write(str);我愛學(xué)習(xí)HTML網(wǎng)頁!輸出HTML標(biāo)記document.write("<h1>本地生活論壇

</h1>");以標(biāo)題1顯示“本地生活論壇”document.write()語句可以向頁面輸出3種類型的信息。Contents目錄認(rèn)識JavaScript腳本語言1使用JavaScript制作網(wǎng)頁特效2使用JavaScript驗證表單3JavaScript網(wǎng)頁特效實(shí)例4二、使用JavaScript制作網(wǎng)頁特效文字滾動特效日期特效廣告特效下拉菜單特效二、使用JavaScript制作網(wǎng)頁特效1文字滾動特效定義：文字滾動特效就是在較小的頁面版塊中進(jìn)行滾動，以顯示較多的文字內(nèi)容。特點(diǎn)：不但可以節(jié)約有限的網(wǎng)頁版面，還能使文字具有動態(tài)的效果，以達(dá)到吸引瀏覽者的目的。方法：只需在要滾動的文字兩端添加<marquee>腳本代碼即可。二、使用JavaScript制作網(wǎng)頁特效1文字滾動特效二、使用JavaScript制作網(wǎng)頁特效2日期特效二、使用JavaScript制作網(wǎng)頁特效3廣告特效1層廣告2彈出廣告3漂浮廣告廣告分類二、使用JavaScript制作網(wǎng)頁特效3廣告特效二、使用JavaScript制作網(wǎng)頁特效4下拉菜單特效Contents目錄認(rèn)識JavaScript腳本語言1使用JavaScript制作網(wǎng)頁特效2使用JavaScript驗證表單3JavaScript網(wǎng)頁特效實(shí)例4三、使用JavaScript驗證表單非空驗證郵箱地址驗證驗證密碼長度和一致性三、使用JavaScript驗證表單1非空驗證三、使用JavaScript驗證表單2驗證密碼長度和一致性三、使用JavaScript驗證表單3郵箱地址驗證Contents目錄認(rèn)識JavaScript腳本語言1使用JavaScript制作網(wǎng)頁特效2使用JavaScript驗證表單3JavaScript網(wǎng)頁特效實(shí)例4四、JavaScript網(wǎng)頁特效實(shí)例下載焦點(diǎn)圖代碼添加焦點(diǎn)圖代碼四、JavaScript網(wǎng)頁特效實(shí)例1下載焦點(diǎn)圖代碼四、JavaScript網(wǎng)頁特效實(shí)例2添加焦點(diǎn)圖代碼項目習(xí)題打開“素材文件/項目八/login.html”，根據(jù)需要設(shè)置表單非空驗證和密碼長度驗證。設(shè)置完成后預(yù)覽網(wǎng)頁，進(jìn)行表單驗證測試，如圖所示。0102打開“素材文件/項目八/習(xí)題二/8-8.html”，在網(wǎng)頁中間文本提示處添加“圖像”特效，如做圖所示。項目習(xí)題02打開“素材文件/項目八/習(xí)題二/tp.html”，仿照此文件將div代碼、CSS文件和JS文件添加到“8-8.html”網(wǎng)頁文件中，并修改CSS文件，效果如圖所示。項目習(xí)題動態(tài)網(wǎng)站與CMS系統(tǒng)應(yīng)用CHAPTERNINE動態(tài)網(wǎng)站是網(wǎng)站的終極形態(tài)，通過前端網(wǎng)頁展示網(wǎng)頁界面，后臺程序和數(shù)據(jù)庫用于收集與查詢信息，這樣就能實(shí)現(xiàn)一個具有一定功能的網(wǎng)站。例如，“美團(tuán)外賣”網(wǎng)站就是一個專門做外賣的網(wǎng)站，“去哪網(wǎng)”是專門訂旅行機(jī)票、酒店、旅行社等的網(wǎng)站，這些網(wǎng)站都屬于動態(tài)網(wǎng)站。本項目將學(xué)習(xí)動態(tài)網(wǎng)站與CMS系統(tǒng)應(yīng)用。利用CMS系統(tǒng)搭建網(wǎng)站功能。利用模板設(shè)置CMS系統(tǒng)的網(wǎng)頁效果。學(xué)習(xí)目標(biāo)Contents目錄認(rèn)識動態(tài)網(wǎng)站1認(rèn)識CMS系統(tǒng)2搭建CMS系統(tǒng)環(huán)境3WSTMart系統(tǒng)管理4WSTMart系統(tǒng)基礎(chǔ)設(shè)置5一、認(rèn)識動態(tài)網(wǎng)站動態(tài)網(wǎng)頁動態(tài)網(wǎng)站技術(shù)一、認(rèn)識動態(tài)網(wǎng)站1動態(tài)網(wǎng)頁定義：動態(tài)網(wǎng)頁其實(shí)就是建立在B/S架構(gòu)上的服務(wù)器端腳本程序。在瀏覽器端顯示的網(wǎng)頁是服務(wù)器端程序運(yùn)行的結(jié)果，而動態(tài)網(wǎng)頁正是動態(tài)網(wǎng)站制作的基礎(chǔ)。靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁的區(qū)別：Web服務(wù)器對它們的處理方式不同。靜態(tài)網(wǎng)頁動態(tài)網(wǎng)頁當(dāng)Web服務(wù)器接收到對靜態(tài)網(wǎng)頁的請求時，服務(wù)器會直接將該網(wǎng)頁發(fā)送給客戶瀏覽器，不做任何處理。接收到對動態(tài)網(wǎng)頁的請求，則從Web服務(wù)器中找到該文件，并將其傳遞給一個稱為應(yīng)用程序服務(wù)器的特殊軟件擴(kuò)展，由它負(fù)責(zé)解釋和執(zhí)行網(wǎng)頁，并將執(zhí)行后的結(jié)果傳遞給客戶瀏覽器。一、認(rèn)識動態(tài)網(wǎng)站1動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁的特點(diǎn)：動態(tài)網(wǎng)頁以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，可以大大降低網(wǎng)站維護(hù)的工作量。1采用動態(tài)網(wǎng)頁技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能。2動態(tài)網(wǎng)頁并不是獨(dú)立存在于服務(wù)器上的網(wǎng)頁文件，只有當(dāng)用戶請求時服務(wù)器才返回一個完整的網(wǎng)頁。3搜索引擎一般不可能從一個網(wǎng)站的數(shù)據(jù)庫中訪問全部網(wǎng)頁，因此采用動態(tài)網(wǎng)站制作在進(jìn)行搜索引擎推廣時，需要做一定的技術(shù)處理才能適應(yīng)搜索引擎的要求。4一、認(rèn)識動態(tài)網(wǎng)站2動態(tài)網(wǎng)站技術(shù)01搭建動態(tài)網(wǎng)站平臺比較流行的互動式網(wǎng)頁編程語言包括：ASP、PHP、JSP、CGI、ASP.NET，其中HTML網(wǎng)頁適用于所有環(huán)境，它本身也非常簡單。一、認(rèn)識動態(tài)網(wǎng)站2動態(tài)網(wǎng)站技術(shù)02動態(tài)網(wǎng)頁編程語言ASP一、認(rèn)識動態(tài)網(wǎng)站2動態(tài)網(wǎng)站技術(shù)03動態(tài)網(wǎng)頁編程語言PHP一、認(rèn)識動態(tài)網(wǎng)站2動態(tài)網(wǎng)站技術(shù)04網(wǎng)站數(shù)據(jù)庫一、認(rèn)識動態(tài)網(wǎng)站2動態(tài)網(wǎng)站技術(shù)04網(wǎng)站數(shù)據(jù)庫關(guān)系數(shù)據(jù)庫管理系統(tǒng)的特點(diǎn):數(shù)據(jù)以表格的形式出現(xiàn)。1每行是各種記錄名稱。2每列是記錄名稱所對應(yīng)的數(shù)據(jù)域。3許多的行和列組成一張表單。4若干的表單組成數(shù)據(jù)庫。5一、認(rèn)識動態(tài)網(wǎng)站2動態(tài)網(wǎng)站技術(shù)05MySQL數(shù)據(jù)庫Contents目錄認(rèn)識動態(tài)網(wǎng)站1認(rèn)識CMS系統(tǒng)2搭建CMS系統(tǒng)環(huán)境3WSTMart系統(tǒng)管理4WSTMart系統(tǒng)基礎(chǔ)設(shè)置5二、認(rèn)識CMS系統(tǒng)什么是CMS系統(tǒng)選擇CMS系統(tǒng)國內(nèi)優(yōu)秀的電子商務(wù)類CMS系統(tǒng)二、認(rèn)識CMS系統(tǒng)1什么是CMS系統(tǒng)定義：CMS系統(tǒng)是網(wǎng)站內(nèi)容管理系統(tǒng)的簡稱，能夠快速完成網(wǎng)站功能建設(shè)，它是集前臺設(shè)計、后臺程序、網(wǎng)站數(shù)據(jù)庫于一體的集成化系統(tǒng)。特點(diǎn)：大大縮短了網(wǎng)站的開發(fā)流程和成本。1不需要懂太多的網(wǎng)站后臺開發(fā)語言就可以完成。2很多CMS系統(tǒng)都是開源、免費(fèi)的。3二、認(rèn)識CMS系統(tǒng)2選擇CMS系統(tǒng)在選擇CMS系統(tǒng)時，要注意以下幾個方面：CMS系統(tǒng)編碼類型1明確建站需求2程序和模板分離3支持SEO優(yōu)化4二、認(rèn)識CMS系統(tǒng)3國內(nèi)優(yōu)秀的電子商務(wù)類CMS系統(tǒng)PHPSHE網(wǎng)上商城系統(tǒng)1WSTMart電子商務(wù)系統(tǒng)2ECSHOP商城系統(tǒng)3Contents目錄認(rèn)識動態(tài)網(wǎng)站1認(rèn)識CMS系統(tǒng)2搭建CMS系統(tǒng)環(huán)境3WSTMart系統(tǒng)管理4WSTMart系統(tǒng)基礎(chǔ)設(shè)置5三、搭建CMS系統(tǒng)環(huán)境安裝phpStudy服務(wù)器環(huán)境安裝WSTMart系統(tǒng)Contents目錄認(rèn)識動態(tài)網(wǎng)站1認(rèn)識CMS系統(tǒng)2搭建CMS系統(tǒng)環(huán)境3WSTMart系統(tǒng)管理4WSTMart系統(tǒng)基礎(chǔ)設(shè)置5四、WSTMart系統(tǒng)管理菜單權(quán)限前臺菜單角色管理登錄日志圖片空間四、WSTMart系統(tǒng)管理1菜單權(quán)限四、WSTMart系統(tǒng)管理2前臺菜單四、WSTMart系統(tǒng)管理3角色管理1.單擊“新增”按鈕四、WSTMart系統(tǒng)管理3角色管理2.新增角色四、WSTMart系統(tǒng)管理4登錄日志四、WSTMart系統(tǒng)管理5圖片空間Contents目錄認(rèn)識動態(tài)網(wǎng)站1認(rèn)識CMS系統(tǒng)2搭建CMS系統(tǒng)環(huán)境3WSTMart系統(tǒng)管理4WSTMart系統(tǒng)基礎(chǔ)設(shè)置5五、WSTMart系統(tǒng)基礎(chǔ)設(shè)置商城配置導(dǎo)航管理項目習(xí)題在WSTMart網(wǎng)上商城系統(tǒng)中修改網(wǎng)站Logo圖片，如圖所示。0102設(shè)置WSTMart網(wǎng)上商城系統(tǒng)的熱搜關(guān)鍵詞，如“特色小商品，錦江之城，堅果”，如圖所示。項目習(xí)題網(wǎng)站的發(fā)布測試與優(yōu)化CHAPTERTEN網(wǎng)站發(fā)布的一般步驟包括域名注冊，空間選擇，網(wǎng)站上傳，以及網(wǎng)站測試和發(fā)布。網(wǎng)絡(luò)的最大優(yōu)勢是信息的實(shí)時性，對于已發(fā)布的網(wǎng)站，優(yōu)化和推廣才是最重要的。本項目首先學(xué)習(xí)域名及空間的基本知識，注冊域名和申請空間的方法，然后學(xué)習(xí)如何對網(wǎng)站進(jìn)行測試與發(fā)布。此外，網(wǎng)站的優(yōu)化與推廣也是網(wǎng)站建設(shè)過程中的關(guān)鍵環(huán)節(jié)。熟悉在網(wǎng)絡(luò)中進(jìn)行域名注冊與空間申請的步驟。能夠?qū)ψ缘木W(wǎng)站進(jìn)行測試，并利用網(wǎng)站發(fā)布工具進(jìn)行發(fā)布。能夠?qū)W(wǎng)站進(jìn)行優(yōu)化，并制定網(wǎng)站的推廣方案。學(xué)習(xí)目標(biāo)Contents目錄域名和空間的選擇1測試與發(fā)布網(wǎng)站2電子商務(wù)網(wǎng)站的優(yōu)化與推廣3一、域名和空間的選擇域名域名的注冊空間的選擇申請空間一、域名和空間的選擇1域名01域名的定義域名（DomainName）是由一串用點(diǎn)分隔的名字組成的Internet上某一臺計算機(jī)或計算機(jī)組的名稱，用于在數(shù)據(jù)傳輸時標(biāo)識計算機(jī)的電子方位（有時也指地理位置）。網(wǎng)域名稱系統(tǒng)（DNS，DomainNameS