第一篇：Dreamweaver網站設計課堂練習.doc(更新)

Dreamweaver網站設計

【訓練目的】

通過這個技能，引導學生逐步學習創建網站站點、建立站點首頁、使用表格與層、添加超鏈接、使用框架與表單、加入動態特效和多媒體組件、制作下拉式菜單、建立層疊樣式表、測試網站和上傳發布等知識。通過這部分的學習，使學生掌握運用 Dreamweaver 8制作教學網站的基本方法和流程?！居柧毑襟E】

1．網站的總體布設計

（1）網站的創意

一個好的同站一定會有一個好的創意，創意（idea）是網站生存的關鍵。（2）網站的主題

網站主題應具有以下特點。

①主題小而精。

②題材最好是自己擅長或者喜愛的內容。

③題材不要太濫或者目標太高。（3）網站的風格

風格（style）是獨特的，是站點與其他同站不同的地方。風格是抽象的，是指站點的整體形象給測覽者的綜合感受。

（4）確定網站的目錄結構和鏈接結構

a 網站的目錄結構

不要將所有文件都存放在根目錄下，按欄目內容建立子目錄，在每個子目錄下都建立獨立的images目錄，目錄的層次不要太深。

b 網站的鏈接結構

網站鏈接結構的目的是用最少的鏈接達到最有效率的瀏覽。一般建立網站的鏈接結構有 兩種基本方式：

＞樹狀鏈接結構（一對一）。類似DOS的目錄結構，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。瀏覽這樣的鏈接結構時，是一級級進入，一級級退出。優點是條理清晰，訪問者明確自己的位置，不會“迷路”。缺點是瀏覽效率低，從一個欄目下的子頁面到另一個欄目下的子頁面，必須繞經首頁。

＞星狀鏈接結構（一對多）。類似網絡服務器的鏈接，每個頁面相互之間都建立鏈接。立體結構像東方明珠電視塔上的鋼球。這種鏈接結構的優點是瀏覽方便，隨時可以到達自己喜歡的頁面。缺點是鏈接太多，容易使瀏覽者搞不清自己的位置和看了多少內容。

這兩種基本結構都只是理想方式，在實際網站設計中，總是將這兩種結構混合起來使用，既希望瀏覽者可以方便快速地達到自己需要的頁面，又可以清晰地知道自己的位置。所以，最好的辦法是：首頁和一級頁面之間用星狀鏈接結構，一級和二級頁面之間用樹狀鏈接結構。

2.創建網站站點

(1）Dreamweaver 8簡介

Dreamweaver 8是 Dreamweaver的最新版本，它沿襲了以往 Dreamweaver產品的工作界面風格，增加了許多新功能。Macromedia Dreamweaver 8是建立 WEB站點及其應用程序的專業工具。它將可視布局工具、應用程序開發功能和代碼編輯支持組合在一起，使得各個層次的開發人員和設計人員都能快速創建網站和應用程序。從對基于 CSS設計的支持到手工編碼功能，Dreamweaver提供了專業人員在一個集成、高效的環境中所需的工具。開發人員使用Dreamweaver及所選擇的服務器技術可以創建功能強大的Internet應用程序，從而使用戶能夠鏈接到數據庫和WEB服務器。

(2）打開 Dreamweaver 8

選擇“開始|程序|Macromedia| Macromedia Dreamweaver8”菜單項，顯示Dreamweaver程序的工作界面，作為普通用戶，選擇“設計器”進行工作區布局，單擊“確定”按鈕顯示如圖6－1所示窗口。

圖6—1運行Deamweaver8 后出現的程序操作窗口

第一次使用時，首先要創建新項目，即創建一個站點，通過單擊圖6－1中的“創建新項目”下的“Dreamweaver站點”來實現。

(3）創建一個“趙州橋”的站點

這里以中小學語文課文中《趙州橋》為例子，創建一個“趙州橋”的站點。下面這些步驟只在建站的第一次使用，按照圖6－2所示文本框中的內容輸入站點名稱和站點的HTTP地址。

圖6—2 站點名字及HTTP地址定義窗口

依照圖6－3所示，輸人站點在計算機中的存儲位置（即文件夾）。

圖6－3 選擇站點存儲位置窗口

依照如圖6－4所示，在“您如何連接到遠程服務器”下拉列表框中選擇“無”。

圖6-4站點服務器選項窗口

在圖6－5所示對話框中單擊“完成”按鈕“趙州橋”的站點就創建好了。此時，在屏幕右方出現新創建的站點趙州橋，如圖6－6所示，至此一個網站的站點創建完畢。

圖6－5 站點設置信息列表

圖6一6 當前站點操作面板（4）管理好站點

為了便于管理，Dreamweaver提供了方便的站點管理工具。

①創建網站的文件夾

為了便于管理網站文件，首先應創建一些文件夾，用以存儲對應的文件。在“趙州橋”這個站點中，需要創建三個文件夾：images文件夾用來存放網站所需的圖片文件；medias文件夾用來存放網站所需的聲音、動畫、視頻等多媒體文件；htmls文件夾用來存放網站的網頁文件。

具體操作是：右擊“站點一趙州橋，在彈出的快捷菜單中選擇“新建文件夾”菜單項，在新文件夾的文本框中輸入如圖6－7所示的三個文件夾名。

圖6一7 當前站點文件列表

②站點的管理

單擊圖6－7所示趙州橋下拉列表框，在下拉列表中選擇“管理站點”，彈出“管理站點”對話框，該功能可以方便地對已創建的站點進行管理。

3．首頁的編輯

創建“趙州橋”的首頁。右擊“站點-趙州橋”，在彈出的快捷菜單中選擇“新建文件”菜單項，在新建文件文本框中輸人index．html。

【注意】網站首頁的文件名一般默認為：index.htm，index.html，Index.asp，default.htm，default.html，default.asp等，雙擊 index.html文件，可以進人網站首頁的編輯狀態。

（1）首頁的總體設計

雙擊站點index.html文件，進入站點首頁編輯。

1）網頁的屬性設置

具體步驟如下。

①設置網頁標題。在首頁上方的“標題”文本框中輸人首頁的標題“趙州橋”，如 圖6—8所示。

圖6—8 主窗口工具欄

②設置網頁背景顏色或圖像。右擊首頁空白處，在彈出的快捷菜單中選擇“頁面屬性”，打開如圖6－9所示的頁面屬性設置窗口，單擊“背景顏色”右邊的顏色框，選中合適的顏色；如果要設置預先準備好的背景圖像，可以單擊“背景圖像”右邊的“瀏覽”按鈕，選擇準備好的圖像文件。選擇好圖像文件后，可以在“重復”下拉列表框中選擇背景圖像的排列方式。

圖6－8 頁面屬性設置窗口

2）用表格給網頁內容布局定位

在設計頁面時，通常利用表格來定位頁面元素（插入表格操作看書本p239）。首頁布局由頂部的 Logo和 Banner區、導航菜單區、頁面內容區、底部版權區組成，如圖6－9所示。首頁內容效果圖6-10所示。

圖6－9頁面面布局效果圖

圖6-10 首頁瀏覽效果圖

下面介紹用表格布局頁面的具體操作方法（布局表格宜采用自上而下的方法布局，不宜采用由外到內的方法布局，此首頁頁面由四個表格組成）。

① 選擇【插入】|【表格】命令。在彈出的【表格】對話框中插入1行2列的表格。在打開的【屬性】面板中將該表格的寬度設置為770像素，高度為120像素，邊框為1，對齊方式居中。

②

如圖6－11所示。

在所插入的表格中調整左右兩個單元格寬度作為 Logo區和 Banner區。如圖 6－12所示。

③

圖6-11 設置布局表格的寬度和高度

重復①②的方法，在所繪制的表格的下面再插入一個1×8列表格作為【導航區】 如圖6－12所示。

④

圖6－12 按照相同的方法，在【導航區】的下面繪制一個1×2表格，并調整左右單元格，分別作為［欄目區］和【主文檔區】。如圖6-13所示。

⑤

圖6-13所示

在【欄目區】和【主文檔區】的下面完成【版權區】表格的繪制。如圖6－14所示。

圖6－14 以上表格的制作也可以采用布局表格和布局單元格工具來繪制，這里不作介紹。3）用背景顏色和背景圖像美化網頁表格

對網頁表格也可以進行背景顏色或背景圖像的選擇。右擊要設置的表格單元格，在彈出的快捷菜單中選擇“屬性”菜單項，彈出屬性對話框，單擊“背景顏色”右邊的顏色框，選擇單元格的顏色，各單元格的背景顏色請按圖6-15首頁效果圖設置；如果要設置背景圖像，可以單擊“背景”文本框右邊的文件夾按鈕，選擇事先準備好的背景圖像文件。

【注意】背景圖像文件也要事先復制到images文件夾中。4）表格的嵌套

表格的嵌套是指將一個表格插入到指定的單元格中。這里在欄目區、主文檔區分別插入5行1列以及3行1列的表格。表格的寬度為100%，邊框大小為0，并設置各單元格的寬、高的大小。

（2）豐富網頁內容

1）文字與圖像的插入與設置（詳細內容看書本p243）

①按圖6-15首頁效果圖輸入各欄目文本，并設置各單元格背景顏色和字體大小顏色等。

②在logo區插入圖片20.jpg并設置大小為150*120，插入的圖片要保存到網站的images文件夾里。（圖片在素材images文件夾中）。2）插入其它媒體元素p250 ①插入Flash動畫文件

Flash動畫的文件小，不失真，可播放 mp3音效，互動效果極佳，而且 Flash動畫還可以應用在網頁中制作超鏈接、按鈕菜單、窗體甚至是互動游戲，因此Flash動畫廣泛地應用于網頁中。

打開“趙州橋”網頁，在文檔區第一行插入一個Flash文件，這里采用的是banner.swf的Flash文件，文件在素材文件夾中，將banner.swf保存在趙州橋網站medias中，選擇“插入|媒體|Flash”菜單項，在彈出的文件選擇框中選取文件／趙州橋／medias／banner.swf，再調整它的大小等格式即完成插入文件。②插入視頻

Dreamweaver支持多種格式的視頻文件。與插入Flash文件的操作相同，將光標定位到需要插入視頻文件的位置，執行主菜單“插入/媒體/插件”命令。③嵌入聲音文件

在Dreamweaver中可以加人不同類型的聲音文件，常見的聲音文件類型有：mid，wav，aif，mp3和ram等。在網頁中嵌入背景音樂可使用“行為”的方法嵌入。（3）首頁的整體制作效果

到此為止，可以看看首頁制作的大體情形了。首先要將它保存好，可以單擊“文件|保存”菜單項進行保存。現在，按快捷鍵F12打開一個瀏覽器，其預覽效果如圖6－15所示。

【注意】默認的瀏覽器為 Internet Explorer。

圖6-15 首頁瀏覽效果圖

4．添加超鏈接p245（1）添加新網頁

在網頁中使用超鏈接，能夠使每個獨立的網頁之間產生一定的相互聯系，從而使若干單獨的網頁形成一個有機的整體。

l）新網頁的添加和編輯

具體步驟如下。

① 新網頁的添加。右擊圖 6－7中的／／趙州橋／htmls文件夾，在彈出的快捷菜單中選擇“新建文件”，在新建文件的文件名文本框中輸入jianjie.html文件名；按此方法依次創建以下幾個網頁：jiaoan1.html, jiaoan2.html, biaodan.html，tupianku.html。

②新網頁的編輯。雙擊新創建的的jianjie.html，打開網頁，將網頁的標題名修改為“趙州橋簡介”。創建一個4 行1列的表格，寬度為770像素，在第一行嵌套1行2列的表格，在第2行嵌套1行5列的表格。在第二行嵌套表格的5列分別輸入文本“趙州橋簡介 ”“茅以升論趙州橋 ”“作者李青簡介”“ 茅以升簡介”“ 趙州橋建筑三絕”，并在第3行輸人趙州橋簡介的正文。（正文內容見素材文件夾）

2）讓新網頁沿襲一致的風格

網頁設計中通常需要統一網頁的整體風格，統一的風格大部分涉及到網頁的布局形式、文字屬性、網頁背景色以及鏈接文字屬性，等等，這樣才能使網頁的總體效果更佳，使用戶在瀏覽該網站時有一個延續性，產生整體感。

選擇網頁的第1行第1列，將首頁的圖片插入，調整好大小；選擇網頁的第1行第2列，選擇背景顏色，并輸入文字“趙州橋簡介”，調整好文字的大小。趙州橋簡介瀏覽效果圖如圖6-16所示。

圖6-16趙州橋瀏覽效果圖

（2）添加超鏈接

所謂超鏈接是指從一個網頁指向一個目標的連接關系。超鏈接在本質上屬于網頁的一部分，它是一種允許某網頁同其他網頁或站點之間進行連接的元素。各個網頁鏈接在一起后，才能真正構成一個網站。這個目標可以是以下幾種存在形式：①一段文本；②一張圖片；③一個電子郵件地址；④一個文件；⑤一個應用程序。

在網頁中常用來作為超鏈接的對象一般是一段文本或一幅圖片。設置了超鏈接的對象，當光標懸停其上時會產生變化，當瀏覽者單擊已經鏈接好的文字或圖片時，鏈接目標將在瀏覽器中被打開。

l）文字超鏈接的添加和編輯

打開已創建好的主頁/趙州橋／index.html，選中并右擊第3行的文本“趙州橋簡介”，在彈出的快捷菜單中選擇“創建鏈接”，在彈出的選擇文件對話框中選擇要進行鏈接的文件//趙州橋/htmls／jianjie.html,如圖6－17所示。

圖6-17 選擇超鏈接目標文件窗口

【注意】一般來說，打開方式有4種：-blank，-parent,＿self，-top。其中-self表示在本窗口中打開，為默認的打開方式：-blank表示在新窗口中打開；-parent表示在上級窗口中打開；＿top表示在最上層窗口中打開。用戶可以根據實際情況，自己選擇所需要的打開方式。

單擊”屬性”面板中“目標”右邊的下拉列表框，可以選擇以上4種打開方式之一。

2）圖片超鏈接的添加和編輯

現在為“趙州橋簡介”添加一個返回主頁的超鏈接，這里用來作為超鏈接的對象是一個返回按鈕的圖片。打開網頁Jianjie.html，選擇表格的第4行，設置背景顏色，對齊方式為右對齊，再選擇“插入|圖像”萊單項，插入作為返回按鈕的圖片// images/back04．gif;（圖片在素材庫中，并將圖片文件back04.gif拷貝到網站images文件夾中）單擊返回按鈕的圖片，單擊“屬性”面板中“鏈接”右邊的文件夾按鈕，選擇好超鏈接的目標文件／／趙州橋／index.html即可。

為方便瀏覽者使用，在表格第2行也附一個返回按鈕的超鏈接，方法如上。3）快速轉移，加入錨點

作為使用者，都有這樣一個經歷。對于一篇長的網頁，要花上一定時間才能找到所需的那一部分內容。現在使用網頁的錨點（也稱為書簽）功能，為同一個網頁添加超鏈接，即可快捷地跳轉到指定內容上。

剛才在表格的第2行嵌套了一個表格，并輸入了文本內容為“趙州橋簡介 ”“茅以升論趙州橋 ”“作者李青簡介”“ 茅以升簡介”“ 趙州橋建筑三絕”，現在再對這5個文本進行網頁內錨點的設置。

具體步驟如下。

①創建錨點。為了創建錨點，將光標移動到需要加入錨點的地方，這里放在正文文本“趙州橋簡介”的最前面，單擊常用工具欄（見圖6－18）中的錨點工具按鈕，在打開的命名錨點的窗口中輸入錨點名稱為jianjie1，單擊“確定”按鈕，則在文本中出現一個錨點圖標作為一個標志）

。（注：錨點圖標在實際瀏覽器中是不可見的,只是在制作網頁中

圖6－18常用工具欄

②鏈接錨點。錨點創建好后，還必須鏈接錨點。選擇表格第2行第1列中的“趙州橋簡介”四個字，在屬性面板上的“鏈接”文本框中輸入符號#和錨點名稱。這里輸入剛才創建的錨點名稱“＃jianjie1”。

重復上面的操作，為正文“茅以升論趙州橋 ”“作者李青簡介”“ 茅以升簡介”“ 趙州橋建筑三絕”創建好錨點，分別命名為jianjie2和jianjie3等。

4）為E－mail添加超鏈接

在網頁上創建

E－mail（電子郵件）鏈接，能方便瀏覽者快速反饋意見。當瀏覽者單擊Email鏈接時，可立即打開瀏覽器默認的Email處理程序，收件人郵件地址被Email超鏈接中指定的地址自動更新，無需瀏覽者輸入，這里在首頁中設置一個Email的超鏈接。

打開首頁／／趙州橋／index.html，選擇表格第2行最后1列中的“聯系電郵”，單擊常用工具欄中插入電子郵件超鏈接工具按鈕，在彈出的“電子郵件鏈接”對話框中的E－mail文本框中輸入電子郵箱的地址即可。5）制作指向Web上的網頁的超鏈接

先選中要建立超鏈接的文本“參考網站”，在屬性面板對話框中的URL地址欄中輸入超鏈接的目標地址，本活動中輸入的目標地址為http://www.tmdps.cn，則剛才定義好的樣式就應用到所選擇文本上，各種鏈接效果一步到位。

9.模板的創建和應用模板

一個網站在制作過程中，經常需要創作大量布局相同或相似的網頁，這時候，應用模板來創建網頁不失為一種很好的方法，下面簡單介紹基于本站主頁面為模板的網頁模板的創建和應用。

(1)模板的創建

模板創建的大致過程是：打開一個已制作好的網頁（以此網頁為模板）→另存為模板→新建可編輯區域（可重復進行）→保存。

具體步驟如下。

①為方便操作，這里將本網站主頁．．／index．html作為模板，為了不破壞它作為主頁，首先將其另存為別的網頁名稱．．／mb．html，并做一定的修改，將中間的圖片刪除。

②打開網頁．．／mb．html，選擇“文件|另存為模板”菜單項；在彈出如圖6－57所示“另存為模板”對話框中選擇模板存放的站點，在“另存為”文本框中為模板輸入一個唯一的名稱，單擊“保存”按鈕。這時彈出如圖6－58所示的對話框，單擊“是（Y）”按鈕。這時在站點文件中自動生成一個Templates文件夾，文件夾中存放著剛才保存的模板文件／templates／mb．dwt，如圖6－59所示。

圖6－57“另存為模板”對話框

圖6－58 模板鏈接更新選擇對話框

圖6－59 生成的模板文件

③在常用工具欄中單擊“模板”工具按鈕

右邊的下三角按鈕，從彈出的如圖6－60所示的下拉列表中選擇“可編輯區域”選項。在打開的如圖6－61所示的“新建可編輯區域”對話框中的“名稱”文本框中為該區域輸人一個唯一名稱。單擊“確定”按鈕。

創建的模板如圖6－62所示，如果需要多個可編輯區域，可以重復步驟③，以滿足實際網頁編輯的需要。

④保存制作好的網頁模板。選擇“文件|保存”菜單項。一個網頁模板就制作好了。

圖6－60 模板按鈕下拉列表

圖6－61“新建可編輯區域”對話框

圖6-2 創建了可編輯區域的模板網頁

（2）應用網頁模板

下面就將網頁模板應用到已經制作好的網頁上。為了方便操作，一般采用先制作好網頁，再應用模板的方法。具體步驟如下。

①制作一個需要應用模板的網頁。選擇“文件|新建”菜單項，創建一個基本的網頁頁面，如圖6－63所示。

②選擇“修改|模板”菜單項，在如圖6－64所示的下拉菜單中選擇“套用模板到頁”菜單項。

③在打開的如圖6－65所示的“選擇模板”對話框中，選擇需要套用的模板mb后，單擊“選定”按鈕。

④ 將內容應用到模板的可編輯區域，如圖6－66所示。⑤ 應用了模板網頁的效果圖。

在網站需要制作大量風格一致的網頁時，應用網頁模板是一個非常便捷的方法，制作方法簡單，而且網頁頁面變動也非常靈活，能取得事半功倍的效果。

圖6－63準備應用模板的網頁

圖6-64展開的模板下拉菜單

圖6-65“選擇模板”對話框

10．網站測試和上傳

一個網站做好后，需要對站點進行測試和上傳。（1）整理網站，清點網頁

為了防止同頁、圖片、文字、聲音、影像出現鏈接錯誤，在上傳同站之前一定要做好鏈

接的檢查工作，以免網站在使用時出現錯誤。

選擇“窗口|結果”菜單項，打開結果檢查屬性面板，如圖6－78所示；單擊“鏈接檢查器”標簽，單擊左邊的“鏈接檢查”按鈕

右下方的下三角按鈕，在打開的菜單中選擇“檢查整個當前本地站點的鏈接”，如果沒有出現錯誤鏈接的情況，則站點鏈接沒有錯誤；否則就按照提示的錯誤信息進行修改。如果沒有問題就可以上傳文件了。

圖6－78 鏈接檢查標簽

（2）尋找一個免費的空間，給網站安個家

Internet上的免費網站空間很多，這里選擇一個國內大型的提供免費個人主頁空間的站點“虎翼網 http：／／www．51．net”，進人后在申請表中認真填寫所需的申請資料后提交，通常在幾天后就可以收到一封電子郵件，主要內容是用戶上傳的主機服務器名、用戶登錄名和密碼，同時會提供一個免費的城名供用戶使用。

（3）上傳網站到WEB服務器上

①選擇“站點|管理站點”菜單項，在打開的站點管理器中，單擊“編輯”按鈕，選擇“遠程信息”，如圖6－79所示。在對話框中依次輸人FTP主機名、主機目錄、登錄用戶名、密碼，這些選項在申請后收到的電子郵件中都有，要認真填寫。

圖6-79站點FTP設置

② 在圖6-79所示對話框中進行設置后,單擊“測試連接”按鈕，如果連接不成功，則檢查設置或咨詢系統管理員。

③ 再幾次單擊“下一步”按鈕后單擊“完成”按鈕，即完成了遠程站點的設置。④ 在“文件”面板中選擇站點的本地根文件夾，單擊“文件”面板工具欄的上傳文件按鈕，Dreamweaver會將所有文件復制到服務器默認的遠程根文件夾。

多數網絡空間提供者都設置有服務器默認的文件夾，在“文件”面板中將“本地視圖”轉換為“遠程視圖”可看到此文件夾，第一次上傳時，必須搞清楚網絡空間提供者指定的服務器默認的存放網頁的文件夾，上傳完畢后即可在瀏覽器中輸入瀏覽地址，測試上傳的結果，至此整個網站制作全部完成。

【總結】。

本章節介紹運用Dreamweaver網站設計制作軟件的相關知識與技能。以制作一個完整 的網站作品為例，引領學生經歷創建一個網站的實踐活動過程，逐步掌握利用Dreamweaver創建一個網站的基本方法。

網站設計是一門系統的學科，僅僅依靠一個Dreamweaver網頁編輯軟件是遠遠不夠的，在本章中沒有涉及網頁代碼編程和圖形圖像動畫設計的學習，而這些是表達一個網站的精華所在，因此本章的目標僅僅是針對那些初涉網站設計的人員。

第二篇：dreamweaver中怎樣創建網站相冊

dreamweaver中怎樣創建網站相冊

若要創建網站相冊，請執行以下操作：

1.在 Dreamweaver 中，選擇“命令”>“創建網站相冊”。

2.在“相冊標題”文本框中輸入一個標題。該標題將顯如今包含縮略圖地頁面地頂部地灰色矩形中。

假如需要，能夠在“副標信息”和“其它信息”文本框中輸入最多兩行附加文本，該文本將直接在標題下顯現。

注意：創建網站相冊前 確保你的電腦上安裝了 fireworks，命令——創建網絡相冊，會自動調用fireworks,，自動生成網頁

3.單擊“源圖象文件夾”文本框旁地“瀏覽”按鈕，選擇包含源圖象地文件夾。然后單擊“目標文件夾”文本框旁地“瀏覽”按鈕，選擇（或創建）一個目標文件夾，用以放置一切導出地圖象和 HTML 文件。

目標文件夾不應當已包含相冊 － 假如已包含相冊，并且假如任何新圖象與先前使用地圖象同名，則能夠會覆蓋現有地縮略圖和圖象文件。

4.指定縮略圖圖象地顯現選項：

o 從“縮略圖大小”彈出菜單中選擇縮略圖圖象地大小。圖象將按比例縮放，以創建適宜具有指定象素尺寸地方框地縮略圖。

o 若要在相應地縮略圖下顯現每個原始圖象地文件名，請選擇“顯現文件名”。

o 輸入顯現縮略圖地表地列數。

5.從“縮略圖格式”彈出菜單中選擇縮略圖圖象地格式：

GIF WebSnap 128 創建 GIF 縮略圖，這些縮略圖使用包含多達 128 色地 Web 順應性調色板。

GIF WebSnap 256 創建 GIF 縮略圖，這些縮略圖使用包含多達 256 色地 Web 順應性調色板。

JPEG － 品質較高創建品質較高且文件大小較大地 JPEG 縮略圖。JPEG － 文件較小創建品質較低且文件大小較小地 JPEG 縮略圖。

6.從“相片格式”彈出菜單中選擇大尺寸圖象地格式。對于每個原始圖象，將創建一個具有指定格式地大尺寸圖象。您為大尺寸圖象指定地格式能夠不同于為縮略圖指定地格式。

留神

因為 GIF 和 JPEG 之外地原始文件格式能夠無法在一切瀏覽器中正確顯現，所以“創建網站相冊”命令不允許您將原始圖象文件用作大尺寸圖象。請留神，假如原始圖象是 JPEG 文件，則所生成地大尺寸圖象地文件大小能夠比原始文件大（或許其品質比原始文件低）。

7.選擇大尺寸圖象地縮放百分比。

假如將“縮放”設置為 100%，將創建與原始圖象等大地大尺寸圖象。請留神，縮放百分比將應用于一切圖象；假如原始圖象地大小不一樣，那么按同一百分比縮放就能夠不會產生所需地效果。

8.選擇“為每張相片樹立導覽頁面”，為每個源圖象創建一個 Web 頁，該 Web 頁包含標為“后退”、“主頁”、“前進”地導航鏈接。

假如選擇此選項，縮略圖會鏈接到導航頁。假如不選擇此選項，縮略圖鏈接將直接鏈接到大尺寸圖象。

9.單擊“肯定”以創建網站相冊地 HTML 和圖象文件。Fireworks 啟動（假如它尚未運行）并創建縮略圖和大尺寸圖象。假如所包含地圖象文件數目較多，這能夠會需要幾分鐘地時間。當處理完成后，Dreamweaver 將再次處于活動狀態并創建包含縮略圖地頁。

10.當出現指示“相冊曾經樹立”地對話框時，單擊“肯定”。

相冊頁出現之前能夠需要等候幾秒鐘。各縮略圖依據文件名按字母順序顯現。

第三篇：Dreamweaver網頁設計教學計劃

《Dreamweaver網頁設計》教學方案

第一部分 說明

1．課程的性質與任務

“Dreamweaver網頁設計”是計算機網絡技術專業（?？疲┑囊婚T統設必修課。本課程的主要任務是介紹利用Dreamweaver開發工具進行網頁設計，包括新建、編輯和設置一個Web站點；如何對頁面屬性進行基本的設置，如何設置、編輯CSS層疊式樣式表；如何排版文字、表格和層；如何進行基本的圖像處理；建立框架；模板和庫的使用和編輯；網站的發布與維護等基本知識與應用。目的是通過本課程的學習，培養學生的實際動手能力和計算機的操作能力，能夠運用所學的知識進行網頁設計。

2．與相關課程的銜接、配合、分工

先修課程：計算機應用基礎Photoshop圖像處理等。

后續課程：Flash動畫制作等。

３．課程的教學基本要求

本課程要求學生掌握基本的HTML語言。學會使用Dreamweaver開發工具進行網頁設計。這是一門重在實踐的科目，因此需要學生多上機、多進行實際操作，把老師所教授的各種網頁制作、版面設計以及程序熟練制作或調試出來，并且能夠在此基礎上有所創造、有更進一步的發揮。

4．課程教學要求的層次

1．掌握：

要求學生能夠全面掌握所學內容，并能夠用其分析、應用與Dreamweaver網頁設計相關的問題，能夠舉一反三。

2．理解：

要求學生能夠較好地理解與Dreamweaver網頁設計相關的問題，并且能夠進行簡單分析和判斷。

3．了解：

要求學生能夠一般地了解的所學內容。第二部分 媒體使用與教學過程建議

學時分配

課程教學總學時90學時，5學分。其中授課36學時，實訓54學時。

2．多種媒體教材的總體說明

1．本課程文字教材為合一型教材，文字教材作為學習的主要媒體，著重反映課程的基本知識和針對性、應用性，在形式上要便于自學。在內容上包括基本理論知識講解和實訓兩部分。

2．視頻媒體配合文字教材的講授，內容重點在于實訓及輔導。

3．CAI課件作為網絡教學媒體，可以在互連網上使用也可以單機使用。

3．教學環節

以主教材講授為主，其它媒體作為輔助教學資源，以學生自學為主。

4．主要教學媒體的使用與學時分配

內容

序號 1 2 3 4 5 6 7 8 9 10 11 12 13 14

第1章 Dreamweaver基礎

第2章 網頁設計語言基礎

第3章 文本和圖像處理

第4章 表格與頁面布局

第5章 創建超級鏈接

第6章 層與層動畫

第7章 框架與框架網頁

第8章 創建ＣＳＳ樣式表

第9章 資源、模板和庫

第10章 媒體對象的應用

第11章 表單處理

第12章 創建Web站點

第13章 制作動態網站

第14章 網站的維護和上傳

2學時 3學時 3學時 3學時 2學時 3學時 2學時 3學時 2學時 3學時 3學時 2學時 3學時 2學時

教學內容 理論學時

合計

36學時

第三部分 教學內容和教學要求

第1章 Dreamweaver基礎（2學時）

教學內容：

Dreamweaver 的歷史和簡介

Dreamweaver 的安裝過程

Dreamweaver 的全新界面

改進的設計與開發環境

主菜單介紹

對象控制面板介紹

教學要求：

掌握：Dreamweaver的基本特點、新增功能及界面組成?；静僮?，如安裝、新建、打開、導入、保存、關閉等。

理解：新增功能、界面組成的優點。

了解：Dreamweaver可以為我們做些什么。

第2章 網頁設計語言基礎（3學時）

教學內容：

HTML及XHTML語言介紹

常用的網頁語法標記

教學要求：

理解：HTML及XHTML語言介紹，常用的網頁語法標記

第3章 文本和圖像處理（3學時）

教學內容：

文本屬性面板

編輯文本和插入對象

設置文本的格式

編號與項目符號

在網頁中插入圖像

圖像的應用

教學要求：

掌握：設置文本屬性和格式；編號與項目符號的使用；插入、編輯和排版圖像。

理解：如何進行圖像調整。

第4章 表格與頁面布局

教學內容：

表格的基本操作

單元格的基本操作

表格的自動套用格式

表格的創建

表格的編輯

創建布局單元和表格

教學要求：

掌握：如何插入、編輯表格，創建布局單元和表格。

理解：表格在網頁排版中的作用。

了解：使用頁面布局模式進行網頁排版的方法。

第5章 創建超級鏈接（2學時）

教學內容：

（3學時）

鏈接分類

創建超級鏈接

鏈接的四種狀態

創建Email鏈接

管理超級鏈接

教學要求：

掌握：創建超級鏈接和Email鏈接，會設置鏈接的各種狀態。

理解：超級鏈接幾種狀態之間的差別和共同點。

了解：創建Email鏈接中的各種技巧。

第6章 層與層動畫（3學時）

教學內容：

層的概念

創建層

層操作

層與表格的相互轉換

層動畫的概念與設計

教學要求：

掌握：層的概念與使用

理解：層動畫的概念與設計

第7章 框架與框架網頁（2學時）

教學內容：

框架的基本概念

創建框架和框架集

框架的使用

框架和框架集的屬性設置

教學要求：

掌握：框架和框架集的創建；框架的使用。

理解：使用框架的優缺點。

第8章 創建ＣＳＳ樣式表（3學時）

教學內容：

CSS層疊式樣式表

定義CSS樣式表

創建并鏈接到外部CSS樣式

設置CSS樣式的格式化參數

設置超鏈接顯示狀態

添加各種ＣＳＳ效果

教學要求：

掌握：內部ＣＳＳ和外部ＣＳＳ的添加方法，編輯ＣＳＳ屬性，使用ＣＳＳ進行頁面的排版，創建各種ＣＳＳ效果。

理解：使用CSS排版的優點。

了解：如何使用ＣＳＳ控制背景、鼠標以及添加其它特殊效果。

第9章 資源、模板和庫（2學時）

教學內容：

資源管理

模板的創建

模板的編輯

定義模板可編輯區域

創建，管理和編輯庫項目

教學要求：

掌握：模板的創建，模板的編輯，定義模板可編輯區域

理解：資源管理

了解：創建，管理和編輯庫項目

第10章 媒體對象的應用（3學時）

教學內容：

插入Flash對象

插入Shockwave對象

插入視頻

插入ActiveX控件與Java小程序

填加聲音

教學要求：

掌握：插入Flash對象、插入Shockwave對象、插入視頻、插入ActiveX控件與Java小程序、填加聲音

第11章 表單處理（3學時）

教學內容：

表單概述

表單對象

創建表單

處理表單

創建動態表單

教學要求：

掌握：創建表單、處理表單和設置表單參數。

理解：表單的概念和作用。

了解：如何使用表單創建交互式界面。

第12章 創建Web站點（2學時）

教學內容：

站點規劃

在Dreamweaver8中創建站點

管理站點與站點文件

使用站點地圖

為網站指定服務器技術

教學要求：

掌握：規劃站點、建立和管理站點；使用站點文件和地圖。

理解：創建站點的必要性。

了解：服務器技術的指定。

第13章 制作動態網站（3學時）

教學內容：

Access數據庫基礎

ODBC數據源設置

ASP與Web服務器配置

Dreamweaver8動態網站設計

創建與數據庫連接

教學要求：

掌握：數據源的設置，如何配置Web服務器，如何創建與數據庫的鏈接。

理解：數據庫在動態網站設計中角色的重要性。

了解：設置數據源和創建數據庫鏈接的技巧

第14章 網站的維護和上傳（2學時）

教學內容：

在本機中測試網站

預覽網頁效果

網站的查錯

發布網站到服務器

教學要求：

掌握：Dreamweaver8的測試、預覽和發布設置。

理解：網站排錯的必要性。

了解：如何發布網站到服務器。

實訓內容

（實訓分為必做和選做內容，可根據實際的實驗條件選做。實驗總計54學時）

實訓1：建立Web網頁（必做）

實訓2：文本及其格式化（必做）

實訓3：圖像（必做）

實訓4：超級鏈接（必做）

實訓5：表格和頁面布局（必做）

實訓6：框架（必做）

實訓7：層（必做）

實訓8：模板與庫（必做）

實訓9：表 單（必做）

實訓10：行 為（必做）

實訓11：多媒體組件的插入、使用代碼設計網頁與站點管理（必做）實驗12： 動態網站制作（選做）

實驗13：ASP與SQL Server數據庫相連（選做）

第四篇：Dreamweaver網頁設計實驗報告

實驗報告

專業

XXXXXX

班級

XX 班

學號

XXXXXX

姓名

XXX

報告完成日期

2012-12-26

指導教師

XXX

評語：

成績：

批閱教師簽名：

批閱時間：

一、制作時間

2012年12月18日至2012年12月26日。

二、實習內容

1、使用Dreamweaver制作網站，該網站為福建工程學院網站

2、網站不少于8個頁面，主頁和各模塊相關頁面；

3、頁面中包含文字、圖片；

4、使用CSS實現網頁相關頁面設置，要求在實現網頁內能夠顯示文字，圖片等信息；

5、使用網頁瀏覽器進行網站測試。

三、實習環境

1、硬件環境：計算機一臺；

2、軟件環境：Dreamweaver cs4；

3、測試環境：IE、firework等網頁瀏覽器。

四、網站總體設計

1、網站主題

本網頁是以福建工程學院網站為主題，針對不同的年齡階段的人給出了不同的學院的信息。

2、設計思路

首先構思了基本網頁的布局，主頁采取了常用的1-（1+1+1），附頁采用了1-（1+1），上了多個網 最后決定參照福建工程學院的官方網站進行制作，但是布局并不相同 素材取自福建工程學院官方網站，部分圖片取自百度，網站包括1個主頁7個子頁，子頁包含了所有的學校狀況，分別為：學校簡介、現任校領導、教學機構、管理機構、校紀校訓校歌、校園風光、新校區建設；采用了較難的二級菜單 和 JVAV技術實現導航欄上面的圖片進行4張輪播。

五、制作步驟

1.首先確定網頁的主題后，從網上查看各名校的網站，并從中尋找思路開始做網頁。經過長時間的瀏覽，最終選擇福建工程學院作為參照（網址：http://www.tmdps.cn）

2.受福建工程學院主頁的影響我自學了圖片輪播和二級菜單，從而制作了輪播圖片和二級菜單。

3.由于對于JVAV和表單的知識并不是非常了解所以有些地方需要實現的實現不出來放棄了，期中研究了最久的就是 導航輪播和下面的有塊區域的圖片輪播，結果因為不知道如何同時初始化2個JVAV函數 最后以失敗告終 只好放棄

4.本次制作最難的地方是導航菜單的二級菜單和圖片輪換

在制作過程中，遇到很多次的制作混亂，最后還是老師幫忙解決的。

5.原計劃那些JVAV代碼因為無法同時初始化他們放棄了 只好以一些列表代替

6.最后，將一些小細節的東西做了些處理，最后打包上交。

六、實習總結

這次是我們web的期末考試制作，通過這一次的制作，不僅鞏固了以前學過的知識，還學會很多課堂上未教授的東西。通過老師的講解、查閱資料，解決了很多制作上的困難，這一點我在這要好好感謝我們的XX老師和我們宿舍的學姐，謝謝她們幫我很大的忙。

七、參考文獻

《HTML+CSS網頁設計與布局》 《PHP編碼》

第五篇：課堂練習教學設計

Unit 1 Warm-up & Lesson 1

I.用括號內單詞的正確形式填空。

1.After a very active career she was looking forward to a happy and ________(peace)retirement.2.We come here once a year expecting a quiet, ________(relax)holiday.3.Most city people lead a(n)________(stress)life: too many places to go, too many people to see, too many bills to pay, etc.4.My ________(person)opinion is that the students should be doing more work outside the classroom.II.選用方框內合適的短語并用其正確形式填空(每個短語限用一次)。

get up, wake up, take up, switch on, switch off, go off

1.I must get rid of this large table;it ________ too much room．

2.Don’t ________ the television — the baby is sleeping.3.Please ________ the lights as you leave.4.Few men these days ________ to give a lady a seat on a bus．

5.Last night, the lights ________ in several villages because of the storm.6.She has just ________ from a deep sleep and doesn’t know what has happened.III.用適當的介詞或副詞填空。

1.I’d like to arrive 20 minutes early so that I can have time ________ a cup of tea.2.If there is not a good play on CCTV 8, I would switch ________ to CCTV 5.3.The children quickly got bored ________ staying indoors.4.The dancers were standing ________ a circle around the fire.5.The manager is still working his way ________ the application forms.6.I don’t feel that I’m ready ________ my driving test yet.7.Get ________ a Number 16 bus in front of our house.It’ll take you straight to the town centre.8.I think I’ll have soup ________ lunch today.9.Those old pictures brought ________ a lot of happy memories to me.10.The air was filled ________ the sound of children’s laughter.IV.根據括號內的提示翻譯下面句子。

1.我們晚到一會兒有關系嗎?(matter)

_______________________________________

2.我想她今天會在那兒。(suppose)

_______________________________________

3.我想在這兒呆到五點鐘。(until)

_______________________________________

4.湯姆總是第一個到校。(the first)

_______________________________________

5.你們老板一回來你就通知我。(as soon as)

_______________________________________

6.到那兒用不了一個鐘頭。(less than)

_______________________________________

7.把它拿近一些，好讓我看得更清楚些。(so that)

_______________________________________

8.我現在不想出去，而且我還得工作。(besides)

_______________________________________

V.從每題所給的兩個選項中選出正確的一項。

I 1.read / am reading a really interesting book at the moment.It 2.says / is saying that our personalities 3.depend / are depending on our birth order, that is, our position in relation to our brothers and sisters.For example, according to this book, the eldest child in a family 4.usually likes / is usually liking to be the leader.Now I 5.know / am knowing why my elder sister 6.always bosses / is always bossing me and my brother around!I am the youngest child in our family and, apparently, youngest children 7.usually get / are usually getting on well with everyone.I 8.think / am thinking it’s true, but things might change because my mum 9.has / is having another baby next month!

Unit 1 Lesson 2

I.根據下面各句句意以及所給單詞的首字母或漢語提示詞，寫出該單詞的正確形式(每空一詞)。

1.It’s an ideal place in which to relax and escape the p________ of modern life.2.They’ve r________ the prices in the shop, so it’s a good time to buy.3.My sister is on a d________ to lose some weight.4.Our tent won’t s________ another storm like the last one.5.Your studies will s________ if you spend too much time playing football.6.—Coffee or tea?

—I’d p________ tea, thanks.7.Most British schools ________(組織)social events for the students.8.Some of Hollywood ________(工作室)are interested in this new actor.9.Kate’s a(n)________(專家)on teaching small children.II.選用方框內合適的選項完成下面對話(有兩個多余選項)。

A.I prefer classical music to rock music.

B.I like classical music.

C.I don’t like rock music very much.

D.Oh, forget it, then.

E.I can’t believe that.

F.Not very much.

G.I don’t agree with you.

Two friends are having some drink together and talking about music.A: Black or white coffee?

B: White, please.A: Look!There’s a rock concert tomorrow evening.Do you want to go?

B: 1.________ It’s too noisy.A: What kind of music do you like?

B: 2.________ Do you?

A: 3.________ Classical music sends me to sleep.B: 4.________

A: It’s true.B: You are kidding.A: No, I am not.B: 5.________ How about another coffee?

A: OK, that sounds good.B: Waiter!

III.閱讀下面材料，在空白處填入適當的內容(1個單詞)或括號內單詞的正確形式。

Are you burning the candle at both ends? Do you feel you have no time for 1.________(you)? Do you forget to call family 2.________ birthdays or holidays? Have you stopped going out with friends because you are so busy? Do you have trouble 3.________(relax)and having fun?

If you are a workaholic, you should try to slow 4.________ and spend time on your personal life.You should balance the many important areas of your life, 5.________(include)your health, friends, family and work.Here are some tips for living a(n)6.________(health)lifestyle.First, stop overworking and remember 7.________(spend)quality time with friends and family.Second, learn to eat, talk, walk and drive more 8.________(slow).And don’t forget to turn your mobile phone off sometimes.Third, learn to live in 9.________ present time and stop worrying about the future.And finally, take 10.________ easy and begin enjoying the simple things in life.Stop to smell the roses.答案

Unit 1 Warm-up & Lesson 1

I.1.peaceful 2.relaxing 3.stressful 4.personal

II.1.takes up ?? 2.switch on 3.switch off

4.get up 5.went off 6.woken up

III.1.for 2.over 3.with / of ? 4.in

5.through 6.for 7.on 8.for

9.back 10.with

IV.1.Does it matter if we’re a bit late?

2.I suppose she’ll be there today.3.I’d like to stay here until five o’clock.4.Tom is always the first to get to school.5.Please let me know as soon as your boss comes back.6.It’ll take less than an hour to get there.7.Bring it nearer so that I can see it better．

8.I don’t want to go out now, and besides, I must work.V.1.am reading ? 2.says ?? 3.depend

4.usually likes 5.know ?6.is always bossing

7.usually get 8.think 9.is having

Unit 1 Lesson 2

I.1.pressures 2.reduced ?3.diet

4.stand 5.suffer ?6.prefer

7.organise 8.studios 9.expert

II.1-5 CBFED

III.1.yourself 2.on ?3.relaxing

4.down 5.including ?6.healthy

7.to spend ?8.slowly 9.the 10.it