毕业论文-班级网页 

班级网页【摘要】：网页设计作为用户界面交互设计的延伸，是在新的媒体新的技术支持下实现一个全新的设计创作领域，设计创作页面要遵循网页特有的特点和结构思路，应具备实际可行性和外观的时尚性。本文主要介绍了班级网页存在的意义；班级网页存在的方法；在制作班级网页时所用到的软件及软件功能简介；班级网页制作的过程；对班级网页的总结；谢词组成。并结合丰富的色彩应用与网页设计理论，通过城市轨道交通控制专业轨控1204班班级网页制作实例，阐述网页设计的视觉效果和具体操作【关键词】：网页外观内容布局The

class

web

page

【

abstract

】

:

web

design

as

an

extension

of

the

user

interface

interaction

design,

is

under

the

new

media

technology

to

support

a

new

field

of

design,

design

creation

page

should

follow

page

unique

characteristics

and

structure

ideas,

should

have

the

practical

feasibility

and

appearance

of

the

fashion.

This

article

mainly

introduced

the

class

web

page

exist;

A

method

to

test

the

existence

of

class

web

page;

Used

in

making

class

web

page

introduction

to

the

software

and

the

software

function;

Class

web

page

creation

process;

The

author's

class

web

page;

Thanks.

Application

and

web

design

theory

and

combining

with

rich

color,

through

the

urban

rail

transit

control

professional

rail

1204

class

class

web

page

creation

as

an

example,

the

visual

effect

of

web

design

and

specific

operation

【

key

words

】

:

web

content

layout

appearance目录前言 第一章网页的概述 1.1网页设计相关术语 1.2网页制作的背景 1.3网页制作的意义 第二章网页制作常用软件介绍 2.1图像制作类软件 2.1.1photoshop工具介绍 2.1.2photoshop的功能 2.1.3photoshop的应用 2.2动画制作类软件 2.2.1flash的主要结构 2.2.2flash的功能及特点 2.3网页编辑类软件 2.3.1dreamweaver软件介绍 2.3.2.dreamweaver中CSS样式的应用 2.3.3CSS样式滤镜的参数 2.4快捷键的应用 2.4.1dreamweaver的快捷键 2.4.2flash的快捷键 2.4.3photoshop的快捷键 第三章网页制作过程 3.1网页构成要素 3.2网页设计原则 3.3网页设计步骤 3.4网页设计 3.4.1网页界面设计 3.4.2网页设计内容 3.4.3网页首页设计与页面 第四章心得体会 第五章谢词 第六章参考文献 前言在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位、学校信息化建设中的重要组成部分，从而倍受人们的重视。设计作用与目的通过班级网页，全面宣传，展示班级风采、优点与特色，发布班级的重大活动安排，增强同学之间的相互联系，提高办事效率。教育是一个综合性的工程，是一个复杂的充实、完善和塑造灵魂的过程。在这个过程中，教育者必须循序渐进地采用一定的方法、使用恰当的形式完成对被教育者的“雕琢”。当然，这其中自然就是对被教育者进行知识、道德、身体素质、审美能力等的综合培养；使之全面发展。各种各样的教育手段和教学方法，目前已经得到人们的认可、肯定。但我认为，相当程度上，大家对最常见的教学单位，教学班的文化建设，显得还不够重视。就此，与大家共同探讨一下班级的文化建，增强友谊，并把所学的知识应用在实践中。

第一章网页的概述1.1网页的相关术语学习网页设计与制作之前，首先要知道什么是网页。网页就是在互联网上供人阅读的文件，进入网站的第一个网页为首页，它是进入网站其他页面的“入口”在进行网页设计和制作的时，经常会遇到一些术语URLURL的英文全名为UniformResourceLocator，中文译名为统一资源定位器。它的功能是提供一种Internet上查找任何信息的标准方法，用户只要在浏览器中输入URL的内容，便可以得到它指定的相关文件。简单地说，URL就是WWW服务器主机的地址，也叫网址。使用最广的URL形式是用于表示网页位置的HYPERLINKhttp://。InternetInternet即互联网，也叫因特网，是将全球五大洲的各种电脑网络连接起来的全球性网络。Internet提供各种服务供用户使用，例如WWW服务（网页浏览服务）、电子邮件服务、网上传呼（如OICQ）、文件传输(FTP服务)、在线聊天、网上购物、网络炒股、联网游戏等。WWW和浏览器WWW的英文全名为WorldWideWeb，又称3W或Web，中文译名为万维网。WWW是Internet提供服务之一，它由遍布在Internet上的称为Web服务器的计算机组成，它将不同的信息资源有机的组织在一起，通过一种叫做浏览器的软件进行浏览。通过浏览器可以方便的看到Internet上提供的电子邮件、FTP、网络新闻组和电子公告栏等服务资源。目前，主要浏览器有InternetExplorer、火狐等，其版本越高，所支持的网页效果就越多，所以要经常升级。IP地址和域名为了使连接在Internet上的计数机能够相互通信，每台计算机都必须有一个唯一的“标识号”，即IP地址。IP地址是一个32位的二进制编码，其标准写法是4个十进制数，即将32位IP地址按8位一组分成4组，每组数值用十进制数表示，每组的范围为0-255，组与组之间用小数点分隔，例如3.由于IP地址的数字形式难以记忆和使用，人们引入了域名用以代替复杂的IP地址。域名是用英文来表示IP地址的。域名是由固定的域名管理组织在全球进行统一管理的，要获得域名需要各地的的网络管理机构进行申请。申请域名后，无论在哪里，只要在与Internet相连的浏览器的地址栏中输入域名即可登录相应的网站。HTML和DMTMLHTML的英文全名为HypertextMarkupLanguage，中文译名为超文本标记语言。HTML允许网页作者建立文本与图片详解呵呵的各种各样的网页，并把它发布到Internet上。DHTML就是一种即使在网页下载到浏览器之后，仍然能够随时交换的文字或图形文件。例如，当鼠标指针移至文章段落中时，段落文本能够改版颜色。1.2网页制作的背景我们读书是为了获得知识，现在我们学习了网页设计，当然能够做一个精美的网页。在此次毕业设计中，通过此次设计我们还要能够知道静态网页和动态网也的区别，掌握HTML语言的语法结构，并且能够使用HTML语言编写静态网页，控制网页中的文字，图片，超级链接，表格，表单，框架等，能够使用HTML语言实现移动的文字，制作多媒体页面，能够读懂复杂网页的源代码。我们能更加的了解Dreameaver强大的功能和更好的使用它，熟练使用网页设计工具Dreamweaver，能够使用Dreamweaver设计网页的框架，导航条，设置文字，图片，超级链接，滚动文字，弹出窗口的属性，能够使用Dreamweaver设计出比较复杂的网页，建立小型网站。熟悉使用fireworks和photoshop软件对图片进行处理。利用Flash制作和编辑具有较强交互性的矢量动画，可以方便地生成.swf动画文件，使文件可以嵌入HTML内，知道Flash动画文件较小，可以边下载边播放，避免用户长时间的等待。懂得MicrosoftAccess建立数据库，实现ODBC数据源的创立于连接的基本方法。学会使用ASP的基本语法、内建对象、内建组件以及ASP访问数据库的方法。在此基础之上实现一个界面美观，功能实际的班级网站。诚然，次此设计的班级网页，一方面是为了完成毕业作业，但更重要的是把我们所学到的东西用在具体的实践之中，所以，这次设计的目的也是要我们更好的掌握和使用好ASP的核心工具和技术，以便提高对网页知识的更深层了解。第三点也是最要的一点是，把我们在书本上学到的知识充分运用到此次设计之中。使我们的在书上学到的东西不仅仅停留在表面上，把这些东西都用在所要做的网页上面。以达到老师要求的效果和学以致用。Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，WorldWideWeb(简称WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。据估计，目前Internet上已有上百万个Web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛应用，Web站点向用户提供的服务将越来越丰富，越来越人性化。我们是毕业班的学生，马上就将走上社会了，大家都各奔前程。以后大家见面的机会将少些，为了方面同学们信息沟通。创建班级网站便于同学们在网上进行信息交流以及增加课外知识的学习。通过班级网页可以全面宣传，展示班级风采、优点与特色，发布班级的重大活动安排，增强同学之间的相互联系，提高办事效率，获得更多有用的资源，因此制作一个班级网页是很有必要的。1.3设计班级网页的意义班主任可以通过班级主页，及时发布班级简讯或公告，特别是要告知家长的，避免学生遗忘或传递信息时的错误。还可以通过成绩管理系统，使家长及时了解学生的学习情况。通过作业系统，使家长正确知晓学生该做的作业，同样老师间相互了解作业量，而不至于作业每天布置的不均衡。通过论坛或留言或电子信箱等，也可以让老师及时了解到学生的家庭情况，以及在家庭教育中存在的问题，取得教育共识。班级网站建设有利于教师信息素养的提高。会促使所有的任课老师去学习网络知识，即使不去做网站，但必须学会应用网络，能经常收集与自己教育教学相关的信息，能对信息进行分类储存和上传，能从实际出发考虑利用信息的最有效方式，努力地将其整合到自己的学习和教育教学策略之中，加快教师信息素养的提高。随着教育信息化的推进，各学校都开设了计算机课，学生的计算机应用能力也得到了较大的提高。但由于种种原因小学和中学都只有一个年级开设计算机教学课程，由于学生接触计算机的时间短，如家庭内没有计算机的话，就谈不上学生信息素养的提高。但如开设了班级网站，有着学生直接获益学习内容，那么就会引起家长的重视，家长会支持学生买电脑，老师也会鼓励学生上网，学生使用电脑的机会多了，在老师的正确引导下，自然会促进学生信息素养的提高。班级网站建设有利于学生网络教育。客观地说，网络开阔了学生的视野，极大的激发了他们的求知欲，探索欲，有利于培养开拓创新和追求科学的精神，提高了学习的积极性和主动性。但同样由于网络充斥着大量的淫秽、色情、暴力、凶杀、恐怖等不健康内容，而学生的世界观、人生观、价值观尚未形成，对有害信息缺乏基本的判断力。因此通过班级网络平台建设，把有益的内容充实到网上，也可以适当加入一些益智游戏，引导学生健康上网，而且给予学生一些权限，鼓励学生维护自己班级的网络平台，开设班级论坛或班级博客，以吸引学生上。这样既可以减少学生对网络的神秘感，又可以让家长和学生正确理解和应用网络，发挥网络的教育作用。班级网站建设有利于信息的积累老师可以有意识的先找一些内容贴到网上，然后指导学生查找，找到后也把内容上传到自己的班级网站上，那样，我们可以把不同网站上的内容根据预先做好的类别积累起来，既可以便于检索，节省时间，又可以学到很多的知识，而且可以照顾到家里没有上网条件的学生或计算机基础能力差的学生，当这个班级毕业后，又可以把这些宝贵的信息延续到下一个班级网站上。班级站建设有利于学生相互学习。班级网络平台的构建特别有利于学生间的相互学习，通过网站内的班级简讯栏目让学生写简讯，即可以及时报道班级里的好人好事，又让学生的写作得到了锻炼。学生的作文都可以上传到网上，既练习了打字，又可以让学生相互学习点评，也便于老师的讲评，提高班级整体的写作水平。老师可以出一些思考题，让学生在课余时间讨论，学生也可以把疑难问题挂到网上，让老师和学生指点。特别在假期里，有些学校布置了一系列活动，如定制假期计划、开展读书活动、写读书笔记等等，这些都可以让学生传到网上，供大家交流学习。班级网站建设有利于班集体的建设。传统的班级管理，主要是以班主任为中心，班主任一直是推动班级运行的主要教育者、组织者、承担着。随着网络的应运而生，在学生避免不了网络的情况下，我们何不借助于网络进行教育。而建设一个能结合班级实际情况的网站，是开展网络教育的最有效载体。网络是把双刃剑，虽然存在一些问题，但更多的是积极的一面，随着社会的发展，网络将逐步影响到我们生活的方方面面。作为当代的教育者，我们不能回避网络，而应该更好的教会学生正确使用网络，而班级网络平台的建设正是这一教育的切入点。当然开展网上教育也不是万能的，我们只有勇于在教育实践中探索，才能使教育和管理逐步适应网络时代的发展需要。第二章：网页制作常用软件的介绍2.1图像制作类软件图像处理软件是用于处理图像信息的各种应用软件的总称，专业的图像处理软件有photoshop的adobe系列；基于应用的处理管理、处理软件picasa等，还有国内很实用的大众型软件彩影，非主流软件有美图秀秀，动态图片处理软件有UleadGIFAnimator，gifmoviegear等2.1.1phoshop工具介绍位图：又称光栅图，一般用于照片品质的图像处理，是由许多像小方块一样的"像素"组成的图形。由其位置与颜色值表示，能表现出颜色阴影的变化。在PHOTOSHOP主要用于处理位图矢量图：通常无法提供生成照片的图像物性，一般用于工程持术绘图。如灯光的质量效果很难在一幅矢量图表现出来。分辩率：每单位长度上的像素叫做图像的分辩率，简单讲即是电脑的图像给读者自己观看的清晰与模糊，分辩率有很多种。如屏幕分辩率，扫描仪的分辩率，打印分辩率。通道：在PHOTOSHOP中，通道是指色彩的范围，一般情况下，一种基本色为一个通道。如RGB颜色，R为红色，所以R通道的范围为红色，G为绿色，B为蓝色。图层：在PHOTOSHOP中，一般都是多是用到多个图层制作每一层好象是一张透明纸，叠放在一起就是一个完整的图像。对每一图层进行修改处理，对其它的图层不含造成任何的影响。图像的色彩模式：（1）RGB彩色模式：又叫加色模式，是屏幕显示的最佳颜色，由红、绿、蓝三种颜色组成，每一种颜色可以有0-255的亮度变化。（2）CMYK彩色模式：由青色Cyan、洋红色Magenta、禁用语言Yellow。而K取的是black最后一个字母，之所以不取首字母，是为了避免与蓝色(Blue)混淆，又叫减色模式。一般打印输出及印刷都是这种模式，所以打印图片一般都采用CMYK模式。（3）灰度模式：即只用黑色和白色显示图像，像素0值为黑色，像素255为白色。（4）位图模式：像素不是由字节表示，而是由二进制表示，即黑色和白色由二进制表示，从而占磁盘空间最小。移动工具，可以对PHOTOSHOP里的图层进行移动图层。矩形选择工具，可以对图像选一个矩形的选择范围，一般对规则的选择用多。单列选择工具，可以对图像在垂直方向选择一列像素，一般对比较细微的选择用。裁切工具，可以对图像进行剪裁，前裁选择后一般出现八个节点框，用户鼠标对着节点进行缩放，用鼠标对着框外可以对选择框进行旋转，用鼠标对着选择框双击或打回车键即可以结束裁切。套索工具，可任意按住鼠标不放并拖动进行选择一个不规则的选择范围，一般对于一些马虎的选择可用。多边形套索工具，可用鼠标在图像上某点定一点，然后进行多线选中要选择的范围，没有圆弧的图像勾边可以用这个工具，但不能勾出弧度磁性套索工具，这个工具似乎有磁力一样，不须按鼠标左键而直接移动鼠标，工具头处会出现自动跟踪的线，这条线总是走向颜色与颜色边界处，边界越明显磁力越强，将首尾连接后可完成选择，一般用于颜色与颜色差别比较大的图像选择。魔棒工具，用鼠标对图像中某颜色单击一下对图像颜色进行选择，选择的颜色范围要求是相同的颜色，其相同程度可对魔棒工具双击，在屏幕右上角上容差值处调整容差度，数值越大，表示魔棒所选择的颜色差别大，反之，颜色差别小。画笔工具，同喷枪工具基本上一样，也是用来对图像进行上色，只不过笔头的蒙边比喷枪稍少一些。图案图章工具，它也是用来复制图像，但与橡皮图章有些不同，它前提要求先用矩形选择一范围，再在"编辑"菜单中点取"定义图案"命令，然后再选合适的笔头，再在图像中进和行复制图案。历史记录画笔工具，主要作用是对图像进行恢复图像最近保存或打开图像的原来的面貌，如果对打开的图像操作后没有保存，使用这工具，可以恢复这幅图原打开的面貌；如果对图像保存后再继续操作，则使用这工具则会恢复保存后的面貌。橡皮擦工具，主要用来擦除不必要的像素，如果对背景层进行擦除，则背景色是什么色擦出来的是什么色；如果对背景层以上的图层进行擦除，则会将这层颜色擦除，会显示出下一层的颜色。擦除笔头的大小可以在右边的画笔中选择一个合适的笔头。铅笔工具，主要是模拟平时画画所用的铅笔一样，选用这工具后，在图像内按住鼠标左键不放并拖动，即可以进行画线，它与喷枪、画笔不同之处是所画出的线条没有蒙边。笔头可以在右边的画笔中选取。磁性钢笔工具，它与磁性套索工具有些相似，所画的路径也会有磁性一样，自动会偏向颜色与颜色的边界，其磁性的吸力可以在右上角的"频率"调整，数值越大，吸力也越大。自由钢笔工具，与套索工具相似，可以在图像中按住鼠标左键不放直接拖动可以在鼠标轨迹下勾画出一条路径。2.1.2photoshop的功能从功能上看，该软件可分为图像编辑，图像合成，校色调色及特效制作部分等。图像编辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可以进行复制，去除斑点，修补。修饰图像的残损等，这在婚纱摄影，人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。图像合成则是将几幅图像通过图层操作，工具应用合成完成的，传达明确意义的图像，这是美术设计的必经之路，该软件提供的绘图工具让外来图像与创意很好的融合，成为可能使图像的合成天衣无缝。校色调色是软件中深具威力的功能之一，可方便快捷的对图像的颜色进行明暗，色偏的调整和校正，也可以在不同颜色进行切换以满足图像在不同的领域如网页设计、印刷、多媒体等方面应用。特效制作在该软件中主要由滤镜、通道及工具综合应用完成。包括图像特效创意和特效字制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由该软件特效完成。而各种特效字的制作更是很多美术设计师热衷于该软件研究的原因。2.1.3photoshop的应用Photoshop的应用领域大致包括：数码照片处理、广告摄影、平面设计、艺术文字及网页制作等，下面将分别对其进行详细介绍。数码照片处理：在photoshop中，可以进行各种数码照片的合成、修复和上色操作，如为数码照片更换背景、为人物更换发型、去除斑点、数码照片的偏色校正等，photoshop同时也是婚纱影楼设计师们的得力助手。广告摄影：广告摄影作为一种对视觉要求非常严格的工作，要用最简洁的图像和文字给人以最强烈的视觉冲击，其最终作品往往要经过photoshop的艺术处理才能得到满意的效果。平面设计：平面设计是Photoshop应用最为广泛的领域，无论是图书封面，还是招贴、海报，这些具有丰富图像的平面印刷品基本上都需要使用Photoshop软件对图像进行处理。艺术文字：普通的艺术文字经过Photoshop的艺术处理，就会变得精美绝伦。利用Photoshop可以使文字发生各种各样的变化，并且利用这些艺术化处理后的文字也可以为图像增加效果。网页制作：网络的迅速普及是促使更多的人学习和掌握Photoshop的一个重要原因。因为在制作网页时Photoshop是必不可少的网页图像处理软件，而且发挥的作用越来越大。2.2动画制作类软件动画制作软件是一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。新增功能如下:动态跨浏览器验证，更强大的CSS支持，内建的图形编辑引擎，安全FTP，增强对当今技术的支持，无缝整合外部文件和代码，紧密整合MM的其他工具，基本支持改良，增强代码编写工具，改进的设计开放环境。2.2.1flash的主要结构(1)舞台。舞台是在回放过程中显示图形、视频、按钮等内容的位置。在Flash基础中将对舞台做详细介绍。(2)时间轴。时间轴用来通知Flash显示图形和其他项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于，较高图层中的图形显示在较低图层中图形的上方(3)库面板。库面板是Flash显示在Flash文档中的媒体元素列表位置。(4)ActionScript:

ActionScript代码可用来向文档中的媒体元素添加交互式内容，例如可以添加代码以便用户在单击某个按钮时显示一幅新图像，还可以使用ActionScript向应用程序添加逻辑，逻辑使应用程序能够根据用户操作和其它情况采取不同的工作方式，Flash包括两个版本的ActionScript，可以满足创作者的不同具体需要，有关编写ActionScript的纤细信息，请参阅“帮助”面板中的“学习Flash中的ActionScript3.0”。2.2.2flash的功能及特点灵巧的绘图工具Flash本身具有极其灵巧的图形绘制功能，更重要的是他能导入专业级绘图工具，如MacromediaFreeHand、AdobeIllustrator等绘制的图形，并产生翻转、拉伸、擦除、歪斜等效果，还可以将图形打碎分成许多单一的元素进行编辑，并改变其颜色亮度。由于Flash提供具有保真技术的绘图工具，使图形边缘在经过一系列加工后仍会保持平滑。简单快速建立GIF动画、内建预览器、可将动画转成灰阶、可设定每个图片的透明色、可设定动画回转数、影格持续时间、显示位置。向量透明效果应用，Flash可以创建透明的图形，并可以任意改变层次间透明的不同效果，如透明度、倾斜度及透明的颜色等属性。具有动画效果的按钮和菜单，Flash采用精灵动画的方式，在Flash中可以随意创建按钮、多级弹出式菜单、复选框、以及复杂的交互式字谜游戏。物体的变形和形状的渐变，在Flash中产生物体的变形和形状的渐变非常容易，其发生完全由Flash自动生成，无须人为地在两个对象间插入关键帧。声音插入Flash3支持同步WAV(Windows)和AIFF(Macintosh)格式的声音文件和声音的连接，你可以用同一个主声道中的一部分来产生丰富的声音效果，而无须改变文件量的大小。自定义字体Flash可以处理自定义的字体及其颜色、大小、字间距、行间距、缩进等多种格式。在Flash创建的网页中，可以加入眼花缭乱的标题和动态的文本，而数据量非常小，比位图的下载速度还快。当然为了防止客户端字体短缺，你也可以将特殊字体转换为位图图形。拟传输Flash提供了一幅设置动画播放方式的图表，你可以在此设置你的目标Modem速度，如28.8kb/s，然后进行模拟传输，检验其播放是否流畅，在参照图表中找出发生间断的位置，并进行优化。最终确保动画在客户端播放流畅。Flash可创建基于矢量的网站，可以跨平台、跨浏览器地显示声音、图片、动画和交互式等内容。Flash中的MP3流式音频支持可以帮助设计人创建网络音频应用程序，比如带有旁白和背景音乐的长动画，同时还可以减少文件大小以适合低带宽的网络传输。Flash对文本输入框的支持，让开发人可以创建网络表格、应用程序和电子商务片头。现在网站可以从应用了Flash技术的网页中收集用户数据，并把信息传到网站服务器上。Flash创作工具的改良界面包括新的监视面板和绘图工具及更多的可直视层，它的时间安排表和智能向导可帮助用户创建动画。此外还有一个发布命令可控制Flash支持的输出格式，包括多版本的HTML、压缩位图和新的Quicktime。2.3网页编辑类工具网页编辑工具DreamWeaver是自制动态HTML动画的网页，同时DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽重头到尾制作动态的HTML动画，支持动态HTMLDynamicHTML的设计，使得页面没有Plug-in也能够在Netscape和IE4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。2.3．1dreamweaver软件介绍Dreamweaver是Macromedia公司发布的集网页设计、代码开发、网站创建和管理于一体的软件，是当前最流行的网页设计软件。它与同为Macromedia公司出品的Fireworks和Flash一道，被誉为网页制作三剑客。Dreamweaver与其它同类软件相比主要有以下优点：不生成冗余代码、方便的代码编辑、强大的动态页面支持、操作简便、优秀的网站管理功能、便于扩展、控制能力强、网站管理制作效率高。（1）不生成冗余代码。可视化的网页编辑器，都要把使用者的操作转换成html代码。一般的编辑器都会生成大量的冗余代码，给网页以后的修改带来了极大的不方便，同时还增加了网页文件的大小。Dreamweaver则在使用时完全不生成冗余代码，避免了诸多麻烦。而且，通过设置，还可用Dreamweaver清除掉网页文件原有的冗余代码。（2）方便的代码编辑可视化编辑和源代码编辑都有其长处和短处。有时候，直接用源代码编辑会很有效。Dreamweaver提供了html快速编辑器和自建的html编辑器，能方便自如的在可视化编辑状态和源代码编辑状态间切换。（3）强大的动态页面支持。Dreamweaver的Behavior能在使用者不懂javascript的情况下，往网页中加入丰富的动态效果。Dreamweaver还可精确的对层进行定位，再加上timeline功能，可生成动感十足的动态层效果。（4）操作简便。Dreamweaver提供的历史面板、html样式、模版、库等功能避免了重复劳动，使用者不必重复输入相同的内容、格式。其次，Dreamweaver能直接往页面中插入Flash、Shockwave等插件，经过设置后还可直接调用相应的软件对这些插件进行编辑。最后，Dreamweaver与Fireworks集成紧密，可直接调用Fireworks对页面的图像进行修改、优化。（5）优秀的网站管理功能。在定义的本地站点中，改变文件的名称、位置，Dreamweaver会自动更新相应的超级链接。Checkin和Checkout功能可协调多个使用者对远程站点的管理。6.便于扩展。使用者可给Dreamweaver安装各种插件，使其功能更强大。使用者若有兴趣，还可自己给Dreamweaver制作插件，使Dreamweaver更适应个人的需求。（7）制作效率高。Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dreamweaver能与您喜爱的设计工具，如PlaybackFlash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。（8）网站管理便捷。使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver会自动更新所有链接。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。2.3．2CSS样式的应用样式表的使用有三种方式：连接、导入、嵌入。其中连接和导入可用于多个页面共用一个样式表文件（在这两种方式中，通常Link方式在浏览器中等到更好的支持）；嵌入则仅对单一页面起作用。在Dreamweaver3及以前版本中，用户可以选择使用哪种方式设置CSS，但在Dreamweaver4以来，默认的是使用LINK方式，即只要用户设置CSS，那么就自动将其设置保存为一个CSS文件，以便在站点文件中调用。下面以嵌入式定义本页的样式。按下Shift+F11打开CSS面板(CSS面板面于DREAMWEAVERMX的右边，和行为，HTML样式均在设计窗口)，点击CSS面板上的新建一个样式表，如下选中重新定义HTML标签(R)和仅对该文档两项，标签这里选取<body>,按确定后，出现：具体设定如上图，设好后按确定。再次点击CSS面板上的，这次选中使用CSS选择器和仅对该文档两项，选择器哪里，选a:link，假如在字本装饰那里选无，表示无下划线设置步骤如下然后重复几次上面步骤，按你的喜欢分别定义好上面几个标签，就可以使你作的网页中的链接有无下划线了。其中a:link：表示已经链接；a:hover：表示鼠标移上链接时；a:active：表示链接激活时；a:visited：表示己点击过的链接。2.3.3GSS样式滤镜的参数滤镜属性参数设置效果AlphaAlphaOpacity:设定不透明度，取值范围0(完全透明)到100(完全不透明)。Style:设定透明区域渐变方式的形状，取值0、1、2、3，0表示无渐变，1表示线型渐变，2表示圆形渐变，3表示矩形渐变。透明效果MaskColor:设置蒙版颜色。蒙板（遮罩）ShadowColor:设置阴影颜色，其值可用＃RRGGBB，或直接用yellow等颜色名称。Direction:设置阴影降落方向。渐变式阴影DropshadowColor:设置阴影颜色Offx:指相对水平方向上的位移量，值取正数时阴影产生于对象右侧。Offy:指相对垂直方向上的位移量，与上面的参数取值同理。Positive:设定阴影透明度，取值为O时没有阴影效果，取非O的值时产生阴影效果下落式阴影2.4快捷键类工具2.4.1dreamweaver快捷键操作快捷键操作快捷键新建文档Ctrl+N在框架中打开Ctrl+Shift+O关闭Ctrl+W退出Ctrl+Q另存为Ctrl+Shift+S检查链接Shift+F8处理表格选择表格Ctrl+A工具条Ctrl+Shift+T移到下一单元格Tab移动到上一单元Shift+Tab删除当前行Ctrl+Shift+M删除列Ctrl+Shift+-(连字符)插入列Ctrl+Shift+A插入行Ctrl+M合并单元格Ctrl+Alt+M拆分单元格Ctrl+Alt+S处理层选择层Ctrl+Shift+点击选择并移动层Shift+Ctrl+拖动删除层Shift+点击层切换网格显示Ctrl+Shift+Alt+G统一所选层宽度Ctrl+Shift+[统一所选层高度Ctrl+Shift+]插入对象图象Ctrl+Alt+I表格Ctrl+Alt+TFlash影片Ctrl+Alt+F2.4.2Photoshop快捷键操作快捷键操作快捷键矩形、椭圆选框工具M多边形套索、磁性套索工具L移动工具V画笔、铅笔、颜色替换工具B魔棒、快速选择工具W切片、切片选择工具K仿制图章、图案图章工具S直接选择、路径选择工具A文档操作画布大小Alt+Ctrl+C图像大小Alt+Ctrl+I键盘快捷键设置Alt+Shift+Ctrl+K菜单设置Alt+Shift+Ctrl+M页面设置Ctrl+Shift+P光泽效果Ctrl+6图形菜单色阶Ctrl+L自动色阶Ctrl+Shift+L自动对比Ctrl+Shfit+Alt+L曲线调整Ctrl+M色彩平衡Ctrl+B色相/饱和度Ctrl+U萃取Ctrl+Alt+X去除饱和度Ctrl+Shift+U2.4.3flash的快捷键操作快捷键操作快捷键删除帧(R)Shift+F5剪切帧(T)Ctrl+Alt+X复制帧(C)Ctrl+Alt+C粘贴帧(P)Ctrl+Alt+V编辑元件(Y)Ctrl+E移至顶层(F)Ctrl+Shift+上箭头上移一层(R)Ctrl+上箭头时间轴(M)Ctrl+Alt+T第3章网页制作过程3.1网页构成要素网页是何种类型，何种风格，设计是精美还是平庸，从网页的主要构成要素来看，基本上是一致的。对于网页设计而言，其信息内容的有效传达是通过各种构成要素的设计编排来实现的。网页的构成要素主要包括：文字、图像、Flash动画、色彩、版式等元素。文字的设计与编排文字。作为网页设计的重要构成要素之一，除了表达意思之外，还具有传达感情的功能。因此文字必须具有视觉上的美感，能给人以美好的印象。文字是网页设计的主体，是网页设计中必不可少的元素。因此文字在网页设计中占据相当大的面积，文字所占的存储空间非常小，有利浏览及搜索引擎采集。网页上文字的编排与设计，要与网站设计整体风格相吻合。图像的创意与设计。在视觉上，图像往往能首先吸引人的注意力，这是由于图像给人的视觉印象要比文字强烈的多，图片也可以大大美化页面。善用图像，可以更加生动、形象、直观地表达网页的主题，增强网页的宣传力、感染力。网页设计时可以图文并茂地向用户提供信息。网页设计时使用的图像必须符合网页的主题，并要加以创新和个性化。图片的位置、面积、数量、形式等直接关系到网页的视觉传达。在图文混排时，要注意统一、重点突出、赏心悦目，达到和谐统一。网页版式设计与编排。网页版式设计注重技术性与艺术性的高度统一，是视觉传达的重要手段，也是网页设计的重要组成部分之一。网页版式设计是指将文字、图像等视觉元素进行组合配置，使页面效果美观而且易浏览。好的版式要以清晰的导向让浏览者对网页内容一目了然，成功的网页设计要能够吸引浏览者，留住用户。

网页色彩的搭配网页设计色彩搭配的好与坏，直接影响浏览者的观赏兴趣。在网页设计领域，彩色的网页总是胜于单色的网页。网页设计也相当于艺术品设计，要求文字优美流畅，页面新颖、整洁，通过色彩的合理搭配，使页面更加生动具有吸引力。因此，色彩设计在网页设计中居于十分重要的地位。多媒体元素的选择。网页中多媒体元素能够在很大程度上增强对浏览是的吸引力。浏览者希望在网页上看到更具有创造性、吸引力的网页。多媒体元素正是实现这一目标的重要手段。网页中涉及的多媒体元素主要是音频、视频和动画等。3.2网页设计原则网页设计是有原则的，无论使用何种手法对画面中的元素进行组合，都一定要遵循五个大的原则：统一、连贯、分割、对比及和谐。统一，是指设计作品的整体性，一致性。设计作品的整体效果是至关重要的，在设计中切勿将各组成部分孤立分散，那样会使画面呈现出一种枝蔓纷杂的凌乱效果。连贯，是指要注意页面的相互关系。设计中应利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。在信息量很多时为使观者能够看清楚，就要注意到将画面进行有效的分割。分割不仅是表现形式的需要。换个角度来讲，分割也可以被视为对于页面内容的一种分类归纳。对比就是通过矛盾和冲突，使设计更加富有生气。对比手法很多，例如：多与少、曲与直、强与弱、长与短、粗与细、疏与密、虚与实、主与次、黑与白、动与静、美与丑、聚与散等等。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。和谐是指整个页面符合美的法则，浑然一体。如果一件设计作品仅仅是色彩、形状、线条等的随意混合，那么作品将不但没有“生命感”，而且也根本无法实现视觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣。这是设计能否成功的关键。3.3制作网页的步骤在做网页之前，我确定了做网页的5个步骤。（1）确定网页主题：网站主题就是要建立的网站所要包括的主要内容，一个网站必须要有一个明确的主题。特别是对于个人网站，你可不能像综合网站那样做得内容大而全，包罗万象。你没有这个能力，也没有这个精力，所以必须要找准一个自己最感兴趣的内容，做深、做透，办出自己的特色，这样才能给用户留下深刻印象。网站的主题无定则，只要是你感兴趣的，任何内容都可以，但主题要鲜明，在你的主题范围内内容做大而全、精而深（2）搜集网页设计所需资料：确定好站点目标和结构之后，接下来要做的就是收集有关网站的资源，其中包括以下资源：文字资料：文字是网站的主题。无论是什么类型的网站，都要离不开叙述性的文字。离开了文字即使图片再华丽，浏览者也不知所云。所以要制作一个成功的网站，必须要提供足够的文字资料。图片资料：网站的一个重要要求就是图文并茂。如果单单有文字，浏览者看了不免觉得枯燥无味。文字的解说再加上一些相关的图片，让浏览者能够了解更多的信息，更能增加浏览者的印象。动画资料：在网页上插入动画可以增添页面的动感效果。现在Flash动画在网页上应用的相当多，所以建议大家应该学会Flash制作动画的一些知识。其它资料：例如网站上的应用软件，音乐网站上的音乐文件等等。（4）新建站点及页面布局：设计站点结构和收集足够的资源之后，就可以开始布局页面了。在Dreamweaver中，可以通过以下手段进行布局：利用表格进行布局：表格主要由表格、行和列及单元格三个元素组成，而且表格还可以嵌套，根据我们做了以后的经验建议大家不要把所有的网页都放在一个大表格中，并且嵌套最好不要超过３层，因为如果你那样做了，浏览器解析的时间会增加了，那么当浏览者访问时速度就慢了。利用层布局：层很适合形式自由的排版，现在ＷＥＢ标准建议排版时抛弃表格，不过如果初学者学习利用层排版时还要学习其它好多相关知识，其中最重要的是CSS和Javascript，使用CSS来辅助层可以对网页实现布局，可以解决表格给我们带来的烦恼。如果你对WEB标准感兴趣，那么你就该好好的学习CSS了。利用框架进行布局：它是一种用浏览器窗口，显示多个网页的形式，前几天记得有人在论坛中求，网页格式的课件，网页格式的课件大部分是用框架做出来的因此，一个网页设计得成功与否，很大程度上取决于设计者的规划水平，规划网页就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网页规划包含的内容很多，如网页结构、栏目设置、网站风格、颜色搭配、版面搭配、版面布局、文字图片的应用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才有个性、有特色、具有吸引力。（5）编辑文档与链接经过上面的几个步骤之后，一切准备工作都已经就绪，现在可以象装箱一样把收集到的资料及制作的组件放到页面布局中。相关资料插入到网页布局之后，文字都是同一种字号，同一种风格，同一种颜色；图片有大有小。所以这时就要对各种元素进行编辑了，例如，改变文本字体、字号、颜色、大小等，对图片进行大小，表格的调整，按钮行为的调整等等。这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，以便出现问题时好修改。在制作网页时要多灵活运用模版，这样可以大大提高制作效率。连接是网页的灵魂。浏览者在浏览网页时，单击网页设置的超级连接可以跳转到相关页面，所以一个好的网页是离不开连接的。3.4网页设计3.4.1网页界面设计（1）优化图片，获得更好的页面加载速度

如果图片是单色，那最好保存成PNG或者GIF格式;如果是连续性的色调(如照片)则最好保存成JPG格式。有很多的工具可以帮助你进一步优化你的图片，降低他们的文件大小。可以参考这个工具列表来帮助优化你的图片。尽量把图片数量减到最低，并且灵活使用图片，并且尽可能地减小文件大小。如此一来，将可以大大的减少页面的读取时间和改善网页的性能。（2）明智和有条理地使用字体虽然有成千上万的字体，但你真的能用的只是一小部分(至少要等到主要的浏览器完全支持)。因此保持字体的一致性，确认标题和段落的内容看起来有所不同。使用空白、调整行高、字体大小和字母间距属性，可以使用户轻松愉快地阅读和扫描内容。同时一个网页设计常常犯的错误就是使用不对的字体大小。我们想尽可能的将内容都塞在一个网页中呈现，所以我们有时设置字体大小而让用户感觉到不舒服。如果可能的话，尽量保持字体大小12像素以上，特别是对段落内容。这样可以减少因为字体太小而造成阅读上的困难。（3）导航(条/栏)是最重要的设计一个网页最重要的部分就是整个网页的导航。没有它，无论在哪个页面中，用户都会发生卡在这个页面离不开的状况。制作导航设计时摆放位置、风格、所用技术(javascript或CSS)、可用性和网页易读性，这些是你制作导航设计时需要考虑的。所以，制定一个导航系统可以放置的良好位置是必须的，例如放在一个显眼可见的地方。一个好的导航功能，只要网页载入就出现，而不需要鼠标再向下滚动。这是为什么页面要保持干净和简单的重要作用，一个复杂且非常规的设计可能会让用户困惑。最主要的目标就是你的网页导航，尽可能减少操作(动作)，努力而让用户到达他想要浏览的内容。3.4.2设计内容班级网页班级网页班级简介学习导航班级活动实习经历关于我们首页班级简介学习导航班级活动实习经历关于我们首页1、留言板2、那些回忆后藤实习班委会班级文化1、留言板2、那些回忆后藤实习班委会班级文化团支部青协活动专业介绍学习课程3.4.3网页首页设计和页面（1）设置首页布局主页采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现班级的勃勃生气，静态主页方式介绍班级风采、优点特色，就得利用ＡＳＰ与数据库结合的技术建立数据库查询管理系统，采用交互式的动态的web画面来实现。（2）页面布局首先双击“档”浮动面板中的index.htm,进入页面的编辑窗口。右健单击空白区域，在菜单中选择“页面属性”，之后弹出“页面属性”对话框，若选择主菜单“修改/页面属性”项，也可以把打开该对话框。在“页面属性”对话框中，左侧窗口显示“分类”，其中包括了“外观”、“链接”、“标题”、“标题/编码”、“跟踪图像”5项，右侧区域则显示各类中可以设置的项目，首页设置的属性如下图所示：（3）班级子页Dreamweaver8工作界面网站设计最重要的诀窍，恐怕就是你的网页要易读。这就意味着必须花点心思来规划文字与背景颜色的搭配方案。注意不能使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页很费劲。一般来说，浅