第9講_創(chuàng)建站點(diǎn)與網(wǎng)頁(yè)

1、1創(chuàng)建站點(diǎn)與網(wǎng)頁(yè)創(chuàng)建站點(diǎn)與網(wǎng)頁(yè)2q教師：顧振宇q電子信箱：q辦公室：學(xué)院樓B421q電話： 67703855q答疑時(shí)間：周五12：30-14：003qDreamweaverCS4簡(jiǎn)介q創(chuàng)建本地站點(diǎn)和站點(diǎn)中的文件夾q站點(diǎn)中存放文件q創(chuàng)建網(wǎng)頁(yè)q創(chuàng)建表格和編輯表格q網(wǎng)頁(yè)中添加文本q網(wǎng)頁(yè)中添加圖片4qDreamweaver CS4是Adobe公司推出的網(wǎng)頁(yè)制作軟件，用于對(duì)網(wǎng)站、網(wǎng)頁(yè)和Web應(yīng)用程序進(jìn)行設(shè)計(jì)、編碼和開發(fā)。它廣泛用于網(wǎng)頁(yè)制作和網(wǎng)站管理。qDreamewaver CS4新功能q增強(qiáng)了面向?qū)I(yè)人士的基本工具和可視技術(shù)。q提供了功能強(qiáng)大、開放式且基于標(biāo)準(zhǔn)的開發(fā)模式q可以輕而易舉地制作出跨平臺(tái)和瀏

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

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

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

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

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

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

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

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

10、入特殊字符q選擇“插入工具欄”中“文本”選項(xiàng)卡，選擇相應(yīng)字符q在網(wǎng)頁(yè)文檔中常見的特殊符號(hào)有空格、版權(quán)符號(hào)、貨幣符號(hào)、注冊(cè)商標(biāo)號(hào)以及直線等。26q添加空格q(在Dreamweaver中是不能添加多余空格的)q按“Ctrl+Shift+SpaceBar”組合鍵可以添加空格q選擇“插入工具欄”中“字符”選項(xiàng)卡，選擇“不換行空格”，可以添加空格q選擇“編輯/首選參數(shù)”菜單命令，打開“首選參數(shù)”對(duì)話框，選擇“常規(guī)”選項(xiàng)卡，選中“允許多個(gè)連續(xù)空格”復(fù)選框q文本換行q自動(dòng)換行q使用“Enter”鍵強(qiáng)制換行q使用換行符(“Shift+Enter”換行不換段)q插入日期q選擇“插入”面板中“常用”選項(xiàng)卡q選擇“

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

12、、高5像素、顏色#339900q日期自動(dòng)更新包括日期和時(shí)間，居中對(duì)齊q在表格第2行第1列中添加“用戶留言”內(nèi)容，文本內(nèi)容見SC1文件夾中Txt.doc文件q為文本設(shè)置項(xiàng)目符號(hào)列表，項(xiàng)目符號(hào)為“正方形”31q插入圖像q確定插入圖像位置q選擇“插入/圖像”菜單命令，打開“選擇圖像源”對(duì)話框q選擇要插入的圖像q注意q如果插入的圖像不是保存在本地站點(diǎn)內(nèi)，系統(tǒng)會(huì)提示將圖像復(fù)制到本地站點(diǎn)內(nèi)保存。否則，在其他計(jì)算機(jī)上或上傳到遠(yuǎn)程服務(wù)器后就無法瀏覽網(wǎng)頁(yè)。32q選擇圖片，在“屬性”面板中設(shè)置屬性q“寬”和“高”設(shè)置圖像大小q“源文件” 顯示圖像文件的路徑，重新輸入路徑可以更換圖像q“鏈接”設(shè)置圖像超鏈接q“替換”輸入文本，當(dāng)圖像在瀏覽器中不能正常顯示時(shí)，在圖像位置顯示文本；圖像在瀏覽器中能正常顯示時(shí)，當(dāng)鼠標(biāo)移動(dòng)到圖像上會(huì)顯示文本q“垂直、水平邊距”設(shè)定圖像頂?shù)撞亢妥笥覀?cè)的空白邊距q“邊框”設(shè)定圖像邊框，默認(rèn)為無邊框q“重設(shè)大小”圖像大小恢復(fù)原始大小33q參考樣張?jiān)诒砀裰胁迦胂鄳?yīng)圖片，所有圖片居中對(duì)齊34q完成課堂示例1-5q設(shè)置main.html網(wǎng)頁(yè)中圖片的替代文本“網(wǎng)上沖印服務(wù)”，并設(shè)置圖片大小為“寬600，高240”q在“Mysite”站點(diǎn)中新建網(wǎng)頁(yè)tk.html，并完成以下操作q網(wǎng)頁(yè)內(nèi)容見“sc1”文件夾中tk.docq將“