Css+Div网页博客制作

1、存档资料 成绩： 华东交通大学理工学院课 程 设 计 报 告 书所属课程名称 网页设计与制作实例教程 题 目 Css+Div 网页博客制作 分 院 电 信 分 院 专业班级 信息管理与信息系统1班 学号 20110210450107 学生姓名 汪晓月 指导教师 程志平 2014 年 1 月 1 日 华东交通大学理工学院课程设计报告目录第1章博客类网站设计21.1引言2第2章 设计思想与步骤32.1 设计思想32.1.1 设计方案32.1.2 设计技术亮点32.2 设计步骤32.2.1 博客首页的设计32.2.2 博客日志页的设计52.2.3 博客相册页的设计62.2.4 心情诉说页的设计72.

2、2.5 博客留言页的设计82.2.6 博友页的设计10第3章 页面布局与规划11第4章 相关代码12第5章 课程设计心得14第6章 参考文献15第 13 页 共 16 页第1章 博客类网站设计1.1引言现在网络通讯越来越发达了，网上博客已经成为人们交流必不可少的工具。博客给我们提供一个相当方便的交流平台，注册博客的博友们都知道，博客与电子邮箱、即时网上聊天等有着相当方便的优点，适用于广大网民。网络日记本方便可靠安全性好，交友留言，相片上传，个性音乐设置，还有动态心情等等，非常便捷。意义：根据本课程设计的要求，本人制作了一个博客类网站，本网站仿效一些大型博客类网站，内容相对比较简写。就内容有博客

3、首页、留言、相册、心情诉说、博友、留言等，采用的是静态网页制作技术。用到flash、一些代码制作、背景音乐，标签滚动公告。采用统一附加样式，使界面结构框架统一。还有动态导航条和动态日历，整体让人一目了然，方便浏览。设计目的:1) 进一步熟练掌握软件Dreamweaver8 ，更一步提升网页的熟练设计；2) 由普通的网页设计更进一步专业网站的设计，全面了解专业网站布局与设计，技巧亮点等等。设计技术指标与要求:1) 在网页中插入Flash；2) 利用标签选择和代码提示制作滚动公告；3) 利用插入文本域制作登录区；4) 制作圆角表格；5) 利用附加外部CSS样式快速制作出统一风格的网页；6) 使用代

4、码提示制作带背景音乐的网页。第2章 设计思想与步骤2.1 设计思想2.1.1 设计方案方案:考虑到博客类网站的大部分设计风格都相同，在参考了一些例如新浪博客和126博客和QQ空间后，就是领悟博客不外乎有首页，有相册，留言，交友，写日记文章等等。所以本人在这次设计业采用普通博客类的风格，做了一个简单的博客类网站，统一布局风格，共7个页面，相对比较简陋，内容也相对简单,流程图如下：2.1.2 设计技术亮点主要有Flash的插入，滚动公告和滚动相册的制作，代码插入背景音乐，动态日历，动态导航条的制作，友情链接的等等。设计布局采用统一CSS样式，网页顶部导航相同，统一风格，绿色为背景，让人有健康和谐的

5、感觉。2.2 设计步骤2.2.1 博客首页的设计图一 首页设计（1）上图1为每页所具有相同顶部页，在每页顶部中插入可以滑动导航条，动态滚动文字，图片和flash，其中flash已经透明化。滚动文字代码如下<div class="STYLE1" id="Layer31"><marquee scrollamount="2" direction="left" width="400" onMouseOver="this.stop()" onMouseOut=&quo

6、t;this.start()">欢迎光临黄文燕的博客空间，在这里我们一起交流合作，倾听，这里有属于我们的世界一切从这里开始我们一起乐天地</marquee></div>。图二 首页内容首页内容如上图2，登录区域是用插入文本域来制作的，动态日历时采用插入代码的形式，首页中间有今日关注的最新动态新闻，点击可以有相关的链接，浏览新闻。右边有人生警句，下面有博文，最近更新news，采用的是文字向上滚动效果，布局色彩相对还是比较搭配。2.2.2 博客日志页的设计图三 日志页内容日志页内容如上图3，页面左边是一些图片用以美化页面，右上是日记列表，里面有日记分类，如个

7、人日记、博友日记，分享日记，转载日记等等。下面显示的十最新更新的博客文章。可以对最近的日记进行管理，如修改，删除等等。每篇日记还添加了行为链接，当鼠标单击是会弹出相关的日记内容的窗口，可以浏览日记内容。日记列表相关代码如下：<td><img src="images/w.jpg" width="12" height="12"><span class="STYLE4" onMouseDown="MM_openBrWindow('riji.html','&#

8、39;,'')"><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"><

9、span class="STYLE4"><u>个人日记</u> 天天饮食的始终家常菜，你会会了吗？(4/7) <img src="images/j.jpg" width="13" height="11"> 编辑。2.2.3 博客相册页的设计图四 相册页面相册页面如上图4，相册页面有公告栏，有最新相册模板，相册评论，相册容量显示等等。有滚动相册，两个滚动相册相对方向来回滚动，下面是相册管理，显示相册张数，名称等等。其中相册滚动代码如下:<div id="Lay

10、er42"><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=&

11、quot;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"

12、; 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></di

13、v>2.2.4 心情诉说页的设计图五 心情诉说心情诉说页内容如上图5，右边有最新动态，心情说说，博友随笔，生活感悟，文章转载等等，还有心情收藏，即是最新文章收藏。2.2.5 博客留言页的设计博客留言页有两个页面，查看留言页和填写留言页。主要代码有友情链接：<table width="55%" border="0" align="center"><tr><th scope="col"><div align="center" class="S

14、TYLE5">友情链接</div></th></tr><tr><td><form id="form1" name="form1" method="post" action=""><select name="menu1" onChange="MM_jumpMenu('parent',this,0)"><option value=" <opti

15、on value=" <optionvalue="<optionvalue=" </select> </form> </td> </tr> </table>图六 查看留言页查看留言页如上图6，查看留言页有不同博友的留言，可以看到博友的留言，头像，呢称，页可以编辑留言，如QQ留言、编辑、删除等，左边还有友情链接，查看留言，填写留言，添加留言等，点击会跳到相关的链接。在此页面。你可以随时浏览到博友的不同心情，随时可以看到最新动态，同样通过友情链接，可以看到不同的好友，还有喜欢的网站。图七 填写留言

16、页填写留言页如上图7，填写留言页左边主要是图片，用来美化页面。用到了鼠标经过图像，图像导航条，更生动，右边就是相关的填写留言，昵称，地址，联系方式，填写留言内容，提交等等。下面还插入了一下闪图小猫，更具生动可爱。2.2.6 博友页的设计图八 博友页博友页如上图8，博友页左边有最近访客，显示博友头像，呢称，可以查看博友资料，取消关注等等。上面有好友动态，心情等等。下面有评论，可以查看，评论，转发，右边有博友管理，还有博友分类，添加，查找，删除，是否公开等等。第3章 页面布局与规划页面布局与规划 在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会

17、用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。实际的页面局部图如下：第4章 相关代码<td><img src="images/w.jpg" width="12" height="12"><span class="STYLE4

18、" 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="i

19、mages/w.jpg" width="12" height="12"><span class="STYLE4"><u>个人日记</u> 天天饮食的始终家常菜，你会会了吗？(4/7) <img src="images/j.jpg" width="13" height="11"><div id="Layer42"><marquee scrollamount="7&qu

20、ot;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

21、><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=&q

22、uot;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><table width="55%" border="

23、;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=