CssDiv网页博客制作综述

存档资料 成绩：华东交通大学理工学院课程设计报告书所属课程名称网页设计与制作实例教程题目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.5博客留言页的设计.......................................................................................82.2.6博友页的设计.............................................................................................10第3章页面布局与规划.............................................................................................11第4章相关代码.........................................................................................................12第5章课程设计心得.................................................................................................14第6章参考文献.........................................................................................................15华东交通大学理工学院课程设计报告第1章博客类网站设计1.1引言现在网络通讯越来越发达了，网上博客已经成为人们交流必不可少的工具。博客给我们提供一个相当方便的交流平台，注册博客的博友们都知道，博客与电子邮箱、即时网上聊天等有着相当方便的优点，适用于广大网民。网络日记本方便可靠安全性好，交友留言，相片上传，个性音乐设置，还有动态心情等等，非常便捷。意义：根据本课程设计的要求，本人制作了一个博客类网站，本网站仿效一些大型博客类网站，内容相对比较简写。就内容有博客首页、留言、相册、心情诉说、博友、留言等，采用的是静态网页制作技术。用到flash、一些代码制作、背景音乐，标签滚动公告。采用统一附加样式，使界面结构框架统一。还有动态导航条和动态日历，整体让人一目了然，方便浏览。设计目的:进一步熟练掌握软件Dreamweaver8，更一步提升网页的熟练设计；由普通的网页设计更进一步专业网站的设计，全面了解专业网站布局与设计，技巧亮点等等。设计技术指标与要求:在网页中插入Flash；利用标签选择和代码提示制作滚动公告；利用插入文本域制作登录区；制作圆角表格；利用附加外部CSS样式快速制作出统一风格的网页；使用代码提示制作带背景音乐的网页。-2-华东交通大学理工学院课程设计报告第2章 设计思想与步骤2.1 设计思想 设计方案方案:考虑到博客类网站的大部分设计风格都相同，在参考了一些例如新浪博客和126博客和QQ空间后，就是领悟博客不外乎有首页，有相册，留言，交友，写日记文章等等。所以本人在这次设计业采用普通博客类的风格，做了一个简单的博客类网站，统一布局风格，共7个页面，相对比较简陋，内容也相对简单,流程图如下： 设计技术亮点主要有Flash的插入，滚动公告和滚动相册的制作，代码插入背景音乐，动态日历，动态导航条的制作，友情链接的等等。设计布局采用统一CSS样式，网页顶部导航相同，统一风格，绿色为背景，让人有健康和谐的感觉。2.2 设计步骤 博客首页的设计第3页共16页华东交通大学理工学院课程设计报告图一 首页设计（1）上图1为每页所具有相同顶部页，在每页顶部中插入可以滑动导航条，动态滚动文字，图片和 flash，其中flash 已经透明化。滚动文字代码如下<divclass="STYLE1"id="Layer31"><marqueescrollamount="2"direction="left" width="400" onMouseOver="this.stop()"onMouseOut="this.start()"> 欢迎光临黄文燕的博客空间，在这里我们一起交流合作，倾听，这里有属于我们的世界⋯⋯一切从这里开始⋯⋯我们一起乐天地⋯⋯</marquee></div>。图二 首页内容首页内容如上图2，登录区域是用插入文本域来制作的，动态日历时采用插入代码的形式，首页中间有今日关注的最新动态新闻，点击可以有相第4页共16页华东交通大学理工学院课程设计报告关的链接，浏览新闻。右边有人生警句，下面有博文，最近更新news，采用的是文字向上滚动效果，布局色彩相对还是比较搭配。 博客日志页的设计图三 日志页内容日志页内容如上图 3，页面左边是一些图片用以美化页面， 右上是日记列表，里面有日记分类，如个人日记、博友日记，分享日记，转载日记等等。下面显示的十最新更新的博客文章。可以对最近的日记进行管理，如修改，删除等等。每篇日记还添加了行为链接，当鼠标单击是会弹出相关的日记内容的窗口，可以浏览日记内容。日记列表相关代码如下：<td><img src="images/w.jpg" width="12" height="12"><spanclass="STYLE4"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="images/w.jpg" width="12"height="12"><span class="STYLE4">[<u>个人日记</u>] 天天饮食的始终第5页共16页华东交通大学理工学院课程设计报告家常菜，你会会了吗？(4/7) <imgsrc="images/j.jpg" width="13"height="11"> 编辑。 博客相册页的设计图四 相册页面相册页面如上图 4，相册页面有公告栏，有最新相册模板，相册评论，相册容量显示等等。有滚动相册，两个滚动相册相对方向来回滚动，下面是相册管理，显示相册张数，名称等等。其中相册滚动代码如下 :<div id="Layer42"><marqueescrollamount="7"behavior="alternate" loop="100" direction="left"height="100"width="760">网页设计课程设计 个人博客网页 人物1.jpg"border=2>网页设计课程设计 个人博客网页 人物2.jpg"border=2>网页设计课程设计 个人博客网页 人物5.jpg"border=2>第6页共16页华东交通大学理工学院课程设计报告网页设计课程设计 个人博客网页 人物6.jpg"border=2>网页设计课程设计 个人博客网页 人物7.jpg"border=2>网页设计课程设计 个人博客网页 人物8.jpg"border=2>网页设计课程设计 个人博客网页 人物12.jpg"border=2>网页设计课程设计 个人博客网页 人物11.jpg"border=2></marquee></div> 心情诉说页的设计图五 心情诉说心情诉说页内容如上图 5，右边有最新动态，心情说说，博友随笔，生活感悟，文章转载等等，还有心情收藏，即是最新文章收藏。第7页共16页华东交通大学理工学院课程设计报告 博客留言页的设计博客留言页有两个页面，查看留言页和填写留言页。主要代码有友情链接：<tablewidth="55%"border="0"align="center"><tr><thscope="col"><divalign="center"class="STYLE5"> 友情链接</div></th></tr><tr><td><formid="form1"name="form1"method="post"action=""><selectname="menu1"onChange="MM_jumpMenu('parent',this,0)"><option 新浪博客</option><option 我要自学</option>p;pn=0&db=0&s=8&word=%CC%EC%CC%EC%D2%FB%CA%B3&fr=ala0">天天饮食</option>shili/">网页设计学习</option></select></form></td></tr></table>第8页共16页华东交通大学理工学院课程设计报告图六 查看留言页查看留言页如上图6，查看留言页有不同博友的留言，可以看到博友的留言，头像，呢称，页可以编辑留言，如QQ留言、编辑、删除等，左边还有友情链接，查看留言，填写留言，添加留言等，点击会跳到相关的链接。在此页面。你可以随时浏览到博友的不同心情，随时可以看到最新动态，同样通过友情链接，可以看到不同的好友，还有喜欢的网站。图七 填写留言页填写留言页如上图 7，填写留言页左边主要是图片，用来美化页面。 用到了鼠标经过图像，图像导航条，更生动，右边就是相关的填写留言，昵第9页共16页华东交通大学理工学院课程设计报告称，地址，联系方式，填写留言内容，提交等等。下面还插入了一下闪图小猫，更具生动可爱。 博友页的设计图八 博友页博友页如上图8，博友页左边有最近访客，显示博友头像，呢称，可以查看博友资料，取消关注等等。上面有好友动态，心情等等。下面有评论，可以查看，评论，转发，右边有博友管理，还有博友分类，添加，查找，删除，是否公开等等。第10页共16页华东交通大学理工学院课程设计报告第3章 页面布局与规划页面布局与规划在网页制作中，有许多的术语，例如： CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于 HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的 HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。所有的设计第一步就是构思， 构思好了，一般来说还需要用 PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。实际的页面局部图如下：第11页共16页华东交通大学理工学院课程设计报告第4章 相关代码<td><img src="images/w.jpg" width="12" height="12"><spanclass="STYLE4"onMouseDown="MM_openBrWindow('riji.html','','')">[<u> 个人日记</u>] 你是自己，你了解多少？(0/5) <img src="images/j.jpg"width="13"height="11"> 编辑更多</span></td></span></td><td><imgsrc="images/w.jpg"width="12"height="12"><spanclass="STYLE4">[<u>个人日记</u>]天天饮食的始终家常菜，你会会了吗？(4/7)<imgsrc="images/j.jpg"width="13"height="11"><divid="Layer42"><marqueescrollamount="7"behavior="alternate"loop="100"direction="left"height="100"width="760">网页设计课程设计个人博客网页人物1.jpg"border=2>网页设计课程设计个人博客网页人物2.jpg"border=2>网页设计课程设计个人博客网页人物5.jpg"border=2>网页设计课程设计个人博客网页人物6.jpg"border=2>网页设计课程设计个人博客网页人物7.jpg"border=2>网页设计课程设计个人博客网页人物8.jpg"border=2>第12页共16页华东交通大学理工学院课程设计报告网页设计课程设计 个人博客网页 人物12.jpg"border=2>网页设计课程设计 个人博客网页 人物11.jpg"border=2></marquee></div><tablewidth="55%"border="0"align="center"><tr><thscope="col"><divalign="center"class="STYLE5"> 友情链接</div></th></tr><tr><td><formid="form1"name="form1"method="post"action=""><selectname="menu1"onChange="MM_jumpMenu('parent',this,0)"><option 新浪博客</option><option 我要自学</option>p;pn=0&db=0&s=8&word=%CC%EC%CC%EC%D2%FB%CA%B3&fr=ala0">天天饮食</option>eavershili/"> 网页设计学习