電子商務(wù)網(wǎng)站建設(shè)與實(shí)踐(第5版)-課件 項(xiàng)目3、4 電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)、數(shù)據(jù)庫的管理與使用_第1頁
電子商務(wù)網(wǎng)站建設(shè)與實(shí)踐(第5版)-課件 項(xiàng)目3、4 電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)、數(shù)據(jù)庫的管理與使用_第2頁
電子商務(wù)網(wǎng)站建設(shè)與實(shí)踐(第5版)-課件 項(xiàng)目3、4 電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)、數(shù)據(jù)庫的管理與使用_第3頁
電子商務(wù)網(wǎng)站建設(shè)與實(shí)踐(第5版)-課件 項(xiàng)目3、4 電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)、數(shù)據(jù)庫的管理與使用_第4頁
電子商務(wù)網(wǎng)站建設(shè)與實(shí)踐(第5版)-課件 項(xiàng)目3、4 電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)、數(shù)據(jù)庫的管理與使用_第5頁
已閱讀5頁,還剩195頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

電子商務(wù)網(wǎng)站建設(shè)與實(shí)踐(第5版)本項(xiàng)目主要介紹常用的網(wǎng)站開發(fā)工具和技術(shù)、電子商務(wù)網(wǎng)站設(shè)計(jì)與制作、網(wǎng)頁發(fā)布等方面的知識。考慮到移動(dòng)應(yīng)用在電子商務(wù)領(lǐng)域日益重要,本項(xiàng)目還將講解移動(dòng)設(shè)備網(wǎng)頁的制作。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)【知識目標(biāo)】1.了解常用的網(wǎng)站開發(fā)工具;2.了解PHP語言的功能、特點(diǎn)和基本語法;3.了解電子商務(wù)網(wǎng)站內(nèi)容的設(shè)計(jì)流程;4.了解網(wǎng)頁色彩搭配技巧;5.了解本地站點(diǎn)、測試站點(diǎn)和遠(yuǎn)程站點(diǎn)的作用;6.了解PhPStudy搭建網(wǎng)站調(diào)試環(huán)境的有關(guān)知識。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)【技能目標(biāo)】1.掌握PHP語言的基本語法;2.掌握PHP網(wǎng)頁與MySQL數(shù)據(jù)庫的連接方法;3.掌握本地站點(diǎn)、測試站點(diǎn)和遠(yuǎn)程站點(diǎn)的設(shè)置方法;4.掌握靜態(tài)網(wǎng)頁的可視化設(shè)計(jì)和制作;5.掌握PHP動(dòng)態(tài)網(wǎng)頁的制作和調(diào)試;6.掌握網(wǎng)頁的發(fā)布與遠(yuǎn)程更新方法。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)【預(yù)備知識】1.熟悉HTML主要標(biāo)簽的功能和用法;2.熟悉CSS的功能和使用方法;3.熟悉Dreamweaver軟件的功能和網(wǎng)頁制作方法;4.具備一定的數(shù)據(jù)庫知識;5.學(xué)過一門編程語言。項(xiàng)目一電子商務(wù)網(wǎng)站建設(shè)規(guī)劃3.1網(wǎng)站開發(fā)工具與技術(shù)3.1.1HTML5和DreamweaverCC20181.HTML和HTML5簡介HTML是超文本標(biāo)記語言(HypertextMarkupLanguage,HTML)的縮寫,它是一種廣泛應(yīng)用于Internet靜態(tài)網(wǎng)頁制作的標(biāo)記語言,現(xiàn)已大規(guī)模地應(yīng)用在靜態(tài)網(wǎng)頁的制作中。作為一種標(biāo)記語言,HTML不需要編譯,直接由瀏覽器執(zhí)行。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.1網(wǎng)站開發(fā)工具與技術(shù)3.1.1HTML5和DreamweaverCC20181.HTML和HTML5簡介HTML5是新一代HTML標(biāo)準(zhǔn),HTML5解決了HTML4等以前版本的很多問題,增加了許多新特性,如嵌入音頻、視頻和圖片的函數(shù),客戶端存儲(chǔ)數(shù)據(jù),交互式文檔等,進(jìn)一步增強(qiáng)了互動(dòng)性,并有效減少了開發(fā)成本。HTML5最主要的優(yōu)勢之一還是跨平臺(tái),利用HTML5編寫的應(yīng)用在瀏覽器平臺(tái)上都可以運(yùn)行并使用,且開發(fā)速度快。HTML5的發(fā)展非常迅速,并在移動(dòng)互聯(lián)網(wǎng)領(lǐng)域得到了廣泛應(yīng)用,目前是前端開發(fā)的重要標(biāo)準(zhǔn)。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.1網(wǎng)站開發(fā)工具與技術(shù)3.1.1HTML5和DreamweaverCC20181.HTML和HTML5簡介一個(gè)網(wǎng)頁通常包括以下3種技術(shù):●HTML:描述網(wǎng)頁的具體內(nèi)容和結(jié)構(gòu)?!馛SS:定義網(wǎng)頁的樣式(網(wǎng)頁美化的主要模塊)?!馢avaScript:實(shí)現(xiàn)網(wǎng)頁的交互效果,如對用戶單擊鼠標(biāo)事件做出響應(yīng)。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.1網(wǎng)站開發(fā)工具與技術(shù)3.1.1HTML5和DreamweaverCC20182.DreamweaverCC2018Dreamweaver是集網(wǎng)頁制作和管理網(wǎng)站于一體的“所見即所得”網(wǎng)頁編輯器。DreamweaverCC2018是由Adobe公司開發(fā)的一款實(shí)用性很高的網(wǎng)頁編輯設(shè)計(jì)工具,簡稱DWCC2018。DWCC2018能夠管理所有源代碼并提供對CSS預(yù)處理器等新工作流程的支持,可以提供完整的代碼著色、代碼提示和編譯功能。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.1網(wǎng)站開發(fā)工具與技術(shù)3.1.2網(wǎng)站編程語言PHP簡介1.腳本語言隨著Web技術(shù)的不斷發(fā)展,Web頁面上開始加入動(dòng)態(tài)和交互式的內(nèi)容,并取得了成功。Web動(dòng)態(tài)技術(shù)發(fā)展快、種類多,這里主要對腳本語言和PHP語言進(jìn)行簡要介紹。1.腳本語言腳本語言(ScriptLanguage)是一種簡單的描述型語言,它的語法結(jié)構(gòu)與計(jì)算機(jī)上的高級語言頗為相似,所以相對于其他的Web技術(shù)來說是簡單易用的。腳本語言的出現(xiàn)較好地解決了Web頁面的動(dòng)態(tài)交互問題。它通過<?php?>標(biāo)記嵌入HTML頁面中,通過編程對Web頁面元素進(jìn)行控制,從而實(shí)現(xiàn)Web頁面的動(dòng)態(tài)化和交互性。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.1網(wǎng)站開發(fā)工具與技術(shù)3.1.2網(wǎng)站編程語言PHP簡介2.PHP語言PHP(PHPHypertextPreprocessor)是一種跨平臺(tái)的服務(wù)器端嵌入式腳本語言。PHP程序執(zhí)行效率非常高,具有跨平臺(tái)特性,幾乎支持所有的操作系統(tǒng),支持大多數(shù)數(shù)據(jù)庫。PHP語言是最受歡迎的Web開發(fā)語言之一。它以學(xué)習(xí)簡單、開發(fā)快速、性能穩(wěn)定而備受Web開發(fā)人員的青睞。(1)PHP的應(yīng)用領(lǐng)域(2)PHP語言的優(yōu)勢(3)PHP基本語法項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.1網(wǎng)站開發(fā)工具與技術(shù)3.1.3PHP應(yīng)用程序?qū)嵗?.PHP語言以網(wǎng)站前臺(tái)會(huì)員登錄程序login.php為例項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.1網(wǎng)站開發(fā)工具與技術(shù)3.1.3PHP應(yīng)用程序?qū)嵗?.PHP語言運(yùn)行效果如下圖項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.1電子商務(wù)網(wǎng)站內(nèi)容設(shè)計(jì)的流程1.網(wǎng)站內(nèi)容設(shè)計(jì)的原則要將電子商務(wù)網(wǎng)站作為在Internet上展示企業(yè)形象與企業(yè)文化、進(jìn)行電子商務(wù)活動(dòng)的信息空間,除了要進(jìn)行網(wǎng)站的總體策劃、確定網(wǎng)站的目標(biāo)和定位等外,還要進(jìn)行電子商務(wù)網(wǎng)站的內(nèi)容設(shè)計(jì)與制作。(1)新、精、專的信息內(nèi)容(2)安全、快速的訪問(3)美感十足、方便用戶訪問的頁面項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.1電子商務(wù)網(wǎng)站內(nèi)容設(shè)計(jì)的流程2.網(wǎng)站內(nèi)容設(shè)計(jì)流程①收集與網(wǎng)站內(nèi)容主題相關(guān)的關(guān)鍵信息。②網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)。③網(wǎng)站運(yùn)行環(huán)境的選擇。④進(jìn)行網(wǎng)頁可視化設(shè)計(jì)。⑤網(wǎng)頁制作。⑥網(wǎng)站測試。⑦網(wǎng)站發(fā)布。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.2網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)1.網(wǎng)站信息內(nèi)容及其功能模塊的設(shè)計(jì)

電子商務(wù)網(wǎng)站應(yīng)該包括的信息內(nèi)容和功能模塊、具備的鏈接結(jié)構(gòu),以及采取的整體風(fēng)格,并沒有統(tǒng)一的模式。1.網(wǎng)站信息內(nèi)容及其功能模塊的設(shè)計(jì)(1)公司概況。(2)員工信息。

(3)產(chǎn)品目錄。

(4)產(chǎn)品價(jià)格表。(5)產(chǎn)品搜索。(6)公司動(dòng)態(tài)。(7)網(wǎng)上訂購。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.2網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)1.網(wǎng)站信息內(nèi)容及其功能模塊的設(shè)計(jì)

(8)銷售網(wǎng)絡(luò)。

(9)售后服務(wù)。(10)技術(shù)支持信息。(11)聯(lián)系信息。(12)財(cái)務(wù)報(bào)告。(13)輔助信息。(14)其他信息內(nèi)容。(15)增值服務(wù)。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.2網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)2.網(wǎng)站鏈接結(jié)構(gòu)的設(shè)計(jì)

一般來說,網(wǎng)站的鏈接結(jié)構(gòu)有以下兩種:(1)樹狀鏈接結(jié)構(gòu)(一對一)樹狀鏈接結(jié)構(gòu)是首頁鏈接指向一級頁面,一級頁面鏈接指向二級頁面。立體結(jié)構(gòu)像一棵二叉樹。(2)網(wǎng)狀鏈接結(jié)構(gòu)(一對多)網(wǎng)狀鏈接結(jié)構(gòu)的每個(gè)頁面之間都有鏈接,可進(jìn)行跳轉(zhuǎn),立體結(jié)構(gòu)像一張網(wǎng)。鏈接結(jié)構(gòu)的設(shè)計(jì),在實(shí)際的網(wǎng)頁設(shè)計(jì)與制作中是非常重要的。采用的鏈接結(jié)構(gòu)將直接影響到版面的布局,如導(dǎo)航欄放在什么位置、是否每頁都需要放置導(dǎo)航欄、是否需要用分幀框架、是否需要加入返回首頁的鏈接。在鏈接結(jié)構(gòu)確定后,再開始考慮鏈接的效果和形式。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.2網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)3.網(wǎng)站整體風(fēng)格的設(shè)計(jì)網(wǎng)站整體風(fēng)格的設(shè)計(jì)在網(wǎng)站的內(nèi)容設(shè)計(jì)中,既是重點(diǎn)又是難點(diǎn)。網(wǎng)站整體風(fēng)格是抽象的,是指網(wǎng)站的整體形象給瀏覽者的綜合感受?!罢w形象”包括網(wǎng)站的CI(標(biāo)志、色彩、字體、標(biāo)語)、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價(jià)值及網(wǎng)站榮譽(yù)等諸多因素。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.2網(wǎng)站信息結(jié)構(gòu)的設(shè)計(jì)3.網(wǎng)站整體風(fēng)格的設(shè)計(jì)體現(xiàn)網(wǎng)站風(fēng)格的具體做法可以從一下幾個(gè)方面入手:

①使企業(yè)的標(biāo)志盡可能出現(xiàn)在每個(gè)頁面上。②突出網(wǎng)站的標(biāo)準(zhǔn)色彩。③突出網(wǎng)站的標(biāo)準(zhǔn)字體。④設(shè)計(jì)一條朗朗上口的宣傳標(biāo)語。⑤使用統(tǒng)一的圖片處理效果。⑥創(chuàng)造一個(gè)企業(yè)網(wǎng)站特有的標(biāo)志。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.3網(wǎng)頁的可視化設(shè)計(jì)1.網(wǎng)頁設(shè)計(jì)應(yīng)遵循的原則①網(wǎng)頁命名要簡潔。②確保頁面的導(dǎo)航性好。③網(wǎng)頁要易讀。④合理設(shè)計(jì)視覺效果。⑤為圖像添加文字說明。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.3網(wǎng)頁的可視化設(shè)計(jì)1.網(wǎng)頁設(shè)計(jì)應(yīng)遵循的原則⑥不宜使用太多的動(dòng)畫和靜態(tài)圖像。⑦頁面長度要適中。⑧整個(gè)頁面風(fēng)格要一致。⑨盡量使用相對超鏈接。⑩不要濫用尖端技術(shù)。項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.3網(wǎng)頁的可視化設(shè)計(jì)2.網(wǎng)頁版面布局設(shè)計(jì)版面指的是用戶在瀏覽器中看到的一個(gè)完整頁面。(1)網(wǎng)頁版面布局步驟項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)創(chuàng)建初始方案。初步設(shè)計(jì)網(wǎng)頁的布局。確定布局方案。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.3網(wǎng)頁的可視化設(shè)計(jì)2.網(wǎng)頁版面布局設(shè)計(jì)(2)常見的版面布局形式項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)“T”結(jié)構(gòu)布局。“口”型布局?!叭毙筒季?。對稱對比布局。POP布局。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.3網(wǎng)頁的可視化設(shè)計(jì)2.網(wǎng)頁版面布局設(shè)計(jì)(3)頁面版式設(shè)計(jì)原則與技巧項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)正常平衡。異常平衡。對比。凝視??瞻住1M量用圖片解說。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.3網(wǎng)頁的可視化設(shè)計(jì)3.網(wǎng)頁中圖片和文字的設(shè)計(jì)(1)善用圖片

圖像可以彌補(bǔ)文字的不足,但并不能夠完全取代文字。(2)網(wǎng)站字體設(shè)計(jì)技巧

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)不要使用超過3種以上的字體。不要用太大或太小的文字。避免過多地使用不停閃爍的文字。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)在網(wǎng)頁設(shè)計(jì)中,色彩給人的直觀感受,是遠(yuǎn)遠(yuǎn)大于面積、形狀、文字等因素的。所以好的網(wǎng)頁設(shè)計(jì),首先在色彩的應(yīng)用方面,就應(yīng)該是直觀、明確、目的清晰的,力求色彩與網(wǎng)站內(nèi)容完美結(jié)合,統(tǒng)一而且美觀大方。因此,網(wǎng)站開發(fā)者學(xué)習(xí)必要的網(wǎng)頁配色知識、掌握基本的配色原理和技巧是非常必要的。本小節(jié)主要介紹:色彩的基礎(chǔ)知識、網(wǎng)頁配色方案和色彩在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(1)色彩的產(chǎn)生——光與色人產(chǎn)生視覺的首要條件是光,有光才有顏色,色彩是光刺激眼睛的結(jié)果,而在夜晚沒有光的條件下,眼前一片黑暗,色彩也就消失了。所以,色彩就是:不同波長的光刺激眼睛的視覺反映,是可見光在不同物體上的反映。(2)色彩的分類——彩色與無彩色①彩色是指紅、橙、黃、綠、青、藍(lán)、紫等各種顏色,彩色有3種特性:色相、明度和純度。②無彩色是指白色、黑色以及由白色和黑色調(diào)和而成的各種深淺不同的灰色。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(3)色彩的3個(gè)特性——色相、明度和純度①色相。色相是指色彩的相貌特征,根據(jù)每種顏色在光譜中波長的不同,我們?yōu)樗鼈兌x了不同的名字,如紅、橙、黃、綠、青、藍(lán)、紫等,它們都具有獨(dú)立的色相。②明度。明度是指色彩的明亮程度,也稱色彩的亮度、深淺度。③純度。純度是指色彩的純凈程度、鮮艷程度,也叫飽和度。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(4)色相環(huán)色彩學(xué)家為了便于研究,把紅、橙、黃、綠、藍(lán)、紫等6種顏色以封閉環(huán)狀排列形成六色色相環(huán),其中紅、黃、藍(lán)為三原色,橙、綠、紫為三原色兩兩相加得到的三間色,這種顏色兩兩相配,得到6種復(fù)色,從而構(gòu)成十二色相環(huán)。色相環(huán)直徑兩端對應(yīng)的兩種顏色為互補(bǔ)色。如圖所示為十二色相環(huán)。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)色彩帶來的的心理感受不同的色彩會(huì)給瀏覽者不同的心理感受。紅色是一種激奮的色彩,視覺沖擊力很強(qiáng),具有刺激效果,能使人產(chǎn)生沖動(dòng)、憤怒、的感覺,也能讓人感受到熱情、活力。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)色彩帶來的的心理感受綠色介于冷暖兩種色彩的中間,是永恒的自然色,代表生命與活力、松弛與安寧,有緩解眼部疲勞的作用,是和平的象征,能給人和睦、寧靜、健康、安全、安穩(wěn)、寬容的感覺。它和金黃、淡白搭配,可以烘托出優(yōu)雅、舒適的氣氛。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)色彩帶來的的心理感受橙色也是一種激奮的色彩,給人輕快、欣喜、熱烈、溫馨、收獲、時(shí)尚的感覺,在色譜里,橙色是耀眼的顏色,讓人覺得興奮、溫暖、健康、積極、富有活力。在網(wǎng)頁顏色里,橙色適用于對視覺要求高的時(shí)尚網(wǎng)站,或者需要讓讀者興奮的頁面。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)色彩帶來的的心理感受黃色是有彩色中明度最高的顏色,給人陽光、活潑、快樂、希望、智慧和輕快的感覺,象征光明、高貴、愉快、冷漠、孤傲、敏感等,明度越高的黃色顯得越柔弱,灰黃色顯得病態(tài),與其他顏色搭配給人以溫暖、醒目的感覺。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)色彩帶來的的心理感受藍(lán)色是最顯涼爽、清新、沉穩(wěn)、專業(yè)的色彩之一。它和白色混合(像天空的色彩),能體現(xiàn)柔順、淡雅、浪漫、寧靜的氣氛。藍(lán)色也是三原色中視覺傳遞速度最慢的顏色。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)色彩帶來的的心理感受白色是明度最高的無彩色,會(huì)給人光明、潔白、明快、純真的感受,象征純粹、樸素、高雅等,能夠與各種有彩色搭配,如果網(wǎng)頁配色沉悶,就可以考慮加入白色調(diào)整畫面,白色具有反射全部光線的特征。黑色是明度最低的無彩色,給人深沉、穩(wěn)重、莊嚴(yán)、肅穆、神秘、沉默、空虛、寂靜、悲哀、壓抑的感覺,具有吸收全部光線的特征,黑色如同白色一樣,可以與任何有彩色搭配,形成調(diào)和關(guān)系,是男性的代表顏色之一。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)色彩帶來的的心理感受灰色是用黑色與白色調(diào)和而成的無彩色,能給人含蓄、中庸、平凡、溫和、謙讓、耐人尋味、中立和高雅的心理感受,灰色經(jīng)常用在想要體現(xiàn)沉穩(wěn)的頁面中,可以與任何有彩色搭配使用。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)1.色彩的基礎(chǔ)知識

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(6)暖色暖色由紅色調(diào)組成,比如紅色、橙色和黃色等。暖色能賦予人溫暖、舒適的感受,會(huì)產(chǎn)生色彩向?yàn)g覽者推進(jìn)并從頁面中突出的可視化效果。(7)冷色冷色由藍(lán)色調(diào)組成,譬如藍(lán)色、青色和綠色等。這些顏色給人冷靜的感覺,會(huì)產(chǎn)生從瀏覽者身上收回色彩的效果,它們用作頁面的背景色比較好。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)2.網(wǎng)頁配色方案

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(1)背景色、基本色、輔助色和強(qiáng)調(diào)色一個(gè)好的網(wǎng)頁設(shè)計(jì)使用太多的顏色會(huì)比使用太少的顏色冒更大的危險(xiǎn)。太多的顏色會(huì)使整個(gè)頁面顯得雜亂,容易使瀏覽者難以找到需要的信息,也容易使瀏覽者的眼睛疲勞。網(wǎng)頁中色彩的一般作用如下①背景色:用于網(wǎng)頁背景的顏色,有時(shí)背景色就是基本色。②基本色(主體色):頁面的主要顏色,通常占據(jù)最大的面積,具有在整體上顯示出站點(diǎn)整體內(nèi)容及風(fēng)格的重要作用。③輔助色(次要色):輔助基本色的次要顏色,主要用于協(xié)助基本色營造整體氣氛。④強(qiáng)調(diào)色(突出色):用于突出、強(qiáng)調(diào)顯示,主要用于占用面積較小的Logo(網(wǎng)站標(biāo)志)、按鈕、標(biāo)簽等。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)2.網(wǎng)頁配色方案

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(2)色彩的對比對比與調(diào)和是形式美的變化與統(tǒng)一在一定條件和環(huán)境下,不同色彩之間的對比會(huì)有不同的效果。純色對比給人鮮亮、明快的色彩感覺。三原色的對比是極端的對比。色彩對比是指各種色彩在頁面內(nèi)形成的面積、形狀、位置以及色相、明度、純度之間的差異,使網(wǎng)頁出現(xiàn)不同的變化。(3)顏色的數(shù)量一個(gè)好的網(wǎng)頁需要基本色的數(shù)量絕對不能太多,一般不超過3種。另外,還要考慮網(wǎng)頁中的圖片色彩,如果圖片色彩過多會(huì)給人雜亂無章的感覺。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)3.色彩在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(1)以網(wǎng)站的內(nèi)容為基礎(chǔ)網(wǎng)站的形式是為內(nèi)容服務(wù)的,色彩也是為內(nèi)容傳達(dá)創(chuàng)造更準(zhǔn)確和更舒適的環(huán)境的。不同的內(nèi)容造成了網(wǎng)站色彩的不同定位,只有使用正確定位的色彩,才能設(shè)計(jì)出成功的站點(diǎn)。(2)利用形容詞決定恰當(dāng)方案通過一系列的形容詞,可以尋找到相應(yīng)的色彩搭配標(biāo)準(zhǔn)。這樣做的好處是可以準(zhǔn)確地找到網(wǎng)站的定位。這些形容詞都來源于日常生活,如有趣的、自然的、現(xiàn)代的、神秘的、親切的、簡潔的、女性的、激情的、古典的等。(3)顏色與文本對文本而言,使用有鮮明對比的顏色尤其重要。使用不合適的顏色,會(huì)大大降低文字的可讀性,也會(huì)使用戶的眼睛很快感到疲勞。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)3.色彩在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(4)具體搭配實(shí)例分析①汽車類網(wǎng)站。汽車類網(wǎng)站一般從汽車的品牌、文化、年齡、受眾、CIS等多個(gè)角度出發(fā),用色沉穩(wěn)、內(nèi)斂、冷靜、簡潔,多以冷色調(diào)、中性色調(diào)為主,用來突出汽車上用到的精良與先進(jìn)的技術(shù),設(shè)計(jì)者要牢記這類網(wǎng)站的用色特點(diǎn)應(yīng)該是品牌第一、產(chǎn)品優(yōu)先。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)3.色彩在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(4)具體搭配實(shí)例分析②信息類網(wǎng)站。信息類網(wǎng)站以發(fā)布各種信息為主,可以分為綜合信息類網(wǎng)站和專業(yè)信息類網(wǎng)站。這里介紹的是專業(yè)信息類網(wǎng)站。隨著互聯(lián)網(wǎng)上信息的不斷增多,人們查找對自己有價(jià)值的信息變得越來越困難,而專業(yè)信息類網(wǎng)站正好用來解決這一難題。這類網(wǎng)站在設(shè)計(jì)風(fēng)格上追求清新淡雅,信息內(nèi)容以文字為主,信息分類方法多樣,便于檢索。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)3.色彩在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(4)具體搭配實(shí)例分析③商務(wù)類網(wǎng)站。商務(wù)類網(wǎng)站是以傳統(tǒng)商業(yè)為基礎(chǔ),以網(wǎng)絡(luò)技術(shù)為依托而搭建的網(wǎng)上貿(mào)易平臺(tái),可以在網(wǎng)上完成商品信息搜索、商品或服務(wù)的訂購、付款和其他服務(wù)項(xiàng)目。這類網(wǎng)站的特點(diǎn)是能使瀏覽者在訪問時(shí)進(jìn)行愉快的交流,能夠引領(lǐng)瀏覽者順利查找到自己感興趣的商品或服務(wù)信息,以使其完成購買操作。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)3.色彩在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)網(wǎng)頁配色技巧①網(wǎng)頁用色忌“花”。一個(gè)網(wǎng)頁的色彩不能太多,色彩過多會(huì)給人“花”的感覺。許多網(wǎng)站為了引起人們的注意,在網(wǎng)頁上到處使用鮮艷的色彩,再配合各種動(dòng)態(tài)的效果,結(jié)果反而引起人們的反感,個(gè)人網(wǎng)站尤其容易犯這樣的錯(cuò)誤。一般來說,色彩應(yīng)控制在3種以內(nèi)。這里有必要解釋一下3種色彩的含義,這里所說的3種色彩是指3種不同系列的顏色。另外,我們這里的色彩是指網(wǎng)站圖片以外的,如背景、表格、文字、分割線等用的色彩。②冷暖搭配要謹(jǐn)慎。一般情況下,冷暖的搭配是不可行的,這容易造成頁面的混亂。但這也不是絕對的,有時(shí)技藝高超的設(shè)計(jì)師可以通過嚴(yán)格控制色彩比例,利用冷暖搭配達(dá)到特定的效果。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.4網(wǎng)站配色設(shè)計(jì)3.色彩在網(wǎng)頁設(shè)計(jì)中的基本應(yīng)用

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)網(wǎng)頁配色技巧③網(wǎng)站各頁面色彩統(tǒng)一。讓網(wǎng)站各頁面色彩統(tǒng)一是使網(wǎng)站風(fēng)格統(tǒng)一的好辦法。首頁、各級欄目頁面在達(dá)成色彩上的統(tǒng)一之后,給瀏覽者的主觀印象是統(tǒng)一的。當(dāng)然這也不是絕對的做法,我們還可以采用頁面結(jié)構(gòu)統(tǒng)一而色系不同的設(shè)計(jì),主要運(yùn)用在大型網(wǎng)站的不同頻道上。要設(shè)計(jì)制作優(yōu)秀的網(wǎng)頁,除了要能熟練使用網(wǎng)頁編輯工具和圖形圖像處理工具,掌握網(wǎng)頁設(shè)計(jì)的基本技巧以外,還應(yīng)不斷提高自己的網(wǎng)頁鑒賞水平,通過學(xué)習(xí)欣賞國內(nèi)外優(yōu)秀的網(wǎng)站設(shè)計(jì)作品,提高自己的審美素養(yǎng)。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.5首頁設(shè)計(jì)

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)首頁也叫主頁,它是網(wǎng)站的形象頁面,是網(wǎng)站的“門面”,故被稱為“HomePage”,它的設(shè)計(jì)好壞是網(wǎng)站成功與否的關(guān)鍵。網(wǎng)站主題鮮明與否、版面精彩與否、立意新穎與否等將直接影響瀏覽者到該網(wǎng)站中漫游的意愿。所以,首頁設(shè)計(jì)對于任何網(wǎng)站都是至關(guān)重要的。首頁的設(shè)計(jì)應(yīng)該遵循快速、簡潔、吸引人、信息概括能力強(qiáng)、易于導(dǎo)航的原則,在網(wǎng)站的首頁就要將自己企業(yè)的優(yōu)勢直接道出,所有絕活、高招、亮點(diǎn)等要立即呈現(xiàn),對瀏覽者形成興趣沖擊力,將其吸引住,從而促使其深入瀏覽。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.5首頁設(shè)計(jì)1.首頁的功能模塊

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(1)頁頭(2)主菜單(3)最新消息(4)電子郵件地址(5)聯(lián)絡(luò)信息(6)版權(quán)信息(7)其他信息3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.5首頁設(shè)計(jì)2.首頁的可視化設(shè)計(jì)

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)確定好首頁的內(nèi)容和功能后,就可以設(shè)計(jì)首頁的版面了。就像搭積木一樣,一個(gè)內(nèi)容模塊是一塊積木,要拼搭出一座漂亮的房子,就要看設(shè)計(jì)者的創(chuàng)意和想象力了。在圖文類首頁中,通常以圖片和標(biāo)題為興趣點(diǎn),由于圖片通常較文字更能吸引人的注意力,故圖片上的興趣點(diǎn)通常就是首頁的興趣點(diǎn)。設(shè)計(jì)版面的最好方法之一是,找一張白紙、一支筆,先將理想中的草圖勾勒出來,然后用網(wǎng)頁制作軟件實(shí)現(xiàn)。在設(shè)計(jì)中,應(yīng)避免封面式首頁,即沒有具體內(nèi)容,只放一個(gè)Logo,或者只有簡單的圖像菜單。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.5首頁設(shè)計(jì)3.首頁設(shè)計(jì)要注意的問題

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)①首頁明確,主題突出。

要能使用戶通過企業(yè)網(wǎng)站首頁了解企業(yè)的主要業(yè)務(wù)。②盡可能縮短下載時(shí)間。首頁的下載時(shí)間最長不宜超過30秒。首頁上的圖像應(yīng)力求簡樸,避免耽誤用戶的時(shí)間。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.6其他頁面的設(shè)計(jì)1.新聞頁面的設(shè)計(jì)

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)任何類型企業(yè)的電子商務(wù)網(wǎng)站都應(yīng)該有新聞頁面,該頁面擔(dān)負(fù)著雙重作用,既可以用來動(dòng)態(tài)發(fā)布有關(guān)新產(chǎn)品、新開發(fā)項(xiàng)目、公司活動(dòng)的情況,又可以作為公司的活動(dòng)年表。新聞頁面的風(fēng)格應(yīng)保持一致。(1)首頁中的新聞標(biāo)題標(biāo)題要能足夠清楚地描述新聞的要點(diǎn),以便用戶能確切地知道自己點(diǎn)擊的是什么。通常標(biāo)題的文字不宜過長。(2)新聞頁面新聞頁面要滿足易于導(dǎo)航的要求,首先要方便用戶從新聞頁面到網(wǎng)站中其他內(nèi)容頁面的跳轉(zhuǎn),其次還要方便用戶迅速地到達(dá)其他的新聞頁面。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.6其他頁面的設(shè)計(jì)2.產(chǎn)品頁面的設(shè)計(jì)

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)產(chǎn)品頁面一般采用信息分層、逐層細(xì)化的方法展示公司產(chǎn)品或服務(wù)。所謂信息分層就是將產(chǎn)品信息放在不同詳細(xì)程度的頁面上,從而允許用戶能自上而下地找到最適合自己需求的信息層。

每個(gè)信息層都允許用戶在相應(yīng)的信息深度范圍內(nèi)通過導(dǎo)航欄進(jìn)行瀏覽。掌握產(chǎn)品頁面的創(chuàng)建主要在于掌握產(chǎn)品目錄的層次結(jié)構(gòu)和導(dǎo)航方法。產(chǎn)品目錄的設(shè)計(jì)思想和整個(gè)網(wǎng)站結(jié)構(gòu)的設(shè)計(jì)思想是一致的,都是由概括到詳細(xì)的層次結(jié)構(gòu)。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.6其他頁面的設(shè)計(jì)3.雇員頁面的設(shè)計(jì)

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)雇員是企業(yè)最寶貴的資源和財(cái)富之一,企業(yè)通過創(chuàng)建每個(gè)雇員的頁面可以吸引潛在客戶。創(chuàng)建雇員頁面是使企業(yè)人格化的重要方法,網(wǎng)民可通過瀏覽雇員頁面了解公司的技術(shù)實(shí)力,由此培養(yǎng)對企業(yè)的信心。目前,網(wǎng)上企業(yè)的雇員頁面大都采用框架形式。最簡單的框架之一是將網(wǎng)頁分成左右兩部分,左半部分的網(wǎng)頁中放置將雇員名字按字母順序排列的清單,每個(gè)雇員名字都會(huì)鏈接到對應(yīng)雇員的個(gè)人頁面;個(gè)人頁面的內(nèi)容放置在右半部分的網(wǎng)頁中。這種方法與無框架頁面相比,能為用戶提供更方便、簡捷的導(dǎo)航。

3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.6其他頁面的設(shè)計(jì)4.輔助頁面設(shè)計(jì)

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)輔助頁面一般包括以下這些內(nèi)容的頁面

①客戶支持頁面。②市場調(diào)研頁面。③企業(yè)信息頁面。④其他內(nèi)容的頁面。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)一般而言,電子商務(wù)網(wǎng)站中的Web資源總是包括靜態(tài)網(wǎng)頁和動(dòng)態(tài)網(wǎng)頁兩種。靜態(tài)網(wǎng)頁就是一個(gè)個(gè)HTML文件,制作好后,內(nèi)容相對穩(wěn)定,不需要經(jīng)常修改,文件比較小,適合在網(wǎng)上傳輸,執(zhí)行效率很高。動(dòng)態(tài)網(wǎng)頁中包含的是需要頻繁更新的數(shù)據(jù)。動(dòng)態(tài)網(wǎng)頁由數(shù)據(jù)庫和相應(yīng)的應(yīng)用程序構(gòu)成,由于其頁面中包含的內(nèi)容是來自數(shù)據(jù)庫的,因此,可根據(jù)用戶的不同選擇返回不同的頁面。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

1.靜態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)制作靜態(tài)網(wǎng)頁前要選擇一種網(wǎng)頁制作軟件。從這里選擇使用Dreamweaver來制作靜態(tài)網(wǎng)頁。下面,通過模擬制作“冬藏”網(wǎng)上書店網(wǎng)站首頁,來簡要介紹建立靜態(tài)網(wǎng)頁的主要過程。“冬藏”網(wǎng)上書店網(wǎng)站首頁如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

1.靜態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)創(chuàng)建網(wǎng)站首頁及二級頁面的操作步驟如下。①創(chuàng)建本地網(wǎng)站。②制作站標(biāo)。網(wǎng)站標(biāo)志(Logo)簡稱“站標(biāo)”,是網(wǎng)站特色和內(nèi)涵的集中體現(xiàn)?!岸亍本W(wǎng)上書店站標(biāo)力求簡單明快,這里使用文字的排列來體現(xiàn)網(wǎng)站的主題,如右側(cè)圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

1.靜態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)③使用Dreamweaver通過DIV+CSS對“冬藏”網(wǎng)上書店網(wǎng)站首頁進(jìn)行布局。首頁的布局示意如右側(cè)圖所示。④制作輪播圖片。⑤制作網(wǎng)站二級頁面——商品類目頁面。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

2.動(dòng)態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)電子商務(wù)網(wǎng)站是具有高度可交互性的網(wǎng)站,如果一個(gè)電子商務(wù)網(wǎng)站上只有靜態(tài)Web頁,那么這個(gè)網(wǎng)站絕對不能滿足用戶和企業(yè)雙方對信息訪問和數(shù)據(jù)處理的需要。網(wǎng)站中的信息資源不能隨時(shí)更新,企業(yè)不能與用戶進(jìn)行信息的交流,用戶不能根據(jù)自己的意愿有選擇地瀏覽網(wǎng)頁,那這個(gè)網(wǎng)站就會(huì)成為“過期的報(bào)紙”。另外,用戶在與企業(yè)進(jìn)行電子商務(wù)行為時(shí)會(huì)產(chǎn)生大量的動(dòng)態(tài)數(shù)據(jù),如即時(shí)交易數(shù)據(jù)、安全認(rèn)證數(shù)據(jù)等,這也都要求電子商務(wù)網(wǎng)站提供大量的動(dòng)態(tài)網(wǎng)頁。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

2.動(dòng)態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)一般而言,動(dòng)態(tài)網(wǎng)頁的制作分為兩種:網(wǎng)頁表示形式的動(dòng)態(tài)制作和網(wǎng)頁數(shù)據(jù)內(nèi)容的動(dòng)態(tài)制作。(1)網(wǎng)頁表示形式的動(dòng)態(tài)制作網(wǎng)頁表示形式的動(dòng)態(tài)制作通過在靜態(tài)網(wǎng)頁中添加活動(dòng)內(nèi)容,附加一些用編程語言所編寫的小程序來使原本內(nèi)容固定的HTML文件更加吸引人。目前有4種制作方式。Script(腳本)語言。JavaApplets。串聯(lián)樣式表(CascadingStyleSheets,CSS)。虛擬現(xiàn)實(shí)建模語言(VirtualRealityModelingLanguage,VRML)。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

2.動(dòng)態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(2)網(wǎng)頁數(shù)據(jù)內(nèi)容的動(dòng)態(tài)制作交互式動(dòng)態(tài)網(wǎng)頁中網(wǎng)頁數(shù)據(jù)內(nèi)容的動(dòng)態(tài)制作一般是和數(shù)據(jù)庫聯(lián)系在一起的,通過特定的編程語言和外部應(yīng)用程序來訪問企業(yè)信息系統(tǒng)中已經(jīng)存在于數(shù)據(jù)庫中的信息。網(wǎng)頁數(shù)據(jù)內(nèi)容的動(dòng)態(tài)制作是動(dòng)態(tài)網(wǎng)頁的一個(gè)最重要的應(yīng)用。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

2.動(dòng)態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)交互式動(dòng)態(tài)網(wǎng)頁的制作主要包括兩個(gè)階段:數(shù)據(jù)庫設(shè)計(jì)和程序設(shè)計(jì)。①數(shù)據(jù)庫設(shè)計(jì)階段。此階段的主要工作是根據(jù)確定的網(wǎng)站信息結(jié)構(gòu)圖進(jìn)行數(shù)據(jù)庫的邏輯設(shè)計(jì)、物理設(shè)計(jì),并將具體的數(shù)據(jù)輸入數(shù)據(jù)庫管理系統(tǒng)中;具體包括分析各實(shí)體之間的關(guān)系,確定數(shù)據(jù)庫的關(guān)系數(shù)據(jù)模型,將之轉(zhuǎn)化到具體的數(shù)據(jù)庫管理系統(tǒng)中,并形成明確的數(shù)據(jù)庫設(shè)計(jì)文檔。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

2.動(dòng)態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)交互式動(dòng)態(tài)網(wǎng)頁的制作主要包括兩個(gè)階段:數(shù)據(jù)庫設(shè)計(jì)和程序設(shè)計(jì)。②程序設(shè)計(jì)階段。在進(jìn)行應(yīng)用程序的編寫之前,必須考慮Web數(shù)據(jù)庫接口技術(shù)、編寫應(yīng)用程序的編程語言等的選擇。●Web數(shù)據(jù)庫接口技術(shù)的選擇。●編程語言的選擇。

●應(yīng)用程序的編寫。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.7網(wǎng)頁制作

2.動(dòng)態(tài)網(wǎng)頁的制作

項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(3)使用Dreamweaver設(shè)計(jì)動(dòng)態(tài)網(wǎng)頁的基本步驟①設(shè)計(jì)頁面。②創(chuàng)建動(dòng)態(tài)內(nèi)容源。這里需要安裝PhPStudy

這個(gè)PhP

調(diào)試環(huán)境工具。創(chuàng)建動(dòng)態(tài)內(nèi)容源(如數(shù)據(jù)庫),登錄phpMyAdmin,創(chuàng)建數(shù)據(jù)庫并輸入內(nèi)容。創(chuàng)建動(dòng)態(tài)內(nèi)容源與Dreamweaver之間的連接。選擇動(dòng)態(tài)內(nèi)容元素并將其插入選定頁面。③測試和調(diào)試頁面。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁1.設(shè)置本地站點(diǎn)項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)作為一種文件的組織形式,Dreamweaver站點(diǎn)是由文件和文件所在的文件夾組成的。不同的文件夾保存不同的網(wǎng)頁內(nèi)容,站點(diǎn)文件夾可以分為以下3類,具體屬于哪一類取決于開發(fā)環(huán)境和要開發(fā)的網(wǎng)站類型。●本地文件夾。這是工作目錄,通常為硬盤上的文件夾。此類文件夾可以位于本地,也可以位于網(wǎng)絡(luò)服務(wù)器?!襁h(yuǎn)程文件夾。它位于運(yùn)行Web服務(wù)器的計(jì)算機(jī)(遠(yuǎn)程服務(wù)器),用于發(fā)布Web網(wǎng)站?!駵y試文件夾。它是Dreamweaver處理動(dòng)態(tài)網(wǎng)頁的文件夾。使用此文件夾生成動(dòng)態(tài)內(nèi)容并在工作時(shí)連接到數(shù)據(jù)庫,用于對動(dòng)態(tài)網(wǎng)頁進(jìn)行測試。這3類文件夾也代表了不同的站點(diǎn)類型,分別為本地站點(diǎn)、遠(yuǎn)程站點(diǎn)和測試站點(diǎn)。

3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁1.設(shè)置本地站點(diǎn)項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)在Dreamweaver中創(chuàng)建本地站點(diǎn)的步驟:選擇“站點(diǎn)”→“新建站點(diǎn)”→“站點(diǎn)”,彈出右側(cè)圖所示的對話框,將站點(diǎn)名稱設(shè)置為“冬藏”,本地站點(diǎn)文件夾設(shè)置為網(wǎng)頁程序所在的磁盤目錄(本實(shí)例中為D:\PhPStudy_pro\www\dongcang),單擊“保存”按鈕。效果如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)動(dòng)態(tài)網(wǎng)頁的測試離不開服務(wù)器端環(huán)境,必須設(shè)置并安裝Web服務(wù)器(如IIS、Apache)、數(shù)據(jù)庫平臺(tái)(如MySQL)及服務(wù)器端語言環(huán)境(如PHP)。這里以在Windows10操作系統(tǒng)下配置PhPStudy本地服務(wù)器環(huán)境為例。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:①打開PhPStudy,啟動(dòng)Apache、MySQL服務(wù),如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:②單擊PhPStudy面板上的“網(wǎng)站”→“創(chuàng)建網(wǎng)站”,如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:③設(shè)置網(wǎng)站的域名、端口以及根目錄,最后單擊“確認(rèn)“按鈕,如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:④單擊PhPStudy面板“首頁”上Apache2.4.39后面的“配置”按鈕,打開Apache設(shè)置面板。如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:⑤在Apache設(shè)置面板中,選擇“基本配置”,設(shè)置啟動(dòng)端口(默認(rèn)為80),以及網(wǎng)站目錄,全部設(shè)置好后單擊“確認(rèn)”按鈕。如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:⑥單擊PhPStudy面板上的“設(shè)置”,單擊“配置文件”→“hosts”,如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:⑦單擊hosts文件,選擇用記事本打開并修改。在hosts文件的最后一行,添加網(wǎng)站的域名

并按“Enter”鍵,如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:⑧單擊PhPStudy面板上的“網(wǎng)站”,單擊域名為localhost的網(wǎng)站后面的“管理”按鈕后,選擇“停止”,用同樣的方法,將域名為

的網(wǎng)站設(shè)置為“啟用”。如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:⑨打開Dreamweaver,編輯一個(gè)簡單的PHP測試網(wǎng)頁。如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁2.配置服務(wù)器端環(huán)境項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)服務(wù)器配置操作步驟如下:⑩打開瀏覽器,在地址欄輸入“/test.php”,并按“Enter”鍵。顯示效果如右圖所示。到這里,服務(wù)器環(huán)境設(shè)置完成。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁3.設(shè)置測試服務(wù)器項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)設(shè)置測試服務(wù)器后可以安全地測試所有動(dòng)態(tài)代碼而不會(huì)對正式發(fā)布的網(wǎng)站造成任何損害。本地計(jì)算機(jī)、開發(fā)服務(wù)器、中間服務(wù)器或生產(chǎn)服務(wù)器都可作為測試服務(wù)器。而設(shè)置本地測試服務(wù)器更為簡單和安全,不必花時(shí)間來上傳、測試、修復(fù)、重新上傳和重新測試頁面,非常有利于網(wǎng)站的開發(fā)。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁3.設(shè)置測試服務(wù)器項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)本地測試服務(wù)器的設(shè)置方法:設(shè)置測試服務(wù)器之前應(yīng)先創(chuàng)建本地站點(diǎn),這里沿用之前創(chuàng)建的冬藏站點(diǎn)(也可新建一個(gè)站點(diǎn))。①單擊右圖所示對話框中的“服務(wù)器”,并單擊添加服務(wù)器按鈕,打開“基本”選項(xiàng)卡,進(jìn)行服務(wù)器基本參數(shù)設(shè)置,如下圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁3.設(shè)置測試服務(wù)器項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)打開“基本”選項(xiàng)卡,進(jìn)行服務(wù)器基本參數(shù)設(shè)置,如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁3.設(shè)置測試服務(wù)器項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)②設(shè)置后再打開“高級”選項(xiàng)卡,勾選“維護(hù)同步信息”復(fù)選框,在“服務(wù)器模型”下拉列表中選擇“PHPMySQL”選項(xiàng)(表示是使用PHP開發(fā)的網(wǎng)頁),其他的保持默認(rèn)值,如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁3.設(shè)置測試服務(wù)器項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)③單擊“保存”按鈕,返回服務(wù)器設(shè)置界面,選擇“測試”單選按鈕,如右圖所示。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁3.設(shè)置測試服務(wù)器項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)④單擊“保存”按鈕,完成冬藏站點(diǎn)的定義設(shè)置。接著單擊“完成”按鈕,關(guān)閉“管理站點(diǎn)”對話框,這樣就完成了Dreamweaver測試站點(diǎn)的網(wǎng)站環(huán)境設(shè)置。之所以建立Dreamweaver測試服務(wù)器并對站點(diǎn)的網(wǎng)絡(luò)環(huán)境進(jìn)行設(shè)置,是為了方便在使用Dreamweaver軟件開發(fā)網(wǎng)站的時(shí)候打開實(shí)時(shí)視圖,從而在編輯窗口的上部即時(shí)看到PHP網(wǎng)站運(yùn)行的效果。這對初學(xué)PHP的網(wǎng)站開發(fā)者特別有幫助。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)動(dòng)態(tài)內(nèi)容源的主要部分是數(shù)據(jù)庫。創(chuàng)建動(dòng)態(tài)內(nèi)容源主要有以下幾步。(1)建立數(shù)據(jù)庫這里使用phpMyAdmin創(chuàng)建一個(gè)名為test的數(shù)據(jù)庫文件,test數(shù)據(jù)庫中只建一個(gè)名為tb_books的數(shù)據(jù)表。數(shù)據(jù)表的字段內(nèi)容及說明如下表所示。數(shù)據(jù)庫和數(shù)據(jù)表建完后,輸入10條記錄。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(2)建立數(shù)據(jù)庫連接要在動(dòng)態(tài)網(wǎng)頁中使用數(shù)據(jù)庫,首先要建立網(wǎng)站與數(shù)據(jù)庫連接。HTML網(wǎng)頁是無法讀取數(shù)據(jù)庫的,要想從HTML網(wǎng)頁中獲取數(shù)據(jù)庫里的數(shù)據(jù),需要借助PHP或JSP等來實(shí)現(xiàn)。建立網(wǎng)站與數(shù)據(jù)庫連接的步驟如下:①單擊Dreamweaver“文件”→“新建”,在網(wǎng)站根目錄下新建一個(gè)名為conn.php的網(wǎng)頁,輸入網(wǎng)頁標(biāo)題“冬藏書店”,然后單擊“文件”→“保存”將網(wǎng)頁保存。

3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)②conn.php是用來存放數(shù)據(jù)庫連接設(shè)置信息的文件,PHP中大多數(shù)此類文件都用的是這個(gè)文件名。打開該文件并使用代碼視圖,輸入MySQL的連接代碼。在這個(gè)文件中定義與數(shù)據(jù)庫的連接(mysqli_connect函數(shù)),連接代碼包括以下內(nèi)容:3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(3)創(chuàng)建記錄集記錄集是數(shù)據(jù)庫查詢的結(jié)果。它會(huì)提取請求的特定信息,并允許在指定頁面內(nèi)顯示該信息。一般根據(jù)包含在數(shù)據(jù)庫中的信息和要顯示的內(nèi)容來定義記錄集。這里用PHP7的MySQLi函數(shù),在Dreamweaver中編寫一段PHP代碼來實(shí)現(xiàn)對MySQL數(shù)據(jù)庫的操作,這些操作包括創(chuàng)建記錄集、插入記錄、更新記錄、復(fù)制記錄、顯示記錄和記錄集分頁等常使用的動(dòng)態(tài)服務(wù)器行為。只介紹如何創(chuàng)建記錄集和顯示記錄兩項(xiàng)操作。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)創(chuàng)建記錄集的步驟:①單擊Dreamweaver“文件”→“新建”,在網(wǎng)站根目錄下新建一個(gè)名為newbook.php的網(wǎng)頁,輸入網(wǎng)頁標(biāo)題“冬藏書店”,然后按“Ctrl+S”鍵,保存當(dāng)前網(wǎng)頁文件。②打開newbook.php文件,使用代碼視圖,輸入以下代碼。首先將conn.php的內(nèi)容引用到當(dāng)前網(wǎng)頁中:3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)接著輸入建立數(shù)據(jù)庫查詢“記錄集”的PHP代碼:3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(4)向網(wǎng)頁添加動(dòng)態(tài)內(nèi)容定義數(shù)據(jù)集或其他數(shù)據(jù)源并將其添加到“綁定”面板后,可以將其代表的動(dòng)態(tài)內(nèi)容插入頁面中。將記錄集內(nèi)的記錄(即數(shù)據(jù)庫中的數(shù)據(jù))直接顯示到網(wǎng)頁上。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)實(shí)現(xiàn)的步驟如下:在“文件”面板中打開index.php網(wǎng)頁文件,在網(wǎng)頁中插入一個(gè)2行5列的表格,在表格的<td>標(biāo)簽中輸入如右圖

所示的內(nèi)容。將編號、書名、作者、售價(jià)、出版時(shí)間5個(gè)字段分別輸入相應(yīng)的單元格。3.2電子商務(wù)網(wǎng)站設(shè)計(jì)與制作3.2.8用Dreamweaver制作動(dòng)態(tài)網(wǎng)頁4.創(chuàng)建動(dòng)態(tài)內(nèi)容源項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)輸入有關(guān)的PHP代碼后,打開實(shí)時(shí)視圖。視圖呈現(xiàn)的效果與使用瀏覽器打開的網(wǎng)頁效果一樣。瀏覽器瀏覽效果如右圖所示。3.3網(wǎng)頁發(fā)布3.3.1選擇Web服務(wù)器項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)Web服務(wù)器是容納、分配各種信息的計(jì)算機(jī),網(wǎng)絡(luò)瀏覽者通過Web瀏覽器在服務(wù)器內(nèi)查找指定的URL站點(diǎn)。站點(diǎn)發(fā)布到Web服務(wù)器之后,其中的文件和文件夾都保存在Web服務(wù)器上。在選擇服務(wù)提供商時(shí),必須考慮其提供服務(wù)的內(nèi)容和質(zhì)量。選擇Web服務(wù)提供商時(shí)應(yīng)該考慮以下因素。(1)磁盤空間。(2)可靠性。出現(xiàn)意外情況時(shí),服務(wù)提供商必須有足夠能力保證Web服務(wù)器的正常運(yùn)行,不會(huì)因?yàn)橐馔馇闆r中斷對站點(diǎn)的訪問。Web服務(wù)器必須支持網(wǎng)站所使用的數(shù)據(jù)庫類型,Web服務(wù)器還必須支持運(yùn)行PHP網(wǎng)頁。(3)客戶服務(wù)。Web服務(wù)器必須快速響應(yīng)網(wǎng)絡(luò)瀏覽者通過Web瀏覽器發(fā)出的訪問請求。(4)價(jià)格因素。3.3網(wǎng)頁發(fā)布3.3.2測試站點(diǎn)項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)測試站點(diǎn)是為了及時(shí)發(fā)現(xiàn)存在的問題、完善站點(diǎn)的內(nèi)容。在向遠(yuǎn)程站點(diǎn)上傳文件并對外發(fā)布之前,必須先對本地站點(diǎn)進(jìn)行全面測試。這主要包括以下幾項(xiàng)工作:①檢查頁面顯示的一致性。②檢查站點(diǎn)鏈接。③檢查網(wǎng)頁同目標(biāo)瀏覽器之間的兼容性。④測試文件下載時(shí)間。

3.3網(wǎng)頁發(fā)布3.3.3遠(yuǎn)程站點(diǎn)設(shè)置項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)遠(yuǎn)程服務(wù)器通常稱為Web服務(wù)器或發(fā)布服務(wù)器。通過設(shè)置FTP、SFTP連接站點(diǎn)并上傳文件或從發(fā)布Web服務(wù)器下載文件,Dreamweaver將指定的遠(yuǎn)程文件夾當(dāng)成遠(yuǎn)程站點(diǎn)。Dreamweaver允許用戶為一個(gè)站點(diǎn)定義多個(gè)服務(wù)器,因此可以接著前面的站點(diǎn)例子進(jìn)行操作,為“冬藏”站點(diǎn)再設(shè)置一個(gè)遠(yuǎn)程站點(diǎn)。設(shè)置遠(yuǎn)程站點(diǎn)具體操作步驟如下:①單擊菜單欄中的“站點(diǎn)”,選擇“管理站點(diǎn)”,打開“管理站點(diǎn)”對話框。②選擇要定義的站點(diǎn)名稱(本實(shí)例中為冬藏站點(diǎn)),單擊“編輯”按鈕,打開“站點(diǎn)設(shè)置對象”對話框。③在左側(cè)選擇“服務(wù)器”選項(xiàng)。3.3網(wǎng)頁發(fā)布3.3.3遠(yuǎn)程站點(diǎn)設(shè)置項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)④單擊“幫助”欄上的“添加”按鈕,打開如右側(cè)所示的對話框,設(shè)置FTP參數(shù)。⑤在“連接方法”下拉列表中,選擇“FTP”。⑥設(shè)置FTP連接方法的相關(guān)參數(shù)。3.3網(wǎng)頁發(fā)布3.3.3遠(yuǎn)程站點(diǎn)設(shè)置項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)⑦切換到“高級”選項(xiàng)卡,如右圖

所示,可以設(shè)置“維護(hù)同步信息”?!氨4鏁r(shí)自動(dòng)將文件上傳到服務(wù)器”和“啟用文件取出功能”這兩項(xiàng)設(shè)置與團(tuán)隊(duì)制作網(wǎng)頁有關(guān),如果是個(gè)人制作的網(wǎng)頁就沒必要使用這兩項(xiàng)設(shè)置。由于不打算將其作為測試服務(wù)器,所以不用設(shè)置“服務(wù)器模型”。3.3網(wǎng)頁發(fā)布3.3.3遠(yuǎn)程站點(diǎn)設(shè)置項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)⑧完成設(shè)置后,單擊“保存”按鈕。這樣就完成了遠(yuǎn)程站點(diǎn)的設(shè)置,確保這里選擇的是“遠(yuǎn)程”單選按鈕,如右圖所示。這里同一站點(diǎn)設(shè)置有兩個(gè)服務(wù)器,分別是測試服務(wù)器和遠(yuǎn)程服務(wù)器。3.3網(wǎng)頁發(fā)布3.3.4發(fā)布網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)發(fā)布網(wǎng)頁指將構(gòu)成網(wǎng)頁和站點(diǎn)的所有文件復(fù)制到Web服務(wù)器上,讓瀏覽者看到網(wǎng)頁制作者的勞動(dòng)成果。發(fā)布網(wǎng)頁既可以通過FTP軟件完成,也可以通過Dreamweaver完成。Dreamweaver發(fā)布網(wǎng)頁的操作步驟如下:①將計(jì)算機(jī)接入Internet。②在站點(diǎn)管理窗口,單擊“連接到遠(yuǎn)程服務(wù)器”按鈕,連接FTP主機(jī),如右圖

所示。③連接成功后,“連接到遠(yuǎn)程服務(wù)器”按鈕將高亮顯示。3.3網(wǎng)頁發(fā)布3.3.4發(fā)布網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)④將本地文件和文件夾全部選中,單擊“上傳文件”按鈕,開始上傳網(wǎng)頁。上傳完畢后,切換到遠(yuǎn)程服務(wù)器視圖,將顯示與“本地文件夾”相同的列表。成功上傳后,就可以啟動(dòng)瀏覽器,輸入網(wǎng)址來瀏覽自己的網(wǎng)頁了。這里要注意Web服務(wù)器默認(rèn)的首頁名稱是什么,例如,采用虛擬主機(jī)方式申請網(wǎng)頁空間時(shí),給定的默認(rèn)首頁名是index.htm,那么上傳的網(wǎng)站首頁文件名也應(yīng)該是index.htm,否則將無法瀏覽上傳的網(wǎng)頁。3.4網(wǎng)頁的更新項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)網(wǎng)頁更新要注意做好以下幾點(diǎn):①專人專門維護(hù)新聞欄目。專人專門維護(hù)新聞欄目很重要,一方面,要把企業(yè)、業(yè)界動(dòng)態(tài)都反映在里面,讓訪問者覺得這是一個(gè)發(fā)展中的企業(yè)。吸引同類用戶。②時(shí)常檢查相關(guān)鏈接。通過測試軟件對網(wǎng)站所有的網(wǎng)頁鏈接進(jìn)行測試,看是否能連通。③在網(wǎng)頁中應(yīng)設(shè)計(jì)并建立信息反饋表單,隨時(shí)收集用戶的意見和建議。通過反饋表單將收集的意見,網(wǎng)站管理員定期對用戶的反饋進(jìn)行整理并修改網(wǎng)頁內(nèi)容,同時(shí)及時(shí)更新網(wǎng)站內(nèi)容。電子商務(wù)網(wǎng)站中的內(nèi)容變化周期短、內(nèi)容更新快。在網(wǎng)頁中進(jìn)行修改后應(yīng)及時(shí)更新網(wǎng)站。3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)移動(dòng)端應(yīng)用程序主要包括NativeApp、WebApp以及HybridApp3種類型。1.NativeApp(原生應(yīng)用程序)NativeApp是一種基于智能手機(jī)本地操作系統(tǒng)(如iOS、Android),并使用原生程序編寫運(yùn)行的應(yīng)用程序,也叫作原生應(yīng)用程序。NativeApp是特別為某種操作系統(tǒng)開發(fā)的,它們是在各自的移動(dòng)設(shè)備上運(yùn)行的。2.WebApp(網(wǎng)頁應(yīng)用程序)WebApp是指采用HTML5編寫,為移動(dòng)端瀏覽器設(shè)計(jì)的基于Web的應(yīng)用程序。常見的觸屏版的網(wǎng)頁應(yīng)用程序就是WebApp。移動(dòng)設(shè)備網(wǎng)頁就屬于WebApp。WebApp無須下載、安裝,需要利用設(shè)備上的瀏覽器運(yùn)行,需要聯(lián)網(wǎng)使用。3.5.1移動(dòng)端應(yīng)用程序的類型3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)3.HybridApp(混合模式移動(dòng)應(yīng)用程序)HybridApp是指介于上述兩者之間的App,它表面是NativeApp,但實(shí)際上只有UIWebView,里面訪問的是WebApp。最簡單的實(shí)現(xiàn)之一就是給HTML5網(wǎng)站加上NativeApp的殼。HybridApp同時(shí)使用網(wǎng)頁開發(fā)語言與程序開發(fā)語言開發(fā),開發(fā)成本和難度比NativeApp小很多,而總體特性更接近NativeApp,兼具NativeApp的所有優(yōu)勢,也兼具WebApp使用HTML5跨平臺(tái)開發(fā)低成本的優(yōu)勢。3.5.1移動(dòng)端應(yīng)用程序的類型3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)移動(dòng)設(shè)備網(wǎng)頁(WebApp)的最大優(yōu)勢就是可以在網(wǎng)頁上直接調(diào)試和修改,隨著HTML5應(yīng)用的不斷深入,電子商務(wù)網(wǎng)站用它來提供移動(dòng)端服務(wù)非常實(shí)用。與普通的PC端網(wǎng)頁相比,移動(dòng)設(shè)備網(wǎng)頁具有以下特點(diǎn)。1.兼顧小屏幕移動(dòng)設(shè)備屏幕相對較小,所以網(wǎng)頁內(nèi)容、布局、文字大小等都更為精簡。2.觸屏交互與PC端網(wǎng)頁采用鼠標(biāo)點(diǎn)擊不同,移動(dòng)設(shè)備采用手指觸碰的方式,會(huì)更多地考慮手指交互習(xí)慣、人體工學(xué)等。觸屏的操作交互更為簡單,網(wǎng)頁元素如按鈕、鏈接等要大小適中,適合手指觸碰。3.內(nèi)容精簡移動(dòng)設(shè)備訪問網(wǎng)頁需要考慮流量消耗,盡可能減少網(wǎng)頁數(shù)量,控制網(wǎng)頁大小使之能夠快速加載。3.5.2移動(dòng)設(shè)備網(wǎng)頁的特點(diǎn)3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)4.突出主題從用戶體驗(yàn)上來說,使用移動(dòng)設(shè)備聯(lián)網(wǎng)的用戶更多的是花費(fèi)零碎時(shí)間上網(wǎng)的人,難以訪問很多頁面,所以移動(dòng)網(wǎng)頁設(shè)計(jì)時(shí)無須兼顧所有的使用場景,只需著眼于主要使用場景,直接放置核心信息。

5.兼容性好移動(dòng)設(shè)備網(wǎng)頁的兼容性好,基本上只需要針對WebKit內(nèi)核的瀏覽器做兼容設(shè)計(jì),而且這類瀏覽器對HTML5和CSS3的兼容性比較好,可充分發(fā)揮HTML5和CSS3的優(yōu)勢。

3.5.2移動(dòng)設(shè)備網(wǎng)頁的特點(diǎn)3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)6.響應(yīng)式Web設(shè)計(jì)各種移動(dòng)設(shè)備尺寸不同,為獲得良好的視覺效果,移動(dòng)設(shè)備網(wǎng)頁多采用響應(yīng)式Web設(shè)計(jì),這是一種讓用戶通過各種尺寸的設(shè)備瀏覽網(wǎng)站獲得良好的視覺效果的方法。7.受開發(fā)技術(shù)限制在PC上能夠使用的一些技術(shù),移動(dòng)設(shè)備可能就無法支持。例如,某些圖片格式在移動(dòng)設(shè)備上支持不充分,應(yīng)盡量使用PNG、JPG等格式的圖片。由于HTML5的技術(shù)特性,其無法調(diào)用系統(tǒng)級別的權(quán)限,如系統(tǒng)級別的彈窗、系統(tǒng)級別的通知、地理信息、通訊錄、語音等。3.5.2移動(dòng)設(shè)備網(wǎng)頁的特點(diǎn)3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)移動(dòng)設(shè)備網(wǎng)頁開發(fā)可以自己編寫大量代碼,但這樣做效率較低。由于有WebKit和HTML5的支持,更多的開發(fā)人員在開發(fā)時(shí)會(huì)選擇相關(guān)開發(fā)框架,這樣做效率較高。主流的移動(dòng)設(shè)備網(wǎng)頁開發(fā)框架列舉如下:(1)jQueryMobilejQuery是一個(gè)快速、簡潔的JavaScript框架。它封裝了JavaScript常用的功能代碼,提供一種簡便的JavaScript設(shè)計(jì)模式,優(yōu)化HTML文件操作、事件處理、動(dòng)畫設(shè)計(jì)和AJAX交互。(2)BootstrapBootstrap是基于HTML、CSS和JavaScript的框架,可以用來編寫靈活、穩(wěn)定、高質(zhì)量的HTML和CSS代碼。Bootstrap有力地支持響應(yīng)式Web設(shè)計(jì),能夠同時(shí)兼顧PC端和移動(dòng)端的網(wǎng)頁設(shè)計(jì)。

3.5.3移動(dòng)設(shè)備網(wǎng)頁開發(fā)技術(shù)1.移動(dòng)設(shè)備網(wǎng)頁開發(fā)框架3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(3)SenchaTouch它是第一個(gè)基于HTML5的移動(dòng)Web開發(fā)框架。SenchaTouch提供絢麗的用戶界面組件和豐富的數(shù)據(jù)管理,全部基于最新的HTML5和CSS3的Web標(biāo)準(zhǔn),全面兼容Android和iOS設(shè)備,用它開發(fā)的WebApp看起來像NativeApp。(4)PhoneGap這是一個(gè)基于HTML、CSS和JavaScript創(chuàng)建跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。用它開發(fā)的網(wǎng)頁有著接近NativeApp的性能,可以調(diào)用iOS、Android等智能手機(jī)的核心功能(包括地理定位、聯(lián)系人、聲音和振動(dòng)等),此外PhoneGap擁有豐富的插件可供開發(fā)人員調(diào)用。業(yè)界很多主流的移動(dòng)開發(fā)框架均源于PhoneGap。

3.5.3移動(dòng)設(shè)備網(wǎng)頁開發(fā)技術(shù)1.移動(dòng)設(shè)備網(wǎng)頁開發(fā)框架3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(5)React這是一個(gè)用于構(gòu)建用戶界面的JavaScript庫。它從最早的UI引擎演變成一整套適用于前后端的WebApp解決方案。React主要用于構(gòu)建UI,可以在React里傳遞多種類型的參數(shù),如聲明代碼,渲染出UI,可以是靜態(tài)的HTMLDOM元素,也可以傳遞動(dòng)態(tài)變量,甚至是可交互的應(yīng)用組件。由于React具有較高的性能,代碼邏輯非常簡單,越來越多的人已開始關(guān)注和使用它。

3.5.3移動(dòng)設(shè)備網(wǎng)頁開發(fā)技術(shù)1.移動(dòng)設(shè)備網(wǎng)頁開發(fā)框架3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)使用任何文本編輯器都可以編寫移動(dòng)設(shè)備網(wǎng)頁,不過使用集成開發(fā)環(huán)境的效率要高得多。幾種常見的移動(dòng)設(shè)備網(wǎng)頁集成開發(fā)環(huán)境:(1)DreamweaverDreamweaver是一套擁有可視化編輯界面,用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁設(shè)計(jì)軟件。它支持jQueryMobile與PhoneGap等移動(dòng)開發(fā)框架。(2)AdobeEdge這是一個(gè)用HTML5、CSS、JavaScript開發(fā)動(dòng)態(tài)互動(dòng)內(nèi)容的設(shè)計(jì)工具。它的一個(gè)重要功能是Web工具包界面,用于確保網(wǎng)頁在不同瀏覽器中架構(gòu)的一致性。通過AdobeEdge設(shè)計(jì)的內(nèi)容可以兼容iOS和Android設(shè)備,也可以運(yùn)行在Firefox、Chrome和Safari等主流瀏覽器上。3.5.3移動(dòng)設(shè)備網(wǎng)頁開發(fā)技術(shù)2.移動(dòng)設(shè)備網(wǎng)頁開發(fā)工具3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)(3)WebStormWebStorm是JetBrains公司推出的一款JavaScript開發(fā)工具,深受國內(nèi)開發(fā)人員歡迎,被認(rèn)為是最強(qiáng)大的HTML5編輯器之一和最智能的JavaScriptIDE之一。IntelliJIDEA旗艦版本還支持HTML、CSS、PHP、MySQL、Python等的開發(fā)。

3.5.3移動(dòng)設(shè)備網(wǎng)頁開發(fā)技術(shù)2.移動(dòng)設(shè)備網(wǎng)頁開發(fā)工具3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)網(wǎng)頁開發(fā)如果要完美適應(yīng)PC和移動(dòng)設(shè)備,有兩種方式:一種是為移動(dòng)設(shè)備單獨(dú)開發(fā)一套頁面,在網(wǎng)站首頁上用腳本判斷訪問頁面的設(shè)備類型然后跳轉(zhuǎn),如在PC首頁加上腳本判斷,當(dāng)用手機(jī)訪問時(shí)則自動(dòng)跳轉(zhuǎn)到移動(dòng)版的首頁;另一種是響應(yīng)式Web設(shè)計(jì),通常采用自適應(yīng)框架對頁面進(jìn)行開發(fā),如Bootstrap,一套頁面可以適應(yīng)各種類型的終端,包括PC和移動(dòng)設(shè)備。

3.5.3移動(dòng)設(shè)備網(wǎng)頁開發(fā)技術(shù)3.兼顧PC和移動(dòng)設(shè)備的網(wǎng)頁開發(fā)3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)Dreamweaver集成了jQueryMobile,可用于快速設(shè)計(jì)適合大多數(shù)移動(dòng)設(shè)備的網(wǎng)頁,同時(shí)可使網(wǎng)頁自適應(yīng)設(shè)備的各種尺寸。使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁有兩種方法:一種是使用jQueryMobile起始頁制作;另一種是使用空白頁制作。

3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)jQueryMobile起始頁包括HTML、CSS、JavaScript和圖像文件,可幫助用戶快速開發(fā)移動(dòng)設(shè)備網(wǎng)頁。具體操作步驟如下:①在Dreamweaver中為移動(dòng)設(shè)備網(wǎng)頁準(zhǔn)備一個(gè)站點(diǎn)或目錄。可以單獨(dú)為移動(dòng)設(shè)備網(wǎng)頁新建一個(gè)站點(diǎn),也可以在現(xiàn)有站點(diǎn)中為移動(dòng)設(shè)備網(wǎng)頁建立一個(gè)新的專用目錄。這里我們在3.2.8小節(jié)的示例站點(diǎn)dongcang根目錄下創(chuàng)建一個(gè)名為“mobile”的目錄。3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁1.使用jQueryMobile起始頁制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)②選擇“文件”→“新建”打開相應(yīng)的界面,如右圖所示,依次選中“示例中的頁”→“Mobile起始頁”→“jQueryMobile(本地)”,另外文檔類型應(yīng)選擇“HTML5”。3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁1.使用jQueryMobile起始頁制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)③單擊“創(chuàng)建”按鈕,在所顯示的網(wǎng)頁中,單擊工具欄上的“實(shí)時(shí)視圖”按鈕,選中“持續(xù)跟蹤鏈接”,如右圖所示。3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁1.使用jQueryMobile起始頁制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)然后單擊工具欄上的“拆分”按鈕,在右側(cè)的實(shí)時(shí)視圖中使用導(dǎo)航組件測試網(wǎng)頁的運(yùn)行情況,如右圖所示。3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁1.使用jQueryMobile起始頁制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)④單擊工具欄上的“多屏幕預(yù)覽”按鈕,使用相應(yīng)菜單中的選項(xiàng)預(yù)覽網(wǎng)頁在各種尺寸設(shè)備上的顯示效果,如右圖

所示。3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁1.使用jQueryMobile起始頁制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)例如,預(yù)覽240×320尺寸手機(jī)的實(shí)時(shí)視圖,如右圖

所示。3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁1.使用jQueryMobile起始頁制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)⑤禁用實(shí)時(shí)視圖(再次單擊工具欄上的“實(shí)時(shí)視圖”按鈕,這是一個(gè)開關(guān)按鈕),然后單擊“設(shè)計(jì)”按鈕切換到設(shè)計(jì)視圖。⑥在“插入”面板(選擇“窗口”→“插入”即可打開)中,默認(rèn)選擇的是“常用”,如右圖所示。3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁1.使用jQueryMobile起始頁制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)網(wǎng)站設(shè)計(jì)與開發(fā)這里選擇“jQueryMobile”,此時(shí)將顯示可添加到Web應(yīng)用程序的jQueryMobile組件,如右圖所示。3.5.4在Dreamweaver中使用jQueryMobile制作移動(dòng)設(shè)備網(wǎng)頁1.使用jQueryMobile起始頁制作移動(dòng)設(shè)備網(wǎng)頁3.5制作移動(dòng)設(shè)備網(wǎng)頁項(xiàng)目三電子商務(wù)

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論