Web前端開發(fā)技術(shù)課件

實訓(xùn)13

網(wǎng)站建設(shè)、發(fā)布與維護(hù)網(wǎng)站的建設(shè)網(wǎng)站的發(fā)布網(wǎng)站的維護(hù)網(wǎng)站建設(shè)流程為：策劃網(wǎng)站→準(zhǔn)備素材→規(guī)劃網(wǎng)站布局→設(shè)計網(wǎng)站

目錄→規(guī)劃網(wǎng)站導(dǎo)航→搭配網(wǎng)站色彩

→創(chuàng)建網(wǎng)站

→發(fā)布網(wǎng)站→維護(hù)

。1.1

網(wǎng)站建設(shè)圖1網(wǎng)站的建設(shè)流程網(wǎng)站建設(shè)網(wǎng)站發(fā)布網(wǎng)站維護(hù)網(wǎng)站策劃1)

網(wǎng)站的主題(即題材和標(biāo)題)網(wǎng)站的對象網(wǎng)站的內(nèi)容策劃網(wǎng)站邏輯圖網(wǎng)站題材選擇的一般原則

一般來說，個人主頁的選材定位要小，內(nèi)容要精。對于個人網(wǎng)站，題材最好是自己擅長或者喜歡的內(nèi)容。不要太濫或者目標(biāo)太高。網(wǎng)站標(biāo)題設(shè)置的一般原則名稱要正，即要合法、合情及合理名稱要易記，最好使用中文名稱要有特色，最好能體現(xiàn)一定的內(nèi)涵，同時給瀏覽者更多的視覺沖擊和

空間想象力。如“e書時空”網(wǎng)站資料(素材)收集素材的類型：文字、圖片、動畫及聲音、影像等多媒體文件。素材的獲取途徑：自己編制報刊雜志和光盤等傳統(tǒng)媒體。網(wǎng)絡(luò)。網(wǎng)上資料使用的注意事項：版權(quán)問題健全性內(nèi)容的完整性與正確性鏈接的正確性與完整性合法性網(wǎng)頁的布局規(guī)劃網(wǎng)頁布局是設(shè)計在網(wǎng)頁上放些什么

內(nèi)容，以及這些內(nèi)容放在網(wǎng)頁的什么位置。即網(wǎng)頁結(jié)構(gòu)的設(shè)計，其實就是合理

地設(shè)計頁面中的欄目和板塊，以及將其合理地分布在頁面中。主頁的基本構(gòu)成內(nèi)容頁面標(biāo)題網(wǎng)站標(biāo)志頁眉導(dǎo)航欄主內(nèi)容區(qū)頁腳對網(wǎng)頁內(nèi)容的一個概括性描述，作用是引導(dǎo)訪問者清楚地知道所要瀏覽網(wǎng)站的內(nèi)容，不至于迷失方向。如同一個商品的商標(biāo)，應(yīng)集中體現(xiàn)網(wǎng)站的特色、內(nèi)容及其內(nèi)在的文化內(nèi)涵和理念。指頁面上端的部分，該位置吸引注意力較高，故大多網(wǎng)站在此處放置網(wǎng)站的宗旨、宣傳口號、廣告語或設(shè)置為廣告席位來出租。導(dǎo)航條的位置常見的有：在頁面的左側(cè)、右側(cè)、頂部和底部。是頁面設(shè)計的主體元素。在首頁中，它一般是二

級鏈接內(nèi)容的標(biāo)題、或內(nèi)容提要、或內(nèi)容的部分摘錄。布局通常是按網(wǎng)站內(nèi)容的分類進(jìn)行分欄或劃分板塊。指頁面底端部分，通常用來標(biāo)注站點所屬的單位的地址、e-mail鏈接以及版權(quán)所有或?qū)Ш綏l213456網(wǎng)站目錄設(shè)計網(wǎng)站目錄設(shè)計的作用：便于站點的上傳和維護(hù)，以及內(nèi)容的擴充和移植。規(guī)劃規(guī)范目錄建立的原則：以最少的層次提供最

清晰簡便的訪問結(jié)構(gòu)。目錄結(jié)構(gòu)：根目錄根文件：通常包括主頁文件以及其他必須的系統(tǒng)文件。每個主要功能（導(dǎo)航欄目）建立相應(yīng)目錄。公–根目錄下的images目錄存放公用圖片，每個目錄下私有圖片存放于各自獨立images目錄下。根據(jù)需要分別在根目錄下設(shè)置media目

錄存放flash、avi等多媒體文件。所有的腳本文件存放在根目錄下的

script目錄；所有CSS文件存放在根目

錄下的css目錄。目錄的層次不要太深，一般不要超過去3層，便于維護(hù)和管理。不要使用中文目錄盡量使用意義明確的目錄名稱鏈接設(shè)計鏈接設(shè)計是指設(shè)計頁面之間相互鏈接的拓?fù)浣Y(jié)構(gòu)。鏈接結(jié)構(gòu)類型：1）線性結(jié)構(gòu)：指子頁面由父頁面所擴展而來的；打開頁面是由父頁面一級一級向下展開，而退出頁面則由子頁面一級一級往回收縮。（續(xù)上）2）非線性結(jié)構(gòu)：樹狀鏈接結(jié)構(gòu)：指一級頁面鏈接指向多個二級頁面。星狀鏈接結(jié)構(gòu)：指每個頁面相互之間都建立有鏈接。樹狀、星狀混合鏈接結(jié)構(gòu)：在實際的網(wǎng)站設(shè)

計中，通常是使用這種混合結(jié)構(gòu)。此方案是首頁面和一級頁面之間用星狀鏈接結(jié)構(gòu)，一級頁面和以下各級頁面之間用樹狀鏈接結(jié)構(gòu)。網(wǎng)站導(dǎo)航的規(guī)劃網(wǎng)站導(dǎo)航的設(shè)計，其實就是對網(wǎng)站

鏈接結(jié)構(gòu)的設(shè)計。導(dǎo)航分類：1）導(dǎo)航欄(續(xù)上)

2）下拉菜單導(dǎo)航：包括隱藏類和不可隱藏類（如折疊式）。可隱藏式下拉菜單折疊式下拉菜單（續(xù)上）3）分類列表式導(dǎo)航：通常用于集錦類網(wǎng)站中。（續(xù)上）關(guān)鍵詞導(dǎo)航：通常是在文本中將某些關(guān)鍵文字設(shè)置成超鏈接，常出現(xiàn)在幫

助類和產(chǎn)品說明類的網(wǎng)頁中。其他類導(dǎo)航：如使用圖像或動畫來引導(dǎo)一個網(wǎng)站的導(dǎo)航。網(wǎng)頁色彩的搭配原則：保持網(wǎng)頁的色彩搭配的協(xié)調(diào)性保持不同網(wǎng)頁色彩的一致性根據(jù)頁面的主題、性質(zhì)及瀏覽者來規(guī)劃整體色彩。網(wǎng)站創(chuàng)建1)

網(wǎng)頁的制作網(wǎng)站的優(yōu)化網(wǎng)站的測試13.2

網(wǎng)站發(fā)布域名和空間的申請在網(wǎng)上收索可提供域名和空間的網(wǎng)

站，如可提供免費空間申請，根據(jù)網(wǎng)站的申請流程進(jìn)行申請即可申請示例網(wǎng)站上傳使用Dreamweaver

上傳定義遠(yuǎn)程站點上傳網(wǎng)站或網(wǎng)頁使用FTP軟件(如CuteFTP)13.3.

網(wǎng)站的維護(hù)指即時更新網(wǎng)站內(nèi)容，將網(wǎng)站中的

廢舊文件即時清除以及調(diào)整網(wǎng)站的功能和服務(wù)等活動。綜合實訓(xùn)準(zhǔn)備工作站點規(guī)劃“水族世界”網(wǎng)站的導(dǎo)航草圖如圖所示，主要分為8個欄目。準(zhǔn)備工作素材收集制作網(wǎng)頁的相關(guān)素材和資料可通過網(wǎng)絡(luò)或其他途徑獲得，網(wǎng)頁中的一些圖像素材，如導(dǎo)航按鈕等可以利用Photoshop或Fireworks等圖形圖像軟件制作。網(wǎng)站logo圖像制作思路分析本案例是綜合案例，因此應(yīng)從站點創(chuàng)建與管理的操作開始，首先制作“index.html”頁面，并利用該頁面制作“xinwen.html”頁面，依次類推。需注意的是，除首頁外，其他頁面的基本結(jié)構(gòu)大致相同，因此制作時可通過復(fù)制已有資源的方法來提高制作效率。操作過程創(chuàng)建“水族世界”站點為了更好的管理網(wǎng)站中的各種文件并方便網(wǎng)頁制作，應(yīng)首先創(chuàng)建站點，并在站點中創(chuàng)建各種文件和文件夾。操作過程制作網(wǎng)站首頁（1）插入表格利用表格可以很好地布局頁面，也是初學(xué)者最常使用的布局網(wǎng)頁的方法。操作過程制作網(wǎng)站首頁（2）輸入文本并插入圖像完成表格和嵌套表格的插入后，即可在各單元格中輸入需要的文本并插入需要的圖像。操作過程制作網(wǎng)站首頁（3）創(chuàng)建并設(shè)置外部CSS樣式文件由于站點包含多個網(wǎng)頁，且各網(wǎng)頁中相同類型的對象格式應(yīng)盡量保持一致，因此可通過創(chuàng)建外部CSS樣式文件的方法統(tǒng)一設(shè)置網(wǎng)頁中的對象格式。操作過程制作網(wǎng)站首頁（4）設(shè)置超鏈接和圖像熱點區(qū)域接下來將對導(dǎo)航欄上的各圖像創(chuàng)建超鏈接并取消超鏈接格式的圖像邊框效果，然后在“bg.jpg”圖像上使用熱點工具創(chuàng)建圖像熱點區(qū)域。操作過程制作網(wǎng)站首頁（5）創(chuàng)建并設(shè)置AP

Div下面將通過繪制AP

Div來創(chuàng)建鼠標(biāo)經(jīng)過圖像效果。操作過程制作“水族新聞”頁面（1）布局頁面下面通過復(fù)制網(wǎng)站首頁中的對象并適當(dāng)進(jìn)行修改來快速布局“水族新聞”頁面。操作過程制作“水族新聞”頁面（2）編輯外部CSS樣式為方便快速對網(wǎng)頁中不同對象的格式進(jìn)行設(shè)置，下面鏈接制作首頁時創(chuàng)建的外部CSS樣式文件