電子教案《Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作第二版》A063954示例項(xiàng)目一

1、電子講課設(shè)計(jì)Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作第二版A063954示例項(xiàng)目一電子講課設(shè)計(jì)Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作第二版A063954示例項(xiàng)目一電子講課設(shè)計(jì)Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作第二版A063954示例項(xiàng)目一講課內(nèi)容講課班級(jí)講課方法與手段項(xiàng)目?jī)?nèi)容講課目的講課要點(diǎn)與難點(diǎn)講課過(guò)程設(shè)計(jì)課程講課設(shè)計(jì)（項(xiàng)目一）個(gè)人網(wǎng)頁(yè)的簡(jiǎn)單美化網(wǎng)頁(yè)制作基礎(chǔ)知識(shí)講課學(xué)時(shí)6課時(shí)講解法、演示法、討論法。多媒體講課本項(xiàng)目的主要工作內(nèi)容是對(duì)一個(gè)簡(jiǎn)單個(gè)人網(wǎng)站首頁(yè)的網(wǎng)頁(yè)標(biāo)題、背景顏色、字體大小等基本因素做簡(jiǎn)單改正，要求在熟習(xí)網(wǎng)站的基本知識(shí)、認(rèn)識(shí)網(wǎng)頁(yè)的基本元素基礎(chǔ)上，利用HTML語(yǔ)言達(dá)成。學(xué)生經(jīng)過(guò)本項(xiàng)目的學(xué)習(xí)

2、，能：1、認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站2、掌握IP地點(diǎn)、網(wǎng)址等基本見(jiàn)解3、理解靜態(tài)網(wǎng)頁(yè)與動(dòng)向網(wǎng)頁(yè)的差別4、掌握簡(jiǎn)單HTML文件的編寫(xiě)方法講課要點(diǎn)：1什么是網(wǎng)頁(yè)？1）網(wǎng)頁(yè)內(nèi)容構(gòu)成；2）網(wǎng)頁(yè)編寫(xiě)語(yǔ)言種類(lèi)及特色。2DreamweaverCS3功能簡(jiǎn)介。講課難點(diǎn)：創(chuàng)立HTML文檔，掌握簡(jiǎn)單HTML文件的編寫(xiě)方法。【任務(wù)一】認(rèn)識(shí)網(wǎng)站與網(wǎng)頁(yè)（2課時(shí)）（一）網(wǎng)頁(yè)的見(jiàn)解網(wǎng)頁(yè)：是構(gòu)成WWW（WorldWideWeb：萬(wàn)維網(wǎng)）的基本元素，也被稱(chēng)為頁(yè)面或Web頁(yè)。不一樣樣的網(wǎng)頁(yè)經(jīng)過(guò)超鏈接聯(lián)系在一同，構(gòu)成了WWW縱橫交織構(gòu)造。網(wǎng)站：就是一個(gè)互相鏈接的網(wǎng)頁(yè)的會(huì)合，它們能夠共享。大的網(wǎng)站頁(yè)面數(shù)目多達(dá)幾十萬(wàn)，甚至上百萬(wàn)頁(yè)，小的個(gè)人網(wǎng)站也

3、能夠只包含數(shù)個(gè)頁(yè)面。主頁(yè)：是網(wǎng)站中的一個(gè)特別網(wǎng)頁(yè)，它是在WWW進(jìn)步入網(wǎng)站的第一個(gè)網(wǎng)頁(yè)，此中包含指向其余網(wǎng)頁(yè)的超鏈接，平常主頁(yè)的名稱(chēng)是固定的。（二）網(wǎng)頁(yè)中的常有元素文本圖像：JPG、PNG、GIF超鏈接表單表格動(dòng)畫(huà)(三)IP地點(diǎn)、域名和網(wǎng)址IP地點(diǎn)：由4個(gè)小于256的數(shù)字構(gòu)成，數(shù)字之間用點(diǎn)間隔域名：唯一無(wú)二，比方：網(wǎng)址：又稱(chēng)URL，由通訊協(xié)議名稱(chēng)、域名或IP地點(diǎn)、網(wǎng)頁(yè)在服務(wù)器中的路徑和文件名4部分構(gòu)成。（四）動(dòng)向網(wǎng)頁(yè)與靜態(tài)網(wǎng)頁(yè)動(dòng)向網(wǎng)頁(yè)（DHTML）：后綴名為.asp、.jsp、.php、.cgi等靜態(tài)網(wǎng)頁(yè)（HTML）：后綴名.htm、.html、.xml等（五）任求實(shí)行：制作個(gè)人網(wǎng)站【任務(wù)二】使

4、用HTML語(yǔ)言改正簡(jiǎn)單網(wǎng)頁(yè)（4課時(shí)）小貼士：什么是HTML語(yǔ)言HTML（HypertextMarkupLanguage，超文本標(biāo)記語(yǔ)言）不是一種編程語(yǔ)言，而是一種描繪性的標(biāo)記語(yǔ)言，用于描繪超文本中內(nèi)容的顯示方式。其最基本的語(yǔ)法就是：內(nèi)容。標(biāo)記平常都是成對(duì)使用的，一個(gè)開(kāi)頭標(biāo)記就對(duì)應(yīng)有一個(gè)結(jié)束標(biāo)記。結(jié)束標(biāo)記但是在開(kāi)頭標(biāo)記的前面加一個(gè)斜杠“/”。當(dāng)閱讀器從服務(wù)器接收到HTML文件后，就會(huì)講解里面的標(biāo)記符，此后把標(biāo)記符相對(duì)應(yīng)的功能表達(dá)出來(lái)。（一）創(chuàng)立HTML文件1）選擇“開(kāi)始”，此后挨次選擇“程序”“附件”“記事本”命令。2）在翻開(kāi)的記事本窗口中寫(xiě)入代碼：test互聯(lián)網(wǎng)，我來(lái)了!3）保留該文檔。4）雙

5、擊該HTML文件，會(huì)自動(dòng)翻開(kāi)閱讀器，顯示文件內(nèi)容。（二）HTML文件構(gòu)造標(biāo)記標(biāo)記放在HTML文件的開(kāi)頭，并無(wú)實(shí)質(zhì)性的功能，但是一個(gè)形式上的標(biāo)記，但要形成一個(gè)優(yōu)秀的編寫(xiě)習(xí)慣，在HTML文件開(kāi)頭使用標(biāo)記來(lái)做一個(gè)形式上的開(kāi)始。2.標(biāo)記也稱(chēng)為頭標(biāo)記，一般放在標(biāo)記里，其作用是擱置對(duì)于此HTML文件的信息，如供給索引、定義CSS款式等。3.標(biāo)記稱(chēng)為標(biāo)題標(biāo)記，包含在標(biāo)記內(nèi)，它的作用是設(shè)定網(wǎng)頁(yè)標(biāo)題，能夠看見(jiàn)在閱讀器左上方的標(biāo)題欄中顯示這個(gè)標(biāo)題，其余，在Windows任務(wù)欄中顯示的也是這個(gè)標(biāo)題。4.標(biāo)記又稱(chēng)為主體標(biāo)記，網(wǎng)頁(yè)所要顯示的內(nèi)容都放在這個(gè)標(biāo)記內(nèi)，它是HTML文件的要點(diǎn)所在。它其實(shí)不但是是一個(gè)形式上的標(biāo)記

6、，它自己也能夠控制網(wǎng)頁(yè)的背景顏色或背景圖像。（三）簡(jiǎn)單的HTML事例設(shè)置標(biāo)題設(shè)置文字顏色設(shè)置加粗、傾斜及文字顏色4、插入圖片5、說(shuō)明標(biāo)記（四）任求實(shí)行：對(duì)個(gè)人網(wǎng)站首頁(yè)做簡(jiǎn)單改正【知識(shí)拓展】網(wǎng)頁(yè)美化知識(shí)（一）、網(wǎng)頁(yè)顏色的選擇與搭配設(shè)計(jì)網(wǎng)頁(yè)時(shí)，可依據(jù)以下原則確立網(wǎng)頁(yè)的背風(fēng)景和主色彩，并進(jìn)行顏色搭配。1）網(wǎng)頁(yè)背景顏色最好選擇白色或黑色。2）可依據(jù)網(wǎng)站的性質(zhì)或網(wǎng)站標(biāo)記（Logo，又稱(chēng)站標(biāo)）的顏色確立網(wǎng)頁(yè)的主色彩，而且該主色彩應(yīng)貫串于網(wǎng)站中的所有網(wǎng)頁(yè)。3）設(shè)計(jì)網(wǎng)頁(yè)時(shí)可充分利用同類(lèi)色、周邊色和比較色，以加強(qiáng)網(wǎng)頁(yè)的層次感、豐富網(wǎng)頁(yè)的色彩或突出某些重要內(nèi)容（如導(dǎo)航條或版塊標(biāo)題）。網(wǎng)頁(yè)色彩搭配的原理包含以下幾點(diǎn)

7、。1）色彩的鮮亮性。網(wǎng)頁(yè)的色彩要嬌艷，簡(jiǎn)單引人凝望。2）色彩的獨(dú)到性。要有別出心裁的色彩，使得大家對(duì)網(wǎng)頁(yè)的印象激烈。3）色彩的適合性。色彩和網(wǎng)頁(yè)表達(dá)的內(nèi)容氛圍相適合，如用粉色表現(xiàn)女性站點(diǎn)的柔性。4）色彩的聯(lián)想性。不一樣樣色彩會(huì)產(chǎn)生不一樣樣的聯(lián)想，如藍(lán)色想到天空，黑色想到黑夜，紅色想到好事等，選擇色彩要和網(wǎng)頁(yè)的內(nèi)涵有關(guān)系。（二）、網(wǎng)頁(yè)版式設(shè)計(jì)（1）最好為導(dǎo)航條和各版塊標(biāo)題區(qū)設(shè)計(jì)一組形狀奇異、顏色突出的背景圖像，以方便網(wǎng)頁(yè)閱讀者迅速找到自己需要的內(nèi)容，并使網(wǎng)頁(yè)看起來(lái)更優(yōu)良奇異。2）對(duì)每個(gè)版塊而言，可經(jīng)過(guò)插入典型圖片吸引接見(jiàn)者。3）各版塊之間以空白劃分開(kāi)。同時(shí)，為使各版塊劃分顯然，還可為其設(shè)置不一樣樣的背風(fēng)景或加上面框。（三）網(wǎng)頁(yè)尺寸當(dāng)前，我國(guó)大多數(shù)電腦的顯示器的分辨率為1024768像素。所以，為避免在閱讀網(wǎng)頁(yè)時(shí)需屢次拖動(dòng)水平轉(zhuǎn)動(dòng)條，最好將網(wǎng)頁(yè)寬度設(shè)置為1024像素以內(nèi)。作業(yè)：1列舉你所