第一篇:“网页设计与制作”课程中的应用分析论文
摘要:互联网和信息化技术的高速发展给教育教学领域带来的变革,是教育工作者不能忽略的现象。充分利用各种新型的教学模式或技术手段来提高教学质量,激发学习兴趣,是当代教师应广泛关注的问题。本文从翻转课堂教学模式在“网页设计与制作”课程中的应用入手,探究翻转课堂对传统的“教”与“学”模式的影响及其在课程中应用的分析与总结。
关键词:翻转课堂;网页设计与制作;教学模式
一、翻转课堂教学模式的研究背景和意义
1.翻转课堂教学模式的研究背景翻转课堂译自“FlippedClassroom”,也可译为“颠倒课堂”。源于美国科罗拉多州林地公园高中的两位化学老师对传统教学模式的改革实践。随着翻转课堂教学模式在美国的推广和流行,其逐渐成为全球教育领域关注的一种新型教学模式。传统的教学模式是教学主要在课堂上完成。教师在课堂上讲解知识,演示案例或实验。学生听取讲授,完成相关的实践任务及课后练习。但由于课堂时间有限,这种教学模式基本上是以教师为主体,学生的学习较为被动。并且部分学生在学习前对新知识点的了解非常有限,甚至一无所知。经常是教师讲得激情四射,学生听得不知所云。教师在课堂上为完成相关的教学任务,变得没有时间及精力与学生进行更多的互动及反馈。翻转课堂教学模式是指重新调整课堂内外的时间,将学习的主动权从教师转变为学生。学生在课前的课余时间,根据教师的任务布置,先行自主学习视频教学资料或其他学习资料,对新知识进行一定的了解和思考。在课堂上教师用相对较短的时间,将知识点中的重点和难点进行讲解,然后布置相关的练习任务。在解决问题的过程中,学生可以与教师或同学进行研究与讨论,将课堂变为师生间答疑解惑的互动场所、知识应用的实践环节,给教师和学生更多的沟通和反馈时间。2.翻转课堂教学模式的应用优势“网页设计与制作”是计算机类专业的一门重要专业基础课程。课程特点是知识点较多,但易于自学,实践性较强。目前,大部分教师都采用“教学做一体”的方式进行教学。这种方式能让学生掌握网页制作的基本技能,但也存在一些问题:由于教学内容较多,所以课上讲授时间偏长,学生精力容易分散,教学效果难以达到预期;由于课堂时间有限,课上教学方法和内容统一,无法满足不同水平学生的学习需求;教师要将更多的精力用于讲授环节,对于学生在实际应用中所带来的疑惑,无暇进行回答和解决。传统的教学模式忽略了学生作为学习主体的地位,阻碍了教学效果的提升,不利于对学生自主学习主动性、积极性与创造性的培养。翻转课堂教学模式中的课堂内外教与学的变换及研讨式、项目驱动式学习模式都与该课程的强实践性要求极为符合。因此在“网页设计与制作”课程中应尝试使用翻转课堂教学模式进行改革,以弥补传统教学模式的不足。
二、翻转课堂在“网页设计与制作”课程中的应用
翻转课堂不是忽略或降低教师的作用,而是对教师提出了更高的要求。它要求教师在设计教学过程时,不再只注重课堂,而是要将课前、课中和课后有机地结合在一起,进行综合的考虑和协调,将一条学习的主线贯穿其中。下面对翻转课堂教学模式在“网页设计与制作”课程中的应用过程加以说明。1.教学资源的准备(1)教案设计编写。教师根据课程教学大纲中的教学目标编写教案,建立一个完整的教学过程的规划设计。明确整个教学过程的教学任务、教学案例、拓展练习等具体的实施内容。(2)视频资源制作。教师采用视频录制软件,制作教学视频。每个知识点可以录制2~3个时长为5~10分钟的教学视频。大致可以分为:知识点应用的导入、基本知识点的讲解、教学案例的演示等。(3)其他资源制作。根据教案和视频,可以制作如学习指导、参考案例、拓展任务、辅助资料等学习资源。(4)上传教学资源。教师将录制好的视频资源和其他辅助教学资料上传到校内的共享学习的平台或班级QQ群中,供学生利用互联网络在课前进行下载学习。(5)问题汇总整理。学生在自主学习、完成参考案例和拓展任务时会出现各种各样的问题。教师通过学习的平台或QQ群收集整理学生的问题和反馈意见,对于简单的问题在线即可解答,对于典型或困难的问题在后面的课堂教学中重点解决。2.教学任务的实施学生通过网络下载学习视频和资料,在课前完成新课程的学习环节。通过课前的学习,学生对新知识点有了一定的了解和掌握。学生在课前向教师提交完成的练习任务或存在的疑难问题。教师在课堂上根据汇总和整理的问题或任务完成的情况,结合具体的任务实例讲解本课程中的重点或难点。这个部分一般控制在20分钟左右。然后教师布置新的拓展任务,并将学生分为小组模式,以小组的方式完成拓展任务。在分组练习的过程中,教师可以进行充分的引导和问题的解答,使学生与学生、学生与教师之间对新问题进行深入的研讨。利用这个环节加深和巩固学生对知识点的掌握及在实际问题中的应用。在课程的最后,教师进行适当的总结,并布置课后任务和新的课前学习内容。3.教学评价的建立在课程前,教师根据学生完成的任务练习或所提出的问题,评定课前的学习情况。在课程中,教师根据学生完成拓展任务及小组中的表现,评定课中的学习情况。这部分评定可以包括:自我评价、小组互评和教师评定。在课程后,通过作业练习或阶段考核,评定知识的掌握情况。通过对课前独立学习能力、问题研究讨论能力、团队合作协调能力、任务完成公关能力等多方面的综合评价,来促进学生的学习主动性、独立性和创造性,重新引导学生成为学习的主体。
三、翻转课堂教学模式应用的总结
随着翻转课堂教学模式在“网页设计与制作”课程中的不断实践和调整,其对增强课程的教学效果还是起到了明显的作用。教师所制作和提供在共享平台上的教学资源可以长期存放,并方便学生随时观看学习。对于临时缺课的学生,教师可以利用资源供其学习。对于领悟接收能力较差的学生,可以利用教学资源,方便他们在课前课后进行反复观看学习。这样既完善了个体的学习需求,又可以节省公共的课堂时间,提高课堂整体的教学效率。在整个运作过程中,笔者感受最深的是如果希望取得良好的效果,教师所付出的时间和精力要远远多于传统的课程教学所花的时间和精力。教师需要有耐心、细心和恒心;要做到课程专业知识的精、深和广;要不断地调整、不断地反思、不断地应对各种情况;要充分释放学生自主学习的潜能,将学习的掌控权交给学生。教师在课堂上转变身份,变为学习的引导者、教学资料的提供者、问题的解答者。使学生从被动学习向主动学习良好转变。
参考文献:
[1]罗金玲.基于世界大学城云平台的高职翻转课堂教学模式探究———以《Dreamweaver网页制作》课程为例[J].电脑知识与技术,2016,32(19):108-110.
[2]王娜.翻转课堂教学模式在高职网页设计与制作课程中的实践研究[J].科教导刊(电子版),2015(10):31.
[3]柏翠,程巍.浅谈翻转课堂教学模式在《Dreamweaver网页设计与制作》课程中的应用[J].科技资讯,2015,10(29):164-165.
[4]魏春艳.项目教学法在《网页设计与制作》课程中的应用[J].电子世界,2013(8):148.
[5]张金磊,王颖,张宝辉.翻转课堂教学模式研究[J].远程教育杂志,2012(4):46-51.
第二篇:网页设计与制作课程学习论文
《网页设计与制作》课程学习论文
作为一个二十一世纪的大学生,学习如何设计与制作网页变为一个必不可少的过程。经过这几个星期的学习,我开始对网页设计与制作有了初步的认识,并且学习了一些网页设计与制作的基础。随着时代的发展,网站建设越来越接近于一门艺术而不仅仅是一门技术。网站设计日有必要的益被重视,学习网页设计与制作这门学科是非常。
作为网页设计的初学者,我对网页设计非常感兴趣,一心想设计出一个美观、实用、内容丰富的个人网页。我通过自己动手、动脑,通过网络资源,老师的指导,在不断发现问题和解决问题的过程中学到了很多知识,也增强了我的创作能力和动手能力,在网页设计过程中,从构思到设计、完善、维护,整个过程我都全身心投入,使我真正学到了网页设计的知识。
互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起,作为上网的主要依托,由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局,其功能主要就是提供一种形式给每个上网者,让他们能够了解网站提供的信息。
网页设计与制作包含视听元素于版式设计两项内容,以主题鲜明、形式与内容统一、强调整体为设计原则,具有互交性与持续性、综合性、版式的不可以控性、艺术与技术的结合的紧密型等特点。美和功能都是为了表达网站的主题。我认为在一个网站中,最重要的页面当属主页,所以在此以主页为例,说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素:文字,图片,排列方式和主色调,这四者相辅相成,缺一不可。图片要素
要设计出漂亮的主页,首先要成为计算机图形高手,仅这一点就可以让初学者花上一年半载的时间。排列方法要素,主页的第二个要素是排列方法,即网页布局。色彩在网页所占比重很大。有了合理清新的色调,会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的,一个网站必须有一种或两种主题色。不至于让浏览者迷失方向,也不至于单调乏味。一般来说,页面的主体文字应尽量使用黑色等较深的颜色,与背景对比明显,按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色,再用红色和黑色作为配色,就能表达出严肃、稳重的效果。网页作为一种版面,既有文字,又有图片;文字有大有小,还有标题和正文之分;图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众,不能简单地将其罗列在一个页面上,否则会搞得杂乱无章。关于具体的网页布局,常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等,关于它们,在网页设计的相关书籍中或者在网络上都可以看到详细的叙述
网页作为传播信息的一种载体,同其他出版物如报纸、杂志等在设计上有许多共同之处,也要遵循一些设计的基本原则。但是,由于表现形式、运行方式和社会功能的不同,网页设计又有其自身的特殊规律。网页的艺术设计,是技术与艺术的结合,内容与形式的统一。一般的来说,绝大多数普通受众图形,插件,applets和其它有关的高级Web浏览器特性。对我们来说,页面的实用可能比漂亮更重要,对于用户来说,没有什么比页面能够快速下载更重要了,简而言之,精简你的站点,这是一条最佳的捷径。就站点设计而言,的确能够通过成功的图形设计招徕或者丢失访问者。并非所有的访问者可以完全看到图片,某些人为了加快存取网络的速度已经关闭了浏览器端的图形。简而言之,图形并不能正确的在客户端加载。然而,图形经常被用来作为导航按钮。使用可以把一个浏览器分成几个不同的窗口,对于站点的结构的把握是一个不错的方法。但是,你还是必须知道,还是有人在使用不支持帧的浏览器。在你开始打算设计一个帧的时候,你该仔细的考虑考虑你是否的确真的需要。经常,你这样的需求可以通过表格来组织站点的结构。网页设计涉及到对多种软件、多种知识的学习和应用,以及个人的审美观等等。所以要想制作出漂亮的网页,需要一个逐步学习和经验积累的过程。
随着互联网的不断发展和中国网络人口的日益增长,建立个人网站,不但可以很好的展示自己,而且可以提高自己在计算机应用方面的能力。个人在设计时考虑的多为个人的兴趣喜好,而不注重商业的展示。内容以反映个人为中心,从而使个人网站真正的成为展示自己的网络名片。一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。
由于平时课程比较繁忙,学习时间比较少,对于网页设计软件的强大功能运用得还不够。不知不觉网页设计的课程将要结束了,这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中,我学习了Flash、Fireworks、Html语言、IIS、网站建设的基本思想等重要内容。在网页设计过程中,由于没有网页制作代码的知识,所以在设计时也遇到了很多麻烦,有时插入一个特效脚本也是很麻烦。在网页制作过程中,想提高设计水平,想有个理想的网页,必须学会代码的运用,我将在以后的学习过程中不断加强这方面的学习,希望老师能简单介绍一下代码,让我也对它有个初步的认识,以后再加强学习也才会有所提高。
总体来说,通过今次的对网页设计的学习,有收获也有遗憾、不足的地方,但我想,我已经迈入了网页设计的大门,只要我再认真努力的去学习,去提高,凭借我对网页设计的热情和执着,我将来设计出的网页会更加专业,更完善。也希望老师在今后的日子里多指导。网页设计还有更多的技巧,有待于我们去挖掘和研究。
第三篇:网页设计与制作课程教学大纲
网页设计与制作课程教学大纲
1.课程设计的指导思想
(一)课程性质
1.课程类别:专业选修课 2.适应专业:软件工程 3.开设学期:第二学期
4.学时安排:周学时2+2,总学时72 5.学分分配:
(二)开设目的
本课程是计算机类专业的专业选修课,它是一门操作性和实践性很强的课程。本课程开设的主要目的,是为了适应web技术的飞速发展,为学生今后在学习、工作中建立网站及网页制作打下基础。通过本课程的学习,让学生了解一定的网络应用基础知识;能够熟练掌握网页制作工具——网页三剑客Dreamweaver、Fireworks、Flash的使用,能自行设计各种网页、编辑一定的平面图像、网络动画。具备网站的建立、规划、管理、发布的相关技术及网页制作的操作技能,能独立设计 WEB 站点。
(三)基本要求
1、知识要求:
(1)网页设计基础知识(2)DREAMWEAVER 的使用(3)FIREWORKS 图像处理(4)FLASH 的使用(5)网站制作实例
2、能力要求:
(1)学会熟练运用 Dreamweaver、Flash 和 Fireworks 应用软件;(2)熟练掌握使用绝对和相对 URL,创建超链接,图像链接;(3)熟练掌握设置颜色、文本格式和列表;(4)掌握在网页中添加 CSS 的方法
(5)掌握在网页中嵌入图像、声音、多媒体信息的方法;(6)熟练掌握表格的使用方法,学会利用表格布局网页;(7)掌握框架制作网页的方法,会使用框架设计网页;(8)掌握用 Fireworks 处理矢量图和位图。(9)掌握用 Flash 制作网页动画。
3、素质要求:
(1)具有勤奋学习的态度,严谨求实、创新的工作作风;(2)具有良好的心理素质和职业道德素质(3)具有高度责任心和良好的团队合作精神
(4)具有一定的科学思维方式和判断分析问题的能力(5)具有较强的网页设计创意思维、艺术设计素质。
(四)主要内容 计算机网站基础知识、网页三剑客DREAMWEAVER 的使用、FIREWORKS 图像处理、FLASH 的使用。
(五)先修课程 计算机基础
(六)后继课程 Web 程序设计
(七)考核方式 上机考试
(八)使用教材
(九)参考书目
1、《网页设计与制作技术教程》 作者:王传华、段青玲、马钦? 清华大学出版社?第二版.2、网页和网站制作基础操作与实例教程.陕西科学技术出版社
3、Dreamweaver8PhotoshopCS2Flash8网页制作教材.陈笑;李景池.清华大学出版社
4、《使用网站技术基础》作者:德力、卢明波、王化宇.内蒙古教育出版社 教学内容
第一部分 网页设计与制作基础知识 教学目的
使学生了解什么是网页,网站,网页元素等概念 主要内容 什么是网页,网站;2 Html语言基础; 构建网站的一般过程; 教学要求
了解:网站设计与制作的前期准备 掌握: 绘制网站首页效果图 第二部分 网页制作软件Dreamweaver 教学目的
使学生了解网站设计概念;掌握软件界面及站点建立,Dreamweaver的基本功能,表单和CSS样式表的应用及网页制作的高级技术。主要内容
1、网站设计概念,要求达到“了解掌握”程度 网站的主题定位
网站的风格和创意设计 准备材料和结构规划 页面布局
定义站点、申请域名、空间 认识HTML语言
2、初识软件界面及站点建立,要求达到“了解掌握”程度 Dreamweaver软件界面 对象控制面板的使用 建立本地站点 建立远程站点 站点的更新和管理
3、Dreamweaver的基本功能,要求达到“掌握”程度,添加文本 插入图片 插入表格
超级链接和导航条的创建 插入多媒体
4、表单和CSS样式表的应用,要求达到“了解掌握”程度 插入表单
插入表单对象
创建并链接到外部CSS样式
5、网页制作高级技术,要求达到“了解掌握”程度 创建层 设置层
层与表格的相互转换 创建框架 行为操作 创建模板 模板的应用 教学要求
了解:网站设计概念
掌握:软件界面及站点建立,Dreamweaver的基本功能,表单和CSS样式表的应用及网页制作的高级技术。
第三部分 图形制作与处理软件Firewoks 教学目的
使学生了解Fireworks软件界面;掌握图像的绘制和编辑,文本与颜色的使用,层与元件的使用,滤镜和特效的使用,按钮和动画的制作。主要内容
1、Fireworks简介,要求达到“了解掌握”程度 Fireworks概述
Fireworks的系统需求 Fireworks的新增功能 Fireworks窗口界面 创建新文档
导入和导出文档
2、图像的绘制和编辑,要求达到“掌握”程度 绘制图像 编辑图像
3、文本与颜色,要求达到“掌握”程度 文本的使用 颜色的使用 设置画布
4、层与元件,要求达到“掌握”程度 层的使用 元件的使用
5、滤镜和特效,要求达到“了解掌握”程度 使用滤镜 使用特效
6、按钮和动画,要求达到“了解掌握”程度 按钮 动画
教学要求
了解:Fireworks软件界面
掌握:图像的绘制和编辑,文本与颜色的使用,层与元件的使用,滤镜和特效的使用,按钮和动画的制作。第四部分 动画制作与编辑软件Flash 教学目的
使学生了解Flash基本工作环境;掌握Flash绘图工具的使用方法,Flash动画基础及FIash影片制作和发布。主要内容
1、初识Flash,要求达到“了解”程度 Flash基本工作环境 认识舞台与时间轴.认识不同作用的面板
2、Flash绘图工具,要求达到“掌握”程度 矢量图与位图 线型与颜色
线条的绘制与修改 填充图形的绘制,选取工具 文本
变换工具 其他工具
3、Flash动画基础,要求达到“掌握”程度 层 帧 元件
Flash的基本操作
4、FIash影片制作和发布,要求达到“掌握”程度 动画基础 逐帧动画 形状渐变 动作渐变 蒙板
运动导线 按钮
轨迹追踪 导入声音 加入视频 测试发布 教学要求
了解:Flash基本工作环境
掌握:Flash绘图工具的使用方法,Flash动画基础及FIash影片制作和发布。第五章 综合实例 教学目的
使学生能够熟练掌握网页制作工具Dreamvwaver、Fireworks、Flash的使用,能自行设计各种网页、编辑一定的平面图象、网络动画。具备网站的建立、规划、管理、发布的相关技术及网页制作的操作技能,能独立设计 WEB 站点。主要内容
综合实例,要求达到“掌握”程度 网页设计准备工作
用Fireworks设计网页结构 用Dreamweaver生成网页 用Flash制作网页动画 整理网页
完成小型WEB站点网页的规划、设计、管理与维护 教学要求
掌握:Web网站建设的基本方法,掌握网页制作工具的使用方法和技巧,培养学生设计网站的能力。课时分配及其它
(一)课时分配
课程总教学时数为90学时,安排在第二学期,每周3+2学时,上课18周。具体分配如下
教学内容 讲授学时数
章次
第一部分 网页设计与制作基础知识 4 第二部分 网页制作软件Dreamweaver 12 第三部分 图形制作与处理软件Firewoks 8 第四部分 动画制作与编辑软件Flash 8 第五部分 综合实例 4 合计
实验学时数 10 8 2 36
(二)考核要求
平时成绩(含考勤、作业与实验)占50%,期末(上机考试)成绩占50%。
第四篇:网页设计与制作课程作业任务书
广新09级《网页设计与制作》课程作业任务书
一、目的与任务
《网页设计与制作》课程作业是《网页设计与制作》课程教学中的一个重要的环节,是对学生进行的一次较为全面的网页设计与制作的训练和考核。其基本目的是:
(1)培养学生理论联系实际的设计思想,训练综合运用所学的基础理论知识,结合生产实际分析和解决网页设计与制作中问题的能力,从而使基础理论知识得到巩固和加深。
(2)学习掌握网站的一般设计过程和方法。
(3)对学生所学知识的程度进行考核。
二、教学基本要求
(1)确定设计网站的主题和风格。
(2)合理设计网站结构图。
(3)根据网站结构图,对各个页面进行布局和样式设计。
(4)完成课程作业报告。
三、课程作业题目具体要求
1、网站有一个主题,比如:个人网站、购物网站等;
2、每个网站至少包含5个以上的html文件;(网站的首页统一名称为:index.html)
3、最后提交两个内容:
1)打印纸质报告(具体要求见报告模板);
2)网站源文件。
做完后找老师验收通过后发到365109338@qq.com。邮件主题上一定要写明:学号+班级+姓名+网页设计与制作
第五篇:网页设计与制作-论文(本站推荐)
第一章
绪论
摘 要
本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上,着重使用JavaScript作为工具语言进行网页设计与制作的实际操作,分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述,并利用具体的实例进行验证。
本论文主要章节如下,第一章:绪论,本章主要介绍网页设计的相关知识。第二章:网页设计语言概述,本章主要介绍网页设计的语言——HTML,以及用于编辑HTML语言的软件,为后续工作奠定基础。第三章:基于对象的JavaScript语言,本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章:内部对象系统的使用,本章主要介绍使用浏览器的内部对象系统,可实现与HTML文档进行交互。第五章:WEB页面信息的交互——窗体与框架,本章主要介绍实现网页的动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。
关键词: 网页制作;网页设计;HTML;ASP
第一章
绪论
第一章 绪论
随着21世纪的到来,人们更深切地感受到计算机在生活和工作中的作用越来越重要,越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要,更是事业发展的需要。网页设计与制作是计算机能力的具体表现,本章主要介绍网页设计的相关知识。
1.1 网页设计概述
网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台,离开网站(或者只是利用第三方网站)去谈电子商务是不可能的。企业的网址被称为“网络商标”,也是企业无形资产的组成部分,而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。
1.2 网页设计的要素
网页设计的两大要素是:整体风格和色彩搭配。
一、确定网站的整体风格
在这里,我提供给大家一些参考经验:
1.将你的标志logo,尽可能的放在每个页面上最突出的位置。2.突出你的标准色彩。
3.总结一句能反映贵站精髓的宣传标语!
4.相同类型的图像采用相同效果,比如说标题字都采用阴影效果,那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的!
二、网页色彩的搭配
1.用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。
2.用两种色彩。先选定一种色彩,然后选择它的对比色。
3.用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。
1.3 大作业目的和意义
本大作业主要是对网页设计与制作的语言基础上进行探讨,主要内容如下:通过已经做好的网页,分析html网页设计技术、XML技术、Java Applet技术和Javascript技术在网页设计中的应用。
第一章
绪论
1.4 要分析的网页
第一章
绪论
第一章
绪论
第二章
HTML网页设计技术的应用
第二章 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。
2.1.4 html语言在网页设计中的应用
第二章
HTML网页设计技术的应用
2.2.3JavaScript技术在网页设计中应用
一、JavaScript概述
JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷,它是Java与HTML折衷的选择,具有以下几个基本特点:
1、是一种脚本编写语言
JavaScript是一种脚本语言,它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。
它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样,需要先编译,而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起,从而方便用户的使用操作。
2、基于对象的语言。
JavaScript是一种基于对象的语言,同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此,许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。
3、简单性
JavaScript的简单性主要体现在:首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型,并未使用严格的数据类型。
4、安全性
JavaScript是一种安全性语言,它不允许访问本地的硬盘,并不能将数据存入到服务器上,不允许对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
5、动态性的
JavaScript是动态的,它可以直接对用户或客户输入做出响应,无须经过Web服务程序。它对用户的反映响应,是采用以事件驱动的方式进行的。所谓事件驱动,就是指在主页(Home Page)中执行了某种操作所产生的动作,就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。
6、跨平台性
JavaScript是依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑,软件仅需一个字处理软件及一浏览器,无须WEB服务器通道,通过自己的电脑即可完成所有的事情。
总之,JavaScript 是一种新的描述语言,它可以被箝入到 HTML 的文件之中。JavaScript语言可以做到回应使用者的需求事件(如:form的输入),而不用任何的网路来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给伺服端(server)处理,再传回来的过程,而直接可以被客户端(client)的应用程式所处理。
第二章
HTML网页设计技术的应用
第五章
色彩在网页中的应用
第五章 色彩在网页中的应用
5.1色彩在网页中的应用
色彩是艺术表现的要素之一。在网页设计中,我们的设计师根据和谐、均衡和重点突出的原则,将不同的色彩进行组合.搭配来构成美丽的页面。根据色彩对人们心理的影响,合理地加以运用。
先选定一种色彩,然后调整透明度或者饱和度,这样的页面看起来色彩统一,有层次感。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。
在网页配色中不要将所有颜色都用到,尽量控制在三至五种色彩以内。背景和前文的对比尽量要大以便突出主要文字内容。
5.2主页色彩的处理
色彩是人的视觉最敏感的东西。主页的色彩处理得好,可以锦上添花,达到事半功倍的效果。色彩总的应用原则应该是“总体协调,局部对比”,也就是:主页的整体色彩效果应该是和谐的,只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上,可以根据主页内容的需要,分别采用不同的主色调。因为色彩具有象征性,例如:嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色,例如:军警的橄榄绿,医疗卫生的白色等。色彩还具有明显的心理感觉,例如冷、暖的感觉,进、退的效果等。另外,色彩还有民族性,各个民族由于环境、文化、传统等因素的影响,对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性,可以使我们的主页具有深刻的艺术内涵,从而提升主页的文化品位。
5.3常用的配色方案
1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用,可使主页呈现温馨、和煦、热情的氛围。
2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用,可使主页呈现宁静、清凉、高雅的氛围。
3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如:红与绿、黄与紫、橙与蓝等。这种色彩的搭配,可以产生强烈的视觉效果,给人亮丽、鲜艳、喜庆的感觉。
第五章
色彩在网页中的应用
最后,还要考虑主页底色(背景色)的深、浅,这里借用摄影中的一个术语,就是“高调”和“低调”。底色浅的称为高调;底色深的称为低调。底色深,文字的颜色就要浅,以深色的背景衬托浅色的内容(文字或图片);反之,底色淡的,文字的颜色就要深些,以浅色的背景衬托深色的内容(文字或图片)。这种深浅的变化在色彩学中称为“明度变化”。当然,色彩的明度也不能变化太大,否则屏幕上的亮度反差太强,同样也会使读者的眼睛受不了。
5.4合理搭配网页色彩
网页的色彩是树立网站形象的关键之一,网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩,会更好的表现主题,吸引用户的注意力。网页色彩涉及到艺术知识,让美术教师参加网页色彩设计,可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前景色对比要大,以突出主要内容
网站给人的第一印象来自视觉冲击,不同的色彩搭配产生不同的效果,并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩,要用于网站的标志,标题,主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用,但应当只是作为点缀和衬托,绝不能喧宾夺主。一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色,黄/橙色,黑/灰/白色三大系列色。
第五章
色彩在网页中的应用
第六章 WEB页面信息的交互——窗体与框架
要实现网页的动态交互,必须掌握有关窗体对象(Form)和框架对象(Frames)更为复杂的知识。
6.1窗体基础知识
窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互,而用不着在之前首先进行数据输入,就可以实现动态改变Web文档的行为。
6.1.1窗体对象
窗体(Form):它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体,使用Forms[]数组来实现不同窗体的访问。
在Forms[0]中共有三个基本元素,而Forms[1]中只有两个元素。窗体对象最主要的功能就是能够直接访问HTML文档中的窗体,它封装了相关的HTML代码:
6.1.2 窗体对象的方法窗体对象的方法只有一个--submit()方法,该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体,则使用下列格式:
document.mytest.submit()
第五章
色彩在网页中的应用
6.1.3 窗体对象的属性
窗体对象中的属性主要包括以下:elements name action target encoding method。除Elements外,其它几个均反映了窗体中标识中相应属性的状态,这通常是单个窗体标识;而elements常常是多个窗体元素值的数组,例:
elements[0].Mytable.elements[1] 6.1.4 访问窗体对象
在JavaScript中访问窗体对象可由两种方法实现:(1)通过访问窗体
在窗体对象的属性中首先必须指定其窗体名,而后就可以通过下列标识访问窗体如:document.Mytable()。
(2)通过数组来访问窗体
除了使用窗体名来访问窗体外,还可以使用窗体对象数组来访问窗体对象。但需要注意一点,因窗体对象是由浏览器环境的提供的,而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问:
document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗体的先决条件
在JavaScript中要对窗体引用的条件是:必须先在页面中用标识创建窗体,并将定义窗体部分放在引用之前。
6.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按钮时,产生该事件。例 :
........(5)checkbox检查框功能:实施对一个具有复选框中元素的控制。属性:
name:设定提交信息时的信息名称。
Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecked:默认状态 方法:
click()该方法使得框的某一个项被选中。事件:
Onclick:当框的选被选中时,产生该事件。(6)radio无线按钮
功能:实施对一个具单选功能的无线按钮控制。属性:
Name:设定提交信息时的信息名称,对应HTML文档中的radio的name相同 Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中的radio的name。
length:单选按钮中的按钮数目。defalechecked:默认按钮。
checked:指明选中还是没有选中。
第五章
色彩在网页中的应用
index:选中的按钮的位置。方法:
chick():选定一个按钮。事件:
onclick:单击按钮时,产生该事件。(7)hidden:隐藏
功能:实施对一个具有不显示文字并能输入字符的区域元素的控制。属性:
name:设定提交信息时的信息名称,对应HTML文档的hidden中的Name。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档hidden中的value。
defaleitvalue:默认值(8)Password口令
功能:实施对具有口令输入的元素的控制。属性:
Name:设定提交信息时的信息名称,对应HTML文档中password中的name。Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中password中的Value。
defaultvalu:默认值 方法:
select():加亮输入口令域。
blur():使这丢失passward输入焦点。focus():获得password输入焦点。(9)submit提交元素
功能:实施对一个具有提交功能按钮的控制。属性:
name:设定提交信息时的信息名称,对应HTML文档中submit。
Value:用以设定出现在窗口中对应HTML文档中Value的信息,对应HTML文档中value。
方法
click()相当于按下submit按钮。事件:
onclick()当按下该按钮时,产生该事件。
6.3窗体对象实例
下面我们演示通过点击一个按钮(red)来改变窗口颜色,点击“调用动态按钮文档”调用一个动态按钮文档。
test8_1.htm
调用动态按钮文档