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

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

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

1.視圖模式：

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

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

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

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

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

②輸入站點名稱、按“打開”按鈕、選擇站點所要保存的盤符與文件夾，按“保存”按鈕。站點設(shè)置對象“新建站點”效果圖step2管理站點

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

2.多站點管理

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

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

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

1.“廠”字形

2.“國”字形

3.“三”字形

4.“川”字形

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

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

step2版面設(shè)計

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

啟動Fiveworks軟件，選擇“文件”→“新建”選項。

（2）制作頂部logo和banner

①Logo部分的制作：

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

文字、字體、字型、字號、顏色、字間距 ②Banner部分的制作：

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

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

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

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

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

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

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

效果如右圖。

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

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

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

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

③切片分割最終效果：

2.導(dǎo)出切片

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

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

3.組合切片

（1）設(shè)置站點與頁面

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

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

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

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

（2）設(shè)計表格

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

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

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

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

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

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

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

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

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

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

站在瀏覽者的角度：

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

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

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

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

站在引擎的角度：

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

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

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

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

二、簡單認(rèn)識HTML語言

1.HTML介紹和語法

HTML是HyperTextMark－upLanguage的簡稱，中文名稱是超文本標(biāo)記語言。

語法格式：

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

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

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

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

2.輸入前景文字

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

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

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

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

step3動畫導(dǎo)入網(wǎng)頁

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

step4文字滾動效果制作

1.簡單的滾動字幕制作

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

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

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

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

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

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

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

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

超級鏈接簡稱超鏈接，是指從一個網(wǎng)頁到另一個網(wǎng)頁對象的鏈接關(guān)系。

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

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

二、注意事項：

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

任務(wù)實施

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

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

step2編輯子頁

1.插入表單和表格

單擊“插入”→“表單”→“表單”選項。

2.編輯表單對象

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

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

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

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

知識鏈接

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

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

常用的FTP工具有：

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

二、常見的FTP操作方式

1.命令方式

通過

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

2.Web方式

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