網頁設計與制作項目教程(項目二-任務01)

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

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

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

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

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

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

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

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

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

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