網(wǎng)頁設(shè)計與制作項目教程(項目二-任務(wù)01)

1、任務(wù)1：制作簡單的圖文頁面,項目二 創(chuàng)建基本頁面,,1 Dreamweaver軟件基本操作,2 創(chuàng)建、管理站點,3 創(chuàng)建圖文頁面,,,,,,,,,,學習內(nèi)容,任務(wù)描述,知識目標： 通過系統(tǒng)學習使學生能做到基本掌握Dreamweaver 軟件的基本用法，掌握創(chuàng)建與管理站點、創(chuàng)建簡單圖文頁面的方法。技能目標： 通過講解輔導與作業(yè)練習，要使學生能熟練掌握Dreamweaver的操作方法，簡單頁面的制作方法，并能靈活應(yīng)用知識技

2、巧。素質(zhì)目標：1. 具有勤奮學習的態(tài)度，嚴謹求實、創(chuàng)新的工作作風；2. 具有良好的心理素質(zhì)和職業(yè)道德素質(zhì)；3. 具有高度責任心和良好的團隊合作精神；4. 具有一定的科學思維方式和判斷分析問題的能力；5. 具有較強的網(wǎng)頁設(shè)計創(chuàng)意思維、藝術(shù)設(shè)計素質(zhì)。,任務(wù)1：制作簡單的圖文頁面,任務(wù)描述創(chuàng)建站點，文件及文件夾命名及站點文件目錄結(jié)構(gòu)符合規(guī)范。網(wǎng)頁設(shè)置標題圖文混排，與效果圖保持一致。,任務(wù)分析,該頁面為一個簡單圖文頁面，其中主

3、要內(nèi)容由文字與圖片組成，以水平線分隔。,任務(wù)實施,步驟1 準備站點文件與素材步驟2 創(chuàng)建站點,,步驟3 創(chuàng)建頁面文件,,步驟4 更改頁面標題及輸入文字,,步驟5 插入圖片,,步驟6 設(shè)置圖片的對齊方式，并插入其他圖片,,步驟7 插入水平線,,步驟8 保存并在瀏覽器中預(yù)覽效果,知識點,一．Dreamweaver CS5 簡介Adobe Dreamweaver CS5是一款集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁編輯

4、器，Dreamweaver CS5是第一套針對專業(yè)網(wǎng)頁設(shè)計師特別發(fā)展的視覺化網(wǎng)頁開發(fā)工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網(wǎng)頁。,,二．Dreamweaver CS5 啟動界面,,1. 菜單欄【菜單欄】包括多種菜單項，單擊任意一個菜單項將彈出一個下拉菜單，在下拉菜單中選擇不同的菜單項可以完成不同的操作。,,2. 工具欄【文檔】工具欄中包含視圖選擇按鈕，單擊該按鈕使可以在文檔的【代碼】、【拆分】和【

5、設(shè)計】視圖間快速切換。,,3. 屬性面板在【屬性】面板中，主要用于查看和更改所選擇的對象的各種屬性。,,4. 面板組面板組是一組停靠在某個標題下面的相關(guān)面板的集合，面板集中了網(wǎng)頁編輯和站點管理過程中集中的按鈕。,,三．Dreamweaver CS5 工作界面,,1. 插入欄插入欄中包含【常用】、【布局】、【表單】、【數(shù)據(jù)】、【Spry】、【文本】、【收藏夾】插入欄。（1）在【常用】插入欄中，可以創(chuàng)建和插入最常用的對象，例如圖像和

6、表格。,,（2）在【布局】插入欄中，包括標準表格和擴展表格兩個選項卡。,,（3）【表單】：在Dreamweaver中，表單輸入類型稱為表單對象，是動態(tài)網(wǎng)頁中最重要的元素對象之一。,,（4）在【數(shù)據(jù)】插入欄中，可以插入各種數(shù)據(jù)，如Spry數(shù)據(jù)對象、記錄集和插入記錄等。,,（5）在【Spry】插入欄中，包含構(gòu)建【Spry】頁面等按鈕，其中包括Spry數(shù)據(jù)對象和構(gòu)件等按鈕。,,（6）文本是網(wǎng)頁中最常見、運用最廣泛的元素之一，是網(wǎng)頁內(nèi)容的核心部

7、分，在網(wǎng)頁中添加文本與在Word等文字處理軟件中添加文本一樣方便。,,（7）【收藏夾】插入欄中，使用鼠標右鍵單擊，即可自定義收藏夾對象。,,2. 設(shè)計視圖設(shè)計、代碼及拆分三種設(shè)計視圖。,,四．使用Dreamweaver CS5 創(chuàng)建站點1. 使用【管理站點】向?qū)Т罱ㄕ军c2. 使用【高級】面板創(chuàng)建站點,,五. 使用Dreamweaver CS5管理站點及站點文件夾1. 使用Dreamweaver CS5管理站點（1）打開站點（

8、2）編輯站點（3）刪除站點（4）復(fù)制站點,,2. 管理站點中的文件（1）創(chuàng)建文件夾（2）創(chuàng)建網(wǎng)頁文件（3）移動和復(fù)制文件,,六．在網(wǎng)頁中創(chuàng)建文本1. 在網(wǎng)頁中輸入文本2. 設(shè)置字體格式,,七．插入特殊文本對象1. 插入特殊字符2. 插入水平線3. 插入注釋4. 插入日期,,八．項目符號和編號列表1. 創(chuàng)建項目列表2. 創(chuàng)建編號列表,,九．插入頁面的頭部內(nèi)容1. 設(shè)置META2. 插入關(guān)鍵字3. 插入說明

9、4. 插入刷新5. 設(shè)置基礎(chǔ)6. 設(shè)置鏈接7. 設(shè)置標題,,十．插入與設(shè)置圖像元素1. 在網(wǎng)頁中插入圖像2. 設(shè)置圖像屬性3. 圖像的對齊方式4. 插入圖像占位符5. 設(shè)置圖像占位符6. 插入鼠標經(jīng)過圖像,分析與思考,1.為什么要創(chuàng)建站點？2.如何在頁面中輸入空格？3.在插入圖像時，彈出【圖像標簽輔助功能屬性】對話框，在其中設(shè)置的“替換文本”有何作用？4.圖像對齊方式有哪幾種？5.插入圖像占位符有什么作用？

10、6.在【文檔】工具欄中的【標題】中輸入的標題，顯示在何處？,任務(wù)小結(jié),1. 使用【站點】中【新建站點】或者【管理站點】的命令創(chuàng)建站點，在【站點設(shè)置對象】對話框中設(shè)置【站點名稱】與【本地站點文件夾】。2. 使用【文件】菜單或者【本地文件】面板在Dreamweaver軟件中創(chuàng)建文件、編輯文件和保存文件。3. 在頁面中輸入文字，使用【插入】菜單中的命令插入水平線和特殊字符。,,4. 在頁面中使用圖片，使用【插入】菜單中的【圖像】命令插入圖