81.網(wǎng)站制作基礎(chǔ)知識

1、第8章 網(wǎng)頁制作基礎(chǔ)知識8.1 網(wǎng)站設(shè)計與工作流程8.2 HTML的概念與基本結(jié)構(gòu)8.3 Dreamweaver的使用8.4 Fireworks的使用8.5 Flash動畫制作 教學(xué)目標(biāo)通過本章的學(xué)習(xí)，能夠讓學(xué)生了解網(wǎng)站的設(shè)計與工作流程，掌握HTML的基本概念和結(jié)構(gòu)，能利用HTML制作網(wǎng)頁,了解和DHTML/XML的區(qū)別，能熟練掌握利用Dreamweaver制作網(wǎng)頁，利用Fireworks制作圖片、利用Flash制作動畫；并能有機(jī)地結(jié)合，制作出精美的網(wǎng)頁。8.1網(wǎng)站設(shè)計與工作流程8.1.1 網(wǎng)站的主題定位8.1.3 網(wǎng)站的形象設(shè)計8.1.4 網(wǎng)站的主頁設(shè)計 制作網(wǎng)站首先要考慮網(wǎng)站的主題。好的網(wǎng)

2、站不僅應(yīng)該有美感、個性、創(chuàng)意，更要有質(zhì)。網(wǎng)站的內(nèi)容是最重要的因素，空洞的網(wǎng)站對人沒有任何的吸引力。網(wǎng)站、網(wǎng)頁的主題定位是要注意，網(wǎng)站的主題和名稱一定要清楚明了，以避免盲目建設(shè)。 1.網(wǎng)站的題材 目前網(wǎng)站的題材主要由新聞、體育、網(wǎng)上聊天、即時信息、ICQ、網(wǎng)上社區(qū)、郵件列表、計算機(jī)技術(shù)、網(wǎng)頁網(wǎng)站開發(fā)、娛樂網(wǎng)站、旅行、參考、資訊、網(wǎng)上求職、家庭、8.1.1網(wǎng)站的主題定位教育、生活、時尚以及一些體現(xiàn)個人特色的網(wǎng)站。 2.網(wǎng)站的名稱 網(wǎng)站的名稱也很重要，網(wǎng)站的名字的優(yōu)劣決定著網(wǎng)站是否更容易被別人接受。他在很大程度上也決定了整個網(wǎng)站的定位。一個好名稱必須有概括性、簡短，有特色、容易記，還要符合自己的網(wǎng)站

3、的主題和風(fēng)格，決不要取一個名不副實的好名字，別人第一次上了你的當(dāng)，下次再也不會光顧了；網(wǎng)站的名稱還要合情合理，最好能讓人感受到親切感，當(dāng)然，還一定要合法，堅決不能帶有反動的、色情的、迷信的、危害社會安全的名詞語句。8.1.2結(jié)構(gòu)設(shè)計1.欄目和版塊網(wǎng)站的結(jié)構(gòu)設(shè)計其實也就是合理的設(shè)計網(wǎng)站的欄目和板塊。設(shè)計哪些欄目和板塊呢？如何合理地去設(shè)計呢？網(wǎng)站的內(nèi)容是網(wǎng)站的質(zhì)。也就是我們所應(yīng)該表現(xiàn)的。我們要把他們放在最顯眼的地方，位置，比如你想做一個有關(guān)網(wǎng)站、網(wǎng)頁制作的教程，打算在上面放四個欄目，網(wǎng)站介紹、教程、論壇、留言本，如果按照這樣放上去，給人的感覺是重點不夠突出，沒有表現(xiàn)出教程的重要性，如果你改為網(wǎng)站介

4、紹、教程目錄、網(wǎng)頁制作教程、網(wǎng)站制作教程、論壇、留言本，會讓讀者更快更明了地知道你的網(wǎng)站所要表現(xiàn)的內(nèi)容。 其次，應(yīng)該有個網(wǎng)站指南或更新的列表之類的欄目。如果想讓你的網(wǎng)站有更多的常來的訪客，就要做一些更新列表之類的欄目，這樣讀者可以一目了然地知道更新的內(nèi)容。 2.目錄的結(jié)構(gòu)設(shè)計 目錄的結(jié)構(gòu)設(shè)計要注意以下幾點： (1) 按欄目內(nèi)容建立子目錄團(tuán)隊站點成員站點1成員站點2成員站點n 網(wǎng)頁1 網(wǎng)頁2 . . . 網(wǎng)頁n+ 圖片目錄. (2) 在每個目錄下都建立獨(dú)立的images目錄 (3) 目錄的層次不要太深 (4) 避免使用中文目錄 (5) 盡量使用意義明確的目錄 1.設(shè)計網(wǎng)站的標(biāo)志（LOGO) 首先

5、你需要設(shè)計做一個網(wǎng)站的標(biāo)志（ logo）。就如同商標(biāo)一樣，logo是站點特色和內(nèi)涵的集中體現(xiàn)，是網(wǎng)站文化的濃縮，成功的網(wǎng)站標(biāo)志讓大家一看就能想起你的站點。 2.設(shè)計網(wǎng)站的標(biāo)準(zhǔn)色彩 色彩是藝術(shù)表現(xiàn)的要素之一，他是光刺激眼睛在傳導(dǎo)到大腦的中樞而產(chǎn)生的一種感覺。而網(wǎng)站給人的第一印象來自視覺沖擊，確定網(wǎng)站的標(biāo)準(zhǔn)色彩是相當(dāng)重要的一步，不同的色彩搭配產(chǎn)生不同的視覺效果。 8.1.3形象設(shè)計 象設(shè)計任何東西一樣，我們首先應(yīng)該在草紙上畫出一個草圖。我們可以盡可能地發(fā)揮我們的想象力，想象他是一種意境。我們可以多畫幾張，然后從中選擇出最佳的一個作為繼續(xù)使用的藍(lán)本。然后在草案的基礎(chǔ)上，將你確定需要的位置的功能模塊安

6、排到頁面上。這些功能模塊主要包含網(wǎng)站標(biāo)志、主菜單、更新列表、搜索、友情鏈接、廣告條、郵件列表、計數(shù)器、版權(quán)信息等。在這里我們應(yīng)該遵循突出重點、平衡協(xié)調(diào)的原則，將網(wǎng)站的標(biāo)志、主菜單等最重要8.1.4主頁設(shè)計 的的模塊放在最顯眼、最突出的位置上，然后再考慮次要的模塊的排放。 其他的頁面的設(shè)計應(yīng)該根據(jù)首頁的設(shè)計風(fēng)格進(jìn)行設(shè)計。我們在進(jìn)行網(wǎng)站或網(wǎng)頁設(shè)計的時候，除了加強(qiáng)美感、增加閱覽性以外、還要重視體貼。何謂體貼？也就是處在網(wǎng)站訪問者的角度去看問題、去考慮，更多地方便訪問者。我們在設(shè)計時應(yīng)該處處把握這一點，這樣能讓你的主頁更有魅力。 8.2HTML的概念及基本結(jié)構(gòu)8.2.1 HTML的結(jié)構(gòu)8.2.2 中的

7、標(biāo)記8.2.3 文本體控制標(biāo)記8.2.4 文本標(biāo)記8.2.5 HTML文件的鏈接8.2.6 DHTML和XML簡介 HTML 的全稱為Hyper Text Markup Language，即超文本標(biāo)記語言。 HTML文件 是被網(wǎng)絡(luò)瀏覽器讀取，產(chǎn)生網(wǎng)頁的文件。 頭信息標(biāo)記 My first HTML page 頭結(jié)束標(biāo)記 正文起始標(biāo)記 8.2.1HTML結(jié)構(gòu) Hi How are you. 這是我的第一個HTML程序 正文結(jié)束標(biāo)記 結(jié)束標(biāo)記 瀏覽器編譯的結(jié)果:1. TITLE標(biāo)明該HTML文件的題目。 格式：TITLE文件題目TITLE 標(biāo)題欄空間有限，即標(biāo)題應(yīng)少于80個字符。 標(biāo)題元素中不允許

8、出現(xiàn)HTML標(biāo)記 2.LINK/LINK LINK標(biāo)記用于顯示本文檔和其他文檔之間的連接關(guān)系。 例： REL 參數(shù)說明HTML文件及URL兩個文檔之間的關(guān)系，HREF說明目標(biāo)文檔名，用來定義URL和 HTML文件的關(guān)系。8.2.2 中的標(biāo)記 3.META/META META標(biāo)記用于描述不包含在標(biāo)準(zhǔn)HTML里的一些文檔信息。 4. STYLE標(biāo)記用于定義網(wǎng)頁的樣式。5.（腳本） SCRIPT的SCRIPT和/SCRIPT標(biāo)記用于包含腳本。 8.2.3文本體控制標(biāo)記 文件體中描述的是瀏覽器中頁面顯示的內(nèi)容。1.頁面的背景設(shè)置 BACKGROUND：背景圖案BGPROPERTIES：用來設(shè)定背景圖案

9、的屬性。BGCOLOR：用來設(shè)定背景色。TEXT：用來設(shè)定文字顏色。 LINK：用來設(shè)定未閱讀過的超文本鏈接顏色。 VLINK：用來設(shè)定閱讀過的超文本鏈接顏色。 ALINK：用來設(shè)定動作中的超文本鏈接顏色。 8.2.4文本標(biāo)記 FONT/FONT FONT size# HTML有七種字號，l號最小，7號最大。缺省字號為3；FONT color#可以是6位16進(jìn)制數(shù) ，也可以是 black、 sliver、 white、 red 、 maroon、 yellow 、 green、 olive、blue、 navy、purple等 ； #可以是各種字體；P即Paragraph， 標(biāo)記表示一個段落的

10、開始，一段結(jié)束可用標(biāo)記指出，但通常不需要結(jié)束標(biāo)記； 標(biāo)記叫斷行符，相當(dāng)于換行回車； 標(biāo)題文字 nl，2，3，4，5，6 1 統(tǒng)一資源定位器URL 統(tǒng)一資源定位器（Uniform Resource Locator）是文件名的擴(kuò)展 protocol：/machineName:port/ directory / filename machinename是存放該資源主機(jī)的 IP地址 directory和filename是該資源的路徑和文件名 統(tǒng)一資源定位器也有絕對URL和相對URL之分例：http:/ 8.2.5 HTML文件鏈接 1 基本概念 DHTML：現(xiàn)有的網(wǎng)頁技術(shù)與標(biāo)準(zhǔn)的組合。 CSS：譯作層

11、疊樣式表單，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 XML：可擴(kuò)展標(biāo)記語言，定義信息的結(jié)構(gòu)或信息在數(shù)據(jù)庫中存儲的方式。2 HTML與 DHTML的區(qū)別傳統(tǒng)的HTML是靜態(tài)的，當(dāng)它被加載到瀏覽器后，它只像一個畫面，怎么看也不會發(fā)生變化。8.2.6 DHTML 和 XML簡介1 基本概念 DHTML：現(xiàn)有的網(wǎng)頁技術(shù)與標(biāo)準(zhǔn)的組合。 CSS：譯作層疊樣式表單，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。 XML：可擴(kuò)展標(biāo)記語言，定義信息的結(jié)構(gòu)或信息在數(shù)據(jù)庫中存儲的方式。2 HTML與 DHTML的區(qū)別傳統(tǒng)的HTML是靜態(tài)的。而動態(tài)HTML則意味著Web

12、頁面對用戶有響應(yīng)，即，動態(tài)HTML能自動變化。 8.3 Dreamweaver 的使用8.3.1 網(wǎng)站開發(fā)工具8.3.2 Dreamweaver界面介紹8.3.3 創(chuàng)建站點8.3.4 站點的結(jié)構(gòu)規(guī)劃8.3.5 站點的維護(hù)操作8.3.6 創(chuàng)建網(wǎng)頁8.3.7 網(wǎng)頁布局之表格8.3.8 添加網(wǎng)頁內(nèi)容 8.3.1網(wǎng)站開發(fā)工具1.編寫代碼類如：記事本、HotDog、HomeSite2.設(shè)計視圖類如：Office FrontPage、Visual InterDev、HotMetal、Netscape編輯器、網(wǎng)頁制作三劍客3.Dreamweaver 是在多媒體方面頗有建樹的Macromedia 公司推出的可

13、視化網(wǎng)頁制作工具，它與 Flash 、Fireworks合在一起被稱為網(wǎng)頁制作三劍客，這三個軟件相輔相承， 是制作網(wǎng)頁的最佳選擇。Dreamweaver 主要用來制作網(wǎng)頁文件，制作出來的網(wǎng)頁兼容性比較好，制作效率也很高；4.Flash 用來制作精美的網(wǎng)頁動畫；5.Fireworks 用來處理網(wǎng)頁中的圖形。8.3.2 Dreamweaver界面介紹1.工作界面標(biāo)題欄菜單欄文檔窗口文檔工具欄插入面板屬性面板其它功能區(qū)域 2.文檔工具欄換到視圖（設(shè)計、代碼、拆分）標(biāo)題文本框 在瀏覽器中預(yù)覽視圖選項3.文檔窗口和狀態(tài)欄標(biāo)簽選擇器：顯示環(huán)繞當(dāng)前選定內(nèi)容的標(biāo)簽的層次結(jié)構(gòu)。窗口大小下載文件大小/下載時間4.

14、插入（對象）面板 5.屬性面板6.一些基本的窗口操作 更改工作區(qū)切換視圖（Ctrl+-）工具欄的顯示和關(guān)閉查找需要的功能隱藏面板（F4）尋求軟件幫助（F1） 8.3.3創(chuàng)建站點1.本地站點 本地文件夾是我們在硬盤上建立的工作目錄。Dreamweaver 將該文件夾作為“本地站點”。2.遠(yuǎn)程站點 遠(yuǎn)程文件夾是存儲文件的位置，Dreamweaver 該文件夾稱為“遠(yuǎn)程站點”。一般說來，遠(yuǎn)程文件夾位于運(yùn)行 Web 服務(wù)器的計算機(jī)上。3.測試服務(wù)器 測試服務(wù)器文件夾是 Dreamweaver 處理動態(tài)頁的文件夾。1 建議：使用英文小寫字母命名站點中的文件夾和文件； 2 建議：文件名要易記，要統(tǒng)一命名。

15、 8.3.4站點結(jié)構(gòu)規(guī)劃 選擇菜單“站點-管理站點”，打開編輯站點對話框。8.3.5站點維護(hù)操作 1 新建站點； 2 編輯站點； 3 復(fù)制站點； 4 刪除站點； 5 導(dǎo)入和導(dǎo)出站點。8.3.6 創(chuàng)建網(wǎng)頁創(chuàng)建網(wǎng)頁的一般過程： 1.設(shè)置頁面屬性 選擇菜單“修改-頁面屬性”，打開頁面屬性對話框。 2.保存網(wǎng)頁 (1)為防止一番辛苦付之東流，建議養(yǎng)成經(jīng)常保存的習(xí)慣。 (2)快捷鍵 Ctrl+S。3.創(chuàng)建頁面布局4.添加網(wǎng)頁內(nèi)容 1.表格及其元素的基本操作 8.3.7網(wǎng)頁布局之表格選擇 表格、行&列、單元格 添加 行&列 刪除 行&列 拆分 單元格 合并 單元格 1,11,21,31,41,52,12,

16、22,32,42,53,13,23,33,43,5其他基本操作： a 剪切、復(fù)制、粘貼單元格 (編輯) b 輸入文字 c 插入其他對象 （插入） d 自動套用表格格式 （命令） e 排序 （命令） f 將表格轉(zhuǎn)換層 （修改）AA2.表格及其元素的屬性設(shè)置 表格屬性行屬性3.應(yīng)用表格進(jìn)行頁面布局 （1）設(shè)置頁面屬性 （2）使用表格創(chuàng)建頁面布局 （3）插入網(wǎng)頁對象 （4）保存網(wǎng)頁 單元格屬性8.3.8添加網(wǎng)頁內(nèi)容1.文本(1)文本的輸入普通文本(文字錄入或文本拷貝) 特殊字符(插入-HTML-特殊字符) (2)設(shè)置字符格式1)字體2)字號3)文本顏色(3)設(shè)置段落格式1)標(biāo)題與段落 2)對齊方式3

17、)縮進(jìn)(4)設(shè)置列表格式(5)文本的屬性面板 文本是展示網(wǎng)站內(nèi)涵的主要形式之一。2.圖像 插入圖像 將插入點置于想要圖片出現(xiàn)的地方，再進(jìn)行圖像的插入操作（支持GIF、JPEG、PNG三種圖像格式）。 插入輪換圖像 輪換圖像就是當(dāng)鼠標(biāo)指針經(jīng)過圖片時，圖片會顯示另外一張隱藏圖片。 插入占位符設(shè)置圖像屬性 隨著網(wǎng)絡(luò)帶寬的不斷拓展，高質(zhì)量的圖片更多的出現(xiàn)在網(wǎng)站上。 設(shè)置圖像熱點區(qū)域可以利用熱點區(qū)域，使一幅圖像可以同時不著痕跡地鏈接多個頁面。制作相冊 準(zhǔn)備工作: Dsn:保存相冊文件夾； Src:原始圖文件夾； 網(wǎng)頁相冊支持的圖片格式： GIF，JPG，JPEG，PNG， PSD，TIF，或TIFF之一

18、。 “命令-創(chuàng)建網(wǎng)站相冊”，設(shè)置對話框。8.4 Fireworks 的使用8.4.1 Fireworks的工作界面8.4.2 Fireworks的工具8.4.3 Fireworks文字的處理8.4.4 Fireworks圖片的處理8.4.5 Fireworks按鈕和菜單的處理 8.4.1Fireworks 的工作界面菜 單文件(F) 編輯(E) 視圖(V) 選擇(S) 修改(M) 文本(T)命令(C) 濾鏡(I) 窗口(W) 幫助(H)新建、打開、關(guān)閉、保存、退出圖片導(dǎo)入、導(dǎo)出、批處理掃描、頁面設(shè)置、打印文 件 菜 單使用 Fireworks注冊關(guān)于 Fireworks幫 助 菜 單撤銷和重復(fù)

19、剪切、復(fù)制、粘貼、重制、克隆插入、庫編 輯 菜 單選 擇 菜 單修 改 菜 單命 令 菜 單文 本 菜 單其他雜點模糊調(diào)整顏色銳化Eye Candy 4000 LEAlien Skin Splat LE濾 鏡 菜 單隱藏面板工具欄工具、屬性其他浮動面板層疊、平鋪當(dāng)前打開的文檔窗 口 菜 單8.4.2 Fireworks 的工具1.選擇工具 指針、選擇后方對象 部分選定 變形（縮放、傾斜、扭曲） 裁切、導(dǎo)出區(qū)域 2.位圖工具矩形選取框、橢圓形選取框 魔術(shù)棒 鉛筆 模糊、銳化、減淡、烙印、涂抹 吸管 套索、多邊形套索 刷子 橡皮擦 橡皮圖章 、替換顏色、消除紅眼 顏料桶、漸變 3.矢量工具 直線

20、鋼筆、矢量路徑、重繪路徑 矩形、橢圓、多邊形、其他形狀 字符 自由變換、更改區(qū)域形狀 刀子 4.Web 網(wǎng)頁工具 熱點（矩形、圓形、多邊形） 切片（矩形、多邊形） 隱藏?zé)狳c和切片 顯示熱點和切片5.顏色工具 描邊顏色井 填充顏色井 重置描邊和填充的顏色 取消描邊或填充的顏色 調(diào)換描邊和填充的顏色6.視圖工具 標(biāo)準(zhǔn)屏幕模式 帶有菜單的全屏模式 全屏模式 手形 放大鏡 7.屬性面板8.層面板9.優(yōu)化面板10.形狀面板1.文字實例填充字設(shè)置圖案填充；8.4.3 Fireworks 文字的處理發(fā)光字設(shè)置外發(fā)光效果；立體字設(shè)置斜角效果；描邊字印章字2. 文字矢量分割字（小刀工具、路徑的合并與組合）文字的

21、曲線分割(1) 畫橢圓、輸入文字。(2) 選中文字，“文本-轉(zhuǎn)換為路徑”，然后“修改-組合路徑-合并” 。(3) 再克隆文字、橢圓。(4) 選中克隆出來的文字和橢圓，“修改-組合路徑-相交”，這樣得到了一個殘缺的文字，選中它并改變顏色。3 文字位圖動感字網(wǎng)格字1.圖像的修飾效果添加邊框設(shè)置發(fā)光效果如圖。Edges濾鏡8.4.4 Fireworks 圖片的處理偏色顏色填充效果。層間混合模式。2.羽化效果3.蒙板效果位圖蒙板Alpha 通道、灰度矢量蒙板8.4.5 Fireworks 按鈕和菜單的處理(1) 新建按鈕操作 使用菜單“編輯-插入-新建按鈕”；(2) 按鈕的狀態(tài) 釋放、滑過、按下、滑過后按下； (3) 按鈕的制作 使用編輯工具制作按鈕，或者導(dǎo)入按鈕再編輯。 1.按鈕的處理2.菜單(1)創(chuàng)建菜單(2)添加熱點3.添加彈出菜單4 .調(diào)整8.5 Flash動畫制作8.5.1 Flash的工作界面8.5.2 Fireworks的工具和面板8.5.3 Flash動畫制作8.5.4 Flash的動畫效果 8.5.1 Flash 的工作界面 8.5 Flash 動畫制作Flash 是矢量圖形編輯工具，是網(wǎng)絡(luò)動畫編輯軟件。1.時間軸面板8.5