《班级网页设计模板.doc》由会员分享，可在线阅读，更多相关《班级网页设计模板.doc（11页珍藏版）》请在金锄头文库上搜索。
1、班级网页设计模板篇一：班级网页静态制作班级静态网站设计1.概述本次静态网站设计类型为班级网站，题目为“20XX级计算机科学与技术1班”，其整体设计以绿色为主调颜色，更以蓝天、白云、树叶以衬托出“和谐”与“宁静”的主题，再以翻开的书本样式作为背景图，构造出10计1班在一个幽静的环境中翻阅着这本回忆录的意境。另外，此网站导航栏设“主页”、“动态”、“风采”、“学习”、“交流”、“资源”、“联系”共7项，在构造意境的同时不忘其实用性。静态网页源文件共计占用磁盘空间12MB，主要使用Dreamweaver和Photoshop工具制作。已实现网页有四个，其中首页占一页，动态、风采、资源的子页面各占一页。
2、静态网页课程设计由本人从至共耗时五天独立完成。2.详细设计网站结构说明网站从内容上划分可分为六个模块，分别是“动态”、“风采”、“学习”、“交流”、“资源”、“联系”，而网站会再对每个模块进行细化划分，具体划分方法可见图1。图1 网站内容结构图本次内容模块主要从实用性出发，力图将班级各方面的内容从网页中展示出来，方便班级中的每一个成员浏览，方便以最快的速度从网站中获取所需的内容。我们从“动态”模块中获得班级的最新资讯，包括活动通知、教务通知及其它的通知，也可以查看网站的最新动态，包括班级微博所显示的内容，同学们的语录，及网站的留言。从“风采”模块中查看校、院、班级曾举办或正在举办的活动，可以查
3、看我们班中的每一个成员，或者是小组，甚至是整个班级的荣誉。从“学习”模块中，可以关注到班级专业发展的各种学科的资讯，还有现在上课或课程设计时的学科任务通知，还可以在本模块中的“作业讨论”分支与大家讨论各学习上的知识。从“交流”模块中，我们可以讨论就业、娱乐和情感等方面的内容，形成一个良好的互动的气氛。我们还可以方便地从“资源”模块中获取到在班级成长过程中的竞赛、娱乐、学科、会议、活动等资源。最后，本网站还提供“联系”模块，我们可以以最快的方式获得与各干部、同学、老师的联系方式。首页设计说明（）（1）首页的设计效果：图2 首页设计效果图网页的意境及实用性已在说明书前面部分提及到，这里就不再重复了
4、，现从网页的布局方式观察，如图2所示，首页由四大模块组成，第一模块，左上角的LOGO，作为一个网页，一个班级的标志，凝聚了我们班的一切的“CST”样式标志。第二模块，右上的导航栏，也称菜单栏，让浏览者可以方便地链接到网页各块的内容。第三模块，相当于一个便民服务的模块，其中由首页的登陆框，班级公告及近期班级里面需要做的任务几个小模块组成。第四模块，首页主内容，首先是一副以班级成员组成的图片放在模块顶部，象征着班级的团结，从另一种角度去想也是可以作为对班级的宣传，然后模块中心是班级动态，班级活动两块内容，是前面所提及到的网站内容结构中的模块分支，在这里可以进行超链接，方便到关注网页的核心内容，模块
5、的底部则也是以图片为主要内容，从图片样式中可以展示出我们班的和谐。（2）首页的关键设计说明：1、 网页布局篇二：班级网站设计班级网站的设计摘要 步入21世纪以后，网络成了我们生活中必不可少的元素，于是各种各样的网站便如雨后春笋般地出现。在商业网站越来越多的今天，像学校网站、慈善网站等社会公益网站也不能忽视其发展，于是我们就以大学校园生活为主题制作了一个学校类的公益性团体班级网站。关键词 网站;建设;运行1 引言现代教育技术的发展深刻地影响着教育现代化进程和“科教兴国”战略的具体落实，也关系到在21世纪的国际竞争中，我国在人才竞争方面的地位。在面向21世纪的教育改革中，“现代教育技术是当代教育的
6、制高点，谁抢占了这个山头，谁就能在下个世纪中处于有利位置。”从具体的课堂教学来看，现代教育技术的运用有利于激发学生的学习兴趣、调动其内在的学习动力，有利于因材施教，提高课堂教学的教学效率、减轻师生负担，有利于提高教师个体教学的质量;有利于及时进行教学反馈与矫正，有利于促进学生的智力发展。在大学、高中、初中、甚至连小学的班级都开展了建设班级网站来进行网上信息交流。让学生们开发自身潜力提供机会均等；也是一种现代教育技术的创新。2 网站概述班级的简介计0327班是隶属于长沙民政职业技术学院电子信息工程系的一个班级,专业是信息管理。班级共有成员41，其中男生13名，女生30名。我们来自不同的省市，为共
7、同的目标走到一起，组成了一个班集体。计0327班设有班级委员会与团支部。班级网站和成员的简介计0327班的班级网站，整个网站由七个部分构成，分别是等构成。网站分为前台与后台两个模块，前台实现界面的功能,后台则实现数据库处理。选题的目的和意义我们是毕业班的学生，马上就将走上社会了，大家都各奔前程。以后大家见面的机会将少些，为了方面同学们信息沟通。创建班级网站便于同学们在网上进行信息交流以及增加课外知识的学习。3 开发模式、工具及环境开发工具针对以上要求，我选用了以下网页制作工具开发： 1、 Dreamweave MXDreamweave MX是专业网制作标准软件，新版本Dreamweave MX
8、更是集成了动态网页制作的功能，使之在网页制作领域地位无人可及。采用此软件来进行网页的排版和各页面的链接。2、Microsoft AccessMicrosoft Access是一种关系式数据库，关系式数据库由一系列表组成，表又由一系列行和列组成，每一行是一个记录，每一列是一个字段，每个字段有一个字段名，字段名在一个表中不能重复。采用此软件来创建数据库，而且进行数据库表与ASP进行链接。3、Active server pageASP 的英文全称是Active server page，翻译为中文就是动态网页。ASP 是对Web服务器的增强，ASP 使原来HTML 网页只是浏览器从Web页面的工作方式
9、有所改变。采用此软件来对网页进行动态增加、删除等功能。4、Flash MXFlash是近些年才出现的一种新的事物，他是由美国的MACROMEDIA公司推出的一款多媒体动画制作软件。它是一种交互式动画设计工具，用它可以将音乐，声效，动画方便地融合在一起，以制作出高品质的动态效果，或者说是动画。采用此软件进行页面的动画的制作，来增加页面的美观。5、Adobe PhotoshopPhotoshop 是优秀的图象处理软件,一直占据着图象处理软件的领袖地位,是平面设计、建筑装修设计三维动画制作及网页设计的必用软件。采用此软件来处理页面中的图片和文字。 开发环境要运行本系统,须提供如下环境： 1、硬件要求
10、CPU：Pentium733或以上之IBM 兼容机； 内存：128MB或以上容量；显卡：16MB或以上显存之AGP接口绘图卡； 硬盘：至少100MB剩余空间。2、软件要求操作系统：Microsoft Windows 20XX/XP/20XX简体中文版;信息服务器：Microsoft Internet Information Services /； 数据库： Microsoft Access 20XX/XP/20XX简体中文版； 开发工具：Microsoft Visual Studio ；Macromedia Dreamweaver MX 20XX简体中文版；文档工具：Microsoft Wor
11、d 20XX/XP/20XX简体中文版； 图片工具：Adobe Photoshop /CS简体中文版。4 概要设计 模块划分班级网站模块划分为:班级简介、班级相册、班级通信、班级留言、文乐空间、论坛社区、休闲天地等七个模块组成。 客户端功能描述与实现1、分类浏览浏览的方式分为两种:一种是游客只能浏览网站一部分内容,而当游客用户后注册则可以浏览全部的。2、信息查询 此功能模块应提供用户进行分类查询和高级查询。分类查询是根据内容的分类，如：班级同学联系信息、班级通知、同学留言查询等等。高级查询则可以让顾客自由选择查询条件，如按的日期查询，按时间查询等等。此功能模块是本网站中最基本，也是最常用的功能
12、，应尽量将此模块功能细化，界面尽量做到美观大方，以求最大限度的方便同学的查看。此功能所有身份都可用。 班级网站流程图图15 详细设计 主页图片处理图2如上图所示，用photoshop 软件来加工处理这张主页背景图片以及文字的修饰。 动画设计用Flash MX 软件来完成动画按钮的制作，通过用鼠标停留在图标时间长短然后圆圈渐渐变大然后渐渐变小，这样循环播放，给人产生一种幻想，就像石头掉进水池里产生一圈圈的水波，那水波只能向外扩散，而这个动画圆圈是由内向外，由外向内循环运动。以及班级网站四个不同颜色的动画字体在主页上自动循环播放。给主页增加了生动的感觉。如下图所示，为动画运行的一个连续过程。页面间
13、的链接1、实现代码如下： 班级简介班级相册班级通信班级留言文乐空间篇三：2-网页设计大作业word模板嘉应学院网页设计期末课程设计模板设计题目：我的个人网页 学 号：08080605018 姓 名：马建武院 系：电子与信息工程学院 专业班级：计科08-2 日 期：20XX-6-20一、设计思想随着网络技术的飞速发展，网络已经遍及每个人的身边，通过个人网页把自己展示在网络上，不仅可以获得更多的朋友，有用的信息，也是跟随时代发展，做走在时代前沿的一个有效方式，本网站旨在设计一个个性化的个人网站，展现自己的生活，学习，爱好等等信息，通过本网站把自己展示出来。 二、开发环境及软件Windows XP，
14、Macromedia Dreamweaver 8，photoshop等三、系统结构功能图、页面结构草图及部分页面截图四、部分代码（主要添加CSS代码） 1.添加首页背景音乐 2.运用框架3.图片滚动4.文本css样式 .s1 font-family: 宋体; font-size: 18px; font-weight: bold; color: #3333CC; text-decoration: blink; text-align: center; vertical-align: middle;text-indent: 2px; font-family: 宋体; font-size: 14px;
15、 font-weight: normal; text-decoration: none; letter-spacing: normal; text-align: left; .a1 background-position: center center; text-align: center; vertical-align: middle; .s2 font-family: 宋体; font-size: 18px; color: #0066CC; text-decoration: blink; text-indent: 2px; font-weight: bold;5.文字访问前、访问时、访问后的文字样式的变化 a:link c
