203网页设计报告_第1页
203网页设计报告_第2页
203网页设计报告_第3页
203网页设计报告_第4页
203网页设计报告_第5页
已阅读5页,还剩15页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

存档资料成绩:华东交通大学理工学院课程设计报告书所属课程名称网页设计与制作题目制作一个旅游静态网页分院电信分院专业班级信息管理与信息系统学生姓名曾小花指导教师魏建红2014华东交通大学理工学院课程设计报告第5页共20页序号项目等级优秀良好中等及格不及格1课程设计态度评价2出勤情况评价3任务难度评价4工作量饱满评价5任务难度评价6设计中创新性评价7论文书写规范化评价8综合应用能力评价综合评定等级课程设计(论文)评阅意见评阅人职称20年月日

目录第一章课程设计的内容与要求 4第二章网页设计的思路 5第三章程序代码与视图 11第四章设计心得与体会 15第五章参考文献(资料) 19

第一章课程设计的内容与要求利用这个学期所学的关于网页设计的知识,自己设计一个有关于一个旅游公司的网页。要求有内容有:1.建立站点;2.结构分析;3.搭建框架;4.切割效果图;5.布局页面——头部和导航;6.布局页面——侧边栏;7.布局页面——主体部分;8.底部和细节调整。

第二章网页设计的思路关于旅游页面的实现,首先在index.html页面显示相关信息,然后创立各种信息链接,整个页面布局要求清新,不宜复杂。1.建立站点;首先在这个index.html页面中可以分为哪些组成部分,这些部分的内容是哪些。而对于整体的要求有什么。2.结构分析;整个页面分为三个结构上,中,左。上面,是所有的导航。左面是两个格子组成,属于两个基本导航。中间要求是主要内容,对于旅游则是主要旅游推荐,和与它相关的各种信息。3.搭建框架;导航栏导航栏左侧目录导航中心内容底部与这个页面相关的代码:<divid="header"> <divid="menu"> <ul> <liclass="current_page_item"><ahref="#"><spanclass="numbertxt">01 </span>留言</a></li> <li><ahref="#"><spanclass="numbertxt">02 </span>部落格</a></li> <li><ahref="#"><spanclass="numbertxt">03 </span>图片</a></li> <li><ahref="#"><spanclass="numbertxt">04 </span>登录</a></li> <liclass="last"><ahref="#"><spanclass="numbertxt">05 </span>联系我们</a></li> </ul> </div>4.切割效果图;5.布局页面——头部和导航;代码为:<divid="header"> <divid="menu"> <ul> <liclass="current_page_item"><ahref="#"><spanclass="numbertxt">01 </span>留言</a></li> <li><ahref="#"><spanclass="numbertxt">02 </span>部落格</a></li> <li><ahref="#"><spanclass="numbertxt">03 </span>图片</a></li> <li><ahref="#"><spanclass="numbertxt">04 </span>登录</a></li> <liclass="last"><ahref="#"><spanclass="numbertxt">05 </span>联系我们</a></li> </ul> </div></div>6.布局页面——侧边栏;代码是:<divid="sidebar"> <ul> <liid="search"> <h2>查询</h2> <formmethod="get"action=""> <fieldset> <inputtype="text"id="s"name="s"value=""/> <inputtype="submit"id="x"value="查询"/> </fieldset> </form> </li> <li> <h2>关于我们</h2> <ul> <li><ahref="#">公司介绍</a></li> <li><ahref="#">公司经营战略</a></li> <li><ahref="#">面向群体</a></li> <li><ahref="#">海外市场</a></li> <li><ahref="#">各旅游价目一览表</a></li> <li><ahref="#">最新旅游套餐</a></li> </ul> </li> <li> <h2>今日推荐</h2> <ul> <li><ahref="#">巴黎</a></li> <li><ahref="#">纽约</a></li> <li><ahref="#">东京</a></li> <li><ahref="#">北京</a></li> <li><ahref="#">泰国</a></li> <li><ahref="#">瑞士</a></li> <li><ahref="#">香港</a></li> </ul> </li> </ul> </div> <!--endsidebar--> <divstyle="clear:both;"> </div></div>7.布局页面——主体部分;8.底部和细节调整。与之代码为:<divid="footer"> <divid="footer-wrap"> <pid="legal">(c)2007YourSite.Designby<ahref="/">爱玩旅游</a>.downloadfrom<ahref="/"></a></p> </div></div>

第三章程序代码与视图对于整个页面实现的效果图为:关于整个的页面所需要的程序代码:<body><!--startheader--><divid="header"> <divid="menu"> <ul> <liclass="current_page_item"><ahref="#"><spanclass="numbertxt">01 </span>留言</a></li> <li><ahref="#"><spanclass="numbertxt">02 </span>部落格</a></li> <li><ahref="#"><spanclass="numbertxt">03 </span>图片</a></li> <li><ahref="#"><spanclass="numbertxt">04 </span>登录</a></li> <liclass="last"><ahref="#"><spanclass="numbertxt">05 </span>联系我们</a></li> </ul> </div></div><divid="logo"> <h1><ahref="#">santorini</a></h1> <h2>曾小花设计</h2></div><!--endheader--><!--start><divid="page"> <!--startcontent--> <divid="content"> <divclass="post"> <h1class="title">Welcometoourwebsite</h1> <divclass="entry"> <p><imgsrc="images/img07.jpg"alt=""width="150"height="150"class="left"/>santorini<br> 圣托里尼岛名为希拉,为纪念saintirene,西元1207年威尼斯统治时被改为圣托里尼 </p> </div> <divclass="meta"> <pclass="byline">PostedonJuly21,2007byFreeCssTemplates</p> <pclass="links"><ahref="#"class="more">读全文</a><b>|</b><ahref="#"class="comments">报团/优惠套餐(32)</a></p> </div> </div> <divclass="post"> <h2class="title">旅游攻略</h2> <divclass="entry"> <p><imgsrc="images/img07.jpg"alt=""width="150"height="150"class="left"/>路线</p><p><imgsrc="images/img07.jpg"alt=""width="150"height="150"class="left"/>住宿</p><p><imgsrc="images/img07.jpg"alt=""width="150"height="150"class="left"/>饮食</p> </div> <divclass="meta"> <pclass="byline">更新于18,2007by**</p> <pclass="links"><ahref="#"class="more">展开</a><b>|</b><ahref="#"class="comments">Comments(32)</a></p> </div> </div> </div> <!--endcontent--> <!--startsidebar--> <divid="sidebar"> <ul> <liid="search"> <h2>查询</h2> <formmethod="get"action=""> <fieldset> <inputtype="text"id="s"name="s"value=""/> <inputtype="submit"id="x"value="查询"/> </fieldset> </form> </li> <li> <h2>关于我们</h2> <ul> <li><ahref="#">公司介绍</a></li> <li><ahref="#">公司经营战略</a></li> <li><ahref="#">面向群体</a></li> <li><ahref="#">海外市场</a></li> <li><ahref="#">各旅游价目一览表</a></li> <li><ahref="#">最新旅游套餐</a></li> </ul> </li> <li> <h2>今日推荐</h2> <ul> <li><ahref="#">巴黎</a></li> <li><ahref="#">纽约</a></li> <li><ahref="#">东京</a></li> <li><ahref="#">北京</a></li> <li><ahref="#">泰国</a></li> <li><ahref="#">瑞士</a></li> <li><ahref="#">香港</a></li> </ul> </li> </ul> </div> <!--endsidebar--> <divstyle="clear:both;"> </div></div><!--end><!--startfooter--><divid="footer"> <divid="footer-wrap"> <pid="legal">(c)2007YourSite.Designby<ahref="/">爱玩旅游</a>.downloadfrom<ahref="/"></a></p> </div></div><!--endfooter--></body></html>

第四章设计心得与体会此次网页设计的课程设计,综合了css+div,更好地显示整个页面的风格,便于用户的整个浏览。通过一个学期的学习,对于网页设计这门课程也从开始的陌生的到有了基础的了解。了解到了设计一个网页不仅仅需要考虑自身能力问题更应该了解客户的体验,而客户体验是很重要的。一个学期的学习是远远不够的,要想真正的了解和熟练,还得更加勤奋的钻研才可以。总体来说,这次网页设计激发了学习的乐趣,调动了学习的自觉性,自己动脑,动手,通过自身实践,设计一个网页。总的来说,收获大于付出!现在,计算机和网络已经深入到了我们生活中的方方面面,也已经成了生活中不可缺少的一部分,网络成了我们获取知识和信息的一种便捷工具,现在的网民也在不断的增多,所以,了解和学习网络知识是我们作为一名大学生迫切所需的。

这学期选择的这门课程让我学到了不少关于计算机和网络的知识。老师把课程内容安排的很合理,讲的大都是很基础的知识,这对于像我这样对网络了解不多的学生来说很容易理解,接受。

在这门课上我学习到了一些关于建设网站和制作网页的知识,对flash也有所了解。课上我还学到了一些基础的网络技术,用制作网络的工具做网页等。

通过对这门课的学习,我对计算机有了更深层次得到了解,也有了更浓厚的兴趣。尤其是对网页制作的过程与一些技巧手法更有了另外一番了解,对网页制作的基础知识也有了一定的掌握。

在具体的制作一个网页时我了解到一个优秀的网页设计应该具备以下一些基本原则

1确定网页设计的内容

一个优秀的风站要有一个明确的主题,整个网站围绕这个主题,也就是你在网页设计之前要明确你这个网站有什么目的,用来做什么,所有页面都是围绕着这个内容来制作,有了明确的内容对排名有很重要的作用。

2了解你网站所在行业的客户

用户是一个网站成败的关键,如果用户要花很多时间进入你网站很有可能用户会立即关掉你网站,或者你网站操作很不方便用户也会马上离开,这种网站是很失败的设计,只会让用户失望的离去.

3、做一个典型用户

不以用户身份亲身体验网站你才能发现问题,才知道那些需要改进,尽量不要让客户去发现问题,在前期设计时就应该把这些问题解决。

4优化内容

内容是整个网站的核心。在网站设计之前必须明确网站的内容安排。

优秀网页设计是要建立在平凡的基础上的。

然后在具体的规划一个网站时,可以用树状结构先把每个页面的内容大纲列出来,尤其要制作一个大的网站(有很多页面)的时候,特别需要把这个架构规划好,也要考虑到以后可能的扩充性,免得做好以后又要一改再改整个网站的架构,很浪费时间和财力。

大纲列出来后,还必须考虑每个页面之间的链接关系。是星形,树形,或是网形链接。这也是判别一个网站优劣的重要标志。链接混乱,层次不清的站点会造成浏览困难,影响内容的发挥。

框架定下来了,然后开

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论