(班级网页静态制作.docxVIP

班级静态网站设计1.概述??????? 本次静态网站设计类型为班级网站，题目为“2010级计算机科学与技术1班”，其整体设计以绿色为主调颜色，更以蓝天、白云、树叶以衬托出“和谐”与“宁静”的主题，再以翻开的书本样式作为背景图，构造出10计1班在一个幽静的环境中翻阅着这本回忆录的意境。另外，此网站导航栏设“主页”、“动态”、“风采”、“学习”、“交流”、“资源”、“联系”共7项，在构造意境的同时不忘其实用性。??????? 静态网页源文件共计占用磁盘空间12MB，主要使用Dreamweaver和Photoshop工具制作。已实现网页有四个，其中首页占一页，动态、风采、资源的子页面各占一页。??????? 静态网页课程设计由本人从2012.11.16至2012.11.20共耗时五天独立完成。?2.详细设计2.1网站结构说明??????? 网站从内容上划分可分为六个模块，分别是“动态”、“风采”、“学习”、“交流”、“资源”、“联系”，而网站会再对每个模块进行细化划分，具体划分方法可见图1。?图1 网站内容结构图??????? 本次内容模块主要从实用性出发，力图将班级各方面的内容从网页中展示出来，方便班级中的每一个成员浏览，方便以最快的速度从网站中获取所需的内容。??????? 我们从“动态”模块中获得班级的必威体育精装版资讯，包括活动通知、教务通知及其它的通知，也可以查看网站的必威体育精装版动态，包括班级微博所显示的内容，同学们的语录，及网站的留言。从“风采”模块中查看校、院、班级曾举办或正在举办的活动，可以查看我们班中的每一个成员，或者是小组，甚至是整个班级的荣誉。从“学习”模块中，可以关注到班级专业发展的各种学科的资讯，还有现在上课或课程设计时的学科任务通知，还可以在本模块中的“作业讨论”分支与大家讨论各学习上的知识。从“交流”模块中，我们可以讨论就业、娱乐和情感等方面的内容，形成一个良好的互动的气氛。我们还可以方便地从“资源”模块中获取到在班级成长过程中的竞赛、娱乐、学科、会议、活动等资源。最后，本网站还提供“联系”模块，我们可以以最快的方式获得与各干部、同学、老师的联系方式。?2.2首页设计说明（index.html）（1）首页的设计效果：图2? 首页设计效果图??????? 网页的意境及实用性已在说明书前面部分提及到，这里就不再重复了，现从网页的布局方式观察，如图2所示，首页由四大模块组成，第一模块，左上角的LOGO，作为一个网页，一个班级的标志，凝聚了我们班的一切的“CST”样式标志。第二模块，右上的导航栏，也称菜单栏，让浏览者可以方便地链接到网页各块的内容。第三模块，相当于一个便民服务的模块，其中由首页的登陆框，班级公告及近期班级里面需要做的任务几个小模块组成。第四模块，首页主内容，首先是一副以班级成员组成的图片放在模块顶部，象征着班级的团结，从另一种角度去想也是可以作为对班级的宣传，然后模块中心是班级动态，班级活动两块内容，是前面所提及到的网站内容结构中的模块分支，在这里可以进行超链接，方便到关注网页的核心内容，模块的底部则也是以图片为主要内容，从图片样式中可以展示出我们班的和谐。（2）首页的关键设计说明：1、? 网页布局图3? 网页布局设计图??????? 显然，本网页可由多个分块明显的div块拼合嵌套而成，首先，在div的设计上，因为需要使主页核心模块偏左显示，所以先使用了whole_div作为总框架，并将其position属性设为relative，再将main_div嵌套至whole_div中，然后将其position属性设为relative，将margin-left属性设为0，即使左外边距为0而实现模块左偏功能。?????? 至于main_div中的top_div及center_div则是兄弟模块，同是将position属性设为relative，固定宽度，再将float属性设为left，实现了模块上下排版的样式，同时，两兄弟模块的间距可通过margin属性进行调整。而在top_div中的logo_div和menu_div，center_div模块中的center_left_div和cneter_right_div几个模块的布局也使用了同样的思想，这里也不再累述了。2、叶子的装饰：???????由首页效果图可见，叶子（图片）会出现在导航栏的附近，这是使用了position属性的absolute值，将这些叶子绝对定位，而这些叶子（图片）的属性的父标签是main_div的，这样就可以将叶子的摆放跨过top_div和center_div这两个标签区域，具体代码如下：divid=main_div??? divstyle=position:absolute; z-index:1; left:228px; top:0px;?????????