網(wǎng)頁制作課程設(shè)計報告-4

PAGEPAGE2網(wǎng)頁制作課程設(shè)計報告課題名稱：___馬上文學小說閱讀網(wǎng)________姓名：______________學號：____________專業(yè)：計算機網(wǎng)絡(luò)技術(shù)_______系部：____________設(shè)計時間：2013~2014學年第二學期17~18周指導教師：_______________________PAGE5PAGE01．課程設(shè)計目的本課程設(shè)計的主要目的是：通過本課程設(shè)計，加強自身對網(wǎng)站的認知；學會設(shè)計和制作網(wǎng)站（全部工作流程），包括完成設(shè)計報告，了解網(wǎng)站的軟、硬件平臺，熟練網(wǎng)頁制作及相關(guān)工具的使用，掌握軟件的使用技巧，掌握相關(guān)行業(yè)的相關(guān)標準。從而運用網(wǎng)站界面的設(shè)計與可用性分析制作專業(yè)的站點，以便能獲得就業(yè)機會，提高個人的綜合競爭力與社會適應力。2．課程設(shè)計任務與要求⑴設(shè)計任務小說網(wǎng)站的制作⑵設(shè)計要求熟練掌握DIV進行網(wǎng)頁布局熟練掌握CSS網(wǎng)頁美化網(wǎng)頁和腳本、美工緊密結(jié)合3．主要內(nèi)容(1)網(wǎng)站首頁設(shè)計（包括效果圖和使用的關(guān)鍵技術(shù)和步驟）關(guān)鍵技術(shù)與步驟：①首頁導航欄均使用了二級鏈接，分別鏈接到各欄目，其代碼為：<ul> <li><ahref="index.html">小說首頁</a></li> <li><ahref="first.html">分類精選</a></li> <li><ahref="secend.html">最新更新</a></li> <li><ahref="gad.html">大神專區(qū)</a></li><li><ahref="rs.html">意見反饋</a></li> </ul>②在左邊區(qū)域使用了<ul>列表代碼如下：<h2class="headingText"><ahref="#">    本周熱搜</a></h2><br/> <ul><li><span>修真</span>    <ahref="index/1.html">大道封天</a></li><br/><br/><li><span>仙俠</span>    <ahref="index/2.html">戮仙</a></li><br/><br/><li><span>玄幻</span>    <ahref="index/3.html">大劍神</a></li><br/><br/><li><span>奇幻</span>    <ahref="index/4.html">完美世界</a></li><br/><br/><li><span>奇幻</span>    <ahref="index/5.html">世界之敵</a></li><br/><br/><li><span>修仙</span>    <ahref="index/6.html">我欲封天</a></li><br/><br/><li><span>都市</span>    <ahref="index/7.html">死亡競技場</a></li><br/><br/><li><span>異世</span>    <ahref="index/8.html">最高通緝</a></li><br/><br/><li><span>游戲</span>    <ahref="index/9.html">網(wǎng)游之神界血騎</a></li><br/><br/></ul> <aclass="more"href="first.html">查看更多>></a>③在網(wǎng)頁的右邊欄，使用DIV+CSS布局，將圖片和文字進行排列，其代碼如下：<divid="Right1"><ahref="first/1.html"title="仙路爭鋒"><imgsrc="images/21.jpg"/></a><divid="Right11"><h3>仙路爭鋒</h3><p>修仙如渡河，萬馬千軍竟爭帆。因此當你選擇了這條路時...</p><palign="right"><ahref="first/1.html">詳情>></a></p></div></div><divid="Right2"><ahref="first/2.html"title="梅林詭異案"><imgsrc="images/22.jpg"/></a><divid="Right11"><h3>梅林詭案錄</h3><p>為了生計惆悵的梅林日日守著古玩店龍井堂，即將忘卻自...</p><palign="right"><ahref="first/2.html">詳情>></a></p></div></div> <divid="Right1"><ahref="first/3.html"title="漢末遼王"><imgsrc="images/23.jpg"/></a><divid="Right11"><h3>漢末遼王</h3><p>現(xiàn)實世界的窮小子爛屌絲，在一系列悲催悲催再悲催...</p><palign="right"><ahref="first/3.html">詳情>></a></p></div></div><divid="asd"><divid="Right2"><ahref="first/4.html"title="九轉(zhuǎn)金身"><imgsrc="images/24.jpg"/></a><divid="Right11"><h3>九轉(zhuǎn)金身</h3><p>太古圣文，極道九轉(zhuǎn)。玄門八卦，曉地通天。能...</p><palign="right"><ahref="first/4.html">詳情>></a></p></div></div> </div><divid="Right1"><ahref="first/5.html"title="荒島歷險記"><imgsrc="images/25.jpg"/></a><divid="Right11"><h3>荒島歷險記</h3><p>一次空難，讓林威眾人邂逅孤島，一番生死爭奪之后。...</p><palign="right"><ahref="first/5.html">詳情>></a></p></div></div><divid="asd"><divid="Right2"><ahref="first/6.html"title="封門絕戶"><imgsrc="images/26.jpg"/></a><divid="Right11"><h3>封門絕戶</h3><p>男人爬了幾層階梯，拿手電往上照去，但見李胖子家...</p><palign="right"><ahref="first/6.html">詳情>></a></p></div></div> </div>(2)意見反饋欄目設(shè)計（包括效果圖和使用的關(guān)鍵技術(shù)和步驟）在意見反饋欄目中使用了表單技術(shù)，具體代碼如下：<palign="left">留言人：  <inputtype="text"name="textfield"id="textfield"/></p><br/><palign="left">E-mail：    <labelfor="textfield2"></label><inputtype="text"name="textfield2"id="textfield2"/></p><br/><palign="left">留言主題：<inputtype="text"name="textfield3"id="textfield3"size="50"/></p><br/><palign="left">留言信息：<textareaname="textarea"id="textarea"cols="80"rows="10"></textarea></p><formid="form1"name="form1"method="post"action=""><inputtype="submit"name="button"id="button"value="留言"/><inputtype="submit"name="button2"id="button2"value="重置"/></form></div>5.課程設(shè)計心得通過本次網(wǎng)頁制作課程設(shè)計，我更加充分的理解了課本上的知識，并能夠加以擴展，在書本中得到的知識在書本外進行實踐，應用于實踐當中，通過書本的知識來掌握現(xiàn)實的成果！這幾天的課程設(shè)計令我學到了很多，很多平時模棱兩可的知識點都認真復習并實踐了，同時也發(fā)現(xiàn)自己的不足，以下是我的一些心得：同時鏈接到兩個網(wǎng)頁我們都知道超級鏈接一次只能連到一個頁面。如果我們要想一次在不同的框架頁中打開文檔，可以使用“GoToURL”JavaScript行為。打開一個有框架的網(wǎng)頁，選擇文字或圖象，然后從行為面板中選擇“GoToURL”。我們會注意到Dreamweaver會在“GoToURL”對話框中顯示所有可用的框架。選擇其中一個我們想鏈接的框架并輸入相應的URL后再選擇另一個框架并輸入另一個URL。④不給文件起中文名稱大家在制作好網(wǎng)頁后，通常會給網(wǎng)頁起一個具有代表性的中文名稱，一來能使人一看文件名就能大概了解文件所包含的內(nèi)容，二來能夠方便各個超級鏈接之間的相互調(diào)用。但如果你在Dreamweaver中這樣做，就會發(fā)現(xiàn)Dreamweaver對中文文件名支持得不是太好，經(jīng)常會有頁面調(diào)用不正確的現(xiàn)象發(fā)生，所以我們以后在Dreamweaver中保存網(wǎng)頁的時候，盡量用英文或者數(shù)字作為文件名稱，這樣就可以避免上面的出錯現(xiàn)象。⑤巧妙設(shè)置字體分辨率我們在制作網(wǎng)頁的時候，經(jīng)常有這種體會，那就是制作好的網(wǎng)頁在本地計