CssDiv网页博客制作.doc

存档资料 成绩：　 华东交通大学理工学院 课 程 设 计 报 告 书 所属课程名称 网页设计与制作实例教程 题 目 　　Css+Div 网页博客制作　　　　　　　　 　　　 分 院 　　电 信 分 院 　　 　 专业班级 信息管理与信息系统1班 学　　号 20110210450107 　 　　　　 　　 　 学生姓名 汪晓月 　　 指导教师 程志平 　　　 2014 年 1 月 1 日 目　录 第1章 博客类网站设计 2 1.1引言 2 第2章 设计思想与步骤 3 2.1 设计思想 3 2.1.1 设计方案 3 2.1.2 设计技术亮点 3 2.2 设计步骤 3 2.2.1 博客首页的设计 3 2.2.2 博客日志页的设计 5 2.2.3 博客相册页的设计 6 2.2.4 心情诉说页的设计 7 2.2.5 博客留言页的设计 8 2.2.6 博友页的设计 10 第3章 页面布局与规划 11 第4章 相关代码 12 第5章 课程设计心得 14 第6章 参考文献 15 博客类网站设计 1.1引言 现在网络通讯越来越发达了，网上博客已经成为人们交流必不可少的工具。博客给我们提供一个相当方便的交流平台，注册博客的博友们都知道，博客与电子邮箱、即时网上聊天等有着相当方便的优点，适用于广大网民。网络日记本方便可靠安全性好，交友留言，相片上传，个性音乐设置，还有动态心情等等，非常便捷。 意义： 根据本课程设计的要求，本人制作了一个博客类网站，本网站仿效一些大型博客类网站，内容相对比较简写。就内容有博客首页、留言、相册、心情诉说、博友、留言等，采用的是静态网页制作技术。用到flash、一些代码制作、背景音乐，标签滚动公告。采用统一附加样式，使界面结构框架统一。还有动态导航条和动态日历，整体让人一目了然，方便浏览。 设计目的: 进一步熟练掌握软件Dreamweaver8 ，更一步提升网页的熟练设计； 由普通的网页设计更进一步专业网站的设计，全面了解专业网站布局与设计，技巧亮点等等。 设计技术指标与要求: 在网页中插入Flash； 利用标签选择和代码提示制作滚动公告； 利用插入文本域制作登录区； 制作圆角表格； 利用附加外部CSS样式快速制作出统一风格的网页； 使用代码提示制作带背景音乐的网页。  第2章 设计思想与步骤 2.1 设计思想 2.1.1 设计方案 方案:考虑到博客类网站的大部分设计风格都相同，在参考了一些例如新浪博客和126博客和QQ空间后，就是领悟博客不外乎有首页，有相册，留言，交友，写日记文章等等。所以本人在这次设计业采用普通博客类的风格，做了一个简单的博客类网站，统一布局风格，共7个页面，相对比较简陋，内容也相对简单,流程图如下： 2.1.2 设计技术亮点 主要有Flash的插入，滚动公告和滚动相册的制作，代码插入背景音乐，动态日历，动态导航条的制作，友情链接的等等。设计布局采用统一CSS样式，网页顶部导航相同，统一风格，绿色为背景，让人有健康和谐的感觉。 2.2 设计步骤 2.2.1 博客首页的设计 图一 首页设计 （1）上图1为每页所具有相同顶部页，在每页顶部中插入可以滑动导航条，动态滚动文字，图片和flash，其中flash已经透明化。滚动文字代码如下div class=STYLE1 id=Layer31marquee scrollamount=2 direction=left width=400 onMouseOver=this.stop() onMouseOut=this.start()欢迎光临黄文燕的博客空间，在这里我们一起交流合作，倾听，这里有属于我们的世界……一切从这里开始……我们一起乐天地……/marquee/div。 图二 首页内容 首页内容如上图2，登录区域是用插入文本域来制作的，动态日历时采用插入代码的形式，首页中间有今日关注的最新动态新闻，点击可以有相关的链接，浏览新闻。右边有人生警句，下面有博文，最近更新news，采用的是文字向上滚动效果，布局色彩相对还是比较搭配。 2.2.2 博客日志页的设计 图三 日志页内容 日志页内容如上图3，页面左边是一些图片用以美化页面，右上是日记列表，里面有日记分类，如个人日记、博友日记，分享日记，转载日记等等。下面显示的十最新更新的博客文章。可以对最近的日记进行管理，如修改，删除等等。