网页设计课程设计报告博客类网站的设计.doc

网页设计课程设计报告博客类网站的设计院 系 物理与材料科学学院 专 业 电子信息工程 学 生 班 级 2007级1班 姓 名 ？ 学 号 ？ 指导教师单位 钦州学院 指导教师姓名 曲艺 指导教师职称 讲师 20？年？月博客类网站的设计电子信息工程专业2007级 ？指导教师 曲艺摘要：根据本课程设计的要求，本人制作了一个博客类网站，本网站仿效一些大型博客类网站，内容相对比较简写。就内容有博客首页、留言、相册、心情诉说、博友、留言等，采用的是静态网页制作技术。用到flash、一些代码制作、背景音乐，标签滚动公告。采用统一附加样式，使界面结构框架统一。还有动态导航条和动态日历，整体让人一目了然，方便浏览。关键词：日记，相册，心情，博友，留言设计目的:（1）进一步熟练掌握软件Dreamweaver8 ，更一步提升网页的熟练设计；（2）由普通的网页设计更进一步专业网站的设计，全面了解专业网站布局与设计，技巧亮点等等。设计技术指标与要求:（1）在网页中插入Flash；（2）利用标签选择和代码提示制作滚动公告；（3）利用插入文本域制作登录区；（4）制作圆角表格；（5）利用附加外部CSS样式快速制作出统一风格的网页；（6）使用代码提示制作带背景音乐的网页。目录前言11 博客类网站的设计 11.1 设计思想 11.1.1 设计方案11.1.2 设计技术亮点11.2 设计步骤 11.2.1 博客首页的设计11.2.2 博客日志页的设计31.2.3 博客相册页的设计 41.2.4 心情诉说页的设计51.2.5 博客留言页的设计51.2.6 博友页的设计72 作品测试与验收 83 设计体会 8参考文献 8 前言现在网络通讯越来越发达了，网上博客已经成为人们交流必不可少的工具。博客给我们提供一个相当方便的交流平台，注册博客的博友们都知道，博客与电子邮箱、即时网上聊天等有着相当方便的优点，适用于广大网民。网络日记本方便可靠安全性好，交友留言，相片上传，个性音乐设置，还有动态心情等等，非常便捷。1 博客类网站的设计1.1 设计思想1.1.1 设计方案方案:考虑到博客类网站的大部分设计风格都相同，在参考了一些例如新浪博客和126博客和QQ空间后，就是领悟博客不外乎有首页，有相册，留言，交友，写日记文章等等。所以本人在这次设计业采用普通博客类的风格，做了一个简单的博客类网站，统一布局风格，共7个页面，相对比较简陋，内容也相对简单,流程图如下：博客类网站博客首页博客相册博客日记心情诉说博客留言博友1.1.2 设计技术亮点主要有Flash的插入，滚动公告和滚动相册的制作，代码插入背景音乐，动态日历，动态导航条的制作，友情链接的等等。设计布局采用统一CSS样式，网页顶部导航相同，统一风格，绿色为背景，让人有健康和谐的感觉。1.2 设计步骤1.2.1 博客首页的设计图1（1）上图1为每页所具有相同顶部页，在每页顶部中插入可以滑动导航条，动态滚动文字，图片和flash，其中flash已经透明化。滚动文字代码如下<div class="STYLE1" id="Layer31"><marquee scrollamount="2" direction="left" width="400" onMouseOver="this.stop()" onMouseOut="this.start()">欢迎光临黄文燕的博客空间，在这里我们一起交流合作，倾听，这里有属于我们的世界一切从这里开始我们一起乐天地</marquee></div>。图2首页内容如上图2，登录区域是用插入文本域来制作的，动态日历时采用插入代码的形式，首页中间有今日关注的最新动态新闻，点击可以有相关的链接，浏览新闻。右边有人生警句，下面有博文，最近更新news，采用的是文字向上滚动效果，布局色彩相对还是比较搭配。1.2.2 博客日志页的设计图3日志页内容如上图3，页面左边是一些图片用以美化页面，右上是日记列表，里面有日记分类，如个人日记、博友日记，分享日记，转载日记等等。下面显示的十最新更新的博客文章。可以对最近的日记进行管理，如修改，删除等等。每篇日记还添加了行为链接，当鼠标单击是会弹出相关的日记内容的窗口，可以浏览日记内容。日记列表相关代码如下：<td><img src="images/w.jpg" width="12" height="12"><span class="STYLE4" onMouseDown="MM_openBrWindow('riji.html','','')"><u>个人日记</u> 你是自己，你了解多少？(0/5) <img src="images/j.jpg" width="13" height="11"> 编辑 更多</span></td></span></td><td><img src="images/w.jpg" width="12" height="12"><span class="STYLE4"><u>个人日记</u> 天天饮食的始终家常菜，你会会了吗？(4/7) <img src="images/j.jpg" width="13" height="11"> 编辑。1.2.3 博客相册页的设计图4相册页面如上图4，相册页面有公告栏，有最新相册模板，相册评论，相册容量显示等等。有滚动相册，两个滚动相册相对方向来回滚动，下面是相册管理，显示相册张数，名称等等。其中相册滚动代码如下:<div id="Layer42"><marquee scrollamount="7"behavior="alternate" loop="100" direction="left" height="100" width="760"><IMG width=140 height=105 src="F:网页设计课程设计个人博客网页images人物1.jpg" border=2><IMG width=140 height=105 src="F:网页设计课程设计个人博客网页images人物2.jpg" border=2><IMG width=140 height=105 src="F:网页设计课程设计个人博客网页images人物5.jpg" border=2><IMG width=140 height=105 src="F:网页设计课程设计个人博客网页images人物6.jpg" border=2><IMG width=140 height=105 src="F:网页设计课程设计个人博客网页images人物7.jpg" border=2><IMG width=140 height=105 src="F:网页设计课程设计个人博客网页images人物8.jpg" border=2><IMG width=140 height=105 src="F:网页设计课程设计个人博客网页images人物12.jpg" border=2><IMG width=140 height=105 src="F:网页设计课程设计个人博客网页images人物11.jpg" border=2></marquee></div> 1.2.4 心情诉说页的设计图5心情诉说页内容如上图5，右边有最新动态，心情说说，博友随笔，生活感悟，文章转载等等，还有心情收藏，即是最新文章收藏。1.2.5 博客留言页的设计博客留言页有两个页面，查看留言页和填写留言页。主要代码有友情链接：<table width="55%" border="0" align="center"><tr><th scope="col"><div align="center" class="STYLE5">友情链接</div></th></tr><tr><td><form id="form1" name="form1" method="post" action=""><select name="menu1" onChange="MM_jumpMenu('parent',this,0)"><option value=" <option value=" <optionvalue="<optionvalue=" </select> </form> </td> </tr> </table>图6查看留言页如上图6，查看留言页有不同博友的留言，可以看到博友的留言，头像，呢称，页可以编辑留言，如QQ留言、编辑、删除等，左边还有友情链接，查看留言，填写留言，添加留言等，点击会跳到相关的链接。在此页面。你可以随时浏览到博友的不同心情，随时可以看到最新动态，同样通过友情链接，可以看到不同的好友，还有喜欢的网站。图7填写留言页如上图7，填写留言页左边主要是图片，用来美化页面。用到了鼠标经过图像，图像导航条，更生动，右边就是相关的填写留言，昵称，地址，联系方式，填写留言内容，提交等等。下面还插入了一下闪图小猫，更具生动可爱。1.2.6 博友页的设计图8博友页如上图8，博友页左边有最近访客，显示博友头像，呢称，可以查看博友资料，取消关注等等。上面有好友动态，心情等等。下面有评论，可以查看，评论，转发，右边有博友管理，还有博友分类，添加，查找，删除，是否公开等等。2 作品测试与验收作品的测试与验收实质就是做完作品设计后测试作品，看看是否按设计要求实现相关的功能。本人在今次设计作品到完成过程中花费了相当多的时间，参考了较多相关的网站，最终能够按时完成，并测试，整体上实现功能，成功通过了老师的验收。3 设计体会在设计的过程，我了解了许多关于网站的知识，首先在设计之前需有方案，有整体的布局，流程分析，也懂得相关专业网站设计步骤。同时了解到自己在网页设计方面知识欠缺，许多知识点都还没有熟练运用，今后一定要在网页设计上多花点功夫，争取有进一步的提高，同时也很感谢老师的教导与支持。参考文献1 何琛.Dreamweaver8网页设计经典商用案例基础篇M.上海：科学普及出版社，2009.2锐博科技. Dreamweaver CS3从入门到精通M.北京：中国青年电子出版社，2005.3 陈笑. Dreamweaver 8，Photoshop CS 2，Flash 8 网页制作实用教程M.北京：清华大学出版社，2006.4 聂小燕. 中文Dreamweaver8网页制作11日通M.上海：机械工业出版社，2007.