第一篇：網(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)反思

精彩的“陷阱”是成功的一半

《網(wǎng)頁(yè)設(shè)計(jì)之div盒子的定位》教學(xué)反思

Div盒子模型是CSS控制頁(yè)面時(shí)一個(gè)十分重要的知識(shí)點(diǎn)，其定位方法則是重中之重。學(xué)生在掌握了盒子模型的概念、組成、作用等基本知識(shí)之后，就面臨著如何在頁(yè)面中為各盒子進(jìn)行合理的排版，以實(shí)現(xiàn)豐富的頁(yè)面效果的實(shí)際需求。本節(jié)課圍繞該問(wèn)題而展開(kāi)，以任務(wù)驅(qū)動(dòng)的形式帶領(lǐng)學(xué)生在不斷地發(fā)現(xiàn)問(wèn)題，分析問(wèn)題，解決問(wèn)題的過(guò)程中，體驗(yàn)兩種不同的定位法為div盒子排版所帶來(lái)的神奇變化。

課程開(kāi)始時(shí)，我便和學(xué)生一起，結(jié)合上次課某學(xué)生的課堂作品文件，對(duì)div盒子的基礎(chǔ)知識(shí)做簡(jiǎn)要的回顧，同時(shí)引導(dǎo)大家在該“問(wèn)題作品”文件中尋找不足，即所有盒子都是按照標(biāo)準(zhǔn)流的方式，在瀏覽器窗口中由上而下依次排列。而實(shí)際上這種排列方式有其局限性，會(huì)導(dǎo)致網(wǎng)頁(yè)頁(yè)面效果“刻板”，且浪費(fèi)頁(yè)面空間。此時(shí)，我再打開(kāi)一份已經(jīng)過(guò)合理定位后的同作品文件，讓學(xué)生注意觀(guān)察，該文件中各盒子的排列已經(jīng)發(fā)生了巨大變化，整個(gè)頁(yè)面已變得十分美觀(guān)。通過(guò)這種導(dǎo)入方法，讓學(xué)生在發(fā)現(xiàn)自己的作品中存在問(wèn)題的同時(shí)，又欣賞到了定位之后的文件效果，由此產(chǎn)生“改變現(xiàn)狀”的強(qiáng)烈愿望。至此，成功引入div盒子定位的概念。

在接下來(lái)的教學(xué)活動(dòng)中，我結(jié)合ppt與板書(shū)簡(jiǎn)單介紹了何為盒子的定位，其定位的兩種方法：float與position。然后針對(duì)導(dǎo)入時(shí)利用的“問(wèn)題作品”，演示如何利用float屬性解決其中一部分問(wèn)題，再將該“問(wèn)題作品”源碼和包含任務(wù)說(shuō)明、實(shí)現(xiàn)的效果、操作提示的“任務(wù)書(shū)”下發(fā)給每位學(xué)生，讓他們利用float知識(shí)解決現(xiàn)有問(wèn)題，實(shí)現(xiàn)既定的效果文件。待學(xué)生基本完成該任務(wù)后，我再次拋出另一小任務(wù)：將左右兩個(gè)盒子的位置對(duì)調(diào)。當(dāng)聽(tīng)到該任務(wù)后，我發(fā)現(xiàn)有部分學(xué)生在竊喜，并且以非?？斓乃俣韧瓿闪巳蝿?wù)，然后紛紛讓我去檢查。其實(shí)此時(shí)他們已“成功”地掉入了我提前設(shè)計(jì)好的“陷阱”。我假裝十分嚴(yán)謹(jǐn)?shù)貦z查了幾個(gè)學(xué)生的作品后不做評(píng)價(jià)，并將全班的屏幕收回，讓其中某一位學(xué)生的作品呈現(xiàn)在所有人面前，同時(shí)提出問(wèn)題：該同學(xué)是否真的實(shí)現(xiàn)了我要求的效果？此時(shí)討論聲起，大家各抒己見(jiàn)。我見(jiàn)機(jī)向全班演示了該操作過(guò)程，并將操作結(jié)果定格，提醒大家注意：我們確實(shí)可以利用float屬性將左邊盒子定位到右邊，但這里所謂的右邊到底是指誰(shuí)的右邊？它又是否是我們需要的右邊？此時(shí)同學(xué)們會(huì)發(fā)現(xiàn)，答案是否定的，左盒子這時(shí)在瀏覽器最右邊，與上邊的盒子無(wú)法對(duì)齊，需要在此基礎(chǔ)上，再向左側(cè)移動(dòng)一定的距離。

分析了問(wèn)題所在與解決方案之后，我再次拋出了小任務(wù)：請(qǐng)大家按照剛才的分析思路，解決現(xiàn)在的問(wèn)題，實(shí)現(xiàn)效果。這時(shí)全班都犯難了，幾乎聽(tīng)不到敲擊鍵盤(pán)的聲音。我趁機(jī)裝作很“納悶”的樣子，反問(wèn)大家，怎么都不動(dòng)了？這時(shí)旁邊有聲音傳來(lái)，“老師，我們不知道怎么給左盒子移動(dòng)一定的距離?！?/p>

“哦，對(duì)了，我忘了告訴大家移動(dòng)的方法了！”此時(shí)換成是我竊喜了，因?yàn)槲以俅螌⑺麄冎蒙碛谥绬?wèn)題所在，卻沒(méi)辦法解決的境地。這時(shí)我便開(kāi)始介紹position中相對(duì)定位的方法，并演示了具體的操作步驟后，將余下的任務(wù)交給全班，另外對(duì)學(xué)有余力的學(xué)生提出了更高的要求，即利用相對(duì)定位實(shí)現(xiàn)更為豐富、復(fù)雜的頁(yè)面效果，而絕大部分學(xué)生都非常成功地實(shí)現(xiàn)了既定的效果。

這節(jié)課在一個(gè)個(gè)環(huán)環(huán)相扣的任務(wù)中完成，效果在總體上比較理想。但有眾多細(xì)節(jié)問(wèn)題需要自己推敲反思。如，有極少部分學(xué)生因基礎(chǔ)差，跟不上“隊(duì)伍”，直到課程快結(jié)束時(shí)，仍在琢磨第一個(gè)任務(wù)如何完成。這跟我沒(méi)有全面考慮學(xué)生因素有關(guān)，我應(yīng)做到“區(qū)別對(duì)待”，對(duì)不同級(jí)別的學(xué)生給與不同難度的學(xué)習(xí)任務(wù)，如此不但能防止某些學(xué)生因跟不上節(jié)奏而放棄學(xué)習(xí)，還能激發(fā)他們的學(xué)習(xí)興趣，獲得成就感。另外，對(duì)課程內(nèi)容中的“相對(duì)定位方向的確定”這一知識(shí)點(diǎn)的解釋不夠到位，導(dǎo)致很多學(xué)生要么不會(huì)做，要么只是強(qiáng)行記憶。其實(shí)，該知識(shí)的介紹除了利用傳統(tǒng)的ppt和板書(shū)工具外，還可以利用交互性較好的flash小動(dòng)畫(huà)來(lái)演示，這樣學(xué)生能夠更加直觀(guān)地了解left、right、top、bottom四個(gè)方位屬性的意義所在。

第二篇：淺談網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)

淺談網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)

摘要：網(wǎng)頁(yè)設(shè)計(jì)課程是計(jì)算機(jī)和藝術(shù)的交叉學(xué)科課程，應(yīng)注重將技術(shù)和藝術(shù)相結(jié)合起來(lái)進(jìn)行教學(xué)。本文針對(duì)“網(wǎng)頁(yè)設(shè)計(jì) ”課程的特點(diǎn)，結(jié)合實(shí)踐應(yīng)用，闡述在教學(xué)方面的一些體會(huì)。

關(guān)鍵詞：網(wǎng)頁(yè)設(shè)計(jì)，教學(xué)方法

Abstract: website design course is a cross computer science and artistry course, it is need to combine teaching methods of these subjects.this paper is to base on the feature of “website design” course and practice , to give some opinion about teaching.Key words : website design, a teaching method

一、引言

《網(wǎng)頁(yè)設(shè)計(jì)》課程是職業(yè)院校計(jì)算機(jī)類(lèi)專(zhuān)業(yè)及電子商務(wù)專(zhuān)業(yè)的一門(mén)專(zhuān)業(yè)課程，也是一門(mén)實(shí)踐性很強(qiáng)的職業(yè)技術(shù)課程。由于《網(wǎng)頁(yè)設(shè)計(jì)》課程實(shí)踐性和更新性很強(qiáng)，該課程如果采用傳統(tǒng)的教學(xué)方式，那結(jié)果是不理想的。在這里結(jié)合自身的實(shí)際經(jīng)驗(yàn)，談?wù)劸W(wǎng)頁(yè)設(shè)計(jì)課程的教學(xué)。

二、教學(xué)策略

1．課程特點(diǎn)

網(wǎng)頁(yè)設(shè)計(jì)課程是計(jì)算機(jī)和藝術(shù)的交叉學(xué)科課程。在教學(xué)過(guò)程中，除了要求學(xué)生掌握基本的技術(shù)外，也必須對(duì)藝術(shù)設(shè)計(jì)有一定的了解。網(wǎng)頁(yè)設(shè)計(jì)應(yīng)注重技術(shù)和藝術(shù)的統(tǒng)一性。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，應(yīng)考慮網(wǎng)站的總體結(jié)構(gòu)，風(fēng)格定位，色彩的應(yīng)用，版式的設(shè)計(jì)等方面的因素，力求形式與內(nèi)容的統(tǒng)一，讓網(wǎng)頁(yè)的顯示達(dá)到快捷，美觀(guān)的視覺(jué)效果。

2．教學(xué)方案

要設(shè)計(jì)一個(gè)好的網(wǎng)頁(yè)作品，首要的因素不是創(chuàng)新，而是“用戶(hù)體驗(yàn)”，第一步應(yīng)該站在用戶(hù)的角度去考慮設(shè)計(jì)方案，所有的形象風(fēng)格都必須服從主題，服務(wù)用戶(hù)。這就對(duì)網(wǎng)頁(yè)的整體形象有了較高的要求，整體形象包括版式設(shè)計(jì)，色彩的應(yīng)用，logo設(shè)計(jì)，素材設(shè)計(jì)，廣告設(shè)計(jì)，web圖像設(shè)計(jì)及優(yōu)化，交互方式等等。在教學(xué)時(shí)，我們可以結(jié)合實(shí)際，要求學(xué)生從版式布局設(shè)計(jì)和網(wǎng)頁(yè)元素的處理及色彩搭配三方面著手，歸納如下：

（1）版式設(shè)計(jì)

網(wǎng)頁(yè)的美感來(lái)源于網(wǎng)頁(yè)的版式設(shè)計(jì)，它突出了網(wǎng)頁(yè)設(shè)計(jì)的藝術(shù)性和個(gè)性，屬于網(wǎng)頁(yè)的藝術(shù)設(shè)計(jì)，好的版式設(shè)計(jì)會(huì)使得網(wǎng)頁(yè)顯得更具有美感和創(chuàng)意。網(wǎng)頁(yè)的版式設(shè)計(jì)是基于內(nèi)容的，應(yīng)該從實(shí)用性和藝術(shù)性考慮。網(wǎng)頁(yè)內(nèi)容一定要主次分明，中心突出；導(dǎo)航要清晰；可以圖文并茂，是網(wǎng)頁(yè)顯得生動(dòng)和活躍。除此以外，網(wǎng)頁(yè)的版式設(shè)計(jì)要符合統(tǒng)一、分割的原則。統(tǒng)一即指整個(gè)網(wǎng)站版式風(fēng)格的統(tǒng)一性、整體性；分割即指要科學(xué)的劃分整個(gè)頁(yè)面。

網(wǎng)頁(yè)的版式設(shè)計(jì)主要是表格、層等技術(shù)的應(yīng)用。表格是一種最簡(jiǎn)單的布局手法，它可以將圖像和文字做最恰當(dāng)?shù)木幣牛_(dá)到清晰易懂的效果。層（div）的布局，是現(xiàn)在正當(dāng)流行的排版手法，它主要應(yīng)用相對(duì)位置等的關(guān)系進(jìn)行準(zhǔn)確定位，再加上層疊樣式表的輔助，突出了它對(duì)網(wǎng)頁(yè)的設(shè)計(jì)具有可擴(kuò)展的優(yōu)勢(shì)。

文字是網(wǎng)頁(yè)內(nèi)容的主要載體，所以文字的視覺(jué)效果在版式設(shè)計(jì)中也起著關(guān)鍵的作用。文字的設(shè)置可以分為字體、大小、顏色、行距等，通過(guò)這些屬性設(shè)置，使文字排列得整體和美觀(guān)。但要注意的是中文字體和英文等其他字體的設(shè)置，是有一定區(qū)別的。英文的字體有很多的選擇，但中文的正文字，總的來(lái)說(shuō)，就兩種：宋體和黑體。在傳統(tǒng)的版式設(shè)計(jì)中，大家都還是傾向于英文的排版，從視覺(jué)上來(lái)看，英文字體更有韻律性，因?yàn)槊總€(gè)字母本身高矮不一致；但是中文字體相對(duì)來(lái)說(shuō)，就顯得單調(diào)和獨(dú)立些，所以在設(shè)計(jì)時(shí)，這兩種文字要作不同的處理。另外，也不要選擇一些非常特殊的字體，除非用戶(hù)的瀏覽器認(rèn)識(shí)這些特殊字體，否則將會(huì)出現(xiàn)亂碼。如果遇到非要使用特殊字體的情況，可將文字轉(zhuǎn)換成圖片再將其應(yīng)用。對(duì)于字號(hào)而言，單位應(yīng)采用em，而不是px，這點(diǎn)在使用層疊樣式表（css）時(shí)尤為重要，還要注意的是em和px是有差別的，所以在使用的時(shí)候也要對(duì)上號(hào)，否則也達(dá)不到預(yù)先的視覺(jué)效果。文字一行的字?jǐn)?shù)最好不超過(guò)50字，首頁(yè)的標(biāo)題在10-20字為佳；行距一般使用的是20-22像素的行距，這樣使得整個(gè)的文字內(nèi)容部分不會(huì)顯得太緊湊或者太松散。文字的整體排列一般有四種基本形式：兩端對(duì)齊、居中對(duì)齊、左對(duì)齊或右對(duì)齊、圖文環(huán)繞排列。在整個(gè)網(wǎng)頁(yè)版式設(shè)計(jì)中，標(biāo)題文字的設(shè)計(jì)原則應(yīng)該是“醒目而不夸張”。

導(dǎo)航欄的設(shè)計(jì)在網(wǎng)頁(yè)設(shè)計(jì)中也很重要，它對(duì)整個(gè)網(wǎng)站內(nèi)容有提綱和導(dǎo)航的作用，在設(shè)計(jì)的時(shí)候，要注意首先導(dǎo)航欄的風(fēng)格也要和整個(gè)網(wǎng)頁(yè)風(fēng)格保持統(tǒng)一，另外最好采用文字，因?yàn)榫W(wǎng)絡(luò)的速度可能會(huì)影響圖片的正常下載；不過(guò)現(xiàn)在flash按鈕的導(dǎo)航欄已經(jīng)成為時(shí)尚，它可以實(shí)現(xiàn)豐富的動(dòng)感效果。

（2）網(wǎng)頁(yè)元素的處理

網(wǎng)頁(yè)元素包括logo、按鈕、圖片、動(dòng)畫(huà)、聲音、banner等。在網(wǎng)頁(yè)中包含這些對(duì)象時(shí)要注意的有：首先是logo的設(shè)計(jì)，logo代表了整個(gè)網(wǎng)站或者企業(yè)的文化，一個(gè)有特色、具有視覺(jué)沖擊力的logo，可以直接影響瀏覽者對(duì)網(wǎng)站的判斷，給瀏覽者留下記憶深刻的印象。其次，要確保網(wǎng)頁(yè)上的每一個(gè)元素都有存在的必要性，不要使用冗余的技術(shù)和內(nèi)容；再次，要保持形式和內(nèi)容的統(tǒng)一；最后，要盡量的使網(wǎng)頁(yè)具有快捷性。對(duì)于網(wǎng)頁(yè)的特效技術(shù)，最好采用javascript或css技術(shù)來(lái)實(shí)現(xiàn)。

（3）色彩的處理

并非所有的顏色都能應(yīng)用于網(wǎng)頁(yè)，網(wǎng)頁(yè)中的顏色會(huì)受到硬件、瀏覽器等的影響，即使網(wǎng)頁(yè)中使用了非常合理、非常漂亮的配色方案，每一位用戶(hù)所看到的效果也不一定相同。所以，最好使用使用網(wǎng)頁(yè)安全色來(lái)避免和解決這種問(wèn)題。網(wǎng)頁(yè)安全色是指在不同的硬件環(huán)境和軟件環(huán)境下都能在瀏覽器上正常顯示的顏色，并且現(xiàn)顯示的效果都一樣，不會(huì)出現(xiàn)失真的現(xiàn)象。在頁(yè)面設(shè)計(jì)中，整個(gè)網(wǎng)頁(yè)的色彩種類(lèi)最好不要超過(guò)3種，一種或者兩種主體色，其他為輔助色。顏色種類(lèi)太多，會(huì)讓人覺(jué)得很雜亂。另外，文字內(nèi)容和網(wǎng)頁(yè)的背景顏色的對(duì)比要做到突出，比如：背景為深色，則文字的顏色可以選取淺色調(diào)；背景為淺色時(shí)，文字顏色就應(yīng)該深些；這種深淺的變化在色彩學(xué)中稱(chēng)為“明度變化“。比如有些主頁(yè)，背景色和文字顏色都采用的是深色，由于色彩的明度較近，所以瀏覽者來(lái)瀏覽閱讀的時(shí)候，會(huì)感覺(jué)吃力，從而影響閱讀；但是色彩的明度變化也不能太大，明度變化大會(huì)導(dǎo)致亮度的反差強(qiáng)，讓人覺(jué)得很刺眼，同樣會(huì)影響整個(gè)網(wǎng)頁(yè)的視覺(jué)效果。在進(jìn)行顏色搭配時(shí)，還要注意的是：第一，采用的顏色應(yīng)具有聯(lián)想性，不同的色彩會(huì)產(chǎn)生不同的聯(lián)想，所以色彩的選取也要和網(wǎng)頁(yè)的內(nèi)涵有關(guān)。第二，色彩的合理性。根據(jù)網(wǎng)頁(yè)的主題的不同，選取相應(yīng)的色彩，比如紅色，可以體現(xiàn)出網(wǎng)站的熱情和喜慶；藍(lán)色可體現(xiàn)出科技的氣息等。第三，色彩要有鮮明性，這個(gè)才能給瀏覽者深刻的印象，并有耳目一新的感覺(jué)。

（4）網(wǎng)頁(yè)賞析

在教學(xué)過(guò)程中對(duì)學(xué)生的引導(dǎo)是非常重要的，設(shè)計(jì)網(wǎng)頁(yè)得多看多學(xué)，網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)和風(fēng)格在日新月異地變化，所以在提高學(xué)生設(shè)計(jì)技術(shù)的同時(shí)，還要多培養(yǎng)學(xué)生的審美能力，知道怎么設(shè)計(jì)才是一個(gè)好的網(wǎng)頁(yè)。創(chuàng)建網(wǎng)頁(yè)是一個(gè)不斷學(xué)習(xí)的過(guò)程，在看一個(gè)網(wǎng)站的時(shí)候，找到這個(gè)網(wǎng)站的優(yōu)點(diǎn)缺點(diǎn)，注意哪些是可以借鑒的，哪些是需要避免的，在看的同時(shí)，可以看些成熟的網(wǎng)站，也可以看些成長(zhǎng)中的作品，在同期的比較中，也有助于自身的提高。另外，鼓勵(lì)學(xué)生看源文件，了解某些效果是如果實(shí)現(xiàn)的，在效仿的同時(shí)進(jìn)行改進(jìn)和創(chuàng)新。

（5）考核方式

網(wǎng)頁(yè)設(shè)計(jì)課程的考核應(yīng)該打破傳統(tǒng)的考試方式，建議采用機(jī)考的方式，學(xué)生通過(guò)一學(xué)期的學(xué)習(xí)，應(yīng)能自行設(shè)計(jì)各種網(wǎng)頁(yè)，熟練掌握其基本制作方法和技巧，在規(guī)定的時(shí)間內(nèi)設(shè)計(jì)網(wǎng) 頁(yè)。這也是一種對(duì)提高學(xué)生動(dòng)能能力的一種鞭策方法。

三、結(jié)束語(yǔ)

在網(wǎng)頁(yè)設(shè)計(jì)課程教學(xué)中，應(yīng)當(dāng)充分認(rèn)識(shí)到網(wǎng)頁(yè)設(shè)計(jì)課程的特點(diǎn)，結(jié)合實(shí)際，采取相應(yīng)的教學(xué)措施和方法完成教學(xué)任務(wù)，以達(dá)到良好的教學(xué)效果。對(duì)于信息科技迅猛的發(fā)展今天，必須摒棄陳舊的教學(xué)理念，及時(shí)提高自身的專(zhuān)業(yè)水平，完善自身的教學(xué)理念，尋找更好的教學(xué)方法，激發(fā)學(xué)生的學(xué)習(xí)興趣，培養(yǎng)學(xué)生追求新知的能力和動(dòng)手實(shí)踐的能力，從而達(dá)到學(xué)以致用的效果。

參考資料： 田博文，《Dreamweaver8基礎(chǔ)培訓(xùn)教程》，人民郵電出版社，2007年2月

孫素華，<< Dreamweaverms2004完美網(wǎng)頁(yè)設(shè)計(jì)>>，中國(guó)青年出版社，2005年10月

第三篇：網(wǎng)頁(yè)設(shè)計(jì)課程小結(jié)

現(xiàn)在，計(jì)算機(jī)和網(wǎng)絡(luò)已經(jīng)深入到了我們生活中的方方面面，也已經(jīng)成了生活中不可缺少的一部分，網(wǎng)絡(luò)成了我們獲取知識(shí)和信息的一種便捷工具，現(xiàn)在的網(wǎng)民也在不斷的增多，所以，了解和學(xué)習(xí)網(wǎng)絡(luò)知識(shí)是我們作為一名大學(xué)生迫切所需的。我利用寒假的時(shí)間，對(duì)網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行了初步的認(rèn)識(shí)和了解，并基本掌握dreamweaver的應(yīng)用。

通過(guò)寒假期間的學(xué)習(xí)，在學(xué)習(xí)了網(wǎng)頁(yè)設(shè)計(jì)的同時(shí)，我更加深入的了解了關(guān)于計(jì)算機(jī)和網(wǎng)絡(luò)的知識(shí)?；诖笠粚?duì)計(jì)算機(jī)基礎(chǔ)與c語(yǔ)言的基本掌握，自學(xué)網(wǎng)絡(luò)設(shè)計(jì)的基礎(chǔ)部分便顯得較為輕松。誰(shuí)然如此，在設(shè)計(jì)過(guò)程中依然出現(xiàn)了很多的問(wèn)題，但通過(guò)看書(shū)，上網(wǎng)查詢(xún)，等方式，不斷的學(xué)習(xí)、解決、提高，設(shè)計(jì)出的網(wǎng)頁(yè)不論是外觀(guān)還是內(nèi)容，都在不斷的進(jìn)步、改善?？梢哉f(shuō)在自己動(dòng)手，不斷實(shí)踐的過(guò)程中，網(wǎng)頁(yè)設(shè)計(jì)水平得到了很大的提高。

通過(guò)對(duì)網(wǎng)頁(yè)設(shè)計(jì)書(shū)籍的翻閱，我學(xué)習(xí)到了一些關(guān)于建設(shè)網(wǎng)站和制作網(wǎng)頁(yè)的知識(shí)，在實(shí)踐查閱資料時(shí)，對(duì)flash也有所了解。我還了解了一些基礎(chǔ)的網(wǎng)絡(luò)技術(shù)。通過(guò)學(xué)習(xí)，我對(duì)計(jì)算機(jī)有了更深層次得到了解，也有了更濃厚的興趣。尤其是對(duì)網(wǎng)頁(yè)制作的過(guò)程與一些技巧手法更有了另外一番了解，對(duì)網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)也有了一定的掌握。在這個(gè)過(guò)程中，我同樣認(rèn)識(shí)到網(wǎng)頁(yè)設(shè)計(jì)不是一門(mén)學(xué)科的獨(dú)秀，而是多種課程的綜合，他是、flash、fireworks等網(wǎng)頁(yè)軟件的綜合應(yīng)用。下面闡述一下我在翻閱《dreamweaver》時(shí)的一些關(guān)于網(wǎng)頁(yè)設(shè)計(jì)的見(jiàn)解。在具體的制作一個(gè)網(wǎng)頁(yè)時(shí)我了解到一個(gè)優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該具備一些基本原則。首先，要確定網(wǎng)頁(yè)設(shè)計(jì)的內(nèi)容一個(gè)優(yōu)秀的風(fēng)站要有一個(gè)明確的主題。整個(gè)網(wǎng)站圍繞這個(gè)主題,也就是你在網(wǎng)頁(yè)設(shè)計(jì)之前要明確你這個(gè)網(wǎng)站有什么目的,用來(lái)做什么，所有頁(yè)面都是圍繞著這個(gè)內(nèi)容來(lái)制作，有了明確的內(nèi)容對(duì)排名有很重要的作用；其次，要了解你網(wǎng)站所在行業(yè)的客戶(hù)，及你的網(wǎng)頁(yè)屬于哪個(gè)類(lèi)別。用戶(hù)是一個(gè)網(wǎng)站成敗的關(guān)鍵,如果用戶(hù)要花很多時(shí)間進(jìn)入你網(wǎng)站很有可能用戶(hù)會(huì)立即關(guān)掉你網(wǎng)站,或者你網(wǎng)站操作很不方便用戶(hù)也會(huì)馬上離開(kāi),這種網(wǎng)站是很失敗的設(shè)計(jì),只會(huì)讓用戶(hù)失望的離去.在完成以上的基本內(nèi)容之后網(wǎng)頁(yè)的基本框架便成形成了。下面要開(kāi)始的便是優(yōu)化工作，內(nèi)容是整個(gè)網(wǎng)頁(yè)的核心。在網(wǎng)頁(yè)設(shè)計(jì)之前必須明確網(wǎng)頁(yè)的內(nèi)容安排。優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì)是要建立在平凡的基礎(chǔ)上的。然后在具體的規(guī)劃一個(gè)網(wǎng)頁(yè)時(shí)，可以用樹(shù)狀結(jié)構(gòu)先把每個(gè)頁(yè)面的內(nèi)容大綱列出來(lái)，尤其要制作一個(gè)大的網(wǎng)站(有很多頁(yè)面)的時(shí)候，特別需要把這個(gè)架構(gòu)規(guī)劃好，也要考慮到以后可能的擴(kuò)充性，免得做好以后又要一改再改整個(gè)網(wǎng)站的架構(gòu)，很浪費(fèi)時(shí)間和財(cái)力。大綱列出來(lái)后，還必須考慮每個(gè)頁(yè)面之間的鏈接關(guān)系。是星形，樹(shù)形，或是網(wǎng)形鏈接。這也是判別一個(gè)網(wǎng)站優(yōu)劣的重要標(biāo)志。鏈接混亂，層次不清的站點(diǎn)會(huì)造成瀏覽困難，影響內(nèi)容的發(fā)揮?？蚣芏ㄏ聛?lái)了，然后開(kāi)始一步一步有條理，有次序地做來(lái)，就胸有成竹得多，也會(huì)為主頁(yè)將來(lái)發(fā)展打下良好的基礎(chǔ)。下一步，就以動(dòng)手制作具體內(nèi)容了，題材選定，框架選定，接下來(lái)就開(kāi)始往主頁(yè)里面填內(nèi)容。

如果是個(gè)人主頁(yè)，有能力的人完全可以靠自己來(lái)創(chuàng)作所有的內(nèi)容。大部分人的方法是：從報(bào)紙，雜志，光盤(pán)等媒體中把相關(guān)的資料收集整理，再加上一定的編輯后就可以了。另外一個(gè)好的方法是從網(wǎng)絡(luò)上收集，您只要到搜索引擎上查找相應(yīng)的關(guān)鍵字，就可以找到一大堆的資料。在準(zhǔn)備材料的時(shí)候我們可以用一些小的動(dòng)畫(huà)和動(dòng)態(tài)圖片，flash提供了功能齊全的繪圖和編輯圖形工具。可以直接在編輯區(qū)里繪畫(huà)，編輯修改非常靈活，它的另一大特點(diǎn)是“交互性”強(qiáng)。在動(dòng)畫(huà)播放時(shí)，可以用鼠標(biāo)或鍵盤(pán)對(duì)動(dòng)畫(huà)的播放進(jìn)行控制，效果可以很直觀(guān)的反映出來(lái)。然后是開(kāi)始正式制作主頁(yè)。通過(guò)dreamweaver作為制作軟件，只需要用到軟件中的一些基本的功能：圖片插入和對(duì)齊設(shè)置；文字的格式、顏色、背景顏色的設(shè)置等就可以制作出一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)。

總體來(lái)說(shuō)，通過(guò)這個(gè)假期對(duì)網(wǎng)頁(yè)設(shè)計(jì)的學(xué)習(xí)，有收獲也有遺憾。但是，我已經(jīng)邁入了網(wǎng)頁(yè)設(shè)計(jì)的大門(mén)，只要我再認(rèn)真努力的去學(xué)習(xí)，在今后的閑余時(shí)間學(xué)習(xí)制作網(wǎng)頁(yè)的更多知識(shí)以實(shí)現(xiàn)自身技能的提高，我堅(jiān)信將來(lái)設(shè)計(jì)出的網(wǎng)頁(yè)會(huì)更加專(zhuān)業(yè)，更加華麗，使它最終成為自己的一項(xiàng)技能。

第四篇：網(wǎng)頁(yè)設(shè)計(jì)高級(jí)課程

網(wǎng)頁(yè)設(shè)計(jì)高級(jí)課程（5個(gè)月）

學(xué)習(xí)內(nèi)容：使用Dreamweaver制作網(wǎng)頁(yè)、使用Photoshop處理圖像、網(wǎng)站配色與布局、制作Flash動(dòng)畫(huà)、DIV+CSS、淘寶網(wǎng)店裝飾與推廣、網(wǎng)站架構(gòu)與策劃、PHP+MySql網(wǎng)站開(kāi)發(fā)、SEO網(wǎng)站優(yōu)化與推廣。白云技師學(xué)院，最好的計(jì)算機(jī)培訓(xùn)課程，電腦培訓(xùn)課程，網(wǎng)頁(yè)設(shè)計(jì)高級(jí)課程。電話(huà)020-36093333 px.byxy.com byxy.com

網(wǎng)頁(yè)設(shè)計(jì)制作基本概述

理解網(wǎng)頁(yè)設(shè)計(jì)制作原理、基本手段、流程與制作要求。

1．互聯(lián)網(wǎng)、網(wǎng)頁(yè)、網(wǎng)站、超級(jí)連接、HTML語(yǔ)言等基礎(chǔ)網(wǎng)絡(luò)知識(shí)的概念及定義

2．網(wǎng)站設(shè)計(jì)制作的常用工具與基本流程

3．HTML語(yǔ)言的基本結(jié)構(gòu)和語(yǔ)法

熟練掌握網(wǎng)頁(yè)設(shè)計(jì)制作的基礎(chǔ)操作。講解HTML代碼。主要包括：

1、如何建立站點(diǎn)

2、對(duì)于網(wǎng)站文字，圖片，超鏈接的設(shè)置

3、以及以上網(wǎng)頁(yè)元素所對(duì)應(yīng)的html代碼

熟練掌握常用的頁(yè)面版式與布局控制技術(shù)。

1、表格的應(yīng)用

2、表單的應(yīng)用

3、框架的使用

熟練掌握css+div的模式進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，并能夠使用css制作特殊的效果的樣式。講解css和div的相關(guān)知識(shí)，主要包括：

1.css的基本概念，基礎(chǔ)知識(shí)

2.css對(duì)于文字，圖片的設(shè)置

3.css對(duì)于網(wǎng)頁(yè)布局的控制，css的特殊效果等

使用JavaScript的相關(guān)行為進(jìn)行網(wǎng)頁(yè)的一些特效以及驗(yàn)證。

1、講解JavaScript的基礎(chǔ)知識(shí)

2、講解JavaScript的常用方法。

了解網(wǎng)頁(yè)設(shè)計(jì)色彩的搭配原則以及網(wǎng)站logo設(shè)計(jì)的基本原則。

1、網(wǎng)頁(yè)色彩的色調(diào)組合，網(wǎng)頁(yè)設(shè)計(jì)中色彩的基本原則

2、網(wǎng)站logo設(shè)計(jì)的原則以及基本創(chuàng)意

3、優(yōu)秀網(wǎng)站作品賞析

掌握網(wǎng)站導(dǎo)航條的設(shè)計(jì)制作技巧以及網(wǎng)站banner的制作方法。

1、導(dǎo)航條設(shè)計(jì)的原則

2、導(dǎo)航條設(shè)計(jì)的創(chuàng)意

3、網(wǎng)站banner的表現(xiàn)手法

4、制作網(wǎng)站banner常用的技法

5、如何制作有創(chuàng)意且美觀(guān)的網(wǎng)站banner

白云技師學(xué)院，最好的計(jì)算機(jī)培訓(xùn)課程，電腦培訓(xùn)課程，網(wǎng)頁(yè)設(shè)計(jì)高級(jí)課程。電話(huà)020-36093333

px.byxy.com byxy.com 歡迎前來(lái)報(bào)讀

第五篇：《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)大綱

《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)大綱

課程編號(hào)：

英文名稱(chēng)：WebPages Designing 課程類(lèi)型：專(zhuān)業(yè)選修課 學(xué)時(shí)/學(xué)分：24+24/2 授課對(duì)象：專(zhuān)科生

先修課程：計(jì)算機(jī)文化基礎(chǔ) 課程簡(jiǎn)介：

《網(wǎng)頁(yè)設(shè)計(jì)》是一門(mén)重要的信息管理專(zhuān)業(yè)的選修課程。本課程講述了網(wǎng)站創(chuàng)建、網(wǎng)頁(yè)制作基本知識(shí)、Dreamweaver網(wǎng)頁(yè)制作集成工具使用的方法等內(nèi)容。通過(guò)本課程的學(xué)習(xí)，使學(xué)生掌握構(gòu)建網(wǎng)站的基本知識(shí)，熟悉網(wǎng)頁(yè)開(kāi)發(fā)平臺(tái)的使用，能夠獨(dú)立的創(chuàng)建個(gè)人網(wǎng)站。

教學(xué)目的和要求：

通過(guò)學(xué)習(xí)，使學(xué)生了解網(wǎng)頁(yè)網(wǎng)站的基礎(chǔ)知識(shí)；掌握網(wǎng)頁(yè)三劍客的使用方法，以便能夠正確應(yīng)用和維護(hù)網(wǎng)站。與此同時(shí)，通過(guò)對(duì)Web頁(yè)制作技術(shù)和制作工具的學(xué)習(xí)，使學(xué)生對(duì)于網(wǎng)頁(yè)設(shè)計(jì)中所涉及的相關(guān)知識(shí)有一個(gè)全面的了解。

教學(xué)內(nèi)容：

第1章 網(wǎng)頁(yè)設(shè)計(jì)快速入門(mén)（2）

1、教學(xué)內(nèi)容：

1.1 在Internet上安個(gè)家

1.2 知識(shí)要點(diǎn)

1.2.1 有關(guān)網(wǎng)頁(yè)設(shè)計(jì)的概念

1.2.2 網(wǎng)頁(yè)設(shè)計(jì)軟件

1.2.3 網(wǎng)頁(yè)制作過(guò)程

1.2.4 企業(yè)建立網(wǎng)站的過(guò)程

1.2.5 網(wǎng)頁(yè)設(shè)計(jì)與HTML 1.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

網(wǎng)頁(yè)設(shè)計(jì)的概念、網(wǎng)頁(yè)制作過(guò)程。

3、教學(xué)難點(diǎn)： 網(wǎng)頁(yè)設(shè)計(jì)與HTML。

第2章 Dreamweaver MX快速入門(mén)（1）

1、教學(xué)內(nèi)容：

2.1 制作網(wǎng)站電子相冊(cè)

2.2 知識(shí)要點(diǎn)

2.2.1 認(rèn)識(shí)Dreamweaver MX中文版基本界面

2.2.2 認(rèn)識(shí)窗口項(xiàng)目

2.2.3 面板組

2.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

Dreamweaver MX中文版基本界面。

3、教學(xué)難點(diǎn)：

面板組的使用。

第3章 用Dreamweaver MX設(shè)計(jì)首頁(yè)（1）

1、教學(xué)內(nèi)容：

3.1 一個(gè)簡(jiǎn)單首頁(yè)設(shè)計(jì)的例子

3.2 知識(shí)要點(diǎn)

3.2.1 頁(yè)面屬性

3.2.2 文本屬性

3.2.3 表格屬性 3.2.4 單元格屬性

3.2.5 圖像屬性

3.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

設(shè)置文本、表格和圖像的屬性。

3、教學(xué)難點(diǎn)： 頁(yè)面屬性的設(shè)置。

第4章 Dreamweaver MX的CSS樣式（2）

1、教學(xué)內(nèi)容：

4.1 制作動(dòng)態(tài)鏈接效果

4.1.1 Microsoft中國(guó)公司主頁(yè)的動(dòng)態(tài)鏈接效果

4.1.2 為網(wǎng)頁(yè)制作動(dòng)態(tài)鏈接效果

4.2 知識(shí)要點(diǎn)

4.2.1 什么是CSS樣式

4.2.2 CSS樣式與HTML樣式

4.2.3 CSS樣式控制面板

4.2.4 定義CSS樣式

4.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

CSS樣式控制面板的使用、定義CSS樣式的方法。

3、教學(xué)難點(diǎn)：

定義CSS樣式的方法。第5章 表格應(yīng)用（2）

1、教學(xué)內(nèi)容：

5.1 用表格實(shí)現(xiàn)一個(gè)系部主頁(yè)的設(shè)計(jì)

5.1.1 網(wǎng)頁(yè)結(jié)構(gòu)分析

5.1.2 設(shè)計(jì)頁(yè)眉區(qū)

5.1.3 設(shè)計(jì)導(dǎo)航欄區(qū)

5.1.4 設(shè)計(jì)信息區(qū)

5.1.5 設(shè)計(jì)版權(quán)區(qū)

5.2 知識(shí)要點(diǎn)

5.2.1 標(biāo)準(zhǔn)視圖中的表格與布局視圖中的表格

5.2.2 標(biāo)準(zhǔn)視圖模式下表格的應(yīng)用技巧

5.2.3 布局視圖模式下表格的應(yīng)用技巧

5.3 本章小結(jié)

2、教學(xué)重點(diǎn)： 標(biāo)準(zhǔn)視圖模式下表格的應(yīng)用。

3、教學(xué)難點(diǎn)：

布局視圖模式下表格的應(yīng)用。

第6章 Dreamweaver MX圖層應(yīng)用（2）

1、教學(xué)內(nèi)容：

6.1 一個(gè)彈出式菜單設(shè)計(jì)的實(shí)例

6.1.1 設(shè)計(jì)彈出式菜單的效果圖

6.1.2 設(shè)計(jì)彈出式菜單的過(guò)程

6.2 知識(shí)要點(diǎn)

6.2.1 創(chuàng)建層

6.2.2 選擇層

6.2.3 插入層對(duì)象

6.2.4 移動(dòng)層

6.2.5 對(duì)齊層

6.2.6 層與表格相互轉(zhuǎn)換

6.2.7 設(shè)置層屬性

6.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

層的基本操作和層的屬性設(shè)置。

3、教學(xué)難點(diǎn)：

層與表格的轉(zhuǎn)換、行為和事件。

第7章 Dreamweaver MX時(shí)間軸（2）

1、教學(xué)內(nèi)容：

7.1 制作一個(gè)動(dòng)態(tài)地址導(dǎo)航圖

7.2 知識(shí)要點(diǎn)

7.2.1 時(shí)間軸控制面板

7.2.2 時(shí)間軸的基本應(yīng)用

7.3 本章小結(jié)

2、教學(xué)重點(diǎn)： 時(shí)間軸的基本應(yīng)用。

3、教學(xué)難點(diǎn)： 錄制層路徑。

第8章 表單操作（2）

1、教學(xué)內(nèi)容：

8.1 制作一個(gè)網(wǎng)上報(bào)名表單

8.1.1 制作網(wǎng)上在線(xiàn)報(bào)名表單

8.1.2 預(yù)覽網(wǎng)上在線(xiàn)報(bào)名表單

8.2 知識(shí)要點(diǎn)

8.2.1 插入表單

8.2.2 插入文本對(duì)象表單

8.2.3 插入按鈕

8.2.4 插入復(fù)選框

8.2.5 插入單選按鈕

8.2.6 插入列表/菜單域 8.2.7 插入文件字段

8.2.8 插入圖像域

8.2.9 插入隱藏域

8.2.10 插入跳轉(zhuǎn)菜單

8.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

表單和常用表單域的用途和使用方法。

3、教學(xué)難點(diǎn)：

插入隱藏域和跳轉(zhuǎn)菜單。

第9章 Dreamweaver MX綜合應(yīng)用（2）

1、教學(xué)內(nèi)容：

9.1 一個(gè)網(wǎng)站建立的實(shí)例

9.1.1 建站準(zhǔn)備

9.1.2 制作網(wǎng)站

9.2 知識(shí)要點(diǎn)

9.2.1 網(wǎng)站的設(shè)計(jì)構(gòu)思

9.2.2 資源面板的應(yīng)用

9.2.3 行為面板的應(yīng)用

9.2.4 站點(diǎn)管理器的應(yīng)用

9.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

網(wǎng)站的設(shè)計(jì)構(gòu)思、資源面板的應(yīng)用。

3、教學(xué)難點(diǎn)： 行為面板的應(yīng)用。第10章 Flash MX快速入門(mén)（0.5）

1、教學(xué)內(nèi)容：

10.1 制作一個(gè)移動(dòng)的圓

10.2 知識(shí)要點(diǎn)

10.2.1 Flash MX的界面

10.2.2 主菜單項(xiàng)目

10.2.3 常用工具欄

10.2.4 時(shí)間軸面板

10.2.5 繪圖工具欄

10.2.6 其他重要欄目

10.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

Flash MX的工具欄和時(shí)間軸面板。

3、教學(xué)難點(diǎn)： 時(shí)間軸面板的使用。第11章 Flash MX的繪圖功能（0.5）

1、教學(xué)內(nèi)容：

11.1 制作一個(gè)網(wǎng)頁(yè)廣告

11.2 知識(shí)要點(diǎn)

11.2.1 繪圖工具 11.2.2 指針工具

11.2.3 填充工具

11.2.4 文本工具

11.2.5 顏色設(shè)置

11.2.6 圖片的使用

11.3 本章小結(jié)

2、教學(xué)重點(diǎn)： 繪圖工具的使用。

3、教學(xué)難點(diǎn)： 圖片的使用。第12章 Flash MX動(dòng)畫(huà)制作初步（1）

1、教學(xué)內(nèi)容：

12.1 制作動(dòng)態(tài)文字的實(shí)例

12.2 知識(shí)要點(diǎn)

12.2.1 圖層（Layer）

12.2.2 幀（Frame）

12.2.3 使用圖符、實(shí)例和庫(kù)

12.2.4 用Sound面板引入和編輯聲音

12.2.5 文件預(yù)覽

12.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

使用Flash MX制作簡(jiǎn)單動(dòng)畫(huà)。

3、教學(xué)難點(diǎn)：

幀的基本操作、在動(dòng)畫(huà)中添加聲音。第13章 Flash MX動(dòng)作的應(yīng)用（1）

1、教學(xué)內(nèi)容： 13.1 圖像動(dòng)畫(huà)實(shí)例

13.1.1 制作可供控制播放的循環(huán)動(dòng)畫(huà)

13.1.2 制作按鈕元件

13.1.3 設(shè)計(jì)場(chǎng)景

13.1.4 舞臺(tái)播放區(qū)背景的制作

13.1.5 在場(chǎng)景上創(chuàng)建Daughter影片剪輯的實(shí)例

13.1.6 后臺(tái)控制程序

13.2 知識(shí)要點(diǎn)

13.2.1 ActionScript的基本概念

13.2.2 用動(dòng)作面板編輯對(duì)象動(dòng)作

13.3 本章小結(jié)

2、教學(xué)重點(diǎn)： 動(dòng)作面板的使用。

3、教學(xué)難點(diǎn)：

用動(dòng)作面板編輯對(duì)象動(dòng)作。第14章 Flash MX的綜合應(yīng)用（1）

1、教學(xué)內(nèi)容：

14.1 制作一個(gè)網(wǎng)站的門(mén)戶(hù)廣告動(dòng)畫(huà) 14.1.1 設(shè)計(jì)構(gòu)思

14.1.2 素材準(zhǔn)備

14.1.3 制作過(guò)程

14.1.4 發(fā)布過(guò)程

14.2 知識(shí)要點(diǎn)

14.2.1 文件的導(dǎo)入與導(dǎo)出

14.2.2 文件的發(fā)布及發(fā)布設(shè)置

14.2.3 發(fā)布預(yù)覽

14.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

文件的導(dǎo)入和導(dǎo)出、文件的發(fā)布。

3、教學(xué)難點(diǎn)：

Flash MX動(dòng)作的應(yīng)用。第15章 Fireworks MX應(yīng)用基礎(chǔ)（1）

1、教學(xué)內(nèi)容：

15.1 Web按鈕制作實(shí)例

15.2 知識(shí)要點(diǎn)

15.2.1 Fireworks的基本概念

15.2.2 Fireworks的編輯模式

15.2.3 Fireworks的工具詳解

15.2.4 Fireworks中的對(duì)象

15.2.5 Fireworks的層

15.3 本章小結(jié)

2、教學(xué)重點(diǎn)：

Fireworks的工具詳解。

3、教學(xué)難點(diǎn)： Fireworks的層。第16章 Fireworks MX進(jìn)階操作（1）

1、教學(xué)內(nèi)容：

16.1 一個(gè)簡(jiǎn)單的動(dòng)畫(huà)

16.2 知識(shí)要點(diǎn)

16.2.1 Fireworks的蒙版

16.2.2 Fireworks的顏色混合模式

16.2.3 Fireworks的熱點(diǎn)和切片

16.2.4 Fireworks實(shí)用技巧 16.3 本章小結(jié)

2、教學(xué)重點(diǎn)： Fireworks實(shí)用技巧。

3、教學(xué)難點(diǎn)：

Fireworks的蒙版、熱點(diǎn)和切片。第17章 站點(diǎn)的發(fā)布、宣傳推廣與維護(hù)（2）

1、教學(xué)內(nèi)容： 17.1 站點(diǎn)的發(fā)布

17.2 網(wǎng)頁(yè)的測(cè)試 17.2.1 下載時(shí)間測(cè)試

17.2.2 瀏覽器兼容性測(cè)試

17.2.3 拼寫(xiě)檢查測(cè)試

17.3 站點(diǎn)宣傳與推廣的一般方法

17.4 站點(diǎn)的維護(hù)與更新

17.5 本章小結(jié)

2、教學(xué)重點(diǎn)： 站點(diǎn)的發(fā)布。

3、教學(xué)難點(diǎn)： CuteFTP的使用方法。

實(shí)驗(yàn)內(nèi)容：

實(shí)驗(yàn)一

(使用HTML語(yǔ)言制作簡(jiǎn)單網(wǎng)頁(yè))（2）

1、實(shí)驗(yàn)?zāi)康模?/p>

熟悉HTML語(yǔ)言的常用標(biāo)記，學(xué)會(huì)在記事本環(huán)境下用HTML語(yǔ)言編輯簡(jiǎn)單的網(wǎng)頁(yè)。

2、實(shí)驗(yàn)內(nèi)容：

用記事本輸入下面語(yǔ)句，另存為網(wǎng)頁(yè)文件，并在瀏覽器中瀏覽。

一首唐詩(shī)

夜雨寄北

李商隱

君問(wèn)歸期未有期，

巴山夜雨漲秋池。

何當(dāng)共剪西窗燭，

卻話(huà)巴山夜雨時(shí)。