10汽車電子商務(wù)網(wǎng)站設(shè)計與建設(shè)_第1頁
10汽車電子商務(wù)網(wǎng)站設(shè)計與建設(shè)_第2頁
10汽車電子商務(wù)網(wǎng)站設(shè)計與建設(shè)_第3頁
10汽車電子商務(wù)網(wǎng)站設(shè)計與建設(shè)_第4頁
10汽車電子商務(wù)網(wǎng)站設(shè)計與建設(shè)_第5頁
已閱讀5頁，還剩118頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

54685z10第一節(jié)網(wǎng)頁設(shè)計基礎(chǔ)

第二節(jié)汽車網(wǎng)站建設(shè)綜合項目總體說明

第三節(jié)汽車電子商務(wù)網(wǎng)頁設(shè)計與實現(xiàn)

第四節(jié)汽車電子商務(wù)網(wǎng)站的建設(shè)與發(fā)布

本章小結(jié)同步測試同步訓練54685z10

○○○第十章汽車電子商務(wù)網(wǎng)站設(shè)計與建設(shè)54685z10知識目標54685z10能力目標54685z10重點與難點54685z10第一節(jié)網(wǎng)頁設(shè)計基礎(chǔ)

54685z101.網(wǎng)頁(web)解析,從而向瀏覽者呈現(xiàn)網(wǎng)頁的各種內(nèi)容。

網(wǎng)頁是一個純文本文件,通過HTML、CSS等腳本語言對頁面元素進行標

識、然后由瀏覽器自動生成的頁面。構(gòu)建網(wǎng)頁的基本元素包括文本、

圖像和超鏈接,其他元素包括聲音、動畫、視頻、表格、導航欄、表單

等。54685z102.網(wǎng)站(Website)網(wǎng)站是指在互聯(lián)網(wǎng)上,根據(jù)一定的規(guī)則,使用HTML等工具制作的用于展

示特定內(nèi)容的相關(guān)網(wǎng)頁集合,其建立在網(wǎng)絡(luò)基礎(chǔ)之上,以計算機、網(wǎng)絡(luò)和

通信技術(shù)為依托,通過一臺或多臺計算機向訪問者提供服務(wù)。平時所說

的訪問某個站點,實際上訪問的是提供這種服務(wù)的一臺或多臺計算機。3.Web服務(wù)器解析HTTP協(xié)議。通俗地講,Web服務(wù)器傳送頁面使瀏覽器可以瀏覽。確

切地說,Web服務(wù)器專門處理HTTP請求。在Internet上所瀏覽的各種網(wǎng)

站,歸根到底其實就是用瀏覽器打開存儲于Web服務(wù)器上的網(wǎng)頁文檔及54685z10其他相關(guān)資源。利用Dreamweaver網(wǎng)頁設(shè)計軟件,可以在本地計算機上創(chuàng)建出站點的框

架,從整體上對站點全局進行把握。在站點設(shè)計完畢,可以利用各種上傳

工具,例如FTP程序,將本地站點上傳到Web服務(wù)器上以形成Web站點,供

廣大用戶瀏覽。(一)HTML簡介一般在使用Internet上網(wǎng)時,透過瀏覽器所看到的網(wǎng)站,是由HTML

語言所構(gòu)成。HTML(超文件標記語言)是一種建立網(wǎng)頁文件的語54685z10言,透過標記式的指令(Tag),將影像、聲音、圖片、文字等顯示出

來。其目的在于運用標記(Tag)使文件達到預(yù)期的顯示效果。HTML是WWW的描述語言,不是程序設(shè)計語言,其只是標示語言,

基本上只要明白了各種標記的用法便算學懂了HTML。HTML的

格式非常簡單,只是由文字及標記組合而成,在編輯方面,任何文字

編輯器都可以,只要能將文件另存成ASCII純文字格式即可,當然

以專業(yè)的網(wǎng)頁編輯軟件為佳,比如主流的Dreamweaver或FrontPage

。HTML語言是網(wǎng)頁的基礎(chǔ),無論是靜態(tài)、動態(tài)網(wǎng)頁還是各種復(fù)雜

形式的網(wǎng)頁包括XML、XHTML等,形成頁面后都可以表達成54685z10HTML,或者都是由HTML演變進化而來。因此,掌握好HTML就是

踏入了網(wǎng)頁設(shè)計的門檻,意義非常重要。1.HTML標記的語法①任何標記皆由“<”“>”括住,如<P>。②標記名與小于號之間不能留有空白字符。③某些標記要加上參數(shù),如<fontsize="+2">Hello</font>,參數(shù)只可加于起

始標記中。④在起始標記之標記名前加上符號“/”便是其終結(jié)標記,如</font>54685z10⑤標記字母大小寫皆可。⑥標記按形態(tài)分為圍堵標記與空標記。圍堵標記以起始標記及終結(jié)標

記將文字圍住,令其達到預(yù)期顯示效果?？諛擞浭侵笜擞泦为毘霈F(xiàn),只有

起始標記沒有終結(jié)標記。2.HTML文件基本架構(gòu)<HTML>文件開始(二)HTML網(wǎng)頁常用命令HTML網(wǎng)頁常用命令格式和用途如表10-1所示。54685z10表10-1HTML常用標記54685z10表10-1HTML常用標記54685z10表10-1HTML常用標記54685z10表10-1HTML常用標記Web頁的制作不只是用一個工具、一個程序就能完成的,由

于網(wǎng)頁內(nèi)容的多樣化,需要對不同形式的對象進行編輯就需

要用到不同的應(yīng)用工具。網(wǎng)頁又分為靜態(tài)和動態(tài)兩種。初

期的網(wǎng)頁都是靜態(tài)的,一般只有文字,圖形,圖像等,用戶只能

被動地接收這些信息。因此,這一類WEB的服務(wù)僅限于提供

大量的信息。而隨著網(wǎng)絡(luò)的發(fā)展,人們希望WEB能反饋用戶54685z10所提交的信息要求,更有效率而準確地提供相關(guān)內(nèi)容,使得用

戶與站點之間具有交互性。所以動態(tài)的網(wǎng)頁利用HTML的表

單收集用戶信息,并把信息要求發(fā)送到服務(wù)器端,服務(wù)器根據(jù)

具體的需要生成內(nèi)容符合用戶要求的內(nèi)容,并按照動態(tài)頁面

指定的格式回送到客戶端瀏覽器。動態(tài)頁面數(shù)據(jù)處理的要

求比靜態(tài)頁面強得多,所以僅用HTML是不能滿足這種需求

的。所以還必須要有編寫動態(tài)網(wǎng)頁的語言,例如CGI、ASP、

PHP加上數(shù)據(jù)庫等,這屬于網(wǎng)頁的高級應(yīng)用。本書首先著重54685z10于開發(fā)靜態(tài)網(wǎng)頁的能力。目前常用的網(wǎng)頁設(shè)計工具有InterDev,Dreamweaver等。其中

由Macromedia公司開發(fā)出來的Dreamweaver以其強大的操作

功能和方便的操作,贏得了網(wǎng)頁制作專業(yè)人士的青睞,成為專

業(yè)制作網(wǎng)頁的首選工具。Dreamweaver是Macromedia公司開

發(fā)的集網(wǎng)頁制作和管理網(wǎng)站于一身的“所見即所得”網(wǎng)頁

編輯器,利用其可以輕而易舉地制作出跨越平臺限制和跨越

瀏覽器限制的充滿動感的網(wǎng)頁。Dreamweaver、Flash以及之54685z10后推出的針對專業(yè)網(wǎng)頁圖像設(shè)計的Fireworks,三者被稱為

“網(wǎng)頁三劍客”,幾乎是每個網(wǎng)頁設(shè)計者必須學習使用的工

具套件。DreamweaverCS3工作界面如圖10-1所示。大致把其界面直觀地劃分為8個部分(除菜單欄):文檔窗口、

插入工具欄、文檔工具欄、狀態(tài)欄、屬性面板、結(jié)果面板

、面板組、文件面板,對這8個部分具體的功能掌握后,對于

Dreamweaver的基本使用方法便可以很快掌握。54685z10圖10-1DreamweaverCS3界面54685z10第二節(jié)汽車網(wǎng)站建設(shè)綜合項目總體說明

本章采用完成一個綜合網(wǎng)站項目的任務(wù)來全面

說明網(wǎng)站建設(shè)和網(wǎng)頁設(shè)計的整體流程和詳細步

驟,并在各節(jié)的流程中貫穿實現(xiàn)。某汽車配件企業(yè)需建立電子商務(wù)B2C網(wǎng)站。其主要功能是配

件宣傳和信息發(fā)布,并實現(xiàn)網(wǎng)上配件交易,重點是交易功能。54685z10網(wǎng)站中涉及公司的汽車配件產(chǎn)品宣傳與購買、汽車品牌列

表和搜索功能等主題內(nèi)容。請按照公司的要求建立一個網(wǎng)站,實現(xiàn)公司形象的展示。1)利用Dreamweaver軟件設(shè)計一個汽車電子商務(wù)網(wǎng)站主頁。2)按公司網(wǎng)站的功能特點對汽車主頁進行美化(暫不實現(xiàn)交易功能)。3)在本地IIS中發(fā)布,并申請域名,在Internet中發(fā)布虛擬空間。54685z101)能正確在Dreamweaver軟件中創(chuàng)建站點文件。2)能通過網(wǎng)站格局的分析和需求規(guī)劃網(wǎng)站的布局和內(nèi)容。3)能通過Dreamweaver的可視化界面編輯簡易靜態(tài)頁面,并細化美化。4)能在局域網(wǎng)和網(wǎng)上發(fā)布網(wǎng)站.并適時進行網(wǎng)頁的更新維護。54685z10綜合項目——汽車配件電子商務(wù)網(wǎng)站建設(shè)步驟如圖10-2所示

。54685z10圖10-2汽車配件電子商務(wù)網(wǎng)站建設(shè)步驟54685z10汽車配件B2C網(wǎng)站主頁最終效果如圖10-3所示。注意項目最

終不只是完成一個網(wǎng)站的設(shè)計,還要完成汽車配件B2C電子

商務(wù)網(wǎng)站的本地建站(IIS本地發(fā)布如圖10-4所示),這樣在IE瀏

覽器地址欄里輸入圖10-3中的本地網(wǎng)址,能進入網(wǎng)站首頁。54685z10圖10-3汽車配件B2C網(wǎng)站主頁最終效果圖54685z10圖10-4汽車配件B2C網(wǎng)站IIS本地發(fā)布54685z10完成這個貫穿整章的綜合項目,將熟練掌握靜態(tài)網(wǎng)頁設(shè)

計和網(wǎng)站建設(shè)的技能,達到本章學習目標。以下為汽車配件

B2C網(wǎng)站綜合項目的詳細實現(xiàn)。第三節(jié)汽車電子商務(wù)網(wǎng)頁設(shè)計與實現(xiàn)

54685z10(一)實施流程汽車配件企業(yè)需建立電子商務(wù)B2C網(wǎng)站。其主要功能是配件宣傳

和信息發(fā)布,并實現(xiàn)網(wǎng)上配件交易。網(wǎng)站中涉及公司的汽車配件

產(chǎn)品宣傳與購買、汽車品牌列表和搜索功能等主題內(nèi)容。那么現(xiàn)

在如何根據(jù)企業(yè)要求進行網(wǎng)站站點的建立呢?項目工作可按照圖1

0-5的流程進行。54685z10圖10-5使用Dreamweaver軟件建立站點實施流程(二)網(wǎng)站總體規(guī)劃網(wǎng)站的總體規(guī)劃與設(shè)計是網(wǎng)站建設(shè)的第一步。在這一步中需要對

網(wǎng)站進行整體的分析,明確網(wǎng)站的建設(shè)目標,確定網(wǎng)站的訪問對象54685z10、網(wǎng)站的風格等各方面的內(nèi)容。這一步是網(wǎng)站建設(shè)成功與否的前

提,因為所有的后續(xù)步驟都必須按照第一步的規(guī)劃與設(shè)計來實施

。網(wǎng)站的總體規(guī)劃包含以下三個方面。1.市場需求分析解公司服務(wù)最快的途徑就是建立配件網(wǎng)站;對于老客戶或較穩(wěn)定的受眾,

需要為其提供更方便快捷的服務(wù),現(xiàn)在網(wǎng)民早已適應(yīng)電子商務(wù)的生活,汽

車配件的特點又特別適合B2C電子商務(wù)模式,因此配件網(wǎng)站必須具備電

子商務(wù)B2C的功能,讓客戶足不出戶就能享受相應(yīng)的產(chǎn)品和服務(wù)。2.網(wǎng)站定位54685z10網(wǎng)站定位就是網(wǎng)站在Internet上扮演什么角色,要向目標群(瀏覽者)傳達

什么樣的核心概念,透過網(wǎng)站發(fā)揮什么樣的作用。因此,網(wǎng)站的定位相當

關(guān)鍵,換句話說,定位是網(wǎng)站建設(shè)的策略,網(wǎng)站架構(gòu)、內(nèi)容、表現(xiàn)等都圍繞

這些定位展開。根據(jù)不同人群訪問心理,本汽配企業(yè)的網(wǎng)站要達到以下

幾點要求。1)網(wǎng)站管理員期望網(wǎng)站的后臺管理功能強大、能夠很方便地分配其欄目

的會員管理權(quán)限。2)網(wǎng)站內(nèi)容維護員期望網(wǎng)站的后臺欄目模塊分布既詳細又細致,這樣維

護起來會很方便快捷。54685z103)信息發(fā)布維護員期望網(wǎng)站有強大的信息發(fā)布管理平臺,能對信息的發(fā)

布、設(shè)置熱點、添加圖片等管理一目了然。4)網(wǎng)站注冊會員期望更多地了解公司的現(xiàn)狀、規(guī)模、服務(wù)、政策、在線

購買等服務(wù),并且可以用“即時通”進行交流。5)網(wǎng)站一般瀏覽者期望能很快地了解公司的背景、服務(wù)、現(xiàn)狀、并能很

快地找到自己感興趣的內(nèi)容并進行咨詢和購買引導服務(wù)。根據(jù)以上分析,某汽車配件公司網(wǎng)站定位如下。1)結(jié)合國內(nèi)外先進技術(shù),樹立某公司互聯(lián)網(wǎng)文化新形象。54685z102)建立全面而又安全的商品發(fā)布、出售平臺。3)建立完善的網(wǎng)上信息溝通平臺。4)形成良性發(fā)展,使網(wǎng)站能夠形成自我增值。5)建立完善的網(wǎng)上服務(wù)系統(tǒng)和用戶管理系統(tǒng)。6)提高公司管理、運營效率。7)整合公司的產(chǎn)品、服務(wù),進行統(tǒng)一風格定位、展示。3.網(wǎng)站風格設(shè)計風格是抽象的,往往無法用一個具體的物體來描述,其為用戶對網(wǎng)站整體54685z10形象的一種感覺。這個整體形象包括網(wǎng)站標志、色彩、版面布局、交

互方式、文字編排、圖片、動畫等諸多因素。解站點的結(jié)構(gòu)和瀏覽機制。網(wǎng)站風格的統(tǒng)一體現(xiàn)在兩個方面,色彩在網(wǎng)

頁設(shè)計中統(tǒng)一和網(wǎng)站版式的統(tǒng)一。(1)網(wǎng)頁色彩的搭配網(wǎng)站的色彩搭配通常分為兩個步驟,第一步就是為

整個網(wǎng)站選取一種主色調(diào),然后再為主色調(diào)搭配多種適合的顏色。不同的顏色給人的感受是不一樣的,所以主色調(diào)選取的一個最基本原則

就是保證所選的顏色與網(wǎng)站的主題或者形象相符,能夠通過這種顏色加

深用戶印象。54685z10(2)版面風格布局網(wǎng)站分為很多不同的網(wǎng)頁,比如主頁、欄目首頁、內(nèi)

容網(wǎng)頁等,不同的網(wǎng)頁需要不同的版面布局。網(wǎng)站在版面布局上的另一個特點,就是從網(wǎng)站層次型結(jié)構(gòu)的頂層主頁到

最底層的內(nèi)容網(wǎng)頁,版面布局不斷簡化。如果將這個特點反過來,便得到

了網(wǎng)站在進行版面布局設(shè)計時應(yīng)采用的原則,那就是首先對主頁進行版

面布局,然后在主頁布局的基礎(chǔ)上對欄目首頁進行版面布局,最后對內(nèi)容

網(wǎng)頁進行版面布局。54685z10圖10-6汽配網(wǎng)站網(wǎng)頁主體與內(nèi)頁結(jié)構(gòu)風格(三)確定網(wǎng)站內(nèi)容結(jié)構(gòu)1.畫出網(wǎng)站結(jié)構(gòu)圖54685z10根據(jù)某汽配企業(yè)對網(wǎng)站的要求,網(wǎng)站中必須涉及公司的產(chǎn)品介紹、后臺

管理、B2C交易、訂單管理等主題內(nèi)容。經(jīng)過分析,需要四個內(nèi)頁網(wǎng)頁

來展示這個網(wǎng)站的主題,結(jié)構(gòu)如圖10-7所示。圖10-7網(wǎng)站結(jié)構(gòu)圖54685z10圖10-8汽車配件B2C網(wǎng)站管理頁面最終效果圖54685z10圖10-9汽車配件B2C網(wǎng)站產(chǎn)品介紹頁面最終效果圖54685z10圖10-10網(wǎng)站B2C交易頁面最終效果圖54685z10圖10-11汽車配件B2C網(wǎng)站訂單管理頁面最終效果圖2.確定網(wǎng)站內(nèi)容和功能54685z10一般來說,網(wǎng)站都有幾個主要的欄目,這些欄目是網(wǎng)站的核心內(nèi)容,體現(xiàn)了

網(wǎng)站的核心價值。合理的欄目安排,可以使網(wǎng)站的作用更大,效率更高,使

瀏覽網(wǎng)站的用戶更方便、直接地瀏覽到自己所需要的內(nèi)容。(1)主頁主頁是瀏覽者上網(wǎng)之后所看到網(wǎng)站的第一個內(nèi)容,它是網(wǎng)站的

門面。(2)管理頁面提供汽車配件的各個車系資料,包括一汽大眾、上海通用

等品牌車型和類別,并提供后臺管理編輯功能。(3)產(chǎn)品介紹提供汽車配件的基本情況,包括配件生產(chǎn)日期、零件編號

、產(chǎn)品狀態(tài)、價格等。54685z10(4)B2C交易網(wǎng)站最主要功能是提供B2C交易功能,所以需要完整的購

物流程網(wǎng)頁,包括購物車和支付等。(5)訂單內(nèi)頁當交易完成后,管理員和客戶可登錄查看訂單最新狀態(tài)和

完成情況。備注:本實例只提供靜態(tài)網(wǎng)頁實現(xiàn)功能,動態(tài)的B2C交易功能由于涉及的

專業(yè)網(wǎng)絡(luò)和計算機知識較多,暫不細述。3.規(guī)劃站點的導航一個優(yōu)秀的站點,應(yīng)該具有明確的導航系統(tǒng),避免使用戶在頁面上迷失方54685z10向,找不到自己想要瀏覽的內(nèi)容。在規(guī)劃站點的導航時,應(yīng)做到以下幾個

方面。(1)返回首頁鏈接一般在站點的每個頁面上都有首頁的鏈接,方便用戶

回到開始的地方,尋找新的導航目標。(2)導航標題明確導航標題文字或圖像具有明確的導航指示作用,標題

性文字一般是頁面內(nèi)容的概括,例如零件詳情,用戶一看到該標題文字,就

可知道鏈接的內(nèi)容是零件的詳細資料,如果想對該零件進一步了解,單擊

該鏈接即可。相對于文字導航標題,圖像標題更有其獨到的一面。例如,做一個首頁的54685z10鏈接,設(shè)計者往往是添加一個大家所熟悉的小狐貍圖標,即搜狐網(wǎng)站的標

志。這樣,既可以起到明確的導航作用,同時又比單調(diào)的文本要豐富得多

。此外,可以在圖像上添加替代文本,這些文本可起到輔助的指示作用。(四)Dreamweaver內(nèi)建立本地站點本地站點指的是使用Dreamweaver在本地計算機上構(gòu)建出整個網(wǎng)

站的框架,編輯完整相應(yīng)的文檔,并在本地計算機上完成網(wǎng)站的運

行測試。當測試成功后再將其放置到Interent服務(wù)器上,這時就不

是本地站點了,而是遠程站點。1)在本地硬盤上建立一個用來設(shè)置站點并可保存文件的文件夾,即本地54685z10站點的根目錄。2)選擇DreamweaverCS3的【站點】→【新建站點】菜單。3)彈出站點定義對話框,默認狀態(tài)下,激活的是【高級】標簽,在【分類】

列表中選擇【本地信息】。4)在【站點名稱】文本框中輸入網(wǎng)站名稱,網(wǎng)站名稱顯示在【文件】面

板中的下拉列表中。5)單擊文本框后面的【瀏覽文件】按鈕,在打開的【選擇站點本地根文

件夾】對話框中選擇本地站點文件,單擊【確定】按鈕完成目錄設(shè)置,或

者直接在文本框中輸入站點目錄和文件夾名稱。54685z106)【默認圖像文件夾】用來指定站點默認的圖像存放文件夾的位置,在

此選擇D:\mysite\image為存放網(wǎng)站圖像的文件夾。7)在【鏈接相對于】單選按鈕選項中選擇文檔。8)在【HTTP地址】文本框中輸入完整的URL,以便于檢驗網(wǎng)站的絕對

URL鏈接。9)勾選【緩存】前面的復(fù)選框。10)設(shè)置完畢,單擊【確定】按鈕,返回設(shè)計視圖。11)選擇菜單【窗口】→【文件】命令,打開【文件】面板,剛才建立的

站點名稱及站點中的文件都顯示在文件面板中。54685z10圖10-12【文件】面板中保存的文件12)選擇【文件】→【新建】命令,打開【新建文檔】對話框,創(chuàng)建新的

空白文檔(首頁),單擊【創(chuàng)建】按鈕,選擇【HTML】,創(chuàng)建一空白文檔。建立好主頁后,重復(fù)步驟12,建立多個內(nèi)頁,完成網(wǎng)站文件搭建?！疚募?4685z10面板中保存的文件如圖10-12所示。(一)實施流程汽車配件企業(yè)需建立電子商務(wù)B2C網(wǎng)站。其主要功能是配件宣傳

和信息發(fā)布,并實現(xiàn)網(wǎng)上配件交易。網(wǎng)站中涉及公司的汽車配件

產(chǎn)品宣傳與購買、汽車品牌列表和搜索功能等主題內(nèi)容。那么根

據(jù)項目要求,需對網(wǎng)頁進行詳細規(guī)劃與布局,該項目工作可按照下

面的流程進行,如圖10-13所示。54685z10圖10-13網(wǎng)頁詳細規(guī)劃與布局流程(二)網(wǎng)頁詳細規(guī)劃與設(shè)計1.網(wǎng)頁的布局結(jié)構(gòu)網(wǎng)頁的布局就是將網(wǎng)頁中的文字、圖片、表格、標單、導航條、Flash

等這些網(wǎng)頁的素材以一定的結(jié)構(gòu)方式有效地排列起來。在對網(wǎng)頁進行54685z10布局設(shè)計時,應(yīng)遵循對稱平衡、異常平衡、對比、凝視和空白等原則。圖10-14左右型框架和上下型框架54685z10圖10-15復(fù)合型框架2.網(wǎng)頁的布局方法通常網(wǎng)頁的布局有三種方法:層疊樣式表布局、表格布局和框架布局。54685z10(1)層疊樣式表布局(CSS)層疊樣式表是用于管理出版物外觀(背景、字

體、顏色等)的一種方式,能夠完全精確地定位文本和圖片,可以管理一個

頁面乃至一個龐大的文檔集,其實質(zhì)是使文檔的表現(xiàn)形式與文檔內(nèi)容分

離。①可以將格式和內(nèi)容分離。②擁有前所未有的控制頁面布局的能力,如行距、字間距。相對于傳統(tǒng)

HTML的表現(xiàn)而言,CSS能夠?qū)W(wǎng)頁中的對象的位置排版進行像素級的精

確控制,支持幾乎所有的字體字號樣式,擁有對網(wǎng)頁對象和模型樣式編輯

的能力。54685z10③可以制作體積更小,下載速度更快的網(wǎng)頁。④可以將許多網(wǎng)頁同時更新,比以前更快更容易。⑤瀏覽器的界面更友好。CSS規(guī)則定義8種模式的使用區(qū)域:類型、背景、區(qū)塊、方框、邊框、列

表、定位和擴展,這些類型分別對應(yīng)著CSS語言的不同語法。(2)表格布局其優(yōu)勢在于能對不同的對象加以處理,而又不用擔心不同

對象之間的影響。解。54685z10對于初學者,這是最常用和好用的方法。網(wǎng)頁布局也采用這種方法。(3)框架布局其為一種HTML對象,功能如同表格布局一樣,把不同的對

象放置到不同頁面加以處理。3.單一網(wǎng)頁的布局草圖無論是主頁、欄目首頁還是內(nèi)容網(wǎng)頁,作為網(wǎng)頁本身,在進行單個網(wǎng)頁的

版面布局時所采用的步驟和方法都是一樣的。需要規(guī)劃好每個網(wǎng)頁的

基本結(jié)構(gòu)并畫出草圖(注意不是網(wǎng)站的內(nèi)容結(jié)構(gòu),是單一網(wǎng)頁的布局結(jié)構(gòu))

。54685z10圖10-16汽車配件B2C主頁布局草圖54685z10(三)在Dreamweaver實現(xiàn)網(wǎng)頁布局上面已經(jīng)介紹了網(wǎng)頁布局的三種方法。其中表格是最常用的工具

之一,表格在網(wǎng)頁中不僅可以排列數(shù)據(jù),還可以對頁面中的圖像、

文本、動畫等元素進行準確的定位。在Dreamweaver中可使用兩

種表格布局方法實現(xiàn)對網(wǎng)頁布局:正常插入表格進行布局、使用

表格布局模式布局。這兩種方法都可以實現(xiàn)網(wǎng)頁的任意形狀布局

。由于篇幅所限,這里重點介紹使用表格布局模式的方法。在表格布局模式中,可以在頁面上方便地繪制布局單元格,靈活地

將這些單元格移動到所需的位置,還可以創(chuàng)建固定寬度的布局和54685z10自動伸展為整個瀏覽器窗口寬度的布局,從而減少了煩瑣的參數(shù)

設(shè)置與定義。1)打開DreamweaverCS3中的首頁index.html,執(zhí)行【查看】→【表格模

式】→【布局模式】命令,切換到布局模式,同時彈出【從布局模式開始

】對話框。2)選擇【插入】面板→【布局】工具欄中的【布局表格】按鈕或者【

布局單元格】按鈕,如圖10-17所示,光標變成形狀。54685z10圖10-17【布局】面板3)在需要繪制表格的位置上拖拽鼠標即可創(chuàng)建布局表格或布局單元格

。4)每個表格的頂端都有布局表格標簽,以幫助用戶區(qū)分和選擇。5)繪制布局表格后不能直接插入對象,還需繪制布局單元格。54685z10圖10-18嵌套布局表格視圖54685z10圖10-19布局表格視圖6)可以任意移動布局表格中的布局單元格和嵌套布局表格,但不能超過54685z10其上一層范圍。7)設(shè)置布局參數(shù):執(zhí)行【編輯】→【首選參數(shù)】命令,彈出【首選參數(shù)】

對話框,選擇左側(cè)的【布局模式】選項,如圖10-20所示。圖10-20【首選參數(shù)】對話框54685z108)設(shè)置布局表格屬性:單擊布局表格任意位置,選中布局表格,在【屬性】

面板中設(shè)置布局表格屬性,如圖10-21所示。圖10-21表格【屬性】面板設(shè)置9)設(shè)置布局單元格屬性:單擊布局單元格任意位置,選中布局單元格,在【

屬性】面板中設(shè)置布局單元格屬性,如圖10-22所示。圖10-22單元格【屬性】面板設(shè)置54685z10圖10-23汽車配件B2C首頁表格布局54685z10汽車配件企業(yè)需建立電子商務(wù)B2C網(wǎng)站。其主要功能是配件

宣傳和網(wǎng)上配件交易?，F(xiàn)在已經(jīng)把網(wǎng)頁的框架搭建好了,那

么如何根據(jù)項目要求進行網(wǎng)頁的編輯美化和內(nèi)容填充呢?項

目工作可按照圖10-24中的流程進行。54685z10圖10-24汽車網(wǎng)頁基礎(chǔ)編輯與美化流程(一)網(wǎng)頁素材準備文本與圖像是網(wǎng)頁制作中最重要的兩大元素。文本組成了大部分54685z10網(wǎng)頁的結(jié)構(gòu);而圖像在頁面中的恰當運用,不僅使得網(wǎng)頁更加美觀,

而且令網(wǎng)頁表達信息更加直觀,吸引了瀏覽者。文本、圖像、flash

、視頻等構(gòu)成了網(wǎng)頁素材。當網(wǎng)頁的框架搭建好了,就需要準備

好符合條件的各種網(wǎng)頁素材填充到網(wǎng)頁結(jié)構(gòu)中去。網(wǎng)站素材的選

擇與制作,是網(wǎng)頁設(shè)計的重要一步。網(wǎng)頁制作素材的搜索需要平時的積累。在網(wǎng)站素材的選擇時,應(yīng)

該注意細節(jié)上的處理。一個好的網(wǎng)站,在給人以視覺沖擊感的同

時,會給人以細膩的感覺。在素材準備中要注意以下幾點。1)文本在頁面中都以行或者塊(段落)的形式出現(xiàn),其擺放位置決定著整個54685z10頁面布局的可視性。2)準備按鈕及按鈕圖片。3)對圖片、文字、視頻等資料分別分類整理。4)所有素材的文件名最好是非中文字符,并且要做到看到文件名就知道

是哪張圖片。(二)網(wǎng)頁基礎(chǔ)編輯當素材準備好后,就可將其填充到用表格布局的空白網(wǎng)頁框架圖1

0-24中。空白表格布局中,需要在指定的位置放置合適的文字、圖54685z10片、超鏈接、flash、視頻、表單等素材。其中插入文字和圖片是

基礎(chǔ)性編輯工作。表格是由表格、行或列、單元格等元素組成,每一層級有固定的

控制域,要對指定位置編輯,就要先選擇好表格元素。1.在表格中選擇編輯區(qū)域(1)選擇整個表格選擇整個表格的方法有很多,這里介紹一種。(2)選擇表格的行或列選擇表格的行或列的方法如下。1)選擇單列或行。54685z10圖10-25選擇單列視圖2)選擇多列或行。54685z10圖10-26拖選多列視圖(3)選擇單元格選擇單元格有以下三種方法。①將光標置于單元格中,按Ctrl+A或Ctrl+[組合鍵],或執(zhí)行【編輯】→【

選擇父標簽】命令,可選中單元格。54685z10②將光標置于單元格中,在編輯窗口左下角標簽選擇欄中單擊<tr>標簽

。③按住Ctrl鍵的同時可以選擇多個連續(xù)或者不連續(xù)的單元格。2.在網(wǎng)頁中加入文字文本是網(wǎng)頁中最常見也是運用最廣泛的元素之一,是網(wǎng)頁內(nèi)容的核心部

分。在網(wǎng)頁中加入文本與在Word等文字處理軟件中添加文本一樣方便,

可以直接輸入文本,也可以從其他文檔中復(fù)制文本,還可以插入水平線和

特殊字符等。54685z10圖10-27項目主頁中插入文本3.在網(wǎng)頁中加入圖像54685z10一個頁面光有文本是無法吸引人的,插入一幅圖片可以使頁面更加生動,

圖文并茂。Dreamweaver中常用的圖片格式有g(shù)if、jpg、png。為了保持

良好的制作習慣,在站點文件夾D:\mysite下建立一個名為image的文件夾,

將網(wǎng)頁中需要的圖片都放在這個文件夾下。1)首先,打開需要插入圖像的文檔。2)在【常用】插入欄中單擊【圖像】按鈕,如圖10-28所示,在彈出菜單中

選擇【圖像】選項,彈出【選擇圖像源文件】對話框。54685z10圖10-28【圖像】按鈕3)在【選擇圖像源文件】對話框中,先確認【相對于】是否指定為【文

檔】,然后選中合適的圖像文件,單擊【確定】按鈕即可在網(wǎng)頁中插入圖

像。54685z10圖10-29圖像選擇編輯4)當要編輯已插入的圖像時,單擊圖像的底部、右側(cè)及右下角會出現(xiàn)調(diào)54685z10整手柄,或者單擊【標簽選擇器】中的圖像標記<img>,如圖10-29所示。當文字和圖片都插入后,需要將圖文排列整齊。該列表可以實現(xiàn)多種圖

文對齊方式。圖像屬性面板中的【對齊】下拉列表可以實現(xiàn)多種圖文

對齊方式。圖文混排時,還可以控制圖像和文本的間距。選中圖像,在圖

像屬性面板中的【垂直邊距】和【水平邊距】文本框中輸入數(shù)字,其中

【垂直邊距】沿圖像的頂部和底部添加邊距,【水平邊距】沿圖像左側(cè)

和右側(cè)添加邊距。54685z10圖10-30主頁中插入圖像54685z10(三)網(wǎng)頁細化美化在首頁的空白表格布局中,已經(jīng)在指定的位置放置合適的文字、

圖片,網(wǎng)頁的基本內(nèi)容已完成。接下來的網(wǎng)頁細化、美化主要涉

及超鏈接、多媒體如flash、交互式表單、整體美化等知識點。1.在網(wǎng)頁中加入超鏈接每個網(wǎng)站都由很多頁面組成,如果頁面之間彼此是獨立的,那么網(wǎng)頁就好

比是孤島,這樣的網(wǎng)站是無法運行的。網(wǎng)頁之間必須通過鏈接進行聯(lián)系,

不同網(wǎng)站間也可以通過超鏈接相連接。超鏈接是瀏覽者和服務(wù)器交互54685z10的主要手段。圖10-31屬性面板上設(shè)置文字超鏈接54685z10圖10-32項目主頁中插入超鏈接2.在網(wǎng)頁中加入多媒體54685z10網(wǎng)頁中的多媒體使網(wǎng)頁元素更加生動豐富,網(wǎng)頁常見的多媒體包括Flash

、視頻、音頻等。多媒體在Dreamweaver中的插入方法類似,這里以

Flash為例,將做好的動畫CE.swf文件放入項目首頁頁頭中。1)單擊選擇【插入記錄】→【媒體】→【Flash】項,如圖10-33所示。圖10-33插入【Flash】命令2)在打開的【選擇文件】窗口中選中要插入的Flash文件,單擊【確定】54685z10按鈕。3)在彈出的【對象標簽輔助功能屬性】窗口中,單擊【確定】按鈕。4)如果要編輯修改Flash文件,可以再次選中剛插入的Flash文件,單擊【編

輯】按鈕,如圖10-34所示。圖10-34【編輯】文件按鈕54685z10圖10-35項目主頁中插入flash3.在網(wǎng)頁中加入交互式表單54685z10表單對象是允許用戶輸入數(shù)據(jù)的機制,這樣增加了網(wǎng)頁交互的功能,進一

步美化、細化網(wǎng)頁。表單是由窗體和控件組成的,一個表單一般包含用

戶填寫信息的輸入框和提交按鈕等,這些輸入框和按鈕稱為控件。表單

在html中用<form></form>標記來創(chuàng)建的,在<form></form>標記之間的部

分都屬于表單的內(nèi)容。圖10-36創(chuàng)建表單54685z10圖10-37表單對象工具欄(1)添加文本域文本域是一個重要的表單對象,可以輸入相關(guān)信息,例如

用戶名、密碼等。圖10-38文本框按鈕54685z10圖10-39文本框輔助屬性①將光標放在該單元格中,然后在表單插入工具欄中單擊文本字段按鈕,54685z10如圖10-38所示。②此時將彈出輸入標簽輔助功能屬性對話框,在其中設(shè)定ID為search,標

簽文字為搜索配件,選擇樣式為使用“for”屬性附加標簽標記,如圖10-39

所示。③單擊確定按鈕后,在此單元格中將出現(xiàn)一個單行文本框,文本框左側(cè)出

現(xiàn)標簽文字搜索配件。④保存文件并用快捷鍵F12預(yù)覽網(wǎng)頁,當在標簽文字搜索配件上單擊時,

光標將自動插入單行文本框內(nèi)。⑤選中該文本框,就可以在屬性面板上修改文本框的屬性了。54685z10(2)添加復(fù)選框復(fù)選框按鈕是預(yù)定義選擇對象的表單對象。①將光標放在要添加復(fù)選框的位置,然后單擊表單插入工具欄中的復(fù)選

框按鈕,或者選擇插入紀錄|表單|復(fù)選框命令,此時一個復(fù)選框就會出現(xiàn)在

編輯窗口中。②選中該復(fù)選框,然后在屬性面板中如圖10-40所示修改其屬性。圖10-40復(fù)選框?qū)傩?3)添加表單按鈕表單按鈕用于控制對表單的操作。①將光標放在要插入按鈕的位置上,然后在表單插入工具欄中單擊按鈕,54685z10此時按鈕就會出現(xiàn)在編輯窗口中。②選中該按鈕,按鈕屬性如圖10-41所示。在屬性面板上修改其屬性。圖10-41按鈕屬性54685z10圖10-42項目主頁中插入表單4.整體優(yōu)化美化54685z10在空白的主頁框架中添加好各種網(wǎng)頁元素后,需對整體進行優(yōu)化和美化,

主要是網(wǎng)頁速度的優(yōu)化和結(jié)構(gòu)、顏色、各網(wǎng)頁元素的美化。圖10-43項目主頁中經(jīng)美化后最終效果54685z10第四節(jié)汽車電子商務(wù)網(wǎng)站的建設(shè)與發(fā)布

(一)IIS簡介網(wǎng)頁文件(html類型)和其他文件(圖像文件、flash文件、多媒體文

件等)構(gòu)成了網(wǎng)站的組成文件,網(wǎng)站的發(fā)布就是把網(wǎng)站文件放到可

以讓客戶瀏覽的服務(wù)器中。對于設(shè)計者來說,網(wǎng)頁的建設(shè)發(fā)布首54685z10先要在本地進行。目前常用的網(wǎng)站發(fā)布方式有兩種,一種是UNIX

或Linux平臺+Apache網(wǎng)站服務(wù)器,另一種就是最主流的Windows+

IIS,現(xiàn)在的常用版本是Win2003Server+IIS6.0。對于Windows來說,IIS就是標準的網(wǎng)站服務(wù)器。IIS是一種服務(wù),

是Windows2003Server系列的一個組件。不同于一般的應(yīng)用程序,

其像驅(qū)動程序一樣是操作系統(tǒng)的一部分,具有在系統(tǒng)啟動時被同

時啟動的服務(wù)功能。IIS6.0是用于Windows2003Server系列服務(wù)

器的網(wǎng)絡(luò)和應(yīng)用程序服務(wù)器,其為建立Internet/Intranet的基本組件

之一。54685z10(二)IIS6的安裝需在WindowsServer2003系統(tǒng)進行搭建。將WindowsServer2003

放入光盤。1)打開控制面板-選擇添加刪除程序。2)選擇以下打鉤的地方,確定下一步安裝完成,如圖10-44所示。圖10-44IIS的安裝54685z103)安裝后,控制面板的管理工具會出現(xiàn)IIS管理器。(三)IIS建立網(wǎng)站1)打開控制面板的管理工具,通過IIS管理器進入,如圖10-45所示。圖10-45打開IIS管理器2)右鍵單擊網(wǎng)站,選擇新建網(wǎng)站。54685z103)單擊下一步,會出現(xiàn)網(wǎng)站描述和IP地址,默認不更改進入下一步。4)單擊下一步后,可以看見網(wǎng)站訪問權(quán)限,一般設(shè)置權(quán)限都為讀取,其他不

選擇為了安全。單擊下一步,成功完成網(wǎng)站創(chuàng)建向?qū)?網(wǎng)站建立成功。(四)配置IIS站點1)在默認Web站點上按右鍵,點擊屬性,出現(xiàn)圖10-46的界面,單擊主目錄,

輸入網(wǎng)頁文件所在的文件夾,本例中,網(wǎng)頁文件夾為D:\mysite。54685z10圖10-46網(wǎng)站屬性主目錄選項卡2)繼續(xù)單擊屬性的文檔選項卡(圖10-47),配置本地網(wǎng)站的首頁文件,本例54685z10中,網(wǎng)頁首頁文件為index.html。圖10-47網(wǎng)站屬性文檔選項卡3)測試網(wǎng)站是否開通,有以下兩種方法。①在瀏覽器中輸入默認服務(wù)器名Localhost。54685z10②在瀏覽器中輸入本機的IP地址,如。當測試網(wǎng)頁能通過本機IP在瀏覽器上看到時,IIS的本地建站工作完成,網(wǎng)

頁已在局域網(wǎng)發(fā)布成功。而網(wǎng)站要發(fā)布到互聯(lián)網(wǎng),必須要域名注冊和申

請空間。(一)域名簡介就像現(xiàn)實生活中開公司要起公司名一樣,域名是企業(yè)在網(wǎng)上發(fā)布

信息、業(yè)務(wù)往來的基礎(chǔ),是企業(yè)在互聯(lián)網(wǎng)上的商標。全球任何一

個互聯(lián)網(wǎng)用戶只要知道企業(yè)的域名,就可以立即訪問該企業(yè)網(wǎng)站54685z10。很多域名注冊通過域名注冊代理商進行。(二)域名注冊步驟以阿里巴巴的萬網(wǎng)為例,說明域名注冊的過程。1)首先打開萬網(wǎng)網(wǎng)站/,如圖10-48所示。圖10-48萬網(wǎng)首頁54685z102)注冊域名時先查詢一下,要注冊的域名是否已經(jīng)被注冊,如圖10-49所示

。圖10-49查詢域名是否已經(jīng)被注冊54685z103)如果域名沒有被注冊,就可以直接在線注冊域名,非常方便,選擇要的域

名,單擊加入購物車,然后去購物車結(jié)算,如圖10-50所示。圖10-50域名購物車結(jié)算4)用支付寶結(jié)算購買完域名后,單擊域名列表,可以查詢已經(jīng)注冊的域名,

完成域名注冊,這時再查詢域名是否被注冊,其將顯示已注冊。54685z10(一)虛擬主機簡介虛擬主機是指租用互聯(lián)網(wǎng)服務(wù)提供商(ISP)服務(wù)器的硬盤空間,使

用特殊的Web技術(shù),把一臺計算機主機服務(wù)器分成若干個虛擬的主

機,每一臺虛擬主機都有獨立的域名和IP地址,具有完整的互聯(lián)網(wǎng)

服務(wù)功能如WWW、FTP、Email等。同一臺服務(wù)器上的各個虛擬

主機相對獨立,互不干擾,可由用戶自行管理,對訪問者來講虛擬主54685z10機和一臺獨立的主機服務(wù)器完全一樣。虛擬主機方式由于省去了全部硬件投資和軟件平臺投資,具有成

本較低的優(yōu)點,每年成本一般是數(shù)百元到數(shù)千元。但由于許多用

戶共享服務(wù)器,不能支持大量并發(fā)訪問,另外網(wǎng)站維護也相對麻煩,

這是其不足之處。虛擬主機方式適用于搭建小型網(wǎng)站,如現(xiàn)有的

企業(yè)上網(wǎng)工程就很適合。通常各個ISP提供的虛擬主機服務(wù)條件

不完全一樣,在選擇時要充分比較,認真選擇。(二)申請?zhí)摂M主機步驟54685z101)和域名注冊類似,虛擬主機也是要付費的,價格每年從數(shù)百元到數(shù)千元

不等。圖10-51虛擬主機產(chǎn)品54685z102)選擇服務(wù)期限,確認訂單,單擊立即結(jié)算,如圖10-52所示。圖10-52虛擬主機產(chǎn)品明細3)選擇支付方式,單擊網(wǎng)上銀行支付或線下支付。4)支付成功,結(jié)算業(yè)務(wù),完成購買,即可以進入會員區(qū)左側(cè)萬網(wǎng)主機管理查54685z10看產(chǎn)品信息。當申請好域名和虛擬主機后,需要使用萬網(wǎng)授權(quán)的FTP賬號和密碼上傳在

本地已制作好的網(wǎng)頁和整個網(wǎng)站文件,完成本地網(wǎng)站到互聯(lián)網(wǎng)網(wǎng)站的轉(zhuǎn)

換。當網(wǎng)頁和網(wǎng)站都已完成并在互聯(lián)網(wǎng)上發(fā)布后,網(wǎng)站管理和維

護就是一項長期而繁重的工作。從網(wǎng)站建立開始一直到網(wǎng)

站停止運行,網(wǎng)站管理和維護就需要一直進行。網(wǎng)站建設(shè)得54685z10是否合理往往會對網(wǎng)站的管理和維護產(chǎn)生非常大的影響,網(wǎng)

站建設(shè)得好,那么管理和維護起來會非常簡單,網(wǎng)站建設(shè)得不

好,那管理和維護起來就非常麻煩且浪費時間。所以前面的

網(wǎng)頁設(shè)計和網(wǎng)站規(guī)劃一定要按標準步驟扎實推進。圖10-53網(wǎng)站的管理與維護54685z10網(wǎng)站的管理和維護,其目的只有一個,就是為了保證網(wǎng)站的正

常運行。管理和維護的內(nèi)容主要分為三個方面:安全管理、

性能管理和內(nèi)容管理。圖10-53中的內(nèi)容很好地描述了這三

方面管理之間的關(guān)系。從這個圖中可以看出,安全管理是基

礎(chǔ)也是關(guān)鍵,其貫穿整個網(wǎng)站,從最底層的硬件到最高層的網(wǎng)

頁,每一個環(huán)節(jié)都離不開安全管理。性能管理是內(nèi)容管理的

前提,只有在整個網(wǎng)站系統(tǒng)穩(wěn)定高效的前提下才能更好地對

內(nèi)容進行管理和維護。54685z101.安全管理解決方案層出不窮,但是因為安全問題無處不在,所以不可避免地會不斷

有新的安全問題出現(xiàn),因此安全對所有的網(wǎng)站來說都是一個很大的難題

溫馨提示

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

評論

0/150

提交評論