首页 > 实用范文 > 其他范文
网页设计与制作的应用论文[精选多篇]
编辑:清幽竹影 识别码:130-1043748 其他范文 发布时间: 2024-06-21 10:05:38 来源:网络

第一篇:网页设计与制作的应用论文

项目驱动教学法是以项目为主线,将学生的学习活动与实际的项目相结合,师生共同研究并实施一个具体的项目而进行的教学活动,是鼓励学生积极参与、协作、创新的一种教学模式。在《网页设计与制作》课程教学过程中引入具体的项目,以项目带动课程各知识点的学习,采用循序渐进、由浅入深的方式开展课堂教学,不仅能够调动学生学习的积极性,产生学习的兴趣,还能培养他们的实践动手能力、协同工作能力和创新能力。、现状分析

《网页设计与制作》是计算机应用技术专业的必修课,同时也是核心课,作为《Asp.net程序设计》的前导课程,需要学生熟练掌握网站前台界面设计,为将来开发动态网站打下良好的基础。然而,传统教学存在问题如下:

1.1 教学方法难以吸引学生兴趣

传统方式由教师在多媒体教室讲解,学生上机完成实验实例,虽然也能学到制作网页的一些知识,但是很难激发学生学习的兴趣。几次上机后,部分同学就产生惰性情绪,布置的案例完成得越来越少,久而久之,甚至有少数学生放弃该课程学习。

1.2 教学缺乏整体性

逐章节展开的教学,尽管也涵盖了网页设计相关内容,但是上机实验时只是完成案例中某部分相关知识点的实践,学生还是不会制作一个完整的网站,缺乏对网站制作流程的系统性认识。

1.3 缺乏创新意识

以教师为主体的教学最大弊病在于学生缺乏主动意识,他们更多的是模仿教师给的案例或者互联网上发布的网站,几乎没有创新。被动的学习使得学生产生只要把老师布置的任务做完就万事大吉的心理,根本不会想到去主动思考与创新。

1.4 考核方式单一

对于这类实践性强的课程,以往的试卷考试难以对学生的动手能力进行评价,因此发掘新的考核方式,打破传统思维着重考核学生的创新思维能力和动手实践能力就尤为必要了。、教学内容选取

经过市场调研,《网页设计与制作》课程相关职业岗位主要是“网页界面设计”和“网站管理与维护”,根据这两个职业岗位能力要求,选取合适的教学内容。

3、项目式教学设计

教学过程中,围绕着“欣赏网站”、“设计网站”和“维护网站”展开,通过欣赏往届优秀学生作品以及国内外不同网站风格,引起学生学习的兴趣。一个完整的项目网站由若干个分页面构成,因此各分页面设计是教学的重点,也是难点。网站设计好后,需要定期对网站进行维护,包括检查和修复超级链接、内容更新、网站推广等等。分页面设计分为初级阶段和高级阶段,初级阶段以基于表格布局的页面设计为主,高级阶段以基于Web标准的页面设计为依据,具体教学设计情境如表2所示。选取合适的项目实例是项目教学法能否成功实施的关键。项目的选取可依据职业岗位能力对应的教学内容,既要涵盖该课程的基本知识点,又要考虑学生的实际基础,难易得当。在分析项目、讨论、实施项目的过程中,学生即可在轻松、融洽的氛围中掌握网页制作的技巧。

4、考核方式改革

根据学院要求,传统课程一般按照期末卷面考试成绩占60%,平时成绩占40%计算出总评成绩。显然,这种分配制度已不适合新方法下的教学。因此,依据实际教学情况重新分配了成绩比例,期末作品占50%,展示讲解作品占20%,出勤平时表现占30%。学生以分组或独立的方式完成一个完整的网站作品,教师给出网站设计基本要求,期末采用集中讲解、点评的方式,由每位学生在多媒体教室面对全班同学介绍网站的内容、制作技巧、特色之处等,教师和学生进行点评,肯定其优点,同时对不足之处提出改进思路。学生对此方式表现出强烈的热情,遇到网页中的与众不同处会提出各种问题,有时候甚至刨根问底具体制作步骤。、结语

实践证明,在《网页设计与制作》课程教学中采用项目驱动教学法取得了良好的效果,学生从零起点到熟练掌握网页设计技巧,变化突飞猛进。几乎所有的同学都能够独自搜集素材开发一个小型的网站,并且在展示成果的过程中相互学习,取长补短。项目驱动教学法改革了计算机类课程教学模式、教学方法,更新了教学理念、教学内容,完善了课程评价体系,使学生具备网站规划,网页制作、脚本代码编写等综合技能。如何在计算机类专业课程中广泛实施项目教学法,需要我们进一步研究和实践。

第二篇:网页设计与制作-论文(本站推荐)

第一章

绪论

摘 要

本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上,着重使用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元素值改变时,产生该文件。例:

...<script language =“Javascirpt”> document.mytest.value=“that is a Javascript”;document.mytest.select();document.mytest.blur();</script>(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按钮时,产生该事件。例 :

...<script language=“javascirpt”> document.elements[0].value=“mytest”;//通过元素访问 或

document.testcallvalue=“mytest”;// 通过名字访问 </script>.....(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 <script Language=“JavaScript”> //原来的颜色

document.bgColor=“blue”;

第五章

色彩在网页中的应用

document.vlinkColor=“white”;document.linkColor=“yellow”;document.alinkcolor=“red”;//动态改变颜色

function changecolor(){

document.bgColor=“red”;

document.vlinkColor=“blue”;

document.linkColor=“green”;

document.alinkcolor=“blue”;} </script> 调用动态按钮文档

第三篇:网页设计与制作

《网页设计与制作》教学大纲

第一部分 大纲说明

一、课程的性质和任务

《网页设计与制作》是高等职业学校计算机专业的一门必修的专业基础课。本课程讲述了网站创建、网页制作基本知识、Dreamweaver网页制作集成工具使用的方法等内容。通过本课程的学习,使学生掌握构建网站的基本知识,熟悉网页开发平台的使用,能够独立的创建个人网站。

二、课程教学要求

1、理论和实践相结合

本课程是计算机专业的一门必修的专业课程,是理论和实践相结合的课程。该课程重点是构建网站的基本知识,熟悉网页开发平台的使用,能够独立的创建个人网站。在教学过程中 要与Dreamweaver MX、Flash MX和Firework MX结合起来,同时,应该使课堂理论教学与学生参与专业实践相结合,在课外安排一定的时间进行专业实践,这样学生在学习中,通过理论学习和上机操作实验熟悉构建网站的流程,能够进行简单图像和动画的制作、加工和处理,能够独立的创建个人网站。

2、加强课堂练习与课后练习

为了训练和培养学生的实际操作能力,必须要求学生进行课堂练习与课后作业练习,加强学生的专业技能和基础理论的学习。

三、教学时数与教材

网页设计与制作课程教学总学时数为54学时,其中授课时间为32学时,实验课时为22学时;《网页设计与制作》,田博文编著,人民邮电出版社,202_年。

四、课程教学方法

在网页设计与制作的教学中应当注意:

1、教学方法

本课程应采用理论与实践结合,讲授与自学结合,实践操作与课堂讨论结合的“三结合”教学方法。

2、教学形式

本课程的教学形式可以采用班组教学、课堂讲授、利用业余时间自学等形式。

3、实践性环节教学要求

本课程具有较强的实践性和应用性,教学过程中应该贯彻理论与实践相结合的原则,有重点的组织一些课堂讨论和实践操作以及单元测试,督促并检查学生按时完成课外作业,有条件的情况下,可以组织学生到有关部门及单位参观、座谈、以增强学生的感性认识。

第二部分 教学内容和教学要求

第一章 基础知识(2学时)教学目的与要求:

通过本章学习,学生应了解网页被执行的详细过程,以及与网络相关的基本定义和概念,并掌握在网络中建立网站的方法。

重点难点:在网络中建立网站的方法教学内容: 教学内容:

(一)网络基础知识

(二)初识网页

(三)网上安家

第二章 创建本地虚拟站点(4学时)教学目的与要求:

通过本章学习,让学生熟练掌握在本地创建虚拟站点与创建文件和文件夹的方法,以及站点管理器的使用,了解制作网站的准备工作。重点难点:创建虚拟站点与创建文件和文件夹的方法 教学内容:

(一)准备工作

1、了解网站的服务群体

2、确定网站的主题

3、画出结构图

4、确定网站命名规则

(二)创建虚拟网站

(三)其他功能

1、站点地图布局

2、保存站点地图

3、设计备注

第三章 文档、文本和链接(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握创建、保存文档的方法,以及文本的各项参数设置和文本超级链接、图像超级链接、下载链接的使用方法,了解文本各项参数的源代码表示方法。

重点难点:创建、保存文档的方法,以及文本的各项参数设置和文本超级链接、图像超级链接、下载链接的使用方法 教学内容:

(一)新建文档

(二)建立超级链接

1、添加文本链接

2、图像超级链接

3、电子邮件链接

4、下载链接

5、命名锚记 第四章 Web图像(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握在Dreamweaver MX中使用图像的一些基本方法和技巧、设置网页背景色和背景图像的方法、图像映射和跟踪图像的方法,了解GIF和JPEG两种图像格式的异同点和使用环境。

重点难点:设置网页背景色和背景图像的方法、图像映射和跟踪图像的方法 教学内容:

(一)网页中的色彩

(二)图像格式

1、GIF格式

2、JPEG格式

3、如何正确地使用GIF

(三)Dreamweaver MX中的图像技术

(四)设置网页背景

1、改变网页背景色

2、设置背景图像

(五)在Dreamweaver 中巧妙地处理图像

1、给图像添加文字说明

2、图像映射

3、跟踪图像

第五章 Fireworks MX中的图像技术(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握文本工具、绘图工具和握样式的使用,以及GIF、JPEG格式图像的输出,图像处理技术和在Fireworks MX中制作HTML网页的过程。

重点难点: 文本工具、绘图工具和握样式的使用,以及GIF、JPEG格式图像的输出,图像处理技术和在Fireworks MX中制作HTML网页的过程。教学内容:

(一)制作漂亮的文字

(二)制作个性化的网站标志

(三)制作网页背景图像

(四)对图像进行美化

(五)制作HTML网页

(六)Dreamweaver MX与Fireworks MX的配合使用

第六章 表格(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握表格的创建、编辑过程、表格的嵌套、表格的宽度、边框、背景色和背景图像的位置和表格的各种标签的源代码,了解表格的组成及各项参数的含义。

重点难点: 表格的创建、编辑过程、表格的嵌套、表格的宽度、边框、背景色和背景图像的位置和表格的各种标签的源代码 教学内容:

(一)表格的组成(二)建立表格

(三)表格属性

(四)在表格内添加元素

(五)选择表格

(六)编辑表格

(七)增加、删除行和列及拆分、合并单元格

(八)表格的缩放

1、用拖放方法缩放表格的大小

2、用表格的[属性]面板改变表格尺寸

(九)一个完整的页面制作过程

1、页眉的制作

2、左侧导航区的制作

3、制作中间主要区域

4、制作右侧新闻摘要区 第七章 框架(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握创建、保存框架的过程、框架组、框架的属性设置和框架中链接的目标显示窗口、了解框架的含义。

重点难点: 创建、保存框架的过程、框架组、框架的属性设置和框架中链接的目标显示窗口 教学内容:

(一)建立框架

1、建立框架

2、插入框架

3、添加内容

4、保存框架

(二)选取框架

1、选择一个框架

2、选择框架组

(三)框架和框架组的属性

1、框架属性

2、框架组属性

(四)编辑框架

(五)框架中链接的目标显示窗口 第八章 表单(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握各表单的属性,了解表单的含义。重点难点:各表单的属性 教学内容:

(一)创建一个反馈表单

(二)测试表单页

(三)表单及表单域的各项属性

第九章 插入其他对象(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握水平线、6种文件头标签、插入字符的使用,熟练在网页中插入多种格式的视频。

重点难点:水平线、6种文件头标签、插入字符的使用,熟练在网页中插入多种格式的视频 教学内容:

(一)插入水平线

(二)插入文件头标签

(三)插入字符

(四)插入多媒体

1、插入Flash动画

2、插入插件

3、播放“*.rm”格式影片 第十章 HTML样式和CSS样式(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握HTML样式的用法、CSS样式的创建、3种放置CSS代码的方式,了解CSS样式的定义。

重点难点:HTML样式的用法、CSS样式的创建、3种放置CSS代码的方式 教学内容:

(一)HTML样式

1、新建样式

2、应用HTML样式

3、清除HTML样式

4、在面板中处理样式

(二)什么是CSS样式

(三)[CSS样式]面板

(四)CSS的属性

(五)使用Dreamweaver MX中的CSS样式编辑器

1、创建自定义样式

2、重定义HTML标签

3、使用CSS选择器

4、附加样式表 第十一章 Flash MX(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握用工具箱中的工具创建和编辑图形、视频、音频的导入、运动动画、变形动画的创建、运动引导动画、遮罩动画的创建,了解矢量动画、位图图像的定义。

重点难点: 用工具箱中的工具创建和编辑图形、视频、音频的导入、运动动画、变形动画的创建、运动引导动画、遮罩动画的创建 教学内容:

(一)基础知识

1、电脑动画

2、矢量图形

3、位图图像

4、Flash动画的特点

(二)Flash MX

(三)创建图形

(四)编辑图形

(五)素材和元件

1、视频的导入

2、音频的导入

3、元件

(六)创建基本动画

1、运动动画和变色动画

2、变形动画

3、逐帧动画

(七)创建多层动画

1、制作运动引导动画

2、制作遮罩动画

(八)作品的测试和发布

1、作品的测试

2、作品的优化

3、作品的导出和发布 第十二章 模板和库(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握模板、库的创建方法,了解[资源]面板的一般用法。

重点难点: 模板、库的创建方法 教学内容:

(一)[资源]面板

(二)Dreamweaver MX中的模板

1、创建模板

2、创建可编辑区域

3、创建重复区域

4、创建重复表格

5、编辑模板

6、使用模板

(三)Dreamweaver MX中的库

1、什么是库

2、怎样使用库

第十三章 源代码相关功能及行为(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握13种行为的创建过程、代码提示、标签选择器、标签编辑器、标签检查器的使用,了解标签管理器的一般用法。重点难点:13种行为的创建过程、代码提示、标签选择器、标签编辑器、标签检查器的使用

教学内容:

(一)查看源代码

(二)管理标签库

(三)Dreamweaver中的编码

1、使用代码提示加入背景音乐

2、使用代码片断快速创建网页

3、使用标签选择器插入浮动框架

4、使用标签编辑器编辑标签

5、用标签检查器编辑标签

6、使用快速标签编辑器插入标签

(四)插入HTML注释

(五)[行为]面板

(六)事件

(七)动作

1、播放声音

2、打开浏览器窗口

3、弹出信息

4、调用JavaScript

5、改变属性

6、交换图像

7、检查浏览器

8、检查表单

9、控制Shockwave或Flash

10、转到URL

11、设置导航条图像

12、跳转菜单

13、弹出式菜单 第十四章 网页发布(4学时)教学目的与要求:

通过本章的学习,让学生熟练掌握设置FTP上传的步骤、发布网页的过程、检查、改变站点范围的链接的方法、检查、改变站点范围的链接的方法、清理文档的过程、同步的使用方法,了解报告的作用。

重点难点:设置FTP上传的步骤、发布网页的过程、检查、改变站点范围的链接的方法、检查、改变站点范围的链接的方法、清理文档的过程、同步的使用方法 教学内容:

(一)设置FTP上传

(二)发布网页

(三)报告

(四)检查站点范围的链接

(五)改变站点范围的链接

(六)查找和替换

(七)清理文档

(八)同步

第四篇:网页设计与制作课程学习论文

《网页设计与制作》课程学习论文

作为一个二十一世纪的大学生,学习如何设计与制作网页变为一个必不可少的过程。经过这几个星期的学习,我开始对网页设计与制作有了初步的认识,并且学习了一些网页设计与制作的基础。随着时代的发展,网站建设越来越接近于一门艺术而不仅仅是一门技术。网站设计日有必要的益被重视,学习网页设计与制作这门学科是非常。

作为网页设计的初学者,我对网页设计非常感兴趣,一心想设计出一个美观、实用、内容丰富的个人网页。我通过自己动手、动脑,通过网络资源,老师的指导,在不断发现问题和解决问题的过程中学到了很多知识,也增强了我的创作能力和动手能力,在网页设计过程中,从构思到设计、完善、维护,整个过程我都全身心投入,使我真正学到了网页设计的知识。

互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起,作为上网的主要依托,由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局,其功能主要就是提供一种形式给每个上网者,让他们能够了解网站提供的信息。

网页设计与制作包含视听元素于版式设计两项内容,以主题鲜明、形式与内容统一、强调整体为设计原则,具有互交性与持续性、综合性、版式的不可以控性、艺术与技术的结合的紧密型等特点。美和功能都是为了表达网站的主题。我认为在一个网站中,最重要的页面当属主页,所以在此以主页为例,说明在网页制作中版面设计的问题。从版面设计来讲,一个有特色的主页,必须包含有四个要素:文字,图片,排列方式和主色调,这四者相辅相成,缺一不可。图片要素

要设计出漂亮的主页,首先要成为计算机图形高手,仅这一点就可以让初学者花上一年半载的时间。排列方法要素,主页的第二个要素是排列方法,即网页布局。色彩在网页所占比重很大。有了合理清新的色调,会弥补主页上的其它不足。页面的色彩搭配是与网站的主题分不开的,一个网站必须有一种或两种主题色。不至于让浏览者迷失方向,也不至于单调乏味。一般来说,页面的主体文字应尽量使用黑色等较深的颜色,与背景对比明显,按钮、边框等使用彩色。例如教育类网站使用蓝色为主题色,再用红色和黑色作为配色,就能表达出严肃、稳重的效果。网页作为一种版面,既有文字,又有图片;文字有大有小,还有标题和正文之分;图片页有大小而且有横竖之别。图片和文字都需要同时展示给观众,不能简单地将其罗列在一个页面上,否则会搞得杂乱无章。关于具体的网页布局,常见的有“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等,关于它们,在网页设计的相关书籍中或者在网络上都可以看到详细的叙述

网页作为传播信息的一种载体,同其他出版物如报纸、杂志等在设计上有许多共同之处,也要遵循一些设计的基本原则。但是,由于表现形式、运行方式和社会功能的不同,网页设计又有其自身的特殊规律。网页的艺术设计,是技术与艺术的结合,内容与形式的统一。一般的来说,绝大多数普通受众图形,插件,applets和其它有关的高级Web浏览器特性。对我们来说,页面的实用可能比漂亮更重要,对于用户来说,没有什么比页面能够快速下载更重要了,简而言之,精简你的站点,这是一条最佳的捷径。就站点设计而言,的确能够通过成功的图形设计招徕或者丢失访问者。并非所有的访问者可以完全看到图片,某些人为了加快存取网络的速度已经关闭了浏览器端的图形。简而言之,图形并不能正确的在客户端加载。然而,图形经常被用来作为导航按钮。使用可以把一个浏览器分成几个不同的窗口,对于站点的结构的把握是一个不错的方法。但是,你还是必须知道,还是有人在使用不支持帧的浏览器。在你开始打算设计一个帧的时候,你该仔细的考虑考虑你是否的确真的需要。经常,你这样的需求可以通过表格来组织站点的结构。网页设计涉及到对多种软件、多种知识的学习和应用,以及个人的审美观等等。所以要想制作出漂亮的网页,需要一个逐步学习和经验积累的过程。

随着互联网的不断发展和中国网络人口的日益增长,建立个人网站,不但可以很好的展示自己,而且可以提高自己在计算机应用方面的能力。个人在设计时考虑的多为个人的兴趣喜好,而不注重商业的展示。内容以反映个人为中心,从而使个人网站真正的成为展示自己的网络名片。一张完美的主页设计需要积累丰富的知识以及掌握大量的技巧。

由于平时课程比较繁忙,学习时间比较少,对于网页设计软件的强大功能运用得还不够。不知不觉网页设计的课程将要结束了,这门课程所包含内容的丰富是让我从没有想到的。在整个的学习过程中,我学习了Flash、Fireworks、Html语言、IIS、网站建设的基本思想等重要内容。在网页设计过程中,由于没有网页制作代码的知识,所以在设计时也遇到了很多麻烦,有时插入一个特效脚本也是很麻烦。在网页制作过程中,想提高设计水平,想有个理想的网页,必须学会代码的运用,我将在以后的学习过程中不断加强这方面的学习,希望老师能简单介绍一下代码,让我也对它有个初步的认识,以后再加强学习也才会有所提高。

总体来说,通过今次的对网页设计的学习,有收获也有遗憾、不足的地方,但我想,我已经迈入了网页设计的大门,只要我再认真努力的去学习,去提高,凭借我对网页设计的热情和执着,我将来设计出的网页会更加专业,更完善。也希望老师在今后的日子里多指导。网页设计还有更多的技巧,有待于我们去挖掘和研究。

第五篇:网页制作论文

网页制作论文

简介

网页制作是网站策划师、网络程序员、网页设计师等岗位,应用各种网络程序开发技术和网页设计技术,为企事业单位、公司或个人在全球互联网上建设站点,并包含域名注册和主机托管等服务的总称。其作用为展现公司形象,加强客户服务,完善网络业务。网页制作是企业开展电子商务的基础设施和信息平台,是INTERNET上宣传和反映企业形象和文化的重要窗口。新竞争力也认为注重网站的网络营销价值而不是外在表现。网页制作是指使用标识语言,通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输,浏览。

网页制作要能充分吸引访问者的注意力,让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式,以及结合自己的认识通过艺术的手法表现出来。

目录

1.网页制作的两种设计模式 2.网页制作常用工具 3.flash 3.1flash简介 3.2flash动画的特点 3.3flash动画的前景 3.4flash在网页中的应用 3.5flash制作流程 4.fireworks

4.1fireworks简介

4.2fireworks在网页中的应用

4.3fireworks的重要性

4.4fireworks制作流程 5.参考文献

正文

1.网页制作的两种设计模式

从前一般网页都使用表格进行排版设计,这样作的优点在于设计制作速度快,尤其在可视化网页编辑器,如Microsoft FrontPage中,这样设计显得直观而方便,然而这让越来越复杂的版面需要许多不断嵌套的表格设计,致使网页代码变得冗长复杂,使文件体积增大,且不容易被搜索引擎查找。同时,这样做也不利于大型网站的改版工作。

于是随着主流网页浏览器对CSS的支援度提高,近年来兴起了一种新的网页设计模式。被业界称为“网页重构”的革命,其核心在于分隔网页的风格和内容,指标记语言(如HTML,XML)负责定义页面的内容,但不可以定义任何涉及网站外观(风格)的东西。而网站风格就由另外的CSS档案负责。在排版方面,新的模式提倡使用由CSS定义的DIV进行页面排版,而将表格还原为排列数据的最初功能。这种模式有很多好处,例如可以协助搜寻引擎查找网页的情况,减小文件提及提高浏览速度,且由于一个CSS档案可以控制多个页面,这也给改版带来了很大方便。

由于W3C是该模式极力的倡导者,于是业界鉴定网页是否符合W3C标准,就可以在W3C网站自动检测该网站的情况。

这种模式也有缺点,其中一个弱点就是,在不同浏览器出来的效果会有分别,但这种情况主要是由于微软的Internet Explorer对CSS文档的支持有众多缺陷造成的。另一方面,开始设计CSS时,并不能清楚看到目标,因此显得不直观。

网页实际是一个文件,他存放在世界某个角落的的某一台计算机中,而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,当我们在浏览器输入网址后,经过一段复杂而又快速的程序,网页文件会被传送到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。

2.网页制作常用工具

1、dreamweaver,用与编辑HTML、ASP、JSP、PHP时的辅助工具。Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,它是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

2、Frontpage 跟dreamweaver一样,不过还是dreamweaver好。

3、FLASH 网页需要画面流动时的首选择

4、PS图象处理软件,一般网页都需要有图片相搭配,PS是款很强大的工具。

5、FW跟PS一样都是图象处理软件,但FW偏向与对网页的处理。

6、Adobe公司推出的cs3系列,软件之间兼容性较好。可以用此系列对网站的美工特效进行进一步的修饰美化和优化。

3.flash 3.1flash简介

Flash最早出现并兴起于网络,是网络多媒体动画的重要制作形式,它是macromedia公司推出的交互式矢量图和 Web 动画的标准。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。其运用范围覆盖诸多领域如电视广告、网络广告、游戏、演示动画、课件、网页、手机动画等新兴媒体。现在由于网络带宽的不断提高,Flash动态网页以其具备的声音、动态图像等多媒体优势,相信在不远的将来能够完全替代静态(HTML)网页。

3.2flash动画的特点

(一)Flash动画受网络资源的制约一般比较短小,利用Flash制作的动画是矢量的,无论把它放大多少倍都不会失真。

(二)Flash动画具有交互性优势,可以更好地满足所有用户的需要。它可以让欣赏者的动作成为动画的一部分。用户可以通过点击、选择等动作,决定动画的运行过程和结果,这一点是传统动画所无法比拟的。

(三)Flash动画可以放在网上供人欣赏和下载,由于使用的是矢量图技术,具有档小、传输速度快、播放采用流式技术的特点,因此动画是边下载边播放,如果速度控制得好,则根本感觉不到档的下载过程。所以Flash动画在网上被广泛传播。

(四)Flash动画有崭新的视觉效果,比传统的动画更加轻易与灵巧,更加“酷”。不可否认,它已经成为一种新时代的艺术表现形式。

(五)Flash动画制作的成本非常低,使用Flash制作的动画能够大大地减少人力、物力资源的消耗。同时,在制作时间上也会大大减少。

(六)Flash动画在制作完成后,可以把生成的档设置成带保护的格式,这样维护了设计者的版权利益。

3.3flash动画的前景

现在的Flash平台包括:Flash Studio

8、Flash Player

8、Flash in Mobile flex 1.5、以及应用于通信行业的Breeze 5等;未来即将推出的产品包括Browser client Flash Player、Mobile client Flash Player、Apollo Flash+HTML的客户端工具,以及Flex等企业端工具等。这些工具将满足设计和开发人员跨越各种开放的和专有的平台,包括从桌面到移动设备,提供更丰富的网络内容和互联网应用,企业也能够通过Flash应用获得更大的受益。

(一)网络视频钟情Flash 面对全球超过100万的Flash开发者的期望,Macromedia也不断开发新的领域。而用户对视频应用的垂青,刺激着Macromedia推出新的工具。在上千开发者的注目下,Macromedia推出了Flash Media Server 2,以巩固其Flash Platform作为网络视频最佳选择的地位

(二)Flex 2产品线和Flash Player 8.5出手不凡

Macromedia Flex 2产品线和Macromedia Flash Player 8.5是本次发布会的重头戏。新产品涵盖RIA的全部应用场景,从电子商务产品配置,到需要与实时数据集成的可视交易应用。

Flash Player目前在全球6亿多个桌面和移动设备上安装,估计新版本在12个月内将被80%的联网计算机下载。Flash Player 8.5在Flash Player 8的基础上增加了适合行业使用的编程功能,并构建了先进的跨平台运行时环境。它备有一个新的虚拟机,可以提供更高的运行性能、全面的运行错误报告、增强型调试功能以及支持ActionScript 3。ActionScript 3遵守最新的ECMA Script规范,能够更易于查找及解决问题,从而提高开发人员的工作效率。

3.4flash在网页中的应用

在网络高速发展的今天,越来越多的人们已经不再满意图文并茂的静态网页格式,动态网页应运而生,但是一般的动态图片和网站的背景音乐应用并不合拍.什么时候可以把多媒体应用在网站上呢 Flash正是在这一网络发展的大背景下应运而生的,前身是Future Splash.Flash1.0版本诞生于1996年,由于当时的网络大背景,Flash在出道之时并没有得到计算机行业应有的重视,Flash真正的火爆是从Flash3.0版本开始的,到了1999年6月发布的Flash4.0版本,其制作的动画开始大量的在网上传播,已经逐渐成为了网页交互多媒体动画设计软件的标准.现在,Flash5.0以其特有的ActionScript脚本编程,正在以极快的速度追赶HTML网页标准.它改变了以往静态的,枯燥的,网页形式,利用它短小精悍的文件体积和插件,利用它简单易学的操作方式,利用它的“流”式播放形式丰富我们的网络生活.试想,如果它真的超过HTML成为未来的网页设计软件的主流,那也将是网络的一场革命,也是网络生活的福音.3.5flash制作流程

(1)建立一个新的场景

依次选择“文件”、“新建”、“Flash文档”命令,建立空白文档,大小为550*400像素,背景为白色。

(1)

(2)重新命名场景和涂层名称

依次选择“窗口”、“设计面板”、“场景”命令,在弹出的场景面板中双击默认场景名称,改为“跳动的小球”。然后重新命名涂层名称,双击默认涂层名称,改为“地面”。然后用水平线表示地面,选择笔触颜色为黑色,单击“线条工具”按钮,在第一帧的舞台下方,拖动鼠标画一条直线表示地面。

(2)

(3)插入水平线结束帧

单击水平线涂层第35帧的小方框,选中该帧;依次选择“插入”、“时间轴”、“关键帧”命令,在地面层的1到35帧之间插入了相同的水平线。

(3)(4)插入跳动的小球涂层,画小球的初始状态

双击默认的涂层名,改为跳动的小球涂层,此图层处于激活状态。设置填充色为黑色,在第一帧的舞台上方,画一个小球,删除轮廓线。

(4)

(5)插入下一帧

单击跳动的小球层第二帧的小方框,选中该帧;依次选择“插入”、“时间轴”、“关键帧”命令,在第二帧中复制第一帧的图形;拖动小球向下移动一个距离,表示球在下落。

(5)

(6)制作下落动作的变化

重复上一步骤。

(6)

(7)小球变形

在下一帧的位置插入关键帧,利用任意变性工具把小球纵向压缩。单击“任意变形”按钮,指针根据可实现的变形方式箭头右下方的小图形会有所变化;单击小球,小球周围出现8个黑色句柄框;把鼠标指针移动到4个中间句柄处,拖动鼠标,把圆球编程椭球形。

(7)

(8)多次重复上面步骤,在不同的帧中,制作小球被压扁后又弹起的画面。参照第9步,制作小球被压扁后又弹起的画面。重复上述步骤,直到小球静止。4.fireworks 4.1fireworks简介

Fireworks是Macromedia公司发布的一款专为网络图形设计的图形编辑软件,它大大简化了网络图形设计的工作难度,无论是专业设计家还是业余爱好者,使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画,还可以轻易地完成大图切割、动态按钮、动态翻转图等,因此,对于辅助网页编辑来说,Fireworks将是最大的功臣。借助于 Macromedia Fireworks 8,您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。Fireworks 业界领先的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与 Macromedia Dreamweaver? 和 Macromedia Flash? 共同构成的集成工作流程可以让您创建并优化图像,同时又能避免由于进行 Roundtrip 编辑而丢失信息或浪费时间。利用可视化工具,无需学习代码即可创建具有专业品质的网页图形和动画,如变换图像和弹出菜单等。

4.2fireworks在网页中的应用

众所周知,在网页上的jpg图片如果过大,会严重影响页面的打开速度,Fireworks提供优化图片的功能,即缩小图片的KB,而且不影响画面的质量(除非放大了与原图对比)。由于很多人喜欢用photoshop制作jpg图片,所以它的容量会很大(因为它是适合处理印刷品,要求比较清晰),最终还是要用Fireworks来处理一下。

在优化面板里有“导出jpg较高品质”,导出默认的80品质(可以用“2幅”画面对比之前之后的大小)。

4.3fireworks的重要性

为Macromedia家族的一员,三剑客之一的fireworks,她的主要任务和特色就是制作矢量图为网页服务,FW也是Flash的最佳伴侣,在三剑客的MX系列中,FW和Flash的联系更为紧密,所以无论是网页制作和Flash制作,Fw都是不可或缺的利器.在Fw3年的应用实践过程中,我无时无刻不在感受她的卓越和便利。的确,网页制作看重的是效果和速度,并不是你用的软件专业与否,你用了多少个软件作出的网页,设计师作出的网页是为了让大家接受而不是显示自己的本领,在这样的前提下,Fw的确是最好的选择,最好的矢量图效果,最快的速度。

4.4fireworks制作流程

1.准备素材 如图

2、因为这幅图片是位图,我们可以用魔术棒将电视机中间的画面选取成选区

2.选择菜单——将选取框转换为路径,得到电视画面的轮廓路径。当然,也可以用钢笔工具勾勒

面的路

4.将选中区域填充成折叠渐变

颜色可以自己选择:

5.用选取工具拖动渐变方向手柄,接近垂直或接近水平方向:

6.将调整手柄以初选中区域 并在帧属性,选取重制帧命令:选择三帧 或在多些

7.依次选择其他帧,拖动渐变调整手柄将其改变位置:柄以初选中区域 并在帧属性帧命令:

最后保存 导出gif图片 即可完成。

1.在Fireworks中打开一个新的画布,调整画布大小,选择工具栏中的文本工具,输入第一个数字,并设置好文字的字体、像素大小等样式

2.输入文本 1 然后再打开帧属性 选择重置帧 9 因为数字0-9 一共是十个

3.然后选择每一帧,并修改画布中的相应数字。

4.帧面板中右手边显示的是默认的帧延时值7毫秒,即7/100秒的速度。如果速度过快 可以修改值 选择顶部帧,按住Shift键,点击底部的最后一帧,全选这些帧,在帧延时值处双击,在显示的对话框中设置一个更高的值。更高值将减慢动画的播放速度。5.最后一步,打开优化面板,设置导出文件格式为“Gif动画”,如图:

6.也可以在帧面板的底部设置Gif动画循环,默认为“永久”选项

7.画布颜色可以随意更改 再按f12 预览就可以了,最后导出文件

5.参考文献

[1]刘宇.Flash短片轻松学中国大陆.电子工业出版社,202_-01.[2]章精设,胡登涛.Flash Action Script 3.0从入门到精通.清华大学出版设,202_-10.[3]陈冰.Flash第1步:ActionScript编程篇(珍藏版).清华大学出版社,202_-03

网页设计与制作的应用论文[精选多篇]
TOP