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

任務目標: 1.能夠運用Dreamweaver軟件創建站點、新建主頁、規劃站點的目錄文件結構； 2.能對站點文件實施管理，并對素材進行相應的整理歸類。知識鏈接一、常用軟件MicrosoftFrontPageMacromediaDreamweaver二、認識網頁編輯工具

1.視圖模式：

設計模式、代碼模式、分割模式

2.工作界面：三、設計網站的目錄結構

網站目錄是指在創建網站時建立的目錄，通常網站的目錄結構規劃需要遵循以下幾個原則：

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

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

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

1.規劃網站目錄結構

2.多站點管理

①執行“站點”→“管理站點”命令，復制“農業園新春活動High翻天專題網站”，將其主目錄設置為自定義的一個文件夾。

②單擊“導出”按鈕導出“農業園新春活動High翻天專題網站”站點。任務2確定網頁布局任務目標： 1.能夠使用Fireworks進行網頁版面的編排，以及網頁各元素的處理； 2.能夠對已經設計成型的網站版面圖進行合理分割，并使用切片工具導出分塊圖片。 3.能夠熟練使用Dreamweaver等工具對已經導出的切片按照頁面的結構進行合理組合。知識鏈接

一、網頁布局的基本類型

1.“廠”字形

2.“國”字形

3.“三”字形

4.“川”字形

5.Flash布局任務實施

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

step2版面設計

1.網頁頂部設計 (1)新建文檔，設置畫布

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

（2）制作頂部logo和banner

①Logo部分的制作：

選擇“文件”→“導入”命令。

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

選擇“文件”→“導入”命令。

縮放、透明度、魔術棒

（3）制作導航

提示：導航對象的對齊方法有兩種：

一是利用參考線：“視圖”→“標尺”，從“標尺”處拖出藍色的參考線；

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

2.網頁中部設計

效果如右圖。

step3切片規劃和組合

1.設計圖切片分割

①去除設計圖中純內容性的占位符和文字：

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

③切片分割最終效果：

2.導出切片

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

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

3.組合切片

（1）設置站點與頁面

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

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

②對頁面的共同屬性進行統一規劃與設置。

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

（2）設計表格

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

②設置表格在頁面居中

單擊標簽選擇器“<table>”，選定表格，設置對齊方式為“居中對齊”。

③制作網頁中部“表格4”（可靈活設置）

第一列嵌套3行1列子表格第二列嵌套2行1列子表格 （3）導入切片

①光標定位在網頁頭表格的第一個單元格上，選擇“插入”→“圖像”命令。

②導入多張圖片

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

表格進行布局網頁時，表格一般原則是從上到下以________方式進行獨立排列；而且還要注意外表格的寬度單位為________；嵌套的表格寬度單位應該為_______，數值一般為______。任務3編輯網頁內容任務目標：

1.能夠將設計圖轉換成網頁文件； 2.能夠在網頁里編輯文字、圖片等內容。知識鏈接一、編輯網頁內容的注意事項

站在瀏覽者的角度：

①獲得認同及信任。

②內容越短越好。

③內容要強調主要的重點。

④內容要圖文并茂。

站在引擎的角度：

①確定網頁的關鍵詞及頻繁程度。

②每個網頁的關鍵詞最好不超出3個，讓內容可以圍繞關鍵詞展開。

③讓關鍵詞出現在標題中。

④突出關鍵詞。

二、簡單認識HTML語言

1.HTML介紹和語法

HTML是HyperTextMark－upLanguage的簡稱，中文名稱是超文本標記語言。

語法格式：

<HTML標簽名屬性名=“對應的屬性值”屬性名2=“對應的屬性值”>直接顯示在網頁上的文字等</HTML標簽名>HTML語法解析

2.學習HTML語言的意義 （1）便于靈活修改網頁代碼； （2）有利于網頁的優化； （3）可以對其他網站的源代碼進行適當修改，做出所想要的效果。 （4）可以檢查網站是否中了網頁木馬，便于預防。任務實施step1將切片文件設置為背景

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

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

2.輸入前景文字

step2用CCS樣式表進行文字編排

①對全局文本進行CCS設計：宋體、“12px”、“#333333”。

②新聞列表進行編排：

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

step3動畫導入網頁

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

step4文字滾動效果制作

1.簡單的滾動字幕制作

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

2.通過代碼進行滾動字幕制作

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

3.含HTML代碼的滾動字幕內容

①準備四張圖片，名字改為“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>任務4超鏈接與子頁制作

任務目標： 1.能夠使用超級鏈接技術，實現網頁之間的鏈接，建立頁面之間的關聯； 2.能夠使用網頁編輯工具，制作出與主頁風格一致、圖片并茂的內容網頁。知識鏈接

一、認識超鏈接

超級鏈接簡稱超鏈接，是指從一個網頁到另一個網頁對象的鏈接關系。

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

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

二、注意事項：

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

任務實施

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

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

step2編輯子頁

1.插入表單和表格

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

2.編輯表單對象

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

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

練一練：任務5發布與運行網站

任務目標： 1.能夠通過常用FTP客戶端工具上傳網站文件，實現網站對外發布; 2.能夠進行網站文件的維護管理。

知識鏈接

一、認識FTP發布工具

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

常用的FTP工具有：

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

二、常見的FTP操作方式

1.命令方式

通過

，通過ls命令顯示出網站文件清單。

2.Web方式

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