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

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

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

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

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

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

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

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

size=“字號(hào)”

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

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

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

alt=“替代文字”

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

源端點(diǎn)

（源錨）

目標(biāo)端點(diǎn)

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

target=“標(biāo)題”

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

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

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

2、在鏈接錨時(shí)，引用的錨名稱(chēng)是大小寫(xiě)敏感的

3、鏈接和錨都不能嵌套37錨點(diǎn)鏈接作用：當(dāng)網(wǎng)