07_班级静态网页设计(份子钱版)[Web开发][2012-11-20] _Web前端

07_班级静态网页设计(小钱版)[Web开发][2012-11-20]

班级静态网站设计

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;">
                    <imgsrc="../image/Leaf1.png" />
    </div>
…(其它代码省略)
</div>

3、导航栏的相关实现：
        导航栏的实现在index.html中的menu_div标签中，先使用css中的将background属性设置为所需图片，至于七个模块的导航字体，则直接在html中输入，如下面代码：
<divid="menu_div">
<pid="menu_font_div">
            <ahref="index.html" style="text-decoration:none;"><spanclass="menu_font">主页</span></a>|
          <a href="News.html"style="text-decoration:none;"><spanclass="menu_font">动态</span></a>|
          …(省略)
            <spanclass="menu_font">学习</span>|
         ...(省略)
       </p>
</div>
        这里的“主页”、“动态”、“风采”、“资源”都使用<a>标签设置了超链接，同时，为了成功设置超链接标签的字体不改变原来的样式，使用css属性内嵌到该标签，将text-decoration设为none，防止改变预设的字体样式。而未实现超链接的字体（如上面代码中的“学习”）则直接用<span>标签设定，并且不加<a>标签。至于“主页”、“动态”、“学习”等模块文字的间距是通过css的menu_font类的padding属性来设定。

2.3 “动态”页中的子页设计效果说明（News.html）
（1）“动态”页中的子页的设计：

图4 动态模块的子页设计效果图

如图4所示，动态页的子页与首页有相似的地方，不同之处是中心内容，首先是中心内容的右上角处会有一个定位导航，然后，为了使文章与整体样式协调，标题使用土黄色，正文使用蓝色，再加上一幅经处理的图片，构成了动态页的子页，注意，这里的动态页并不是指内容是动态的，而是指班级的“动态”模块的最新资讯，活动类的信息，因此这子页的内容主题是“10计算机科学与技术1班清远班游”是符合“动态”模块的特点的。
（2）网页正文样式控制
将字体大小设定为18px，然后设置字体颜色为#8489c9，因为需要首行缩进，所以再加上text-indent属性，将值设为2em，两个中文字符的大小，将对齐方式设为左对齐text-align:left，再设定行高line-height为20px，最后，为了美观，设定padding的值，让文字避免与边框重叠。

2.4 “风采”页设计效果说明（Mien.html）
（1）“风采”页中的子页的设计：

图5 “风采”模块的子页设计效果图

本页的整体布局还是与主页相似，制作相似主页的主要原因是使它的整体样式协调，中心内容的右上角处会有一个定位导航，然后，为了使文章与整体样式协调，标题使用粉红色，如图5所示，本页的正文部分嵌入了视频，首先设置好父类div中的正文的内容，再使用
<embed src="url" quality="high" type="application/x-shockwave-flash"></embed>
语句将视频嵌入div中，在将视频嵌入成功后，在内容尾部加上可留言的样式，留言框的制作使用<input type="text">实现，然后在css中使用width与height设定留言框的高度，而提交按钮则使用<input type="button">实现，使用css中的text-align设定对齐方式。

2.5 “资源”页设计效果说明（Resource.html）

（1）“资源”页中的搜索子页的设计：

图6 “资源”模块的子页设计效果图

本页设置了搜索框放在中心内容模块的右上角，用户可以通过该搜索框方便地查找自己所需的资源。查找结果将会在下面显示，查找结果的样式，这里使用<table>标签来实现，查找结果的边框的样式使用了咖啡色来做主题，使其看上去与导航栏及左侧边栏相协调。

3.总结

    静态网站课程设计，在我看来，这是本学期开Dreamweaver课以来自主性最强的一次网页设计作业，这学期上Dreamweaver课，一直跟着老师的步伐走，学到了很多关于网页设计方面的知识，平时的小实验，一般是完成老师布置下来的任务，一般是仿照原来的样本来做出相应的网页样式效果，而这些天，终于可以尝试自己定义主题然后根据自己所想而进行设计啦。
      这次的静态网站设计，可以分为六个步骤，第一步是选定主题，第二步是主题内容构思，第三步是网站设计框架构想，第四步是网站素材搜集，第五步是编码实现，第六步是网页检查及说明书与总结的编写。
      第一步：选定主题。看见说明书要求，可以做个人博客，可以做班级网站，可以做商务网站，可以做音乐视频播放网站，也可以做学习资源网站，我看见说明书首选的是个人博客与班级网站，在这两方面选题，这是因为个人所需，一直有写博文的习惯，不过并没有试过自己给自己设计主页，完全可以借助这次的机会给自己设计一个博客网站，另一方面，班级网站，之前也有想过说给班上做一个班级网站，只是，也是因为时间的关系，也一直没有动手，这次借这个静态网站课程设计的机会，还是决定了选择班级网站这个主题了，这次的选题，并没有去考虑课程设计完成的难度，而仅仅是从个人需求这个角度去选题的。这一步在2012年11月16日完成。
      第二步：主题内容构思。选定是主题后，需要开始构思好主题的相关内容有哪些，这次使用思维导图方式的思考，一个个模块展开，这次是以实用性的角度去将这班级的主题分块的，以自己是一个班级成员的身份去考虑我进入这么一个班级网页里面需要用上哪些功能，自己平时在上学的时候需要去使用哪些功能，活动，学习，生活，班级荣誉，各种资源，还有少不了的各种最新资讯，还有平时同学们的沟通无法找到联系方式的问题，所以最后就将主题分为“动态”、“风采”、“学习”、“交流”、“资源”、“联系”这六个模块了。这一步在2012年11月16日完成。
      第三步：网站设计框架构想。在主题内容设定后，得开始思考这些内容大概需要一个怎样的框架去装载，心中有一个大概的网站样式，需要一个怎样的样式去实现这一主题，起初我是想到的是以简单为主调，简单即是美嘛，不过后来是因为无意浏览网页的时候，发觉有些页面的设计虽然没有心目中的那么简单，不过也不算是太花花绿绿，也符合自己想要的另一个思考，和谐，于是，就这样通过不断的参考修正自己心中的框架，确定下最后的主题为翻页式的“和谐与回忆”，并且，考虑好将每个子模块的内容是怎样装入这网页的样式中去的。这一步在2012年11月17日完成。
      第四步：网站素材搜集。根据自己所考虑的网站设计框架，开始上网搜集素材，并且有些必须的，自己使用Photoshop工具进行制作，将全部的素材搜集好，为下一步编码实现打好基础，另外，将所有的素材搜集好后，再使用Photoshop 先将网页在Photoshop中设计展示出来，让下一步只需要根据自己的设计结果进行制作就可以了。这一步在2012年11月18日完成。
      第五步：编码实现。在设计好样式，网站的素材搜集好的情况下，编码的实现相对就显得轻松了，当然，这是需要有一定的网页的编写基础，当遇到不懂的问题时，一般会先去查书，找找是否有自己所需要的功能，如果书籍找不到所需资料，就会上网找答案，这次课程设计，并没有太多的疑难杂症，因为也没有走到去请教别人的那一步了，我这次编写代码，是边编写边调试，编好一个小模块后就使用浏览器打开网页看是否自己所需的样式再根据需要进行调整或继续进行下一子模块的编码。这一步在2012年11月20日完成。
      第六步：网页检查及说明书与总结的编写。最后，在完成了编码工作后，为了尽量使自己的网页错误降到最低，我会将整个网页的内容与链接都检查一遍。然后，开始着写编写说明书，制作说明书所需要的图片素材，根据自己思路将说明书写下。最后，免不了的是一次课程设计的总结，总结是每次课程设计的必做项，因为它可以让我们反思整个制作过程，可以总结出这次的制作经验，可以从自己的这次制作中总结出下次制作改进的方法。这一步在2012年11月20日完成。
      最后，这次的网页课程设计总算是完成了，自己也没有很满意，因为只是实现了四个子页面，这也是由于近期学习任务的繁重，近期还是想将更多的时间花在一些自己更感兴趣和更为急迫的学习任务上。而这次的网页设计作品也有些缺陷，首先是网站的内容不够丰富，感觉虽然是按个人的需求进行了模块分类，不过好像还是缺了点什么，分类的方法还是不科学，我想如果可以进行问卷检查的话可以再从另外一些角度去分类，或者可以再上网搜寻科学的分类方法。还有的不足就是子网页的功能都是不能实现的，由于这次是静态网页设计，因为也就没有去思考如何去实现这些功能了，功能的实现，对于网站的制作来说必然是重要的一步，制作的产品是为了给大众使用，相当少的情况会仅用来欣赏的，子页的div分块也有点过于简单，完成得有点仓促。当然，批了很多自己的不足，本次的网站制作也是有能让自己感到满足的地方，在这个制作的过程，将自己的CSS知识与HTML知识巩固了一次，另外，成功将网站制作出来是很让人兴奋的一件事，毕竟是第一次看见自己自主制作的网页成品啦。

4.参考文献

[1] 《网页设计与开发》. 主编：王津涛　副主编：孟庆昌　出版：清华大学出版社　版次：2012年

3楼Shaw1210前天 12:46: 动态呢？需要用到哪些方面的内容

2楼ffff8965前天 11:27: 请问“网站内容结构图”用什么软件画的？很漂亮！

1楼han_yankun20093天前 09:32: 很好额。加油