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

1、義務1：制造簡單的圖文頁面工程二 創(chuàng)建根本頁面1 Dreamweaver軟件根本操作2 創(chuàng)建、管理站點3 創(chuàng)建圖文頁面學習內容義務描畫知識目的： 經過系統(tǒng)學習使學生能做到根本掌握Dreamweaver 軟件的根本用法，掌握創(chuàng)建與管理站點、創(chuàng)建簡單圖文頁面的方法。技藝目的： 經過講解輔導與作業(yè)練習，要使學生能熟練掌握Dreamweaver的操作方法，簡單頁面的制造方法，并能靈敏運用知識技巧。素質目的：1. 具有勤勞學習的態(tài)度，嚴謹務虛、創(chuàng)新的任務作風；2. 具有良好的心思素質和職業(yè)品德素質；3. 具有高度責任心和良好的團隊協(xié)作精神；4. 具有一定的科學思想方式和判別分析問題的才干；5. 具有較強

2、的網頁設計創(chuàng)意思想、藝術設計素質。義務1：制造簡單的圖文頁面義務描畫創(chuàng)建站點，文件及文件夾命名及站點文件目錄構造符合規(guī)范。網頁設置標題圖文混排，與效果圖堅持一致。義務分析該頁面為一個簡單圖文頁面，其中主要內容由文字與圖片組成，以程度線分隔。頁面途徑文字圖片程度線網頁標題義務虛施步驟1 預備站點文件與素材步驟2 創(chuàng)建站點步驟3 創(chuàng)建頁面文件標題任務區(qū)“設計視圖步驟4 更改頁面標題及輸入文字步驟5 插入圖片步驟6 設置圖片的對齊方式，并插入其他圖片步驟7 插入程度線步驟8 保管并在閱讀器中預覽效果知識點一Dreamweaver CS5 簡介Adobe Dreamweaver CS5是一款集網頁制造

3、和管理網站于一身的所見即所得網頁編輯器，Dreamweaver CS5是第一套針對專業(yè)網頁設計師特別開展的視覺化網頁開發(fā)工具，利用它可以輕而易舉地制造出跨越平臺限制和跨越閱讀器限制的充溢動感的網頁。 二Dreamweaver CS5 啟動界面菜單欄工具欄【屬性】面板面板組1. 菜單欄【菜單欄】包括多種菜單項，單擊恣意一個菜單項將彈出一個下拉菜單，在下拉菜單中選擇不同的菜單項可以完成不同的操作。2. 工具欄【文檔】工具欄中包含視圖選擇按鈕，單擊該按鈕使可以在文檔的【代碼】、【拆分】和【設計】視圖間快速切換。3. 屬性面板在【屬性】面板中，主要用于查看和更改所選擇的對象的各種屬性。4. 面板組面板

4、組是一組停靠在某個標題下面的相關面板的集合，面板集中了網頁編輯和站點管理過程中集中的按鈕。三Dreamweaver CS5 任務界面插入欄設計選項1. 插入欄插入欄中包含【常用】、【規(guī)劃】、【表單】、【數(shù)據】、【Spry】、【文本】、【收藏夾】插入欄。1在【常用】插入欄中，可以創(chuàng)建和插入最常用的對象，例如圖像和表格。2在【規(guī)劃】插入欄中，包括規(guī)范表格和擴展表格兩個選項卡。3【表單】：在Dreamweaver中，表單輸入類型稱為表單對象，是動態(tài)網頁中最重要的元素對象之一。4在【數(shù)據】插入欄中，可以插入各種數(shù)據，如Spry數(shù)據對象、記錄集和插入記錄等。5在【Spry】插入欄中，包含構建【Spry】

5、頁面等按鈕，其中包括Spry數(shù)據對象和構件等按鈕。6文本是網頁中最常見、運用最廣泛的元素之一，是網頁內容的中心部分，在網頁中添加文本與在Word等文字處置軟件中添加文本一樣方便。7【收藏夾】插入欄中，運用鼠標右鍵單擊，即可自定義收藏夾對象。2. 設計視圖設計、代碼及拆分三種設計視圖。四運用Dreamweaver CS5 創(chuàng)建站點1. 運用【管理站點】導游搭建站點2. 運用【高級】面板創(chuàng)建站點五. 運用Dreamweaver CS5管理站點及站點文件夾1. 運用Dreamweaver CS5管理站點1翻開站點2編輯站點3刪除站點4復制站點2. 管理站點中的文件1創(chuàng)建文件夾2創(chuàng)建網頁文件3挪動和復

6、制文件六在網頁中創(chuàng)建文本1. 在網頁中輸入文本2. 設置字體格式七插入特殊文本對象1. 插入特殊字符2. 插入程度線3. 插入注釋4. 插入日期八工程符號和編號列表1. 創(chuàng)建工程列表2. 創(chuàng)建編號列表九插入頁面的頭部內容1. 設置META2. 插入關鍵字3. 插入闡明4. 插入刷新5. 設置根底6. 設置鏈接7. 設置標題十插入與設置圖像元素1. 在網頁中插入圖像2. 設置圖像屬性3. 圖像的對齊方式4. 插入圖像占位符5. 設置圖像占位符6. 插入鼠標經過圖像分析與思索1.為什么要創(chuàng)建站點？2.如何在頁面中輸入空格？3.在插入圖像時，彈出【圖像標簽輔助功能屬性】對話框，在其中設置的“交換文本

7、有何作用？4.圖像對齊方式有哪幾種？5.插入圖像占位符有什么作用？6.在【文檔】工具欄中的【標題】中輸入的標題，顯示在何處？義務小結1. 運用【站點】中【新建站點】或者【管理站點】的命令創(chuàng)建站點，在【站點設置對象】對話框中設置【站點稱號】與【本地站點文件夾】。2. 運用【文件】菜單或者【本地文件】面板在Dreamweaver軟件中創(chuàng)建文件、編輯文件和保管文件。3. 在頁面中輸入文字，運用【插入】菜單中的命令插入程度線和特殊字符。4. 在頁面中運用圖片，運用【插入】菜單中的【圖像】命令插入圖片，選擇圖片后，運用圖像【屬性】面板設置圖片的格式。5. 在【文件】菜單項選擇擇【在閱讀器中預覽】命令或者【文檔】工具欄中選擇【在閱讀器中預覽】按鈕，