第1章 網(wǎng)頁制作基礎(chǔ)知識

1、第第1章章 網(wǎng)頁制作基礎(chǔ)知識網(wǎng)頁制作基礎(chǔ)知識課程簡介課程簡介u本課程介紹了使用Dreamweaver 8制作網(wǎng)頁和開發(fā)網(wǎng)站的各種技術(shù)，主要內(nèi)容涉與Dreamweaver 8工作環(huán)境，站點(diǎn)創(chuàng)立和管理，編輯網(wǎng)頁文本，編輯網(wǎng)頁圖像、聲音、動(dòng)畫等，制作動(dòng)態(tài)交互網(wǎng)頁，行為、庫、框架等。u通過本課程的學(xué)習(xí)，希望學(xué)習(xí)者能夠理論結(jié)合實(shí)際，快速掌握根本的網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作相關(guān)知識！教材與參考書目教材與參考書目l?Dreamweaver 8網(wǎng)頁制作與網(wǎng)站開發(fā)標(biāo)準(zhǔn)教程?清華大學(xué)出版社，楊志姝編著。l?巧學(xué)巧用Dreamweaver 8制作網(wǎng)頁?人民郵電出版社，前沿電腦圖像工作室編著。l?網(wǎng)頁設(shè)計(jì)與制作教程?清華大學(xué)

2、出版社，楊選輝編著。l?網(wǎng)頁設(shè)計(jì)與制作教程?第二版清華大學(xué)出版社，趙祖蔭主編。教學(xué)方式與要求教學(xué)方式與要求l講授、自學(xué)與上機(jī)結(jié)合。講授 30 學(xué)時(shí)上機(jī)自行安排l加強(qiáng)上機(jī)實(shí)踐。l加強(qiáng)上網(wǎng)實(shí)踐。考核方式考核方式l考試第一章網(wǎng)頁制作根底知識第一章網(wǎng)頁制作根底知識1.1 網(wǎng)頁和網(wǎng)頁制作工具1.2 網(wǎng)站建立流程1.3 Dreamweaver 界面與根本操作1.4 創(chuàng)立與管理站點(diǎn)1.1.1 什么是網(wǎng)頁什么是網(wǎng)頁l通俗的講，Internet 就是指許多不同功能計(jì)算機(jī)通過線路連接起來組成的一個(gè)世界范圍內(nèi)的計(jì)算機(jī)集合體。lInternet 提供的效勞包括：WWW 效勞也就是網(wǎng)頁瀏覽效勞、電子郵件效勞、網(wǎng)上傳呼I

3、CQ 就是最常見的網(wǎng)上傳呼效勞、文件傳輸、在線聊天、網(wǎng)上購物、網(wǎng)絡(luò)炒股、聯(lián)網(wǎng)游戲、虛擬空間等等。 1.1.1 什么是網(wǎng)頁續(xù)什么是網(wǎng)頁續(xù)WWW 是由遍布在 Internet 上的稱為 Web 效勞器的計(jì)算機(jī)組成，它將不同的信息資源有機(jī)的組織在一起，通過一種叫做瀏覽器的軟件進(jìn)展瀏覽。 網(wǎng)上沖浪的過程。1.1.1 什么是網(wǎng)頁續(xù)什么是網(wǎng)頁續(xù) 1.1.1 什么是網(wǎng)頁續(xù)什么是網(wǎng)頁續(xù)l網(wǎng)頁實(shí)際上就是用 HTML 語言寫成的文檔，HTMLHyperText Markup Language，超文本標(biāo)記語言語言是顯示網(wǎng)頁的一種文本表現(xiàn)方式，它可通過標(biāo)記符來定義網(wǎng)頁內(nèi)容的顯示效果。l通過超鏈接連接起來的一系列邏輯上

4、可以視為一個(gè)整體的頁面，那么叫做網(wǎng)站。 1.1.2 常見的網(wǎng)頁制作軟件常見的網(wǎng)頁制作軟件l網(wǎng)頁編輯工具的作用就是用直觀的方式將網(wǎng)頁制作的過程實(shí)現(xiàn)?，F(xiàn)在的網(wǎng)頁編輯工具絕大多數(shù)都是所見即所得的，即我們實(shí)際操作的結(jié)果就是最終生成的網(wǎng)頁HTML 文檔的效果，也就是說，網(wǎng)頁編輯工具將 HTML 代碼的生成自動(dòng)化了。l最 常 用 的 兩 種 網(wǎng) 頁 編 輯 工 具 是 Dreamweaver 和 FrontPage。 1.1.2 常見的網(wǎng)頁制作軟件續(xù)常見的網(wǎng)頁制作軟件續(xù)1.1.2 常見的網(wǎng)頁制作軟件續(xù)常見的網(wǎng)頁制作軟件續(xù)l最常用的素材處理工具有：Photoshop Photoshop 是最著名的圖形圖像處

5、理軟件，由 Adobe 公司出品。Photoshop 的功能非常強(qiáng)大，是專業(yè)圖像創(chuàng)作的首選軟件。 Fireworks Fireworks 是 Macromedia公司出品的Web 圖形工具軟件，是用來設(shè)計(jì)和制作專業(yè)化網(wǎng)頁圖形的終極解決方案。它是第一個(gè)可以幫助網(wǎng)頁圖形設(shè)計(jì)人員和開發(fā)人員解決所面臨的特殊問題的制作環(huán)境。 1.1.2 常見的網(wǎng)頁制作軟件續(xù)常見的網(wǎng)頁制作軟件續(xù)FlashFlash 是目前最流行的一種 Web 矢量動(dòng)畫軟件，它建立了 Web 上交互式矢量圖形和動(dòng)畫的工業(yè)標(biāo)準(zhǔn)。 Anfy Anfy 是一種常用的 Java 特效生成工具，它能以簡明的方式實(shí)現(xiàn)多種復(fù)雜的 Java 效果 。1.

6、2.1 規(guī)劃站點(diǎn)規(guī)劃站點(diǎn)l目標(biāo)規(guī)劃書l定義、分析目標(biāo)用戶l確立站點(diǎn)的風(fēng)格信息式 表現(xiàn)形式是以文字信息為主。畫廊式 表現(xiàn)形式是以圖像、動(dòng)畫、多媒體等高新網(wǎng)絡(luò)技術(shù)為主。1.2.1 規(guī)劃站點(diǎn)續(xù)規(guī)劃站點(diǎn)續(xù)l考慮網(wǎng)絡(luò)技術(shù)l網(wǎng)絡(luò)上的速度因素帶寬l 網(wǎng)絡(luò)帶寬是一個(gè)要引起設(shè)計(jì)者注意的首要因素，連接速度將影響到網(wǎng)頁的設(shè)計(jì)。影響網(wǎng)頁顯示速度的最主要因素就是圖像的數(shù)量和大小。1.2.1 規(guī)劃站點(diǎn)續(xù)規(guī)劃站點(diǎn)續(xù)瀏覽器的分辨率 顯示器的屏幕分辨率是網(wǎng)頁設(shè)計(jì)者應(yīng)該特別關(guān)注的因素。顯示器屏幕分辨率是指計(jì)算機(jī)屏幕水平與垂直方向的像素值即屏幕的寬度與高度，通?？梢詫鴥?nèi)用戶顯示器分辨率的設(shè)計(jì)標(biāo)準(zhǔn)定為：800 * 600 兼顧 1

7、024 * 768。 即時(shí)交互與插件1.2.2 設(shè)計(jì)站點(diǎn)設(shè)計(jì)站點(diǎn)l建立網(wǎng)站目錄構(gòu)造l網(wǎng)站中的命名規(guī)那么l1最好使用小寫英文名稱，可以用漢語拼音代替。l2可以包含數(shù)字或下劃線 。l3注意正確的文件后綴名擴(kuò)展名：網(wǎng)頁文件的后綴名為：.htm 或 .html。 l4默認(rèn)的主頁名稱 。1.2.2 設(shè)計(jì)站點(diǎn)續(xù)設(shè)計(jì)站點(diǎn)續(xù)建立站點(diǎn)構(gòu)造 1.2.2 設(shè)計(jì)站點(diǎn)續(xù)設(shè)計(jì)站點(diǎn)續(xù)l設(shè)計(jì)站點(diǎn)的導(dǎo)航l導(dǎo)航的概念l 網(wǎng)站中的導(dǎo)航系統(tǒng)，實(shí)質(zhì)上就是一組使用了超鏈接技術(shù)的網(wǎng)頁對象包括文字、按鈕、小圖片、圖形等，它們將網(wǎng)站中的內(nèi)容有機(jī)地連接在一起。l導(dǎo)航的分類l導(dǎo)航的要點(diǎn)l導(dǎo)航設(shè)計(jì)的原那么1.2.2 設(shè)計(jì)站點(diǎn)續(xù)設(shè)計(jì)站點(diǎn)續(xù)l設(shè)計(jì)主要頁

8、面的版式設(shè)計(jì)頁面的布局網(wǎng)頁中的顏色文字、圖像、動(dòng)畫以與多媒體的使用l收集和制作素材1.2.3 制作網(wǎng)頁制作網(wǎng)頁l網(wǎng)站建立的第三步就是具體實(shí)施設(shè)計(jì)的結(jié)果，將站點(diǎn)中的網(wǎng)頁按照設(shè)計(jì)方案制作出來。需要注意的是，在該步驟中有一個(gè)經(jīng)常被初學(xué)者無視的環(huán)節(jié)，就是測試網(wǎng)頁。因?yàn)橛绊憺g覽者訪問網(wǎng)頁的因素很多，網(wǎng)頁設(shè)計(jì)者永遠(yuǎn)也無法準(zhǔn)確把握網(wǎng)頁在不同的平臺、連接速度、訪問方法調(diào)制解調(diào)器、ISDN或是其他方法、顯示分辨率等情況下的顯示結(jié)果。唯一的解決方案就是：測試，不斷的測試。 1.2.4 站點(diǎn)發(fā)布和維護(hù)站點(diǎn)發(fā)布和維護(hù)l站點(diǎn)發(fā)布和維護(hù)l網(wǎng)站的發(fā)布和維護(hù)l發(fā)布前的工作l 1確保測試正常l 2檢查頁面中的搜索信息1.3.1

9、 Dreamweaver 8的功能與特點(diǎn)的功能與特點(diǎn)lDreamweaver 8是美國Macromedia公司開發(fā)的集網(wǎng)頁制作和網(wǎng)站管理于一身的所見即所得的網(wǎng)頁編輯器，它是第一套針對專業(yè)網(wǎng)頁設(shè)計(jì)師特別開發(fā)的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕松地制作出跨越平臺限制和跨越瀏覽器限制的充滿動(dòng)感的網(wǎng)頁。1.3.1 Dreamweaver 8的功能與特點(diǎn)續(xù)的功能與特點(diǎn)續(xù)lDreamweaver 8是構(gòu)建網(wǎng)站和應(yīng)用程序的專業(yè)選擇工具。它提供可視化布局工具、應(yīng)用程序開發(fā)功能以與支持代碼編輯的強(qiáng)大組合，使各個(gè)技術(shù)級別的開發(fā)者和設(shè)計(jì)者都能夠快速創(chuàng)立可視化、吸引人的基于標(biāo)準(zhǔn)的站點(diǎn)和應(yīng)用程序。從基于CSS設(shè)計(jì)的領(lǐng)先支

10、持功能到手工編寫代碼功能，Dreamweaver 8都提供了集成、無縫環(huán)境中所需的專業(yè)工具。開發(fā)者可以選擇將Dreamweaver 與效勞器技術(shù)結(jié)合使用，構(gòu)建強(qiáng)大的Internet應(yīng)用程序，該應(yīng)用程序能夠?qū)⒂脩糸_發(fā)的程序連接到數(shù)據(jù)庫、實(shí)時(shí)數(shù)據(jù)效勞和原有系統(tǒng)。1.3.2 Dreamweaver 的工作界面的工作界面1.3.3 創(chuàng)立網(wǎng)頁創(chuàng)立網(wǎng)頁創(chuàng)立網(wǎng)頁的根本步驟如下：1啟動(dòng) Dreamweaver 程序。2設(shè)置網(wǎng)頁標(biāo)題。3保存網(wǎng)頁文件并設(shè)置網(wǎng)頁名稱。4輸入內(nèi)容并設(shè)置內(nèi)容格式。5保存網(wǎng)頁并測試。1.4.1 制作本地站點(diǎn)制作本地站點(diǎn)l建立本地站點(diǎn)l 在翻開的 Dreamweaver 文檔窗口中，選擇“站點(diǎn)菜單中的“新建站點(diǎn)命令，翻開 “定義無標(biāo)題站點(diǎn)對話框，在該對話框中進(jìn)展設(shè)置。l查看站點(diǎn)中的資源1.4.1 制作本地站點(diǎn)續(xù)制作本地站點(diǎn)續(xù)1.4.2 管理本地站點(diǎn)管理本地站點(diǎn)l文件的根本操作l 可以使用站點(diǎn)窗口菜單欄中的命令或右鍵快捷菜單對選中的文件進(jìn)展根本操作。l設(shè)置站點(diǎn)主頁l站點(diǎn)操作l翻開站點(diǎn)l編輯站點(diǎn)1.4.3 網(wǎng)站上傳網(wǎng)站上傳l申請空間l設(shè)置遠(yuǎn)程站點(diǎn)l上傳站點(diǎn)目標(biāo)規(guī)劃書目標(biāo)規(guī)劃書l制作環(huán)境的準(zhǔn)備l網(wǎng)站目標(biāo)確實(shí)定l網(wǎng)站的主題、風(fēng)格和創(chuàng)意點(diǎn)確