当前位置:文档之家› 网页的美化(教参)

网页的美化(教参)

网页的美化(教参)
网页的美化(教参)

(一)教学设计部分

?教学内容分析

本课的主要内容与地位

本课的主要教学内容为:设置网页的背景、设置表格(单元格)的背景、设置背景音乐、插入Flash动画和插入滚动字幕等几个知识点,以实现对网页的美化。

网页是否美观大方、给人以美感,很大程度上决定于网页中各元素的色彩搭配是否合谐、得当,色调是否与网站的主题相吻合,以及网站中的元素是否能满足网站要表达的感情等等。

对网页进行美化是每一个网站建设者不懈追求、永无止境的探索过程。

本课与前后内容的关系

网页美化是对前期所做的网页在视觉、听觉效果上的修饰,是提升网站可观赏性的一个非常重要的手段,是网站建设中一个非常重要的环节。

?教学目标分析

知识目标/技能目标

知识目标

1.了解对网页进行美化常用的方法。

2.理解美化网页对网站质量提高的作用。

技能目标

掌握设置网页及表格的背景、设置网页中背景音乐、Flash动画和滚动字幕的一般方法;

过程与方法目标

提高学生信息的加工、管理、表达和交流的能力。

情感态度与价值观目标

提高审美意识,发现美、认识美,美化生活从自身做起。通过对网页中文字、布局和色彩的合理设计,尽可能达到较好的视觉效果。

本课的重难点

重点:设置网页背景、设置背景音乐、插入Flash动画和滚动字幕

难点:网页的色彩调配

本课的课时分配建议

一课时

?教学策略设计建议

教法建议

在本节课的教学过程中,教师应引导学生参考借鉴优秀网站在色彩、布局上的一些做法,自主地学习有关版面设计和色彩搭配方面的知识,并将其应用到自己的网站设计中。

对于本节几个知识点中涉及的对话框,教师应布置合理的分组,由学生通过实践体会对话框中各参数的含义。

学法建议

因本课的学习在很大程度上决定于学生对美的鉴赏能力,这就要求学生要在平时多注意身边的色彩、版面设计的方法,如:电视广告、杂志封面、街头广告牌等,并将它们应用到自己的网页设计中来。

?教学资源与环境建议

本课教学资源索引

1.第三课的半成品网页:Index.htm、Parents.htm

?教学评价建议

自评、互评、师评要注意的问题

学生是否具有乐观向上的学习意识;学生能否掌握进行网页修饰的基本方法;学生是否具有发现美、欣赏美,并利用技术手段加以实现的能力。

?教学过程参考案例

教学反思

本节课的内容虽然操作步骤不难掌握,最大的难点是色彩、音乐、动画与网站主题的搭配的把握。所以,建议教师安排学生以分组竞赛的方式来激发学生的学习热情。

(二)补充资料部分

?1.课件与学件

学生用学件

?2.资料库

网页色彩设计原理

一、色彩的基本知识

1.颜色是因为光的折射而产生的。

2.红,黄,蓝是三原色,其它的色彩都可以用这三种色彩调和而成。

网页html语言中的色彩表达即是用这三种颜色的数值表示

例如:红色是color(255,0,0)十六进制的表示方法为(FF0000)

白色为(FFFFFF), 我们经常看到的"bgColor=#FFFFFF"就是指背景色为白色。

3.颜色分非彩色和彩色两类。

非彩色是指黑,白,灰系统色。彩色是指除了非彩色以外的所有色彩。

4.任何色彩都有饱和度和透明度的属性,属性的变化产生不同的色相,所以至少可以制作几百万种色彩。

网页制作用彩色还是非彩色好呢?根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。我们通常的

做法是:主要内容文字用非彩色(黑色),边框,背景,图片用彩色。这样页面整体不单调,看主要内容也不会眼花。

二、色环

我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。

色环的两端是暖色和寒色,当中是中型色。(如下图)

三、色彩的心理感觉

红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。

绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。

它和金黄,淡白搭配,可以产生优雅,舒适的气氛。

橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。

黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。

蓝色---是最具凉爽,清新,专业的色彩。

它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)

白色---具有洁白,明快,纯真,清洁的感受。

黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。

灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。

每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。

四、色彩的搭配

1. 非彩色的搭配

黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。

2. 彩色的搭配

网页色彩搭配的原理

①色彩的鲜明性。网页的色彩要鲜艳,容易引人注目。

②色彩的独特性。要有与众不同的色彩,使得大家对你的印象强烈。

③色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

④色彩的联想性。不同色彩会产生不同的联想,蓝色想到天空,黑色想到黑夜,红色想到喜事等,选择色彩要和你网页的内涵相关联。

网页色彩掌握的过程

随着网页制作经验的积累,我们用色有这样的一个趋势:单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏,只能制作出简单的网页,色彩单一;在有一定基础和材料后,希望制作一个漂亮的网页,将自己收集的最好的图片,最满意色彩堆砌在页面上;但是时间一长,却发现色彩杂乱,没有个性和风格;第三次重新定位自己的网站,选择好切合自己的色彩,推出的站点往往比较成功;当最后设计理念和技术达到顶峰时,则又返朴归真,用单一色彩甚至非彩色就可以设计出简洁精美的站点。

网页色彩搭配的技巧

①用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

②用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按

ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。

③用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了

④用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

3. 网页配色中禁忌

①不要将所有颜色都用到,尽量控制在三种色彩以内。

②背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容

《网页的美化》教案

《网页的美化》 教学设计 教材版本青岛版 课题《网页的美化》 学校龙子心中学授课教师杨斌课型新授课授课班级初二(1)班课时 1 课程纲要依据 本节课的定位在于“熟练掌握”的程度上,旨在让学生通过对《网页的美化》的学习,了解掌握美化网页的方法、步骤,熟练掌握美化网页的操作,提高审美意识,激发学生对网页制作进行更深入的学习和研究的兴趣。 教材分析 结合本校学生和教学环境的特点,深入地领会由青岛出版社出版的初中《信息技术》(八年级)教材的编写意图,设计了制作“情感小屋”网站的主题活动,制作“情感小屋”网站。 学情分析 初二学生已经学习了很多信息技术基础知识,并且具备了一定的操作计算机、上网搜索、编辑图象的能力。通过前几周的学习,学生对网站制作有了初步的认识,并建立了站点,制作了首页,而且还通过表格归整了网页中的各元素,使网页趋于整洁。但是,由于制作的网页中还未有设置背景、背景音乐、Flash动画、字幕等元素,还显得单调。他们希望能够通过学习新的知识,进一步美化他们制作的网页。 教学目标①了解美化网页的常用方法,理解美化网页对提高网站质量的作用。 ②学会在网页中设置背景、音乐、Flash动画和滚动字幕。 ③提高审美意识,善于发现美,美化生活从自身做起。 教学重点在网页中设置背景、音乐、Flash动画和滚动字幕。教学难点在网页中设置音乐、Flash动画。 教学方法讲授法、自主学习法、任务驱动法、实验探究法等 教学资源计算机及多媒体网络教室系统、FrontPage2003软件等 板书设计 网页的美化 一、美化网页的作用 二、美化网页的方法 三、美化网页的流程 四、具体操作: 1. 插入背景音乐 2. 设置网的背景 3. 设置表格的背景 4. 插入Flash动画 5. 插入滚动字幕

《网页制作——美化网页》教学案例

《网页制作——美化网页》教学案例 一、概述 本课是《信息技术——美化网页》课时的内容。学生已经学习了制作简单网页的基本方法,这部分的主要内容是,网页中共享边框、导航栏的设置和主题的应用。如果采用传统的教学模式(即教师示范──学生模仿操作)也能完成教学任务,但对学生来说,他们只学会了计算机的操作,而对信息素养并没有得到提升。所以,本着学生自主探究学习意示、创新水平的培养,以综合提升学生的信息素养为目的,作者在教学时将本课中原来让“做中学”的方式改为了自主探究的学习方式,将课堂交给学生,让学生自主探究学习,教师在课堂中主要起到引导作用。 二、教学目标分析 1.认知目标:学会简单的对网页实行美化的方法。 2.技能目标: (1)掌握美化网页的几种操作方法;(2)能够应用主题,来改变网页的整体布局;(3)能够灵活地对几种操作方法实行综合使用。 3.情感目标:(1)通过师生协作和学生互相配合,培养学生合作团结的精神;(2)培养学生热爱美的情感,激发学生表现美的欲望,使学生的审美水平得到提升。 三、学习者特征分析 从八年级学生的认知特点来看,他们爱问好动、求知欲强、想象力丰富,对实际操作活动有着浓厚的兴趣,对直观事物感知较强,正处在形象思维向抽象思维逐步过渡的阶段。所以,在学习过程中,应鼓励学生自己观察,亲自动手操作,实行学生讨论和交流,师生共同归纳总结,体验学习。 在讲此内容之前,学生已经学过如何制作一个简单的网页,并且已对网页实行简单的修饰,这为学生进一步对美化网页作好了充分准备。 基于以上学生情况的分析,作者对教学过程大胆采用让学生为主体,教师为主导为教学思路实行设计。 四、教学策略选择与设计 在讲此内容之前,学生已经学过如何制作一个简单的网页,并且已对网页实行简单的修饰,这为学生进一步对美化网页作好了充分准备。 基于以上学生情况的分析,作者对教学过程大胆采用让学生为主体,教师为主导为教学思路实行设计。

网站界面如何美化的几种方法

武汉网页设计培训:网站界面如何美化的几种方法 网站的界面是网站给来访者留下第一印象的直接窗口。网站界面的漂亮与否直接影响到访客对网站的兴趣以及停留时间!所以网站的界面美化工作是应该引起足够重视的。那到底该如何美化网站界面使他容易被访客所接受呢?今天我们就跟大家一起来探讨一下网站界面的美化的几个原则以及具体的方法。 一、网页设计界面优化原则 武汉网页设计界面优化原则一、行业特征 网站就像你的穿着打扮,要有自己的风格自己的个性。但是这种个性要与自己的身份职务相搭配。也就是说你的网站要根据你的行业特点进行美化,比如说科技类网站善用蓝色,娱乐类网站善用橙色,政府门户类网站大多用红色调。 总结下就是你的网站界面要符合行业特征! 武汉网页设计界面优化原则二、访客喜好 如果你的访客是年轻人充满活力个性十足的,那你的网站配色以及LOGO就要符合这个定位符合你受众的喜好。你的网站色调也要表现的充满活力动感十足!举个例子说太平洋女性网主色调就是紫色,因为紫色代表的就是时尚浪漫。试问哪些女性朋友们不渴望一份浪漫与时尚呢? 总结下就是作访客喜欢的! 武汉网页设计界面优化原则三、统一性原则 你的网站一定色调要统一,最好属于同一个色系。至多不要超过三个颜色!如果颜色过多会导致人们审美疲劳!慢慢的离开你的网站!从而失去一定访客,导致PV下降! 总结下就是统一色调效果佳! 武汉网页设计界面优化原则四、细致入微 俗话说细节决定成败,一个网站的界面就是一个个小像素块组成的,做网站的美化要尽量细致到每一个小细节,不要觉得一个点一个图片的小角不重要。其实不然,一个人穿的邋里邋遢就可以看出这人性格如何了。一个人非常漂亮就是嘴角戴着一粒米,这严重影响自己的形象。网站也是一样的你不注意界面的小细节访客就有理由认为你这网站内容不怎么样!

《网页的美化》教学案例及教学反思

《网页的美化》教学案例 凤县双石铺中学王晓丽八年级信息技术 【教学目标】: 【知识与技能】 1.学会修饰网页中的文字,为网页添加背景,在网页中插入滚动字幕。2.学会根据网页的内容自主修饰网页,保持网页整体的一致性。 【过程与方法】通过操作练习,使学生感受学习知识的过程,总结操作 规律,培养学生自主学习与团结协作的能力。 【情感态度与价值观】在学习过程中感受美、创造美,提高审美情趣,体会创作的乐趣。 【教学重点】修饰网页中的文字,为网页添加背景,在网页中插入滚动字幕。 【教学难点】根据网页的整体效果,自由修饰网页,使网页更漂亮。【教学方法】任务驱动—情景教学—自主探究—协作学习—评价反思【教学手段】多媒体微机室、课件 【教学过程】:

《网页的美化》教学反思 本节课主要是让学生在FrontPage中修饰网页。这部分内容关于操作技能方面对于八年级的学生来说难度并不算大。课一开始,我就给学生下发没修饰的《诗话凤县》的网页,然后教师再打开我的网页就是修饰了的网页做比较,从而激发学生

学习的兴趣。大家对比哪一个更漂亮?我的网站多了那些元素?----背景,音乐、滚动字幕,引出课题,然后指导学生打开课本,明确本节课的任务。学生自己阅读课本内容后,尝试操作:给网页添加背景。学生交流讨论后,再示范操作。教师点拨。下一个添加字幕大家还是参照课本进行自主操作,最后还是学生示范。学生操作完后,展示学生的作品。 在前面经过FrontPage几节课的学习后,大部分学生已经掌握了制作网站的一般步骤,但是对于修饰网页学生了解的不多,这节课将自学与教师点拨相结合达到完成目标。保存网页是最重要的一个步骤,一部分学生保存后发现,有的内容都是无法显示。因为框架网页的保存和其他普通网页的保存是不同的,所以我在一开始就让学生感受这一不同点,起到了很好的预防作用,只有很少的学生保存时发生错误。在这个任务中,除了让学生充分了解框架网页保存的特殊性,也要让学生知道,在新建框架网页时的一般方法。 通过学生学习和实践操作,培养学生的观察能力、编辑网页能力、动手能力、合作学习与独立探究的能力,通过师生的共同合作,课堂气氛活跃,完成了预期目标。现对本节课进行反思: 一、自我评价: 本节课我给学生提供了自主探究与合作学习的时间和空间,教学中在让学生完成网页的美化活动时,让学生自由发挥,充分调动了学生学习的积极性,发挥了学生的主体作用,发挥了教师的主导作用,培养了学生合作学习与独立探究能力,增强了学生合作协作意识。 通过任务驱动、讲解演示、合作探究、小组讨论等多种教学手段,引导学生利用现有信息进行信息处理,提高了学生解决问题能力,体现在对网页进行美化时,采用先由学生尝试操作,然后针对学生在操作中的问题边演示边讲解,强化了学生的记忆,有利于学生掌握方法,之后又给学生时间自主实践操作,操作中发现的新问题及时指导,鼓励学生运用独立、合作、探究、讨论方法来解决,培养和提高学生解决问题的能力。 注重培养学生的审美能力和审美情趣,激发学生对美的欣赏和追求,在学生自主美化网页时充分发挥了学生的创造力和想像力。学生都能够把自己的电网页设计得美观大方,具有个性。同时,教学过程我设计了展示成果环节,将学生中优秀的作品通过教师机展示给全班同学看,在展示作品的过程中,请其他同学评价作品好在哪里,不足在哪理,提出一些可改进的建议,加以完善,老师也适当地给出一些评价与鼓励,使学生尝到成功的喜悦和创作的快乐。 二、问题反思: 1.学生基础参差不齐,个别小组操作较慢,小组内合作交流不够,应适根据学生中实际基础知识情况,适当调整小组成员,使每组都有操作熟练的学生,相互学习,相互指导,以提高学习效率。 2.展示过程中应先让作品本人自我评价一下,然后再师生评价效果应该会更好些。 3.由于时间不是很充足自己紧张。把课堂时间没有很好的把握。 4.课堂环节缺少了学生看课本,参照课本环节进行操作。还有就是滚动字幕这里,添加上后如何改变字体。字号这里操作是难点,没有突破。 5.本来是学生自己做的网站来上课。可是好多学生的网站都丢了,所以到下午

网页制作教案

课堂任务快速建站技术—模板的应用 课程名称:利用模板快速建站 课时数:4 教学目标: 知识与技能:了解模板的定义,模板的可编辑区域的定义。 过程与方法:掌握在网页中创建模板的三种方法; 掌握模板的可编辑区域的定义、建立和取消; 掌握模板的应用和取消; 掌握如何将模板从网页中分离出来; 掌握使用模板快速建站; 情感与价值观:培养学生主动思考问题的习惯和自主学习的能力。 教学重点: 在DreamWeaver8中创建模板和应用模板。 教学难点: 学会模板的可编辑区域的定义、建立和取消。 教法: 任务驱动法 学法: 记录关键步骤,积极动手练习。 课前准备: 第三章第三节素材和实例,视频教程:快速建站技术-模板的应用.WMV,快速建站技术-模板的应用(快速更新).WMV。 教学过程设计: (一)导入设计: 我们制作一个网站时,会发现许多网页的版面和元素都是相同的,在设计一个新页面时,我们还可以用复制原来做过页面来减轻工作量。但是如果一个网站有几十、上百张页面都基本相同,这时修改或更新网页的共同元素如网站标志时,会发现工作量实在太大!而使用Dreamweaver 软件中的模板功能来创建新网页,可以大大提高更新和修改的工作效率,网站的维护工作会轻松很多。本节主要内容如下。(二)新课讲解设计: (1)请学生带着以下问题阅读P110~115知识预读,问题如下: A、模板的定义? B、模板创建的三种方式?了解资源面板的使用方式。 C、学会模板的可编辑区域的定义、建立和取消; D、学会模板的应用和取消; E、学会如何将模板从网页中分离出来; (2)教师提问,请学生一一回答以上问题。期间对回答问题的同学要多多表扬,如“你真棒”。增强学生对教师的亲和力。 (3)教师在学生回答问题的同时,总结评价并补充相关要点。 (4)教师展示完成后的模板网站作品,与学生共同讨论分析该网站制作过程。 (5)教师演示建立模板,创建可编辑区域,应用模板等部分操作(详见教材任务一)。

利用HTML代码美化网页7例

一、利用HTML代码制作图像滚动特效 具体操作: 选中单元格第一行所有的图像,在代码视图中,在第一个图像代码前输入 在最后一个图像代码的后边输入 选中单元格第二行所有的图像,在代码视图中,在第一个图像代码前输入 在最后一个图像代码的后边输入 说明: 标记用于实现文字或图像的滚动,以达到动感十足的视觉效果,使用该标记可以创建图片滚动效果。表达式为: 主要有下列属性 align:字幕文字对齐方式 width:字幕宽度 height:字幕高度 drection:文字滚动方向,其值可取rich up down scrolldelay:滚动延迟时间,单位为毫秒 scrollmount:滚动数量,单位为像素 二、制作滚动公告栏 具体步骤: 1.选中 2.切换到代码视图,在表格前面输入一段代码: 3.在后边输入代码 三、为网页添加彩色边框代码 具体操作: 1.打开文件 2.切换到代码视图下,在和之间输入以下代码 说明: if (document.all) 当网页文档中所有的对象下载完后 document.body.style.cssText="border:10 ridge #FF9900"设置文档边框颜色样式 四、添加背景音乐代码 单击“拆分”,在代码编辑窗口中的和代码之间插入代码 五、网页最新消息提示代码 打开文件 切换到代码视图下,将以下代码加入到和之间