班级网站设计报告

第2页共17页湖南涉外经济学院课程设计报告课程名称:报告题目:学生姓名:专业班级:所在学院:学生学号:指导老师:20年月日第11页 摘要网页已经成为网上设计的常用设计之一，有它不可取代的地位，而最常用的是基本网页布局，它在使用中要持久的维护，为了开发有维护，在使用时先由开发者在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制作的图片都是以蓝色为主。整个页面以简洁为主要特色。简洁的绿色风情给人带来好的心情，又使人的观看不至于那么疲劳。让人卸下一天的疲惫。让人在自由随性的环境下做自己爱做的事。给人带来轻松愉快的心情来浏览网页。在我的网站中能了解我们班的基本信息，和学校信息，在喔的网站中加了一些学校链接和百度等常用链接。网页设计目的通过一个学期的网页开发课程的学习。我们已经具备应用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""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>班级简介_我的班级网站</title><linkhref="css/style.css"type="text/css"rel="stylesheet"/></head><bodybgcolor="#CBE9EB"><divid="outer"> <divid="top"> <divclass="top_nav"> <ahref="#">设为首页</a>|<ahref="#">收藏本站</a> </div> <divclass="logo"> <objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="200"height="60"title="logo"><paramname="movie"value="flash/logo.swf"/><paramname="quality"value="high"/><paramname="vmode"value="transparent"/><embedsrc="flash/logo.swf"width="200"height="60"quality="high"pluginspage="/go/getflashplayer"type="application/x-shockwave-flash"vmode="transparent"></embed> </object> </div> <divclass="banner"> <divstyle="width:468px;float:right"> </div> </div> <divstyle="clear:both;"></div> </div> <divstyle="clear:both;"></div> <divid="nav"> <ul> <listyle="background:#111;"><ahref="index.html">首页</a></li> <li><ahref="about.html">班级简介</a></li> <li><ahref="news.html">最新动态</a></li> <li><ahref="teachers.html">教师介绍</a></li> <li><ahref="classmates.html">班级成员</a></li> <li><ahref="photos.html">班级风貌</a></li> <li><ahr