网页设计课程设计报告.doc

钦州学院

网页设计课程设计报告

博客类网站的设计

院系物理与材料科学学院

专业电子信息工程

学生班级2007级1班

姓名？？？

学号？？？？？

指导教师单位钦州学院

指导教师姓名曲艺

指导教师职称讲师

20？？年？？月

博客类网站的设计

电子信息工程专业2007级？？？

指导教师曲艺

摘要：根据本课程设计的要求，本人制作了一个博客类网站，本网站仿效一些大型博客类网站，内容相比照拟简写。就内容有博客首页、留言、相册、心情诉说、博友、留言等，采用的是静态网页制作技术。用到flash、一些代码制作、背景音乐，标签滚动公告。采用统一附加样式，使界面结构框架统一。还有动态导航条和动态日历，整体让人一目了然，方便浏览。

关键词：日记，相册，心情，博友，留言

设计目的:

〔1〕进一步熟练掌握软件Dreamweaver8，更一步提升网页的熟练设计；

〔2〕由普通的网页设计更进一步专业网站的设计，全面了解专业网站布局与设计，技巧亮点等等。

设计技术指标与要求:

〔1〕在网页中插入Flash；

〔2〕利用标签选择和代码提示制作滚动公告；

〔3〕利用插入文本域制作登录区；

〔4〕制作圆角表格；

〔5〕利用附加外部CSS样式快速制作出统一风格的网页；

〔6〕使用代码提示制作带背景音乐的网页。

目录

前言…………………………1

1博客类网站的设计……………………1

设计思想…………1

设计方案………………………1

设计技术亮点………………1

设计步骤…………1

博客首页的设计………1

1.2.2博客日志页的设计……………

博客相册页的设计…………4

心情诉说页的设计………5

1.2.5博客留言页的设计……………

1.2.6博友页的设计………

2作品测试与验收……………………8

3设计体会………………8

参考文献…………………8

前言

现在网络通讯越来越兴旺了，网上博客已经成为人们交流必不可少的工具。博客给我们提供一个相当方便的交流平台，注册博客的博友们都知道，博客与电子邮箱、即时网上聊天等有着相当方便的优点，适用于广阔网民。网络日记本方便可靠平安性好，交友留言，相片上传，个性音乐设置，还有动态心情等等，非常便捷。

1博客类网站的设计

1.1设计思想

1设计方案

方案:考虑到博客类网站的大局部设计风格都相同，在参考了一些例如新浪博客和126博客和QQ空间后，就是领悟博客不外乎有首页，有相册，留言，交友，写日记文章等等。所以本人在这次设计业采用普通博客类的风格，做了一个简单的博客类网站，统一布局风格，共7个页面，相比照拟简陋，内容也相对简单,流程图如下：

博客类网站博客首页博客相册博客日记

博客类网站

博客首页

博客相册

博客日记

心情诉说

博客留言

博友

主要有Flash的插入，滚动公告和滚动相册的制作，代码插入背景音乐，动态日历，动态导航条的制作，友情链接的等等。设计布局采用统一CSS样式，网页顶部导航相同，统一风格，绿色为背景，让人有健康和谐的感觉。

1.2设计步骤

1博客首页的设计

图1

〔1〕上图1为每页所具有相同顶部页，在每页顶部中插入可以滑动导航条，动态滚动文字，图片和flash，其中flash已经透明化。滚动文字代码如下divclass=STYLE1id=Layer31marqueescrollamount=2direction=leftwidth=400onMouseOver=this.stop()onMouseOut