第一篇：关于图片优势效应在网页设计中的研究与应用探讨论文
前言
网页的展示效果会直接受到网页设计好坏的影响，网页在具备足够媒体能力的同时还充分具备有效的可用性以及时尚性。一个网页设计质量的高低会对网站用户人数的多少产生直接的影响，同时网站以及公司的效益则会受到用户的流量的直接影响。文字是最早进入网络多媒体的对象，图片也随着进入成为网络多媒体的重要对象之一，设置图片有效，就可以将丰富的、美化的网页界面充分的展示出来。随着的社会的发展，多媒体实现进一步发展，宽带跟用户屏幕的尺寸实现了进一步扩大，目前来说，大部分网站在页面中均开始使用大量图片，越来越多的人们开始倾向于有图片网站的浏览。根据相关研究报道，通常来说，人们看过一张图片之后，其记忆会持续很长一段时间，如果浏览一段文字，那么就会在很短的时间内忘记，一般不会出现例外情况。上述这种情景被我们称为“图片优势效应”。网页中的图片优势效应分析
人们可以通过语言的方法或者是通过形象的方法来完成图片记忆，相比文字记忆而言，上述记忆方法则多出了一个形象记忆的阶段，所以，在进行记忆的过程中，通过图片的使用能够促使记忆效率逐渐提升。通常情况下，是通过很多不一致的认知系统来完成信息处理工作的。使用较深语义层的基础上，人们可以更好的记忆信息。例如：感知层记忆。图片是参与深层语义过程的信息，人们通过清晰视觉回忆，在完成上述任务的过程中，文字跟图片所带给人们的信息记忆是不一致的，其中记忆图片信息可以更加深刻地印在人们的脑海中。上述现象，被我们称为图片优势效应。但是并不是全部的图片均具备上述提到的“图片优势效应”，唯有图片非常的清晰，容易被人理解，在外显记忆任务中进行的图片才能被称为“图片优势效应”。所以，在目前大部分网页图片中，70%以上的图片属于外显记忆。我们需要进一步明确网页设计过程中的图片优势效应，为后期的网页设计提供相应的基础以及依据。
1.1 图片优势效应中的视觉优势
在日常生活中，人们所需的信息，需要通过视觉获取的就有60%。网页之所以被用户关注，主要是因为引入了有效的视觉元素，并且在上述的基础上有效的完成了信息传达工作。上述分析得到，我们需要对网页的设计提出一定的标准，例如促使网页的设计最大程度地满足受众视觉心理上以及生理上的需求等。网页的整体视觉表达一般会由以下几个部分直接的影响：第一个部分是图片的位置;第二个部分是图片的尺寸大小以及数量;第三个部分是图片的排列形式;第四个部分是图片的色调等。完成合适的图片选取，就可以将事物内部存在的本质直接地、具体地表达处理，促使原本平淡的事物转化为强有力的诉求性画面类型。在版面的构成要素中，图片的正确使用可以促使网页更具独特的风格以及优势，最大程度的吸引广大用户，对于网页设计来说，图片具有非常强的设计弹性，图片可以有效地配合网页中其他视觉元素一起，促使网页设计能够有效地满足设计目标规划，实现有效的统一、连贯、分割、对比以及和谐。
1.2 图片优势效应中的认知优势
图片的使用可以促使来自不同国家的人有效地理解相同图片表达的意思，所以，可以有效的减少存在阅读文字过程中出现的障碍，同时减少浏览网页的过程中存在的障碍。如果用户不识字，那么也可以通过相应的方法来完成图片中意思的解读。或者是一部分老年人，因为年龄的增长，导致其视觉功能逐渐衰退，那么在进行信息浏览的过程中，对于文字的阅读就会存在一定的困难。如果使用大幅的图片，那么老人就可以直观的理解图片表达的实际意思。如果是摄影类的网站，那么就需要图片更加的优质，通过图片的使用可以有效地表达摄影师按下快门一瞬间存在的真实想法。人们通过图片的展示可以有效的对图片背后故事进行准确的阅读。我们可以使用一句话来表达图片的重要性，同时表现图片的认知优势，那就是“一图胜千言”。
1.3 图片优势效应中的商业优势
图片是网站竞争的重要途径之一，还是大部分企业最主要的营销核心。社会化媒体实现进一步深化变革，目前就跟图片两者之间存在非常密切的联系，目前来说，主要元素为图片的网站逐渐走向蓬勃发展的道路。例如：美国图片视觉社交网站pinterest，在网页的底端会完成自动加载，不需要设置翻页功能，促使用户可以在很短的时间内迅速的发现新图片。就目前来说，我国国内目前已经存在三十多家相似的网站，例如：美丽说网站、蘑菇街网站以及堆糖网站等。在设置上述类别网页的设置过程中，网站的商业优势一般是由图片的性质决定的。
人们通过图片的使用可以有效地展示自我的个性，促使自我个性彰显出来。其中女性群体是具有很强潜力的用户。我们使用高质量的图片就可以很好吸引女性群体，促使她们关注动态。图片的使用可以促使企业发展。根据相关的搜索调查得到，消费者中有60%消费者对那些有显示图片的商户表现出很强的关注度，非常愿意对其进行消费。据统计得到，图片存在的新闻报道访问量明显高于图片不存在的新闻报道访问量。结束语
通过分析各个类型的网页，我们能够有效地发现图片在网页中会占据非常大的比例，对于图片量大的网站，用户也比较倾向。他们通过读图的形式来完成信息的快速获取。网页设计师在进行网页设计时，如果有效地使用图片优势效应，同时还能将图片基于客观事实的主观设计全过程，就可以为企业的产品赋予一定的现实意义。产品意义的实现需要正确的指导后续产品的功能形成以及造型塑造等设计阶段。在进行具体设计的过程中，想要更大程度的将产品的意义展现出来就需要得到进一步深入，期望为我国企业产品创新创造可借鉴的依据，促使我国企业实现最大程度的创新。
第二篇：在网页中插入图片教学设计
《在网页中插入图片》教学设计
执教：熊
恒
教学目标： 知识与技能：
会打开上次的网页；了解图片在网页中的作用；学会在网页中插入图片的方法。
过程与方法：
通过独立探究和小组探究的方法基本掌握在网页中插入图片。
情感态度与价值观：
培养学生的审美能力，形成与同学和谐相处、共同进步的精神。明白帮助他人的目的就是美化我们的心灵。
教学重难点：
重
点：了解图片在网页中的作用 难
点：能在网页中插入图片
教学时间：一课时
教学过程：
一、导入新课：
同学们，上节课我们学会了制作只有文字的网页。可是“咪咪豆网屋”的主页还有可爱的胖胖熊图片呢！它是怎么进来的？对于这个问题，我们来进行具体的研究。
揭示课题：在网页中插入图片
二、探究新知 任务一：了解图片在网页中的作用。
（1）、教师出示只有文字和带有图片的两个网页，提问：这两个网页哪一个好看呢？
（2）、引导学生观察，并说出为什么？指定学生回答（有图片的那一个）
（3）、小结：网页中的图片可以使网页更加美观漂亮。任务二：打开主页文件咪咪豆网屋index.htm（1）、师生复习启动frontpage 软件。（它是微软公司推出的一款优秀的网页制作软件）
（2）、学生试着打开主页文件咪咪豆网屋index.htm，老师巡视并校正。
操作步骤：网页制作软件——单击文件——打开文件——我的文档，找到主页文件咪咪豆网屋index.htm——再打开。
（3）、学生操作。
任务三：把“胖胖熊”请进来
（1）师生复习在word 中插入图片的方法，指名学生回答。教师小结：方法一：①、复制——粘贴；②、方法二：菜单——插入——图片——来自文件——选择图片单击插入。
（2）学生练习图片的插入，（3）学生探究把胖胖熊请进“咪咪豆网屋”主页中的的方法。
教师提问：能否把在word中插入图片的方法运用在frontpage 软件中呢？（指名学生回答：可以）学生动手操作：教师巡视，对不正确的地方进行校正。教师小结：
我们可以这样把胖胖熊请进“咪咪豆网屋”主页。操作步骤：
① 把光标移到第二行“咪咪豆网屋”的左边；
② 单击“插入”菜单；
③ 选图片来自文件→选C：“网页制作”文件夹→找到“胖胖熊1.gif” 文件并单击→单击“确定”。
（3）、学生操作，教师巡视指导
（4）、要求学生用同样的方法把胖胖熊放到“咪咪豆网屋”的右边。
任务四：保存网页
同学们，我们成功把胖胖熊请进“咪咪豆网屋”主页中，现在，我们要做的就把今天的作品保存起来！
学生试着保存：单击文件菜单——保存文件。
四、教师小结：今天同学们通过努力，基本掌握了在网页中插入和美化图片的方法，我们插入网页的目的是美化网页，帮助他人的目的是美化我们的心灵。
第三篇：网页设计与应用
网页设计与应用
专
业： 班
级： 学
号： 姓
名： 指导教师：
计算机网络技术
20***031 蔡依婷 杨艳慈
邯郸职业技术学院 2017年11月21日
摘要
网页设计与应用
摘 要
本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。
本论文主要章节如下，第一章：绪论，本章主要介绍网页设计的相关知识。第二章：网页设计语言概述，本章主要介绍网页设计的语言——HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。第三章：基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章：内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。第五章：WEB页面信息的交互——窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。
关键词： 网页制作；网页设计；HTML；ASP
目 录
1.1 网页设计概述............................................................................................................................................4 1.2 网页设计的要素........................................................................................................................................4 1.3 大作业目的和意义.....................................................................................................................................4
第二章 HTML网页设计技术的应用...........................................6 2.1 HTML语言介绍........................................................................................................................................6 2.1.1 HTML语言的特点...............................................................................................................................6 2.1.2 HTML语言的编辑软件.......................................................................................................................6
第三章 色彩在网页中的应用..............................................7 3.1色彩在网页中的应用...............................................................................................................................7 3.2主页色彩的处理........................................................................................................................................7 3.3常用的配色方案........................................................................................................................................7
第四章 WEB页面信息的交互——窗体与框架..................................8 4.1窗体基础知识..............................................................................................................................................8 4.1.1窗体对象.................................................................................................................................................8 4.1.2 窗体对象的方法....................................................................................................................................9 4.2 窗体中的基本元素.....................................................................................................................................9 4.3窗体对象实例...........................................................................................................................................11 4.4 框架..........................................................................................................................................................13 4.5 框架的访问...............................................................................................................................................14 4.6本章小结...................................................................................................................................................17 第五章 结 论...........................................................18 致 谢................................................................19 参考文献................................................................20
绪论
第一章 绪论
随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。
1.1 网页设计概述
网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。
1.2 网页设计的要素
网页设计的两大要素是：整体风格和色彩搭配。
一、确定网站的整体风格
在这里，我提供给大家一些参考经验：
1．将你的标志logo，尽可能的放在每个页面上最突出的位置。2．突出你的标准色彩。
3．总结一句能反映贵站精髓的宣传标语！
4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！
二、网页色彩的搭配
1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。
2．用两种色彩。先选定一种色彩，然后选择它的对比色。
3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
1.3 大作业目的和意义
本大作业主要是对网页设计与制作的语言基础上进行探讨，主要内容如下：通过已经做好的网页，分析html网页设计技术、XML技术、Java Applet技术和Javascript技术在网页设计中的应用。
绪论 5
第二章
第二章 HTML网页设计技术的应用
2.1 HTML语言介绍
HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。
HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
2.1.1 HTML语言的特点
HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：
1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。
2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。
3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。
2.1.2 HTML语言的编辑软件
HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：
1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。
2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。
3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。
第三章 7 第三章 色彩在网页中的应用
3.1色彩在网页中的应用
色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。
先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。
在网页配色中不要将所有颜色都用到，尽量控制在三至五种色彩以内。背景和前文的对比尽量要大以便突出主要文字内容。
3.2主页色彩的处理
色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。
3.3常用的配色方案
1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。
2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。
3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。
第四章
最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。
第四章 WEB页面信息的交互——窗体与框架
要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。
4.1窗体基础知识
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。
4.1.1窗体对象
窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。
在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：
4.1.2 窗体对象的方法窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体，则使用下列格式：
document.mytest.submit()4.2 窗体中的基本元素
窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。
在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：
formName.elements[].methadName(窗体名.元素名或数组.方法)formName.elemaent[].propertyName(窗体名.元素名或数组.属性)下面分别介绍：
（1）Text单行单列输入元素
功能：对Text标识中的元素实施有效的控制。基本属性：
Name：设定提交信息时的信息名称。对应于HTML文档中的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue：包括Text元素的默认值 基本方法：
blur()：将当前焦点移到后台。select()：加亮文字。主要事件：
onFocus：当Text获得焦点时，产生该事件。OnBlur：从元素失去焦点时，产生该事件。Onselect：当文字被加亮显示后，产生该文件。onchange：当Text元素值改变时，产生该文件。例：
...第四章
（2）textarea多行多列输入元素
功能：实施对Textarea中的元素进行控制。基本属性
name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。Default value：元素的默认值。方法：
blur()：将输入焦点失去 select()：将文字加亮后 事件：
onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件（3）Select选择元素
功能：实施对滚动选择元素的控制。属性：
name:设定提交信息时的信息名称，对应文档select中的name。Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项
select在中每一选项都含有以下属性： Text:选项对应的文字
selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected:默认选项 事件：
OnBlur：当select选项失去焦点时，产生该文件。onFocas:当select获得焦点时，产生该文件。Onchange:选项状态改变后，产生该事件。（4）Button按钮
功能：实施对Button按钮的控制。属性：
Name:设定提交信息时的信息名称，对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法：
click()该方法类似于一个按下的按钮。事件：
onclick当单击button按钮时，产生该事件。例 ：
10第四章 11........4.3窗体对象实例
下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。
test8_1.htm
调用动态按钮文档第四篇：分层教学在《网页设计》中的应用
分层教学在《网页设计》中的应用
乳源中等职业技术学校 李新华
摘要: 《网页设计》在中等职业技术学校课程中是一个操作性较强的模块，学生通过对《网页设计》这一模块的学习，能够熟悉网站、网页的基础知识，掌握建立网站和制作网页的基本知识和技巧；能够设计出精美的网页，还可以培养一种能够陶冶情操的特长爱好。
关键词：分层 差异 分层教学
在实际教学中，我发现学生对《网页设计》课程的学习兴趣和学习能力反映不一样。其中某些学生的学习能力较强，表现出对网页设计有很强的学习兴趣，同时学习效果也不错，经常向老师表示希望能学到更多的关于网页设计方面的知识；还有部分学生对网页设计课程也表现出一定的兴趣，但学习能力不是很好，学习效果一般；还有一部分学生对网页设计课程的学习几乎没有什么热情，也不用心学习或者学习能力差，基本丧失了学习兴趣和信心。如何让所有的学生都能学会并且学好《网页设计》这个操作性那么强的模块呢？本人在教学中发现“根据不同学生的具体情况和知识结构进行教学设计”的分层教学理论正符合目前学生的情况，因此决定在教学中采用“学生分层——教学目标分层——教学评价分层”的教学模式。
由于网页设计是一门实践性较强的课程，学生的网页设计水平会随着学习态度的变化和实践操作的熟练程度的变化而发生相应的变化。所以在进行实际教学中根据具体情况适时采用分层教学。
在讲授到超级链接时, 我采用了分层教学模式进行教学。
一、学生分层
分层教学理论的一个基本的要求和目的就是根据不同学生的具体情况和知识结构进行教学设计。根据学生对网页设计的掌握程度,我将学生分为A、B、C三个层次。具体分层如下：
A层：学生对网页设计课程的学习表现出较强的兴趣，同时也熟练应用网页设计相关软件（如Dreamweaver、Flash、PhotoShop）的同学，并能较快地接受老师在多媒体课堂上讲授的教学内容和在计算机机房中能较好完成老师所布置的实验内容。
B层：学生对网页设计课程的学习兴趣表现一般，同时对网页设计相关软件有一定了解的同学，能理解老师在多媒体课堂上讲授的教学内容，但在计算机机房实践时需要老师或其他同学的帮助才能顺利地完成实验内容。C层：学生对网页设计基本没有学习兴趣，同时学习能力较差或学习不够认真的同学，在课堂上表现很差（经常违反课堂纪律，或者做些与课堂无关的事情）。
二、教学目标分层
教学目标的分层就在于给不同的学生设置不同的阶段学习目标，以使不同的学生能根据各自不同的情况进行有针对性的学习。既能保持各层次学生学习网页设计的积极性,又能在各自的基础上发挥特长,使基础的巩固与个性的发展达到和谐统一。
根据以上原则,关于超级链接的学习目标也分三个层次。
C层：能理解超级链接的概念和掌握创建超级链接的基本方法；在上机实践操作时能够模仿范例创建几种常用的超级链接：不同对象的链接（文字链接和图像链接）、不同路径的链接（绝对路径链接和相对路径链接）、不同形式的链接（电子邮件链接和虚拟链接）。
B层：除了能够理解超级链接的概念和掌握创建超级链接的基本方法外，还要熟练创建超级链接的技巧；除了在上机实践操作时能够模仿范例创建几种常用的超级链接外，还要在C层目标的基础上增加难度较大的超级链接，如图像热点链接和锚记链接；同时还要懂得在制作网页时在不同的情况下使用不同类型的链接。
A层：在掌握B层目标的基础上还要求学生掌握超级链接的HTML语法，还要求利用CSS样式来修饰链接文字以实现更佳链接效果，并且还能够制作出实现超级链接的Flash动画效果；同时还鼓励学生自己设计和制作更有创意的超级链接效果，使网页更生动和精美。
三、教学评价分层
在教学中，根据学生分层传授知识，对学生进行不同的评价。对学生进行分层评价，以其在原有知识水平上的进步和提高作为评价学生是否完成教学目标的一个基准，这是进行分层教学的一个重要的方面，也是衡量分层教学法是否有效的一个重要手段。
在进行超级链接的学习后，根据学生的多媒体课堂听课情况和上机实践操作情况，以及布置作业的完成情况和课后学生自行练习情况进行总考核，得出综合评价。
A层：大部分学生都能够自觉地完成老师布置的任务，能够创建出效果较好的超级链接； B层：部分学生也基本掌握了很多的创建超级链接的方法和技巧，但还有个别学生因努力程度不够而没有达到预期的教学目标；
C层：某些学生基本掌握了超级链接的概念和创建常用超级链接的方法，甚至有部分学生在老师的指导和同学的帮助下能够创建出难度更大的超级链接。
在进行超级链接教学中采用分层教学实践取得初步效果后，接着讲授表格、层、行为和CSS样式等内容时继续采用分层教学法。实践证明，教学效果当不错。《网页设计》这一模块课程结束时，大部分A层学生在这一模块的综合成绩达到80分以上，B层学生的综合成绩达到70分以上，而C层学生的综合成绩也基本上在及格以上。甚至个别B层和C层学生的成绩达到80分以上。
综上所述，在《网页设计》模块教学中采用分层教学方法，将有效的克服教学内容与学生兴趣爱好之间的矛盾，克服学生掌握知识水平两极分化的矛盾。真正做到了以学生为出发点，充分发挥学生的积极性和主动性，适应学生对不同内容的学习需要，有效地解决了班级授课制的固有缺陷和因材施教之间的矛盾，《网页设计》模块教学注入了新的活力。但是，分层教学的设计、分组、教学内容的分层、教学方法的分层等方面仍存在着不少的问题还有不少值得深入探索的地方。我将在以后的教学中不断努力，使分层教学活动的方法得以不断的改进和完善。
参考文献：
1、钟和军 《基于信息技术环境下分层导学模式的构建与实践》
2、付裕东 《落实因材施教原则的最佳途径——分层次教学》
3、王涛斌 《分层教学理论在信息技术教学中的运用》
4、张春兴 《教育心理学》
5、罗耀军，戴小波，张培军 《计算机网页制作教程》
第五篇：网页设计与应用毕业论文
目 录
第一章 前言„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„2 1.1 课题来源 „„„„„„„„„„„„„„„„„„„„„„„„„„„„ 2 1.2 网站开发项目需求分析„„„„„„„„„„„„„„„„„„„„„„„ 2 1.3 软件„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 3 1.4 软件运行环境第二章 网站制作„„„„„„„„„„„„„„„„„„„„3 第二章网络制作„„„„„„„„„„„„„„„„„„„„„„„„„„„„3 2.1做网页的步骤 „„„„„„„„„„„„„„„„„„„„„„„„„„„ 3 2.2 做网页的要素„„„„„„„„„„„„„„„„„„„„„„„„„„„„4 2.2.1网页的整体布局设计„„„„„„„„„„„„„„„„„„„„„„„„4 2.2.2 网页设计中色彩的运用„„„„„„„„„„„„„„„„„„„„„„„4 2.2.3 网页形式与内容相统一 „„„„„„„„„„„„„„„„„„„„„„ 4 2.3 系统各模块功能实现„„„„„„„„„„„„„„„„„„„„„„„„„4 2.3.1 系统登录模块 „„„„„„„„„„„„„„„„„„„„„„„„„„4 2.3.2 车辆展示模块 „„„„„„„„„„„„„„„„„„„„„„„„„„ 5 2.3.3 账号管理模块„„„„„„„„„„„„„„„„„„„„„„„„„„„5 第三章 网站的设计„„„„„„„„„„„„„„„„„„„„„„„„„„„ 5 3.1 主页的要求„„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.2 子页的要求„„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3 网页设计技巧„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3.1 框架的使用„„„„„„„„„„„„„„„„„„„„„„„„„„„„5 3.3.2 CSS 样式的使用„„„„„„„„„„„„„„„„„„„„„„„„„„6 第四章 网站的应用„„„„„„„„„„„„„„„„„„„„„„„„„„„ 6 4.1 网页分为静态网页和动态网页„„„„„„„„„„„„„„„„„„„„„6 4.2 我的认识„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„6 结束语 „„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„ 7 参考文献„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„„7
—1—
网页设计与应用
摘 要 ：汽车网站是一个结合了汽车销售等多功能浏览的汽车网站，我所使用的软件是
Macromedia 公 司 推 出 的 一 款 用 于 网 页 设 计 的 软 件 — —
dreamweaver8。在网页的制作与链接中，我学到了很多，然后补充一些比较热门的技巧。网站具有快捷。无距离更新的特性，同时提供进入日常业务处理平台的“入口”，具有较强的实用价值。这样的网站被广大消费者普遍使用，随着现在网络的普及和高效性的不断提高，它的展示作用和实用性已经使它的应用地位越来越高，越来越广泛。本文对网站设计作了介绍，进行了需求分析、模块划分、框架和 CSS 的介绍。由于制作经验不足，作品和论文中存在问题之处，请老师指导完善。
关键词： 超链接，外观，性能，框架，CSS 目 录
第一章 前言 1、1 课题来源
随着二十一世纪新兴科技的飞速发展，如今的电子信息产业正在经受着一个巨大的挑战，同时也面临着一个重大的机遇。就目前的科技发展水平而言，电子信息产业的发展已经不能够满足社会化大生产的要求，因此，各个国家集中人力、财力加大对信息技术产业的投入，以适应目前需要。可喜的是在这几十年的发展中我们有了互联网。互联网加大了我们了解世界的眼界，缩紧了人与人之间的距离，这就更容易的使我们走上信息化的道路。以往，人们出行都以自行车居多，后来公交事业发展壮大，人们便乘坐公交汽车，现如今，随着人们生活水平的提高，越来越多的家庭已经拥有或者想拥有自己的私家车。正是因为人们的这些需求，越来越多的汽车网站出现在网络上，使人们可以随时了解自己想知道的汽车方面的新闻，真正的做到足不出户，便知天下事。把汽车销售与网络连接起来，是今后汽车销售发展的必然方向之一。
1．2 网站开发项目需求分析
一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。面对对网站开发拥有不同知识层面的客户，项目的负责人对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败。因此如何更好地的了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的正确项目开发方向进行，是每个网站开发项目管理者需要面对的问题。据专家预计，2009 年我国汽车需求量将超过 850 万辆。所以，做好汽车 —2—
网站就是为了使广大的消费者提供及时和有效的信息，为其选择适合自己的产品提供良好的参考。
1．3 使用软件
dreamwraver 软 件 由 美 国 著 名 的 网 站 应 用 开 发 工 具 生 产 厂 商 AdobeMacromedia 于 2005 年 6 月推出并正式投入市场以来，已经发展得相当成熟⑴。关于dreamwraver 的技术介绍的相关书籍与网络信息相当丰富。通过大学中软件开发环境课程的学习，对 dreamwraver 有了比较深刻的认识，并比较轻松的掌握了dreamwraver 的操作。因此，软件技术可以完成任务的要求。
1．4 软件运行环境
Dreamweaver 是一款简体中文软件，可以在 Win2003/WinXP 中安全运行⑵
第二章 网站制作
2．1 制做网页的步骤
在做网页之前，我确定了做网页的五个步骤。
一、确定网站主题 ：网站主题就是要建立的网站所要包含的主要内容，一个网站必须要有一个明确的主题。
二、搜集材料 ：明确了网站的主题以后，你就要围绕主题开始搜集材料了。材料既可以从图书、报纸、光盘、多媒体上得来，也可以从互联网上搜集，然后把搜集的材料去粗取精，去伪存真，作为自己制作网页的素材。
三、规划网站 ：一个网站设计得成功与否，很大程度上决定于设计者的规划水平，规划网站就像设计师设计大楼一样，图纸设计好了，才能建成一座漂亮的楼房。网站规划包含的内容很多，如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等，你只有在制作网页之前把这些方面都考虑到了，才能在制作时驾轻就熟，胸有成竹。也只有如此制作出来的网页才能有个性、有特色，具有吸引力。
四、选择合适的制作工具 ：尽管选择什么样的工具并不会影响你设计网页的好坏，但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。
五、制作网页 ：材料有了，工具也选好了，下面就需要按照规划一步步地把自己的想法变成现实了，这是一个复杂而细致的过程，一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小，就是说在制作网页时，先把大的结构设计好，然后再逐步完善小的结构设计。所谓先简单后复杂，就是先设计出简单的内容，然后再设计复杂的内容，以便出
①知新文化.HTML 完全手册与速查辞典[M].北京：科学出版社，第49页，2007.② 杨选辉，网页设计与制作教程[M].北京：清华大学出版社，第321页，2009.—3—
现问题时好修改。在制作网页时要多灵活运用模板，这样可以大大提高制作效率。此外，整体设计完成后我们还要将网页上传测试，使其和其他版本浏览器能够兼容，再者对网站推广宣传，及时的维护更新。
2.2 制作网页的要素
2.2.1 网页的整体布局设计
网页设计作为一种视觉语言，要讲究编排和布局，虽然主页的设计不等同于平面设计，但它们有许多相近之处，应充分加以利用和借鉴。⑴版式设计通过文字图形的空间组合，表达出和谐与美。一个优秀的网页设计者也应该知道哪一段文字图形该落于何处，才能使整个网页生辉。多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之间和页面内的秩序与内容的关系。尤其是我们在利用网页效果体现在线营销的意图时，更要注意为了达到最佳的视觉表现效果，而讲究整体布局的合理性，比如一家生产型的企业，它所提供产品的名称、类别、型号、价格、功能介绍应怎样编排才能使浏览者有一个流畅的视觉体验，从而方便他对产品的了解，促成最后的购买。
2.2.2 网页设计中色彩的运用
色彩是艺术表现的要素之一，在网页设计中，根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成美丽的页面。⑵根据色彩对人们心理的影响，合理地加以运用，按照色彩的记忆性原则，一般暖色较冷色的记忆性更强一些。色彩还具有联想与象征的特质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以如果我们在对一家出售冷食的商店进行虚拟店面的页面设计时，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些，增强人们的购买心理，使得在线营销得到很好的实践效果。另要注意的是网页的颜色应用虽没有限制，但不能毫无节制地运用多种颜色，一般情况下，先根据总体风格的要求定出一至二种主色调，在已经有了完备的 CIS（企业形象识别系统）的企业进行网页设计时，更应该按照其中的 VI 进行色彩运用。在色彩的运用过程中，还应注意的一个问题是：由于国家和种族、宗教和信仰的不同，以及生活的地理位置、文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈、个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。⑶在设计中要考虑众多因素。
2.2.3 网页形式与内容相统一
要将丰富的意义和多样的形式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。⑷运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、文字、图形之间的相互关系建立整体的均衡状态，产生和谐的美感。如对称原则在
①王诚君，刘振华，郭竑晖，《高中山.Dreamweaver 8 网页设计应用教程[M]》.北京：清华大学出版社，第332页，2007.②李光明，曹蕾，余辉.《中文Dreamweaver 8 网页设计与实训教程[M]》.北京：冶金工业出版社，第13页，2006.③周德华，许铭霖.《新编网页设计教程[M]》.北京：冶金工业出版社，第159页，2006.—4—
页面设计中，它的均衡有时会使页面显得呆板，但如果加入一些富有动感的文字、图案，或采用夸张的手法来表现内容往往会达到比较好的效果。点、线、面作为视觉语言中的基本元素，要使用点、线、面的互相穿插、互相衬托、互相补充构成最佳的页面效果。网页设计中点、线、面的运用并不是孤立的，很多时候都需要将它们结合起来，表达完美的设计意境。
2．3 系统各模块功能实现
2.3.1 系统登录模块
1、该功能模块可以记录客户的邮箱地址，交易时还可以向客户发送交易信息，到帐确认等等。
2、登陆后系统会调出客户的记录，按照交易量的不同客户享受的折扣也不同，系统主界面
2.3.2 车辆展示模块⑴
1、该功能模块主要实现对车辆的展示。
2、该功能模块图片、文字介绍，360 度 flash 对各种车辆的展示。
2.3.3 账号管理模块⑵
1、挂失业务在正常工作中肯定会遇到挂失的业务，确定挂失后，数据库会将该账号挂起，等待客户做进一步操作。
2、冻结业务，客户对账号有冻结的权利，在客户没有输入解冻密码之前，任何人都无法动用帐上的资金。
3、流水查询客户可以查询曾经交易过的记录。
4、客户可以自行对其账号密码进行修改，网站管理人员也可以添加或删除账号。
第三章 网站的设计
3.1 主页的要求
对于销售业务系统要求运行的工作环境稳定，易于操作，界面美观大方，对 于前台展示界面要求系统便于维护，安全可靠，对于广大客户所要执行的操作 简单易懂，远程访问速度较快，界面友好美观，有基本的错误提醒功能，远程 操作数据库正确，要求和客户有一定的互动性，在主页上直观的就可以查看浏 览者所想要了解的东西。
3.2 子页的要求
后面的工作就是子页的选择与链接，子页应该丰富多彩，内容充实，浏览 性强，比如说，想要销售一辆汽车，应该有它的全部资料，包括外观、内饰、性能指标、出产地、价
① 赵铭建，赵慧，乔孟丽，康梅娟.《网页设计与制作[M].》东营：中国石油大学出版社，第66页，2007.②赵祖荫，王云翔，胡耀芳.《网页设计与制作教程[M]》.北京：清华大学出版社，第187页，2008.—5—
格等诸多方面，鉴于以上方面，我开始了子页的选择 与链接。3.3 网页设计技巧
一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。在这里从框架 和 CSS 样式的运用两方面来介绍网页设计的技巧。⑴
3.3.1 框架的使用
FRAME（框架）是 Web 上经常会看到的页面结构。框架的最常见用途就是导航⑵。一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框 架。使用框架具有以下优点：访问者的浏览器不需要为每个页面重新加载与导航相 关的图形；每个框架都具有自己的滚动条如果内容太大，在窗口中显示不下，因此访问者可以独立滚动这些框架。例如，当框架中的内容页面较长时，如果 导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动 回顶部来使用导航条。使用框架具有以下缺点：可能难以实现不同框架中各元素的精确图形对齐；对 导航进行测试可能很耗时间。许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框 架。在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要 地使用框架的站点例如，每当访问者单击导航按钮时就重新加载导航框架内 容的框架集。如果框架使用得法例如，在允许其他框架的内容发生更改的同 时，使一个框架中的导航控件保持静态，则这些框架对于某些站点可能非常 有用。
3.3.2 CSS 样式的使用
CSS 层叠 样 式 表 是 一 种 制 作 网 页 的 新 技 术 它 的 全 称 是 级 联 样 式 表 即Cascading StyleSheets 的缩写，又称之为风格样式表单。⑶CSS 是在网页制作过程中普遍用到的技术。采用了 CSS 技术控制的网页，设计者会更轻松、有效地对页面的整体布局、颜色、字体、链接、背景以及同一页面的不同部分、不同页面的外观和格式等效果实现更加精确地控制。
第四章 网页的应用
4.1 网页分为静态网页和动态网页。
4.1.1 优点：
静态网页：1.静态网页的内容相对稳定，因此容易被搜索引擎检索； 动态网页：
1.动态网页以数据库技术为基础，可以大大减少降低网站维护的工作量；
2.采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、顶订单管理等等
①]陈季.《 Flash 基础与实例教程[M]》.北京：北京希望电子出版社，第88页，2005.②丁海祥.《计算机平面设计实训[M].》 北京：高等教育出版社，第54页，2005.③曹雁青，杨聪.《 Photoshop 经典作品赏析[M].》北京：北京海洋智慧图书有限公司，第35页，2002.—6—
4.1.2 缺点： 静态网页：
1.静态网页没有数据库的支持，在网站能制作和维护方面工作量较大，因此 当网站信息量很大时完全依靠静态网页制作方式比较困难； 2.静态网页的交互性交叉，在功能方面有较大的限制。动态网页：1.动态网页中的“？”对搜索引擎检索存在一定的问题，搜索引擎一般不可 能从一个网站的数据库中访问全部网页，或者处于技术方面的考虑，搜索 蜘蛛不去抓取网址中“？”后面的内容，因此采用动态网页的网站在进行 搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。
4.2 我的认识
网页应用很广泛，当我们打开 IE 浏览器的时候，出现在屏幕上的就是一个网页，随着社会的进步，生活节奏地加快，各行各业都开始使用互联网来宣传自己的产品，或者进行其他的活动。网站设计离不开网页，网页像书中的章页，由这些页面构成了整个网站。不管是大企业还是小公司，都有自己的网站，当然网站是离不开网页的。网页中的信息可以给我们带来很多帮助，可以用来学习或者做一些活动的参考。通过对这门课程的学习会收获很多。
结束语
在系统的需求分析过程中，由于不熟悉，产生了很大的困难，通过与指导老师的探讨与沟通，我渐渐地对系统有了一个大体的认识。虽然说在系统需求分析过程中花费了很多时间，但是我认为这是必要的也是必须的。这次毕业设计中我了解到了很多的知识，这对我今后的学习和生活都将会有很大的帮助。我明白了对于一个完整性的软件设计流程的主要性，在整个网站设计过程中前期需求分析，可行性分析是非常重要的环节，可以说是软件设计的核心，在过去我一直认为详细设计编码才是最重要的，因为再好的需求，编码不成功，软件就无法正常运行。锻炼了自己发现问题，解决问题的能力。开发过程中遇到一些需求的变化，通过修改设计思路，避免在后期产生更大的错误。再详细设计的每一步都有可能出错，所以会进行非常多的调试工作，只要发现问题就调试解决，这样不仅增强了信心，也很好的锻炼了自己遇到问题不急不躁，耐心解决的能力。
参 考 文 献
〈1〉《信息技术》江苏科学技术出版社.〈2〉《网页制作》人民邮电出版社.〈3〉 《dreamweaver8 参考手册》2008 年版.，〈4〉柯林森、刘志忠，CSS 基础教程，人民邮电出版社，2007.9.〈5〉苏昱，样式表中文手册，帮助文档。〈6〉韩国锋、ASP 柯华坤，网站开发典型模块与实例精讲，电子工业出版社，2006.8.—7—
点击咨询 