《Html+Css网站设计》实训任报告

安徽机电职业技术学院《Html+Css网站设计》课程实训说明书系（部）：信息工程系班级：软件3112姓名：指导教师：孙宇、张婷婷、王军2012~2013学年第一学期摘要熟悉和掌握计算机网页设计的基本技巧及网页制作相关工具软件等内容。培养我们利用计算机进行商务网页设计的基本思路和应用开发能力，提高我们的计算机文化素质。网页是世界上最有价值的不动产之一。人们在这个不足0.1平米的空间内投资达数百万美元。我们在老师的指导下学习了有关Html的相关知识。在这次Html的实训中，我学会了有关Html的更多的知识。实训中我们用的Dreamweaver工具开发网页。在实训中了解到网页开发的时需要分析网页的实际需求，根据要求开发实际的网页。网页的开发需要涉及到不止一种的开发工具，要用到的有PS或FW和Flash工具的使用，还要用到的有IE等浏览器的调试帮助。想要设计出美观新颖的浏览器需要的不知是止识还要有创新的思想。关键词：主页需求分析设计网页制作软件目录第一章概述..........................................................................................................................41.1本课题研究现状..............................................................................................................41.2本课题研究的意义..........................................................................................................51.3本课题研究内容..............................................................................................................5第二章站点规划...................................................................................................................6第三章详细页面设计与制作........................................................................................61.1资料搜集..........................................................................................................................61.2网页的设计展示...............................................................................................................61.3网页设计说明..................................................................................................................9第四章总结.............................................................................................................................9参考文献...................................................................................................................................11第一章概述1.1本课题研究现状1、比起几年前现今优秀的网站作品已经很多了。可行业现状依旧显得可悲不少网页设有些人因为使用了免费模版消化客户订的一种是部分设计师本人滥竽充数的行为造成的而更为普遍的原因是因为网页设计师的雇佣方造成的很多单位在招聘网站方面的员工时往往希望应聘人员什么技术都会。如果要求美术设计师精通网页制作和动画设计技术是比较合理的要求。然而却有很多企业抱着“程序设计人员精通美术设计”这样的愿望去招聘这就使得目前大部分网络公司都用程序员兼了网页设计一职。同时也少有人分得清楚网页制作与网页设计的区别“工种不分家”使每个在网页设计岗位的设计者不仅仅要考虑到美术设计与制作方面同时还要兼顾信息结构的规划甚至网站建设的策划等工作。这大大超出了网页设计师所应受理的职权范围然而这就是我们作为网页设计师所要面对的不足并且需要不断进取的方面。2、网页设计出现的历史并不长在我国网页设计正处于方兴未艾的时期。网页设计人员也是各大网络公司、设计公司争相礼聘的高级人才。在网上随意浏览一下就可以发现许多关于网页设计的站点并且在数以万计的主页中也不乏精良之作可见我国的网页设计已经有了相当的基础。但仍然可以看到许多网页设计人员并没有认识到技术与艺术结合的重要性或片面地理解了艺术设计的含义。因此在网上看到更多的可能是布局千篇一律、色彩搭配混乱、版式繁杂纷乱、表面五光十色实则空洞无物的设计。要解决这个问题提高网页设计的整体水平就需要设计师重视网页设计理解网页设计的内涵和特征并以此为基础进行创新性的工作。设计的探讨尤显不足至今未能提出系统的设计理论与指导原则。对网页设计进行系统性的研究。将视觉传达设计的基本原则创造性地应用于网页设计之中确实是当务之急也是促进我国网络业及网络文化发展的重要环节。1.2本课题研究的意义1、如今的互联网已经渗透到我们生活中的各个层面。网站内容既丰富又全面满足了各种不同需求的浏览者。正当网络作为第四媒体逐渐走向成熟和完善的时候网页设计业也已逐步脱离了传统广告设计的范畴形成特殊而独立的体系。同时这一现象也表明了我们对网页的视觉审美以及网站功能应用等多个方面的认知达到了新的高度。网站是信息的储存空间，从理论上来说套用相同的模板只要保证浏览者能够获取信息网站的功能就实现了。如同年以前的网页几乎是纯文字的页面没有什么所谓“设计”的概念可言。而从实际情况上看至今网络上依旧到处充斥着那种仅仅是通过信息堆砌而成的网页。2、网民们是为了不同的目的登陆相关的网站上查询信息的。试想一下一个需要阅读娱乐新闻的人是不会到体育网站上去寻找的而一个需要收集出国政策的人更是不会到游戏网站上去搜索的这是有关信息类别的不同选择。信息不同网站的气氛亦会不同。当浏览者进入娱乐网站中却感觉如同进入体育竞技场那么这个网站所传递出的信息概念则完全错误浏览者对网页的设计及网站本身都不会给予认可。也就是说网站的信息内容有着特殊的传播内涵与外沿，弄错了游戏规则可能会损失大量的浏览者。1.3本课题研究内容1、我们所做的是班级网页，网页主要是展示了我们班级的风采。在主页中有班级主页、班级相册、班级新闻、最新文学和班级留言等五个栏目。旨在加深同学们的交流和沟通。2、网站主题：我们的网站的主旨在于从各个方面全面的介绍我们的班级，展示班级，包括班级的个人资料、班级相片。另外，网站里还包括文化资料，建立一个展示班级形象的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都有其独特的个性，用以展示出不同的效果。最重要的是做出自己的风格，给浏览者以美得感受。第二章站点规划我们的网站共有5个主页面：班级首页、班级相册、班级新闻、最新文学、班级留言。每一个页面用不同的背景图片，以保证网站不同的页面风格，彰显班级中不同的色彩。如下图：我是用自己的姓名和学号命名网站名，用以方便存储和转发。网站页面采用不同色调，点缀不同的页面主题，以起到突出主题的作用，用以给人不同的感受。版面设计十分灵活、简洁，根据各部分内容的不同适当的自由设计。网页布局主要用Div和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了适当的flash透明动态图片，用以达到更好的浏览效果。第三章详细页面设计与制作1.1资料搜集网页设计的资料来源主要是老师提供的和在网上搜索到的一些资料。一些特殊效果主要是在网上搜索和老师提供的例子里面的，根据那些得来的资料在经过加工之后就能够为网页的展示效果提供亮点了。1.2网页的设计展示网页的设计主要是应用了较为普通的版式，给人以清晰明朗的感觉。下面为您展示班级网页中我所设计的部分：图1图2图3图41.3网页设计说明上面所展示的网页是我所设计的部分，期它的部分主要由小组其他成员在展示。在我所制作网页的部分中用到的主要有Flash动画、动态透明效果、水平滚动字条和普通的图片插入。在头标题的两边我分别加上了两个相同的Flash动画，它的效果是在网页打开后就会显示两棵小树从小树干长出叶子的样子，用以表现的是体现出文学的氛围。其中添加的动态透明图片效果是用以突出文章做表现的意境，这就和每篇文章所添加的图片的用以是一样的。在导航的右边和整个页面的下方我采用的是滚动字条，目的是用以避免网页的单一感。整个页面我才用的Div和表格的方式来布局。比如标题我就采用的是Div布局，用来限制文本和Flash的溢出，紧接着是下面的导航栏，我为了省事就将导航栏用表格布局了。下面的正文栏显示用了一个大的Div布局后在里面添加了两个表格布局来分别显示透明图案和文章。下面的文章展示栏也采用相似的布局格式。在页面的最下栏才采用的是表格的布局方式来收尾，留下的是联系方式和地址。整个页面采用的是统一的背景图片，背景是由一张紫色的花藤填充之后展现的效果，页面给人感觉较为明亮，是为了给人积极向上的感觉。第四章总结万事开头难，实训中遇到了很多问题，比如：插入的图片不符合规格，一下子把其他内容的框架挤开；插入的层太多，大一点的就把小一点的给覆盖掉了；插入的FLASH不能产生效果。总之问题一箩筐。实践出真知，原来自己还有那么多欠缺的知识。于是回归本源，先把课本上的东西弄通再谈其他。然后又到图书管里借了几本网页制作方面的书籍来参考。在对基本知识有了详细的了解之后，做起东西来就得心应手多了，知道引导页能过加映像之后，我决定为我的网页设计一个引导页。然后是主页和二级页面的设置。要注意,网上只能使用JPG和GIF两种图象格式，其他诸如BMP和TIF等很通用的格式都不能用在网上,因为它们太大了,但可以用图象软件进行转换，比如FW的图片编辑器。把准备在主页上出现的图象放进相应的目录里后.在一步一步的边学边做的过程中，看着心中的东西一点一点的出来，真的很有成就感。虽然自己的网页技术还差的远，但是回顾一下这周真的学到了很多的东西。网站材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻。同时，查询相关的书籍、百度和素材光盘等方式收集所需的文字资料,图象资料,flash动画和网页特效等，用以得来更加具有说服力的页面。要想做好自己的网站，能够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一个好的网站。参考文献1.文献出自期刊文章格式[编号].作者.文章题目.期刊名.年份.卷号.期数.页码.2.文献是图书时，书写格式[编号].作者.书名.出版单位.年份.版次.页码.