356英国上市(品牌公司)官方网站-Spring App Loaded

child-01

child-02

child-03

XML 地图

案例三、班级网页设计与制作

一、学习目标:

通过一个小型班级网站的制作过程,了解网站规划、设计与网页制作工作流程及详细的样式代码。

制作网站前,一般先要进行前期调研,确定网站的主题、栏目和整体风格等。本章将介绍一个小型班级网站的制作过程,制作该网站需要的所有素材和资料需要大家提前准备。

二、班级网站规划设计

(一)网站定位

网站定位就是确定网站在互联网上扮演哪种角色,要向目标浏览者提供哪些有价值的信息,以及希望通过网站发挥什么样的作用等。班级网站的浏览者有该班级的学生、老师和家长,该网站将为学生、老师和家长建立一个相互沟通的平台。

明确了网站的浏览群体就明确了建站的目的,即满足浏览者的需求。

(二)网站需求分析

1.学生需求

发布班级公告,并对公告进行管理。

建立留言板,对留言进行回复、修改和删除等管理。

建立班级相册,能够建立不同主题的图片集,能够对每个主题、每张图片进行介绍并提供留言功能。

建立课程的讨论区域,能够针对某个主题进行讨论或完成老师布置的作业等。

2.教师需求

具有对学生的管理功能。能够发布通知。

能够发布课程的作业,参与学生的讨论,从而引导学生学习。

3.家长需求

能够提供汇聚指定学生的所有信息功能。能够参与学生的讨论。

具有留言功能。

(三)网站栏目设计

班级网站具有自身的特殊性,主要面向的是在校的学生,其中的内容包括学生的学习安排、日常活动、留言和讨论等信息。具体栏目的设计可以根据需要及分析同类网站的栏目设计来确定,图示是本实例网站的栏目结构,该图也称为网站导航图。

首页:进入班级网站的第一个页面,主要向浏览者展示日常访问和使用较多的信息,因此首页内容包含注册与登录区、班级日历、班级公告、班级新闻、课程表与个人展示区等。

留言本:供班级成员和其他浏览者进行交流、发表评论的板块,也显示以往的评论。

班级日志:记录班级重要活动的板块。

班级相册:用图片展示班级风采的板块,可浏览查看不同主题的照片。课程讨论:对课程的相关问题进行讨论的板块。

个人主页:指向一个班级内每个学生制作的关于自己的个人主页的列表关于我们:展示班级描述和班级宣言的板块。

图1-1网站导航图

(四)站点定义与目录管理

站点是存放和管理网页文档的场所,一个个网页文档通过超链接链接起来构成了站点。站点可以小到只有一个网页,大到包含成千上万个网页。制作网站的第一步是创建站点,为网站指定本地的文件夹和服务器,使它们建立联系。

站点实际上是一个文件夹,这个文件夹中包含很多子文件夹。站点文件夹中通常包含一些公共文件夹,用于存放访问和使用各网页的公共信息,如image文件夹用来存放图像信息,pages文件夹存放页面文件,CSS文件夹用来存放对全局的一些页面进行定义的外部样式表文件。除了这些公共文件夹,每个栏目应创建一个对应的子文件夹。需要注意的是,文件夹和文件的命名最好不要出现汉字。

(五)班级网站的风格设计

网站的风格设计是一个网站区别于其他网站的重点,风格设计包含品牌传达、氛围渲染、信息排版等视觉表现技术。对于班级网站而言,应当考虑如何体现班级特色,尽可能地基于简洁的原则进行风格设计。

简洁、明快和充满活力应是班级网站传递给浏览者的第一感觉。在配色设计上,因为浏览群体主要为年轻人,所以网站色彩以明快为主基调,页面的整体使用橙色偏绿的色调,突显一种朝气蓬勃的氛围,再配合白色背景营造大气的感觉。

三、网页设计与制作.

(一)页面布局

在拿到网页设计图时,要先分析网页的布局结构,了解各组成部分的尺寸大小。网页整体上可划分为上中、下3部分,其中上面区域主要为Logo、导航和Banner 3部分内容下面区域主要为底部导航。中间区域面积最大,为重要的信息栏区。在不同的页面中,该区域可根据需要再进行布局的划分。

对于这种结构的布局,可以使用Div层搭建主结构,主体代码如下:

XML 地图