電子商務(wù)網(wǎng)站建設(shè)與維護(hù)項(xiàng)目二建設(shè)簡(jiǎn)單促銷(xiāo)專(zhuān)題網(wǎng)站的知識(shí)

2建設(shè)簡(jiǎn)單促銷(xiāo)專(zhuān)題網(wǎng)站學(xué)習(xí)目標(biāo) 1.熟悉網(wǎng)站建設(shè)的一般流程，學(xué)會(huì)有效溝通，通過(guò)討論等方法了解用戶(hù)的需求。 2.能夠從用戶(hù)需求出發(fā)整理材料，對(duì)部分素材進(jìn)行合理處理。 3.能夠選擇合適的網(wǎng)頁(yè)編輯工具，根據(jù)用戶(hù)需求和素材情況完成網(wǎng)站框架設(shè)計(jì)。 4.能夠運(yùn)用網(wǎng)頁(yè)編輯工具完成多種形式內(nèi)容元素的編輯，并能按照頁(yè)面的邏輯關(guān)系將網(wǎng)頁(yè)合理組織起來(lái)。 5.能夠使用FTP工具管理網(wǎng)站文件，能夠借助服務(wù)器平臺(tái)有效發(fā)布網(wǎng)站，并能保障網(wǎng)站正常運(yùn)行。任務(wù)1創(chuàng)建與管理站點(diǎn)

任務(wù)目標(biāo): 1.能夠運(yùn)用Dreamweaver軟件創(chuàng)建站點(diǎn)、新建主頁(yè)、規(guī)劃站點(diǎn)的目錄文件結(jié)構(gòu)； 2.能對(duì)站點(diǎn)文件實(shí)施管理，并對(duì)素材進(jìn)行相應(yīng)的整理歸類(lèi)。知識(shí)鏈接一、常用軟件MicrosoftFrontPageMacromediaDreamweaver二、認(rèn)識(shí)網(wǎng)頁(yè)編輯工具

1.視圖模式：

設(shè)計(jì)模式、代碼模式、分割模式

2.工作界面：三、設(shè)計(jì)網(wǎng)站的目錄結(jié)構(gòu)

網(wǎng)站目錄是指在創(chuàng)建網(wǎng)站時(shí)建立的目錄，通常網(wǎng)站的目錄結(jié)構(gòu)規(guī)劃需要遵循以下幾個(gè)原則：

1.分別建立相應(yīng)的文件夾 2.文件夾最好用英文來(lái)命名 3.網(wǎng)站資源應(yīng)歸類(lèi)放到相對(duì)應(yīng)的文件夾中 4.對(duì)網(wǎng)站不同類(lèi)型的圖片進(jìn)行分類(lèi)任務(wù)實(shí)施step1新建站點(diǎn)

①啟動(dòng)Dreamweaver，在菜單欄中執(zhí)行“站點(diǎn)”→“新建站點(diǎn)”。

②輸入站點(diǎn)名稱(chēng)、按“打開(kāi)”按鈕、選擇站點(diǎn)所要保存的盤(pán)符與文件夾，按“保存”按鈕。站點(diǎn)設(shè)置對(duì)象“新建站點(diǎn)”效果圖step2管理站點(diǎn)

1.規(guī)劃網(wǎng)站目錄結(jié)構(gòu)

2.多站點(diǎn)管理

①執(zhí)行“站點(diǎn)”→“管理站點(diǎn)”命令，復(fù)制“農(nóng)業(yè)園新春活動(dòng)High翻天專(zhuān)題網(wǎng)站”，將其主目錄設(shè)置為自定義的一個(gè)文件夾。

②單擊“導(dǎo)出”按鈕導(dǎo)出“農(nóng)業(yè)園新春活動(dòng)High翻天專(zhuān)題網(wǎng)站”站點(diǎn)。任務(wù)2確定網(wǎng)頁(yè)布局任務(wù)目標(biāo)： 1.能夠使用Fireworks進(jìn)行網(wǎng)頁(yè)版面的編排，以及網(wǎng)頁(yè)各元素的處理； 2.能夠?qū)σ呀?jīng)設(shè)計(jì)成型的網(wǎng)站版面圖進(jìn)行合理分割，并使用切片工具導(dǎo)出分塊圖片。 3.能夠熟練使用Dreamweaver等工具對(duì)已經(jīng)導(dǎo)出的切片按照頁(yè)面的結(jié)構(gòu)進(jìn)行合理組合。知識(shí)鏈接

一、網(wǎng)頁(yè)布局的基本類(lèi)型

1.“廠”字形

2.“國(guó)”字形

3.“三”字形

4.“川”字形

5.Flash布局任務(wù)實(shí)施

step1確定版面布局方式 “三”字型

step2版面設(shè)計(jì)

1.網(wǎng)頁(yè)頂部設(shè)計(jì) (1)新建文檔，設(shè)置畫(huà)布

啟動(dòng)Fiveworks軟件，選擇“文件”→“新建”選項(xiàng)。

（2）制作頂部logo和banner

①Logo部分的制作：

選擇“文件”→“導(dǎo)入”命令。

文字、字體、字型、字號(hào)、顏色、字間距 ②Banner部分的制作：

選擇“文件”→“導(dǎo)入”命令。

縮放、透明度、魔術(shù)棒

（3）制作導(dǎo)航

提示：導(dǎo)航對(duì)象的對(duì)齊方法有兩種：

一是利用參考線：“視圖”→“標(biāo)尺”，從“標(biāo)尺”處拖出藍(lán)色的參考線；

二是利用“對(duì)齊”控制面板里的“對(duì)齊”和“分配”。參考線對(duì)齊面板

2.網(wǎng)頁(yè)中部設(shè)計(jì)

效果如右圖。

step3切片規(guī)劃和組合

1.設(shè)計(jì)圖切片分割

①去除設(shè)計(jì)圖中純內(nèi)容性的占位符和文字：

②切片分割的程度視具體情況而定。

③切片分割最終效果：

2.導(dǎo)出切片

①選中要導(dǎo)出的切片，右擊打開(kāi)快捷菜單，選擇“導(dǎo)出所選切片”選項(xiàng)，保存并命名。

②逐一導(dǎo)出各切片，集中保存在網(wǎng)站的“images”文件夾中，文件命名按順序編號(hào)。導(dǎo)出切片文件操作切片命名

3.組合切片

（1）設(shè)置站點(diǎn)與頁(yè)面

①新建站點(diǎn)和主頁(yè)，規(guī)劃好文件夾。

將切片文件復(fù)制到“images”文件夾中，“index.html”復(fù)制到“images”文件夾外面。

②對(duì)頁(yè)面的共同屬性進(jìn)行統(tǒng)一規(guī)劃與設(shè)置。

選擇“修改”→“頁(yè)面屬性”命令外觀（CSS）鏈接（CSS）下劃線樣式標(biāo)題/編碼

（2）設(shè)計(jì)表格

①插入表格布局（千層糕式）

②設(shè)置表格在頁(yè)面居中

單擊標(biāo)簽選擇器“<table>”，選定表格，設(shè)置對(duì)齊方式為“居中對(duì)齊”。

③制作網(wǎng)頁(yè)中部“表格4”（可靈活設(shè)置）

第一列嵌套3行1列子表格第二列嵌套2行1列子表格 （3）導(dǎo)入切片

①光標(biāo)定位在網(wǎng)頁(yè)頭表格的第一個(gè)單元格上，選擇“插入”→“圖像”命令。

②導(dǎo)入多張圖片

打開(kāi)“文件”浮動(dòng)面板，通過(guò)拖拉的方式將圖片逐一導(dǎo)入相應(yīng)位置。（單擊“請(qǐng)更改輔助功能首選參數(shù)”鏈接，在彈出的對(duì)話框中取消勾選“圖像”所對(duì)應(yīng)的輔助功能屬性）

表格進(jìn)行布局網(wǎng)頁(yè)時(shí)，表格一般原則是從上到下以________方式進(jìn)行獨(dú)立排列；而且還要注意外表格的寬度單位為_(kāi)_______；嵌套的表格寬度單位應(yīng)該為_(kāi)______，數(shù)值一般為_(kāi)_____。任務(wù)3編輯網(wǎng)頁(yè)內(nèi)容任務(wù)目標(biāo)：

1.能夠?qū)⒃O(shè)計(jì)圖轉(zhuǎn)換成網(wǎng)頁(yè)文件； 2.能夠在網(wǎng)頁(yè)里編輯文字、圖片等內(nèi)容。知識(shí)鏈接一、編輯網(wǎng)頁(yè)內(nèi)容的注意事項(xiàng)

站在瀏覽者的角度：

①獲得認(rèn)同及信任。

②內(nèi)容越短越好。

③內(nèi)容要強(qiáng)調(diào)主要的重點(diǎn)。

④內(nèi)容要圖文并茂。

站在引擎的角度：

①確定網(wǎng)頁(yè)的關(guān)鍵詞及頻繁程度。

②每個(gè)網(wǎng)頁(yè)的關(guān)鍵詞最好不超出3個(gè)，讓內(nèi)容可以圍繞關(guān)鍵詞展開(kāi)。

③讓關(guān)鍵詞出現(xiàn)在標(biāo)題中。

④突出關(guān)鍵詞。

二、簡(jiǎn)單認(rèn)識(shí)HTML語(yǔ)言

1.HTML介紹和語(yǔ)法

HTML是HyperTextMark－upLanguage的簡(jiǎn)稱(chēng)，中文名稱(chēng)是超文本標(biāo)記語(yǔ)言。

語(yǔ)法格式：

<HTML標(biāo)簽名屬性名=“對(duì)應(yīng)的屬性值”屬性名2=“對(duì)應(yīng)的屬性值”>直接顯示在網(wǎng)頁(yè)上的文字等</HTML標(biāo)簽名>HTML語(yǔ)法解析

2.學(xué)習(xí)HTML語(yǔ)言的意義 （1）便于靈活修改網(wǎng)頁(yè)代碼； （2）有利于網(wǎng)頁(yè)的優(yōu)化； （3）可以對(duì)其他網(wǎng)站的源代碼進(jìn)行適當(dāng)修改，做出所想要的效果。 （4）可以檢查網(wǎng)站是否中了網(wǎng)頁(yè)木馬，便于預(yù)防。任務(wù)實(shí)施step1將切片文件設(shè)置為背景

首先選中相應(yīng)切片，然后再選中切片所在的單元格，設(shè)置與其“屬性”面板中相同的寬和高；1.將切片文件設(shè)置為背景

之后切換到“拆分”視圖模式，在"</td>”標(biāo)簽中加入“background”屬性，通過(guò)“瀏覽”選中設(shè)置背景圖片為此切片文件，再將原切片圖片去除。

2.輸入前景文字

step2用CCS樣式表進(jìn)行文字編排

①對(duì)全局文本進(jìn)行CCS設(shè)計(jì)：宋體、“12px”、“#333333”。

②新聞列表進(jìn)行編排：

先選中表格，設(shè)置行高為“20”。練一練

step3動(dòng)畫(huà)導(dǎo)入網(wǎng)頁(yè)

單擊“插入”→“媒體”→“SWF”命令。

step4文字滾動(dòng)效果制作

1.簡(jiǎn)單的滾動(dòng)字幕制作

單擊“插入”→“Web組件”命令。插入字幕組件設(shè)置字幕屬性

2.通過(guò)代碼進(jìn)行滾動(dòng)字幕制作

<marqueescrollamount=“2”height=“17”width=“643”>我們公司的產(chǎn)品品種眾多,規(guī)格齊全。本公司的產(chǎn)品主要出口北美洲，南美洲...</marquee>

3.含HTML代碼的滾動(dòng)字幕內(nèi)容

①準(zhǔn)備四張圖片，名字改為“1.jpg”“2.jpg”“3.jpg”“4.jpg”。

②書(shū)寫(xiě)代碼: <marqueescrollamount="2"height="17"width="643“><imgsrc="1.jpg”><imgsrc="2.jpg”><imgsrc="3.jpg"><imgsrc="4.jpg"></marquee>任務(wù)4超鏈接與子頁(yè)制作

任務(wù)目標(biāo)： 1.能夠使用超級(jí)鏈接技術(shù)，實(shí)現(xiàn)網(wǎng)頁(yè)之間的鏈接，建立頁(yè)面之間的關(guān)聯(lián)； 2.能夠使用網(wǎng)頁(yè)編輯工具，制作出與主頁(yè)風(fēng)格一致、圖片并茂的內(nèi)容網(wǎng)頁(yè)。知識(shí)鏈接

一、認(rèn)識(shí)超鏈接

超級(jí)鏈接簡(jiǎn)稱(chēng)超鏈接，是指從一個(gè)網(wǎng)頁(yè)到另一個(gè)網(wǎng)頁(yè)對(duì)象的鏈接關(guān)系。

按路徑的不同，可以分為：內(nèi)部鏈接、錨記鏈接、外部鏈接。

按照使用對(duì)象的不同，可分為：文本鏈接、圖像鏈接、E-mail鏈接、錨記鏈接、空鏈接、腳本鏈接和熱點(diǎn)鏈接等。

二、注意事項(xiàng)：

1.在當(dāng)前頁(yè)所對(duì)應(yīng)的導(dǎo)航項(xiàng)鏈接應(yīng)設(shè)為無(wú)效狀態(tài)； 2.不要在一篇文章里提供太多的超鏈接； 3.超鏈接的字符串長(zhǎng)短要適中； 4.超鏈接敘述性文字的顏色呈現(xiàn)多樣； 5.在長(zhǎng)篇文章里提供必要的頁(yè)碼鏈接； 6.在有段落標(biāo)題的較長(zhǎng)文字頁(yè)面內(nèi)提供目錄表、標(biāo)題和頁(yè)內(nèi)超鏈接； 7.在尚未完成的頁(yè)面中暫時(shí)不提供超鏈接； 8.測(cè)試所有的超鏈接與導(dǎo)航按鈕的真實(shí)可行性；

任務(wù)實(shí)施

step1制作超鏈接 1.選定“南雁開(kāi)心農(nóng)場(chǎng)”圖片，在“屬性”面板中按“鏈接”選項(xiàng)右側(cè)的“文件瀏覽”按鈕； 2.通過(guò)“選擇文件”對(duì)話框，選擇所要鏈接的網(wǎng)頁(yè)“nykx”； 3.選擇鏈接的“目標(biāo)”： “_blank” “_new” “_self” “_parent” “_top” 4.圖片鏈接設(shè)置之后的效果(圖片周?chē)鷷?huì)出現(xiàn)藍(lán)色的邊框)。 5.去除圖片鏈接的藍(lán)色邊框線簡(jiǎn)單的方法：設(shè)置“屬性”→“邊框”為“0”。注意：去除所有圖像鏈接的藍(lán)色邊框方法為：

1.單擊CSS樣式面板的“新建CSS規(guī)則”，設(shè)置選擇器類(lèi)型為“標(biāo)簽”，選擇器名稱(chēng)為“img”，單擊“確定”按鈕。 2.在img的CSS規(guī)則定義中“邊框”選項(xiàng)卡的style下Top設(shè)置為“none”。

step2編輯子頁(yè)

1.插入表單和表格

單擊“插入”→“表單”→“表單”選項(xiàng)。

2.編輯表單對(duì)象

（1）文本域 （2）文本區(qū)域 （3）列表/菜單 （4）單選框和復(fù)選框 （5）按鈕 （6）表單 1.超級(jí)鏈接按路徑劃分：______、______、______。 2.表單對(duì)象有______

______、______、______、______、______、______。 3.表單的提交方式有______、______，其中前者是通過(guò)URL請(qǐng)求來(lái)傳遞用戶(hù)的輸入數(shù)據(jù)，后者是通過(guò)服務(wù)器端response方法來(lái)獲取數(shù)據(jù)。 4.超鏈接的目標(biāo)方式包括______（瀏覽器總在一個(gè)新找開(kāi)的、未命名的窗口上顯示鏈接頁(yè)面)、______(在當(dāng)前窗口顯示鏈接頁(yè)面）、______（使鏈接文檔在父級(jí)窗口顯示）、______（應(yīng)用在框架中，清除框架來(lái)顯示目標(biāo)文檔）。

練一練：任務(wù)5發(fā)布與運(yùn)行網(wǎng)站

任務(wù)目標(biāo)： 1.能夠通過(guò)常用FTP客戶(hù)端工具上傳網(wǎng)站文件，實(shí)現(xiàn)網(wǎng)站對(duì)外發(fā)布; 2.能夠進(jìn)行網(wǎng)站文件的維護(hù)管理。

知識(shí)鏈接

一、認(rèn)識(shí)FTP發(fā)布工具

FTP工具是指用于控制文件的雙向傳輸。它包括上傳和下載，使用下載工具可以自由自在地存取和管理服務(wù)器的資源，通過(guò)拖放即可完成文件或文件夾的上傳。

常用的FTP工具有：

1.FlashFXP 2.CuteFTP 3.LeapFTP 4.TurboFTP

二、常見(jiàn)的FTP操作方式

1.命令方式

通過(guò)

，通過(guò)ls命令顯示出網(wǎng)站文件清單。

2.Web方式

在瀏覽器中輸入，在“登錄身份”對(duì)話框中輸入自己的用戶(hù)名與密碼。認(rèn)證通過(guò)后，即可進(jìn)入F