1、网页设计与制作序号： 学号： 姓名： 班级： 学院： 进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。作为一名大学生，学习如何设计和制作网页变成了一项必不可少的过程，经过两个月的学习，我开始对网页的设计和制作有了初步的认识，并且学习了一些网页制作基础。网页分为静态网页和动态网页两种。静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net 等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页常见的静态页面以.html、.htm 为扩展名的。动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好
2、的程序界面，根据用户的不同请求返回相应的数据。首先是基于静态网页的 HTML 超文本标记语言和 CSS，然后是基于动态网页的设计语言JavaScript。1. HTML 简介HTML 文档和 HTML 元素是通过 HTML 标签进行标记的。 HTML 标签由开始标签和结束标签组成 。开始标签是被括号包围的元素名 。结束标签是被括号包围的斜杠和元素名。 某些 HTML 元素没有结束标签，比如 。1.1 HTML 标签HTML 文档和 HTML 元素是通过 HTML 标签进行标记的；HTML 标签由开始标签和结束标签组成；开始标签是被括号包围的元素名； 结束标签是被括号包围的斜杠和元素名； 某些
3、HTML 元素没有结束标签，比如 。1.2 HTML 元素HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 1.3 HTML 属性HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=“value“。属性总是在 HTML 元素的开始标签中规
4、定。1.4 HTML 段落段落是通过 标题定义的。使用空的段落标记 去插入一个空行是个坏习惯。用 标签代替它！（但是不要用 标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）1.5 HTML 样式style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。1.6 HTML 链接HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中
5、找到链接。点击链接可以从一张页面跳转到另一张页面。HTML 链接语法：链接的 HTML 代码很简单。它类似这样：Link texthref 属性规定链接的目标：开始标签和结束标签之间的文字被作为超级链接来显示。实例：Visit W3SchoolHTML 链接 - target 属性：使用 Target 属性，你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：Visit W3School!HTML 链接 - name 属性：name 属性规定锚（anchor）的名称。 name 属性用于创建 HTML 内部的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（nam
6、ed anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。命名锚的语法：Text to be displayed锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。1.7 HTML 表格表格由 标签来定义。每个表格均有若干行（由 标签定义） ，每行被分割为若干单元格（由 标签定义） 。字母 td 指表格数据（table data） ，即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。1.8 HTML 列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）
7、进行标记。无序列表始于 标签。每个列表项始于 。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 标签。每个列表项始于 标签。1.9 HTML 表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（）定义。1.10 HTML 框架框架结构标签（）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 2.CSS 简介CSS 是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一
8、。使用 CSS 能够简化网页的格式代码，加快下载显示的速度和减少需要上传的代码量，也减少了重复劳动的工作量。CSS 的作用是将格式和结构分离；更容易控制页面的布局；可以制作出体积更小下载更快的网页；可以更快更容易地维护及更新大量的网页；良好的浏览器兼容性。CSS 是一种样式表语言，用户可以使用它将样式（如：字体，间距及语音提示等）附加到结构化的文档（如：HTML 文档和 XML 应用）中。由于 CSS 将文档呈现的样式和文档的内容相互分离，因此网页的写作和站点的维护得以简化。2.1CSS 基础语法CSS 语法由三部分构成：选择器、属性和值：选择器 (selector) 通常是你希望定义的 HT
9、ML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration） 。body color: blue代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。2.2 派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors
10、)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。2.3 Id 和类选择器Id 选择器可以为标有特定 Id 的 HTML 元素指定特定的样式。Id 选择器以 “#“ 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red;#green color:green;下面的 HTML 代码中，Id 属性为 red 的 p 元
11、素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。#sidebar p font-style: italic;text-align: right; margin-top: 0.5em;#sidebar h2 font-size: 1em;font-weight: normal;font-style: italic;margin: 0;line-height: 1.5;text-align: right;2.4 CSS 框架型结构CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。元素框的最内部分是实际的内容，直接包围内容的是内边
12、距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，
13、就需要将内容的宽度设置为 70 像素。3. Javascript 简介JavaScript 被设计用来向 HTML 页面添加交互行为。JavaScript 是一种脚本语言（脚本语言是一种轻量级的编程语言） 。JavaScript 由数行可执行计算机代码组成。JavaScript 通常被直接嵌入 HTML 页面。JavaScript 是一种解释性语言（就是说，代码执行不进行预编译） 。所有的人无需购买许可证均可使用 JavaScript。3.1 JavaScript 介绍JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建co
14、okies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。在数百万张页面中，JavaScript 被用来改进设计、验证表单、检测浏览器、创建 cookie 等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。3.2 HTML 包含 JavaScript 的方法HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 标签（同时使用 type
15、属性来定义脚本语言） 。这样， 和 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。3.3JavaScript 语句，注释与变量3.3.1 JavaScript 语句JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。这个 JavaScript 语句告诉浏览器向网页输出 “Hello world“：document.write(“Hello world“);3.3.2 JavaScript 注释可以添加注释来对 JavaScript 进行解释，或者提高其可读性。单行的注释以 / 开始。3.3.3 JavaScript 变量正如代数一样，JavaS
16、cript 变量用于保存值或表达式。可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。JavaScript 变量也可以保存文本值，比如 carname=“Volvo“。3.4 函数的定义与应用函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用） 。函数在页面起始位置定义，即 部分。3.5 HTML 事件处理JavaScript 使我们有
17、能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。onload 和 onUnload当用户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来
18、询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼：“Welcome John Doe!“。onFocus, onBlur 和 onChangeonFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。onSubmitonSubmit 用于在提交表单之前验证所有的表单域。下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为 true，则提交表单，反之取消提交。onMouseOver 和 onMouseOutonMouseOver 和 onMouseOut 用来创建“动态的”按钮。
