网页制作与设计教案

网页制作与设计教案（精选8篇）

网页制作与设计教案 篇1

教师：系部：信息技术工程系专业：计算机应用班级：计机

湄洲湾职业技术学院

2008-2009学年第一学期

唐 俊 奇

电子信息

07（1）信息07（1）08（2）

1.3 网页中所使用的技术

1.3.1 HTML语言和XML语言

1、HTML语言

ØHTML只使用SGML中很小一部分标记

ØHTML语言（Hyper Text Markup Language 超文本标记语言）

ØHTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具

2、XML语言

XML（eXtensible Markup Language）1.3.2 动态网页

1.3.3 多媒体技术的应用 1.3.4 Web服务器端程序

1.4 制作网页的基本方法

1.4.1 制作网页的基本步骤

1、确定网页的内容

2、设计网页的组织结构

3、资料的收集与整理

4、选择网页的设计方法

1.4.2 制作网页时要注意的问题

1、网页的标题要简洁，明确。

2、在文本中要使用水平线，以分割不同部分。

3、对重点段落要强调显示。

4、网页中插入的图片要尽量的小。

5、图形要附加文字说明，以便关闭图像时查看。

6、网页中引用的资料及商标（或图标），不能侵犯版权。【课后小结】

通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。

第二讲 HTML的基本标志与格式标志

【教学内容】

讲解HTML基本标志对和格式标志。【教学目的】

使学生标志对与格式标志对的使用。【教学重点】

格式标志的使用。【教学难点】

* 使学生掌握超级链接标志的使用。【教学重点】

* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入。【教学难点】

* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义。【教学方式】

讨论式、案例分析式、练习式。【教学参考】

1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。

2、《WEB网站设计》Joel Sklar著 高等教育出版社。

3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】

2.2 插入文字

2.2.1 划分段落 格式

段落内容

2.2.2 插入标题文字 格式

标题内容 2.2.3 字号属性

设置基准字号： 网页内的其他文字，采用下面的格式来定义 ...... Size的有效范围是1（最大）到7（最小）。如果在Size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。2.2.4 颜色属性 两种方式

字符串 2.2.5 字体属性

2.2.6

文本修饰

......，文字以粗体显示。......，文字显示为斜体。......，显示下划线。

......，中心线贯穿文字。< EM>......，强调文字，通常用斜体。

< STRONG>......，特别强调的文字，通常用黑体。

2.3.2 图片的属性

2.4 建立超级链接

2.4.1 指向一个目标

1、建立超级链接

字符串

2、为图片建立超级链接

3、链接到邮件和多媒体文件 链接到邮件

请与我联系 2.4.2 使用锚点

Ø使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。Ø建立锚点：

Ø锚点文字 Ø使超级链接指向已定义的锚点。Ø文字 Ø文字 2.4.3 新窗口和基准链接

1、打开新窗口

Target=“window-name”>开一个新窗口

2、基准链接

在 与 之间设定

BorderColor=“#008000“ >

2.7.3 子窗口属性设置

-2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分

（3）目录和标题，分为左上、左下、右三部分

（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页

</p><h3>网页制作与设计教案 篇2</h3><p>1 纸质教案存在的一些弊端</p><p>目前很多高校要求教员除了要制作多媒体课件外, 还要求教员制作传统的纸质文件教案。在传统的教案标准下, 很多教员制作的教案大同小异, 多数是对教学用书或参考书内容的拷贝, 还有一些教员一年一年的使用相同的教案, 这些教案从表面上来看, 完全符合标准, 符合要求, 但其内容具有照搬照抄性, 在实际授课中不具备实用性和可操作性, 也就很难达到期望的教学效果。</p><p>就我们了解的情况来看, 大学纸质教案分两种情况, 一种是把教科书上的所有内容照搬到教案上, 一种是提纲携领的标题式教案。前者内容繁琐, 很难突出讲解要点, 一边使用多媒体幻灯, 一边要从繁杂的教案中寻找有用的信息, 显得有些杂乱和不清晰, 容易由于寻找内容而影响思路。后者由于是标题式教案, 仅仅是一个授课轮廓和框架, 信息量太少, 缺乏可参考的注解内容和提示, 讲解过于依赖幻灯课件内容, 也就很难把课讲生动、讲好。</p><p>2 电子教案并非完美无缺</p><p>电子教案是把教学内容做成幻灯片, 借助于多媒体投影机而呈现给学生的一种教案, 目前在大学教学中普遍使用。电子教案具有无可比拟的优越性, 并为大家所公认, 电子教案传输信息量大, 字体清晰, 还可图文并茂, 若再加一些动画, 更能吸引学员的注意力。但是如果认为电子教案完美无缺, 那就错了, 我们不可能把所有的内容都做进幻灯片里面, 虽然电子教案信息量大, 但也是有限的内容传输。每张幻灯片上的文字一般不超过8行, 每行一般不超过25个字, 因此每张幻灯片上的文字部分, 不应该是象书本一样, 密密麻麻的布满文字, 而应该是标题式和摘要式的, 突出要点和主要内容, 这样才能使多媒体幻灯显得清晰和爽眼, 才不易造成学员的视觉疲劳。</p><p>在大学课堂教学过程中, 由于传统的纸质文件教案的弊端, 实际上教员很少参考和使用, 一般是对着幻灯课件讲解授课, 这同样存在一些问题, 因为电子教案要求简洁清晰, 所以不可能覆盖我们要讲解的所有内容和要说的每一句话。因此如果完全撇开纸质文件教案, 过分依赖电子教案, 就只能凭着理解和记忆进行讲解和阐述, 随意性较强, 容易造成讲解不清楚, 用语不确切, 甚至遗忘了讲解要点和内容。</p><p>3 设计融电子教案与传统教案于一体的新型电子教案</p><p>目前有很多计算机软件都可用于制作电子教案, 如Authorware、Flash、方正奥思、课件大师及Frontpage和Powerpoint等, 前四者功能强大, 主要用于制作专业水准较高的多媒体课件制作, 后两者功能相对简单, 易懂易用、快速方便。对于多数大学教员, 制作电子教案的目的只是用于教学, 所以在选择电子教案软件时, 要考虑软件的简单、快速、高效性。Powerpoint2000不但简单易用, 并且提供了大量的设计模板、自动版式、动画效果、声音效果、幻灯片切换方式、动作按钮、超链接等, 使教师可在短时间内设计出图文并茂、影声齐备的幻灯片教案, 是我们大学教员制作电子教案的首选软件。</p><p>在使用Powerpoint2000的过程中, 我们发现了一些功能, 可在电子教案的基础上融入纸质文件教案的内容, 不仅使教案方便实用, 也简化了纸质文件教案的制作。在制作幻灯片的界面上, 幻灯片下方是&ldquo;备注&rdquo;栏, 由于&ldquo;备注&rdquo;栏在放映幻灯片时并不出现, 所以常常被我们忽略或视而不见。实际上我们可以利用&ldquo;备注&rdquo;栏填写纸质文件教案的一些内容和注释说明, 如解释内容、欲举的例子、欲提问的问题、重点难点、版书内容和每一张幻灯片的讲解时间分配等。然后把幻灯片与&ldquo;备注&rdquo;栏一起打印, 就可以作为实用性的纸质文件教案。在打印时, 首先在&ldquo;打印内容&rdquo;栏选择&ldquo;讲义&rdquo;, 然后在&ldquo;讲义&rdquo;栏选择每页打印幻灯片的张数, 可根据自己喜好选择每页打印4或6张幻灯片;然后再在&ldquo;打印内容&rdquo;栏选择&ldquo;备注页&rdquo;, 即可把幻灯片内容与备注内容一起打印。这样在课堂上呈现给学生的是上半部分, 而教员的教案包括上下两部分, 把幻灯片和要讲的注释内容有机的结合在一起, 对该张幻灯片要强调的部分、要阐释的内容和举例等清楚有序, 一目了然。不仅如此, 在实际上课时, 我们还可以采用下面的方法, 轻松实现在教员的电脑上同时显示幻灯和备注内容, 而学员的大屏幕上只显示幻灯内容, 看不到备注内容。</p><p>4 扩展Windows桌面到另一台监视器上</p><p>把Windows桌面扩展到另一台监视器上, 实现教员的电脑显示器上可以观看&ldquo;备注&rdquo;栏的内容。设置步骤如下:①在连接了外部显示器或者投影仪的情况下, 在桌面上点击右键, 选择&ldquo;属性&rdquo;, 点击&ldquo;2&rdquo;号屏幕, 选中&ldquo;将windows桌面扩展到该显示器&rdquo;, 同时设置适当的分辨率。单击&ldquo;应用&rdquo;。②打开PPT课件进行幻灯片放映前的准备工作, 点击幻灯片放映, 选择设置放映方式, 点击&ldquo;显示演讲者视图&rdquo;, 单击确定后就完成了设置。③开始放映幻灯片, 点击左下角的幻灯片放映按钮, 或者直接按&ldquo;F5&rdquo;。两者的区别是, F5从头开始放映, 而左下角的幻灯片放映按钮是从当前幻灯片开始往后放映。⑤其放映的结果是教员在计算机显示器上看到的内容, 包括了大纲栏、幻灯片栏和备注栏全部内容。大纲栏主要用于显示、编辑演示文稿的文本大纲, 其中列出了演示文稿中每张幻灯片的页码、主题以及相应的要点;幻灯片栏主要用于显示、编辑演示文稿中幻灯片的详细内容;备注栏主要用于为对应的幻灯片添加提示信息, 对教员授课起备忘、提示作用, 非常便于教员进行课堂讲解。针对这个视图, 演讲者不仅可以看见每张幻灯片的预览, 还可以知晓下一张幻灯片的大致内容, 最重要的是可以看到&ldquo;备注&rdquo;的内容, 从而可以把握好讲解的内容与时间。而在实际播放演示文稿时学员在投影屏幕上只能象以往一样看到幻灯片栏中的内容, 而看不到大纲栏和备注栏中的信息, 因此不影响学员的视觉效果, 而大大的提高了教员的授课效果。</p><p>5 设计适合自己教学特点的电子教案</p><p>目前, 现成的医学类课件很多, 就医学来说, 有&ldquo;卫生部医学视听教材&rdquo;和&ldquo;卫生部医学CAI课件&rdquo;系列, 还有各类医科院校自己制作的电子教案, 应该说, 这些教案都是花费了很大气力制作成的, 甚至是集体智慧的结晶, 都很优秀。但是每个教员都有自己的教学风格, 若把这些电子教案完全照搬、直接拿来用于自己的教学, 肯定是不合适的, 是对学生不负责任的表现, 也不能充分展示自己的教学艺术、教学经验和科研水平。而且照搬来的课件的内容、深度、重点难点的阐述等与本校医学生所使用的教材往往不一致, 对不同层次的学员教学大纲的要求也不一样。因此, 每个教员都应结合自身的教学、科研和经验, 充分发挥个人的聪明才智, 设计出一个针对性强、目标明确、信息量大的医学电子教案, 肯定会收到非常好的教学效果。</p><p>在教学实践过程中还要对教案进行不断的修正和反思, 也就是对自己的教学过程进行回顾和总结, 在讲解幻灯片时, 可能有的幻灯片讲解拗口、不顺畅或没有达到预期教学效果, 因此课上要及时记录, 课后要反思和总结, 改进和优化教学, 从而不断提高教学能力。要制作出满意的电子教案和讲好每一堂课, 不仅要求我们教员有高度的责任心, 还要广泛涉猎各个领域的知识和对其专业领域知识作出深入思考, 惟其如此, 才能达到满意的课堂教学效果, 才能满足学员对学科知识的渴求。</p><p>参考文献</p><p>[1]裴建明, 王高峰, 张晓东, 等.浅谈生理学多样化教学手段的综合应用[J].中国高等医学教育, 2002 (2) :38-39.</p><h3>浅淡多媒体电子教案的制作设计 篇3</h3><p>多媒体电子教案的教学应用,关键是进行教学设计。进行教学设计的目的是为了解决教学中的实际问题。一个好的多媒体电子教案的设计,对激发学生学习的积极性,有着十分重要的作用。因此,在具体设计时,对屏幕上出现的各种信息,如文字、图形、图像、声音、动画等,要做到既符合教学要求、又突出多媒体技术的特点。笔者认为,进行教学设计时要坚持四项基本原则,综合四项基本设计内容,从而完成多媒体电子教案的设计。</p><p>一、多媒体电子教案设计要坚持四项基本原则</p><p>电子教案的制作过程是教学过程的再创造。为了制作出一个优秀的教案,要结合多媒体设备、计算机与传统教学的特点,使电子教案集科学性、教育性、交互性、艺术性于一体。其电子教案设计要坚持目标性原则、整体性原则、程序性原则、美学性原则。</p><p>1.目标性原则</p><p>目标原则是指电子教案的制作要针对教学的课程,选择最适合的多媒体电子教案的类型。由于不同课程的教学要求不同,所以采取的多媒体教学手段也不应相同。对于课堂演示型、实验操作型、考试测验型、资料工具型、网络教学型等,要根据课程的特点,科学设计多媒体教材的系统功能,充分发挥各种多媒体功能的长处,做到媒体优势与授课效果有机的结合,有的放矢。</p><p>在教学内容的表达形式、多媒体技术的应用上,也要有明确的目标。要选择适合发挥多媒体特性的教学内容,制作多媒体教材。例如,形态学内容,微观、宏观的教学内容,抽象复杂的教学内容,实习教学内容,实验技能训练课内容等,根据其教学的内容和方式,选择学生容易接受的方式进行制作,使有限的制作能力用在关键的地方。</p><p>2.整体性原则</p><p>整体性原则是指保证多媒体电子教案从内容上达到整体结构紧凑,并能系统、完整地表达教学内容。制作时,通过计算机软件的超链接功能,将教学单元之间的结构条理清楚、层次分明地形成一个整体。保证多媒体电子教案从版面布局上表现出较协调的整体风格,从整体的角度对电子教案的样式、颜色及按钮、文字的位置、大小进行安排。从功能上进行整体考虑,设置导航栏或帮助功能,从而使多媒体电子教案的功能更加完善。</p><p>3.程序性原则</p><p>程序性原则是指多媒体电子教案应保证设计程序上的合理性、交互性。通过合理的设计目录结构,使应用者在使用时能在繁多的教学内容之间自由地选择学习内容,但又不迷失方向,对电子教案各内容之间的层次关系一目了然,以方便教师教学和学生复习时使用。</p><p>4.美学性原则</p><p>美学性原则是指电子教案的制作要遵守界面美观、色彩协调、声画对位的原则。电子教案的制作,是一个艺术化的制作过程。其色彩的搭配要协调,声音与画面的组合要恰当,动画与视频效果的运用能解决教学的难点、重点。</p><p>二、撰写多媒体电子教案文案要涵盖四项基本设计内容</p><p>使用计算机制作多媒体电子教案,进行设计方案的文字撰写,相当于一个设计脚本。一个好的多媒体电子教案,必须有一个好的设计文案。设计文案是对整个教学课程的再创造,为以后的制作工作提供理论依据。由于多媒体电子教案是面向教学的,因此,其设计文案必须在教学理论的指导下,综合教学设计、各种媒体设计、结构设计、界面设计等四项基本设计内容。</p><p>1.教学设计</p><p>教学设计的目的不是炫耀新技术、新媒体,而是为了方便教学,更好地实现教学目标。要把保证教学质量、增强教学效果、实现教学大纲规定的目的、要求,作为教学设计的首要目标。同时,教学设计要根据多媒体的特点确定教学内容,再根据教学内容确定教学目标和确定教学重点。最后,以解决教学重点、难点达到教学目标为目的,对教学过程进行设计。内容包括:确定教学时间,即课时长度;设想教学情景;进行问题设置、演示环节、交流环节、教师总结等。根据各课程的教学特点,教学组织形式的构成要素,电子教案应包含以下内容:教学题目、教学要求、教学重点和难点;教学基本内容;归纳小结、思考题和练习题。</p><p>2.各种媒体设计</p><p>(1)文本的设计。文本在界面中起着直接表达各类信息的作用,是最基础的素材,应引起学生的注意力。一些教学信息,处理得好坏,将直接影响到多媒体电子教案呈现的效果,从而直接影响教学效果。文字内容要适中,语言精炼,简洁明了,突出重点。文字颜色应根据背景颜色选择,背景上的文字要突出,色彩搭配要合理,做到美观、醒目、易读。对于教学重点或关键性的标题、概念、结论等,要用与正文不同的字体或颜色突出显示。</p><p>(2)图形、图像的设计。为了更加突出背景图像上的文字,使学习内容一目了然,背景图像采用带有艺术性的淡雅色调为主基调,选择时起到能烘托主题的陪衬作用,不要使用与主题思想不符的背景图像。插图在传授知识方面起重要作用,可以利用各种媒体选择与教学内容密切相关的插图,能起到教学指导性和指示性的作用。</p><p>(3)声音的运用设计。动听的音乐、生动的音效有利于集中学习者的学习注意力,陶冶学习者的情操,激发学习者的学习潜力。声音的运用要适时、合理,才能起到较好的效果,否则会形成噪声,影响课堂教学。</p><p>(4)动画和视频的设计。通过生动有趣的动画和视频刺激学生的感官,变抽象为直观,变静为动,使难以觉察的事物能清晰地展现在学生眼前,便可为学生实现由具体的感知到抽象思维的飞跃架设桥梁。</p><p>3.结构设计</p><p>结构设计是设计多媒体电子教案的组织结构与表现方式,以及各部分教学内容的相互联系与联系方式,制定多媒体电子教案的框架结构和基本风格,使多媒体电子教案具有实用性强、操作方便、界面友好、智能性强、交互能力强等特点。</p><p>(1)为多媒体电子教案设计一个“片头”,采用二维或三维动画制作。片头的设计与制作的关键不是技术,关键是创意。</p><p>(2)再设计多媒体电子教案其他正文部分的结构。电子教案的基本结构为导航、链接、帮助、正文、自述文件。</p><p>(3)导航的设计。由于多媒体电子教案的信息量大,整体文件较长,在使用中通过各个相关页面的跳转来达到教学目的,所以,导航是多媒体电子教案中一个必不可少的结构设计。导航的设置应清晰、明了、准确地表达当前教学所在的位置、题目和知识点,同时也方便随时进入其他知识点学习。</p><p>导航功能的实现有几种方案:一种是放置导航按钮或导航图标。按钮是具有各种按钮形状的小符号。按钮上可以写上文字,以标出该按钮的功能。根据教学需要,在课程内容的任何位置加上按钮,将教案的整体与部分内容联系起来。图标是一种带有简单图形的符号,用形象的图形模拟现实事物,使人容易与现实事物产生联系。导航按钮和导航图标可以放置在每一页的顶部或底部,目的是让人一看到它们就知道其用处,明白其用法。</p><p>另一种树型结构,与教材目录相同,可用于辅助检索。树型导航目录为单独的一个页面,可以显示各章标题。单击其中任何一个章标题,都可以在另一页面显示这一章下面的节目录,相应的章标题文字颜色变色,表示为当前正在浏览或浏览过的章。</p><p>(4)超链接的设计。超链接是多媒体电子教案优于书本的一个突出特点。用鼠标点击某个按钮或文字等具有超链接的对象时,就会呈现关于这个对象所对应的信息,还可根据需要增加相应的超链接以方便链接相应的画面和素材。</p><p>在多媒体电子教案中,超链接的运用,可以实现教学信息的灵活获取以及教学过程、教学结构的重新组织,适合于不同层次的学习需要,更有利于因材施教。另外,还可以引发学生的联想,培养学生的思维能力。超链接的使用,可以根据不同教师的不同教学需求,进行各种跨章节,甚至跨学科的超级链接,有效组织电子教案的各种信息,体现知识点的内在联系。</p><p>在超链接的使用上,应该精心设计,真正体现知识的有机联系,又要谨慎使用超链接,控制链接数量,避免过多的链接让使用者迷失方向。</p><p>(5)帮助的设计。帮助是电子教案的使用说明,应具有使用方便、功能齐全(包括目录、索引等内容)的特点,能够在各个页面中随时调用。</p><p>(6)正文的设计。正文由各章、节的具体教学或演示内容构成。对于电子教案中的一个页面,应该反映一个突出的主题,或解释一个具体完整的概念。可以用陈述的文字概括重点内容,也可以用具有启发性的提问回答的形式来表达知识,使学生明确通过学习可以解决什么问题,获得什么结果。</p><p>(7)自述文件的设计。自述文件包括电子教案的开发软件环境、运行环境、安装及使用说明,运行所需音频、视频、动画等支持软件的要求,装入用户机硬盘后盘符不同时的重新链接方法,后续开发注意事项,制作群体及审定人员署名等。</p><p>4.界面设计</p><p>界面设计应本着遵循美学的原则,提供美观、和谐、色彩丰富、操作简便的用户界面。良好的界面设计,对激发学习积极性,吸引学习者的注意力和兴趣,有着十分重要的作用,在进行界面设计时,对屏幕上出现的各种文字、图形、图像、动画、声音等信息应做出既符合教学要求,又符合平面构图的原则,产生系统的整体布局效果。在界面设计时,主要考虑以下几方面的问题:</p><p>(1)分清主次,突出重点。把教学内容放在屏幕最显著位置,把操作帮助信息等次要信息放在屏幕的次要部位,正在学习的内容要加以适当的标识。</p><p>(2)激发学习者的兴趣。采用声音、动画、图像等直观信息描述教学内容,并实现多种信息的同步进行。</p><p>(3)合理运用色彩。注意前景色与背景色、文字颜色与背景颜色的搭配,并且每个画面的颜色组成不要过多。尽量采用和谐愉悦的色彩,以不分散学生的注意力为原则。</p><p>(4)和谐一致,体现整体的风格。界面设计中,图形格式统一、放映风格一致;各种元素的布局要主次有序、层次鲜明;同一层界面的背景、布局、字体、字号、字色(包括超链接)要完全一致。</p><h3>网页制作与设计教案 篇4</h3><p>第一步是对站点进行规划 第二步是创建站点的基本结构 第三步即可开始具体的网页创作过程 最后一步是站点的发布</p><p>第一节 站点的规划与创建</p><p>【教学目的与要求】</p><p>一、规划站点</p><p>二、创建一个站点 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：规划站点 重点知识：创建一个站点 2课时</p><p>【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、规划站点</p><p>Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的等）的链接文档。</p><p>本地站点：是本地硬盘中存放远程网站所有文档的地方（文件夹）。建立网站的通常做法是：在要地硬盘中建立一个文件夹用来存放网站的所有文件，往后就在该文件夹中创建和编辑文档。待网页设计和测试好之后，再把它们拷贝到网站上供浏览者浏览。</p><p>1、规划站点结构 注：规划站点的结构之前应先用笔绘出站点的结构图（如下图所示是一个典型的学校站点的结构图）</p><p>2、规划站点的浏览机制 一般可采用以下的方法：  创建返回主页的链接  显示网站专题目录  显示当前位置  搜索和索引</p><p> 反馈（将网页创作者或网站管理员公布在网页上，或创建一个E-MAIL超级链接，以使用户能快速地将信息反馈到网站中）</p><p>二、创建一个站点 步骤：</p><p>1、单击“文件”---“新建”---“站点”命令（或单击常用工具栏中“新建网页”按钮的下拉箭头，从打开的下拉菜单中选择“站点”命令）</p><p>2、选择一种站点模板或向导</p><p>3、单击“确定”按钮</p><p>三、站点的基本操作</p><p>1、打开站点：“文件”---“打开站点”</p><p>2、删除站点：</p><p>方法一：在Windows资源管理器中删除一个站点</p><p>方法二：在FrontPage中删除站点，在“文件夹”视图或“网页”视图的“文件夹列表”中，右击站点所对应的目录，在快捷菜单中单击“删除”命令</p><p>3、站点的设置</p><p>“工具”----“站点设置”，有“常规”、“参数”、“高级”、“语言”、“导航”、“数据库”六个选项卡 【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第二节 利用表格进行网页布局</p><p>【教学目的与要求】</p><p>一、插入表格</p><p>二、单元格的基本操作 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识： 插入表格 重点知识：单元格的基本操作 【教学组织过程】2课时 2课时</p><p>1．上讲回顾 2．教授新知 【授课内容】</p><p>一、插入表格</p><p>1、单击常用工具上的“插入表格”按钮</p><p>2、单击“表格”---“插入”---“表格”命令</p><p>3、使用表格工具栏（“查看”—“工具栏”---“表格”命令）</p><p>4、由文本转换（“表格”—“转换”—“文本到表格”）一般以段落为分行标记，以逗号或句号为分列标记。</p><p>二、单元格的基本操作</p><p>1、选择单元格（“表格”—“选定”—“单元格”）Ctrl：可选择不相邻的单元格 Shift：选择多个相邻的单元格</p><p>2、插入单元格（“表格”—“插入”—“单元格”）</p><p>3、合并单元格（“表格”—“合并单元格”或“表格工具栏”上的“合并单元格”按钮）</p><p>4、拆分单元格（“表格”—“拆分单元格”或“表格工具栏”上的“拆分单元格”按钮）</p><p>三、填充单元格</p><p>1、文本与图像填充（“插入”—“图片”）</p><p>2、对齐文本与图像（“表格”—“属性”—“单元格”，“水平对齐方式”、“垂直对齐方式”）</p><p>3、修改单元格背景（“表格”—“属性”—“单元格”，“背景”）</p><p>4、调整边框颜色（“表格”—“属性”—“单元格”，“边框”）</p><p>5、改变单元格尺寸（“表格”—“属性”—“单元格”，“指定宽度”、“指定高度”）</p><p>四、修改表格的行与列</p><p>1、选择行与列</p><p>2、插入行与列（“表格”—“插入”—“行或列”）</p><p>3、均分行与列（“表格工具栏”中的“平均分配行高”或“平均分配列宽”）</p><p>4、删除行与列（“表格工具栏”中的“删除单元格”按钮或“表格”—“删除单元格”命令）【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第三节 利用框架设计网页布局</p><p>【教学目的与要求】</p><p>一、认识框架网页</p><p>二、创建框架网页</p><p>三、框架网页的保存和打开 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：认识框架网页 重点知识：创建框架网页 【教学组织过程】2课时 2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、认识框架网页</p><p>1、框架的概念 框架网页是一种特殊的网页，它将自身分成几个区域，每个区域称作一个框架窗口（通常简称为框架）</p><p>框架具有以下特性：</p><p>每个框架都可以独立地显示一个网页，各个框架窗口之间可以设立超链接。每个框架窗口可以赋予一个名字，以便其他URL作为目标调用。</p><p>2、框架的使用场合（如邮箱、论坛）</p><p>通常用框架来显示在同一个站点中的多个超链接，这样可以不用浏览器中的“后退”按钮而方便的进行浏览。</p><p>框架也适用于类似在线书籍的应用，将目录显示在左边的框架中，单击目录，右边框架中显示相关的章节</p><p>二、创建框架网页</p><p>1、框架网页的创建</p><p>“文件”—“新建”—“网页”，选择“框架网页”选项卡</p><p>2、框架网页模板（10种）“设置初始网页” “新建网页”</p><p>三、框架网页的保存和打开</p><p>框架网页的保存包括框架网页自身的保存和框架窗口中网页的保存。</p><p>1、框架网页的保存</p><p>“文件”—“保存文件”或“框架”—“保存网页”</p><p>2、框架网页的打开 “框架”—“在新窗口中打开网页”</p><p>四、框架网页的属性</p><p>1、框架网页的属性 “文件”—“属性” “框架间距”、“显示边框”</p><p>2、框架的属性 “框架”—“框架属性”</p><p>五、调整框架布局</p><p>1、调整框架窗口的大小（用鼠标拖动或在“框架属性”对话框中调整）</p><p>2、框架的拆分</p><p>方法一：“框架”—“拆分框架”（按行或按列拆分）方法二：用鼠标拖动拆分（按Ctrl键）</p><p>3、框架的删除 “框架”—“删除框架”</p><p>六、目标框架</p><p>当在框架网页的某一个框架中定义超链接时，需要指定被链接的网页显示在哪一个框架中，即指定超链接的目标框架。</p><p>选择要设置超链接的文字或图像，“插入”—“超链接”，单击“目标框架”、“更改目标框架” 【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第四节 使用导航栏</p><p>【教学目的与要求】</p><p>一、定义导航结构</p><p>二、认识导航栏属性</p><p>三、创建导航栏 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识：定义导航结构 重点知识：认识导航栏属性 【教学组织过程】2课时2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、定义导航结构</p><p>在网页内添加导航栏之前，先建立该站点的导航结构 “视图”—“导航”按钮</p><p>二、认识导航栏属性 “插入”—“导航栏”按钮</p><p>“父层”：创建指向当前网页上一级网页的超链接，并将上一级网页的标题名称显示在导航栏内。</p><p>三、创建导航栏（要在浏览器中才可看到实际导航栏效果）</p><p>四、创建共享边框</p><p>用创建导航栏的方法只能在一个网页中创建导航栏，若需要导航栏出现在站点内多个网页的相同位置，则可将导航栏插入网页的共享边框内。</p><p>右击编辑窗口，单击“共享边框”命令 练习</p><p>二、利用框架设计一个企业网站的布局 要求有如下内容：关于我们、商品展示、在线订购、网上留言、联系我们、产品目录、友情链接等。【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第五节 网页布局功能的应用</p><p>【教学目的与要求】</p><p>一、创建布局表格</p><p>二、绘制布局表格 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】： 基础知识：创建布局表格 重点知识：绘制布局表格 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、创建布局表格</p><p>1、创建布局表格</p><p>打开一个空白网页，并切换到“设计”视图下，单击“表格”菜单中的“布局表格和单元格”命令，随后在右侧弹出一个任务窗口，在该任务窗口下面程序提供了多种表格布局模板，在此单击其中需要的模板即可将该模板添加到网页中。</p><p>2.绘制布局表格</p><p>如果你对模板中提供的布局表格不太满意，还可以用手工绘制的方法创建一个布局表格。创建时首先在“新建表格和单元格”项中单击“绘制布局表格”，随后将指针移到操作窗口最左端，然后拖动鼠标即可绘制表格。</p><p>3、设置表格属性 插入表格后，还需对表格属性进行设置。在“表格属性”项中设置该表格所需的属性。</p><p>提示：在设置表格时，如果要想覆盖网页的默认边距，并让布局表格跨到文档窗口的边缘，可以将表格中的各个边距的属性都设置为0。</p><p>在设计框架时经常需要调整某一行或列的属性，这时可以通过表格中列宽和行高的标签来完成。在操作窗口中单击布局表格需要调整的边框，每一侧都会出现显示列宽和行高的标签。每个标签都包括一个下拉箭头，如更改行高度时，单击此下拉箭头弹出一个下拉菜单，选择“更改行高”命令，在弹出的“行属性”对话框中重新输入该行高度值即可。</p><p>练习</p><p>三、使用布局功能设计学校网站</p><p>要求包括有以下内容：学校简介、校园新闻、教育教学、学生天地、校园论坛、教师之家等 【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第六节 网页布局设计</p><p>【教学目的与要求】</p><p>一、文本的美化（“格式”—“字体”）</p><p>二、运用边框与阴影（“格式”—“边框与阴影”）</p><p>1、设置边框</p><p>2、设置阴影</p><p>【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识：文本的美化（“格式”—“字体”）</p><p>重点知识：运用边框与阴影（“格式”—“边框与阴影”）</p><p>1、设置边框</p><p>2、设置阴影</p><p>【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、文本的美化（“格式”—“字体”）</p><p>1、输入文本</p><p>2、美化文本（设置文本字体、字号）注：字符的大小共有6级，其中默认级别是3。</p><p>3、设置文本效果</p><p>4、改变文本颜色</p><p>5、设置字符间距</p><p>二、运用边框与阴影（“格式”—“边框与阴影”）</p><p>1、设置边框</p><p>2、设置阴影</p><p>三、使用列表（“格式”—“项目符号和编号方式”）</p><p>1、添加项目列表。</p><p>项目列表也称为无序列表，它将在项目前添加标志符号。可以将图片作为新的项目标志。经常使用的项目符号有3种：实心黑点、空心圆圈和实心方块。</p><p>2、添加编号列表</p><p>在网页中的内容存在顺序关系时，可应用编号列表。</p><p>3、添加定义列表</p><p>定义列表就是在网页内定义词汇、术语的列表，具体的定义内容将以首行缩进的方式出现在列表的下一行。（格式工具栏的“样式”—“定义的术语”，输入要词汇、术语，按回车键）</p><p>4、设置嵌套列表</p><p>要建立组合列表，可以先生成第1级列表，然后再生成第2级列表，依此类推。</p><p>建立组合列表的具体操作步骤如下：（1）先生成第1级列表（2）将光标移动到拥有第2级列表的第1级列表项目的末尾，然后按回车键。将出现一个空的列表行。</p><p>（3）单击“格式工具栏”中的“增加缩进”图标。该行变为一个空白行，是没有列表编号或项目符号的。再单击一次“增加缩进”图标。（4）此时再按照建立列表的方法构造第2级列表。</p><p>（5）输入第2级列表。输入过程中每次接回车键就自动生成第2级列表项目。（6）第2级列表输入完毕后，将光标移到别的位置或者用鼠标在页面的空白处单击一下即可完成第2级列表的设置操作。</p><p>嵌套列表可以转变为可折叠大纲，这样在浏览器中浏览时，就可以展开或折叠大纲中的各个级次。生成可折叠大纲的具体操作步骤如下：（l）按生成复合列表的方法构造好这个复合列表所有的列表级次。</p><p>（2）选择“格式”菜单中的“项目符号和编号方式”命令，打开“项目符号和编号方式”对话框，或者在列表中单击右键，从弹出的菜单中选择“列表属性”命令。</p><p>（3）在打开的对话框中，选中“启用可折叠大纲”复选框。（4）单击“确定”按钮。</p><p>练习</p><p>四、设计一个介绍阳江风景及特产的网页</p><p>要求：设计一个网页介绍阳江的风景及特产，要用到折叠列表的方式来分别介绍阳东、阳西、阳春等的不同地区的风景名胜及特产。【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第七节 网页装饰设计</p><p>【教学目的与要求】</p><p>一、添加图像</p><p>二、处理图像 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识：添加图像 重点知识：</p><p>二、处理图像 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、添加图像</p><p>在浏览器中，能处理的图片格式只有GIF、JPEG格式和PNG格式等少数几种图片。</p><p>1、GIF格式图片</p><p>GIF格式最多能支持256种颜色（8位颜色）。可以具有透明、动画等特殊效果。</p><p>2、JPEG格式文件</p><p>JPEG格式可以处理高达1670万种颜色（24位颜色），所以在需要显示细微的变化和使用大量的色彩处理照片时经常使用这种格式保存文件。</p><p>插入本地计算机上的图像（“插入”—“图片”—“来自文件”，“从计算机选择一个文件”）</p><p>插入WEB上的图像（“插入”—“图片”—“来自文件”，“从WEB浏览器来选择网页或文件”）</p><p>二、处理图像</p><p>1、剪裁图像（“图片”工具栏—“剪裁”按钮）</p><p>2、设置透明背景（“图片”工具栏—“设置透明色”按钮）</p><p>三、添加文本（“图片”工具栏—“文本”按钮）</p><p>四、保存图像</p><p>注：默认情况下，当前站点的图像文件保存在Images文件夹中</p><p>五、运用特殊效果</p><p>1、调整图片的亮度和对比度</p><p>2、图片的翻转与旋转</p><p>3、图片的冲蚀和黑白处理</p><p>4、凹凸效果</p><p>六、设置图片对齐方式（“图片属性”—“外观”—“布局”—“对齐方式”）</p><p>七、使用水平线</p><p>水平线是贯穿网页宽度的细灰条，用于分隔文本或加着重符。添加水平线后，可以修改其属性来更改宽度、高度、对齐方式和颜色。如果网页使用了主题，则会使用图形来代替水平线以匹配主题。</p><p>1、插入水平线</p><p>2、设置水平线属性</p><p>八、修改网页背景（“格式”—“背景”）</p><p>1、调整背景色彩</p><p>2、调整背景图案</p><p>九、创建交换图像（DW 2004）</p><p>1、插入交换图像（“插入”—“图像对象”—“鼠标经过图像”）“原始图像”、“鼠标经过图像”、“按下时，前往的URL”</p><p>2、预览交换图像：F12 【课程小结】a 【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第八节 创建超链接</p><p>【教学目的与要求】</p><p>一、与当前站点的链接</p><p>二、与空白网页的链接</p><p>三、与电子信箱的链接 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识：创建热点 重点知识：与电子信箱的链接 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、与当前站点的链接（“插入”—“ 超链接”，“搜索”当前站点的文件夹位置）</p><p>二、与空白网页的链接（“插入”—“ 超链接”，“创建一网页并链接到该网页”）</p><p>三、与电子信箱的链接（“插入”—“ 超链接”，“制作发送电子邮件的超链接”）</p><p>四、与Web的链接（“插入”—“超链接”，“使用WEB浏览器来选择网页或文件”，ALT+TAB，则网页地址自动添加到URL中）</p><p>五、修改链接颜色（“网页属性”—“背景”，“颜色”—“超链接”、“已访问的超链接”、“当前超链接”）</p><p>六、使用图像地图</p><p>1、创建热点</p><p>在图片中创建热点的具体操作步骤如下： 选中要建立热点的图片。图片被选中后，四周将出现8个控制方块，并且“图片工具栏”被激活。</p><p>在“图片工具栏”中，选择热点的形状的图标。可以选择长方形、圆形或多边形。</p><p>将鼠标移动到图片中。这时，鼠标指针变成一支笔的模样。</p><p>用鼠标左键单击图片中要建立热点的区域并拖动鼠标来绘制热点。尽量让热点和图片上的特征区域相配合</p><p>热点绘制完毕，图片中将出现该热点的边框。打开“插入超链接”对话框，建立到热点上的超链接的过程与建立到文本上的超链接的过程基本相同。</p><p>练习</p><p>五、设计一个介绍一年四季风景的网站 要求：</p><p>用到嵌套列表、框架、超链接、图像热点等技术。【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第九节 表单设计</p><p>【教学目的与要求】</p><p>一、认识表单</p><p>二、生成表单</p><p>三、表单内容编辑 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识：认识表单 重点知识： 表单内容编辑 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、认识表单</p><p>表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。</p><p>二、生成表单</p><p>1、表单的创建与表单字段的添加 “插入”—“表单”</p><p>2、表单向导</p><p>“文件”—“新建”—“网页”--“常规”——“表单网页向导”</p><p>三、表单内容编辑</p><p>1、单行文本框</p><p>2、滚动文本框</p><p>3、复选框</p><p>4、单选按钮</p><p>5、下拉菜单</p><p>6、按钮</p><p>7、图片</p><p>8、标签</p><p>9、隐藏的表单字段</p><p>四、验证性表单字段（“验证有效性按钮”）</p><p>五、表单处理程序</p><p>右击表单，选择“表单属性”命令，提供了保存表单数据的三种不同处理方式：</p><p>1、发送到文件（单击“选项”按钮”，进行设置）</p><p>2、发送到数据库</p><p>3、讨论表单处理程序</p><p>4、注册表单处理程序</p><p>5、自定义ISAPI、NSAPI、CGI或ASP脚本 练习六：制作表单</p><p>制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、常用电话、收货地址、邮政编码、提交按钮、重填按钮 【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第十节 层及应用（DW 2004）</p><p>【教学目的与要求】</p><p>一、层概述</p><p>二、创建层 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识：层概述 重点知识：创建层 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、层概述</p><p>层（Layer）是一种 HTML 页面元素，您可以将它定位在页面上的任意位置。层可以包含文本、图像或其它 HTML 文档。层的出现使网页从二维平面拓展到三维。可以使页面上元素进行重叠和复杂的布局。</p><p>二、创建层</p><p>方法一：“插入”—“布局对象”—“层”</p><p>方法二：“插入”工具栏—“布局”—“ 描绘层”，按住鼠标拖动 方法三：“插入”工具栏—“布局”，拖动“ 描绘层”按钮到文档窗口（按CTRL键，可绘制多层）</p><p>三、通过拖动周围的黑色调整柄控制层的大小</p><p>四、拖动层左上角的选择柄可以移动层的位置。</p><p>五、单击层标记可以选中一个层。（显示层标记的方法：“编辑”—“首选参数”—“分类”—“不可见元素”</p><p>六、显示层面板（“窗口”—“层”）</p><p>1、层的隐藏与显示</p><p>2、层数</p><p>3、层重叠</p><p>七、层和表格之间的转换（在转换为表格之前，请确保层没有重叠。）“修改”—“转换”—“层到表格”</p><p>若要将表格转换为层，请选择“修改”—“转换”—“表格到层” 【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业、第十一节 行为</p><p>【教学目的与要求】</p><p>一、行为概述 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识：行为概述 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、行为概述</p><p>行为是一种利用简单直观的语句设置手段，为网页对象添加一些动态效果和简单的交互功能的技术。行为是事件和由该事件触发的动作的组合。</p><p>下面给出一些常见事件的一些解释</p><p>onClick 单击</p><p>onDbclick 双击</p><p>onKeypress按键</p><p>onMouseDown鼠标按下</p><p>onMouseOut鼠标移出</p><p>onMouseOver鼠标移上</p><p>onMouseUp鼠标抬起。</p><p>实例：dreamweaver中网页折叠菜单的制作</p><p>第一步：先插入一个一行、两列的表格，方法：单击菜单上的“插入”，再选取“表格”，在“行”中输入1，在列中输入2，在单击“确定”。</p><p>把宽和高分别设为200px和30px 在两个单元格内分别输入 内容</p><p>第二步，在单元格内插入一个层。把宽和高分别设为100px和90px 第三步：在层中插入一个三行、一列的表格，方法同第一步。并把宽和高分别设为100px和90px,以填满这个层。在三个单元格中输入内容</p><p>在层的属性栏中将“可视”设为“隐藏”，这样在打开网页时便看不见这个层</p><p>在“行为目标”中选择一个合适的浏览器，一般是选择“IE 4.0”。然后单击左边的“+”按钮，来添加行为。在弹出的菜单中选择“显示或隐藏层”，在弹出的窗口中选择 “Layer1”，就是我们刚才添加的那个层了，再单击“显示”</p><p>接着单击“事件”下面右边的那个向下箭头按钮，在弹出菜单中选择“当鼠标移上”（OnMouseOver）。</p><p>再单击“+”按钮，选取“显示或隐藏层”，还是选取“Layer1”，不过这次我们点击的是“隐藏”（Hide）了，再确定。然后选择“事件”，单击“当鼠标移开”(OnMouseOut)。【课程小结】</p><p>【作业】</p><p>1．5 课后练习书本课后练习作业</p><p>第十二节 HTML语言基础</p><p>【教学目的与要求】</p><p>一、HTML语言概述</p><p>二、HTML文件基本架构 【教学方法与手段】</p><p>多媒体教学：借助多媒体手段，进行课堂理论教学；</p><p>启发式教学：教学活动关注的重点从结果转向过程。激发思维，师生互动，增强学生学习的主动性、积极性和创造性； 【教学重点与难点】：</p><p>基础知识： HTML语言概述 重点知识：HTML文件基本架构 【教学组织过程】2课时 1．上讲回顾 2．教授新知 【授课内容】</p><p>一、HTML语言概述</p><p>当我们畅游Internet时，我们透过浏览器所看到的网站，是由HTML(HyperText Markup Language)语言所构成。HTML(超文件标记语言)是一种建立网页文件的语言，透过标记式的指令(Tag)，将影像、声音、图片、文字等连结显示出来。</p><p>HTML标记是由 < 和 > 所括住的指令，主要分为 : 单标记指令、双标记指令(由 < 起始标记 >，< / 结束标记 >所构成)。HTML网页文件可由任何文本编辑器或网页专用编辑器编辑，完成后(以.htm 或.html 为文件后缀保存)将HTML网页文件由浏览器打开显示，若测试没有问题则可以放到服务器(Server)上，对外发布信息。</p><p>二、HTML文件基本架构</p><p><HTML> 文件开始 <HEAD> 标头区开始 <TITLE>...</TITLE> 标题区 </HEAD> 标头区结束</p><h3>《吉祥物的设计与制作》说课教案 篇5</h3><p>1、教材的地位和作用。</p><p>本课 是<策划一次校园活动>单元中的一课.这个单元的学习过程是把美术学科知识与其他学科知识综合应用到校园活动实践之中，综合解决问题与整体艺术策划，包括会标，吉祥物，请柬，纪念册，海报 设计 等。吉祥物设计是本单元的重要组成部分。通过 吉祥物的设计，培养学生的形象思维能力、创新精神和实践能力； 同时，也为学生提供创造性解决问题和发挥其艺术潜能的机会，帮助他们认识自己的独特性和价值，形成个性化的审美趣味。</p><p>2、教学目标。</p><p>根据教学大纲和教材要求，本着使学生提高对美的感受能力和艺术创造能力，培养学生形成良好的思想品德，我设计了如下教学目标。（1）、知识目标---了解吉祥物的概念，及设计方法步骤；训练使用绘画的造型与色彩完成吉祥物的设计。</p><p>（2）能力目标---通过吉祥物的设计，培养学生的形象思维能力，创新思维能力，和初步的审美能力。</p><p>（3）情感目标---通过本课学习，培养学生对集体活动的兴趣，以及关心社会、热爱生活、健康向上的情感与态度。</p><p>3、教学重点。</p><p>创作吉祥物的构思是本课的教学重点。创作吉祥物的构思是本课非常重要的环节，它决定学生作品的质量和品位。我在本节课给学生展示大量的资料，逐步引导并开阔学生的思路，找到自己适合的风格和处理方法。所以我把吉祥物的构思这一环节作为重点。4．教学难点：吉祥物的造型和色彩设计。</p><p>二、说学情。</p><p>中学生已经初步认识了美术工具和材料，对不同的材料和工具的使用已有一定的掌握，会用简单的线条和色块来表现他们所知道的东西。他们接受信息的途径很广，思维活跃、想象丰富、联想奇特，他们习惯 以自我为中心，喜欢按照自己的想法自由的表现画面；好奇心重，爱表现自己，但动手能力 欠缺，只能用简单的工具和绘画材料来稚拙地表现自己的想法。而《 吉祥物设计 》这节课就是让他们在轻松愉悦的氛围中表现自己的想法，符合学生发展的特点。</p><p>三、说教法。</p><p>1本课采用的教学方法：启发问答法、讲授法、演示法、讨论法。我在这一节课重点运用两种方法即启发问答法和讨论法。注重每个学生的个性特点，挖掘出学生们的闪光点，鼓励他们，充分调动他们的积极性，并为他们创设参与体验积极实践的条件，帮助他们认识自己的独特性和价值，形成具有自己风格的审美趣味。2教具:多媒体课件.3学具:布、卡纸、毛线、剪刀、胶水、水粉、水粉笔等。</p><p>四、说教学过程。</p><p>通过以上这几方面内容的分析，我对教学过程制定了如下教学设计。</p><p>1、导入新课。</p><p>2、我将以提问的方式导入新课。</p><p>提问（1）同学们，谁能说出给你印象深刻的一些吉祥物的形象？（学生查找资料自由回答）</p><p>（2）同学们自己总结一下什么是吉祥物呢？（学生总结性发言，教师小结: 吉祥物是人们为组织主体活动而设计的标志性的形象，象征欢乐吉祥，内含企盼成功的愿望。）</p><p>(3)那么我们2008年北京奥运会吉祥物又是什么呢？（看奥运吉祥物动画宣传片）相关资料：北京奥运会吉祥物由五个拟人化的娃娃形象组成，统称“福娃”，分别叫“贝贝”、“晶晶”、“欢欢”、“迎迎”和“妮妮”。五个名字的读音组成谐音“北京欢迎您”。贝贝化身为鱼儿在无边的大海中游弋，晶晶扮作憨态可亲的熊猫在茂密的森林中玩耍，迎迎犹如藏羚羊在广阔的草原上奔跑，妮妮似轻盈的京燕欢快地在天空中低唱。他们簇拥在象征着古奥林匹亚赫拉神庙的奥林匹克圣火――欢欢身旁，用他们各自的名字组成了谐音“北京欢迎您”的铿锵话语，向全世界小朋友、他们的兄弟姐妹和他们的家长发出了邀请。福娃代表了梦想以及中国人民的渴望。他们的原型和头饰蕴含着其与海洋、森林、火、大地和天空的联系，其形象设计应用了中国传统艺术的表现方式，展现了中国的灿烂文化。</p><p>2、新授。</p><p>今天我们来学习吉祥物的设计。</p><p>在这一部分我将运用欣赏法、讲授法、谈话法等来完成教学内容。1．首先和学生一起研讨吉祥物的造型特点：</p><p>我将运用电化教学欣赏教师和学生准备的资料，找出特点，由同学总结出（1）在形象上：夸张、活泼、可爱、憨厚、幽默（2）在色彩上：色彩亮丽，对比鲜明 通过对吉祥物造型特点的学习，我们对吉祥物有了更深一步的了解，如果让大家自己设计一个吉祥物应该怎样做呢？（有同学总结回答）２.吉祥物设计的构思方法（引导学生总结出）</p><p>（1）先确定主题（例如：艺术节、学校运动会、劳动周、班会等）（2）选定一个原形（动物、文具、器皿等）（3）对原形进行大胆地概括、夸张、变形： a.形体b.动作 c.表情 d.服饰e.道具等方面（4）色彩的处理：明快、鲜明、有自己的观点 3.热身活动（抓好辅导环节，优化课堂教学结构）我们了解了吉祥物造型的特点，也知道了设计吉祥物的构思和方法，接下来就有同学们自己来设计一个吉祥物。</p><p>让学生自己感受和体验设计吉祥物的乐趣，充分调动他们的主体意识，让他们自己设计一款吉祥物 要求:</p><p>（1）用绘画的手段先把造型构思出来。</p><p>（2）同时可以借用其它辅助材料（例：布、卡纸、毛线等）来表现 4.展示评价</p><p>展示学生的优秀作品，学生自我评价，同学之间互相评价，教师集中点评。</p><p>五．小结。</p><p>通过本课的学习，我们对设计吉祥物有了新的认识，使学生了解了一些著名的吉祥物的造型、色彩和年代及其所代表的重要活动。学生能够自选媒材，设计出自己喜欢的吉祥物。培养了学生关心社会、热爱生活、健康向上的情感和态度，以及提高了学生的个人审美取向的形象表达和创新能力，使他们意识到美术对社会生活的重要作用。六．板书</p><p>板书采用提纲式，一目了然，便于理解和记忆。</p><p>吉祥物的设计</p><p>（一）吉祥物的特点</p><p>１.在形象上：夸张、活泼、可爱、憨厚、幽默 2.在色彩上：色彩亮丽，对比鲜明</p><p>（二）设计吉祥物的构思方法</p><p>１．确定主题 ２．选定原形</p><p>３．对原形进行概括、夸张、变形 ４．色彩的处理</p><h3>制作小凉帽教案设计 篇6</h3><p>【设计思路】</p><p>天气渐热，帽子成为孩子们经常会用到的物品。因为班级最近处于隔离期，早上来园时，孩子们会带着小帽子进教室，这让孩子对小帽子产生了好奇和新鲜。但是经过询问我发现孩子们对于夏天的凉帽和其他帽子的区别是不清楚的，他们对于帽子的概念就是戴在头上很好看，为了让孩子了解凉帽的不同和作用，故设计了本次活动。</p><p>活动中，第一环节让孩子观察不同的凉帽，回忆已有的生活经验；第二环节通过操作材料进行制作凉帽，这份操作材料看起来比较简单，但实际进行操作后发现对于孩子来说可能会有难度，因为帽子需要进行穿插，而且这个凉帽的外形不是比较常见的那种，老师可以通过示范指导，进行局部示范制作的仔细讲解，让孩子获得成功的体验。</p><p>【活动目标】</p><p>1、在制作凉帽的过程中，了解凉帽的外形和在夏天里的作用。</p><p>2、尝试折折、剪剪，掌握剪刀的正确用法。</p><p>【活动准备】</p><p>凉帽图片、操作材料、剪刀</p><p>【活动过程】</p><p>一、说凉帽――观察不同的凉帽</p><p>1.出示不同的凉帽图片，说说这些凉帽的样子？（鸭舌帽、草帽、贝雷帽、遮阳帽）</p><p>2.什么时候需要戴凉帽，天热后戴上凉帽有什么好处？</p><p>（天热的时候要戴，能遮挡太阳、防止紫外线、不会被晒伤）</p><p>小结：凉帽有各种各样的式样，而且形状也不同，它们可以在夏天帮助我们遮挡太阳，减少我们头上出汗。</p><p>二、做凉帽――尝试独立完成作品</p><p>1.老师指导，在帽沿上画些自己喜欢的夏天的物品：如冷饮、扇子等。</p><p>2.引导幼儿添画有自己创意和想象力的夏天图案。</p><p>3.制作小凉帽</p><p>1）示范剪刀的`使用方法。</p><p>2）观察制作材料，了解小凉帽的部位：如帽檐和帽子周边部分。</p><p>3）黑线处用剪刀剪开，剪的时候沿着黑线慢慢剪。</p><p>4）虚线处折一下，将两个有红点的地方粘贴在一起。</p><p>4.指导个别能力较弱的幼儿。</p><p>三、戴凉帽――感受成功的喜悦</p><p>1.将完成的凉帽戴在头上，感受成功的快乐。</p><h3>网页设计与制作 篇7</h3><p>网络设计要遵循下列原则:</p><p>(1)色彩的独特性</p><p>网页色彩的选择与搭配要与众不同,使大家对你的网页印象深刻。</p><p>(2)色彩的鲜明性</p><p>网页的色彩要鲜艳,容易引起浏览者的注意力。</p><p>(3)色彩的合适性</p><p>网页色彩要与所表达的内容相融合。另外,还要针对浏览者的类型、社会背景、心理需求来选择网页的色彩。</p><p>比如,政府网站多采用红色来体现其严肃性;女性站点的网页多采用浅淡类色彩来表现女性的柔美;环保网站一般采用绿色来体现健康与生命。</p><p>(4)色彩的联想性</p><p>不同的色彩会使人产生不同的联想,白色使人想到雪花,黑色使人想到黑夜,蓝色使人想到天空。在网页设计时,多运用具有美好联想的色彩,可以使网站流露出别样的气息。</p><p>网页色彩设计的方法可以简单地概括为&ldquo;整体统一,局部对比&rdquo;。也就是说网页的整体色彩效果应该是和谐统一的,只有局部的、小范围的色彩对比作为点缀。在进行网页色彩设计时,首先要明确网站的主题和服务对象,以及你通过色彩希望达到的目的。例如要设计一个儿童类网站,为了达到欢乐活泼的气氛,就要选择非常鲜艳活泼的色彩。然后,根据网站的主题、服务对象及用色目的,确定网页的主色调,以形成统一的风格。整个网页最好只有一个主色调。主调颜色一般采用公司的标准色,这样符合公司的形象战略,可以提升公司的形象。个人站点可以根据网页的内容和自己的喜好来确定主色调。</p><p>主调色确定后,还可以选择一两种辅助色配合使用,整个网页的色彩最好控制在三色以内。如果整个网页采用单色调,即只用一种色相,可以调节其明度或纯度,也就是说将色彩变深或变淡,产生新的色彩。采用单色调,容易形成一种风格,在网页局部可以采用小面积的互补色来作为点缀,达到丰富页面的作用。网页的辅助色还可以用主调色的邻近色或互补色,也可以使用非彩色黑白灰。</p><p>接下来,要确定背景和文字的色彩。背景和文字色彩的对比尽量要大,以便突出主要文字内容。正文和标题的背景色可以不同,一般正文的背景色用淡雅的颜色,标题的背景色可以用较鲜艳的颜色。背景色如果以白色等淡色为主,文字的色彩就要用低明度的彩色;如果背景色以彩色为主(一般只用一种),那么文字的色彩要与背景色有一定的色相差或者明度差,这样搭配有利于人们阅读。</p><p>最后,要确定超链接的颜色。这里的超链接指文字超链接。超链接的颜色要和其他文字颜色区别开,这样有利于浏览者很快发现并找到自己所需的信息。</p><p>2 文字的编排与设计</p><p>文字是最容易传递信息和最通用的一种沟通方式。文字作为一种符号,在长期的应用和变革发展中,经历了简单&mdash;复杂&mdash;简练的演变过程。现在看到和使用的许多种文字符号已经发展得非常成熟,在一些应用的实例中,不需要任何装饰与组合,便能独立地成为一个完美的视觉传达。</p><p>在很多经典的设计作品中,文字的组合大多用来作为画面空间的分割。在长期的实践应用中,文字排版逐渐形成了一定的规律和规范。通过文字大小的比例关系和平面设计上点线面关系的组合构成,可以获得不同的视觉效果。例如,粗大黑体字可以产生强烈的视觉冲击力,而细小的字体则在视觉上产生连续性,同时其构成的版面也给人一种精细整洁的感觉。因此,在网页及多媒体界面设计中,文字应该作为一种动态元素和画面构成的基本要素,通过平面设计来展现自身极强的表现力。在网页页面的设计中,由于计算机技术的高速发展,字体多样化成为必然,例如常见的方正字库、华文字库、兰亭字库、经典字库等。但是我们在设计网页时,根据每个网页内容,只选择使用三四种字体就可以了。通过精心的平面规划与编排,使文字配合网页画面,达到和谐与统一。</p><p>字体的选择要与网站内容的性质相吻合。如休闲娱乐类网页,文字字体鲜亮明快,给人以优美清新、轻松愉悦的感受;有关历史文化方面的网页,字体应具有一种苍劲古朴、端庄典雅的格调;政府网页,其文字具有庄重和严肃性,字体规整简洁;公司网页可根据行业性质和企业理念对字体进行编排与设计,使其符合主题内容;个人主页可以根据个人的爱好与兴趣,充分展示个性和特色。</p><p>总之,文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息,要达到这一目的就要做到以下几点:一是提高文字的可读性;二是文字的位置要符合网页设计要求;三是在视觉和色彩及形式上应给人以美感;四是在整体平面设计上要有独特的风格和色调并力求形式上的创新。</p><p>3 图片的编排与设计</p><p>图片是文字以外最早引入到网络中的多媒体对象。图片的引入大大美化了网络页面。可以说,要使网页在纯文本基础上变得更有趣味,最为简捷省力的办法就是使用图片。对于一条信息来说,图片对受众吸引也远远超过单纯的文字。</p><p>网络图片的特点是其质量不需很高。一般来说,分辨率为72 dpi(dot per inch)是大多数图片最佳选择;另外,图片要尽量小。网络页面的图片用于网络的传输,受到带宽的限制,其文件尺寸在一定范围内越小越好。这也是适应信息高速公路的要求。</p><p>图片的位置、面积、数量、形式、方向等直接关系到网页的视觉传达。在图片的选择和优化的同时,应考虑图片在整体编辑计划中的作用,达到和谐整齐。要达到这样的效果,在页面图片的选用时,一要注意统一;二要注意悦目;三要注意突出重点,特别是在处理和相关文字编排在一起的图片时。</p><p>4 网页设计基本特征</p><p>(1)交互性</p><p>网页不同于传统媒体之处,就是在于交互性。在网络中,传播者和受众的身份不再明确,传播信息和接受信息几乎可以同时完成,人们的角色在瞬间就能转换。每个人都是传播者,每个人都是受众,这就是网页的交互性。交互性既是网络成为热点的主要原因,也是网页设计时必须考虑的问题。在网络环境下,人们不再是一个传统媒体方式的被动接受者,而是以一个主动参与者的身份加入到信息的加工处理和发布之中。在网络世界里,信息的传达、发表不再是少数人所拥有的特权,每个人都可以成为信息的消费者,同时也是信息的发布者,他们拥有更大选择的自由和参与的机会。</p><p>(2)可延续性</p><p>网页设计具有可延续性,网页发布后,最终结果是以数字化形式出现的,所以信息和形式的调整都非常方便。设计人员可以在网页传递到主机上后,对其中的编排、色彩等做相应的调整,以达到最好的视觉效果和传达效应。此外由于网页所具备的交互性特点,使得网页信息的发布成为不断更新的循环过程,网页设计人员必须根据用户的反馈信息和网站各个阶段的经营目标,经常地对网页进行调整和修改。例如,为了保持网站的新鲜感,很多大型网站总是定期或不定期地进行改版,这就需要设计者在保持网站视觉形象一贯性的基础上,不断创作出新的网页设计作品。</p><p>(3)多媒体的综合利用性</p><p>网页最大的资源优势就是它的多媒体综合利用性。目前网页可以利用文字、声音、图像、动画,甚至虚拟显示技术等与用户交互,在表现形式上可谓声形并茂。比如在众多商业网站中,都将动态图文技术恰如其分地运用到网页设计中,不但吸引了浏览者的眼球,同时也提高了界面的点击率,达到了一定的商业广告宣传作用。随着网络技术的发展、带宽的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广,必将促使设计者更加综合地运用多种媒体元素来设计网页,以满足和丰富浏览者对网络信息传输质量提出的更高要求。</p><p>(4)技术与艺术结合的紧密性</p><p>网页设计是一门新兴的网络技术与设计艺术的交叉学科,既具备网络的基本特性,还具备了平面设计艺术特性。在网页设计中,技术和艺术是紧密结合、相辅相成的。网络技术与艺术创意的紧密结合,使网页的艺术设计由平面设计扩展到立体设计,由纯粹的视觉艺术扩展到空间听觉艺术,从而更加吸引浏览者。网页设计者也应该积极主动地掌握现有的各种网络技术规律,注重技术和艺术紧密结合,这样才能穷尽技术之长,实现艺术想象,满足浏览者对网页信息的高质量需求。</p><p>5 结语</p><p>网页设计是一门新兴的网络技术与设计艺术的交叉学科,既具备网络的基本特性,还具备了平面设计艺术特性。在网页设计中,技术和艺术是紧密结合、相辅相成的。网络技术与艺术创意的紧密结合,使网页的艺术设计由平面设计扩展到立体设计,由纯粹的视觉艺术扩展到空间听觉艺术,从而更加吸引浏览者。网页设计者也应该积极主动地掌握现有的各种网络技术规律,注重技术和艺术紧密结合,这样才能穷尽技术之长,实现艺术想象,满足浏览者对网页信息的高质量需求。</p><p>摘要：网页设计就是依据网站宗旨,把造型、结构、信息、色彩等视觉元素有机地统一在网页中,并对网页风格等进行整体设计。其目的主要是利用造型的原则和规律,合理地分配和排列文字、图形等视觉元素,以便准确、系统、有效地传达信息。</p><p>关键词：网页设计,网页,网页制作,规范</p><p>参考文献</p><p>[1]张帆,罗琦,宫晓东.网页界面设计艺术教程[M].人民邮电出版社,2002.</p><p>[2]王楠,李岭松.网站设计教程与上机指导[M].清华大学出版社,2006.</p><p>[3]王庆斌,张福昌.现代网页色彩设计[J].无锡轻工大学学报:社会科学版,2001,(2).</p><p>[4]张帆,罗琦,宫晓东.网页界面设计艺术教程.北京:人民邮电出版社,2002:2.</p><p>[5]文喜华.论网页设计中的艺术和技术.邵阳学院学报(社会科学版),2005,4(6):115-116.</p><h3>关于网页设计与制作问题的研究 篇8</h3><p>关键词：网页设计；色彩；网页优化</p><p>中图分类号：TP393.092</p><p>随着信息技术的飞速发展，网络是人们获取信息的主要手段，尤其目前的很多商业性网站，除了追求信息量丰富、操作便捷之外，要求网页的视觉效果也要体现个性，突出网站的特色。因此，这就对网页的设计与制作提出了更高的要求。</p><p>在网页的设计过程中，首先要注重内容，无论是内容的承载信息量的广度和深度，还是内容的组织层次上都很重要，很多人浏览网页的针对性很强，比如上网查找软件、MP3、小说下载或一定的资讯、教材等能够更好地满足需求；其次是网站的速度。在确定内容的基础上，尽量提高速度十分必要，速度太慢，访问者也只有失去耐心，从而影响你网站的访问量；最后，是页面视觉的美观。要强调艺术性，注重通过独特的艺术风格来突出设计目的。</p><p>1 网页设计的任务</p><p>1.1 资讯类网站，目前知名新华网、新浪网、搜狐等都属于这类网站。它以提供信息的量大、及时、全面、权威等特点吸引广大访问者。因此在网页设计过程中要做到布局合理、页面分割有序，更要注重界面的亲和力等问题。</p><p>1.2 资讯和形象兼顾的网站，如高等学校的网站，一方面宣传办学理念、优势、特色等企业形象；另一方面也会向社会发布招生、就业等资讯。再如海尔海尔、索尼等一些知名企业的网站。在设计上既要保证资讯类网站的要求，同时又要突出企业、单位的形象。甚至要突出企业的经营理念，所以从目前状况上来看，很多企业不惜重金，不断更新软硬件设施，翻新网络内容和网页设计。</p><p>1.3 形象类网站，目前各类企业都会通过媒体宣传自己，树立企业的形象。所有的企业几乎追求的都是同一个目标，就是让自己企业的名字，产品以及服务都能深入人心，网络的出现也就提供给了企业另一个宣传的平台，为企业树立形象提供了一条新的路线。因此这类网站对设计者的美工水平要求较高。</p><p>2 网页设计应遵循的原则</p><p>在网页的设计过程中，画面中的所有元素组织要达到良好的效果，这就需要遵循以下几项原则：</p><p>2.1 统一性原则。画面中的各组成部分不能鼓励分散，缺乏条理性，能够放在同一界面的当中，就要保证内容的整体性，设计风格的一致性。</p><p>2.2 连贯性原则。页面之间都是相互联系的，每一条目犹如城市路标，清晰地指引浏览者走下目的地，这就需要将内容恰当归属；表现形式上也要前后一致、相互呼应，实现视觉上和心理上的连贯，使整个页面设计的各个部分极为融洽，犹如一气呵成。</p><p>2.3 分割性原则。页面分成小块更容易产生清晰的视觉效果，使观者第一时间完整目标定位，在众多信息中找到重点，节省大量的信息筛选时间。</p><p>2.4 对比性原则。就是通过矛盾和冲突，使设计更加富有生气。在使用对比的时候应慎重，对比过强容易破坏美感，影响统一。</p><p>2.5 和谐性原则。页面在多个元素之间划分，但也不失整体性，这是艺术设计中追寻美的法则。设计的作品中颜色、形状、线条太多、太杂就会失去其灵魂所在，充满太多随意性的作品无法实现觉设计的传达功能。和谐不仅要看结构形式，而且要看作品所形成的视觉效果能否与人的视觉感受形成一种沟通，产生心灵的共鸣，这是设计能否成功的关键。</p><p>3 网页的设计与制作过程</p><p>3.1 网页设计的实现。网页设计的实现过程可以分为两个环节：首先，手工绘制阶段，用纸和笔画出站点的规划及草图。设计网页的版面布局，我们将以合适最适合的方式将图片和文字排放在页面的不同位置，动画也要设置恰当的路线、恰当的时机。“画竹要成竹于胸”有了这份蓝图，我们就到了真正的蓝图实现阶段了。第二环节在计算机上完成网页的制作。这时除了要有一台配置不错的计算机外，软件也是必需的。微软的FrontPage、前Macromedia公司的DreamWeaver及网页设计新贵Adobe公司的Golive。利用这些软件工具，将蓝图中的组织形式和设计理念付诸于实践。在设计的过程中要体现创意，融入恰当的艺术元素规划组织结构，体现信息内容。</p><p>3.2 色彩的运用。色彩是美丽而丰富的，它能唤起人类的心灵的共鸣，促使人们产生无限遐想。每种颜色都有其深刻的寓意，如红色是热烈、冲动、强有力的色彩，它能使肌肉的机能和血液循环加快。由于红色容易引起注意，所以在各种媒体中也被广泛的利用，除了具有较佳的明视效果之外，更被用来传达有活力，积极，热诚，温暖，前进等涵义的企业形象与精神，另外红色即是警告，危险，禁止，防火的指定色。因此网站设计过程中色彩设计是重要一环，网站的整体色彩搭配应符合网站的主题信息特征。而网站的整体色彩搭配是由主色调和辅助色调两部分。</p><p>主色调是构成网站形象的一种或一组主要色彩。明确网站的主题、服务对象之后我们再根据每种颜色的寓意进行选择。如绿色食品类的网站以绿色为主，突出希望、健康的主题。通过主色调体现企业形象，以此达到品牌或产品宣传的目的，给消费者留下一个多种媒介的统一印象。如麦当劳的红、黄，可口可乐的红。主题色的数量不可过多，一种或两种即可。</p><p>而辅助色调在网页设计的色彩设计环节中，经常要小面积地使用主题色以外的其它色彩，来增加页面的色彩层次或辅助实现某种功能。辅助色的面积虽然小，但却能起到缓冲和强调的作用。合理地使用辅助色，能让主色调更加鲜明、生动，使得页面视觉效果更加流畅、和谐。辅助色应在主色调确定后进行选择。要在保持主色调主导地位的前提下，与主色调间形成相互和谐的局面。可以选用柔和的相近色，也可选用反差较大的对比色。</p><p>3.3 造型的组合。在网页设计中，我们主要通过视觉传达来表现主题。在视觉传达中，造型是很重要的一个元素。抛去是图还是文字的问题，画面上的所有元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里，是需要点、线、面的共同组合与搭配来构造一个有机整体，引导受众的视野。通常使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、节奏、韵律、归纳、变异、特写、反射等等，它们都有各自的特点。突出页面上的重要元素，突出设计的主题，增强美感。</p><p>3.4 网页的优化：（1）文字优化。文字是网页中传达信息的基本载体，因此字体的优化就显得尤为重要了。通常指定字体为宋体字号大小为12px，字体颜色要与背景色相协调，在能看清楚的基础上要求达到整体和谐。白色背景、黑色字体是最为常用的，防止浏览者产生眼疲劳，保证较长时间地浏览网页。（2）图片优化。图片的优化可以在保证浏览质量的前提下将其size降至最低，这样可以成倍地提高网页的下载速度。利用Photoshop6或Fireworks4可以将图片切成小块，分别进行优化。输出的格式可以为gif或jpeg，要视具体情况而定。一般我们把有较为复杂颜色变化的小块优化为jpeg，而把那种只有单纯色块的卡通画式的小块优化为gif，这是由这两种格式的特点决定的。（3）表格优化。设定表格的宽度、高度、边框、背景色、对齐方式等参数。</p><p>4 结束语</p><p>综上所述，灵活运用网页设计软件实现网页的设计，在不失网页设计主题的前提下，掺杂巧妙的艺术手法将网页的内容以个性化的方式呈现出来，更好地满足受众的需要，并达到瞬间产生深刻印象的艺术效果。</p><p>参考文献：</p><p>[1]王娟.网页设计中的色彩运用[J].电影评介，2010（03）.</p><p>[2]陈心威.浅谈色彩在网页设计中的应用[J].福建电脑，2009（10）.</p><p>作者简介：李英杰（1963.11-），女，吉林辽源人，高级讲师，工学学位，研究方向：计算机。</p><div class="banquan"><p class="rel_art_line ltitle">【网页制作与设计教案】推荐阅读：</p><p><a target="_blank" href="https://www.wenshuyi.com/a/fileadre0ns3.html">网页制作与设计</a><span>12-30</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/filen8h7kewm.html">网页设计与制作课程</a><span>01-09</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/filee2kih20o.html">网页设计与制作实习日记</a><span>07-25</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/file4gbc4n8j.html">网页设计与制作的应用论文</a><span>10-07</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/filejgk5ku1l.html">网站设计与网页制作的基本知识判断题</a><span>06-17</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/fileglxs2lsp.html">案例教学法在《网页设计与制作》课程中的研究与探索</a><span>06-05</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/filenadtjnr5.html">网页制作设计报告</a><span>07-04</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/filekp0aqo8v.html">网页制作课程设计定</a><span>07-22</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/filekdllbtp1.html">网页制作技术教案</a><span>12-01</span></p><p><a target="_blank" href="https://www.wenshuyi.com/a/file1hpuxuqh.html">12、 网页制作教案</a><span>01-27</span></p></div></div><script type="text/javascript">s("wzfz");</script><p class="art-other"><a href="https://www.wenshuyi.com/a/filen0turaed.html" title="七年级下学期期中考试班级状况分析">上一篇：七年级下学期期中考试班级状况分析</a><a href="https://www.wenshuyi.com/a/file7bqb9vb3.html" title="设备启停管理制度">下一篇：设备启停管理制度</a></p><script type="text/javascript">s("wztj");</script></div></div> <div class="r conright conri1"><div class="jpfw mt40"><div class="title"><h5 class="clearfix">热门文章</h5></div><ul class="mt25"><li><a href="https://www.wenshuyi.com/a/file4l84y3sr.html" target="_blank"><span>1</span>网页制作心得体会</a></li><li><a href="https://www.wenshuyi.com/a/file9z9692js.html" target="_blank"><span>2</span>网页制作实训心得</a></li><li><a href="https://www.wenshuyi.com/a/filei2owyja6.html" target="_blank"><span>3</span>管理信息系统网页制作步骤</a></li><li><a href="https://www.wenshuyi.com/a/fileby2dt2di.html" target="_blank"><span>4</span>网页制作结课作业</a></li><li><a href="https://www.wenshuyi.com/a/fileosmcd8ek.html" target="_blank"><span>5</span>网页制作中的实训教学</a></li><li><a href="https://www.qikantianxia.com/a/fileblyee5rk.html" target="_blank"><span>6</span>网页设计与制作课标</a></li><li><a href="https://www.wenshuyi.com/a/file7gwwhtb4.html" target="_blank"><span>7</span>模型设计与制作</a></li><li><a href="https://www.wenshuyi.com/a/file0f12h5zz.html" target="_blank"><span>8</span>广告招贴设计与制作</a></li><li><a href="https://www.21xueshu.com/haowen/doc7s9qz5qf8.html" target="_blank"><span>9</span>网页设计与制作第七课</a></li><li><a href="https://www.wenshuyi.com/a/file59l21rg3.html" target="_blank"><span>10</span>面具设计与制作教学设计</a></li></ul></div><div class="rightok"><div class="jpfw mt40" id="key"><div class="title"><h5 class="clearfix">相关推荐</h5></div><ul class="mt25"><li><a href="https://www.wenshuyi.com/a/file5zve0rkz.html" target="_blank"><span>1</span>网页设计制作心得体会</a></li><li><a href="https://www.wenshuyi.com/a/fileem09n3i9.html" target="_blank"><span>2</span>《网页制作与网站管理》培训总结</a></li><li><a href="https://www.wenshuyi.com/a/file4cb5pdk5.html" target="_blank"><span>3</span>网页美工设计制作岗位职责</a></li><li><a href="https://www.wenshuyi.com/a/filebchbkg93.html" target="_blank"><span>4</span>网页效果图的制作公开课教案</a></li><li><a href="https://www.wenshuyi.com/a/fileacuzazf7.html" target="_blank"><span>5</span>《贺卡的设计与制作》教案</a></li><li><a href="https://www.wenshuyi.com/a/fileeptkn34v.html" target="_blank"><span>6</span>网页制作网页练习题</a></li><li><a href="https://www.wenshuyi.com/a/file8a804yoq.html" target="_blank"><span>7</span>网页制作心得免费</a></li><li><a href="https://www.wenshuyi.com/a/file83aac48z.html" target="_blank"><span>8</span>动态网页制作心得</a></li><li><a href="https://www.wenshuyi.com/a/file06eh8cd3.html" target="_blank"><span>9</span>网页制作实训</a></li><li><a href="https://www.wenshuyi.com/a/fileb13z4mot.html" target="_blank"><span>10</span>网页设计教案首页</a></li></ul></div><script type="text/javascript">s("tjfw");</script></div></div></div></div> <div class="footer"><div class="footer-content"><div class="copy-link"><div class="earth-con"><div class="file-groups earth-con-item"><span>资料大全</span><a href="https://www.wenshuyi.com/site/a-a-1.html" target="_blank">A</a><a href="https://www.wenshuyi.com/site/a-b-1.html" target="_blank">B</a><a href="https://www.wenshuyi.com/site/a-c-1.html" target="_blank">C</a><a href="https://www.wenshuyi.com/site/a-d-1.html" target="_blank">D</a><a href="https://www.wenshuyi.com/site/a-e-1.html" target="_blank">E</a><a href="https://www.wenshuyi.com/site/a-f-1.html" target="_blank">F</a><a href="https://www.wenshuyi.com/site/a-g-1.html" target="_blank">G</a><a href="https://www.wenshuyi.com/site/a-h-1.html" target="_blank">H</a><a href="https://www.wenshuyi.com/site/a-i-1.html" target="_blank">I</a><a href="https://www.wenshuyi.com/site/a-j-1.html" target="_blank">J</a><a href="https://www.wenshuyi.com/site/a-k-1.html" target="_blank">K</a><a href="https://www.wenshuyi.com/site/a-l-1.html" target="_blank">L</a><a href="https://www.wenshuyi.com/site/a-m-1.html" target="_blank">M</a><a href="https://www.wenshuyi.com/site/a-n-1.html" target="_blank">N</a><a href="https://www.wenshuyi.com/site/a-o-1.html" target="_blank">O</a><a href="https://www.wenshuyi.com/site/a-p-1.html" target="_blank">P</a><a href="https://www.wenshuyi.com/site/a-q-1.html" target="_blank">Q</a><a href="https://www.wenshuyi.com/site/a-r-1.html" target="_blank">R</a><a href="https://www.wenshuyi.com/site/a-s-1.html" target="_blank">S</a><a href="https://www.wenshuyi.com/site/a-t-1.html" target="_blank">T</a><a href="https://www.wenshuyi.com/site/a-u-1.html" target="_blank">U</a><a href="https://www.wenshuyi.com/site/a-v-1.html" target="_blank">V</a><a href="https://www.wenshuyi.com/site/a-w-1.html" target="_blank">W</a><a href="https://www.wenshuyi.com/site/a-x-1.html" target="_blank">X</a><a href="https://www.wenshuyi.com/site/a-y-1.html" target="_blank">Y</a><a href="https://www.wenshuyi.com/site/a-z-1.html" target="_blank">Z</a><a href="https://www.wenshuyi.com/site/a-09-1.html" target="_blank">0-9</a></div></div><div class="footer-nav"><a href="https://www.wenshuyi.com/">网站声明</a><span>|<span><a href="https://www.wenshuyi.com/">侵权处理</a><span>|<span><a href="https://www.wenshuyi.com/">投诉反馈</a><span>|<span><a href="https://www.wenshuyi.com/">帮助中心</a></div><p class="footer-copyright"><a href="https://www.wenshuyi.com/" target="_blank">文书易</a> wenshuyi.com <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">赣ICP备2024034222号-2</a></p></div></div></div><script>window.KeyWord = "网页制作与设计教案";</script> <script src="https://www.wenshuyi.com/default/static/js/base.js"></script> </body> </html>