實訓13網站建設、發布與維護1.1網站的建設1.2網站的發布1.3網站的維護實訓13網站建設、發布與維護1.1網站的建設

網站建設流程為：策劃網站→準備素材→規劃網站布局→設計網站目錄→規劃網站導航→搭配網站色彩→創建網站→發布網站→維護。

網站建設流程為：策劃網站→準備素材→規劃網站布局→設計網站1.1網站建設圖1網站的建設流程網站建設網站發布網站維護1.1網站建設圖1網站的建設流程網站建設網站發布網站維護網站策劃

1)網站的主題(即題材和標題)2）網站的對象

3）網站的內容策劃網站邏輯圖網站策劃策劃網站邏輯圖網站題材選擇的一般原則

一般來說，個人主頁的選材定位要小，內容要精。對于個人網站，題材最好是自己擅長或者喜歡的內容。不要太濫或者目標太高。

網站題材選擇的一般原則一般來說，個人主頁的選材定位要小，內網站標題設置的一般原則

名稱要正，即要合法、合情及合理名稱要易記，最好使用中文名稱要有特色，最好能體現一定的內涵，同時給瀏覽者更多的視覺沖擊和空間想象力。如“e書時空”網站標題設置的一般原則名稱要正，即要合法、合情及合理

網站資料(素材)收集素材的類型：文字、圖片、動畫及聲音、影像等多媒體文件。素材的獲取途徑：

1）自己編制

2）報刊雜志和光盤等傳統媒體。

3）網絡。網站資料(素材)收集網上資料使用的注意事項：

1）版權問題

2）健全性

內容的完整性與正確性鏈接的正確性與完整性

3）合法性網上資料使用的注意事項：網頁的布局規劃網頁布局是設計在網頁上放些什么內容，以及這些內容放在網頁的什么位置。即網頁結構的設計，其實就是合理地設計頁面中的欄目和板塊，以及將其合理地分布在頁面中。網頁的布局規劃主頁的基本構成內容1）頁面標題2）網站標志3）頁眉4）導航欄5）主內容區6）頁腳對網頁內容的一個概括性描述，作用是引導訪問者清楚地知道所要瀏覽網站的內容，不至于迷失方向。如同一個商品的商標，應集中體現網站的特色、內容及其內在的文化內涵和理念。指頁面上端的部分，該位置吸引注意力較高，故大多網站在此處放置網站的宗旨、宣傳口號、廣告語或設置為廣告席位來出租。導航條的位置常見的有：在頁面的左側、右側、頂部和底部。是頁面設計的主體元素。在首頁中，它一般是二級鏈接內容的標題、或內容提要、或內容的部分摘錄。布局通常是按網站內容的分類進行分欄或劃分板塊。指頁面底端部分，通常用來標注站點所屬的單位的地址、e-mail鏈接以及版權所有或導航條主頁的基本構成內容對網頁內容的一個概括性描述，作用是引導訪問213452134566

網站目錄設計網站目錄設計的作用：便于站點的上傳和維護，以及內容的擴充和移植。規劃規范目錄建立的原則：以最少的層次提供最清晰簡便的訪問結構。目錄結構：

根目錄根文件：通常包括主頁文件以及其他必須的系統文件。每個主要功能（導航欄目）建立相應目錄。網站目錄設計根目錄下的images目錄存放公用圖片，每個目錄下私有圖片存放于各自獨立images目錄下。根據需要分別在根目錄下設置media目錄存放flash、avi等多媒體文件。所有的腳本文件存放在根目錄下的script目錄；所有CSS文件存放在根目錄下的css目錄。

目錄的層次不要太深，一般不要超過去3層，便于維護和管理。不要使用中文目錄盡量使用意義明確的目錄名稱根目錄下的images目錄存放公用圖片，每個目錄下私有圖片存

鏈接設計鏈接設計是指設計頁面之間相互鏈接的拓撲結構。鏈接結構類型：

1）線性結構：指子頁面由父頁面所擴展而來的；打開頁面是由父頁面一級一級向下展開，而退出頁面則由子頁面一級一級往回收縮。鏈接設計（續上）2）非線性結構：樹狀鏈接結構：指一級頁面鏈接指向多個二級頁面。星狀鏈接結構：指每個頁面相互之間都建立有鏈接。樹狀、星狀混合鏈接結構：在實際的網站設計中，通常是使用這種混合結構。此方案是首頁面和一級頁面之間用星狀鏈接結構，一級頁面和以下各級頁面之間用樹狀鏈接結構。（續上）

網站導航的規劃網站導航的設計，其實就是對網站鏈接結構的設計。導航分類：

1）導航欄網站導航的規劃(續上)2）下拉菜單導航：包括隱藏類和不可隱藏類（如折疊式）。可隱藏式下拉菜單(續上)可隱藏式下拉菜單折疊式下拉菜單折疊式下拉菜單（續上）

3）分類列表式導航：通常用于集錦類網站中。（續上）（續上）

4）關鍵詞導航：通常是在文本中將某些關鍵文字設置成超鏈接，常出現在幫助類和產品說明類的網頁中。

5）其他類導航：如使用圖像或動畫來引導一個網站的導航。（續上）

網頁色彩的搭配原則：

1）保持網頁的色彩搭配的協調性

2）保持不同網頁色彩的一致性

3）根據頁面的主題、性質及瀏覽者來規劃整體色彩。網頁色彩的搭配

網站創建

1)網頁的制作

2）網站的優化

3）網站的測試網站創建13.2網站發布域名和空間的申請在網上收索可提供域名和空間的網站，如可提供免費空間申請，根據網站的申請流程進行申請即可13.2網站發布域名和空間的申請申請示例申請示例網站上傳

1）使用Dreamweaver上傳定義遠程站點上傳網站或網頁

2）使用FTP軟件(如CuteFTP)網站上傳13.3.網站的維護

指即時更新網站內容，將網站中的廢舊文件即時清除以及調整網站的功能和服務等活動。13.3.網站的維護指即時更新網站內容，將網站中的廢舊綜合實訓綜合實訓準備工作站點規劃

“水族世界”網站的導航草圖如圖所示，主要分為8個欄目。準備工作站點規劃準備工作素材收集制作網頁的相關素材和資料可通過網絡或其他途徑獲得，網頁中的一些圖像素材，如導航按鈕等可以利用Photoshop或Fireworks等圖形圖像軟件制作。網站logo圖像準備工作素材收集網站logo圖像制作思路分析本案例是綜合案例，因此應從站點創建與管理的操作開始，首先制作“index.html”頁面，并利用該頁面制作“xinwen.html”頁面，依次類推。需注意的是，除首頁外，其他頁面的基本結構大致相同，因此制作時可通過復制已有資源的方法來提高制作效率。制作思路分析本案例是綜合案例，因此應從操作過程創建“水族世界”站點為了更好的管理網站中的各種文件并方便網頁制作，應首先創建站點，并在站點中創建各種文件和文件夾。操作過程創建“水族世界”站點操作過程制作網站首頁（1）插入表格利用表格可以很好地布局頁面，也是初學者最常使用的布局網頁的方法。操作過程制作網站首頁操作過程制作網站首頁（2）輸入文本并插入圖像完成表格和嵌套表格的插入后，即可在各單元格中輸入需要的文本并插入需要的圖像。操作過程制作網站首頁操作過程制作網站首頁（3）創建并設置外部CSS樣式文件由于站點包含多個網頁，且各網頁中相同類型的對象格式應盡量保持一致，因此可通過創建外部CSS樣式文件的方法統一設置網頁中的對象格式。操作過程制作網站首頁操作過程制作網站首頁（4）設置超鏈接和圖像熱點區域接下來將對導航欄上的各圖像創建超鏈接并取消超鏈接格式的圖像邊框效果，然后在“bg.jpg”圖像上使用熱點工具創建圖像熱點區域。操作過程制作網站首頁操作過程制作網站首頁（5）創建并設置APDiv下面將通過繪制APDiv來創建鼠標經過圖像效果。操作過程制作網站首頁操作過程制作“水族新聞”頁面（1）布局頁面下面通過復制網站首頁中的對象并適當進行修改來快速布局“水族新聞”頁面。操作過程制作“水族新聞”頁面操作過程制作“水族新聞”頁面（2）編輯外部CSS樣式為方便快速對網頁中不同對象的格式進行設置，下面鏈接制作首頁時創建的外部CSS樣式文件，并在其中添加適當的規則。操作過程制作“水族新聞”頁面操作過程制作“水族新聞”頁面下面將利用嵌套表格、文本和圖像等對象來豐富“水族新聞”網頁的內。操作過程制作“水族新聞”頁面練習題打開提供的“luntan.html”網頁，利用嵌套表格、文本和圖像等對象設置網頁內容。練習題打開提供的“luntan.html”網頁，利用嵌套表格實訓13網站建設、發布與維護1.1網站的建設1.2網站的發布1.3網站的維護實訓13網站建設、發布與維護1.1網站的建設

網站建設流程為：策劃網站→準備素材→規劃網站布局→設計網站目錄→規劃網站導航→搭配網站色彩→創建網站→發布網站→維護。

網站建設流程為：策劃網站→準備素材→規劃網站布局→設計網站1.1網站建設圖1網站的建設流程網站建設網站發布網站維護1.1網站建設圖1網站的建設流程網站建設網站發布網站維護網站策劃

1)網站的主題(即題材和標題)2）網站的對象

3）網站的內容策劃網站邏輯圖網站策劃策劃網站邏輯圖網站題材選擇的一般原則

一般來說，個人主頁的選材定位要小，內容要精。對于個人網站，題材最好是自己擅長或者喜歡的內容。不要太濫或者目標太高。

網站題材選擇的一般原則一般來說，個人主頁的選材定位要小，內網站標題設置的一般原則

名稱要正，即要合法、合情及合理名稱要易記，最好使用中文名稱要有特色，最好能體現一定的內涵，同時給瀏覽者更多的視覺沖擊和空間想象力。如“e書時空”網站標題設置的一般原則名稱要正，即要合法、合情及合理

網站資料(素材)收集素材的類型：文字、圖片、動畫及聲音、影像等多媒體文件。素材的獲取途徑：

1）自己編制

2）報刊雜志和光盤等傳統媒體。

3）網絡。網站資料(素材)收集網上資料使用的注意事項：

1）版權問題

2）健全性

內容的完整性與正確性鏈接的正確性與完整性

3）合法性網上資料使用的注意事項：網頁的布局規劃網頁布局是設計在網頁上放些什么內容，以及這些內容放在網頁的什么位置。即網頁結構的設計，其實就是合理地設計頁面中的欄目和板塊，以及將其合理地分布在頁面中。網頁的布局規劃主頁的基本構成內容1）頁面標題2）網站標志3）頁眉4）導航欄5）主內容區6）頁腳對網頁內容的一個概括性描述，作用是引導訪問者清楚地知道所要瀏覽網站的內容，不至于迷失方向。如同一個商品的商標，應集中體現網站的特色、內容及其內在的文化內涵和理念。指頁面上端的部分，該位置吸引注意力較高，故大多網站在此處放置網站的宗旨、宣傳口號、廣告語或設置為廣告席位來出租。導航條的位置常見的有：在頁面的左側、右側、頂部和底部。是頁面設計的主體元素。在首頁中，它一般是二級鏈接內容的標題、或內容提要、或內容的部分摘錄。布局通常是按網站內容的分類進行分欄或劃分板塊。指頁面底端部分，通常用來標注站點所屬的單位的地址、e-mail鏈接以及版權所有或導航條主頁的基本構成內容對網頁內容的一個概括性描述，作用是引導訪問213452134566

網站目錄設計網站目錄設計的作用：便于站點的上傳和維護，以及內容的擴充和移植。規劃規范目錄建立的原則：以最少的層次提供最清晰簡便的訪問結構。目錄結構：

根目錄根文件：通常包括主頁文件以及其他必須的系統文件。每個主要功能（導航欄目）建立相應目錄。網站目錄設計根目錄下的images目錄存放公用圖片，每個目錄下私有圖片存放于各自獨立images目錄下。根據需要分別在根目錄下設置media目錄存放flash、avi等多媒體文件。所有的腳本文件存放在根目錄下的script目錄；所有CSS文件存放在根目錄下的css目錄。

目錄的層次不要太深，一般不要超過去3層，便于維護和管理。不要使用中文目錄盡量使用意義明確的目錄名稱根目錄下的images目錄存放公用圖片，每個目錄下私有圖片存

鏈接設計鏈接設計是指設計頁面之間相互鏈接的拓撲結構。鏈接結構類型：

1）線性結構：指子頁面由父頁面所擴展而來的；打開頁面是由父頁面一級一級向下展開，而退出頁面則由子頁面一級一級往回收縮。鏈接設計（續上）2）非線性結構：樹狀鏈接結構：指一級頁面鏈接指向多個二級頁面。星狀鏈接結構：指每個頁面相互之間都建立有鏈接。樹狀、星狀混合鏈接結構：在實際的網站設計中，通常是使用這種混合結構。此方案是首頁面和一級頁面之間用星狀鏈接結構，一級頁面和以下各級頁面之間用樹狀鏈接結構。（續上）

網站導航的規劃網站導航的設計，其實就是對網站鏈接結構的設計。導航分類：

1）導航欄網站導航的規劃(續上)2）下拉菜單導航：包括隱藏類和不可隱藏類（如折疊式）。可隱藏式下拉菜單(續上)可隱藏式下拉菜單折疊式下拉菜單折疊式下拉菜單（續上）

3）分類列表式導航：通常用于集錦類網站中。（續上）（續上）

4）關鍵詞導航：通常是在文本中將某些關鍵文字設置成超鏈接，常出現在幫助類和產品說明類的網頁中。

5）其他類導航：如使用圖像或動畫來引導一個網站的導航。（續上）

網頁色彩的搭配原則：

1）保持網頁的色彩搭配的協調性

2）保持不同網頁色彩的一致性

3）根據頁面的主題、性質及瀏覽者來規劃整體色彩。網頁色彩的搭配

網站創建

1)網頁的制作

2）網站的優化

3）網站的測試網站創建13.2網站發布域名和空間的申請在網上收索可提供域名和空間的網站，如可提供免費空間申請，根據網站的申請流程進行申請即可13.2網站發布域名和空間的申請申請示例申請示例網站上傳

1）使用Dreamweaver上傳定義遠程站點上傳網站或網頁

2）使用FTP軟件(如CuteFTP)網站上傳13.3.網站的維護

指即時更新網站內容，將網站中的廢舊文件即時清除以及調整網站的功能和服務等活動。13.3.網站的維護指即時更新網站內容，將網站中的廢舊綜合實訓綜合實訓準備工作站點規劃

“水族世界”網站的導航草圖如圖所示，主要分為8個欄目。準備工作站點規劃準備工作素材收集制作網頁的相關素材和資料可通過網絡或其他途徑獲得，網頁中的一些圖像素材，如導航按鈕等可以利用Photoshop或Fireworks等圖形圖像軟件制作。網站logo圖像準備工作素材收集網站logo圖像制作思路分析本案例是綜合案例，因此應從站點創建與管理的操作開始，首先制作“index.html”頁面，并利用該頁面制作“xinwen.html”頁面，依次類推。需注意的是，除首頁外，其他頁面的基本結構大致相同，因此制作時可通過復制已有資源的方法來提高制作效率。制作思路分析本案例是綜合案例，因此應從操作過程創建“水族世界”站點為了更好的管理網站中的各種文件并方便網頁制作，應首先創建站點，并在站點中創建各種文件和文件夾。操作過程創建“水族世界”站點操作過程制作網站首頁（1）插入表格利用表格可以很好地布局頁面，也是初學者最常使用