Css Div 网页博客制作综述

华东交通大学理工学院

课 程 设 计 报 告 书

所属课程名称 网页设计与制作实例教程 题 目 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.1引言

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

意义：

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

设计目的:

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

2) 由普通的网页设计更进一步专业网站的设计，全面了解专业网站布

局与设计，技巧亮点等等。 设计技术指标与要求: 1) 在网页中插入Flash；

2) 利用标签选择和代码提示制作滚动公告； 3) 利用插入文本域制作登录区； 4) 制作圆角表格；

5) 利用附加外部CSS样式快速制作出统一风格的网页； 6) 使用代码提示制作带背景音乐的网页。

- 2 -

华东交通大学理工学院课程设计报告

第2章 设计思想与步骤

2.1 设计思想 2.1.1 设计方案

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

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

2.2.1 博客首页的设计

第 3 页 共 16 页

华东交通大学理工学院课程设计报告

图一 首页设计

（1）上图1为每页所具有相同顶部页，在每页顶部中插入可以滑动导航条，动态滚动文字，图片和flash，其中flash已经透明化。滚动文字代码如下

图二 首页内容

首页内容如上图2，登录区域是用插入文本域来制作的，动态日历时采用插入代码的形式，首页中间有今日关注的最新动态新闻，点击可以有相

第 4 页 共 16 页

华东交通大学理工学院课程设计报告

关的链接，浏览新闻。右边有人生警句，下面有博文，最近更新news，采用的是文字向上滚动效果，布局色彩相对还是比较搭配。 2.2.2 博客日志页的设计

图三 日志页内容

日志页内容如上图3，页面左边是一些图片用以美化页面，右上是日记列表，里面有日记分类，如个人日记、博友日记，分享日记，转载日记等等。下面显示的十最新更新的博客文章。可以对最近的日记进行管理，如修改，删除等等。每篇日记还添加了行为链接，当鼠标单击是会弹出相关的日记内容的窗口，可以浏览日记内容。日记列表相关代码如下：

onMouseDown=\"MM_openBrWindow('riji.html','','')\">[个人日记] 你是自己，你了解多少？(0/5) 编辑 更多

src=\"images/w.jpg\"

width=\"12\"

height=\"12\">[个人日记] 天天饮食的始终

第 5 页 共 16 页

华东交通大学理工学院课程设计报告

家常菜，你会会了吗？(4/7) 编辑。 2.2.3 博客相册页的设计

图四 相册页面

相册页面如上图4，相册页面有公告栏，有最新相册模板，相册评论，相册容量显示等等。有滚动相册，两个滚动相册相对方向来回滚动，下面是相册管理，显示相册张数，名称等等。其中相册滚动代码如下:

id=\"Layer42\">scrollamount=\"7\"behavior=\"alternate\" loop=\"100\" direction=\"left\" height=\"100\" width=\"760\">

第 6 页 共 16 页

华东交通大学理工学院课程设计报告