1、專題三 使用DW制作簡單網(wǎng)頁,1,學(xué)習(xí)內(nèi)容,Dreamweaver基本介紹 定義站點(diǎn) 設(shè)置文件頭 使用文本 使用圖像 使用Flash動(dòng)畫 使用音頻 使用視頻,2,About Dreamweaver,Dreamweaver是一款專業(yè)的 HTML 編輯器，用于對 Web 站點(diǎn)、Web 頁和 Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。 Dreamweaver是Adobe(Macromedia)公司出品的一種專業(yè)化的網(wǎng)頁創(chuàng)建工具,它采用所見即所得的編輯方式,通過特有的行為,模板,時(shí)間線等技術(shù),能夠快速高效地創(chuàng)建極具表現(xiàn)力和動(dòng)感效果的網(wǎng)頁,使網(wǎng)頁創(chuàng)建過程變得簡單.,3,DW設(shè)計(jì)網(wǎng)頁的流程,整個(gè)網(wǎng)站的制作流程：

2、在Photoshop或者Fireworks中作出效果圖切圖在Dreamweaver中添加文字，定義樣式。 DW網(wǎng)站制作流程 新建站點(diǎn)站點(diǎn)文件命名定義頁面屬性插入表格定義頁面大小轉(zhuǎn)換到布局視圖添加內(nèi)容插入導(dǎo)航條轉(zhuǎn)換到標(biāo)準(zhǔn)視圖工作添加鏈接使用代碼片斷定義及應(yīng)用CSS添加動(dòng)態(tài)交互鏈接站點(diǎn)各個(gè)頁面。,4,DW界面介紹,視圖切換 代碼提示 屬性面板 標(biāo)簽選擇器,5,錨點(diǎn)用于網(wǎng)頁中的定位，如網(wǎng)頁的上、中、下等；圖像占位符在需要使用圖形的地方插入一個(gè)占位圖形先“占領(lǐng)”著“地盤” ；Fireworks HTML為用Fireworks軟件切割出來的圖片；交換圖像為鼠標(biāo)移上去時(shí)變?yōu)榱硪粓D片，增強(qiáng)動(dòng)感；表格數(shù)據(jù)可以

3、將其它文件的數(shù)據(jù)轉(zhuǎn)化為表格，插進(jìn)網(wǎng)頁；標(biāo)簽選擇器可以插入其它不常用的HTML標(biāo)簽。,6,定義站點(diǎn),Why 避免錯(cuò)誤的出現(xiàn)：路徑錯(cuò)誤，鏈接錯(cuò)誤 HOW 1.建立一個(gè)文件夾用于存放網(wǎng)站的所有文件 2.再按欄目分類 (將圖片放置在image文件夾中) 3.命名規(guī)則：使用英文或者拼音命名,網(wǎng)頁文件的后綴名*.htm 或者*.html， 網(wǎng)站首頁命名規(guī)則index.htm或者default.htm,7,設(shè)置文件頭,1、meta標(biāo)簽說明 2、設(shè)置網(wǎng)頁的編碼 3、設(shè)置文檔標(biāo)題 4、定義關(guān)鍵字 5、設(shè)置說明文字 6、設(shè)置網(wǎng)頁的刷新,8,1、meta標(biāo)簽說明, ,9,2、設(shè)置網(wǎng)頁的編碼,10,設(shè)置網(wǎng)頁的編碼,1

4、1,設(shè)置網(wǎng)頁的編碼,12,2、設(shè)置網(wǎng)頁的編碼,13,3、設(shè)置文檔標(biāo)題,+我的個(gè)人主頁+,14,4、定義關(guān)鍵字,多個(gè)關(guān)鍵字用逗號分隔開來。 輸入的關(guān)鍵字能反映主頁的內(nèi)容 關(guān)鍵字不宜太多，一般在5個(gè)以內(nèi)。,15,5、設(shè)置說明文字,說明文字和關(guān)鍵字一樣，可供搜索引擎尋找網(wǎng)頁。 內(nèi)容盡量要簡明扼要。,16,6、設(shè)置網(wǎng)頁的刷新,打開網(wǎng)站后的若干秒內(nèi)，讓瀏覽器自動(dòng)跳轉(zhuǎn)到一個(gè)新網(wǎng)頁。 用于需要經(jīng)常需要刷新的網(wǎng)頁。 注意URL的輸入,17,二、使用文本,、設(shè)置文本格式 、插入特殊符號 、段落與換行 、添加注釋與空格 5、插入并設(shè)置水平線 6、設(shè)置段落縮進(jìn) 7、使用列表,18,、設(shè)置文本格式,標(biāo)題標(biāo)簽 內(nèi)容 #

5、代表字體大小，取值16 align屬性設(shè)置對齊方式，left center right 字體標(biāo)簽 內(nèi)容,19,、設(shè)置文本格式,20,、設(shè)置文本格式,Dreamweaver CS4,Dreamweaver 8,文本屬性設(shè)置窗口,21,設(shè)置顏色,顏色使用一個(gè)16進(jìn)制的數(shù)值表示，如#FF0000，“#”是顏色標(biāo)志。 任何一種顏色都是由紅綠藍(lán)3個(gè)顏色通道按不同亮度的比例混合而成。 前兩位代表顏色中紅色的亮度 中間兩位代表綠色通道的亮度 后面兩位代表藍(lán)色的亮度。,22,2、插入特殊符號,23,3、段落與換行,段落換行：標(biāo)記，直接enter鍵 換行符換行：，shift鍵+ enter鍵,24,4、添加注釋

6、與空格,添加注釋 添加空格 輸入代碼 使用中文全角輸入法,25,5、插入并設(shè)置水平線,語法： width 設(shè)置寬度，單位px size 設(shè)置厚度 ， color 設(shè)置顏色 align 設(shè)置對齊方式 noshae 設(shè)置是否需要陰影,26,6、使用列表,創(chuàng)建無序列表 創(chuàng)建有序列表 轉(zhuǎn)換列表類型,27,三、使用圖像,網(wǎng)頁中的圖像種類 圖像的HTML標(biāo)記 圖片與文字的對齊方式 調(diào)整圖片大小、替換圖像、Alt屬性 鼠標(biāo)經(jīng)過圖像（Rollover Image） 簡單的圖文混排,28,網(wǎng)頁中的圖像種類,BMP（格式簡單、圖像信息豐富、不壓縮） GIF（壓縮比高、動(dòng)畫、像素圖qq、256色） JPEG（壓縮率

7、極高、有損壓縮、照片） PNG（透明顯示、兼有g(shù)if和jpeg的色彩模式） 參考文獻(xiàn) web圖像格式簡述,29,圖像的HTML標(biāo)記,30,課內(nèi)練習(xí)站點(diǎn)、文本、圖像的使用,在DW中新建站點(diǎn) 完成index.htm頁面 網(wǎng)頁標(biāo)題為+我的個(gè)人網(wǎng)站+ 插入圖像，輸入文字，做鏈接 使用meta標(biāo)簽，實(shí)現(xiàn)自動(dòng)跳轉(zhuǎn) 完成exapmle.htm頁面 將article.txt中的文字作素材 文字“散文四季”使用標(biāo)題1,居中 標(biāo)題目錄內(nèi)容的文字分別使用有序列表，無序列表 春、夏、秋、冬分別實(shí)現(xiàn)簡單圖文混排。,31,四、使用超鏈接,超鏈接的概念 超鏈接的HTML標(biāo)記 超超鏈接的種類 關(guān)于文檔路徑,32,超鏈接的概念

8、,指的是將分別獨(dú)立的網(wǎng)頁文檔緊密地連接起來的不可見的連接線。 利用超級鏈接可以實(shí)現(xiàn)在網(wǎng)頁間和網(wǎng)頁中的跳轉(zhuǎn),源端點(diǎn)（源錨）,目標(biāo)端點(diǎn)（目標(biāo)錨）,超級鏈接的結(jié)構(gòu),一個(gè)網(wǎng)址 一個(gè)網(wǎng)頁 一幅圖像 一段程序 頁面中的某個(gè)位置,文字 圖像,33,超鏈接的HTML標(biāo)記,鏈接的HTML標(biāo)記 鏈接文字 目標(biāo)（Target）的說明： _blank為在新窗口中打開鏈接；站外鏈接 _parent為當(dāng)前文檔的父級框架集中展開網(wǎng)頁； _seft為在當(dāng)前文檔的框架集中展開頁面；站內(nèi)鏈接 _top為上級窗口（使用多級框架時(shí)）,34,超鏈接的HTML標(biāo)記,鏈接的四種狀態(tài),a:link（未訪問） a:active（正在訪問） a:visited（訪問過） a:hover（懸停時(shí)）,35,超鏈接的種類,外部鏈接 （站點(diǎn)外部） 內(nèi)部鏈接 E-mail鏈接（mailto:?subject=“郵件標(biāo)題”） 錨點(diǎn)鏈接 圖像熱區(qū) 創(chuàng)建空鏈接,36,錨點(diǎn)鏈接,作用：當(dāng)網(wǎng)頁文章特別長時(shí)，快速定位 方法： 1、建立錨點(diǎn)鏈接 2、創(chuàng)建到錨點(diǎn)的鏈接 內(nèi)容 注意：1、同一網(wǎng)頁內(nèi)，錨點(diǎn)的名稱是唯一的 2、在鏈接錨時(shí)，引用的錨名稱是大小寫敏感的 3、鏈接和錨都不能嵌套,37,關(guān)于文檔路徑,絕對路徑（使用完整的url地址） Eg: