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

體屬

性值字體類型font-family宋體、微軟雅黑字號(hào)大小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像素值對(duì)齊方式text-alignleft（左對(duì)齊）、right（右對(duì)齊）、centent（居中對(duì)齊）五、使用CSS格式化排版2段落排版五、使用CSS格式化排版3CSS背景CSS背景規(guī)則相關(guān)屬性列表屬

性描

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

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

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