《網(wǎng)頁設(shè)計(jì)與制作》 課件 項(xiàng)目1 網(wǎng)頁設(shè)計(jì)制作入門_第1頁
《網(wǎng)頁設(shè)計(jì)與制作》 課件 項(xiàng)目1 網(wǎng)頁設(shè)計(jì)制作入門_第2頁
《網(wǎng)頁設(shè)計(jì)與制作》 課件 項(xiàng)目1 網(wǎng)頁設(shè)計(jì)制作入門_第3頁
《網(wǎng)頁設(shè)計(jì)與制作》 課件 項(xiàng)目1 網(wǎng)頁設(shè)計(jì)制作入門_第4頁
《網(wǎng)頁設(shè)計(jì)與制作》 課件 項(xiàng)目1 網(wǎng)頁設(shè)計(jì)制作入門_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

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

菜單欄

文檔工具欄

文檔窗口

工作區(qū)切換器

標(biāo)簽選擇器

屬性面板

狀態(tài)欄

面板組

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

聽我來唱一唱

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

南泥灣好地方

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

<br/>聽我來唱一唱

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

<br/>南泥灣好地方

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論