使用DW制作簡單網(wǎng)張課件

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

整個網(wǎng)站的制作流程：在Photoshop或者Fireworks中作出效果圖→切圖→在Dreamweaver中添加文字，定義樣式。

DW網(wǎng)站制作流程新建站點→站點文件命名→定義頁面屬性→插入表格→定義頁面大小→轉(zhuǎn)換到布局視圖→添加內(nèi)容→插入導(dǎo)航條→轉(zhuǎn)換到標準視圖工作→添加鏈接→使用代碼片斷→定義及應(yīng)用CSS→添加動態(tài)交互→鏈接站點各個頁面。4DW設(shè)計網(wǎng)頁的流程整個網(wǎng)站的制作流程：在PhotoshopDW界面介紹視圖切換代碼提示屬性面板標簽選擇器5DW界面介紹視圖切換5

錨點用于網(wǎng)頁中的定位，如網(wǎng)頁的上、中、下等；圖像占位符在需要使用圖形的地方插入一個占位圖形先“占領(lǐng)”著“地盤”；FireworksHTML為用Fireworks軟件切割出來的圖片；交換圖像為鼠標移上去時變?yōu)榱硪粓D片，增強動感；表格數(shù)據(jù)可以將其它文件的數(shù)據(jù)轉(zhuǎn)化為表格，插進網(wǎng)頁；標簽選擇器可以插入其它不常用的HTML標簽。6錨點用于網(wǎng)頁中的定位，如網(wǎng)頁的上、中、下等；定義站點Why

避免錯誤的出現(xiàn)：路徑錯誤，鏈接錯誤HOW1.建立一個文件夾用于存放網(wǎng)站的所有文件2.再按欄目分類(將圖片放置在image文件夾中)3.命名規(guī)則：使用英文或者拼音命名

網(wǎng)頁文件的后綴名*.htm或者*.html，網(wǎng)站首頁命名規(guī)則index.htm或者default.htm7定義站點Why網(wǎng)頁文件的后綴名*.htm或者*.html設(shè)置文件頭1、meta標簽說明2、設(shè)置網(wǎng)頁的編碼3、設(shè)置文檔標題4、定義關(guān)鍵字5、設(shè)置說明文字6、設(shè)置網(wǎng)頁的刷新8設(shè)置文件頭1、meta標簽說明81、meta標簽說明屬性名值說明namekeywords定義網(wǎng)頁的關(guān)鍵詞description提供網(wǎng)頁的簡短描述robots定義網(wǎng)頁的搜索引擎索引方式http-equivContent-type定義用戶的瀏覽器或相關(guān)設(shè)備如何顯示將要加載的數(shù)據(jù)，eg.定義網(wǎng)頁編碼refresh用于刷新與跳轉(zhuǎn)（重定向）頁面expires用于網(wǎng)頁緩存過期時間，一旦網(wǎng)頁過期將服務(wù)器上重新下載頁面pragma與no-cache用于定義頁面緩存。<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="keywords"content="網(wǎng)頁設(shè)計，浙江工業(yè)大學(xué)"/>91、meta標簽說明屬性名值說明keywords定義網(wǎng)頁的2、設(shè)置網(wǎng)頁的編碼<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>102、設(shè)置網(wǎng)頁的編碼<metahttp-equiv="Con設(shè)置網(wǎng)頁的編碼在所有情況下都用GB2312么？11設(shè)置網(wǎng)頁的編碼在所有情況下都用GB2312么？11設(shè)置網(wǎng)頁的編碼12設(shè)置網(wǎng)頁的編碼122、設(shè)置網(wǎng)頁的編碼132、設(shè)置網(wǎng)頁的編碼133、設(shè)置文檔標題<title>+++我的個人主頁+++</title>143、設(shè)置文檔標題<title>+++我的個人主頁+++</t4、定義關(guān)鍵字多個關(guān)鍵字用逗號分隔開來。輸入的關(guān)鍵字能反映主頁的內(nèi)容關(guān)鍵字不宜太多，一般在5個以內(nèi)。<metaname="keywords"content="網(wǎng)頁設(shè)計，浙江工業(yè)大學(xué)"/>154、定義關(guān)鍵字多個關(guān)鍵字用逗號分隔開來。<metaname5、設(shè)置說明文字說明文字和關(guān)鍵字一樣，可供搜索引擎尋找網(wǎng)頁。內(nèi)容盡量要簡明扼要。<metaname="description"content="wjb的個人站點，網(wǎng)頁設(shè)計"/>165、設(shè)置說明文字說明文字和關(guān)鍵字一樣，可供搜索引擎尋找網(wǎng)頁。6、設(shè)置網(wǎng)頁的刷新打開網(wǎng)站后的若干秒內(nèi)，讓瀏覽器自動跳轉(zhuǎn)到一個新網(wǎng)頁。用于需要經(jīng)常需要刷新的網(wǎng)頁。注意URL的輸入<metahttp-equiv="refresh"content=“3;URL="/>176、設(shè)置網(wǎng)頁的刷新打開網(wǎng)站后的若干秒內(nèi)，讓瀏覽器自動跳轉(zhuǎn)到一二、使用文本１、設(shè)置文本格式２、插入特殊符號３、段落與換行４、添加注釋與空格

5、插入并設(shè)置水平線<hr>6、設(shè)置段落縮進<blockquote>7、使用列表18二、使用文本１、設(shè)置文本格式18１、設(shè)置文本格式標題標簽<h#align=“對齊方式”>內(nèi)容</h#>#代表字體大小，取值1~6align屬性設(shè)置對齊方式，leftcenterright字體標簽<fontface=“字體類型”

size=“字號”

color=“顏色”>內(nèi)容</font>19１、設(shè)置文本格式標題標簽19１、設(shè)置文本格式字符標簽說明<b>...</b>粗體<i>...</i>斜體<u>...</u>對文本加下劃線<strong>...</strong>對文本加強效果，相當于粗體<big>...</big>在當前文字大小的基礎(chǔ)上再增大一級<small>...</small>在當前文字大小的基礎(chǔ)上再減小一級^...上標_...下標<em>...</em>強調(diào)文本，通常以斜體顯示20１、設(shè)置文本格式字符標簽說明<b>...</b>粗體<i>.１、設(shè)置文本格式DreamweaverCS4Dreamweaver8文本屬性設(shè)置窗口21１、設(shè)置文本格式DreamweaverCS4Dreamwe設(shè)置顏色顏色使用一個16進制的數(shù)值表示，如#FF0000，“#”是顏色標志。任何一種顏色都是由紅綠藍3個顏色通道按不同亮度的比例混合而成。前兩位代表顏色中紅色的亮度中間兩位代表綠色通道的亮度后面兩位代表藍色的亮度。22設(shè)置顏色顏色使用一個16進制的數(shù)值表示，如#FF0000，“2、插入特殊符號空格

>(大于號)><(小于號)<“(引號)"?(版權(quán)號)©232、插入特殊符號空格 >(大于號)><(3、段落與換行段落換行：<p>標記，直接enter鍵換行符換行：<br/>，shift鍵+enter鍵243、段落與換行段落換行：<p>標記，直接enter鍵244、添加注釋與空格添加注釋<!--注釋內(nèi)容-->添加空格輸入代碼

使用中文全角輸入法254、添加注釋與空格添加注釋255、插入并設(shè)置水平線語法：<hrwidth=“”size=“”color=“”aligh=“”noshade/>width設(shè)置寬度，單位pxsize設(shè)置厚度，color設(shè)置顏色align設(shè)置對齊方式noshae設(shè)置是否需要陰影265、插入并設(shè)置水平線語法：<hrwidth=“”size6、使用列表創(chuàng)建無序列表創(chuàng)建有序列表轉(zhuǎn)換列表類型276、使用列表創(chuàng)建無序列表27三、使用圖像網(wǎng)頁中的圖像種類圖像的HTML標記圖片與文字的對齊方式調(diào)整圖片大小、替換圖像、Alt屬性鼠標經(jīng)過圖像（RolloverImage）簡單的圖文混排28三、使用圖像網(wǎng)頁中的圖像種類28網(wǎng)頁中的圖像種類BMP（格式簡單、圖像信息豐富、不壓縮）GIF（壓縮比高、動畫、像素圖qq、256色）JPEG（壓縮率極高、有損壓縮、照片）PNG（透明顯示、兼有g(shù)if和jpeg的色彩模式）參考文獻web圖像格式簡述29網(wǎng)頁中的圖像種類BMP（格式簡單、圖像信息豐富、不壓縮）29圖像的HTML標記<imgsrc=“路徑”

alt=“替代文字”

width=“”height=“”align=“”>30圖像的HTML標記<imgsrc=“路徑”alt=“替代課內(nèi)練習(xí)—站點、文本、圖像的使用在DW中新建站點完成index.htm頁面網(wǎng)頁標題為+++我的個人網(wǎng)站+++插入圖像，輸入文字，做鏈接使用meta標簽，實現(xiàn)自動跳轉(zhuǎn)完成exapmle.htm頁面將article.txt中的文字作素材文字“散文《四季》”使用標題1,居中標題目錄內(nèi)容的文字分別使用有序列表，無序列表春、夏、秋、冬分別實現(xiàn)簡單圖文混排。31課內(nèi)練習(xí)—站點、文本、圖像的使用在DW中新建站點31四、使用超鏈接超鏈接的概念超鏈接的HTML標記超超鏈接的種類關(guān)于文檔路徑32四、使用超鏈接超鏈接的概念32超鏈接的概念指的是將分別獨立的網(wǎng)頁文檔緊密地連接起來的不可見的連接線。利用超級鏈接可以實現(xiàn)在網(wǎng)頁間和網(wǎng)頁中的跳轉(zhuǎn)

源端點

（源錨）

目標端點

（目標錨）超級鏈接的結(jié)構(gòu)一個網(wǎng)址一個網(wǎng)頁一幅圖像一段程序頁面中的某個位置文字圖像33超鏈接的概念指的是將分別獨立的網(wǎng)頁文檔緊密地連接起來的不可見超鏈接的HTML標記鏈接的HTML標記<ahref=“鏈接路徑”

target=“標題”

title=“打開方式”>鏈接文字</a>目標（Target）的說明：_blank為在新窗口中打開鏈接；站外鏈接_parent為當前文檔的父級框架集中展開網(wǎng)頁；_seft為在當前文檔的框架集中展開頁面；站內(nèi)鏈接_top為上級窗口（使用多級框架時）

34超鏈接的HTML標記鏈接的HTML標記34超鏈接的HTML標記鏈接的四種狀態(tài)a:link（未訪問）a:active（正在訪問）a:visited（訪問過）a:hover（懸停時）35超鏈接的HTML標記鏈接的四種狀態(tài)a:link（未訪問）35超鏈接的種類外部鏈接（站點外部）內(nèi)部鏈接E-mail鏈接（mailto:wjb@?subject=“郵件標題”）錨點鏈接圖像熱區(qū)創(chuàng)建空鏈接36超鏈接的種類外部鏈接（站點外部）36錨點鏈接作用：當網(wǎng)頁文章特別長時，快速定位方法：1、建立錨點鏈接<aname=“錨點名稱”></a>2、創(chuàng)建到錨點的鏈接

<ahref=“鏈接到網(wǎng)頁的地址#錨點名稱”>內(nèi)容</a>注意：1、同一網(wǎng)頁內(nèi)，錨點的名稱是唯一的

2、在鏈接錨時，引用的錨名稱是大小寫敏感的

3、鏈接和錨都不能嵌套37錨點鏈接作用：當網(wǎng)頁文章特別長時，快速定位37關(guān)于文檔路徑絕對路徑（使用完整的url地址）

Eg:相對路徑

index.htm../index.htm根相對路徑

/index.htm38關(guān)于文檔路徑絕對路徑（使用完整的url地址）38課內(nèi)練習(xí)—超鏈接的使用將example.htm另存為example2.htm練習(xí)使用站內(nèi)鏈接，站外鏈接，E-mail鏈接，錨點鏈接，地圖素材為china_map.gif39課內(nèi)練習(xí)—超鏈接的使用將example.htm另存為exam專題三使用DW制作簡單網(wǎng)頁40專題三使用DW制作簡單網(wǎng)頁1學(xué)習(xí)內(nèi)容Dreamweaver基本介紹定義站點設(shè)置文件頭使用文本使用圖像使用Flash動畫使用音頻使用視頻41學(xué)習(xí)內(nèi)容Dreamweaver基本介紹2AboutDreamweaverDreamweaver是一款專業(yè)的HTML編輯器，用于對Web站點、Web頁和Web應(yīng)用程序進行設(shè)計、編碼和開發(fā)。Dreamweaver是Adobe(Macromedia)公司出品的一種專業(yè)化的網(wǎng)頁創(chuàng)建工具,它采用所見即所得的編輯方式,通過特有的行為,模板,時間線等技術(shù),能夠快速高效地創(chuàng)建極具表現(xiàn)力和動感效果的網(wǎng)頁,使網(wǎng)頁創(chuàng)建過程變得簡單.42AboutDreamweaverDreamweaver是一DW設(shè)計網(wǎng)頁的流程

整個網(wǎng)站的制作流程：在Photoshop或者Fireworks中作出效果圖→切圖→在Dreamweaver中添加文字，定義樣式。

DW網(wǎng)站制作流程新建站點→站點文件命名→定義頁面屬性→插入表格→定義頁面大小→轉(zhuǎn)換到布局視圖→添加內(nèi)容→插入導(dǎo)航條→轉(zhuǎn)換到標準視圖工作→添加鏈接→使用代碼片斷→定義及應(yīng)用CSS→添加動態(tài)交互→鏈接站點各個頁面。43DW設(shè)計網(wǎng)頁的流程整個網(wǎng)站的制作流程：在PhotoshopDW界面介紹視圖切換代碼提示屬性面板標簽選擇器44DW界面介紹視圖切換5

錨點用于網(wǎng)頁中的定位，如網(wǎng)頁的上、中、下等；圖像占位符在需要使用圖形的地方插入一個占位圖形先“占領(lǐng)”著“地盤”；FireworksHTML為用Fireworks軟件切割出來的圖片；交換圖像為鼠標移上去時變?yōu)榱硪粓D片，增強動感；表格數(shù)據(jù)可以將其它文件的數(shù)據(jù)轉(zhuǎn)化為表格，插進網(wǎng)頁；標簽選擇器可以插入其它不常用的HTML標簽。45錨點用于網(wǎng)頁中的定位，如網(wǎng)頁的上、中、下等；定義站點Why

避免錯誤的出現(xiàn)：路徑錯誤，鏈接錯誤HOW1.建立一個文件夾用于存放網(wǎng)站的所有文件2.再按欄目分類(將圖片放置在image文件夾中)3.命名規(guī)則：使用英文或者拼音命名

網(wǎng)頁文件的后綴名*.htm或者*.html，網(wǎng)站首頁命名規(guī)則index.htm或者default.htm46定義站點Why網(wǎng)頁文件的后綴名*.htm或者*.html設(shè)置文件頭1、meta標簽說明2、設(shè)置網(wǎng)頁的編碼3、設(shè)置文檔標題4、定義關(guān)鍵字5、設(shè)置說明文字6、設(shè)置網(wǎng)頁的刷新47設(shè)置文件頭1、meta標簽說明81、meta標簽說明屬性名值說明namekeywords定義網(wǎng)頁的關(guān)鍵詞description提供網(wǎng)頁的簡短描述robots定義網(wǎng)頁的搜索引擎索引方式http-equivContent-type定義用戶的瀏覽器或相關(guān)設(shè)備如何顯示將要加載的數(shù)據(jù)，eg.定義網(wǎng)頁編碼refresh用于刷新與跳轉(zhuǎn)（重定向）頁面expires用于網(wǎng)頁緩存過期時間，一旦網(wǎng)頁過期將服務(wù)器上重新下載頁面pragma與no-cache用于定義頁面緩存。<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metaname="keywords"content="網(wǎng)頁設(shè)計，浙江工業(yè)大學(xué)"/>481、meta標簽說明屬性名值說明keywords定義網(wǎng)頁的2、設(shè)置網(wǎng)頁的編碼<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>492、設(shè)置網(wǎng)頁的編碼<metahttp-equiv="Con設(shè)置網(wǎng)頁的編碼在所有情況下都用GB2312么？50設(shè)置網(wǎng)頁的編碼在所有情況下都用GB2312么？11設(shè)置網(wǎng)頁的編碼51設(shè)置網(wǎng)頁的編碼122、設(shè)置網(wǎng)頁的編碼522、設(shè)置網(wǎng)頁的編碼133、設(shè)置文檔標題<title>+++我的個人主頁+++</title>533、設(shè)置文檔標題<title>+++我的個人主頁+++</t4、定義關(guān)鍵字多個關(guān)鍵字用逗號分隔開來。輸入的關(guān)鍵字能反映主頁的內(nèi)容關(guān)鍵字不宜太多，一般在5個以內(nèi)。<metaname="keywords"content="網(wǎng)頁設(shè)計，浙江工業(yè)大學(xué)"/>544、定義關(guān)鍵字多個關(guān)鍵字用逗號分隔開來。<metaname5、設(shè)置說明文字說明文字和關(guān)鍵字一樣，可供搜索引擎尋找網(wǎng)頁。內(nèi)容盡量要簡明扼要。<metaname="description"content="wjb的個人站點，網(wǎng)頁設(shè)計"/>555、設(shè)置說明文字說明文字和關(guān)鍵字一樣，可供搜索引擎尋找網(wǎng)頁。6、設(shè)置網(wǎng)頁的刷新打開網(wǎng)站后的若干秒內(nèi)，讓瀏覽器自動跳轉(zhuǎn)到一個新網(wǎng)頁。用于需要經(jīng)常需要刷新的網(wǎng)頁。注意URL的輸入<metahttp-equiv="refresh"content=“3;URL="/>566、設(shè)置網(wǎng)頁的刷新打開網(wǎng)站后的若干秒內(nèi)，讓瀏覽器自動跳轉(zhuǎn)到一二、使用文本１、設(shè)置文本格式２、插入特殊符號３、段落與換行４、添加注釋與空格

5、插入并設(shè)置水平線<hr>6、設(shè)置段落縮進<blockquote>7、使用列表57二、使用文本１、設(shè)置文本格式18１、設(shè)置文本格式標題標簽<h#align=“對齊方式”>內(nèi)容</h#>#代表字體大小，取值1~6align屬性設(shè)置對齊方式，leftcenterright字體標簽<fontface=“字體類型”

size=“字號”

color=“顏色”>內(nèi)容</font>58１、設(shè)置文本格式標題標簽19１、設(shè)置文本格式字符標簽說明<b>...</b>粗體<i>...</i>斜體<u>...</u>對文本加下劃線<strong>...</strong>對文本加強效果，相當于粗體<big>...</big>在當前文字大小的基礎(chǔ)上再增大一級<small>...</small>在當前文字大小的基礎(chǔ)上再減小一級^...上標_...下標<em>...</em>強調(diào)文本，通常以斜體顯示59１、設(shè)置文本格式字符標簽說明<b>...</b>粗體<i>.１、設(shè)置文本格式DreamweaverCS4Dreamweaver8文本屬性設(shè)置窗口60１、設(shè)置文本格式DreamweaverCS4Dreamwe設(shè)置顏色顏色使用一個16進制的數(shù)值表示，如#FF0000，“#”是顏色標志。任何一種顏色都是由紅綠藍3個顏色通道按不同亮度的比例混合而成。前兩位代表顏色中紅色的亮度中間兩位代表綠色通道的亮度后面兩位代表藍色的亮度。61設(shè)置顏色顏色使用一個16進制的數(shù)值表示，如#FF0000，“2、插入特殊符號空格

>(大于號)><(小于號)<“(引號)"?(版權(quán)號)©622、插入特殊符號空格 >(大于號)><(3、段落與換行段落換行：<p>標記，直接enter鍵換行符換行：<br/>，shift鍵+enter鍵633、段落與換行段落換行：<p>標記，直接enter鍵244、添加注釋與空格添加注釋<!--注釋內(nèi)容-->添加空格輸入代碼

使用中文全角輸入法644、添加注釋與空格添加注釋255、插入并設(shè)置水平線語法：<hrwidth=“”size=“”color=“”aligh=“”noshade/>width設(shè)置寬度，單位pxsize設(shè)置厚度，color設(shè)置顏色align設(shè)置對齊方式noshae設(shè)置是否需要陰影655、插入并設(shè)置水平線語法：<hrwidth=“”size6、使用列表創(chuàng)建無序列表創(chuàng)建有序列表轉(zhuǎn)換列表類型666、使用列表創(chuàng)建無序列表27三、使用圖像網(wǎng)頁中的圖像種類圖像的HTML標記圖片與文字的對齊方式調(diào)整圖片大小、替換圖像、Alt屬性鼠標經(jīng)過圖像（RolloverImage）簡單的圖文混排67三、使用圖像網(wǎng)頁中的圖像種類28網(wǎng)頁中的圖像種類BMP（格式簡單、圖像信息豐富、不壓縮）GIF（壓縮比高、動畫、像素圖qq、256色）JPEG（壓縮率極高、有損壓縮、照片）PNG（透明顯示、兼有g(shù)if和jpeg的色彩模式）參考文獻web圖像格式簡述68網(wǎng)頁中的圖像種類BMP（格式簡單、圖像信息豐富、不壓縮）29圖像的HTML標記<imgsrc=“路徑”

alt=“替代文字”

width=“”height=“”align=“”>69圖像的HTML標記<imgsrc=“路徑”alt=“替代課內(nèi)練習(xí)—站點、文本、圖像的使用在DW中新建站點完成index.htm頁面網(wǎng)頁標題為+++我的個人網(wǎng)站+++插入圖像，輸入文字，做鏈接使用meta標簽，實現(xiàn)自動跳轉(zhuǎn)完成exapmle.htm頁面將article.txt中的文字作素材文字“散文《四季》”使用標題1,居中標題目錄內(nèi)容的文字分別使用有序列表，無序列表春、夏、秋、冬分別實現(xiàn)簡單圖文混排。70課內(nèi)練習(xí)—站點、文本、圖像的使用在DW中新建站點31四、使用超鏈接超鏈接的概念超鏈接的HTML標記超超鏈接的種類關(guān)于文檔路徑71四、使用超鏈接超鏈接的概念32超鏈接的概念指的是將分別獨立的網(wǎng)頁文檔緊密地連接起來的不可見的