網(wǎng)頁制作流程

1、網(wǎng)頁設(shè)計計基礎(chǔ)教學(xué)目的的： 本章將帶帶領(lǐng)用戶戶認(rèn)識DDreaamweeaveer MMX，了了解其新新增功能能。在開開始學(xué)習(xí)習(xí)該軟件件之前，了解一一下Drreammweaaverr MXX的工作作界面的的一些簡簡單設(shè)置置。通過過本章的的學(xué)習(xí)，用戶能能熟悉DDreaamweeaveer MMX的工工作界面面，并能能自行設(shè)設(shè)置具有有獨特的的個性化化的工作作環(huán)境。理解DDW站點點的作用用，并掌掌握建立立站點的的方法及及站點維維護的方方法。教學(xué)重點點： 1、認(rèn)識識Dreeamwweavver MX。 2、新增增功能。 3、Drreammweaaverr MXX主窗口口。 4、自定定義工作作環(huán)境。 5、

2、利用用Dreeamwweavver建建立站點點的方法法教學(xué)難點點：1、認(rèn)識識Dreeamwweavver MX。 2、新增增功能。 3、自定定義工作作環(huán)境。教學(xué)內(nèi)容容與教學(xué)過程程：一、 介介紹網(wǎng)頁頁制作這這門課程程1學(xué)習(xí)習(xí)這門課課程的目目的： 讓學(xué)生生掌握HHTMLL語言、以及利利用相關(guān)關(guān)網(wǎng)頁制制作工具具制作網(wǎng)網(wǎng)頁的基基本方法法與技能能。學(xué)生生通過這這門課程程的學(xué)習(xí)習(xí)，能夠夠具備綜綜合運用用專業(yè)軟軟件進行行小型網(wǎng)網(wǎng)站開發(fā)發(fā)和靜態(tài)態(tài)網(wǎng)頁頁頁面設(shè)計計的能力力，同時時積累一一定的實實踐經(jīng)驗驗，為今今后從事事相應(yīng)的的網(wǎng)站設(shè)設(shè)計制作作工作打打下良好好基礎(chǔ)。2這門門課程的的教學(xué)內(nèi)內(nèi)容： 在制作作軟件上上：

3、以網(wǎng)網(wǎng)頁制作作軟件DDreaamWeeaveer MMX為主主干進行行網(wǎng)頁制制作教學(xué)學(xué)，同時時選擇了了Flaash MX版版本來制制作網(wǎng)頁頁中的動動畫素材材，選擇擇了圖形形圖像工工具Phhotooshoop 77.0版版本軟件件來處理理和制作作網(wǎng)頁中中的圖片片。 教教學(xué)內(nèi)容容安排上上按照學(xué)學(xué)生學(xué)習(xí)習(xí)網(wǎng)頁的的漸進規(guī)規(guī)律劃以以及學(xué)校校制訂的的計劃主主要學(xué)習(xí)習(xí)第1、2、33、5、6、99章，主主要包括括網(wǎng)頁制制作的基基礎(chǔ)知識識、Drreammweaaverr MXX軟件的的使用，初學(xué)者者利用現(xiàn)現(xiàn)有的素素材設(shè)計計制作出出一個簡簡單的網(wǎng)網(wǎng)頁；利利用Phhotooshoop7和和 Fllashh MXX軟

4、件來來美化網(wǎng)網(wǎng)頁，以以及網(wǎng)頁頁布局和和用色方方面的美美術(shù)知識識，如何何設(shè)計網(wǎng)網(wǎng)頁的版版面和結(jié)結(jié)構(gòu)，還還要能對對供給的的素材按按照網(wǎng)站站的特點點進行適適當(dāng)?shù)拿烂阑幚砝?；還能能掌握中中小型網(wǎng)網(wǎng)站的建建立方法法。 3這門門課程的的教學(xué)和和學(xué)習(xí)方方法： 教學(xué)上上以一個個個案例例為基礎(chǔ)礎(chǔ)，采用用項目教教學(xué)的方方法，由由淺入深深的介紹紹網(wǎng)頁制制作的各各個知識識點；教教學(xué)中以以學(xué)生會會操作為為目的，重視學(xué)學(xué)生動手手能力和和自學(xué)能能力的培培養(yǎng) 同同學(xué)們學(xué)學(xué)習(xí)時除除了要掌掌握相應(yīng)應(yīng)的操作作技能以以外，更更要重視視操作技技能的使使用，要要努力完完成每章章教學(xué)案案例的制制作以及及課后素素材案例例。在不不斷的練練習(xí)

5、過程程中熟悉悉和升華華所學(xué)的的操作技技能。同同時，要要學(xué)會學(xué)學(xué)習(xí)，即即要學(xué)會會與老師師或同學(xué)學(xué)之間技技術(shù)心得得的交流流，要學(xué)學(xué)會能自自主的依依靠其他他資源（網(wǎng)絡(luò)、報紙雜雜志等）來擴展展所學(xué)的的知識體體系。課前思考考：1、Drreammweaaverr軟件是是干什么么用的？2、試試用一下下Dreeamwweavver，你覺得得這個軟軟件在界界面上更更象Woord還還是Phhotooshoop，為為什么？3、試用用一下DDreaamweeaveer，按按默認(rèn)格格式保存存，文件件的擴展展名是什什么？4、雙擊擊網(wǎng)頁文文件，會會自動打打開Drreammweaaverr軟件嗎嗎？這點點上與WWordd軟件

6、相相同嗎？1.1 Dreeamwweavver的的基本概概念1、了解解Dreeamwweavver與與IE有有什么區(qū)區(qū)別？ Drreammweaaverr是制作作網(wǎng)頁的的工具，用它可可以生成成.httm或.htmml文件件，而IIE是瀏瀏覽網(wǎng)頁頁的工具具，用IIE只能能看網(wǎng)頁頁，而不不能改網(wǎng)網(wǎng)頁，修修改網(wǎng)頁頁還是需需要網(wǎng)頁頁制作工工具。2、做網(wǎng)網(wǎng)頁只能能使用DDreaamweeaveer一種種工具嗎嗎？ 常用用的網(wǎng)頁頁制作軟軟件有DDreaamweeaveer和FFronntPaage。Dreeamwweavver由由美國MMacrromeediaa公司開開發(fā)，雖雖然初學(xué)學(xué)者感到到比較難難學(xué)，

7、但但它的功功能更強強大，生生成的網(wǎng)網(wǎng)頁代碼碼質(zhì)量好好，是當(dāng)當(dāng)今最流流行的網(wǎng)網(wǎng)頁制作作工具，適合專專業(yè)網(wǎng)頁頁設(shè)計人人員使用用，近年年來它還還獲得過過不少大大獎呢。Froontppagee是微軟軟公司開開發(fā)的OOffiice辦辦公軟件件中的一一部分，比較容容易上手手，但功功能不太太強大，我們只只在需要要時（如如向網(wǎng)頁頁中加入入微軟格格式的視視頻），才會使使用FrronttPagge。3、Drreammweaaverr最新版版是多少少？ Drreammweaaverr從2.0、33.0、4.00、MXX到現(xiàn)在在最新的的MX220044版，平平均每過過一年就就出一個個新版?？梢娪嬘嬎銠C是是多么的的富有

8、活活力。今今年常用用的是MMX版，建議大大家在家家里的電電腦上也也將這個個版本，以便與與學(xué)校的的相同。對于軟軟件，我我并不認(rèn)認(rèn)為版本本越新越越好，它它們的基基本功能能還是相相同的，一般版版本越高高，對計計算機的的要求也也越高，如果計計算機配配置不高高，初學(xué)學(xué)時還是是找個低低版本比比較好，當(dāng)然所所裝的軟軟件必須須與書本本上的相相同，這這也是學(xué)學(xué)習(xí)其它它軟件的的基本要要求。4、Drreammweaaverr與Fiirewworkk、Fllashh有何關(guān)關(guān)系？ 它們們都是MMacrromeediaa公司的的軟件，Dreeamwweavver是是網(wǎng)頁制制作工具具，F(xiàn)iirewworkk是圖形形處理工工

9、具，與與phootosshopp相似，一般用用于網(wǎng)頁頁圖形的的制作，F(xiàn)laash是是動畫制制作工具具，在制制作好的的網(wǎng)頁時時，一般般先用FFireeworrk和FFlassh先制制作好網(wǎng)網(wǎng)頁中要要用到的的圖形和和動畫素素材，再再用Drreammweaaverr把這些些素材做做成一張張網(wǎng)頁，只會DDreaamweeaveer，不不會圖形形處理和和動畫制制作，是是做不出出好的網(wǎng)網(wǎng)頁的。有人把把這三個個軟件稱稱作網(wǎng)頁頁設(shè)計“三劍客客”。1.2認(rèn)認(rèn)識DrreammWeaaverr1.DrreammWeaaverr的作用用和特色色2.DrreammWeaaverr功能界界面的分分解3.DrreammWe

10、aaverr工作流流程4. DDreaamWeeaveer 的的版本、安裝、打開、保存等等操作演演示：練練習(xí)制作作第一張張網(wǎng)頁作業(yè)業(yè)一在主窗窗口中輸輸入以下下文字，并按以以下格式式排版，最后把把文件以以“學(xué)號姓姓名.hhtm”為名保保存在桌桌面上。注意難難點：設(shè)設(shè)置字體體、水平平線、二二個全角角空格、回車會會自動空空一行，Shiift+回車就就不會空空行了。1.3 創(chuàng)建本本地站點點引入：為什么么要建站站點？在在正式開開始制作作網(wǎng)頁之之前，最最好先定定義一個個新網(wǎng)站站，這是是因為：更好地利利用站點點窗口對對站點文文件進行行管理。 盡可能的的減少一一些錯誤誤的出現(xiàn)現(xiàn)，如路路徑出錯錯，鏈接接出錯（特

11、別是是新手），當(dāng)熟熟練掌握握了DRREAMMWEAAVERR的使用用后，并并且只需需制作單單個網(wǎng)頁頁時候可可以省去去這一步步； 還值得說說的是，新手做做網(wǎng)頁，就只知知道做網(wǎng)網(wǎng)頁，不不懂得條條理性、結(jié)構(gòu)性性，一個個文件放放這里，另一個個文件放放那里，或者所所有文件件都放在在同一文文件夾內(nèi)內(nèi)，這樣樣顯得很很亂。 所以，行行家的做做法是：（1先建建立一個個文件夾夾用于存存放網(wǎng)站站的所有有文件，再在文文件內(nèi)建建立幾個個文件夾夾，將文文件分類類，如圖圖片文件件放在iimagge文件件夾內(nèi)，HTMML文件件放在HHTMLL文件夾夾內(nèi)（2）當(dāng)當(dāng)然，如如果站點點比較大大，文件件比較多多，可以以先按欄欄目分類類

12、，在欄欄目里再再分類。（3）還還有文件件的命名名也是非非常重要要的，新新手通常常不注意意這些，隨便亂亂起些名名字，這這樣過些些時候自自己也搞搞不懂是是什么了了（特別別是文件件比較多多的時候候），我我們要做做到一看看文件的的名字就就知道是是什么內(nèi)內(nèi)容的文文件。（4）行行家的做做法是：用英文文或者拼拼音給文文件命名名（推薦薦英文），不要要使用中中文的名名字（因因為有的的機器對對中文支支持不太太好，有有可能出出現(xiàn)鏈接接的錯誤誤，你自自己以為為正確的的東西在在別人看看來有可可能是錯錯的）。1、什什么是站站點？站站點是存存放一組組網(wǎng)頁的的一個存存儲地方方，一般般是一個個磁盤目目錄，在在該目錄錄中存放放該

13、網(wǎng)站站的所有有網(wǎng)頁及及有關(guān)的的圖片、FLAASH動動畫、CCSS樣樣式文件件等。建建立站點點時，我我們一般般在自已已的電腦腦上建一一個文件件夾，然然后把制制作的所所有網(wǎng)頁頁及圖片片放在此此文件夾夾中，最最后把這這個目錄錄上傳到到WEBB服務(wù)器器上，以以供英特特網(wǎng)上的的所有用用戶瀏覽覽。問：網(wǎng)頁？網(wǎng)站站答：不不等問：網(wǎng)頁？主頁頁答：不不等主頁頁通常主主頁命名名為inndexx.httm,iindeex.hhtmll,deefauult.htmm,deefauult.htmml2、站點的的典型文文件結(jié)構(gòu)構(gòu)站點的的典型文文件結(jié)構(gòu)構(gòu)3、如如何建立立一個空空站點準(zhǔn)準(zhǔn)備工作作建文文件夾在在硬盤上上某一個個

14、位置建建一個總總的文件件夾My wweb pic musiic flassh moviie 例：在DD盤上建建立自己己帳號為為名的文文件夾，把這個個文件夾夾定義為為站點，站點名名的“我的個個人網(wǎng)站站”操作步步驟：第一步：在D盤盤上建立立文件夾夾第二步：在DWW軟件中中，選擇擇菜單“站點-新建站站點”，可以以按向?qū)?dǎo)一步一一步操作作，但我我建議大大家直接接選“高級”卡片第三步：在“本地信信息”中，填填入“站點名名稱”，把“本地根根文件夾夾”指定為為該目錄錄4、如如何把一一個已有有目錄定定義為一一個站點點例：首首先單擊擊下載網(wǎng)網(wǎng)站，把把網(wǎng)站包包下載到到D盤，并解壓壓縮，在在D盤上上會自動動生成一一

15、個文件件夾，按按上面所所講的步步驟，把把該目錄錄定義為為一個站站點，站站點名為為“祖國騰騰飛”5、使使用站點點管理器器定義完完站點后后，就可可以使用用站點管管理器來來管理站站點了。顯示站站點面板板：單擊擊菜單“窗口-站點”。我們們可以在在站點管管理器中中通過右右擊“新建文文件夾”、“新建文文件”、“文件重重命名”、“刪除文文件”，也可可以通過過拖動，把文件件移動到到其它文文件夾。第二章 網(wǎng)網(wǎng)頁的基基本操作作教學(xué)目的的：使學(xué)生了了解編輯輯HTMML文檔檔的各種種具體操操作，包包括如何何為頁面面添加文文字，圖圖片。教學(xué)重點點：1、編輯輯文本的的各種方方法2、在網(wǎng)網(wǎng)頁中插插入圖片片的方法法教學(xué)難點點

16、：1、編輯輯文本的的各種方方法2、在網(wǎng)網(wǎng)頁中插插入圖片片的方法法教學(xué)方法法：講演演法教學(xué)課時時：4課課時教學(xué)過程程：2.1文文本操作作及修飾飾一、特殊殊字符的的輸入1、輸入入 等特特殊英文文字符單擊擊“插入入”工具具欄上的的“字符符”面板板。2、輸入入等中中文符號號采采用輸入入法中的的軟鍵盤盤3、輸入入空格（推薦使使用全角角空格）單單擊“插插入”菜菜單-“特殊符符號”-“不換換行空格格”按“CCtrll+Shhiftt+Sppacee”組合合鍵單擊“插入”工具欄欄上的“字符”面板上上的“不不換行空空格”按按鈕。把中中文輸入入法切換換到全角角模式，輸入全全角空格格4、插入入日期和和時間。單單擊“

17、插插入”工工具欄上上的“常常用”面面板上的的“日期期”按鈕鈕。練習(xí)一：輸入以以下內(nèi)容容，以“1.hhtm”保存在在桌面上上。特殊符號號： &; 中文符號號：現(xiàn)在時間間：20006-02-22二、列表表的制作作列表表分為無無序列表表（項目目列表）和有序序列表（編號列列表）；各各個列表表項之間間沒有順順序級別別之分時時選無序序列表，否則選選有序列列表 。制作作方法：第一一步：先先輸入各各個項目目，每個個項目成成為一段段（一個個項目輸輸入完成成后，要要按回車車鍵，不不能使用用SHIIFT回車）第二二步：選選中要轉(zhuǎn)轉(zhuǎn)換為項項目列表表的所有有段落第三三步：單單擊屬性性面板上上的項目目列表或或編號列列表按

18、鈕鈕第四四步：如如果要實實現(xiàn)多級級(嵌套套)的項項目列表表，可單單擊“屬屬性”面面板上的的“縮進進”命令令練習(xí)二：電腦專業(yè)業(yè) 網(wǎng)絡(luò)技術(shù)術(shù) 網(wǎng)絡(luò)1班班 網(wǎng)絡(luò)2班班 信息技術(shù)術(shù) 信息1班班 信息2班班 電腦維護護 美術(shù)專業(yè)業(yè) 工藝?yán)L畫畫 廣告設(shè)計計 操作作提示：第第一步：輸入“電腦專專業(yè)”等等11行行，每行行按回車車，不能能用SHHIFTT+回車車第第二步：全部選選中，單單擊“屬屬性”面面板中的的無序列列表按鈕鈕第第三步：選中“網(wǎng)絡(luò)技技術(shù)電腦維維護”77個段落落，選“屬性”面板中中的縮進進按鈕第四四步：同同樣方法法讓“網(wǎng)網(wǎng)絡(luò)1班班”等班班級縮進進第第五步：選中“網(wǎng)絡(luò)11班、網(wǎng)網(wǎng)絡(luò)2班班”，單單擊“

19、屬屬性”面面板中的的有序列列表按鈕鈕，使其其變?yōu)橛杏行蛄斜肀碛袝r設(shè)置置好項目目符號后后，再打打進去的的字也變變成項目目符號了了，解決決這個問問題的方方法是，在設(shè)置置項目符符號前，先把后后面的字字輸入幾幾字，再再去設(shè)置置項目符符號。選做練習(xí)習(xí)：飄雨的季季節(jié) 困惑的心心情 羞澀的蓓蓓蕾 年輕的你你我 藍色的小小屋 飄雨的季季節(jié) 困惑的心心情 羞澀的蓓蓓蕾 年輕的你你我 藍色的小小屋 飄雨的季季節(jié) 困惑的心心情 羞澀的蓓蓓蕾 年輕的你你我 藍色的小小屋 飄雨的季季節(jié) 困惑的心心情 羞澀的蓓蓓蕾 年輕的你你我 藍色的小小屋 三、樣式式的使用用(一)樣樣式的作作用：避免免重復(fù)操操作，提提高操作作效率；統(tǒng)

20、一網(wǎng)網(wǎng)頁的風(fēng)風(fēng)格(二)HHTMLL樣式HTTML樣樣式與WWordd中的格格式刷功功能相似似。如果果網(wǎng)頁中中多個地地方需要要設(shè)置“紅色、黑體、5字號號”等三三個屬性性，如果果一個一一個去設(shè)設(shè)置效率率不高，我們可可以先定定義一個個“HTTML樣樣式”為為包含“紅色、黑體、5字號號”等三三個屬性性，以后后到需要要設(shè)置這這三個屬屬性的地地方應(yīng)用用一下這這個HTTML樣樣式即可可，所以以使用“HTMML樣式式”可以以提高工工作效率率。1、建立立HTMML樣式式第一一步：在在窗口菜菜單中打打開“HHTMLL樣式”面板（屬于設(shè)設(shè)計面板板組）第二二步：單單擊面板板下方的的“新建建樣式”按鈕（11）輸入入名稱

21、（22）指定定應(yīng)用范范圍（33）指定定應(yīng)用時時的效果果（44）設(shè)置置屬性2、應(yīng)用用HTMML樣式式選中中文字，單擊“HTMML樣式式”面板板中定義義的樣式式即可3、清除除HTMML樣式式選中中先設(shè)置置HTMML樣式式的文字字，單擊擊面板上上的“清清除所選選樣式”或“清清除段落落樣式”4、修改改HTMML樣式式雙擊擊相應(yīng)的的樣式名名5、刪除除HTMML樣式式選擇擇要刪除除的樣式式，單擊擊“HTTML樣樣式”面面板中的的刪除按按鈕練習(xí)三：。定義義一個HHTMLL樣式，名稱為為“reed-hhei-5”，屬性為為“紅色色、黑體體、5字字號”，任意輸輸入一段段文字，把這個個HTMML樣式式，多次次應(yīng)用

22、到到網(wǎng)頁中中。(三)CCSS樣樣式（層層疊樣式式表）CSSS是干什什么用的的？你還記記得在網(wǎng)網(wǎng)頁中最最大字號號是多少少嗎？對對了是77號，再再大就不不行了，用CSSS樣式式，你可可以讓一一個字占占滿一個個屏幕(如果你你喜歡這這樣做)。用CCSS樣樣式還能能設(shè)置文文字的上上標(biāo)、下下標(biāo)、下下劃線、文字背背景等。CSSS的功能能可強大大了!不不會CSSS，等等于沒學(xué)學(xué)過網(wǎng)頁頁制作。HTMML樣式式與CSSS樣式式的區(qū)別別？同樣都都是樣式式，但功功能有很很大的不不同，HHTMLL樣式的的功能只只是把原原來網(wǎng)頁頁設(shè)置的的幾個屬屬性合并并為一個個名稱，起到方方便設(shè)置置的目的的，但并并不能增增加其它它功能，

23、而CSSS樣式式只對原原網(wǎng)頁設(shè)設(shè)置的擴擴充，許許多原來來不能設(shè)設(shè)的屬性性通過CCSS樣樣式可以以設(shè)了。1、建立立CSSS樣式第一一步：打打開CSSS樣式式面板第二二步：單單擊面板板下方的的“新建建CSSS樣式”按鈕（11）指定定CSSS樣式的的名稱(最好字字母開頭頭)，（22）“類類型”選選“創(chuàng)建建自定義義樣式”(其它它二種以以后介紹紹)，（33）“定定義在”選“僅僅對該文文檔”，單擊“確定”（44）設(shè)置置CSSS樣式（CSSS樣式功功能非常常多，首首先要求求掌握的的是“類類型”和和“背景景”二張張卡片的的內(nèi)容。）2、應(yīng)用用CSSS樣式選中文文字，然然后在面面板上單單擊相應(yīng)應(yīng)的樣式式名3、清除

24、除CSSS樣式選中先設(shè)設(shè)置CSSS樣式式的文字字，單擊擊面板上上的“無無CSSS樣式”4、修改改CSSS樣式5、刪除除CSSS樣式2.2 在網(wǎng)頁頁中插入入圖象一、網(wǎng)頁頁圖像的的常用格格式1、GIFF：支持持2566色，可可以做成成逐幀動動畫，可可以設(shè)置置透明背背景，一一般用于于網(wǎng)頁中中的小圖圖標(biāo)，如如 2、JPGG：支持持百萬級級真彩，一般用用于網(wǎng)頁頁中的照照片，如如3、PNGG：有GGIF、JPGG的所有有優(yōu)點，是網(wǎng)頁頁圖片發(fā)發(fā)展的方方向，但但圖片文文件大小小稍大。如DWW中也能能插入FFLASSH動畫畫、聲音音文件、影視文文件等，這些內(nèi)內(nèi)容不屬屬本章內(nèi)內(nèi)容，但但插入這這些文件件的方法法與插

25、入入圖像相相似，有有興趣的的同學(xué)請請自行摸摸索。DWW只支持持以上三三種格式式的圖片片，其它它如BMMP格式式是也可可以在IIE瀏覽覽器中被被顯示，但在DDW中無無法顯示示，由于于BMPP文件體體積很大大，在網(wǎng)網(wǎng)頁中一一般不推推薦。小知識：圖像像有分辨辨率這個個技術(shù)指指標(biāo)，由由于網(wǎng)頁頁圖片一一般用于于在屏幕幕上顯示示，而顯顯示屏的的分辨率率為每英英寸722象素，所以放放到網(wǎng)頁頁去的圖圖片分辨辨率不用用很高。如果用用數(shù)碼像像機拍照照片，選選用最低低的6440X4480分分辨率即即可，千千萬不用用把高分分辨率的的數(shù)碼照照片直接接做到網(wǎng)網(wǎng)頁中，那些會會影響打打開網(wǎng)頁頁的速度度，而且且浪費存存儲空間間

26、。補充知識識：如何何保存網(wǎng)網(wǎng)頁中的的圖片在IIE瀏覽覽器中右右擊該圖圖片，選選“圖片片另存為為”即可可。二、在網(wǎng)網(wǎng)頁中插插入圖片片1、插入入圖片前前先把網(wǎng)網(wǎng)頁保存存一下，以免圖圖片丟失失2、圖片片要放在在網(wǎng)頁的的同一個個目錄或或子目錄錄下3、把光光標(biāo)定位位在需要要插入圖圖片的位位置，選選插入面面板上的的“圖像像”按鈕鈕4、網(wǎng)頁頁、圖片片文件名名只能是是英文或或數(shù)字不不能用中中文三、圖象象與文字字的位置置關(guān)系在WWORDD排版中中，圖像像的位置置可以任任意拖動動，而在在DW中中不行。網(wǎng)頁中中的圖片片只有獨獨立、左左對齊、右對齊齊三種狀狀態(tài)，不不能自由由擺放圖圖片的位位置。練習(xí)一：制作如如下網(wǎng)頁頁

27、，完成成后以“1.hhtm”保存。對齊圖像像:使用用圖像屬屬性檢查查器設(shè)置置圖像相相對于同同一段落落或行中中其他元元素的對對齊方式式?？梢砸詫D像像與同一一行中的的文本、另一個個圖像、插件或或其他元元素對齊齊。您還還可以使使用對齊齊按鈕（左對齊齊、右對對齊、居居中對齊齊）設(shè)置置圖像的的水平對對齊方式式?！澳J(rèn)值值”通常常指定基基線對齊齊。（根根據(jù)站點點訪問者者的瀏覽覽器的不不同，默默認(rèn)值也也會有所所不同。）“基線和和底部”將文本本（或同同一段落落中的其其他元素素）的基基線與選選定對象象的底部部對齊?！绊敹恕睂D像像的頂端端與當(dāng)前前行中最最高項（圖像或或文本）的頂端端對齊?！爸虚g”將圖像像的中部

28、部與當(dāng)前前行的基基線對齊齊?！拔谋旧仙戏健睂D像的的頂端與與文本行行中最高高字符的的頂端對對齊?！敖^對中中間”將將圖像的的中部與與當(dāng)前行行中文本本的中部部對齊。“絕對對底部”將圖像像的底部部與文本本行（這這包括字字母下部部，例如如在字母母 g 中）的的底部對對齊?！白髮R齊”將所所選圖像像放置在在左邊，文本在在圖像的的右側(cè)換換行。如如果左對對齊文本本在行上上處于對對象之前前，它通通常強制制左對齊齊對象換換到一個個新行?！坝覍R”將將圖像放放置在右右邊，文文本在對對象的左左側(cè)換行行。如果果右對齊齊文本在在行上處處于對象象之前，它通常常強制右右對齊對對象換到到一個新新行。小技巧：圖像必必須插入

29、入到文字字的最前前面，這這樣圖像像才能和和文字上上部對齊齊，如果果圖像插插入到下下部則不不能實現(xiàn)現(xiàn)這種效效果?？伎寄悖寒?dāng)你把把鼠標(biāo)移移到右邊邊的小圖圖上，會會顯示一一行文字字“Hii,你好好”，看看到了第三章 建立網(wǎng)網(wǎng)頁鏈接接教學(xué)內(nèi)容容：Dreaamweeaveer 88提供多多種創(chuàng)建建超鏈接接的方法法，可創(chuàng)創(chuàng)建到文文擋、圖圖像、多多媒體文文件或可可下載軟軟件的鏈鏈接，可可以創(chuàng)建建到文檔檔內(nèi)任意意位置的的任何文文本或圖圖像的鏈鏈接等。教學(xué)重點點：內(nèi)部鏈接接的創(chuàng)建建方法。外部鏈接接的創(chuàng)建建方法。錨點鏈接接的創(chuàng)建建方法。E-maail鏈鏈接的創(chuàng)創(chuàng)建方法法。教學(xué)難點點：錨點鏈接接的創(chuàng)建建方法。教學(xué)方

30、法法：講演演法教學(xué)課時時：4課課時教學(xué)內(nèi) 容與助助學(xué)過程程：3.1 編織網(wǎng)網(wǎng)站鏈接接足球球新聞3.1.1 案案例綜述述 本本例以編編織網(wǎng)站站中的各各種超鏈鏈接為主主要目的的，介紹紹創(chuàng)建超超鏈接種種種方法法和技巧巧3.1.2 案案例分析析為實現(xiàn)網(wǎng)網(wǎng)頁的跳跳轉(zhuǎn)，將將創(chuàng)建：n 到網(wǎng)網(wǎng)站內(nèi)頁頁面的超超鏈接內(nèi)部部鏈接；n 到網(wǎng)網(wǎng)站外頁頁面的超超鏈接外部部鏈接；n 電子子郵件形形式的超超鏈接E-maiil鏈接接；n 到網(wǎng)網(wǎng)頁某一一特定位位置的超超鏈接錨點點鏈接；n 以及及其他一一些鏈接接。3.1.3 實實現(xiàn)步驟驟一、準(zhǔn)備備網(wǎng)頁內(nèi)內(nèi)容步驟1選中站站點；步驟2將素材材文件夾夾中的相相關(guān)文檔檔復(fù)制到到站點文文件

31、夾下下。二、創(chuàng)建建超鏈接接1、創(chuàng)建建內(nèi)部鏈鏈接網(wǎng)站內(nèi)內(nèi)部頁面面之間創(chuàng)創(chuàng)建相互互鏈接關(guān)關(guān)系步驟1選中頁頁面中的的文字或或圖像，在屬性性面板中中單擊“鏈接”文本框框右側(cè)的的文件夾夾圖標(biāo)，以通過過瀏覽選選擇一個個文件步驟2從“目目標(biāo)”下下拉菜單單中，選選擇文檔檔的打開開位置。n_bllankk :新新打開的的空窗口口n_paarennt：如如果是嵌嵌套的框框架，則則在父框框架中打打開。n_seelf：會在當(dāng)當(dāng)前網(wǎng)頁頁所在的的窗口或或框架中中打開。n_toop：會會在完整整的瀏覽覽器窗口口中打開開。2、創(chuàng)建建外部鏈鏈接創(chuàng)建鏈鏈接到絕絕對地址址的外部部鏈接（1） 選選中文字字或圖像像之后，直接在在屬性面

32、面板的“鏈接”文本框框中輸入入外部的的鏈接地地址，如如htttp:/wwww.fffirre.nnet（2） 然然后在“目標(biāo)”下拉菜菜單中設(shè)設(shè)置這個個鏈接的的目標(biāo)窗窗口。3、創(chuàng)建建Emmaill鏈接當(dāng)瀏覽覽者單擊擊電子郵郵件鏈接接時，可可即時打打開瀏覽覽器默認(rèn)認(rèn)的電子子郵件程程序處理理程序。方法：（1） 選選中文本本和圖像像（2） 插插入欄常用電子郵郵件鏈接接輸入入郵件地地址（3） 或或在屬性性面板的的鏈接欄欄中直接接輸入 HYPERLINK mailto: maillto:郵件地地址4、錨點點鏈接是指同同一個頁頁面中的的不同位位置鏈接接。分為兩步步：（1） 創(chuàng)創(chuàng)建命名名錨記，就是在在文檔中中

33、設(shè)置位位置標(biāo)記記，并給給該位置置一個名名稱，以以便引用用。（2） 創(chuàng)創(chuàng)建到命命名錨記記的鏈接接5、創(chuàng)建建其他類類型的鏈鏈接（1）創(chuàng)創(chuàng)建下載載鏈接n 當(dāng)被被鏈接的的文件是是exee文件或或zipp文件等等瀏覽器器不支持持的類型型時，這這些文件件會被下下載，這這就是網(wǎng)網(wǎng)上下載載的方法法。n 鏈接接到下載載文件的的方法，和鏈接接到網(wǎng)頁頁的方法法完全一一樣。（2）、創(chuàng)建空空鏈接n 空鏈鏈接用來來激活頁頁面中的的對象或或文本。當(dāng)文本本或?qū)ο笙蟊患せ罨詈?，可可以為之之添加行行為。方法：選選中要制制作空鏈鏈接的對對象，在在鏈接文文本框中中直接輸輸入。n 在一一般站點點首頁的的導(dǎo)航欄欄中的首首頁鏈接接，就可可

34、以是一一個空鏈鏈接6、創(chuàng)建建跳轉(zhuǎn)菜菜單跳轉(zhuǎn)菜單單是文檔檔中的彈彈出式菜菜單，可可以創(chuàng)建建到可在在瀏覽器器中打開開的任何何文件類類型的鏈鏈接。方法：（1） 插插入欄表單跳轉(zhuǎn)菜菜單（2） 在在“插入入跳轉(zhuǎn)菜菜單”對對話框中中，單擊擊號添添加菜單單項（3） 在在“選擇擇時。轉(zhuǎn)轉(zhuǎn)到URRL”文文本框中中，輸入入該文件件的路徑徑。7、創(chuàng)建建圖像地地圖圖像地圖圖指已被被分為多多個區(qū)域域（熱點點）的圖圖像。當(dāng)當(dāng)用戶單單擊某個個熱點時時，會發(fā)發(fā)生某種種操作。方法：（1） 選選中圖像像（2） 在在圖像屬屬性面板板中，使使用熱區(qū)區(qū)工具（矩形、橢圓、多邊形形），在在圖像上上劃分熱熱區(qū)。（3） 為為繪制的的每一個個熱

35、區(qū)設(shè)設(shè)置不同同的鏈接接地址和和替代文文字。3.2 超鏈接接概述3.2.1 超超鏈接的的類型n 內(nèi)部部鏈接這種鏈鏈接的目目標(biāo)端點點是本站站中的其其他文檔檔。利用用這種鏈鏈接，可可以跳轉(zhuǎn)轉(zhuǎn)到本站站點其他他的頁面面上。n 外部部鏈接這種鏈鏈接的目目標(biāo)端點點是本站站點之外外的站點點或文檔檔。利用用這種鏈鏈接，可可以跳轉(zhuǎn)轉(zhuǎn)到其他他的網(wǎng)站站上。3.2.1 超超鏈接的的類型n Emmaill鏈接單擊這這種鏈接接，可以以啟動電電子郵件件程序書書寫郵件件，并發(fā)發(fā)送到指指定的地地址。n 錨點點鏈接這種鏈鏈接的目目標(biāo)端點點是文檔檔中的命命名錨記記，利用用這種鏈鏈接，可可以跳轉(zhuǎn)轉(zhuǎn)到當(dāng)前前文檔中中的某一一指定位位置上，

36、也可以以跳轉(zhuǎn)到到其他文文檔中的的某一指指定位置置上。3.2.2 鏈鏈接路徑徑（1）絕絕對路徑徑：如果果在鏈接接中使用用完整的的URLL地址，這種鏈鏈接路徑徑就稱作作絕對路路徑。路路徑同鏈鏈接的源源端點無無關(guān)。（2）相相對路徑徑：相對對路徑可可以表述述源端點點同目標(biāo)標(biāo)端點之之間的相相互位置置，它同同源端點點的位置置密切相相關(guān)。（3）基基于目錄錄的路徑徑：所有有的路徑徑都是從從站點的的根目錄錄開始的的，它同同源端點點的位置置無關(guān)。通常用用一個斜斜線“/”表示示根目錄錄。3.2.3創(chuàng)創(chuàng)建超鏈鏈接（1） 在在文檔窗窗口中選選中想作作為鏈接接的文本本或圖片片（2） 在在屬性面面板鏈接接一項的的空白處處填

37、入鏈鏈接的路路徑，或或者單擊擊圖標(biāo)，在彈出出的【選選擇文件件】對話話框中，選定要要鏈接的的文檔及及采用哪哪種方式式表達路路徑。（3） 鏈鏈接的對對象可以以是多樣樣的，如如圖片文文件，電電子表格格，或者者某個網(wǎng)網(wǎng)站。 3.2.4 插插入導(dǎo)航航條導(dǎo)航條中中按鈕圖圖像的狀狀態(tài)根據(jù)據(jù)瀏覽者者的鼠標(biāo)標(biāo)動作而而改變。方法： 11、將光光標(biāo)放到到要插入入導(dǎo)航條條的位置置； 22、選擇擇插入|圖像對對象|導(dǎo)導(dǎo)航條命命令 ； 33、或選選擇插入入|常用用|圖像像|導(dǎo)航航條命令令。3.3 實戰(zhàn)演演練每周周星運第四章 表格處處理教學(xué)內(nèi)容容：本章介紹紹了表格格的基本本操作及及應(yīng)用表表格進行行版式設(shè)設(shè)計的方方法和步步驟

38、，較較詳細(xì)地地介紹了了在標(biāo)準(zhǔn)準(zhǔn)、擴展展、布局局三種視視圖下表表格的應(yīng)應(yīng)用，從從而使網(wǎng)網(wǎng)頁布局局能夠得得心應(yīng)手手。教學(xué)重點點：表格的基基本操作作應(yīng)用表格格布局（標(biāo)準(zhǔn)視視圖下）布局表格格在表格及及單元格格中輸入入各種網(wǎng)網(wǎng)頁元素素的方法法表格格式式化等操操作方法法。教學(xué)難點點：三種種布局模模式的應(yīng)應(yīng)用。教學(xué)方法法：講演演法教學(xué)課時時：4課課時教學(xué)內(nèi) 容與助助學(xué)過程程：4.1 創(chuàng)創(chuàng)建網(wǎng)站站相冊初初識表格格4.1.1 案案例綜述述使使用Drreammweaaverr 8中中提供的的【創(chuàng)建建網(wǎng)站相相冊】命命令，自自動生成成足球明明星頁pphotto.hhtm。從中使使讀者初初步認(rèn)識識表格的的基本操操作方法

39、法及其作作用。4.1.2 案案例分析析使使用【創(chuàng)創(chuàng)建網(wǎng)站站相冊】命令創(chuàng)創(chuàng)建的PPhotto.hhtm頁頁是采用用表格布布局，將將圖片的的縮略圖圖排列在在網(wǎng)頁中中的。n 表格格的修改改和美化化n 表格格的插入入n 添加加或刪除除行列n 拆分分合并單單元格等等基本操操作4.1.3 實實現(xiàn)步驟驟一、創(chuàng)建建網(wǎng)站像像冊方法：1、將需需制作相相冊的圖圖片放在在源圖像像文件夾夾中，同同時建立立一個空空目標(biāo)文文件夾，用來存存放系統(tǒng)統(tǒng)生成的的圖片和和文件。2、執(zhí)行行 “命命令|創(chuàng)創(chuàng)建網(wǎng)站站相冊”命令3、在【創(chuàng)建網(wǎng)網(wǎng)站相冊冊】對話話框中輸輸入相應(yīng)應(yīng)的參數(shù)數(shù)，即可可。二、網(wǎng)站站相冊的的修改方法： 選選擇“頁頁面屬性

40、性”，可可以進行行文字、背景、顏色，以及表表格的一一些修改改。三、相冊冊表格的的美化 選擇“命令|格式化化表格”命令。4.2 表表格的基基本操作作4.2.1 插插入表格格【插入】【表表格】命命令，或或單擊【插入】欄中的的【常用用】類型型中的【插入表表格】按按鈕4.2.2選選定表格格和單元元格表格包括括行、列列、單元元格3個個組成部部分 。1、選定定整個表表格2、選定定行或列列3、選定定單元格格4.2.3調(diào)調(diào)整表格格的大小小1、選定定表格鼠標(biāo)拖拖動 。2、調(diào)整整行和列列的寬度度鼠標(biāo)放在在一列的的上面，出現(xiàn)向向下的箭箭頭時，單擊，就可以以選中一一列。在在屬性面面板中可可以設(shè)置置所選列列的寬和和高。

41、4.2.4 設(shè)設(shè)置表格格和單元元格的屬屬性1. 設(shè)置置表格屬屬性2. 設(shè)置置單元格格屬性4.2.5 添添加/刪刪除行列列1. 通過過表格【屬性】面板增增加與刪刪除表格格的行和和列2. 通過過【修改改】菜單單完成增增加與刪刪除表格格的行和和列4.2.6單單元格的的合并和和拆分1、合并并單元格格按按Ctrrl，點點單元格格，選中中表格，在屬性性面板中中點“合合并所選選單元格格，使用用跨度”。2、拆分分單元格格在在單元格格中單擊擊，選中中單元格格。點擊擊屬性面面板中的的“拆分分單元格格為行或或列”，設(shè)置拆拆分方式式。4.2.7單單元格的的復(fù)制、粘貼、移動和和清除在設(shè)計計網(wǎng)頁時時，可以以一次復(fù)復(fù)制、粘

42、粘貼、移移動和清清除一個個或多個個單元格格。操作作方法如如下：在網(wǎng)頁編編輯窗口口中選中中要復(fù)制制的對象象 復(fù)制按Cttrl+C，或或【編輯輯】【復(fù)制】命令。 移動按Cttrl+X，或或【編輯輯】【剪切】命令令。 粘貼按Cttrl+V，或或【編輯輯】【粘貼】命令。 拖動按住CCtrll拖，則完成成復(fù)制操操作。直直接拖曳曳可完成成對象的的操作。 清除按Deelette，或或【編輯輯】【清除】命令。 4.2.8 表表格的嵌嵌套 嵌套表表是在表表格中的的一個表表格。在在一個單單元格中中，插入入一個表表格，就就是嵌套套表。 將光標(biāo)標(biāo)插入當(dāng)當(dāng)前表格格的某個個單元格格中，然然后可選選擇【插插入】【表格格】命

43、令令，或單單擊【插插入】欄欄的【常常用】類類型中的的【插入入表格】按鈕4.3 網(wǎng)網(wǎng)頁的頁頁面布局局4.3.1 網(wǎng)網(wǎng)頁布局局類型n “國國”字型型n 拐角角型n 標(biāo)題題正文型型n 左右右框架型型n 上下下框架型型n 綜合合框架型型n 封面面型n Fllashh型n 變化化型4.3.2 關(guān)關(guān)于第一一屏 一般般來講，在80006600的的屏幕顯顯示模式式(這也也是最常常用的)下，在在IE安安裝后默默認(rèn)的狀狀態(tài)(即即工具欄欄地址欄欄等沒有有改變)下，IIE窗口口內(nèi)能看看到的部部分為7778ppx4435ppx.4.3.3 有有關(guān)導(dǎo)航航欄的位位置 一般般來講，導(dǎo)航欄欄要在“第一屏屏”能顯顯示出來來，但是

44、是有時第第一屏可可能會小小于上面面所說的的4355px，基于這這點考慮慮，那種種橫向放放置的導(dǎo)導(dǎo)航欄要要優(yōu)于縱縱向的導(dǎo)導(dǎo)航欄考考慮4.3.4 什什么樣的的布局是是最好的的n 如果果內(nèi)容非非常多，就要考考慮用“國字型型”或拐拐角型；n 如果果內(nèi)容不不算太多多而一些些說明性性的東西西比較多多，則可可以考慮慮標(biāo)題正正文型；n 那幾幾種框架架結(jié)構(gòu)的的一個共共同特點點就是瀏瀏覽方便便，速度度快，但但結(jié)構(gòu)變變化不靈靈活；n 而如如果是一一個企業(yè)業(yè)網(wǎng)站想想展示一一下企業(yè)業(yè)形象或或個人主主頁想展展示個人人風(fēng)采，封面性性是首選選；n Fllashh型更靈靈活一些些，好的的Flaash大大大豐富富了網(wǎng)頁頁，但是是

45、它不能能表達過過多的文文字信息息。4.4 使使用表格格的其他他視圖Dreaamweeaveer 88提供了了標(biāo)準(zhǔn)視視圖、擴擴展視圖圖、布局局視圖33種視圖圖模式。通常使使用的是是標(biāo)準(zhǔn)視視圖，可可通過插插入欄的的“布局局”類別別，切換換到布局局視圖或或擴展視視圖。4.4.1 擴擴展視圖圖擴擴展視圖圖的主要要作用是是臨時向向文檔中中的所有有表格添添加單元元格的邊邊距和間間距，并并且增加加表格的的邊框，這樣可可以使編編輯操作作更加容容易 。4.4.2 布布局視圖圖在在“布局局視圖”方式下下利用表表格進行行網(wǎng)頁排排版設(shè)計計更為直直觀方便便。通過過鼠標(biāo)自自由拖拽拽就可繪繪制任意意的表格格布局，且可自自由

46、移動動。4.4.3 創(chuàng)創(chuàng)建布局局表格和和布局單單元格1、繪繪制布局局表格2、繪繪制布局局單元格格3、移移動布局局表格和和布局單單元格 4.4.4設(shè)設(shè)置布局局表格和和單元格格屬性1、設(shè)設(shè)置布局局表格屬屬性2、設(shè)設(shè)置布局局單元格格的屬性性4.5應(yīng)用表表格布局局頁面布布局案例例4.5.1 案案例綜述述本例例使用表表格進行行頁面布布局，從從中使讀讀者掌握握以下知知識要點點1 表表格在用用于頁面面布局時時的屬性性設(shè)置。2 表表格的嵌嵌套。3 表表格細(xì)線線的制作作。第五章 層的應(yīng)應(yīng)用教學(xué)內(nèi)容容：本章介紹紹了關(guān)于于層的創(chuàng)創(chuàng)建、設(shè)設(shè)置及相相關(guān)使用用技巧，并通過過具體的的實例讓讓讀者真真正掌握握層的運運用。了了

47、解層在在布局中中的優(yōu)勢勢和劣勢勢，理解解利用層層的屬性性可制作作多種動動態(tài)效果果。教學(xué)重點點：層的創(chuàng)建建、選擇擇、編輯輯、保存存等操作作方法層的屬性性設(shè)置在層中輸輸入各種種網(wǎng)頁元元素的方方法層及嵌套套層、層層的疊放放次序、層的可可見性等等內(nèi)容。教學(xué)難點點：嵌套層的的創(chuàng)建方方法層的相關(guān)關(guān)屬性的的設(shè)置教學(xué)方法法：講演演法教學(xué)課時時：4課課時教學(xué)內(nèi)容容與助學(xué)學(xué)過程：5.1 制作層層布局頁頁面“環(huán)環(huán)游世界界”5.1.1 實實例綜述述通過過本例的的學(xué)習(xí)，讀者可可充分體體會使用用層布局局頁面的的隨意性性。5.1.2 實實例分析析不論論文字還還是圖片片都是采采用層來來進行定定位的，因此在在例中我我們逐步步介

48、紹n 如何何在頁面面插入層層n 如何何通過控控制層的的Z軸參參數(shù)來設(shè)設(shè)置層之之間的重重疊關(guān)系系n 如何何精確定定位層等等操作方方法。5.1.3實實現(xiàn)步驟驟插入入層在在層中添添加內(nèi)容容精確確定位層層，控制制大小設(shè)置層層之間的的疊放次次序。5.2 層層的基本本操作5.2.1 創(chuàng)創(chuàng)建層方法：1、插入入法 插入布局對對象層層2、拖放放法 拖層圖圖標(biāo)到編編輯區(qū)3、繪制制法 單擊層層圖標(biāo)后后，到編編輯區(qū)拖拖動鼠標(biāo)標(biāo)繪制。5.2.2 激激活和選選中層方法：單擊層的的激活標(biāo)標(biāo)志，或或?qū)觾?nèi)任任何地方方 將光標(biāo)置置于該層層內(nèi)，然然后單擊擊標(biāo)標(biāo)簽。 單擊層邊邊界。 在層面板板中單擊擊層。（shhiftt可選擇擇多個

49、層層）。 5.2.3 刪刪除層方法：n 當(dāng)選選中一個個層后，按Deelette鍵或或單擊【剪切】按鈕，可刪除除該層。n 也可可在層面面板中刪刪除該層層5.2.4調(diào)調(diào)整、移移動和對對齊層1、調(diào)整整層的大大小方法：1) 選中需需要調(diào)整整的層，此時在在層的邊邊框四周周出現(xiàn)88個黑色色活動塊塊，用鼠鼠標(biāo)拖曳曳某個活活動塊，即可調(diào)調(diào)整層的的大小。2) 選中需需要調(diào)整整的層，在層的的【屬性性】面板板的【寬寬】和【高】，兩個文文本框中中，輸入入層的寬寬度和高高度和高高度尺寸寸，可精精確調(diào)整整該層的的尺寸。2、移動動層前提：n “防防止重疊疊”未被被勾選。方法：n 選定定層，出出現(xiàn)層激激活標(biāo)志志，用鼠鼠標(biāo)左鍵

50、鍵拖該標(biāo)標(biāo)志。n 選定定層，用用鍵盤方方向鍵移移動層。3、 對對齊層n 選定定多個層層，對齊齊的標(biāo)準(zhǔn)準(zhǔn)是最后后一個選選擇的層層，該層層控制點點的實心心點，而而其他為為空心點點。n 修改改對齊齊對齊齊下緣。5.3 層的屬屬性設(shè)置置5.3.1 設(shè)設(shè)置層的的屬性層編號：層的名名稱。 左和上：距頁面面或父層層的左上上角相對對位置 寬和高：層的寬寬度和高高度。 Z軸：層層的重疊疊順序。 可見性：層的初初始顯示示狀況（可見或或隱藏） 背景圖像像、背景景顏色： 溢出：確確定當(dāng)層層中內(nèi)容容超出設(shè)設(shè)定大小小時要采采取的行行動。 剪輯：定定義層的的可見區(qū)區(qū)域，并并用于將將該范圍圍外的內(nèi)內(nèi)容裁剪剪掉。 5.3.2

51、層層面板的的使用選擇【窗口】【其其他】【層】命令，或按FF2鍵，可打開開【層】面板 。選定某個個層 更改層名名 顯示、隱隱藏層 改變層的的疊放次次序 創(chuàng)建和取取消嵌套套層 禁止層重重疊 5.4 層與表表格互換換5.4.1 將將層轉(zhuǎn)換換為表格格操作步驟驟如下:（1） 選中中要轉(zhuǎn)換換為層的的表格。（2） 選擇擇“修改改”|“轉(zhuǎn)換表表格到層層”命令令，系統(tǒng)統(tǒng)將打開開“轉(zhuǎn)換換表格為為層”對對話框（3） 選中中合適的的布局工工具復(fù)選選框后，單擊【確定】按鈕，表格就就可按要要求轉(zhuǎn)換換為層。 5.4.2 表表格轉(zhuǎn)換換為層n 問題題：不是是所有的的瀏覽器器都支持持層。n 解決決方法：使用層層創(chuàng)建網(wǎng)網(wǎng)頁布局局，

52、然后后將層轉(zhuǎn)轉(zhuǎn)換為表表格。（1） 打開要要將層轉(zhuǎn)轉(zhuǎn)換為表表格的頁頁面。（2） 選擇【修改】【轉(zhuǎn)轉(zhuǎn)換】【層到到表格】命令，系統(tǒng)將將打開【轉(zhuǎn)換層層為表格格】對話話框.（3） 選擇好好對話框框中的選選項后，單擊【確定】按鈕，層布局局的頁面面就可轉(zhuǎn)轉(zhuǎn)換成表表格布局局的頁面面5.5 實戰(zhàn)戰(zhàn)演練冷冷酷青春春第六章 框架教學(xué)內(nèi)容容：本章主要要講了框框架的使使用，包包括創(chuàng)建建框架、命名框框架、設(shè)設(shè)置框架架以及保保存框架架等操作作。在使使用框架架的過程程中一定定要明白白框架的的基本結(jié)結(jié)構(gòu)?？蚩蚣茉诰W(wǎng)網(wǎng)頁的設(shè)設(shè)計中可可用來制制作電子子圖書。使用框框架的一一個難點點框架集集和框架架之間的的關(guān)系，通常在在一個框框架中

53、所所有的框框架都是是通過一一個框架架集文檔檔來調(diào)用用各個框框架的。另一個個難點就就是框架架屬性的的設(shè)置。這些都都需要在在實際的的操作過過程中不不斷地去去思考和和摸索才才能夠熟熟練掌握握。教學(xué)重點點： 創(chuàng)建框架架網(wǎng)頁框架網(wǎng)頁頁的選擇擇設(shè)置框架架和框架架集的屬屬性編輯框架架創(chuàng)建框架架間頁面面的超鏈鏈接教學(xué)難點點： 設(shè)置框架架和框架架集的屬屬性創(chuàng)建框架架間頁面面的超鏈鏈接教學(xué)方法法：講演演法教學(xué)課時時：4課課時教學(xué)內(nèi) 容與助助學(xué)過程程：6.1 應(yīng)用框框架制作作電子書書6.1.1 案案例綜述述本例例將制作作一個HHTMLL在線教教程的頁頁面，頁頁面分三三個區(qū)域域，在頂頂部放置置標(biāo)題欄欄，左側(cè)側(cè)框架放放

54、置導(dǎo)航航欄（即即目錄），單擊擊鏈接，在右側(cè)側(cè)框架中中打開鏈鏈接內(nèi)容容 一個框框架橫放放在頂部部：Weeb站點點的徽標(biāo)標(biāo)和標(biāo)題題 一個較較窄的框框架位于于左側(cè)：導(dǎo)航條條 一個大大框架占占據(jù)頁面面的其余余部分：主要內(nèi)內(nèi)容 框架：是指瀏瀏覽器窗窗口中的的一個區(qū)區(qū)域。 框架集集：定義義了一組組框架的的布局和和屬性，包括框框架的數(shù)數(shù)目、框框架的大大小和位位置以及及在每個個框架中中初始顯顯示頁面面的URRL。6.1.2 案案例分析析n 理解解框架集集、框架架的概念念。n 創(chuàng)建建框架集集n 制作作框架、鏈接頁頁面n 創(chuàng)建建超鏈接接n 保存存框架集集6.1.3 實實現(xiàn)步驟驟1. 創(chuàng)創(chuàng)建框架架集 。2. 制制作

55、框架架頁3. 創(chuàng)創(chuàng)建導(dǎo)航航欄超鏈鏈接4. 保保存框架架集6.2 框架的的基本操操作插入預(yù)定定義的框框架集自行創(chuàng)建建 創(chuàng)建框架架集的方方法：6.2.1 創(chuàng)創(chuàng)建框架架和框架架集選擇預(yù)定定義的框框架集 創(chuàng)建包含含當(dāng)前文文檔的框框架集1) 打開開一個文文檔2) 插入入欄|布布局|框框架3) 框架架集圖標(biāo)標(biāo)的藍色色區(qū)域表表示當(dāng)前前文檔創(chuàng)建新的的空預(yù)定定義框架架集4) 文件件|新建建5) “新新建文檔檔”對話話框|框框架集6) 選擇擇一個所所需框架架集設(shè)計自己己的框架架集 創(chuàng)建框架架集1) 新建建一個空空白HTTML文文檔2) 修改改|框架架集|拆拆分左(右、上上、下要要)框架架3) 在光光標(biāo)停留留在某個

56、個框架中中，可繼繼續(xù)拆分分注：利用用“查看看|可視視化助理理|框架架邊框”使邊框框可見刪除框架架集1) 選擇擇要刪除除框架的的邊框2) 將邊邊框拖到到上一級級框架的的邊框上上調(diào)整框架架大小3) 拖動動邊框6.2.2 選選擇框架架和框架架集1) 選擇擇框架n 在“文檔”窗口中中：按AAlt+單擊框框架內(nèi)部部n 在“框架”面板中中：單擊擊某個框框架區(qū)域域2） 選選擇框架架集n 在“文檔”窗口中中：單擊擊內(nèi)部框框架邊框框n 在“框架”面板中中：單擊擊某一內(nèi)內(nèi)部框架架邊框6.2.3 框框架和框框架集屬屬性設(shè)置置設(shè)置框架架的屬性性 n 框架架名稱：是鏈接接的Taargeet屬性性或腳本本在引用用該框架架

57、時所用用的名稱稱。n 源文文件：指指定在框框架中顯顯示的源源文件n 滾動動：指定定在框架架中是否否顯示滾滾動條。n 不能能調(diào)整大大?。鹤屪屧L問者者無法通通過拖動動框架邊邊框在瀏瀏覽器中中調(diào)整框框架大小小n 邊框框：在瀏瀏覽器中中查看框框架時顯顯示或隱隱藏當(dāng)前前框架的的邊框。n 邊框框顏色：為所有有框架的的邊框設(shè)設(shè)置邊框框顏色。n 邊距距寬度：以像素素為單位位設(shè)置左左邊距和和右邊距距的寬度度n 邊距距高度：以像素素為單位位設(shè)置上上邊距和和下邊距距的高度度2. 設(shè)設(shè)置框架架集的屬屬性n 邊框框：確定定在瀏覽覽器中查查看文檔檔時在框框架周圍圍是否應(yīng)應(yīng)顯示邊邊框。n 邊框框?qū)挾龋褐付蚩蚣芗兄兴羞?/p>

58、邊框的寬寬度n 邊框框顏色：設(shè)置邊邊框的顏顏色n 行列列選定范范圍：單單位有“像素”、“百百分比”、“相相對”6.2.4 保保存框架架和框架架集文檔檔1保存存框架集集文檔操作步驟驟：1) 選擇擇框架集集2) 采取取下面的的方法之之一：n 選擇擇【文件件】|【保存框框架】命命令，保保存框架架集.n 選擇擇【文件件】|【框架集集另存為為】命令令，將框框架集另另存為新新文件。2保存存框架文文檔操作步驟驟：（1）光光標(biāo)放在在目標(biāo)框框架內(nèi) 。（2） 采取下下面的方方法之一一：n 選擇擇【文件件】|【保存框框架】命命令，保保存框架架.n 選擇擇【文件件】|【框架另另存為】命令，將框架架另存為為新文件件。n

59、 如果果選擇【文件】【保保存全部部】命令令，將保保存與當(dāng)當(dāng)前框架架關(guān)聯(lián)的的所有文文檔。6.2.5 框框架中的的鏈接在一個框框架中使使用鏈接接以打開開另一個個框架中中的文檔檔，必須須設(shè)置鏈鏈接目標(biāo)標(biāo)。設(shè)置目標(biāo)標(biāo)框架的的基本操操作方法法如下：1. 在在“設(shè)計計”視圖圖中，選選擇文本本或?qū)ο笙蟆?. 在在屬性檢檢查器的的“鏈接接”字段段中，選選擇要鏈鏈接到的的文件3. 在在屬性檢檢查器的的“目標(biāo)標(biāo)”彈出出式菜單單中，選選擇鏈接接的文檔檔應(yīng)在其其中顯示示的框架架。注意：n 鏈接接到站點點外的某某一頁面面時，正正確的做做法是在在屬性檢檢查器的的“目標(biāo)標(biāo)”下拉拉列表中中選擇“topp”或“blaank”兩

60、個選選項。6.2.6 編編輯無框框架內(nèi)容容為不支持持框架的的瀏覽器器提供顯顯示內(nèi)容容的操作作方法：1. 選選擇“修修改”|框架集集|編輯輯無框架架內(nèi)容。2. DDreaamweeaveer 88將清除除“設(shè)計計”視圖圖中的內(nèi)內(nèi)容，并并且在“設(shè)計”視圖頂頂部顯示示“無框框架內(nèi)容容”字樣樣3. 在在“文檔檔”窗口口中，像像處理普普通文檔檔一樣輸輸入或插插入內(nèi)容容。如輸輸入文字字“你目目前使用用的瀏覽覽器不支支持框架架顯示，請升級級更高的的版本”。4. 再再次選擇擇選擇“修改”|框架架集|編編輯無框框架內(nèi)容容命令，以返回回到框架架集文檔檔的普通通視圖。6.3 實戰(zhàn)演演練我的的家園 第七章 插入多多媒