班级网站设计报告.docx

1、班级网站设计报告湖南涉外经济学院课程设计报告课程名称:报告题目:学生姓名:专业班级:所在学院:学生学号:指导老师:20年月日摘 要网页已经成为网上设计的常用设计之一，有它不可取代的地位，而最常用的是基本网页布局，它在使用中要持久的维护，为了开发有维护，在使用时先由开发者在dreamweaver上开发网页和调试。本课题要设计的是班级网页，在设计中了解网页设计的基本知识，设计出一个自己班的网页，在以后的学习中更加有基本的理论知识和应用经验。 在网页的设计中分工设计和管理，网页的基本布局，div+css的基本布局的把握，网页样式的持续利用性，使自己的班级网页更加好管理.在设计好自己的网页后，在不同的

2、浏览器中打开看最终效果，因为浏览器的不同网页显示的效果也是有差别的。 关键词：班级网页；div+css布局；html5； 目 录一、设计开发内容 6二、设计网页目的 6三、设计网页的过程 7四、网页的部分代码 8五、结论与心得 11一 设计开发内容1)开发工具Addobe公司网页开发软件Dreamweaver cs5.5：Dreamweaver CS5.5提供HTML、CSS视觉化编辑与原始码编辑同步的设计工具。视频制作软件 Flash8和flash8播放器，flash8开发动画软件利于开发自己的动画。网站图片由photoshop cs5制作: Photoshop的应用领域很广泛，在图像、图形

3、、文字、视频、出版等各方面都有涉及。网页预览在Firefox、IE9、360浏览器上通过,在不同的浏览器观看不同的效果。网页布局以div+css为主，加了一些简单的javascript，认网页更加完美。2）设计背景 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，而人们在网上获得知识大部分来自于网页，所以网页设计也变得很重要了，而我们已经学了一期的网页设计的基本知识，做这一次网页设计是为了更好的把理论与实践相结合。 3)自己班级网站网站名字为我的班级，整个网站的色调定位为浅的绿色，包括背景、文字以及photoshop制作的图片都是以蓝色为主。整个页面以简洁为

4、主要特色。简洁的绿色风情给人带来好的心情，又使人的观看不至于那么疲劳。让人卸下一天的疲惫。让人在自由随性的环境下做自己爱做的事。给人带来轻松愉快的心情来浏览网页。在我的网站中能了解我们班的基本信息，和学校信息，在喔的网站中加了一些学校链接和XX等常用链接。二 网页设计目的通过一个学期的网页开发课程的学习。我们已经具备应用Dreamweaver开发简单网页的能力。在这次班级网页设计中我的设计目的是：1)熟练掌握班级网站网页设计的方法和流程；为以后的网页设计打下良好的基础，在以后的工作中，更能适应大型网页的开发。2)通过综合运用HTML5和CSS3的相关技术在加上自己的学习设计一个具有实际使用价值

5、、风格统一、大方美观的网站；在其中领悟和琢磨我的课本html5,css3,javascript网页设计，认书本知识与实际相结合，提高实战经验。 3)加强理论知识和技能综合运用能力的结合；在课堂上听老师讲的理论知识，在本次的网页设计中得到了充分的应用，有什么不懂的在课本上查找，在网上查阅，努力提高综合技能。 4)熟悉未来网站网页的设计流程和注意事项；我们的课本都是最新版的跟上了时代的潮流，利于以后工作的开发，在网上看一些大型网页时发现网页设计的目的很明确，网页要数的分工存储，分工管理，为以后的开发提高了很大的效率。在自己以后的网页开发中要把自己的网页要数分好工，利于后期维护。5)设计总的目的在于

6、让自己加深对网页制作的基本知识的理解，运用和提高网页制作的技能，通过真实的网页设计工作任务，让自己能设计出有一定水平的网页并具有解决实际问题的能力，掌握实际的网页制作开发流程和开发方法；在以后的开发中便于自己开发一个美观的网页。 三 设计过程1）网站模块班级首页 班级简介 最新动态 教师介绍 班级成员 班级风貌 作者简介2)网页的页面分析1,主页：在主页当中把几个分页面的内容用表的形式排列出来，在连接到各个分页上去，本网站的才用文字与图片来连接。2，分页：每个分页各有千秋，但总体上是启用了主页设置，认页面更加的统一。3，网站：在网站的建设当中要考虑到建设网页的需求，要适当的链接。更加丰富自己的

7、网站。3)网页设计的基本内容在使用dreamweaver编辑网页的框架和主体内容；主页我使用使用DIV嵌套布局页面。使用CSS3代码来设计网页的风格，首页风格和分页风格,做到统一整个网页的视觉效果,是自己的班级网页有自己的网页文化.在自己网站中自己设计站点合理、管理有序、大小也合适，首页命名简单明了，存放位置自己都有特定的位置；自己的网页设计至少有三层结构，总页面数在10页以上；网站中的超链接也较为合理,是用户用起来更加的方便. 自己在网页中有版权说明；并且有版权标记符号,使用户能直观的看到.四 网页的部分代码在网页设计中重要的要数网页代码了,在自己的班级网页中我利用很多的网页代码,在此我简单

8、的例句一些代码如下:* 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:0px 10px; font-size:13px;p text-indent:24px;h2font-size:18px; font-weight:bold; text-align:center; border-bottom:1px #ccc solid;#outer width

9、:760px; margin:0 auto;#top height:80px;.top_navheight:20px; text-align:right; line-height:20px; padding-right:5px; font-size:12px;.logo width:200px; float:left;.logo a width:200px; height:60px; display:block;.banner width:560px; float:right; text-align:right;.banner img width:560px; height:60px; bor

10、der:none;#nav height:30px; margin-top:5px;#nav ul list-style-type:none; background:#333; color:#f6f6f6;#nav ul li float:left; width:100px; text-align:center; line-height:30px; height:30px; border-right:1px solid #555;#nav ul li a display:block; width:100px; height:30px; color:#f6f6f6;#nav ul li a:ho

11、ver background:#666; color:#fff; font-weight:bold;#content margin-top:10px;.leftwidth:220px; float:left; margin-right:10px; .left_con padding:10px;.notice.index_con,.index_ad border:1px solid #666;.bzr,.bwcy,.new_article,.index_article,.link,.gbook margin-top:10px;.new_article ul padding-left:15px;

12、list-style-type:circle;.new_article ul li border-bottom:1px dotted #ccc;.bzr img width:130px; height:140px;.right width:530px; float:right; martin-bottom:10px;.right_con padding:10px;.bwcy_gun imgwidth:122px; height:120px;.bwcy_gun ul list-style-type:none;.bwcy_gun ul li float:left; margin:0 2px;.in

13、dex_article ul list-style-type:none; padding-left:5px;.index_article ul li border-bottom:1px dotted #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_l ul,.dt_r ul list-

14、style-type:none; padding-left:0px;.dt_l ul li,.dt_r ul li white-space:nowrap; border-bottom:1px dotted #ccc;height:30px; line-height:30px;.teacher_list ul list-style-type:none;.teacher_list ul li float:left; margin:5px;.teacher_list ul li img border:none; width:115px; height:120px;.bjfm text-align:c

15、enter;.bjfm img width:450px; height:350px; border:none; padding:2px;.articles .art_con#footerpadding:10px 30px; margin:10px 0 5px 0; border-top:5px solid #333;text-align:center;这一些是一些css样式,我存储在一个特定的文件夹下,便于管理,集中调用,易于后期修改.下面是一些网页代码,如html5等,代码如下:班级简介_我的班级网站 设为首页 | 收藏本站 首页 班级简介 最新动态 教师介绍 班级成员 班级风貌 作者简介

16、以上的代码是我自己在编辑和编译中得到较为好的代码,在网页中也起到了很大的作用.五 结论与心得 在本次课程设计的整个过程中，要特别感谢自始至终给我提供帮助和指导老师，在老师的帮助下，自己的不断学习下，在结合书本和网上的资料，我终于完成了我的班级网页设计。在这次网页设计中，我收获了很多，了解了网页的基本布局，div+css的应用。Javascript的应用，虽然在制作中有很多的难点，但通过查看书籍和网上查资料基本的问题都解决了，有一种成功的喜悦。在这次设计中我明白了网页设计其实有点难，但只要我们了解了基本的网页设计用语，合理的存储自己编写的代码，更有效的利用，是编写效率大大的提高了,不断的编译自己的网页,使其更加能是观众接受,来达到自己设计网页的效果。在网页编写中要不断的学习，不断的完善和维护自己的网页。在自己的班级网页中有着简单的布局，有统一的背景色彩，有自己的班级网页风格。在以后的应用中还需不断的修改和完善。网页采用的链接,把个个分页有效的结合了起来,懂得合理的布局链接网页.六 参考文献1.精通html5，css3，javascript网页设计刘增杰等编著 清华大学出版社2.网页设计与编程魏善沛编著 清华大学出版社3.网页设计与配色实例解析郑国强等编著 清华大学出版社教师评语及设计成绩教师评语：课程设计成绩：指导教师：（签名）日期： 年 月 日