網(wǎng)頁設(shè)計(jì)與制作Dreamweaver MX

《網(wǎng)頁設(shè)計(jì)與制作Dreamweaver MX》由會(huì)員分享，可在線閱讀，更多相關(guān)《網(wǎng)頁設(shè)計(jì)與制作Dreamweaver MX（28頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

1、會(huì)計(jì)學(xué)1網(wǎng)頁設(shè)計(jì)與制作網(wǎng)頁設(shè)計(jì)與制作Dreamweaver MX 啟動(dòng)與退出啟動(dòng)與退出啟動(dòng)與退出啟動(dòng)與退出Dreamweaver MX 2004Dreamweaver MX 2004n n安裝好Dreamweaver MX 2004后就可以使用它進(jìn)行網(wǎng)頁制作了。接下來就講解怎樣啟動(dòng)與退出Dreamweaver MX 2004。第1頁/共28頁 啟動(dòng)啟動(dòng)Dreamweaver MX 2004n n啟動(dòng)Dreamweaver MX 2004可選擇“開始/所有程序/Macromedia/Macromedia Dreamweaver MX 2004”命令。也可雙擊Dreamweaver MX 2004

2、的桌面快捷方式。第2頁/共28頁啟動(dòng)啟動(dòng)Dreamweaver MX第3頁/共28頁 啟動(dòng)啟動(dòng)Dreamweaver MX 2004n n首次啟動(dòng)Dreamweaver MX 2004時(shí)，將彈出“工作區(qū)設(shè)置”對(duì)話框。在該對(duì)話框中可選擇工作區(qū)布局，對(duì)于初學(xué)者來說，基本上不會(huì)涉及代碼編寫，可選擇 單選按鈕。第4頁/共28頁啟動(dòng)啟動(dòng)Dreamweaver MX 2004n n以上是首次啟動(dòng)以上是首次啟動(dòng)Dreamweaver MX 2004Dreamweaver MX 2004所需進(jìn)行的操作，所需進(jìn)行的操作，以后啟動(dòng)會(huì)直接進(jìn)入工作以后啟動(dòng)會(huì)直接進(jìn)入工作 界面。界面。第5頁/共28頁退出退出Dream

3、weaver MX 2004 在結(jié)束網(wǎng)頁編輯后若需退出Dreamweaver MX 2004，操作很簡單，直接單擊操作窗口右上角的 按鈕或選擇“文件/退出”命令即可。第6頁/共28頁Dreamweaver MX 2004Dreamweaver MX 2004的工作界面的工作界面的工作界面的工作界面啟動(dòng)Dreamweaver MX 2004后即可進(jìn)入其工作界面。第7頁/共28頁 Dreamweaver MX2004Dreamweaver MX2004的工作窗口的工作窗口的工作窗口的工作窗口標(biāo)題欄菜單欄編輯區(qū)文檔欄屬性面板面板組第8頁/共28頁Dreamweaver MX 2004Dreamwea

4、ver MX 2004的工作界面的工作界面的工作界面的工作界面n n菜單欄n n起始頁n n工具欄n n文檔編輯窗口n n屬性面板n n面板組第9頁/共28頁創(chuàng)建站點(diǎn)創(chuàng)建站點(diǎn) 規(guī)劃站點(diǎn)創(chuàng)建站點(diǎn)打開站點(diǎn) 編輯站點(diǎn)第10頁/共28頁 規(guī)規(guī) 劃劃 站站 點(diǎn)點(diǎn)n n進(jìn)行網(wǎng)頁制作之前需創(chuàng)建站點(diǎn)，利用站點(diǎn)的管理功能可對(duì)站點(diǎn)中的文件進(jìn)行管理或測試。創(chuàng)建站點(diǎn)前首先應(yīng)規(guī)劃站點(diǎn)，再通過Dreamweaver MX 2004的站點(diǎn)管理功能創(chuàng)建站點(diǎn)的框架，包括主頁、分支頁面和相應(yīng)的文件夾等。第11頁/共28頁規(guī)規(guī) 劃劃 站站 點(diǎn)點(diǎn)n n站點(diǎn)的概念n n規(guī)劃站點(diǎn)結(jié)構(gòu)n n創(chuàng)建導(dǎo)航草圖n n應(yīng)用舉例規(guī)劃“誠與”廣告公司站

5、點(diǎn)第12頁/共28頁站點(diǎn)的概念站點(diǎn)的概念n n多個(gè)網(wǎng)頁文檔通過各種鏈接關(guān)聯(lián)起來就構(gòu)成了多個(gè)網(wǎng)頁文檔通過各種鏈接關(guān)聯(lián)起來就構(gòu)成了站點(diǎn)，站點(diǎn)可以小到一個(gè)網(wǎng)頁，也可以大到整站點(diǎn)，站點(diǎn)可以小到一個(gè)網(wǎng)頁，也可以大到整個(gè)網(wǎng)站。個(gè)網(wǎng)站。n nDreamweaver MX 2004Dreamweaver MX 2004提供了提供了3 3類站點(diǎn)：本地站類站點(diǎn)：本地站點(diǎn)、遠(yuǎn)程站點(diǎn)和測試站點(diǎn)。用戶可通過本地站點(diǎn)、遠(yuǎn)程站點(diǎn)和測試站點(diǎn)。用戶可通過本地站點(diǎn)和遠(yuǎn)程站點(diǎn)在本地磁盤和點(diǎn)和遠(yuǎn)程站點(diǎn)在本地磁盤和WebWeb服務(wù)器之間傳服務(wù)器之間傳輸文件，測試站點(diǎn)可用于對(duì)動(dòng)態(tài)站點(diǎn)的測試。輸文件，測試站點(diǎn)可用于對(duì)動(dòng)態(tài)站點(diǎn)的測試。n n

6、 本地站點(diǎn)本地站點(diǎn)n n 遠(yuǎn)程站點(diǎn)遠(yuǎn)程站點(diǎn)n n 測試站點(diǎn)測試站點(diǎn)第13頁/共28頁規(guī)劃站點(diǎn)結(jié)構(gòu)規(guī)劃站點(diǎn)結(jié)構(gòu)n n設(shè)計(jì)站點(diǎn)的必要前提是規(guī)劃站點(diǎn)結(jié)構(gòu)。規(guī)劃設(shè)計(jì)站點(diǎn)的必要前提是規(guī)劃站點(diǎn)結(jié)構(gòu)。規(guī)劃站點(diǎn)結(jié)構(gòu)是指利用不同的文件夾將不同的站點(diǎn)結(jié)構(gòu)是指利用不同的文件夾將不同的網(wǎng)頁內(nèi)容分門別類地保存，合理地組織站網(wǎng)頁內(nèi)容分門別類地保存，合理地組織站點(diǎn)結(jié)構(gòu)，可提高工作效率，加快對(duì)站點(diǎn)的點(diǎn)結(jié)構(gòu)，可提高工作效率，加快對(duì)站點(diǎn)的設(shè)計(jì)。設(shè)計(jì)。n n在制作站點(diǎn)時(shí)通常先在本地磁盤上創(chuàng)建一個(gè)在制作站點(diǎn)時(shí)通常先在本地磁盤上創(chuàng)建一個(gè)文件夾，將所有在制作過程中創(chuàng)建和編輯文件夾，將所有在制作過程中創(chuàng)建和編輯的網(wǎng)頁內(nèi)容都保存在該文件夾中

7、。在發(fā)布的網(wǎng)頁內(nèi)容都保存在該文件夾中。在發(fā)布站點(diǎn)時(shí)，直接將這些文件夾上傳到站點(diǎn)時(shí)，直接將這些文件夾上傳到WebWeb服務(wù)服務(wù)器上即可。如果站點(diǎn)內(nèi)容較多或站點(diǎn)較大，器上即可。如果站點(diǎn)內(nèi)容較多或站點(diǎn)較大，則還需建立子文件夾以存放不同類型的網(wǎng)則還需建立子文件夾以存放不同類型的網(wǎng)頁內(nèi)容。頁內(nèi)容。第14頁/共28頁規(guī)劃站點(diǎn)結(jié)構(gòu)規(guī)劃站點(diǎn)結(jié)構(gòu)n n在站點(diǎn)規(guī)劃過程中，需使用合理的文件名稱、文在站點(diǎn)規(guī)劃過程中，需使用合理的文件名稱、文件夾名稱，好的名稱容易理解、記憶，能夠表達(dá)件夾名稱，好的名稱容易理解、記憶，能夠表達(dá)出網(wǎng)頁的內(nèi)容。通常在命名時(shí)，可以采用與其內(nèi)出網(wǎng)頁的內(nèi)容。通常在命名時(shí)，可以采用與其內(nèi)容相同的英文

8、或拼音進(jìn)行命名，應(yīng)避免使用長文容相同的英文或拼音進(jìn)行命名，應(yīng)避免使用長文件名和中文，如電影文件夾可以命名為件名和中文，如電影文件夾可以命名為moviemovie或或dianyingdianying。n n制作網(wǎng)頁所需的圖片或動(dòng)畫等文件的存放位置也制作網(wǎng)頁所需的圖片或動(dòng)畫等文件的存放位置也是規(guī)劃站點(diǎn)結(jié)構(gòu)時(shí)應(yīng)考慮的。如果是大型站點(diǎn)，是規(guī)劃站點(diǎn)結(jié)構(gòu)時(shí)應(yīng)考慮的。如果是大型站點(diǎn)，可分別創(chuàng)建相應(yīng)的文件夾在各個(gè)類別的文件夾下，可分別創(chuàng)建相應(yīng)的文件夾在各個(gè)類別的文件夾下，如在站點(diǎn)根目錄下創(chuàng)建一個(gè)名稱為如在站點(diǎn)根目錄下創(chuàng)建一個(gè)名稱為picturepicture的文件夾的文件夾用以存放主頁中用到的圖片和動(dòng)畫。如果

9、站點(diǎn)內(nèi)用以存放主頁中用到的圖片和動(dòng)畫。如果站點(diǎn)內(nèi)容較少，可以只在站點(diǎn)的根目錄下創(chuàng)建一個(gè)文件容較少，可以只在站點(diǎn)的根目錄下創(chuàng)建一個(gè)文件夾。夾。第15頁/共28頁創(chuàng)建導(dǎo)航草圖創(chuàng)建導(dǎo)航草圖n n做好了站點(diǎn)的規(guī)劃后，就可根據(jù)規(guī)劃制作出一個(gè)導(dǎo)航草圖便于理清思路，制作時(shí)可直接在紙上粗略繪出導(dǎo)航草圖。第16頁/共28頁創(chuàng)建導(dǎo)航草圖創(chuàng)建導(dǎo)航草圖第17頁/共28頁 應(yīng)用舉例應(yīng)用舉例應(yīng)用舉例應(yīng)用舉例規(guī)劃規(guī)劃規(guī)劃規(guī)劃“誠與誠與誠與誠與”廣告公司站點(diǎn)廣告公司站點(diǎn)廣告公司站點(diǎn)廣告公司站點(diǎn)n n將為一個(gè)名為“誠與”的廣告公司網(wǎng)站進(jìn)行站點(diǎn)結(jié)構(gòu)的規(guī)劃。第18頁/共28頁規(guī)劃誠與廣告公司站點(diǎn)結(jié)構(gòu)圖規(guī)劃誠與廣告公司站點(diǎn)結(jié)構(gòu)圖第1

10、9頁/共28頁【實(shí)例實(shí)例1】創(chuàng)建一個(gè)站點(diǎn)創(chuàng)建一個(gè)站點(diǎn)使用菜單使用菜單“站點(diǎn)站點(diǎn)”“管管理站點(diǎn)理站點(diǎn)”打開站點(diǎn)管理打開站點(diǎn)管理對(duì)話框，進(jìn)行操作對(duì)話框，進(jìn)行操作創(chuàng)建站點(diǎn)創(chuàng)建站點(diǎn)第20頁/共28頁打開站點(diǎn)和編輯站點(diǎn)信息打開站點(diǎn)和編輯站點(diǎn)信息打開站點(diǎn)和編輯站點(diǎn)信息打開站點(diǎn)和編輯站點(diǎn)信息vv打開站點(diǎn)打開站點(diǎn)vv編輯站點(diǎn)編輯站點(diǎn)第21頁/共28頁使用使用使用使用“高級(jí)高級(jí)高級(jí)高級(jí)”方式定義站點(diǎn)方式定義站點(diǎn)方式定義站點(diǎn)方式定義站點(diǎn) 在在“定義站點(diǎn)定義站點(diǎn)”向?qū)нM(jìn)向?qū)нM(jìn)行的任意一個(gè)步驟，選擇對(duì)行的任意一個(gè)步驟，選擇對(duì)話框上部的話框上部的“高級(jí)高級(jí)”標(biāo)簽，標(biāo)簽，可打開高級(jí)站點(diǎn)定義對(duì)話框?？纱蜷_高級(jí)站點(diǎn)定義對(duì)話框

11、。第22頁/共28頁 Dreamweaver MX2004Dreamweaver MX2004的基本操作的基本操作的基本操作的基本操作實(shí)例二、制作一個(gè)簡單的網(wǎng)頁實(shí)例二、制作一個(gè)簡單的網(wǎng)頁第23頁/共28頁設(shè)置工作界面設(shè)置工作界面v關(guān)閉面板關(guān)閉面板v標(biāo)尺和網(wǎng)格標(biāo)尺和網(wǎng)格v輔助顯示輔助顯示v首選參數(shù)的設(shè)置首選參數(shù)的設(shè)置第24頁/共28頁對(duì)象的大小和顏色對(duì)象的大小和顏色1.1.修改文字大小修改文字大小 在屬性面板上的大小中選擇文字的大小，文字大小可設(shè)置絕對(duì)尺寸、相對(duì)尺寸、長度、百分比 2.2.修改文字顏色修改文字顏色 在默認(rèn)的情況下，文本在瀏覽器窗口內(nèi)顯示為黑色。在屬性面板的文本顏色按鈕 上單擊可打

12、開調(diào)色板，選擇要設(shè)置的顏色。第25頁/共28頁 設(shè)置圖像大小的多種操作方式設(shè)置圖像大小的多種操作方式1.1.拖動(dòng)改變大小拖動(dòng)改變大小拖動(dòng)圖像下邊、右邊、右下角的三個(gè)控制點(diǎn)可快速改變圖像大小。2.2.使用屬性面板使用屬性面板在屬性面板的寬、高欄輸入寬、高的像素值，可改變圖像大小。3.3.使用右鍵菜單使用右鍵菜單 在圖像上面單擊右鍵，在彈出菜單中選擇“改變大小”可重設(shè)圖像大小。第26頁/共28頁6.6.使用面板組的屬性面板使用面板組的屬性面板使用菜單“窗口”“屬性”或單擊“標(biāo)簽檢查器”面板組打開屬性面板，在編輯窗口中選中要設(shè)置大小的圖片，再單擊“常規(guī)”前面的加號(hào)，列出圖片的各種屬性，在width和height中設(shè)置圖片大小的值。4.4.使用系統(tǒng)菜單使用系統(tǒng)菜單使用菜單“修改”“圖像”雖然不能修改圖像的大小，但可以改變圖像的其他屬性。5.5.使用代碼編輯器使用代碼編輯器將顯示模式設(shè)為代碼模式或拆分模式，可直接編輯圖片文件的HTML代碼中的width和height屬性的值，改變圖像大小。設(shè)置圖像大小的多種操作方設(shè)置圖像大小的多種操作方式式第27頁/共28頁