网页设计课程设计报告---博客类网站的设计.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 设计方案………………………………………………………………………1 1.1.2 设计技术亮点………………………………………………………………1 1.2 设计步骤 …………………………………………………………………………1 1.2.1 博客首页的设计………………………………………………………1 1.2.2 博客日志页的设计……………………………………………………………3 1.2.3 博客相册页的设计 …………………………………………………………4 1.2.4 心情诉说页的设计………………………………………………………5 1.2.5 博客留言页的设计……………………………………………………………5 1.2.6 博友页的设计………………………………………………………7 2 作品测试与验收 ……………………………………………………………………8 3 设计体会 ………………………………………………………………………………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=Layer31marquee scrollamount=2 direction=left width=400 onMouseOver=this.stop() onMouseOut=th