- Dreamweaver CS3網(wǎng)頁制作
- 楊杰 段欣主編
- 2379字
- 2019-01-01 06:23:37
1.2 Dreamweaver CS3的工作界面
選擇“開始→程序→Adobe Dreamweaver CS3”命令，啟動Dreamweaver CS3，彈出Dreamweaver CS3的啟動界面，如圖1-13所示。
圖1-13 Dreamweaver CS3啟動界面
單擊該界面內(nèi)“新建”欄中的“HTML”鏈接文字，即可進入Dreamweaver CS3的工作界面，可以看到其工作界面主要由標(biāo)題欄、菜單欄、插入欄、文檔工具欄、文檔窗口、屬性面板、狀態(tài)欄、面板組等組成，如圖1-14所示。
圖1-14 Dreamweaver CS3工作界面
1．菜單欄
菜單欄位于Dreamweaver CS3窗口最上方，提供了各種操作命令，包括如下菜單。
●“文件”：用于新建、打開、保存、預(yù)覽文檔、轉(zhuǎn)換文檔格式和檢查文檔兼容性等。
●“編輯”：提供用于基本操作的標(biāo)準(zhǔn)菜單命令。
●“查看”：用于切換文檔的各種視圖，顯示或隱藏不同類型的頁面元素及工具。
●“插入記錄”：向頁面中插入各種頁面元素，創(chuàng)建超鏈接。
●“修改”：用于設(shè)置頁面屬性及更改選定頁面元素的屬性。
●“文本”：用于設(shè)置文本及段落的格式。
●“命令”：提供了對各種命令的訪問，包括根據(jù)格式參數(shù)的選擇來設(shè)置代碼格式、創(chuàng)建網(wǎng)站相冊等。
●“站點”：提供了創(chuàng)建、編輯站點的命令，用于管理當(dāng)前站點中的文件。
●“窗口”：用于設(shè)置工作區(qū)布局和各種面板的打開和隱藏。
●“幫助”：用于提供一些幫助信息。
2．插入欄
插入欄包含用于創(chuàng)建和插入對象（如表格、AP元素和圖像）的按鈕。當(dāng)鼠標(biāo)指針移到某一按鈕上時，會出現(xiàn)一個工具提示，其中含有該按鈕的名稱，如圖1-15所示。
圖1-15 插入欄
●“常用”類別：用于創(chuàng)建和插入最常用的對象，如圖像和表格等。
●“布局”類別：用于插入表格、Div標(biāo)簽、框架和Spry構(gòu)件。還可以選擇表格的兩種視圖：標(biāo)準(zhǔn)（默認(rèn)）視圖和擴展視圖。
●“表單”類別：包含一些按鈕，用于創(chuàng)建表單和插入表單元素（包括Spry驗證構(gòu)件）。
●“數(shù)據(jù)”類別：可以插入Spry數(shù)據(jù)對象和其他動態(tài)元素，如記錄集、重復(fù)區(qū)域、插入記錄表單和更新記錄表單。
●“Spry”類別：包含一些用于構(gòu)建Spry頁面的按鈕，包括Spry數(shù)據(jù)對象和構(gòu)件。
●“文本”類別：用于插入各種文本格式和列表格式的標(biāo)簽，如b、em、p、h1和ul。
●“收藏夾”類別：用于將插入欄中最常用的按鈕分組和組織到某一公共位置。
3．“文檔”工具欄
“文檔”工具欄左端是快速切換視圖模式的按鈕，然后是一些與查看文檔、在本地和遠程站點間傳輸文檔有關(guān)的常用命令和選項，如圖1-16所示。
圖1-16 “文檔”工具欄
●“文檔標(biāo)題”：用于為文檔輸入一個標(biāo)題，瀏覽網(wǎng)頁時，它將顯示在瀏覽器的標(biāo)題欄中。新建文檔時，默認(rèn)的網(wǎng)頁標(biāo)題是“無標(biāo)題文檔”。
●“文件管理”：顯示“文件管理”下拉菜單，可完成文件的上傳、下載等操作。
●“在瀏覽器中預(yù)覽/調(diào)試”：從下拉菜單中選擇一種瀏覽器預(yù)覽或調(diào)試文檔。
●“刷新設(shè)計視圖”：在“代碼”視圖中對文檔進行更改后刷新文檔的“設(shè)計”視圖。
●“可視化助理”：用戶可以使用各種可視化助理來設(shè)計頁面。
●“檢查瀏覽器兼容性”：用于檢查CSS是否對各種瀏覽器均兼容。
4．“文檔”窗口
“文檔”窗口顯示當(dāng)前打開的文檔，用戶在這里進行網(wǎng)頁的編輯制作，分為“代碼”視圖、“設(shè)計”視圖和同時顯示“代碼”視圖和“設(shè)計”視圖的“拆分”視圖3種視圖模式。
●“設(shè)計”視圖：是文檔窗口的默認(rèn)視圖方式。在“設(shè)計”視圖下，用戶可以直接看到網(wǎng)頁的編輯效果，網(wǎng)頁編輯排版完成后的效果與瀏覽器最終顯示的效果完全一致，如圖1-17所示。
圖1-17 “設(shè)計”視圖窗口
●“代碼”視圖：以網(wǎng)頁源代碼方式顯示，如圖1-18所示。
圖1-18 “代碼”視圖窗口
●“拆分”視圖：可在一個窗口中同時看到同一文檔的“代碼”視圖和“設(shè)計”視圖，如圖1-19所示。
圖1-19 “拆分”視圖窗口
5．標(biāo)簽選擇器
標(biāo)簽選擇器位于狀態(tài)欄的最左邊，以HTML標(biāo)記顯示頁面對象信息，通過它可以選擇各種頁面元素。例如，單擊<body>標(biāo)簽可以選擇整個網(wǎng)頁內(nèi)容。用鼠標(biāo)右鍵單擊任一標(biāo)簽，還可以使用彈出的快捷菜單中的命令對該標(biāo)簽進行刪除、編輯等操作。
6．狀態(tài)欄
狀態(tài)欄位于文檔窗口的底部，用于提供與正在編輯的文檔有關(guān)的信息和工具，如圖1-20所示。
圖1-20 Dreamweaver CS3的狀態(tài)欄
● 選取工具：用于選取“文檔”窗口內(nèi)的對象。
● 手形工具：對象大于“文檔”窗口時，用來移動對象的位置。
● 縮放工具：使用該工具后，單擊“文檔”窗口可增大顯示比例，按下【Alt】鍵單擊可縮小顯示比例。
● 窗口大小：顯示當(dāng)前文檔窗口的大小，以像素為單位。在“窗口大小”區(qū)域單擊，通過選擇彈出的快捷菜單中的命令，可將“文檔”窗口的大小調(diào)整到預(yù)定義或自定義的尺寸。
● 文件大小和預(yù)計的下載時間：顯示頁面（包括所有相關(guān)文件，如圖像和其他媒體文件）的預(yù)計文檔大小和預(yù)計下載時間。
7．“屬性”面板
“屬性”面板用于查看和編輯當(dāng)前選定對象（如文本、圖像等）的各種屬性。不同頁面元素對應(yīng)的“屬性”面板也不同。例如，選擇頁面上插入的圖像，則“屬性”面板會顯示該圖像的屬性，包括圖像的文件路徑、圖像的寬度和高度等，如圖1-21所示。
圖1-21 圖像“屬性”面板
8．面板組
Dreamweaver CS3的面板組中包含許多面板，每個面板都可以展開或折疊，如圖1-22所示，關(guān)閉或打開面板可以通過“窗口”菜單來完成。
圖1-22 面板組
用戶在編輯網(wǎng)頁時，若要擴大編輯窗口的大小，可以暫時隱藏面板組。單擊面板組與文檔窗口間的“隱藏/顯示面板組”按鈕，可以將所有面板隱藏，再單擊該按鈕，可以將所有面板顯示，如圖1-23所示。
圖1-23 “隱藏/顯示面板組”按鈕
9．標(biāo)尺和網(wǎng)格
在調(diào)整網(wǎng)頁中一些對象的位置和大小時，利用Dreamweaver CS3提供的標(biāo)尺和網(wǎng)格工具，可以使操作更加準(zhǔn)確。標(biāo)尺和網(wǎng)格只在網(wǎng)頁文檔窗口內(nèi)顯示，在瀏覽器中不顯示。
（1）標(biāo)尺
選擇“查看→標(biāo)尺→顯示”命令，可在文檔窗口的左邊和上邊顯示標(biāo)尺。選擇“查看→標(biāo)尺”命令下一級菜單中的“像素”、“英寸”或“厘米”命令，可以更改標(biāo)尺的單位。
（2）網(wǎng)格
選擇“查看→網(wǎng)格設(shè)置→顯示網(wǎng)格”命令，可以顯示或隱藏網(wǎng)格。選擇“查看→網(wǎng)格設(shè)置→網(wǎng)格設(shè)置”命令，可彈出“網(wǎng)絡(luò)設(shè)置”對話框，如圖1-25所示，在其中可進行網(wǎng)格間隔、顏色、顯示線或點，以及是否顯示網(wǎng)格和是否靠齊網(wǎng)格等設(shè)置。
圖1-25 “網(wǎng)格設(shè)置”對話框
圖1-24 標(biāo)尺和網(wǎng)格
- 大型網(wǎng)站架構(gòu)實戰(zhàn)
- Dreamweaver CS5網(wǎng)頁設(shè)計與制作教程
- 動漫秀場：超級漫畫Q版造型素描技法
- 網(wǎng)頁設(shè)計那些事兒
- 網(wǎng)頁制作與網(wǎng)站建設(shè)寶典
- Dreamweaver CC中文版網(wǎng)頁設(shè)計與制作從新手到高手
- HTML+CSS+JavaScript網(wǎng)頁制作案例教程（第2版）
- 網(wǎng)頁制作實用教程（第3版）
- JSP動態(tài)網(wǎng)站開發(fā)案例指導(dǎo)
- 電子商務(wù)網(wǎng)頁設(shè)計（第二版）
- 寬帶接入技術(shù)
- 秩序之美：網(wǎng)頁中的網(wǎng)格設(shè)計
- Dreamweaver，F(xiàn)lash，F(xiàn)ireworks網(wǎng)頁設(shè)計百練成精（CS3版）
- After Effects UI交互動畫設(shè)計
- Dreamweaver CS5網(wǎng)頁制作