网页设计与制作教案

时间：2019-05-12 23:21:50下载本文作者：会员上传
简介：写写帮文库小编为你整理了多篇相关的《网页设计与制作教案》，但愿对你工作学习有帮助，当然你在写写帮文库还可以找到更多《网页设计与制作教案》。

第一篇：网页设计与制作教案

《网页设计与制作教案》

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

湄洲湾职业技术学院

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><p><BODY> 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。</p><h2><a name="2" >第二篇：网页设计与制作-论文（本站推荐）</a></h2><p>第一章</p><p>绪论</p><p>摘 要</p><p>本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用JavaScript作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、内部对象系统的使用及WEB页面信息交互——窗口和框架进行详细描述，并利用具体的实例进行验证。</p><p>本论文主要章节如下，第一章：绪论，本章主要介绍网页设计的相关知识。第二章：网页设计语言概述，本章主要介绍网页设计的语言——HTML，以及用于编辑HTML语言的软件，为后续工作奠定基础。第三章：基于对象的JavaScript语言，本章介绍了基于对象的JavaScript中常用内部对象属性、方法的使用。第四章：内部对象系统的使用，本章主要介绍使用浏览器的内部对象系统，可实现与HTML文档进行交互。第五章：WEB页面信息的交互——窗体与框架，本章主要介绍实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。</p><p>关键词： 网页制作；网页设计；HTML；ASP</p><p>第一章</p><p>绪论</p><p>第一章 绪论</p><p>随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。</p><p>1.1 网页设计概述</p><p>网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。</p><p>1.2 网页设计的要素</p><p>网页设计的两大要素是：整体风格和色彩搭配。</p><p>一、确定网站的整体风格</p><p>在这里，我提供给大家一些参考经验：</p><p>1．将你的标志logo，尽可能的放在每个页面上最突出的位置。2．突出你的标准色彩。</p><p>3．总结一句能反映贵站精髓的宣传标语！</p><p>4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网站中出现的所有标题字的阴影效果的设置应该是完全一致的！</p><p>二、网页色彩的搭配</p><p>1．用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。</p><p>2．用两种色彩。先选定一种色彩，然后选择它的对比色。</p><p>3．用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。</p><p>1.3 大作业目的和意义</p><p>本大作业主要是对网页设计与制作的语言基础上进行探讨，主要内容如下：通过已经做好的网页，分析html网页设计技术、XML技术、Java Applet技术和Javascript技术在网页设计中的应用。</p><p>第一章</p><p>绪论</p><p>1.4 要分析的网页</p><p>第一章</p><p>绪论</p><p>第一章</p><p>绪论</p><p>第二章</p><p>HTML网页设计技术的应用</p><p>第二章 HTML网页设计技术的应用</p><p>2.1 HTML语言介绍</p><p>HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。</p><p>HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。</p><p>2.1.1 HTML语言的特点</p><p>HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一，HTML语言的特点如下：</p><p>1、简易性，HTML版本升级采用超集方式，从而更加灵活方便。</p><p>2、可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。</p><p>3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。</p><p>2.1.2 HTML语言的编辑软件</p><p>HTML的本质是文本，需要浏览器的解释，HTML的编辑器大体可以分为三种：</p><p>1、基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。</p><p>2、半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。</p><p>3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有Frontpage，DREAMWEAVER、Delphi、Eclipse、UltraEdit。</p><p>2.1.4 html语言在网页设计中的应用</p><p>第二章</p><p>HTML网页设计技术的应用</p><p>2.2.3JavaScript技术在网页设计中应用</p><p>一、JavaScript概述</p><p>JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点：</p><p>1、是一种脚本编写语言</p><p>JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。</p><p>它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。</p><p>2、基于对象的语言。</p><p>JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。</p><p>3、简单性</p><p>JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。</p><p>4、安全性</p><p>JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。</p><p>5、动态性的</p><p>JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。</p><p>6、跨平台性</p><p>JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。</p><p>实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。</p><p>总之，JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。</p><p>第二章</p><p>HTML网页设计技术的应用</p><p>第五章</p><p>色彩在网页中的应用</p><p>第五章 色彩在网页中的应用</p><p>5.1色彩在网页中的应用</p><p>色彩是艺术表现的要素之一。在网页设计中，我们的设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合．搭配来构成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。</p><p>先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。</p><p>在网页配色中不要将所有颜色都用到，尽量控制在三至五种色彩以内。背景和前文的对比尽量要大以便突出主要文字内容。</p><p>5.2主页色彩的处理</p><p>色彩是人的视觉最敏感的东西。主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。</p><p>5.3常用的配色方案</p><p>1.暖色调。即红色、橙色、黄色、赭色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。</p><p>2.冷色调。即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。</p><p>3.对比色调。即把色性完全相反的色彩搭配在同一个空间里。例如：红与绿、黄与紫、橙与蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。</p><p>第五章</p><p>色彩在网页中的应用</p><p>最后，还要考虑主页底色（背景色）的深、浅，这里借用摄影中的一个术语，就是“高调”和“低调”。底色浅的称为高调；底色深的称为低调。底色深，文字的颜色就要浅，以深色的背景衬托浅色的内容（文字或图片）；反之，底色淡的，文字的颜色就要深些，以浅色的背景衬托深色的内容（文字或图片）。这种深浅的变化在色彩学中称为“明度变化”。当然，色彩的明度也不能变化太大，否则屏幕上的亮度反差太强，同样也会使读者的眼睛受不了。</p><p>5.4合理搭配网页色彩</p><p>网页的色彩是树立网站形象的关键之一，网页的背景、文字、图标、边框、超链接等都要用到色彩。不同的色彩会使浏览者有不同的心理感受。合理的搭配色彩，会更好的表现主题，吸引用户的注意力。网页色彩涉及到艺术知识，让美术教师参加网页色彩设计，可能会出现比较理想的效果。在色彩搭配上要注意色彩的鲜明性、独特性、合适性、联想性。背景色和前景色对比要大，以突出主要内容</p><p>网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩，要用于网站的标志，标题，主菜单和主色块。给人以整体统一的感觉。至于其它色彩也可以使用，但应当只是作为点缀和衬托，绝不能喧宾夺主。一般来说，一个网站的标准色彩不超过3种，太多则让人眼花缭乱。适合于网页标准色的颜色有：蓝色，黄/橙色，黑/灰/白色三大系列色。</p><p>第五章</p><p>色彩在网页中的应用</p><p>第六章 WEB页面信息的交互——窗体与框架</p><p>要实现网页的动态交互，必须掌握有关窗体对象（Form）和框架对象（Frames）更为复杂的知识。</p><p>6.1窗体基础知识</p><p>窗体对象可以使设计人员能用窗体中不同的元素与客户机用户相交互，而用不着在之前首先进行数据输入，就可以实现动态改变Web文档的行为。</p><p>6.1.1窗体对象</p><p>窗体（Form）：它构成了Web页面的基本元素。通常一个Web页面有一个窗体或几个窗体，使用Forms[]数组来实现不同窗体的访问。</p><p><form Name=Form1> <INPUT type=text...> <Input type=text...> <Inpup byne=text...> </form> <form Name=Form2> <INPUT type=text...> <Input type=text...> </form> 在Forms[0]中共有三个基本元素，而Forms[1]中只有两个元素。</p><p>窗体对象最主要的功能就是能够直接访问HTML文档中的窗体，它封装了相关的HTML代码：</p><p><Form Name =“表的名称” Target =“指定信息的提交窗口” action =“接收窗体程序对应的URL” Method =信息数据传送方式(get/post)enctype =“窗体编码方式” [onsubmit =“JavaScript代码”]> </Form> 6.1.2 窗体对象的方法</p><p>窗体对象的方法只有一个--submit()方法，该方法主要功用就是实现窗体信息的提交。如提交Mytest窗体，则使用下列格式：</p><p>document.mytest.submit()</p><p>第五章</p><p>色彩在网页中的应用</p><p>6.1.3 窗体对象的属性</p><p>窗体对象中的属性主要包括以下：elements name action target encoding method。除Elements外，其它几个均反映了窗体中标识中相应属性的状态，这通常是单个窗体标识；而elements常常是多个窗体元素值的数组，例：</p><p>elements[0].Mytable.elements[1] 6.1.4 访问窗体对象</p><p>在JavaScript中访问窗体对象可由两种方法实现：（1）通过访问窗体</p><p>在窗体对象的属性中首先必须指定其窗体名，而后就可以通过下列标识访问窗体如：document.Mytable()。</p><p>（2）通过数组来访问窗体</p><p>除了使用窗体名来访问窗体外，还可以使用窗体对象数组来访问窗体对象。但需要注意一点，因窗体对象是由浏览器环境的提供的，而浏览器环境所提供的数组下标是由0到n。所以可通过下列格式实现窗体对象的访问：</p><p>document.forms[0] document.forms[1] document.forms[2]...6.1.5 引用窗体的先决条件</p><p>在JavaScript中要对窗体引用的条件是：必须先在页面中用标识创建窗体，并将定义窗体部分放在引用之前。</p><p>6.2 窗体中的基本元素</p><p>窗体中的基本元素由按钮、单选按钮、复选按钮、提交按钮、重置按钮、文本框等组成。</p><p>在JavaScript中要访问这些基本元素，必须通过对应特定的窗体元素的数组下标或窗体元素名来实现。每一个元素主要是通过该元素的属性或方法来引用。其引用的基本格式见下：</p><p>formName.elements[].methadName(窗体名.元素名或数组.方法)formName.elemaent[].propertyName(窗体名.元素名或数组.属性)下面分别介绍：</p><p>（1）Text单行单列输入元素</p><p>功能：对Text标识中的元素实施有效的控制。基本属性：</p><p>Name：设定提交信息时的信息名称。对应于HTML文档中的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。defaultvalue：包括Text元素的默认值 基本方法：</p><p>blur()：将当前焦点移到后台。</p><p>第五章</p><p>色彩在网页中的应用</p><p>select()：加亮文字。主要事件：</p><p>onFocus：当Text获得焦点时，产生该事件。OnBlur：从元素失去焦点时，产生该事件。Onselect：当文字被加亮显示后，产生该文件。onchange：当Text元素值改变时，产生该文件。例：</p><p><Form name=“test”> <input type=“text” name=“test” value=“this is a javascript” > </form>...<script language =“Javascirpt”> document.mytest.value=“that is a Javascript”;document.mytest.select();document.mytest.blur();</script>（2）textarea多行多列输入元素</p><p>功能：实施对Textarea中的元素进行控制。基本属性</p><p>name：设定提交信息时的信息名称，对应HTML文档Textarea的Name。Value：用以设定出现在窗口中对应HTML文档中Value的信息。Default value：元素的默认值。方法：</p><p>blur()：将输入焦点失去 select()：将文字加亮后 事件：</p><p>onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件（3）Select选择元素</p><p>功能：实施对滚动选择元素的控制。属性：</p><p>name:设定提交信息时的信息名称，对应文档select中的name。Length:对应文档select中的length options:组成多个选项的数组 selectIndex;该下标指明一个选项</p><p>select在中每一选项都含有以下属性： Text:选项对应的文字</p><p>selected:指明当前选项是否被选中 Index:指明当前选项的位置 defaultselected:默认选项 事件：</p><p>第五章</p><p>色彩在网页中的应用</p><p>OnBlur：当select选项失去焦点时，产生该文件。onFocas:当select获得焦点时，产生该文件。Onchange:选项状态改变后，产生该事件。（4）Button按钮</p><p>功能：实施对Button按钮的控制。属性：</p><p>Name:设定提交信息时的信息名称，对应文档中button的Name。Value:用以设定出现在窗口中对应HTML文档中Value的信息。方法：</p><p>click()该方法类似于一个按下的按钮。事件：</p><p>onclick当单击button按钮时，产生该事件。例 ：</p><p><Form name=“test”> <input type=“button” name=“testcall” onclick=tmyest()> </form>...<script language=“javascirpt”> document.elements[0].value=“mytest”;//通过元素访问 或</p><p>document.testcallvalue=“mytest”;// 通过名字访问 </script>.....（5）checkbox检查框</p><p>功能：实施对一个具有复选框中元素的控制。属性：</p><p>name:设定提交信息时的信息名称。</p><p>Value:用以设定出现在窗口中对应HTML文档中Value的信息。Checked:该属性指明框的状态true/false.defauitchecked:默认状态 方法：</p><p>click()该方法使得框的某一个项被选中。事件：</p><p>Onclick：当框的选被选中时，产生该事件。（6）radio无线按钮</p><p>功能：实施对一个具单选功能的无线按钮控制。属性：</p><p>Name：设定提交信息时的信息名称，对应HTML文档中的radio的name相同 Value：用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中的radio的name。</p><p>length：单选按钮中的按钮数目。defalechecked:默认按钮。</p><p>checked:指明选中还是没有选中。</p><p>第五章</p><p>色彩在网页中的应用</p><p>index:选中的按钮的位置。方法：</p><p>chick():选定一个按钮。事件：</p><p>onclick:单击按钮时，产生该事件。（7）hidden:隐藏</p><p>功能：实施对一个具有不显示文字并能输入字符的区域元素的控制。属性：</p><p>name:设定提交信息时的信息名称，对应HTML文档的hidden中的Name。</p><p>Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档hidden中的value。</p><p>defaleitvalue:默认值（8）Password口令</p><p>功能：实施对具有口令输入的元素的控制。属性：</p><p>Name:设定提交信息时的信息名称，对应HTML文档中password中的name。Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中password中的Value。</p><p>defaultvalu:默认值 方法：</p><p>select():加亮输入口令域。</p><p>blur():使这丢失passward输入焦点。focus():获得password输入焦点。（9）submit提交元素</p><p>功能：实施对一个具有提交功能按钮的控制。属性：</p><p>name:设定提交信息时的信息名称，对应HTML文档中submit。</p><p>Value:用以设定出现在窗口中对应HTML文档中Value的信息，对应HTML文档中value。</p><p>方法</p><p>click()相当于按下submit按钮。事件：</p><p>onclick()当按下该按钮时，产生该事件。</p><p>6.3窗体对象实例</p><p>下面我们演示通过点击一个按钮（red）来改变窗口颜色，点击“调用动态按钮文档”调用一个动态按钮文档。</p><p>test8_1.htm <html> <head> <script Language=“JavaScript”> //原来的颜色</p><p>document.bgColor=“blue”;</p><p>第五章</p><p>色彩在网页中的应用</p><p>document.vlinkColor=“white”;document.linkColor=“yellow”;document.alinkcolor=“red”;//动态改变颜色</p><p>function changecolor(){</p><p>document.bgColor=“red”;</p><p>document.vlinkColor=“blue”;</p><p>document.linkColor=“green”;</p><p>document.alinkcolor=“blue”;} </script> </HEAD> <body bgColor=“White” > <A href=“test8_2.htm”> 调用动态按钮文档</a> <form ></p><p><Input type=“button” Value=“red” onClick=“changecolor()”> </form></p><h2><a name="3" >第三篇：网页设计与制作报告书</a></h2><p>电子商务2班201341440213孙岩</p><p>网页设计与制作报告书</p><p>课程名称:网页设计与制作</p><p>专业班级：电子商务2班</p><p>学 号:201341440213 姓 名：孙岩</p><p>指导教师：王康哲</p><p>电子商务2班201341440213孙岩</p><p>目录</p><p>一．概要……………………………………………………………</p><p>二．网站开发……………………………………………………</p><p>三．应用工具方案……………………………………………</p><p>四．栏目划分……………………………………………………</p><p>五．代码表……………………………………………………….六．截图……………………………………………………………</p><p>七．结论…………………………………………………………… 2 6 7 13 14</p><p>电子商务2班201341440213孙岩</p><p>摘要：</p><p>在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。</p><p>一、网页制作开发背景</p><p>Dreamweaver以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。现在流行的网页制作软件有很多，如Macromedia公司的Dreamweaver、微软公司的Dreamweaver、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。</p><p>二、网页制作设计技巧</p><p>首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点” 图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，DREAMWEAVER就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。</p><p>在文件列表里除了主页之外，还有文件夹。新建站点时，DREAMWEAVER都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”</p><p>电子商务2班201341440213孙岩</p><p>文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。</p><p>尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是DREAMWEAVER提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。</p><p>基于表格的设计：表格布局使网页设计师制作网站时有了更多选择。在 HTML 中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。</p><p>结构设计：这个时期的网页设计还不太关注语义化和可用性方面的问题，主要还在追求良好的结构美学。同一时期也是大量应用 GIF 占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用 GIF 占位;如微软的“关于 HTML 表格中的 GIF 占位”。第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有 1px 高却包含了几百列的表格)。即使是稍微复杂一点儿的网页(比如多栏目页面)，设计师们都要依赖于表格来创建。</p><p>三、网站结构</p><p>网站结构是指网站中页面间的层次关系;按性质可分为逻辑结构及物理结构。网站结构对网站的搜索引擎友好性及用户体验有着非常重要的影响。</p><p>（一）网站结构整体先用DIV和CSS来进行构造，对整个网站进行布局，(二)网站结构是衡量网站用户体验好坏的重要指标之一。清晰的网站结</p><p>电子商务2班201341440213孙岩</p><p>构可以帮助用户快速获取所需信息;相反，如果一个网站的结构极其糟糕的话，用户在访问时就犹如走进了一座迷宫，最后只会选择放弃浏览。</p><p>（三）网站结构还直接影响搜索引擎对页面的收录，一个合理的网站结构可以引导搜索引擎从中抓取更多有价值的页面。</p><p>网站结构对网站及网站中页面的影响。搜索引擎对重要页面的抓取</p><p>由于互联网中信息量极其庞大，为了向用户展示更多有价值的信息，搜索引擎会优先抓取每个网站中相对重要的页面(即权重较高的页面),然而，搜索引擎是怎样发现这些重要页面的呢?根据重要页面的链接指向的页面可能是重要页面的思路;搜索引擎首先会从权重相对较高的页面(即源页面)出发跟踪其中的链接，从而抓取其他相对重要的页面(即目标页面)。</p><p>网页设计的要素</p><p>四、应用工具方案</p><p>DreamWeaver自制动态HTML动画的网页。</p><p>DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。</p><p>DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。</p><p>版面布局：在你开始设计之前，你必须仔细地为站点挑选色彩组合。千万不要出现紫色的背景加上黑蓝色的文字的组合。要使整个站点保持同一种色彩组合，因为不同颜色组合的背景或字体可能会是非常令人讨厌的。你也可以选用一个背</p><p>电子商务2班201341440213孙岩</p><p>景图，而不是仅用一种颜色。背景图案可以自己绘制，也可以从因特网上下载。通过模糊背景图案，就可以使文字更容易被阅读。要记住的是，图片不会被浏览器重画的，而背景色彩则是要被重新画的，因此，在上传你的图片之前，必须检查不同的浏览器是如何显示这些网页的。当增加文字时，尽量设置容易被阅读的字体和大小。如果你使用背景图片，那么，当网页被浏览时，背景色和字体将会先于背景图片被下载，因此，如果背景色和文本的颜色没有鲜明的对照的话，那么浏览者会有几秒钟的时间看到一个充满了不可阅读的文本的网页。解决这个问题的简单的方法就是，使背景色与背景图的颜色相类似。</p><p>浏览导航：站点的浏览导航必须被设计成非常容易。如果需要，把站点分割为几个部分。最容易的方法，就是在整个网站的所有的网页的左边放置一个菜单条。当然，除此以外，还有许多可选的方法。对于具有大量信息的站点，使用一个可扩展的菜单条会是一个不错的选择。无论你使用何种导航模式，在每一页都放置一个主页链接，那会是一种不错的设计思想；浏览者必须知道，无论何时，当他们迷失在你的站点浏览中时，都可以通过简单的一次点击就能准确地知道目前所处的位置。</p><p>Frame(帧,框架)的问题：Frame—— 你也许会喜欢它，也许不喜欢。如果你在你的网站上使用帧，你很可能使一个帧用于导航目的，另一个帧用于放置内容。你可以看见在同一页上有两个被分割的浏览窗口，你点击左边的帧，只会改变右边的内容。用帧来组织网站的内容，显然是非常容易的。</p><p>检验你的HTML代码 ：不要在你的网站上放置浏览计数器。计数器会让你的网站看起来不够专业化，如果浏览量不够的话，还会起到相反的宣传作用。最后，内容是金，如果能给的浏览者一些有价值的东西，如，信息，建议，或软件，那么就能吸引浏览者经常光顾你的网站。为你的站点增加消息板和聊天室，从而提高网站的交互性，使你和你的访问者交流，让访问者彼此交流。</p><p>五、频道栏目划分</p><p>图1</p><p>电子商务2班201341440213孙岩</p><p>六、代码段</p><p><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://1/DTD/xhtml1-transitional.dtd”> <html xmlns=“http://”> <head> <meta http-equiv=“Content-Type”</p><p>content=“text/html;charset=gb2312” /> <title>火影忍者</title> <link href=“css/style.css” rel=“stylesheet” type=“text/css” /> <script type=“text/javascript”> function MM_CheckFlashVersion(reqVerStr,msg){ with(navigator){ var isIE =(appVersion.indexOf(“MSIE”)!= userAgent.indexOf(“Opera”)==-1);var isWin =(appVersion.toLowerCase().indexOf(“win”)!=-1);if(!isIE ||!isWin){ var flashVer =-1;if(plugins && plugins.length > 0){ var desc = plugins[“Shockwave Flash”] ? plugins[“Shockwave Flash”].description : “";desc = plugins[”Shockwave Flash 2.0“] ? plugins[”Shockwave Flash 2.0“].description : desc;if(desc == ”“)flashVer =-1;</p><p>-1 &&</p><p>电子商务2班201341440213孙岩</p><p>else{ var descArr = desc.split(” “);var tempArrMajor = descArr[2].split(”.“);var verMajor = tempArrMajor[0];var</p><p>tempArrMinor</p><p>=</p><p>(descArr[3]</p><p>!=</p><p>”“)</p><p>? descArr[3].split(”r“): descArr[4].split(”r“);var verMinor =(tempArrMinor[1] > 0)? tempArrMinor[1] : 0;flashVer = parseFloat(verMajor + ”.“ + verMinor);} } // WebTV has Flash Player 4 or lower--too low for video else if(userAgent.toLowerCase().indexOf(”webtv“)!=-1)flashVer = 4.0;</p><p>var verArr = reqVerStr.split(”,“);var reqVer = parseFloat(verArr[0] + ”.“ + verArr[2]);</p><p>if(flashVer < reqVer){ if(confirm(msg))window.location</p><p>= ”http://“>首页</a></li> <li><a href=”about.html“>火影介绍</a></li> <li><a href=”role.html“>角色资料</a></li> <li><a href=”pic.html“>精选壁纸</a></li> <li><a href=”video.html“>动画选播</a></li> </ul> </td> <td width=”10“> </td> </tr> <tr> <td height=”464“> </td> <td valign=”top“</p><p>bgcolor=”#FFFFFF“><table</p><p>width=”100%“ border=”0“ cellspacing=”0“ cellpadding=”0“></p><p>电子商务2班201341440213孙岩</p><p><tr> <td><iframe src=”slide.html“ width=”580“ height=”300“ frameborder=”0“ scrolling=”no“ ></iframe> </td> <td><h3 style=”color:#333333;“>火影忍者主题曲</p><p><hr /> <object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000“ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0“ width=”380“ height=”260“ id=”FLVPlayer“> <p><p>name=”FlashVars“ value=”&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/hy&autoPlay=false&autoRewind=false“ /> <embed</p><p>src=”FLVPlayer_Progressive.swf“ flashvars=”&MM_ComponentVersion=1&skinName=Clear_Skin_1&streamName=flash/hy&autoPlay=false&autoRewind=false“ quality=”high“ scale=”noscale“ width=”380“ height=”260“</p><p>name=”FLVPlayer“</p><p>salign=”LT“ type=”application/x-shockwave-flash“ pluginspage=”http://www.xiexiebang.com/go/getflashplayer“ /> </object></p><p>电子商务2班201341440213孙岩</p><p></td> </tr> <tr> <td colspan=”2“><table class=”show“ width=”100%“ border=”0“ cellspacing=”0“ cellpadding=”0“> <tr> <td colspan=”5“ bgcolor=”#F20000“><p>壁纸预览</p></td> </tr> <tr> <td><img src=”images/bz1.jpg“ width=”190“ height=”150“ /></td> <td><img src=”images/bz2.jpg“ width=”190“ height=”150“ /></td> <td><img src=”images/bz3.jpg“ width=”190“ height=”150“ /></td> <td><img src=”images/bz4.jpg“ width=”190“ height=”150“ /></td> <td><img src=”images/bz5.jpg“ width=”190“ height=”150“ /></td> </tr> </table></p> </td></p><p>电子商务2班201341440213孙岩</p><p></tr> </table></td> <td> </td> </tr> </table> <table width=”1000“</p><p>height=”40“</p><p>border=”0“ cellpadding=”0“ cellspacing=”0“ id=”footer“> <!--DWLayoutTable--> <tr> <td width=”1000“ height=”60“ valign=”top“><p>八、截图</p><p>首页</p><p>图2 照片</p><p>align=”center"</p><p>电子商务2班201341440213孙岩</p><p>图3 美文</p><p>图4</p><p>九、结论</p><p>(一)网页设计制作需要我们明白: 1.简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉</p><p>电子商务2班201341440213孙岩</p><p>所有的冗余的东西。</p><p>2.使用方便: 同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美。</p><p>3.整体性好: 一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。</p><p>4.网站形象突出: 一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。</p><p>5.页面用色协调，布局符合形式美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次，当然雅俗共赏是人人都追求的。</p><p>6.交互式强: 发挥网络的优势，是每个使用者都参与到其中来，这样的设计才能算成功的设计。这样的网页才算真正的美的设计。不知不觉网页设计的课程将要结束了，这门课程所包含内容的丰富是让我从没有想到的。</p><p>你也许会认为所有的这些都会是一种限制；不错，如果运用不当，它们确实是会成为一种约束。不管怎样，当你开始设计你的网站时，要努力去这样做。不要跟随上述所有的规则，充分发挥你的创造力，你可以去创建一个大大的Flash电影，再加上一点点的文字内容，使你的网站在众多的网站中脱颖而出，哪怕浏览者只是为了再看一下你的设计。灵活地使用本文中所述的一些规则方法，将会使你的网站更完美，更容易获得成功。</p><p>电子商务2班201341440213孙岩</p><p>在学习网页制作的时间里，我学会了怎么去制作一个网页，当然在制作的过程中不可避免的遇到了各种各样的问题，但还是在老师和同学的帮助下一一解决。虽然最终成果还是有一些问题，但是这次动手实践的意义是显而易见的。这是我学习后的体会，在这个过程中还存在有瑕疵，希望以后可以和大家多点时间一起交流，提高我们这方面知识的欠缺，共同进步。</p><h2><a name="4" >第四篇：网页设计与制作教学计划</a></h2><p>网页设计与制作教学计划</p><p>网页设计与制作情况介绍：13级计算机专业就业班每周课时为8课时，其中上机操作6课时、理论2课时；高考班每周课时为6课时，其中上机操作4课时、理论2课时。根据其课时安排，每周课时就以8课时为准。现按照15周课，计120课时，其中上机操作课90课时，理论课30课时，如上机操作课程时间充足，可自行安排举一反三。</p><p>注：因13级计算机3个班，高考班的课时较少，所以具体实际上机操作情况只有根据实际情况而定。</p><p>项目一 网页概述（6）</p><p>任务一 讲解网页设计与制作这门学科的发展前景。（1课时）</p><p>讲解网页设计与制作这门学科的发展前景，培养起学生的兴趣。任务二 用html代码编写“我的第一个网页”的网页。（1课时）</p><p>简单介绍一下html代码：<html>、<head>、<body>，在记事本中用html编写一个简单的网页，转换格式，在浏览器中预览效果，培养起学生的兴趣。任务三 Web简介。（1课时）</p><p>在学习制作一个网页之前，首先应该了解一些网页和网站的基本知识：web的起源与基本结构、web的常用术语。任务四 认识网页制作软件。（1课时）</p><p>了解网页制作工具网页制作三剑客，并掌握红蜻蜓抓图软件和Microsoft Office Visio 2007的基本功能。任务五 网站规划。（2课时）</p><p>熟悉网站开发的工作流程：规划、制作、维护，自行设计一个网站，写出网站规划。</p><p>项目二 网页制作基础（5）</p><p>任务一 认识Dreamweaver8。（1课时）</p><p>任务二 创建本地站点，搭建模拟结构。（2课时）</p><p>学会创建站点，掌握规划站点结构的原则；学会把其他站点定义成本地站点。任务三 html代码的基本结构。（2课时）</p><p>项目三 插入对象（16）任务一 插入文本（2课时）</p><p>学会插入文本、特殊字符、日期、水平线（修改颜色）、注释，并了解设计文本属性；掌握enter（<p>）与shift+enter（<br>）的区别。任务二 插入图片（2课时）</p><p>掌握插入图片的技巧，灵活调整图像的大小，使用“重新取样”，学会更改默认编图工具。</p><p>任务三 制作图文混排页面。（2课时）</p><p>学会设置文字和图像的属性，并能进行图像和文字的混排。任务四 插入Flash动画（2课时）</p><p>掌握插入Flash、Flash按钮和文字、Flash图片播放器功能。任务五 插入交互图像（2课时）</p><p>学会制作鼠标经过图像和导航条图片。任务六 插入音视频（2课时）</p><p>在网页实现播放音频文件的效果，并实现下载音视频文件的功能。任务七 插入滚动文字（2课时）</p><p>学会制作滚动文字，并掌握控制滚动文字的html代码。任务八 综合练习，制作一个主页面。（2课时）</p><p>项目四 超链接</p><p>任务一 网页链接路径与类型（1课时）任务二 内部链接、外部链接（1课时）任务三 email链接、锚点链接（1课时）</p><p>任务四 图像映射，基本掌握脚本链接的关闭功能（1课时）</p><p>项目五 表格</p><p>任务一 创建web画廊（1课时）</p><p>通过fireworks创建web画廊，掌握“创建网站相册”的功能。任务二 表格的应用（2课时）</p><p>新增表格、表格属性的设定、选择行列、选择不相邻的单元格。任务三 学会使用表格调整方法（3课时）</p><p>对预先设计好的网页图，在fireworks中切片，通过插入fireworks html 的方式对表格进行调整。</p><p>任务四 制作简单的内页页面（2课时）任务五 制作复杂的内页页面（3课时）任务六 表格的绘制（1课时）</p><p>任务七 表格排版，制作一个小型网站（3课时）</p><p>切片，准备图片；新建站点，搭建结构；表格页面排版；链接，制作网页。</p><p>项目六 表单</p><p>任务一 表单文本域：单行、多行、密码（2课时）</p><p>加入空白表单，设定表单属性；讲解什么事表单，解释表单属性get和post的区别。</p><p>任务二 插入对象（4课时）</p><p>单选按钮（组）、复选框、列表、下拉菜单、文件域、按钮、跳转菜单、图像域、隐藏域。</p><p>任务三 综合练习，表单的排版，以邮箱的方式提交（3课时）</p><p>项目七 CSS 任务一 CSS的特点、添加方式、类型（1课时理论）任务二 使用四种方法使用css 样式表（2课时）任务三 使用 Class类与id类控制网页的格式（1课时）任务四 运用css样式表设置字体样式并控制图文布局（2课时）任务五 综合应用CSS的各种属性（2课时）</p><p>任务六 综合练习，熟练使用css美化网页（2课时）</p><p>项目八 框架</p><p>任务一 框架应用（2课时）</p><p>任务二 利用框架设计网页（3课时）</p><p>项目九 模板</p><p>任务一 模板应用（2课时）</p><p>任务二 利用模板设计网页（3课时）</p><p>项目十行为</p><p>任务一 制作弹出消息（1课时）任务二 制作打开浏览器窗口（1课时）任务三 制作背景音乐（1课时）任务四 控制Flash动画（1课时）任务五 检查表单（2课时）</p><p>项目十一 时间轴</p><p>任务一 时间轴动画（2课时）任务二 任务三 任务一 任务二 任务一 任务二 任务三 任务一 任务二 任务三 任务二 任务三 任务四 任务五 任务一 制作动态文字（1课时）制作飘动广告（2课时）</p><p>项目十二 层</p><p>层的应用（2课时）</p><p>层与行为、时间轴结合（3课时）</p><p>项目十三 javascript 弹出对话框（1课时）函数应用（2课时）时钟显示功能（2课时）</p><p>项目十四 数据库</p><p>认识iis（1课时）复习数据库知识（1课时）连接（2课时）显示数据（2课时）表单收集（增）（3课时）登陆页面（查）（3课时）修改密码（改）（3课时）</p><p>项目十五 网页设计</p><p>做个人作品（15课时）</p><h2><a name="5" >第五篇：网页设计与制作简答题</a></h2><p>1、简述Web浏览器打开一个Web文件的工作过程。</p><p>2、描述网页设计的一般步骤。</p><p>3、简述网页设计的基本准则。</p><p>4、简述规划网站目录结构时应遵循的原则。</p><p>5、描述版面布局的步骤。</p><p>6、什么是“HTML”？HTML“标记”又是什么？</p><p>7、简述“HTML”文档的基本结构。</p><p>8、简述以下一段HTML代码中各对标记的作用。〈html〉</p><p>〈head〉</p><p>〈title〉网页设计〈/title〉 〈/head〉</p><p>〈body〉</p><p>〈h2〉北国风光〈/h2〉</p><p>〈/body〉 〈/html〉</p><p>9、如何进行本地网页的测试？</p><p>10、网站管理和维护的主要工作有哪些？</p><p>11、什么是Web浏览器?</p><p>12、简述网页设计中所需要注意的通用规则。</p><p>13、简述DHTML的概念及主要组成。</p><p>14、简述使用FrontPage在网页中插入一个日历的过程。</p><p>15、简述色彩的三原色的概念及每种颜色的调配范围。</p><p>16、为什么要采用DHTML技术？客户端动态网页技术有哪些优点？</p><p>17、网站栏目划分的原则是什么？</p><p>18、XML与HTML相比的主要优点有哪些？</p><p>19、请简述一下网站的设计流程？</p><p>20、简述FireWorks的特点。</p><p>21、网页制作的步骤是什么？</p><p>22、怎样让链接没有下划线?</p><p>23、怎样在网页中加入多媒体播放?</p><p>24、怎样让网页的背景图像不滚动?</p><p>25、怎样定义网页的关键字?</p><p>26、什么是Web浏览器?</p><p>27、网页上所说的重心平衡指的是什么?</p><p>28、什么是DHTML？DHTML技术主要由哪几部分组成？</p><p>29、在CSS中，对字体的的设置所涉及到的属性有哪些？</p><p>30、用HTML语言回答一个HTML文件应具有的基本结构。</p><p>31、比较GIF格式和JPG格式的原理与各自的适用范围。</p><p>32、为什么要采用DHTML技术?客户端动态网页技术有哪些优点?</p><p>33、简述站点的概念以及虚拟目录和实际目录之间的对应关系。</p><p>34、什么是Web安全色?</p><p>35、简述虚拟主机的概念和功能。</p><p>36、简述Dreamweaver的工作窗口由哪些部分组成。</p><p>37、在Dreamweaver中，插入图像的方法有哪些？</p><p>38、在Fireworks中，如何使文字附加于路径？</p><p>39、在Flash MX中可以创建哪些类型的元件？各元件的含义是什么？</p><p>40、HTML中<BR>标记和<p>标记有何区别?</p><p>41、简述在网页中插入背景音乐的方法。</p><p>42、怎样在网页中插入Flash影片？</p><p>43、简述设计Web站点的一般步骤。</p><p>44、简要说明html的基本工作原理。</p><p>45、简要说明表格与框架布局的区别。</p><p>46、举例说明在网页中使用CSS样式表的三种方式（都使用对p标记符应用color属性为例），并简要分析各自的特点。</p><p>47、简要说明使用网页图像时应注意的问题</p><p>48、简要回答选择符的作用及分类。</p><p>49、XML的主要特征有哪些？</p><p>50、FrontPage的主要功能有哪些？</p><p>51、简答HTML文件的基本标记组成。</p><p>52、简答Java与JavaScript的主要区别。</p><p>53、简述网站的开发流程。（10分）</p><p>54、简述静态网页的执行过程。（7分）</p><p>55、简述在Dreamweaver MX中制作以插件方式播放音乐的页面的步骤。</p><p>56、简述网页制作有哪些基本流程。</p><p>57、在Dreamweaver MX中，目标端点的链接有哪几种？</p><p>58、简述在Fireworks中，可以做哪几个方面的环境设置。</p><p>59、在Flash MX中，帧有哪几种类型？各自的含义是什么？</p><p>参考答案：</p><p>1、简述Web浏览器打开一个Web文件的工作过程。</p><p>1）</p><p>Web浏览器向服务器发出页面请求</p><p>2）</p><p>服务器接收页面请求，并将搜索到的页面发给Web浏览器</p><p>3）</p><p>Web浏览器接收并显示页面</p><p>2、描述网页设计的一般步骤。</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>3、简述网页设计的基本准则。</p><p>需要遵循的艺术原则主要有：</p><p>1）</p><p>对比原则</p><p>2）</p><p>协调原则</p><p>3）</p><p>平衡原则</p><p>4）</p><p>趣味原则。</p><p>还包括统一、连贯、分割、对比、和谐、易读、易找、清晰、精选。</p><p>4、简述规划网站目录结构时应遵循的原则。</p><p>在创建目录时需要注意：</p><p>（1）不要将所有文件都存放在根目录下。</p><p>（2）目录层次不要太深，建议不要超过三层。</p><p>（3）不要使用过长的目录名和尽量不要使用中文目录名。</p><p>5、描述版面布局的步骤。</p><p>步骤：</p><p>1）</p><p>绘制网页草图</p><p>2）</p><p>粗略布局</p><p>3）</p><p>定案</p><p>6、什么是“HTML”？HTML“标记”又是什么？</p><p>HTML是一种建立网页文件的语言，透过标记式指令，将影像、声音、图片和文字等连接起来。</p><p>在HTML中用于描述功能的符号称为“标记”，它是用来控制文字、图形等显示方式的符号。</p><p>7、简述“HTML”文档的基本结构。</p><p>HTML网页的基本结构。<HTML></p><p>HTML文件开始</p><p><HEAD></p><p>文件头开始</p><p>文件头</p><p></HEAD></p><p>文件头结束</p><p><BODY></p><p>文件体开始</p><p>文件体</p> </div> </article> <a href="#" tpid="25" target="_self" class="download_card jhcdown" rel="nofollow"> <img class="download_card_pic" src="//static.xiexiebang.com/skin/default/images/icon_word.png" alt="下载网页设计与制作教案word格式文档"> <div class="download_card_msg"> <div class="download_card_title" style="text-decoration:none;">下载网页设计与制作教案.doc</div> <div class="download_card_tip">将本文档下载到自己电脑，方便修改和收藏，请勿使用迅雷等下载。</div> </div> <div class="download_card_btn"> <img src="//static.xiexiebang.com/skin/default/images/icon_download.png"> <div class="downlod_btn_right"> <div>点此处下载文档</div> <p>文档为doc格式</p> </div> </div> </a> <div class="post-tags mt20 mb30"><span>相关专题</span> <a href="/tag/wysjyzzkc/" target="_blank">网页设计与制作课程</a> </div> <div class="single-info mb40"><span class="hidden-xs ">网址：https://www.xiexiebang.com/a5/2019051223/d1cb3432e47d0067.html</span><br>声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：645879355@qq.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。 </div> <div class="single-xg mb40"> <div class="con-title"> <h3><a name="6"></a>相关范文推荐</h3> </div> <div class="sticky mb20"> <ul><h2 class="mb20"><a href="/a1/201905128/57fe4f309c3e4607.html" target="_blank">网页设计与制作总结</a></h2><p>网页设计与制作 实训报告 班级：多媒体152 姓名：张莉钧 学号：201501032118 指导老师：薛杨 王淑惠 实训时间：6.20——6.24 一、实训目的：1、进一步熟悉和掌握网站建设的基本流程和技......</p><h2 class="mb20"><a href="/a5/2019051222/d5a69e9c5fdec7bb.html" target="_blank">《网页设计与制作》教学大纲</a></h2><p>《网页设计与制作》教学大纲 一、 课程基本信息 课程编号： 中文名称：网页设计与制作 英文名称：Web Design and Production 课程类别：选修课 适用专业：所有专业 开课学期：2011-2012......</p><h2 class="mb20"><a href="/a5/2019051222/8eebb9cb9f7e5e24.html" target="_blank">网页制作与设计教学大纲</a></h2><p>《网页制作与设计》教学大纲 课程编号： 总学时数：36学时（其中讲授：20学时，实验：16学时） 一、课程性质、目的和要求 本课程是我系各专业必修专业课程之一。该课程以Dreamweaver和CSS......</p><h2 class="mb20"><a href="/a5/2019051222/59156504c526d05d.html" target="_blank">网页设计与制作教学大纲</a></h2><p>网页设计与制作教学大纲 (供医学影像学、护理学本科各专业用) 前 言 《网页设计与制作》是一门应用性和理论性都很强的课程，是医学影像和护理学专业的选修课程。通过学习本......</p><h2 class="mb20"><a href="/a5/2019051222/402b607e8d410d1b.html" target="_blank">《网页设计与制作》教学大纲</a></h2><p>《网页设计与制作》教学大纲 课程编号：14411400 课程总学时：48 周学时数：3 学分：3 课程类型：专业必修课 开课（系）院：教育学院 执笔人：朱 玲 审核人：刘 梅 一、课程简介 《网页设计与制......</p><h2 class="mb20"><a href="/a2/2019051223/e92bee76c5535ff5.html" target="_blank">网页设计与制作课程设计</a></h2><p>一、 设计目的 通过一个月的网页设计学习，设计一个简单的网站来检测自己的学习成果，看看哪些东西还没有掌握，需要进一步的去巩固！网页的设计区别于实体化的一些东西，其多为多媒体......</p><h2 class="mb20"><a href="/a3/2019051213/f2c394ecab56c0ea.html" target="_blank">网页设计与制作课程设计</a></h2><p>使用所学知识独立制作一个网站，网站的主题可以是文学、音乐、影视、自我介绍（求职）、家乡介绍等。 1．设计基本要求 （1）要将站点目录明确分层，不能将内容都放在根目录下；不要使用中文......</p><h2 class="mb20"><a href="/a15/201905156/a8529f7803493087.html" target="_blank">网页设计与制作多选题（模版）</a></h2><p>1、在Dreamweaver中，行为由( )构成。 A、事件B、动作 C、初级行为D、最终动作 2、在Dreamweaver中，可对( )设置超级链接。 A、任何文字B、图像 C、图像的一部分D、Flash 3......</p></ul> </div> </div> </div> </div> <div class="right-content-box wow fadeInRight delay300 right-content"> <script src="/e/member/login/loginjs.php"></script> <div class="sidebar"> <div id="sidebar" role="complementary"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">猜你喜欢</h3> <ul class="new-list"><li><a href="/a15/201905154/af8ecc1299a7f9d3.html" title="电子政务网页设计与制作实验教案" target="_blank">电子政务网页设计与制作实验教案</a></li><li><a href="/a5/2019051223/c65e010ba8b44be3.html" title="网页制作教案" target="_blank">网页制作教案</a></li><li><a href="/a5/2019051223/0944f29844b4da3a.html" title="《网页制作》教案范文" target="_blank">《网页制作》教案范文</a></li><li><a href="/a5/201905130/f0b5bafafc388bd3.html" title="《网页制作》教案（范文大全）" target="_blank">《网页制作》教案（范文大全）</a></li><li><a href="/a5/2019051223/5c5766cd995d68ed.html" title="网页制作教案" target="_blank">网页制作教案</a></li><li><a href="/a5/201905130/84cb5012f197b7e3.html" title="网页制作教案" target="_blank">网页制作教案</a></li><li><a href="/a15/201905155/5b26d494693b4da2.html" title="网页设计与制作教案免费学技术改变生活" target="_blank">网页设计与制作教案免费学技术改变生活</a></li><li><a href="/a12/2019051323/d29b8e081411e8a0.html" title="《网页设计与制作》习题集[推荐阅读]" target="_blank">《网页设计与制作》习题集[推荐阅读]</a></li><li><a href="/a13/2019051422/ab6eced3b1381423.html" title="静态网页设计与制作毕业论文" target="_blank">静态网页设计与制作毕业论文</a></li><li><a href="/a2/201905127/260a34bb7fe42d9b.html" title="网页设计与制作实训室管理制度" target="_blank">网页设计与制作实训室管理制度</a></li></ul> </aside> </div> </div> </div> </div> </div> </section> <section id="footer" class="p30"> <div class="container"> <div class="footer-top clearfix"> <div class="copyr"> <div class="footer-menu clearfix mb10"> <ul class="footer-menu-con"> <li><a href="/a1/">1号文库</a></li><li><a href="/a2/">2号文库</a></li><li><a href="/a3/">3号文库</a></li><li><a href="/a4/">4号文库</a></li><li><a href="/a5/">5号文库</a></li><li><a href="/a6/">6号文库</a></li><li><a href="/a7/">7号文库</a></li><li><a href="/a8/">8号文库</a></li><li><a href="/a9/">9号文库</a></li><li><a href="/a10/">10号文库</a></li><li><a href="/a11/">11号文库</a></li><li><a href="/a12/">12号文库</a></li><li><a href="/a13/">13号文库</a></li><li><a href="/a14/">14号文库</a></li><li><a href="/a15/">15号文库</a></li> </ul> </div> <p>Copyright © 2018 <a href="/">写写帮文库</a> All Rights Reserved &nbsp;&nbsp;<a target="_blank" href="http://www.beian.miit.gov.cn" rel="nofollow"> 浙ICP备11058632号</a>&nbsp;&nbsp; <script type="text/javascript" src="//static.xiexiebang.com/skin/default/js/tj.js"></script></p> </div> </div> </div> </section> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/superfish.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/jquery.slicknav.js'></script> <script type='text/javascript' src='//static.xiexiebang.com/skin/default/js/xs.js'></script> <div class="right_bar hidden-xs "> <ul> <li class="rtbar_li1" style="left: 0px;"><a><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon3.png"><span id="call_tel"></span></a></li> <li class="rtbar_li2"> <a href="javascript:void(0);"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon4.png"> </a> <div class="rtbar_shwx" style="display: none;"> <img width="188" height="188" alt="微信二维码" src="//static.xiexiebang.com/skin/default/images/wechat.png"> </div> </li> <li class="rtbar_li3" style="left: 0px;"> <a href="tencent://message/?uin=2261362615&amp;Menu=yes"> <img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon2.png"> 点击咨询 </a> </li> <li class="rtbar_li5"><a href="#1">第一篇</a></li> <li class="rtbar_li6"><a href="#2">第二篇</a></li> <li class="rtbar_li7"><a href="#3">第三篇</a></li> <li class="rtbar_li8"><a href="#4">第四篇</a></li> <li class="rtbar_li9"><a href="#5">第五篇</a></li> <li class="rtbar_li10"><a href="#6">更 多</a></li> <li class="rtbar_li4 gotop"> <a href=""><img src="//static.xiexiebang.com/skin/default/images/rtbar_liicon1.png"> </a></li> </ul> </div> </body> </html>