《網頁設計與制作》 課件 項目1 網頁設計制作入門_第1頁
《網頁設計與制作》 課件 項目1 網頁設計制作入門_第2頁
《網頁設計與制作》 課件 項目1 網頁設計制作入門_第3頁
《網頁設計與制作》 課件 項目1 網頁設計制作入門_第4頁
《網頁設計與制作》 課件 項目1 網頁設計制作入門_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

項目1網頁設計制作入門由淺入深簡章易懂貼近實際WANGYEZHIZUOXIANGMUSHIXUNJIAOCHENG《網頁制作項目實訓教程》重慶大學出版社CONTENTS任務1使用DWCS6創(chuàng)建第一個網頁任務2制作文本網頁任務3制作包含列表的網頁任務1使用DWCS6創(chuàng)建第一個網頁本任務可以分解為2個活動：創(chuàng)建與修改站點；制作第一個網頁文檔?；顒?創(chuàng)建與修改站點1-11、創(chuàng)建一個名稱為“項目1”的本地站點，站點文件夾為D盤。2、修改“項目1”站點文件夾為桌面上的“Task1-1”文件夾?；顒右蠡顒?創(chuàng)建與修改站點1-1啟動DreamweaverCS6軟件（1）雙擊桌面上的DreamweaverCS6圖標，啟動軟件，如下圖所示。知識窗歡迎界面

活動1創(chuàng)建與修改站點1-1（2）在“歡迎界面”中單擊“新建”欄下的“HTML”按鈕，新建一個HTML網頁文件，進入新的窗口界面，如下圖所示。文檔標簽

菜單欄

文檔工具欄

文檔窗口

工作區(qū)切換器

標簽選擇器

屬性面板

狀態(tài)欄

面板組

活動1創(chuàng)建與修改站點1-1詳細操作步驟請參閱教材?；顒訉嵤┲饕鞘煜reamweaverCS6的軟件界面，通過活動實施過程，熟悉站點的創(chuàng)建與修改操作，并能理解站點的作用?；顒釉u價活動2制作第一個網頁文檔1-2新建一個網頁文件，輸入兩行文字，并將網頁文件以“task1-1-2.html”為文件名保存到“項目1”站點根目錄下。效果如下圖所示?；顒右蠡顒?制作第一個網頁文檔1-21、DreamweaverCS6的三種編輯模式DreamweaverCS6有三種編輯模式，分別是：代碼、拆分、設計，如下圖所示。知識窗三種編輯模式切換按鈕活動2制作第一個網頁文檔1-22、網頁的基本結構網頁的基本結構由三部分組成：聲明、頭部、主體，如下圖所示?；顒?制作第一個網頁文檔1-2（1）網頁文檔類型聲明使用<!doctypehtml>來聲明網頁的文檔類型，用來告訴瀏覽器使用什么樣的HTML或XHTML規(guī)范來解析網頁，它存在于頁面的第一行，不區(qū)分大小寫。（2）網頁的頭部<head></head>：定義文檔的頭部。標簽內包含<meta>、<title>等標簽。<meta/>：提供有關頁面的元信息（針對搜索引擎和更新頻度的描述和關鍵詞等），寫在<head></head>標簽內。①<metacharset="UTF-8"/>：設置頁面的編碼格式UTF-8。②<metaname="Author"content=""/>：告訴搜索引擎站點制作的作者。③<metaname="Keywords"content=""/>：告訴搜索引擎網站的關鍵字。④<metaname="Description"content=""/>：告訴搜索引擎網站的內容。<title></title>：該標簽用于定義文檔的標題。寫在<head></head>標簽內。<title>HTML筆記</title>：網頁標題為“HTML筆記”，在瀏覽器標題欄上顯示。（3）網頁的主體<body></body>：定義網頁文檔的主體?；顒?制作第一個網頁文檔1-2詳細操作步驟請參閱教材?；顒訉嵤┦褂肈reamweaverCS6制作第一個網頁并成功在瀏覽器中看查運行結果，通過操作掌握DreamweaverCS6網頁制作的基本操作，包含網頁文件的新建與保存、網頁標題修改及內容的添加、如何在瀏覽器中運行網頁結果等?；顒釉u價任務2制作文本網頁本任務可以分解為2個活動：使用標題、段落等文本網頁標簽制作詩詞賞析頁面；使用特殊字符對頁面進行簡單排版操作?；顒?制作詩詞賞析頁面2-1如下圖所示，完成詩詞賞析頁面的制作，完成后以“task1-2.html”為文件名保存?；顒右蠡顒?制作詩詞賞析頁面2-11、標題標簽標題標簽表示一段文字的標題，共劃分六級標題<h1>…<h6>，從1級到6級，逐級字體減小。如下圖所示。在DreamweaverCS6中，單擊“格式”->“段落格式”菜單命令，在打開的子菜單中選擇“標題1”～“標題6”中的一個，或者在“屬性”面板的“格式”下拉列表框中選擇“標題1”～“標題6”中的一個，都可在網頁中插入相對應的標題標簽。知識窗活動1制作詩詞賞析頁面2-12、段落與換行標簽（1）段落標簽在設計模式下，按回車鍵即可自動添加段落標簽<p></p>。（2）換行標簽在設計模式下，按Shift+回車鍵，即可添加換行標簽<br/>?！?lt;p>花籃的花兒香

聽我來唱一唱

唱一唱</p><p>來到了南泥灣

南泥灣好地方

好地方</p>……<p>花籃的花兒香

<br/>聽我來唱一唱

唱一唱</p><p>來到了南泥灣

<br/>南泥灣好地方

好地方</p>…活動1制作詩詞賞析頁面2-1詳細操作步驟請參閱教材。活動實施通過本次活動，掌握網頁中文字的輸入操作，并能力正確設置標題格式，以及在網頁中輸入文字時段落與換行符的使用。活動評價活動2對詩詞賞析頁面進行簡單排版2-2如下圖所示，打開“task1-2.html”文件，對詩詞賞析頁面進行簡單排版操作?；顒右蠡顒?對詩詞賞析頁面進行簡單排版2-21、粗體標簽<strong></strong>粗體標簽主要用于文字加粗，可以通過以下兩種方法給網頁文字添加粗體標簽：在“代碼”視圖模式中，在需要設置加粗效果的文字兩端添加<strong>…</strong>標簽。在“設計”視圖模式中，選擇要設置加粗效果的文字，在“屬性”面板中單擊“粗體”按鈕（快捷鍵為：Ctrl+B），如下圖所示。2、斜體標簽<em></em>斜體標簽主要用于文字傾斜顯示，可以通過以下兩種方法給網頁文字添加斜體標簽：在“代碼”視圖模式中，在需要設置傾斜效果的文字兩端添加<em>…</em>標簽。在“設計”視圖模式中，選擇要設置傾斜效果的文字，在“屬性”面板中單擊“斜體”按鈕（快捷鍵為：Ctrl+I），如下圖所示。知識窗“粗體”按鈕“斜體”按鈕活動2對詩詞賞析頁面進行簡單排版2-23、特殊符號網頁中常見的特殊符號如下表所示：注意：每個符號后面都必須以分號作為結束，不可省略。4、水平線標簽<hr/>水平線主要用于分隔網頁內容，使網頁內容顯示更清晰?；顒?對詩詞賞析頁面進行簡單排版2-2詳細操作步驟請參閱教材?；顒訉嵤┩ㄟ^本次活動，掌握如何在網頁插入特殊字符、如何插入水平線、如何在網頁中添加有效空格，掌握如何通過“屬性”面板設置網頁中的文字格式，如加粗、斜體等，在通過“屬性”面板設置網頁中的文字格式時，注意與Word相應功能進行對比?；顒釉u價任務3制作包含列表的網頁本任務可以分解為2個活動：使用項目列表制作樹形菜單；使用編號列表制作在線考試試卷?；顒?制作樹形菜單3-1如下圖所示，完成樹形菜單的制作，完成后以“task1-3-1.html”為文件名保存?；顒右蠡顒?制作樹形菜單3-11、項目列表項目列表，也稱無序列表，列表項之間無順序之分，每個列表項前均有一個項目符號，如下圖所示。2、項目列表的設置項目列表可以通過“屬性”面板進行設置，如下圖所示。知識窗<body><h4>無序列表</h4><ul><li>桔子</li><li>香蕉</li><li>蘋果</li></ul></body>活動1制作樹形菜單3-13、項目列表的類型項目列表的類型可以通過type屬性設置列表顯示符號的類型，如下圖所示。disc：實心圓點square：實心方框circle：空心圓點<body><h4>type=circle時的無序列表：</h4><ultype="circle"><li>桔子</li><li>香蕉</li><li>蘋果</li></ul>…</body>活動1制作樹形菜單3-1詳細操作步驟請參閱教材?；顒訉嵤┩ㄟ^本次活動，掌握網頁制作中項目列表的使用，通過本次活動的操作練習，學會如何將文本轉換為項目列表，學會如何通過“屬性”面板中的相關工具按鈕對項目列表進行操作，以及項目列表類型的設置操作?；顒釉u價活動2制作在線考試試卷3-2如下圖所示，完成在線考試試卷的制作，完成后以“task1-3-2.html”為文件名保存?；顒右蠡顒?制作在線考試試卷3-21、編號列表編號列表，也稱有序列表，以數(shù)字或字母作為列表項符號，如下圖所示。知識窗<body><ol><li>桔子</li><li>香蕉</li><li>蘋果</li></ol></body>活動2制作在線考試試卷3-22、編號列表的類型編號列表的類型可以通過type屬性設置列表顯示編號的類型，如下圖所示。1：數(shù)字A：大寫英文a：小寫英文i：小寫羅馬字符I：大寫羅馬字符<body><h4>type=1時的有序列表：</h4><oltype="1"> <li>桔子</li> <li>香蕉</li> <li>蘋果</li></ol><h4>type=a時的有序列表：</h4><oltype="a"> <li>桔子</li> <li>香蕉</li> <li

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論