模塊2DreamweaverCS5基本操作實訓2快樂驛站——創建與管理本地站點2.1DreamweaverCS5的工作界面 2.2站點的創建與管理 2.3文檔的基本操作 實訓3快樂驛站——使用網頁元素和創建超鏈接2.4文本的輸入和編輯2.5頁面屬性 2.6圖像的插入與編輯2.7多媒體元素2.8超級鏈接 實訓4漫游世界——表格布局頁面 2.9表格布局 實訓5數碼頻道——使用框架布局網頁 2.10框架（框架集）布局 實訓6古詩欣賞——模板的應用 2.11模板 思考與實訓2 實訓2快樂驛站——創建與管理本地站點實訓目的1．學會本地站點的創建與編輯方法。2．學會網頁文件的新建、保存、預覽等基本操作。實訓2快樂驛站——創建與管理本地站點預覽chongshang.html實訓2快樂驛站——創建與管理本地站點“管理站點”“導出站點”2.1DreamweaverCS5的工作界面2.1DreamweaverCS5的工作界面2.1DreamweaverCS5的工作界面1．工作區切換器單擊“工作區切換器”下拉箭頭，用戶可以選擇合適的工作區布局模式，不同工作區的界面會有所不同，系統默認的工作區是“設計器”。設計器：可以彌補編程能力較差帶來的缺陷，直觀可視，設計和修改簡單方便。編碼人員（高級）：用于主要用代碼來制作網頁的用戶使用。經典：便于習慣使用之前版本布局模式的設計者使用。雙重屏幕：適用于在計算機上有兩個顯示器的用戶。在實際工作中，工作區布局方式是靈活多變的，還可以使用“新建工作區”命令根據自身的需求創建一個適合自己的工作區布局。2.1DreamweaverCS5的工作界面2．菜單欄菜單欄提供了10個主菜單項，利用菜單欄基本上能夠實現DreamweaverCS5的所有功能。菜單項按照功能的不同進行劃分，使用戶方便使用。例如，“文件”菜單中包含了對文檔操作的命令；“插入”菜單中包含了向網頁中插入各種頁面元素和創建超鏈接的命令；“站點”菜單中包含了創建和管理站點的相關命令。3．文檔工具欄和文檔窗口“文檔”工具欄包含了“文檔”窗口視圖模式的切換按鈕，以及一些與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令和選項。“文檔”窗口用來顯示當前打開的文檔，用戶在這里可進行網頁的編輯制作。2.1DreamweaverCS5的工作界面4．狀態欄狀態欄位于“文檔”窗口的底部，提供與正在編輯的文檔有關的信息和工具。2.1DreamweaverCS5的工作界面5．“屬性”面板“屬性”面板用于查看和設置當前選定對象（如文本、圖像等）的最常用屬性。該面板的內容會根據選擇對象的不同而顯示不同的屬性。6．面板組DreamweaverCS5中的面板通常被組織到面板組中，其中的面板以選項卡的形式顯示。2.1DreamweaverCS5的工作界面7．“插入”面板“插入”面板包含將各種網頁元素插入到文檔的快捷按鈕。單擊按鈕，從下拉菜單中可以選擇網頁元素的類別。2.1DreamweaverCS5的工作界面8．標尺、輔助線和網格在制作網頁時，標尺、輔助線和網格可以幫助測量頁面元素的大小，準確地放置和調整對象，從而對網頁進行布局，并且它們在瀏覽器中不會顯示。2.1DreamweaverCS5的工作界面8．標尺、輔助線和網格（2）網格選擇菜單“查看→網格設置→顯示網格”命令，可以顯示或隱藏網格，。選擇菜單“查看→網格設置→網格設置”命令，彈出“網格設置”對話框，可以對網格的間隔大小、顏色、是否靠齊網格等進行設置。

2.2站點的創建與管理按地理位置劃分站點分為本地站點和遠程站點。把在本地計算機硬盤中存放網頁的文件夾稱為本地站點，把在Internet網絡服務器上存放網頁的文件夾稱為遠程站點。按站點的交互性劃分站點分為靜態站點和動態站點。在靜態站點中，瀏覽者與網頁之間不涉及交互活動，靜態頁面向每一位瀏覽者發送完全相同的響應，而在動態站點中，動態頁面可自定義響應，根據瀏覽者的輸入信息提供不同的頁面，如登錄頁面、搜索引擎等。2.2站點的創建與管理1．創建本地站點在DreamweaverCS5中創建Web站點，通常先在本地磁盤上創建本地站點，經過一系列的測試后，再將這些網頁的副本上傳到一個遠程Web服務器，成為真正的站點供他人在因特網上瀏覽。默認圖像文件夾：指定存儲站點圖像的默認文件夾。鏈接相對于：選擇“文檔”選項，表示使用文檔的相對路徑進行鏈接，選擇“站點根目錄選項，表示使用站點根目錄相對路徑進行鏈接。WebURL：輸入已完成的站點將使用的URL。啟用緩存：是否創建本地緩存以提高鏈接和站點管理任務的速度。2.2站點的創建與管理2．編輯站點3．復制站點在制作網站的過程中，如果僅需更改站點中的部分頁面內容而不破壞原站點內容，可以先將站點復制出來，然后在其副本上修改，這樣可以快速創建多個結構相同的站點。4．刪除站點選擇菜單“站點→管理站點”命令，打開“管理站點”對話框，選擇要刪除的站點，單擊“刪除”按鈕，即可將站點刪除。刪除站點時，只是刪除了站點的定義信息，硬盤中相應位置的文件和文件夾并不會被刪除。5．導出和導入站點如果在兩臺計算機之間移動站點，或多個用戶共同開發網站，可通過DreamweaverCS5的導入和導出站點功能來實現。（1）導出站點（2）導入站點2.3文檔的基本操作1．創建文件夾若創建站點的內容不復雜，可將網頁直接存放在站點文件夾下，而對于其他的資源可根據種類建立不同的文件夾進行存放，以便于管理和查找。例如：images文件夾存放站點中的圖像文件，music文件夾存放站點中的聲音文件等。若創建站點的內容較為復雜，網頁也需要存放在不同的文件夾中，這樣可以方便地對網站進行修改。在本地站點中創建文件夾可使用以下方法。2．創建空白網頁文件①啟動DreamweaverCS5后，窗口中會出現一個開始頁面，單擊“新建”欄的“HTML”選項即可創建一個空白網頁。②選擇菜單“文件→新建”命令，打開“新建文檔”對話框，選擇“空白頁”選項卡中的“HTML”頁面類型，在“布局”列表中選擇“無”，單擊“創建”按鈕。③在“文件”面板中選擇站點，單擊鼠標右鍵，從彈出的快捷菜單中選擇“新建文件”命令，輸入文件的名稱，按【Enter】鍵完成。2.3文檔的基本操作3．保存網頁文件選擇菜單“文件→保存”命令或按【Ctrl+S】組合鍵可對當前文檔進行保存。如果對打開的文檔進行了修改，但尚未保存，文件名后將自動顯示一個“*”，保存后“*”將消失。2.3文檔的基本操作4．文檔的打開和預覽采用以下方法可以打開已有的文檔。①選擇菜單“文件→打開”命令，彈出“打開”對話框，選擇要打開的文件，單擊“打開”按鈕。②在“文件”面板中，選擇要打開的文檔，單擊鼠標右鍵，在彈出的快捷菜單中選擇“打開”命令，或直接雙擊鼠標都可以打開該文檔。打開文檔后，執行以下操作之一，用戶可以在瀏覽器中預覽頁面。①選擇菜單“文件→在瀏覽器中預覽→IExplore”命令。②單擊“文檔”工具欄的“在瀏覽器中預覽/調試”按鈕，從彈出的菜單中選擇“預覽在Iexplore”。2.3文檔的基本操作5．移動和復制文件（文件夾）在“文件”面板中，選擇要移動或復制的文件或文件夾。①單擊鼠標右鍵，在彈出的快捷菜單中選擇“編輯→復制”命令，然后選擇目標位置，從快捷菜單中選擇“編輯→粘貼”命令，可完成文件或文件夾的復制操作。②單擊鼠標右鍵，在彈出的快捷菜單中選擇“編輯→剪切”命令，然后選擇目標位置，從快捷菜單中選擇“編輯→粘貼”命令，可完成文件或文件夾的移動操作。③用鼠標直接將文件或文件夾拖動到新位置，可完成文件或文件夾的移動操作。6．刪除文件（文件夾）①在“文件”面板中，選擇要刪除的文件或文件夾。②單擊鼠標右鍵，從彈出的快捷菜單中選擇“編輯→刪除”命令或直接按【Del】鍵。③在彈出的提示對話框中單擊“是”按鈕，即可將文件或文件夾從本地站點中刪除。實訓3快樂驛站——使用網頁元素和創建超鏈接實訓目的1．學會設置網頁的頁面屬性。2．掌握網頁元素的插入和編輯方法。3．掌握不同超鏈接的建立方法。實訓3快樂驛站——使用網頁元素和創建超鏈接網頁效果2.4文本的輸入和編輯文本是網頁中最基本的元素。用戶瀏覽網頁時，獲取信息的主要方式就是通過文本。攜帶信息量大，又易于瀏覽和下載，因此掌握文本的輸入和編輯是至關重要的。1．在網頁中添加文本（1）添加普通文本可以采用以下3種方法添加普通文本。①直接通過鍵盤輸入文本。②在其他應用程序中選擇文本，按【Ctrl+C】組合鍵復制，在DreamweaverCS5的“文檔”窗口中，選擇菜單“編輯→粘貼”命令（或按【Ctrl+V】組合鍵）復制文本。③選擇菜單“文件→導入→Word文檔”命令，彈出“導入Word文檔”對話框，選擇要導入的Word文檔，單擊“打開”按鈕，將該Word文檔中的全部文本添加到“文檔”窗口中。2.4文本的輸入和編輯（2）插入空格默認情況下，網頁文檔只允許在文本或字符之間輸入一個空格，若要在文檔中輸入多個連續空格可執行以下操作。①選擇“插入”面板中的“文本”類別，在“字符”下拉菜單中選擇“不換行空格”。②選擇菜單“插入→HTML→特殊字符→不換行空格”命令③按【Ctrl+Shift+Space】組合鍵。④在“代碼”視圖窗口中，輸入空格代碼“ ”。⑤切換中文輸入法為全角狀態，按空格鍵可以輸入多個空格。⑥選擇菜單“編輯→首選參數”命令，彈出如圖2-53所示的對話框，在“分類”列表中選擇“常規”選項，勾選“允許多個連續的空格”復選框，單擊“確定”按鈕。此時，用戶可以直接按空格鍵輸入空格。2.4文本的輸入和編輯（3）插入特殊字符在網頁中有時需要插入一些特殊字符，可使用以下方法輸入。①選擇菜單“插入→HTML→特殊字符”命令，在其子菜單中選擇要插入的特殊字符。②用鼠標右鍵單擊輸入法工具條上的軟鍵盤，從打開的列表中選擇相應的符號組，例如選擇“特殊符號”，單擊可插入特殊字符。（4）插入日期在網頁中如果需要顯示日期，可采用以下步驟完成。①在“文檔”窗口中，將插入點定位到需要插入日期的位置。②選擇菜單“插入→日期”命令或單擊“插入”面板“常用”類別中的“日期”按鈕，彈出“插入日期”對話框，設置完成后，單擊“確定”按鈕。2.4文本的輸入和編輯2．文本的分段和換行網頁中文本的換行包括自動換行和強制換行。在DreamweaverCS5中，輸入的文本（數字和字母除外）到達文檔窗口右邊界時，會自動轉到下一行。若想在指定的位置換行，則需要強制換行，強制換行有段落換行和換行符換行兩種方式。（1）段落換行若想生成新的段落，在兩段之間出現一空行，可采用以下方法進行換行。①在需要換行的位置直接按【Enter】鍵。②在代碼視圖窗口中輸入段落標記<p>和</p>。（2）換行符換行若不想生成新的段落，兩行之間不出現空行，可采用以下方法進行換行。①按【Shift+Enter】組合鍵。②選擇菜單“插入→HTML→特殊字符→換行符”命令。③選擇“插入”面板中的“文本”類別，在“字符”下拉菜單中選擇“換行符”。④在“代碼”視圖窗口中，輸入換行標記<br/>。2.4文本的輸入和編輯3．文本的屬性設置格式美觀的文本不僅可以傳遞大量的信息，還可以激發瀏覽者的閱讀興趣。要設置文本的格式，需先選中文本，在出現的文本“屬性”面板中，通過“HTML”和“CSS”界面可以對文本的屬性進行設置。2.4文本的輸入和編輯4．插入水平線網頁中經常會用一條或多條水平線將不同的對象分隔，使整個頁面更加整齊、美觀。（1）插入水平線將光標定位到需要插入水平線的位置，執行以下操作之一，即可插入水平線。①選擇菜單“插入→HTML→水平線”命令。②單擊“插入”面板“常用”類別中的“水平線”按鈕。（2）水平線的屬性設置①選擇水平線，出現“水平線”屬性面板，可以設置水平線的屬性。2.5頁面屬性制作網頁時，首先需要設置整個頁面的默認屬性，包括文本格式、網頁標題、背景顏色、背景圖像、鏈接顏色及下畫線等，這些設置可通過“頁面屬性”對話框完成。1．打開“頁面屬性”對話框2．設置頁面屬性2.6圖像的插入與編輯1．網頁圖像格式（1）GIF格式這種格式允許在一個文件中存放多幅圖像，當多幅相關圖像連續播放時，可以產生動畫效果，且支持透明背景顯示。（2）JPEG格式它是采用JPEG壓縮標準進行壓縮的圖像文件格式，文件擴展名為“.jpg”或“.jpeg”。JPEG格式支持24位真彩色，采用有損壓縮的方式，可以高效壓縮圖片并能保持圖像的顏色畫質基本不丟失，普遍用于存儲顏色豐富的圖像，特別適合于在網絡上發布照片。（3）PNG格式是一種逐步流行的專門為網絡設計的新型圖像文件格式。PNG格式汲取了GIF格式和JPEG格式的優點，既支持透明背景，又同時提供24位和48位真彩色圖像的支持。它使用新型的無損壓縮方案來減小文件的大小，圖像壓縮后不會有細節上的損失。PNG格式顯示速度快，只需下載1/64的圖像信息就可以顯示出低分辨率的預覽圖像。2.6圖像的插入與編輯2．圖像的插入圖像是網頁制作過程中經常用到的元素，它可以使網頁更加直觀和具有欣賞性。在網頁中插入圖像的方法如下。①將光標定位到窗口中要插入圖像的位置，執行以下操作之一。

選擇菜單“插入→圖像”命令。

單擊“插入”面板“常用”類別中的“圖像”按鈕。

按【Ctrl+Alt+I】組合鍵。②打開“選擇圖像源文件”對話框，選擇要插入的圖像文件，單擊“確定”按鈕。③如果圖像文件不在站點文件夾中，會彈出對話框，提示用戶將文件保存到站點文件夾中，選擇“是”按鈕，彈出“復制文件為”對話框，選擇站點文件夾，單擊“保存”按鈕。④有時會彈出“圖像標簽輔助功能屬性”對話框，可以在進行設置后，單擊“確定”按鈕，也可以直接單擊“確定”或“取消”按鈕。2.6圖像的插入與編輯3．設置圖像的屬性選擇圖像后，在窗口下方出現圖像“屬性”面板，可以設置圖像的屬性。2.6圖像的插入與編輯4．插入圖像對象（1）插入圖像占位符在設計頁面時，有時需要插入的圖像還沒有制作好，這時可先用圖像占位符來替代圖片位置，以后再將這個位置變為具體的圖像。（2）插入鼠標經過圖像鼠標經過圖像指在瀏覽器中當鼠標指針移到一幅圖像上時發生變化的圖像。鼠標經過圖像實際上由兩幅圖像組成，即初始圖像和替換圖像。2.7多媒體元素DreamweaverCS5中可以非常方便地在網頁中添加動畫、聲音、視頻等多媒體元素。有了這些元素的加入，可以使網頁更加美觀和具有趣味性。1．插入Flash動畫文件（SWF）2．插入Flash視頻文件（FLV）3．插入音頻文件2.8超級鏈接超鏈接是網頁非常重要的特征，它可以實現文檔間的跳轉。超鏈接由源端點和目標端點構成，表示出了文檔間跳轉的關系。1．鏈接路徑每個文件都有自己的存放位置和路徑，創建正確的鏈接，首先要清楚一個文件到要鏈接的目標文件之間的路徑關系，也就是鏈接路徑。鏈接路徑可以分為三種：絕對路徑、相對路徑和根路徑。2．鏈接類型根據鏈接使用的對象不同，可將超鏈接分為：文本鏈接、圖像鏈接、錨點鏈接、電子郵件鏈接、空鏈接、文件下載鏈接、腳本鏈接等。3．創建文本鏈接4．創建圖像鏈接網頁中的圖像也可以建立超鏈接，圖像超鏈接有兩種情況：一是以整個圖像為對象建立超鏈接，這種鏈接的建立方法和文本鏈接的建立方法相同。二是為圖像的不同區域分別創建超鏈接，稱為圖像熱點鏈接，創建這種鏈接可使用以下方法。2.8超級鏈接5．創建錨點鏈接錨點鏈接用于創建到網頁特定位置的鏈接，利用這種鏈接可以跳轉到當前網頁或其他網頁中的某一指定位置，可以使用戶快速訪問相關的內容。創建錨點鏈接分兩步：一是創建命名錨記；二是創建到命名錨記的鏈接。6．創建文件下載鏈接瀏覽網站的目的往往是查找并下載資料，最常見的是下載軟件或程序，下載時會出現對話框，這種資源建立的方法就是文件下載鏈接。文件下載鏈接方法和文本鏈接的建立方法相同，只是當被鏈接的文件是“.exe”、“.zip”、“.rar”等非網頁類型的文件時，瀏覽器無法直接打開，便會提示文件會被下載，這就是網上下載的方法。7．創建電子郵件鏈接電子郵件鏈接是一種特殊的超鏈接，單擊包含該鏈接的網頁對象時，可以啟動系統默認的郵件管理程序，郵件地址自動填寫到“收件人”欄中，方便瀏覽者給網站發送郵件。2.8超級鏈接8．創建空鏈接空鏈接是沒有指向任何對象的鏈接。例如：一般站點首頁中導航欄的“本站首頁”就沒有必要設置鏈接，但為了看到鏈接效果，就需要設置一個空鏈接。要創建空鏈接，可按照下面的方法完成。①在“文檔”窗口中選中要建立空鏈接的文本或圖像。②在屬性面板的“鏈接”文本框中輸入“javascript:;”（javascript后依次接一個冒號和一個分號，或者一個“#”號。9．創建腳本鏈接腳本鏈接是一種用于執行JavaScript代碼或調用JavaScript函數的鏈接，使用腳本鏈接，能夠在不退出當前網頁的情況下為瀏覽者提供許多附加信息。實訓4漫游世界——表格布局頁面實訓目的1．掌握表格的創建方法和表格的屬性設置。2．學會使用表格布局頁面的方法和技巧。實訓4漫游世界——表格布局頁面2.9表格布局為了使網頁更加美觀大方，在制作網頁時，需要先對網頁的輪廓進行規劃，將文字、圖片等網頁元素進行精確定位，這就需要用到網頁的布局。表格布局是目前最常見的網頁布局方式之一，它靈活方便、簡單易學。熟練地使用表格布局是網頁制作的基本要求。1．表格的組成2.9表格布局2．創建表格（1）創建表格（2）創建嵌套表格創建嵌套表格就是在已有表格的某單元格中插入新的表格。使用表格的嵌套可以使大量的網頁元素進行復雜的定位，從而整齊地展示在瀏覽者面前，在新浪、網易等綜合性網站中都被普遍使用。2.9表格布局3．選擇表格元素要在表格中進行操作，首先需要選擇表格元素，即選擇整個表格、行、列和單元格。（1）選擇整個表格（2）選擇行（3）選擇列（4）選擇單元格4．設置表格屬性（1）設置表格的屬性（2）設置單元格的屬性2.9表格布局5．表格的基本操作（1）調整表格的大小（2）調整行高和列寬（3）插入行或列（4）刪除行或列（5）合并和拆分單元格6．使用擴展表格模式DreamweaverCS5中有兩種表格模式，分別為標準模式和擴展表格模式。標準模式是表格默認的視圖模式，表格及其內容的絕大部分操作適合在該模式下進行。在擴展表格模式下，DreamweaverCS5會臨時向文檔中的所有表格添加單元格邊距和間距，并且增加表格的邊框，可使編輯操作更加直觀。使用這種模式，可以方便地選擇表格中的內容或精確的定位插入點。實訓5數碼頻道——使用框架布局網頁實訓目的1．掌握框架的創建方法和框架（框架集）的屬性設置。2．學會使用框架進行網頁導航的方法。實訓5數碼頻道——使用框架布局網頁2.10框架（框架集）布局框架技術是設計網頁時經常用到的一種布局技術，它主要通過框架集（Frameset）和框架（Frames）兩種元素來實現。一個框架就是一個區域，可以用來單獨打開一個HTML文檔。多個框架可以把瀏覽器窗口劃分為若干個區域，每個區域顯示不同的網頁文檔，多個框架的集合就是框架集。通常大多數的框架用于網站的導航。在

DreamweaverCS5中使用框架布局頁面時，必須將框架集和單個框架全部保存，頁面才能在瀏覽器中正常顯示。2.10框架（框架集）布局1．創建框架集（1）新建預定義的框架集可通過“新建文檔”創建和在已打開的文檔中創建預定義框架集。（2）創建自定義框架集一般可以通過對預設框架集進行修改完成自定義框架集的創建。2．選擇框架和框架集要對框架或框架集進行操作，首先需要選擇框架或框架集。選擇框架和框架集既可以在“文檔”窗口中選擇，也可以通過“框架”面板選擇。2.10框架（框架集）布局3．設置框架（集）的屬性（1）設置框架集屬性（2）設置框架屬性2.10框架（框架集）布局4．向框架中添加內容（1）直接在框架中添加內容（2）在框架中打開已有的網頁文件5．保存框架框架集文件和與之相關的框架文件必須全部保存，才可以在瀏覽器