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

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

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

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

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

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

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

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

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

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

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