班级网站设计报告.docx

班级网站设计报告.docx

《班级网站设计报告.docx》由会员分享，可在线阅读，更多相关《班级网站设计报告.docx（10页珍藏版）》请在冰豆网上搜索。

班级网站设计报告

湖南涉外经济学院

课程设计报告

课程名称:

报告题目:

学生姓名:

专业班级:

所在学院:

学生学号:

指导老师:

20年月日

摘要

网页已经成为网上设计的常用设计之一，有它不可取代的地位，而最常用的是基本网页布局，它在使用中要持久的维护，为了开发有维护，在使用时先由开发者在dreamweaver上开发网页和调试。

本课题要设计的是班级网页，在设计中了解网页设计的基本知识，设计出一个自己班的网页，在以后的学习中更加有基本的理论知识和应用经验。

在网页的设计中分工设计和管理，网页的基本布局，div+css的基本布局的把握，网页样式的持续利用性，使自己的班级网页更加好管理.

在设计好自己的网页后，在不同的浏览器中打开看最终效果，因为浏览器的不同网页显示的效果也是有差别的。

关键词：

班级网页；div+css布局；html5；

目录

一、设计开发内容6

二、设计网页目的6

三、设计网页的过程7

四、网页的部分代码8

五、结论与心得11

一．设计开发内容

1）开发工具

Addobe公司网页开发软件Dreamweavercs5.5：

DreamweaverCS5.5提供HTML、CSS视觉化编辑与原始码编辑同步的设计工具。

视频制作软件Flash8和flash8播放器，flash8开发动画软件利于开发自己的动画。

网站图片由photoshopcs5制作:

Photoshop的应用领域很广泛，在图像、图形、文字、视频、出版等各方面都有涉及。

网页预览在Firefox、IE9、360浏览器上通过,在不同的浏览器观看不同的效果。

网页布局以div+css为主，加了一些简单的javascript，认网页更加完美。

2）设计背景

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，而人们在网上获得知识大部分来自于网页，所以网页设计也变得很重要了，而我们已经学了一期的网页设计的基本知识，做这一次网页设计是为了更好的把理论与实践相结合。

3）自己班级网站

网站名字为我的班级，整个网站的色调定位为浅的绿色，包括背景、文字以及photoshop制作的图片都是以蓝色为主。

整个页面以简洁为主要特色。

简洁的绿色风情给人带来好的心情，又使人的观看不至于那么疲劳。

让人卸下一天的疲惫。

让人在自由随性的环境下做自己爱做的事。

给人带来轻松愉快的心情来浏览网页。

在我的网站中能了解我们班的基本信息，和学校信息，在喔的网站中加了一些学校链接和XX等常用链接。

二．网页设计目的

通过一个学期的网页开发课程的学习。

我们已经具备应用Dreamweaver开发简单网页的能力。

在这次班级网页设计中我的设计目的是：

1）熟练掌握班级网站网页设计的方法和流程；为以后的网页设计打下良好的基础，在以后的工作中，更能适应大型网页的开发。

2）通过综合运用HTML5和CSS3的相关技术在加上自己的学习设计一个具有实际使用价值、风格统一、大方美观的网站；在其中领悟和琢磨我的课本html5,css3,javascript网页设计，认书本知识与实际相结合，提高实战经验。

3）加强理论知识和技能综合运用能力的结合；在课堂上听老师讲的理论知识，在本次的网页设计中得到了充分的应用，有什么不懂的在课本上查找，在网上查阅，努力提高综合技能。

4）熟悉未来网站网页的设计流程和注意事项；我们的课本都是最新版的跟上了时代的潮流，利于以后工作的开发，在网上看一些大型网页时发现网页设计的目的很明确，网页要数的分工存储，分工管理，为以后的开发提高了很大的效率。

在自己以后的网页开发中要把自己的网页要数分好工，利于后期维护。

5）设计总的目的在于让自己加深对网页制作的基本知识的理解，运用和提高网页制作的技能，通过真实的网页设计工作任务，让自己能设计出有一定水平的网页并具有解决实际问题的能力，掌握实际的网页制作开发流程和开发方法；在以后的开发中便于自己开发一个美观的网页。

三．设计过程

1）网站模块

班级首页班级简介最新动态教师介绍班级成员班级风貌作者简介

2）网页的页面分析

1,主页：

在主页当中把几个分页面的内容用表的形式排列出来，在连接到各个分页上去，本网站的才用文字与图片来连接。

2，分页：

每个分页各有千秋，但总体上是启用了主页设置，认页面更加的统一。

3，网站：

在网站的建设当中要考虑到建设网页的需求，要适当的链接。

更加丰富自己的网站。

3）网页设计的基本内容

在使用dreamweaver编辑网页的框架和主体内容；主页我使用使用DIV嵌套布局页面。

使用CSS3代码来设计网页的风格，首页风格和分页风格,做到统一整个网页的视觉效果,是自己的班级网页有自己的网页文化.

在自己网站中自己设计站点合理、管理有序、大小也合适，首页命名简单明了，存放位置自己都有特定的位置；

自己的网页设计至少有三层结构，总页面数在10页以上；网站中的超链接也较为合理,是用户用起来更加的方便.

自己在网页中有版权说明；并且有版权标记符号,使用户能直观的看到.

四．网页的部分代码

在网页设计中重要的要数网页代码了,在自己的班级网页中我利用很多的网页代码,在此我简单的例句一些代码如下:

*{padding:

0;margin:

0;}

body{font-size:

13px;line-height:

160%;color:

#666;}

a{text-decoration:

none;color:

#333;}

h3{background:

#666;color:

#f6f6f6;padding:

0px10px;font-size:

13px;}

p{text-indent:

24px;}

h2{font-size:

18px;font-weight:

bold;text-align:

center;border-bottom:

1px#cccsolid;}

#outer{width:

760px;margin:

0auto;}

#top{height:

80px;}

.top_nav{height:

20px;text-align:

right;line-height:

20px;padding-right:

5px;font-size:

12px;}

.logo{width:

200px;float:

left;}

.logoa{width:

200px;height:

60px;display:

block;}

.banner{width:

560px;float:

right;text-align:

right;}

.bannerimg{width:

560px;height:

60px;border:

none;}

#nav{height:

30px;margin-top:

5px;}

#navul{list-style-type:

none;background:

#333;color:

#f6f6f6;}

#navulli{float:

left;width:

100px;text-align:

center;line-height:

30px;height:

30px;border-right:

1pxsolid#555;}

#navullia{display:

block;width:

100px;height:

30px;color:

#f6f6f6;}

#navullia:

hover{background:

#666;color:

#fff;font-weight:

bold;}

#content{margin-top:

10px;}

.left{width:

220px;float:

left;margin-right:

10px;}

.left_con{padding:

10px;}

.notice{}

.index_con,.index_ad{border:

1pxsolid#666;}

.bzr,.bwcy,.new_article,.index_article,.link,.gbook{margin-top:

10px;}

.new_articleul{padding-left:

15px;list-style-type:

circle;}

.new_articleulli{border-bottom:

1pxdotted#ccc;}

.bzrimg{width:

130px;height:

140px;}

.right{width:

530px;float:

right;martin-bottom:

10px;}

.right_con{padding:

10px;}

.bwcy_gunimg{width:

122px;height:

120px;}

.bwcy_gunul{list-style-type:

none;}

.bwcy_gunulli{float:

left;margin:

02px;}

.index_articleul{list-style-type:

none;padding-left:

5px;}

.index_articleulli{border-bottom:

1pxdotted#ccc;}

.index_article_l{width:

260px;float:

left;}

.index_article_r{width:

260px;float:

right;}

.dt_l{width:

260px;float:

left;}

.dt_r{width:

260px;float:

right;}

.dt_l,.dt_r{overflow:

hidden;}

.dt_lul,.dt_rul{list-style-type:

none;padding-left:

0px;}

.dt_lulli,.dt_rulli{white-space:

nowrap;border-bottom:

1pxdotted#ccc;height:

30px;line-height:

30px;}

.teacher_listul{list-style-type:

none;}

.teacher_listulli{float:

left;margin:

5px;}

.teacher_listulliimg{border:

none;width:

115px;height:

120px;}

.bjfm{text-align:

center;}

.bjfmimg{width:

450px;height:

350px;border:

none;padding:

2px;}

.articles{}.art_con{}

#footer{padding:

10px30px;margin:

10px05px0;border-top:

5pxsolid#333;text-align:

center;}

这一些是一些css样式,我存储在一个特定的文件夹下,便于管理,集中调用,易于后期修改.

下面是一些网页代码,如html5等,代码如下:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

设为首页|收藏本站