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

1、1創(chuàng)建站點與網(wǎng)頁創(chuàng)建站點與網(wǎng)頁2 2q教師：柳青 q電子信箱： Lq辦公室：信息樓B418q電話： 677038523qDreamweaverCS4簡介q創(chuàng)建本地站點和站點中的文件夾q站點中存放文件q創(chuàng)建網(wǎng)頁q創(chuàng)建表格和編輯表格q網(wǎng)頁中添加文本q網(wǎng)頁中添加圖片4qDreamweaver CS4是Adobe公司推出的網(wǎng)頁制作軟件，用于對網(wǎng)站、網(wǎng)頁和Web應(yīng)用程序進行設(shè)計、編碼和開發(fā)。它廣泛用于網(wǎng)頁制作和網(wǎng)站管理。qDreamewaver CS4新功能q增強了面向?qū)I(yè)人士的基本工具和可視技術(shù)。q提供了功能強大、開放式且基于標(biāo)準(zhǔn)的開發(fā)模式q可以輕而易舉地制作出跨平臺和瀏覽器的動感效果網(wǎng)頁。qDrea

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

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

4、點中新建文件夾q打開“文件” 面板，選擇需要新建文件夾的位置，按右鍵，選擇“新建文件夾”命令q站點中新建文件(創(chuàng)建網(wǎng)頁)q打開“文件” 面板，選擇需要新建文件的位置，按右鍵，選擇“新建文件”命令q站點中添加文件q打開“文件” 面板，在文件列表中選擇需要添加的文件，然后通過拷貝粘貼，添加到站點指定文件夾中。q站點中文件管理q選中站點中文件或文件夾，按鼠標(biāo)右鍵，選擇“編輯”菜單，可進行復(fù)制、剪切、粘貼、刪除和重命名等操作qDreamweaver CS4提供了多種創(chuàng)建文檔的方法，可以創(chuàng)建一個新的空白HTML文檔，或使用模板創(chuàng)建新文檔。q創(chuàng)建空白網(wǎng)頁文檔 q打開和保存網(wǎng)頁文檔1112q頁面屬性包括：q

5、外觀設(shè)置：背景圖像、背景顏色、文本格式、邊距q鏈接：鏈接文本和顏色q標(biāo)題和編碼q選擇“修改/頁面屬性”菜單命令，打開“頁面屬性”對話框設(shè)置13q創(chuàng)建站點和站點中文件夾q設(shè)置站點名稱“Mysite”q建立本地根文件夾“C:TestMysite”q建立新文件夾“SC1”q素材導(dǎo)入到站點文件夾中q將“SC”文件夾中素材文件導(dǎo)入站點“SC1”文件夾中q注意復(fù)制文件時不能選“復(fù)制”命令，要用“拷貝”命令q創(chuàng)建網(wǎng)頁q在站點中新建頁main.htmlq設(shè)置網(wǎng)頁標(biāo)題為“網(wǎng)上沖印服務(wù)”q將“SC1”文件夾中的bg.gif設(shè)置為網(wǎng)頁背景q表格是DreamweaverCS4中最常用的布局工具，表格在網(wǎng)頁中不僅可以排

6、列數(shù)據(jù)，還可以對頁面中的圖像、文本、動畫等元素進行準(zhǔn)確的定位，使頁面顯得整齊有序、分類明確，便于瀏覽。1415q創(chuàng)建表格的方法：q選擇“插入/表格”菜單命令q或者單擊“插入”工具欄中“常用”模式中的“表格”按鈕q打開“表格”對話框，設(shè)置表格參數(shù)q表格寬度： “百分比”單位表示表格占整個網(wǎng)頁寬度的百分比； “像素”單位表示表格固定寬度q邊框粗細： 表格的邊框的寬度 0表示不顯示邊框q單元格邊距： 表格的單元格中內(nèi)容和邊框之間的距離 q單元格間距： 單元格和單元格之間的距離 q嵌套表格就是在已經(jīng)存在的表格中插入的表格。q插入嵌套表格的方法與插入表格的方法相同。1617q選擇表格和單元格q選擇表格：

7、點擊單元格分隔線；或在表格中按右鍵，“表格/選擇表格”q選擇單元格：鼠標(biāo)拖動q表格編輯q選擇“修改/表格”菜單命令(或在表格中按右鍵，選擇“表格”)，可以對表格進行編輯q插入行、列 在當(dāng)前位置上插入行，當(dāng)前位置前插入列 注意：如果選擇“插入行或列”，可以選擇插入行或列的位置q刪除行、列q合并單元格q拆分單元格18q建立表格后，選擇整個表格，可以通過“屬性”面板修改表格屬性q表格的結(jié)構(gòu)q表格的修飾19q選擇表格中的單元格，通過“屬性”面板設(shè)置單元格屬性q單元格內(nèi)容格式q單元格結(jié)構(gòu)q單元格修飾q在Dreamweaver CS4中表格背景設(shè)置需要通過修改代碼來實現(xiàn)q表格背景設(shè)置步驟q先插入表格q切換

8、到代碼視圖，在表格代碼中添加“bgcolor”、“background”參數(shù)q設(shè)置表格背景色qqq設(shè)置表格背景圖片qq21q在網(wǎng)頁main.html中插入一個5行2列的表格，表格寬度為800像素，邊框粗細為0，背景色為白色，并居中對齊，合并第4行單元格，合并第5行單元格q在表格的第1行，第1列中再插入一個2行2列的表格，寬度為100%，邊框粗細為0，并合并該表格的第1行(表格嵌套)22q添加文本q直接在文檔窗口中輸入文本q通過“復(fù)制/粘貼”，輸入文本q注意在Dreamweaver中粘貼文本時，將忽略原文本的格式q文本輸入后，可通過“屬性”面板來完成文本格式設(shè)置q“屬性”面板可以設(shè)置文本的格式、

9、字形、項目列表、文本縮進、文本超級鏈接q文本的字體、大小、顏色需要通過CSS樣式來設(shè)置23q表格第4、5行中分別添加文本，文本在表格中居中對齊，文本內(nèi)容見SC1文件夾中Txt.doc文件，添加 字符q將表格第4行單元格的背景顏色設(shè)置為#33990024q插入特殊字符q選擇“插入工具欄”中“文本”選項卡，選擇相應(yīng)字符q在網(wǎng)頁文檔中常見的特殊符號有空格、版權(quán)符號、貨幣符號、注冊商標(biāo)號以及直線等。25q添加空格q(在Dreamweaver中是不能添加多余空格的)q按“Ctrl+Shift+SpaceBar”組合鍵可以添加空格q選擇“插入工具欄”中“字符”選項卡，選擇“不換行空格”，可以添加空格q選擇

10、“編輯/首選參數(shù)”菜單命令，打開“首選參數(shù)”對話框，選擇“常規(guī)”選項卡，選中“允許多個連續(xù)空格”復(fù)選框q文本換行q自動換行q使用“Enter”鍵強制換行q使用換行符(“Shift+Enter”換行不換段)q插入日期q選擇“插入”面板中“常用”選項卡q選擇“日期”，打開“插入日期”對話框q選擇日期格式q插入水平線q選擇“插入”面板中，選擇“水平線”q同時在“屬性”面板中對水平線的屬性進行設(shè)置26q水平線顏色設(shè)置q選中水平線，按右鍵選擇“編輯標(biāo)簽”，打開“標(biāo)簽編輯器”q選擇“瀏覽器特定的”，設(shè)置顏色q注意：水平線的顏色只能在瀏覽器中才能看到27q網(wǎng)頁文本中，一些類型相同或具有序列關(guān)系的文本可以通過

11、列表方式來顯示q列表方式可以通過屬性面板來設(shè)置q編號列表q項目列表q列表屬性設(shè)置q選擇“格式/列表/屬性”菜單命令，打開“列表屬性”對話框，設(shè)置列表屬性29q在“main.html”網(wǎng)頁表格的第4、5行之間插入2行，并插入水平線和日期 q水平線寬800像素、高5像素、顏色#339900q日期自動更新包括日期和時間，居中對齊q在表格第2行第1列中添加“用戶留言”內(nèi)容，文本內(nèi)容見SC1文件夾中Txt.doc文件q為文本設(shè)置項目符號列表，項目符號為“正方形”30q插入圖像q確定插入圖像位置q選擇“插入/圖像”菜單命令，打開“選擇圖像源”對話框q選擇要插入的圖像q注意q如果插入的圖像不是保存在本地站點

12、內(nèi)，系統(tǒng)會提示將圖像復(fù)制到本地站點內(nèi)保存。否則，在其他計算機上或上傳到遠程服務(wù)器后就無法瀏覽網(wǎng)頁。31q選擇圖片，在“屬性”面板中設(shè)置屬性q“寬”和“高”設(shè)置圖像大小q“源文件” 顯示圖像文件的路徑，重新輸入路徑可以更換圖像q“鏈接”設(shè)置圖像超鏈接q“替換”輸入文本，當(dāng)圖像在瀏覽器中不能正常顯示時，在圖像位置顯示文本q “垂直、水平邊距”設(shè)定圖像頂?shù)撞亢妥笥覀?cè)的空白邊距q“邊框”設(shè)定圖像邊框，默認(rèn)為無邊框q“重設(shè)大小”圖像大小恢復(fù)原始大小32q參考樣張在表格中插入相應(yīng)圖片，圖片居中對齊33q完成課堂示例1-5q設(shè)置main.html網(wǎng)頁中圖片pic1.jpg的替換文本“網(wǎng)上沖印服務(wù)”，并設(shè)置圖片大小為“寬600，高240”q在“Mysite”站點中新建網(wǎng)頁aa.html，效果如下，圖片為SC1中的bg.gifq在“Mysite”站點中新建網(wǎng)頁tk.html，并完成以下操作（效果見下張幻燈片）q網(wǎng)頁內(nèi)容見“sc1”文件夾中tk.docq將“SC1”文件夾中的bg.gif設(shè)置為網(wǎng)頁背景q設(shè)置網(wǎng)頁標(biāo)題為“用戶須知”q設(shè)置正文標(biāo)題“網(wǎng)上沖印店條款” 設(shè)置為“標(biāo)題1”格式q設(shè)置第1段落首行縮進2個字符q將Mysite站點以“Mysite.ste”文件名導(dǎo)出，保存在Mysite站點文件夾內(nèi)。3435q創(chuàng)建好本地站點后，選擇“站點/管理站點”菜單命令，可以進行一些