网页制作课程设计报告-4

PAGEPAGE2网页制作课程设计报告课题名称：___马上文学小说阅读网________姓名：______________学号：____________专业：计算机网络技术_______系部：____________设计时间：2013~2014学年第二学期17~18周指导教师：_______________________PAGE5PAGE01．课程设计目的本课程设计的主要目的是：通过本课程设计，加强自身对网站的认知；学会设计和制作网站（全部工作流程），包括完成设计报告，了解网站的软、硬件平台，熟练网页制作及相关工具的使用，掌握软件的使用技巧，掌握相关行业的相关标准。从而运用网站界面的设计与可用性分析制作专业的站点，以便能获得就业机会，提高个人的综合竞争力与社会适应力。2．课程设计任务与要求⑴设计任务小说网站的制作⑵设计要求熟练掌握DIV进行网页布局熟练掌握CSS网页美化网页和脚本、美工紧密结合3．主要内容(1)网站首页设计（包括效果图和使用的关键技术和步骤）关键技术与步骤：①首页导航栏均使用了二级链接，分别链接到各栏目，其代码为：<ul> <li><ahref="index.html">小说首页</a></li> <li><ahref="first.html">分类精选</a></li> <li><ahref="secend.html">最新更新</a></li> <li><ahref="gad.html">大神专区</a></li><li><ahref="rs.html">意见反馈</a></li> </ul>②在左边区域使用了<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">网游之神界血骑</a></li><br/><br/></ul> <aclass="more"href="first.html">查看更多>></a>③在网页的右边栏，使用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>现实世界的穷小子烂屌丝，在一系列悲催悲催再悲催...</p><palign="right"><ahref="first/3.html">详情>></a></p></div></div><divid="asd"><divid="Right2"><ahref="first/4.html"title="九转金身"><imgsrc="images/24.jpg"/></a><divid="Right11"><h3>九转金身</h3><p>太古圣文，极道九转。玄门八卦，晓地通天。能...</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)意见反馈栏目设计（包括效果图和使用的关键技术和步骤）在意见反馈栏目中使用了表单技术，具体代码如下：<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.课程设计心得通过本次网页制作课程设计，我更加充分的理解了课本上的知识，并能够加以扩展，在书本中得到的知识在书本外进行实践，应用于实践当中，通过书本的知识来掌握现实的成果！这几天的课程设计令我学到了很多，很多平时模棱两可的知识点都认真复习并实践了，同时也发现自己的不足，以下是我的一些心得：同时链接到两个网页我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“GoToURL”JavaScript行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“GoToURL”。我们会注意到Dreamweaver会在“GoToURL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。④不给文件起中文名称大家在制作好网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。⑤巧妙设置字体分辨率我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计