《Html+Css网站设计》实训任报告(共11页).doc

精选优质文档-----倾情为你奉上
精选优质文档-----倾情为你奉上
专心---专注---专业
专心---专注---专业
精选优质文档-----倾情为你奉上
专心---专注---专业
安徽机电职业技术学院
《Html+Css渗透到我们生活中的各个层面。网站内容既丰富又全面满足了各种不同需求的浏览者。正当网络作为第四媒体逐渐走向成熟和完善的时候网页设计业也已逐步脱离了传统广告设计的范畴形成特殊而独立的体系。同时这一现象也表明了我们对网页的视觉审美以及网站功能应用等多个方面的认知达到了新的高度。网站是信息的储存空间，从理论上来说套用相同的模板只要保证浏览者能够获取信息网站的功能就实现了。如同年以前的网页几乎是纯文字的页面没有什么所谓“设计”的概念可言。而从实际情况上看至今网络上依旧到处充斥着那种仅仅是通过信息堆砌而成的网页。
2、网民们是为了不同的目的登陆相关的网站上查询信息的。试想一下一个需要阅读娱乐新闻的人是不会到体育网站上去寻找的而一个需要收集出国政策的人更是不会到游戏网站上去搜索的这是有关信息类别的不同选择。信息不同网站的气氛亦会不同。当浏览者进入娱乐网站中却感觉如同进入体育竞技场那么这个网站所传递出的信息概念则完全错误浏览者对网页的设计及网站本身都不会给予认可。也就是说网站的信息内容有着特殊的传播内涵与外沿，弄错了游戏规则可能会损失大量的浏览者。
本课题研究内容
我们所做的是班级网页，网页主要是展示了我们班级的风采。在主页中有班级主页、班级相册、班级新闻、最新文学和班级留言等五个栏目。旨在加深同学们的交流和沟通。
网站主题：我们的网站的主旨在于从各个方面全面的介绍我们的班级，展示班级，包括班级的个人资料、班级相片。另外，网站里还包括文化资料，建立一个展示班级形象的平台。同时，网站里的每一个网页都有统一的风格，每一个网页的主题色彩都有其独特的个性，用以展示出不同的效果。最重要的是做出自己的风格，给浏览者以美得感受。

精选优质文档-----倾情为你奉上
精选优质文档-----倾情为你奉上
专心---专注---专业
专心---专注---专业
精选优质文档-----倾情为你奉上
专心---专注---专业
第二章 站点规划
我们的网站共有5个主页面：班级首页、班级相册、班级新闻、最新文学、班级留言。每一个页面用不同的背景图片，以保证网站不同的页面风格，彰显班级中不同的色彩。如下图： 我是用自己的姓名和学号命名网站名，用以方便存储和转发。网站页面采用不同色调，点缀不同的页面主题，以起到突出主题的作用，用以给人不同的感受。版面设计十分灵活、简洁，根据各部分内容的不同适当的自由设计。网页布局主要用Div和表格，用框架定位内容的大体结构，再用表格具体定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。另外，为了网页布局的协调，我加入了适当的flash透明动态图片，用以达到更好的浏览效果。
详细页面设计与制作
资料搜集
网页设计的资料来源主要是老师提供的和在网上搜索到的一些资料。一些特殊效果主要是在网上搜索和老师提供的例子里面的，根据那些得来的资料在经过加工之后就能够为网页的展示效果提供亮点了。

网页的设计主要是应用了较为普通的版式，给人以清晰明朗的感觉。下面为您展示班级网页中我所设计的部分：

精选优质文档-----倾情为你奉上
精选优质文档-----倾情为你奉上
专心---专注---专业
专心---专注---专业
精选优质文档-----倾情为你奉上
专心---专注---专业
图1
图2
精选优质文档-----倾情为你奉上
精选优质文档-----倾情为你奉上
专心---专注---专业
专心---专注---专业
精选优质文档-----倾情为你奉上
专心---专注---专业
图3
图4
精选优质文档-----倾情为你奉上
精选优质文档-----倾情为你奉上
专心---专注---专业
专心---专注---专业
精选优质文档-----倾情为你奉上
专心---专注---专业
网页设计说明
上面所展示的网页是我所设计的部分，期它的部分主要由小组其他成员在展示。
在我所制作网页的部分中用到的主要有Flash动画、动态透明效果、水平滚动字条和普通的图片插入。在头标题的两边我分别加上了两个相同的Flash动画，它的效果是在网页打开后就会显示两棵小树从小树干长出叶子的样子，用以表现的是体现出文学的氛围。其中添加的动态透明图片效果是