1、1創建站點與網頁創建站點與網頁2q教師：顧振宇q電子信箱：q辦公室：學院樓B421q電話： 67703855q答疑時間：周五12：30-14：003qDreamweaverCS4簡介q創建本地站點和站點中的文件夾q站點中存放文件q創建網頁q創建表格和編輯表格q網頁中添加文本q網頁中添加圖片4qDreamweaver CS4是Adobe公司推出的網頁制作軟件，用于對網站、網頁和Web應用程序進行設計、編碼和開發。它廣泛用于網頁制作和網站管理。qDreamewaver CS4新功能q增強了面向專業人士的基本工具和可視技術。q提供了功能強大、開放式且基于標準的開發模式q可以輕而易舉地制作出跨平臺和瀏

2、覽器的動感效果網頁。qDreamweaver CS4的工作界面簡潔、高效和易用，多數功能都能在工作界面中很方便地找到。q操作界面主要由菜單欄、工具欄、文檔窗口(設計區)、屬性面板、面板組和狀態欄組成q菜單欄q文件、編輯、查看、插入、修改、格式、命令、站點、窗口和幫助q工具欄q插入工具欄、文檔工具欄、應用程序工具欄q文檔窗口q屬性面板q面板組56菜單欄插入工具欄文檔編輯狀態欄屬性面板面板組q打開“查看”菜單可以選擇q“代碼”視圖、“拆分代碼”視圖、“設計”視圖、“代碼和設計”視圖、“實時”視圖q也可以通過文檔工具欄進行切換。q“歷史記錄”的使用q選擇“窗口/歷史記錄”菜單命令，打開“歷史記錄”面

3、板q通過“歷史記錄”面板中滑塊，回退歷史操作q功能鍵q“F4”隱藏或打開面板q“F12”在瀏覽器中預覽頁面7q在Dreamweaver CS4中，“本地站點”是一個文件夾，用于存放網站的所有圖像、多媒體、網頁等文件，便于用戶對站點進行發布、維護和管理。q在創建站點之前，可以先規劃好站點，明確創建站點的方向并采用的方法，同時也是確定本地站點所要實現的功能。89q創建本地站點可以使用向導創建也可以使用高級面板創建。q創建本地站點基本步驟：q選擇“站點/新建站點”菜單命令q選擇“高級”選項卡q設置“站點名稱”q建立“本地根文件夾”q注意站點中文件夾或文件名用英文表示q創建好本地站點后，選擇“站點/管

4、理站點”菜單命令，可以進行一些基本的編輯操作。q重新編輯本地站點，修改保存位置、名稱q復制和刪除創建的本地站點q導出站點q將站點導出到指定位置，導出的站點文件是一個XML文件，擴展名為“.ste”，以后可直接導入使用。q導入站點q將擴展名為“.ste” 的XML文件，導入使用。1011q創建好本地站點后，可以根據需要創建各欄目文件夾和文件。q站點中新建文件夾q打開“文件” 面板，選擇需要新建文件夾的位置，按右鍵，選擇“新建文件夾”命令q站點中新建文件(創建網頁)q打開“文件” 面板，選擇需要新建文件的位置，按右鍵，選擇“新建文件”命令q站點中添加文件q打開“文件” 面板，在文件列表中選擇需要添

5、加的文件，然后通過拷貝粘貼，添加到站點指定文件夾中。q站點中文件管理q選中站點中文件或文件夾，按鼠標右鍵，選擇“編輯”菜單，可進行復制、剪切、粘貼、刪除和重命名等操作qDreamweaver CS4提供了多種創建文檔的方法，可以創建一個新的空白HTML文檔，或使用模板創建新文檔。q創建空白網頁文檔 q打開和保存網頁文檔1213q頁面屬性包括：q外觀設置：背景圖像、背景顏色、文本格式、邊距q鏈接：鏈接文本和顏色q標題和編碼q選擇“修改/頁面屬性”菜單命令，打開“頁面屬性”對話框設置14q創建站點(在C:TEST文件夾下)和站點中文件夾q設置站點名稱“Mysite”q建立本地根文件夾“C:Test

6、Mysite”q建立新文件夾“SC1”q素材導入到站點文件夾中q將“SC”文件夾中素材文件導入站點“SC1”文件夾q注意復制文件時不能選“復制”命令，要用“拷貝”命令q創建網頁q在站點中新建頁main.htmlq設置網頁標題為“網上沖印服務”q將“SC1”文件夾中的bg.gif設置為網頁背景q表格是DreamweaverCS4中最常用的布局工具，表格在網頁中不僅可以排列數據，還可以對頁面中的圖像、文本、動畫等元素進行準確的定位，使頁面顯得整齊有序、分類明確，便于瀏覽。1516q創建表格的方法：q選擇“插入/表格”菜單命令q或者單擊“插入”工具欄中“常用”模式中的“表格”按鈕q打開“表格”對話框

7、，設置表格參數q表格寬度： “百分比”單位表示表格占整個網頁寬度的百分比； “像素”單位表示表格固定寬度q邊框粗細： 表格的邊框的寬度 0表示不顯示邊框q單元格邊距： 表格的單元格中內容和邊框之間的距離 q單元格間距： 單元格和單元格之間的距離 q嵌套表格就是在已經存在的表格中插入的表格。q插入嵌套表格的方法與插入表格的方法相同。1718q選擇表格和單元格q選擇表格：點擊單元格分隔線；或在表格中按右鍵，“表格/選擇表格”q選擇單元格：鼠標拖動q表格編輯q選擇“修改/表格”菜單命令(或在表格中按右鍵，選擇“表格”)，可以對表格進行編輯q插入行、列 在當前位置上插入行，當前位置前插入列 注意：如果

8、選擇“插入行或列”，可以選擇插入行或列的位置q刪除行、列q合并單元格q拆分單元格19q建立表格后，選擇整個表格，可以通過“屬性”面板修改表格屬性q表格的結構q表格的修飾20q選擇表格中的單元格，通過“屬性”面板設置單元格屬性q單元格內容格式q單元格結構q單元格修飾q在Dreamweaver CS4中表格背景設置需要通過修改代碼來實現q表格背景設置步驟q先插入表格q切換到代碼視圖，在表格代碼中添加“bgcolor”、“background”參數q設置表格背景色qqq設置表格背景圖片qq22q在網頁main.html中插入一個5行2列的表格，表格寬度為800像素，邊框粗細為0，背景色為白色，并居中

9、對齊，合并第4、5行單元格q在表格的第1行，第1列中再插入一個2行2列的表格，寬度為100%，邊框粗細為0，并合并該表格的第1行(表格嵌套)23q添加文本q直接在文檔窗口中輸入文本q通過“復制/粘貼”，輸入文本q注意在Dreamweaver中粘貼文本時，將忽略原文本的格式q文本輸入后，可通過“屬性”面板來完成文本格式設置q“屬性”面板可以設置文本的格式、字形、項目列表、文本縮進、文本超級鏈接q文本的字體、大小、顏色需要通過CSS樣式來設置24q表格第4、5行中分別添加文本，文本在表格中居中對齊，文本內容見SC1文件夾中Txt.doc文件q將表格第4行單元格的背景顏色設置為#33990025q插

10、入特殊字符q選擇“插入工具欄”中“文本”選項卡，選擇相應字符q在網頁文檔中常見的特殊符號有空格、版權符號、貨幣符號、注冊商標號以及直線等。26q添加空格q(在Dreamweaver中是不能添加多余空格的)q按“Ctrl+Shift+SpaceBar”組合鍵可以添加空格q選擇“插入工具欄”中“字符”選項卡，選擇“不換行空格”，可以添加空格q選擇“編輯/首選參數”菜單命令，打開“首選參數”對話框，選擇“常規”選項卡，選中“允許多個連續空格”復選框q文本換行q自動換行q使用“Enter”鍵強制換行q使用換行符(“Shift+Enter”換行不換段)q插入日期q選擇“插入”面板中“常用”選項卡q選擇“

11、日期”，打開“插入日期”對話框q選擇日期格式q插入水平線q選擇“插入”面板中，選擇“水平線”q同時在“屬性”面板中對水平線的屬性進行設置27q水平線顏色設置q選中水平線，按右鍵選擇“編輯標簽”，打開“標簽編輯器”q選擇“瀏覽器特定的”，設置顏色q注意：水平線的顏色只能在瀏覽器中才能看到28q網頁文本中，一些類型相同或具有序列關系的文本可以通過列表方式來顯示q列表方式可以通過屬性面板來設置q編號列表q項目列表q列表屬性設置q選擇“格式/列表/屬性”菜單命令，打開“列表屬性”對話框，設置列表屬性30q在“main.html”網頁表格的第4、5行之間插入2行，并插入水平線和日期 q水平線寬800像素

12、、高5像素、顏色#339900q日期自動更新包括日期和時間，居中對齊q在表格第2行第1列中添加“用戶留言”內容，文本內容見SC1文件夾中Txt.doc文件q為文本設置項目符號列表，項目符號為“正方形”31q插入圖像q確定插入圖像位置q選擇“插入/圖像”菜單命令，打開“選擇圖像源”對話框q選擇要插入的圖像q注意q如果插入的圖像不是保存在本地站點內，系統會提示將圖像復制到本地站點內保存。否則，在其他計算機上或上傳到遠程服務器后就無法瀏覽網頁。32q選擇圖片，在“屬性”面板中設置屬性q“寬”和“高”設置圖像大小q“源文件” 顯示圖像文件的路徑，重新輸入路徑可以更換圖像q“鏈接”設置圖像超鏈接q“替換”輸入文本，當圖像在瀏覽器中不能正常顯示時，在圖像位置顯示文本；圖像在瀏覽器中能正常顯示時，當鼠標移動到圖像上會顯示文本q“垂直、水平邊距”設定圖像頂底部和左右側的空白邊距q“邊框”設定圖像邊框，默認為無邊框q“重設大小”圖像大小恢復原始大小33q參考樣張在表格中插入相應圖片，所有圖片居中對齊34q完成課堂示例1-5q設置main.html網頁中圖片的替代文本“網上沖印服務”，并設置圖片大小為“寬600，高240”q在“Mysite”站點中新建網頁tk.html，并完成以下操作q網頁內容見“sc1”文件夾中tk.docq將“