网页设计个人博客课程实验报告.doc

课程设计实验报告 网页设计姓 名： 课程题目：个人博客专 业：软件工程班 级：08421学 号：指导老师： 目录摘要21. 课程设计目的与任务3 1.1课程设计目的3 1.2课程设计任务42. 开发环境4 2.1硬件环境42.2软件环境43. 总体设计63.1功能概述63.2系统流程64. 详细设计84.1页面设计84.2素材制作84.3页面布局84.4页面效果图95. 个人总结12摘要：随着互联网技术的快速发展与应用，很多网络用户希望在网络平台上更多的展现自己的个性，更方便的与人互动交流，博客被越来越多的人选择学习和交流的工具.博客的内容丰富多彩，有对其他网站的超链接和评论，也个人的构思，还有新闻日志、照片、诗歌、散文等。博客具有自主性、开放性、互动性和共享性，是个很好的交流的渠道。它已经成为简单有效的提供网络用户之间进行在线交流的网络平台，通过其可以结交更多的朋友，表达更多的想法，使用方便快捷。个人博客的发展已经成为广告商业的拓展的重要领域. 本系统是个实用的个人博客网站，及博客、相册、留言版、链接等于一身。未注册的用户（访客）可以浏览文章，发表评论及留言。本文还简单介绍了博客的概念、发展前景、特点的功能等。系统最终的目的是简单的介绍个人博客的总体设计模式和系统的实现。关键词： 主页 博客 日志 相册1.课程设计目的和任务1.1课程设计目的a:通过网页设计课程的理论知识和实践技能，分析和解决计算机应用的时间问题，提供网页设计与制作能力，掌握发布一个网站的操作过程。b：设计一个既可以让用户拥有自己的自由空间，又可以与其他用户互动的个人博客网站.并且可以通过文字、图片和链接，将个人工作、学习、生活等内容全方位的展示各众人。访客也可以浏览文章，发表评论和留言给自己。1.2课程设计任务运用Dreamweaver网页开发工具制作一个个人博客网站，此网页采用HTMl模板布局模式，表格框架结构，用CSS样式美化页面.组成。网页包括 BOLG-Enter、主页、日志、相册、个人资料及留言版。游客可以方便的了解到自己的个人博客2.开发环境2.1 硬件环境 个人电脑一台，pc机环境2.2软件环境1）WindowXP及以上系统2）dreamweaver CS4网页开发工具。DREAMWEAVER Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点： 一、 难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来； 二、 页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在DREAMWEAVER之前，现在我无意说DREAMWEAVER已经实现网页设计师的梦想，但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。 Dreamweaver CS4Dreamweaver CS4的界面几乎是做了一次脱胎换骨的改进，从中看到了更多的设计元素，让DW也稍稍带着点苹果的味道。如果说VISTA和OFFICE 2007创造了软件界面设计的新纪元，那么Adobe相当于取代了苹果的设计地位而紧随MS之后。唯一的区别就是，MS老是抄人家苹果的（汗一个，微软的Fans别砸我），而Adobe却是实实在在的自己创造，设计界的老大地位实至名归 布局按钮：这个按钮似乎和下方的代码、分割、设计按钮功能重复，目前还不明白DW的意图，唯一增加的新功能是垂直分割，让代码和设计界面以垂直对比的方式呈现。 精简设计：它提供了更多的可视区域，同时可以把右边的菜单收缩到只剩下图标。对于习惯了Adobe其他设计软件的朋友来说，这的确是非常贴心的设计。 应用程序开发增强：左上方是和数据相关的面板，包括数据库面板、数据绑定面板和行为面板；左下方则是文件与资源相关的面板，包括文件面板、相关资源面板、代码收集器等；右边则是设计相关面板，包括插入面板、CSS样式表面板、AP元素面板（用来为浮动层定位）。应该说这是一个万金油布局，几乎适用所有的开发者，同时，它也把大部分菜单展示在用户面前，其他的七种布局可以说只是在这个基础上进行一些排列和隐藏。 在下方的文档面板上，DW新增加了一个实时预览功能Live View。它的作用是在DW窗口中实时查看代码的效果，包括Javascript特点。Photoshop CS3图片处理工具Photoshop CS3全称Adobe Photoshop CS3 Extended 也称作为Photoshop 10.0 （。 Adobe Photoshop是公认的最好的通用平面美术设计软件。由Adobe公司开发设计。其用户界面易懂，功能完善，性能稳定，所以，在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。 Photoshop的专长在于图像处理，而不是图形创作。有必要区分一下这两个概念。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形，这类软件主要有Adobe公司的另一个著名软件Illustrator和Micromedia公司的Freehand。3.总体设计3.1功能概述: 博客系统开发的目标是提供网络用户之间进行交流的网络平台，通过个人博客结交更多的朋友，它可以随时的发布信息。供访问者浏览.3.2 系统流程：前台页面流程： BOLG-Enter首 页相 册个人资 料留言版日 志访问流程图：博客访问者首 页浏 览 相 册浏览个人资料浏 览 日 志留 言 板发表评论发表留言4.详细设计4.1页面设计实现方法：采用HTMl模板布局模式，表格框架结构，用CSS样式美化页面.4.2素材的制作实现方法：运用photoshop CS3处理素材达到规定的要求.导航的制作未处理前：处理后：其他材料的制作 （略）CSS样式代码：body background-color: #9CF;margin: 0px;table background-color: #FFF;.x1 background-color: #FFF;background-image: url(./image/bg1.jpg);background-repeat: no-repeat;.x1 table tr td font-size: 12px;color: #09F;text-align: center;.x2 background-image: url(./image/gb7.jpg);background-repeat: no-repeat;background-color: #FFF;p font-family: 楷体_GB2312;font-size: 20px;line-height: 200%;color: #000;font-weight: bold;font-style: italic;text-align: left;.x3 background-color: #FFF;background-image: url(./image/bg2.jpg);background-repeat: no-repeat;background-position: right;.centerbg background-color: #FFF;background-image: url(./image/2c488b36ef4991b7a71e120d.gif);background-position: right bottom;background-repeat: no-repeat;.MATERIALBG background-color: #FFF;background-image: url(./image/BG.gif);background-repeat: no-repeat;background-position: left bottom;.biaogegb background-color: #FFF;background-image: url(./image/biaogebg.jpg);background-repeat: no-repeat;background-position: center;font-family: 方正舒体;color: #000;font-size: 17px;.messsagebg background-color: #FFF;background-image: url(./image/biaogebg.jpg);background-position: center;background-repeat: no-repeat;font-family: 华文仿宋;font-size: 16px;.x4 background-color: #FFF;background-image: url(./image/bg2.jpg);background-repeat: no-repeat;background-position: center top;font-family: 楷体_GB2312;font-size: 16px;font-weight: bold;color: #333;.x5 background-color: #FFF;background-image: url(./image/gb8.jpg);background-position: right bottom;background-repeat: no-repeat;4.3页面布局：180*1000250*600100*750500*75020*1000布局框架代码：4.4页面效果图模板效果图：模板代码： 更改我的头像 编辑个人资料 装扮我的主页 所在院校：西电长安学院 生        日： 1988 - 02 - 02 家        乡：陕西省武功县 相 册 查看全部 日 志 查看全部 被点名了 简历如何填写 现在西安活下去，必须看 更多>>   版权所有 翻版必究08421024 软件工程 BOLG-Enter效果图首页效果图：相册效果图个人资料效果图：留言版效果图5.个人总结：本学期的网页课程设计，开展动态思维训练教学活动，对我们学生来说，可以激发学习兴趣，调动学习的自觉性，自己动脑、动手、运用网络资源，结合教材及老师的指导，通过自己的实践，创作出积聚个人风格、个人的个人网页。总体来说，整个学期的学习过程，我学会了很多知识，虽然过程比较艰辛，但是在internet领域中，有了一个展示自我的空间，我觉得很开心、很有成就感。作为网页设计的初学者，我对网页设计非常感兴趣，我一心想设计出一个美观、实用、内容丰富的个人网站。本学期的教改方案由以前的学生单纯接受知识为主动参与教学活动。在这样的压力和动力下，通过自己动手、动脑，通过网络资源，老师的指导，在不断的发现问题和解决问题的过程中学到了很多知识，也增强了我的创作能力和动手能力，在网页的设计过程中，从构思到设计、完善、维护，整个过程我都全身心的投入，是我真正的学到了网页设计的知识。在这次网页设计中，我不仅学到了很多关于网页设计方