网页设计个人博客课程实验报告doc.docx
- 文档编号:9489944
- 上传时间:2023-05-19
- 格式:DOCX
- 页数:7
- 大小:20.03KB
网页设计个人博客课程实验报告doc.docx
《网页设计个人博客课程实验报告doc.docx》由会员分享,可在线阅读,更多相关《网页设计个人博客课程实验报告doc.docx(7页珍藏版)》请在冰点文库上搜索。
网页设计个人博客课程实验报告doc
网页设计个人博客课程实验报告
课程设计实验报告网页设计姓名课程题目个人博客专业软件工程班级08421学号指导老师目录摘要21.课程设计目的与任务31.1课程设计目的31.2课程设计任务42.开发环境42.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)dreamweaverCS4网页开发工具。
DREAMWEAVERDreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
DREAMWEAVER、FLASH以及在DREAMWEAVER之后推出的针对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM梦之队,足见市场的反响和MACROMEDIA公司对它们的自信。
说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程,随着互联网Internet的家喻户晓,HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器),两者各有千秋。
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手,您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点
一、难以精确达到与浏览器完全一致的显示效果。
也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果,这一点在结构复杂一些的网页(如分帧结构、动态网页结构)中便可以体现出来;
二、页面原始代码的难以控制性,比如您在所见即所得编辑器中制作一张表格也要几分钟,但您要它完全符合您要求可能需要几十分钟,甚至更多时间。
而相比之下,非所见则所得的网页编辑器,就不存在这个问题,因为所有的HTML代码都在您的监控下产生,但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。
如何实现两者的完美结合,则既产生干净、准确的HTML代码,又具备则见则所得的高效率、直观性,一直是网页设计师梦想。
在DREAMWEAVER之前,FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器,但是它同样继承了所见即所得的种种劣性。
但是我说过这是在DREAMWEAVER之前,现在我无意说DREAMWEAVER已经实现网页设计师的梦想,但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。
DreamweaverCS4DreamweaverCS4的界面几乎是做了一次脱胎换骨的改进,从中看到了更多的设计元素,让DW也稍稍带着点苹果的味道。
如果说VISTA和OFFICE2007创造了软件界面设计的新纪元,那么Adobe相当于取代了苹果的设计地位而紧随MS之后。
唯一的区别就是,MS老是抄人家苹果的(汗一个,微软的Fans别砸我),而Adobe却是实实在在的自己创造,设计界的老大地位实至名归布局按钮这个按钮似乎和下方的代码、分割、设计按钮功能重复,目前还不明白DW的意图,唯一增加的新功能是垂直分割,让代码和设计界面以垂直对比的方式呈现。
精简设计它提供了更多的可视区域,同时可以把右边的菜单收缩到只剩下图标。
对于习惯了Adobe其他设计软件的朋友来说,这的确是非常贴心的设计。
应用程序开发增强左上方是和数据相关的面板,包括数据库面板、数据绑定面板和行为面板;左下方则是文件与资源相关的面板,包括文件面板、相关资源面板、代码收集器等;右边则是设计相关面板,包括插入面板、CSS样式表面板、AP元素面板(用来为浮动层定位)。
应该说这是一个万金油布局,几乎适用所有的开发者,同时,它也把大部分菜单展示在用户面前,其他的七种布局可以说只是在这个基础上进行一些排列和隐藏。
在下方的文档面板上,DW新增加了一个实时预览功能LiveView。
它的作用是在DW窗口中实时查看代码的效果,包括Javascript特点。
PhotoshopCS3图片处理工具PhotoshopCS3全称AdobePhotoshopCS3Extended也称作为Photoshop10.0(。
AdobePhotoshop是公认的最好的通用平面美术设计软件。
由Adobe公司开发设计。
其用户界面易懂,功能完善,性能稳定,所以,在几乎所有的广告、出版、软件公司,Photoshop都是首选的平面工具。
Photoshop的专长在于图像处理,而不是图形创作。
有必要区分一下这两个概念。
图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果,其重点在于对图像的处理加工;图形创作软件是按照自己的构思创意,使用矢量图形来设计图形,这类软件主要有Adobe公司的另一个著名软件Illustrator和Micromedia公司的Freehand。
3.总体设计3.1功能概述博客系统开发的目标是提供网络用户之间进行交流的网络平台,通过个人博客结交更多的朋友,它可以随时的发布信息。
供访问者浏览.3.2系统流程前台页面流程BOLG-Enter首页相册个人资料留言版日志访问流程图博客访问者首页浏览相册浏览个人资料浏览日志留言板发表评论发表留言4.详细设计4.1页面设计实现方法采用HTMl模板布局模式,表格框架结构,用CSS样式美化页面.4.2素材的制作实现方法运用photoshopCS3处理素材达到规定的要求.导航的制作未处理前处理后其他材料的制作(略)CSS样式代码body{background-color9CF;margin0px;}table{background-colorFFF;}.x1{background-colorFFF;background-imageurl../image/bg1.jpg;background-repeatno-repeat;}.x1tabletrtd{font-size12px;color09F;text-aligncenter;}.x2{background-imageurl../image/gb7.jpg;background-repeatno-repeat;background-colorFFF;}p{font-family“楷体“;font-size20px;line-height200;color000;font-weightbold;font-styleitalic;text-alignleft;}.x3{background-colorFFF;background-imageurl../image/bg2.jpg;background-repeatno-repeat;background-positionright;}.centerbg{background-colorFFF;background-imageurl../image/2c488b36ef4991b7a71e120d.gif;background-positionrightbottom;background-repeatno-repeat;}.MATERIALBG{background-colorFFF;background-imageurl../image/BG.gif;background-repeatno-repeat;background-positionleftbottom;}.biaogegb{background-colorFFF;background-imageurl../image/biaogebg.jpg;background-repeatno-repeat;background-positioncenter;font-family“方正舒体“;color000;font-size17px;}.messsagebg{background-colorFFF;background-imageurl../image/biaogebg.jpg;background-positioncenter;background-repeatno-repeat;font-family“华文仿宋”;font-size16px;}.x4{background-colorFFF;background-imageurl../image/bg2.jpg;background-repeatno-repeat;background-positioncentertop;font-family“楷体“;font-size16px;font-weightbold;color333;}.x5{background-colorFFF;background-imageurl../image/gb8.jpg;background-positionrightbottom;background-repeatno-repeat;}4.3页面布局180*1000250*600100*750500*75020*1000布局框架代码4.4页面效果图模板效果图模板代码更改我的头像编辑个人资料装扮我的主页所在院校西电长安学院生日1988-02-02家乡陕西省武功县相册查看全部日志查看全部被点名了简历如何填写现在西安活下去,必须看更多版权所有翻版必究[08421024软件工程]BOLG-Enter效果图首页效果图相册效果图个人资料效果图留言版效果图5.个人总结本学期的网页课程设计,开展动态思维训练教学活动,对我们学生来说,可以激发学习兴趣,调动学习的自觉性,自己动脑、动手、运用网络资源,结合教材及老师的指导,通过自己的实践,创作出积聚个人风格、个人的个人网页。
总体来说,整个学期的学习过程,我学会了很多知识,虽然过程比较艰辛,但是在internet领域中,有了一个展示自我的空间,我觉得很开心、很有成就感。
作为网页设计的初学者,我对网页设计非常感兴趣,我一心想设计出一个美观、实用、内容丰富的个人网站。
本学期的教改方案由以前的学生单纯接受知识为主动参与教学活动。
在这样的压力和动力下,通过自己动手、动脑,通过网络资源,老师的指导,在不断的发现问题和解决问题的过程中学到了很多知识,也增强了我的创作能力和动手能力,在网页的设计过程中,从构思到设计、完善、维护,整个过程我都全身心的投入,是我真正的学到了网页设计的知识。
在这次网页设计中,我不仅学到了很多关于网页设计方面的知识,也从中学会了关于网络、编程等方面的知识。
我从最初开始运用FrontPage设计网页,到后来运用Dreamweaver、Photoshop、fireworks等网络软件设计网页,完善网页。
在这个过程中,我通过自学教材,上网查询,学习了Dreamweaver、Photoshop、fireworks的网页设计软件的应用,学会了管理、维护自己的站点,以及一些简单插件和按钮、素材的制作等等。
在设计的过程中也出现了很多问题,但通过看书,上网查询,请教同学老师,不断的学习、解决提高,设计出的网页不论是外观还是内容,都在不断的进步、改善。
可以说是自己动手,不断实践的过程中,网页设计水平得到了很大的提高。
由于平时学习时间比较少,对于网页设计软件的强大功能运用得还不够。
在网页设计过程中,由于没有网页制作代码的知识,所以在设计也遇到了很大的麻烦,有时插入一个特效脚本也是麻烦。
在网页制作过程中,想提高设计水平,像个理想的网页,必须学会代码的运用,我将在以后的学习过程中不断的加强这方面的学习,希望老师能简单介绍一下代码的运用,让我也对它有个初步的认识,以后再加强学习也会有所提高。
总体来说,我通过本次的对网友设计学习,有收获也有遗憾、不足的地方,但我想,我意见迈入了网页设计的大门,只有我再认真努力的去学习,去提高,凭借我对网页的热情和执着,我将来设计出的网页会更加专业、更加完善。
也希望老师在今后的日子里多指导。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 个人 博客 课程 实验 报告 doc