网页设计与制作论文.docx

1、网页设计与制作论文网页设计与制作前言 进入二十一世纪，互联网进一步普及，人们的网络生活进一步丰富，网络已经成为人们之间沟通交流的另一种方式。作为一名大学生，学习如何设计和制作网页变成了一项必不可少的过程，经过几个月的集中学习，我开始对网页的设计和制作有了初步的认识，并且学习了一些网页制作基础。 网页分为静态网页和动态网页两种。静态页面是网页的代码都在页面中，不需要执行asp,php,jsp,.net等程序生成客户端网页代码的网页。静态页面不能自主管理发布更新的页常见的静态页面以.html、.htm为扩展名的。动态网页是最常用的网站建设的一种表达形式，其优点在于可以根据先前所制定好的程序界面，根

2、据用户的不同请求返回相应的数据。所以我将以四部分阐述我对网页设计与制作的理解。首先是基于静态网页的html超文本标记语言和css层叠样式表，然后是基于动态网页的设计语言JavaScript。最后是我对JavaScript与cookie的应用知识。HTML1. HTML标签HTML 文档和 HTML 元素是通过 HTML 标签进行标记的 HTML 标签由开始标签和结束标签组成 开始标签是被括号包围的元素名 结束标签是被括号包围的斜杠和元素名 某些 HTML 元素没有结束标签，比如 2. HTML元素HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。HTM

3、L 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 3. HTML属性HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name=value。属性总是在 HTML 元素的开始标签中规定。4. HTML段落段落是通过 标题定义的。使用空的段落标记 去插入一个空行是个坏习惯。用 标签代替它！（但是不要用 标签去创建列表。不要着急，您将在稍后的篇幅学

4、习到 HTML 列表。）5. HTML样式style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。6. HTML链接HTML 使用 （锚）标签来创建连接另一个文档的链接。锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等等。7. HTML表格表格由 标签来定义。每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定

5、义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。8. HTML列表无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 标签。每个列表项始于 。有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 标签。每个列表项始于 标签。9. HTML表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（）定义。10. HTML框架框架结构标签（）定义如何将窗口分割为

6、框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每列占据屏幕的面积 Css1Css基础语法CSS 语法由三部分构成：选择器、属性和值：selector property: value选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body color: blue上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在

7、花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。2派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。3Id和类选择器id 选择器可以为标有特定 id 的 H

8、TML 元素指定特定的样式。id 选择器以 # 来定义。下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：#red color:red;#green color:green;下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 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

9、;margin: 0;line-height: 1.5;text-align: right;4Css框架型结构CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进

10、行设置：在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素Javascript1JavaScript介绍JavaScript 是属于网络的脚本语言！JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。在数百万张页面中，JavaScript 被用来改进设计

11、、验证表单、检测浏览器、创建cookies，等等等等。JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mozilla、Firefox、Netscape、和 Opera。2HTML包含JavaScript的方法HTML 的 标签用于把 JavaScript 插入 HTML 页面当中。如果需要把一段 JavaScript 插入 HTML 页面，我们需要使用 标签（同时使用 type 属性来定义脚本语言）。这样， 和 就可以告诉浏览器 JavaScript 从何处开始，到何处结束。3JavaScript语句，注释与变量J

12、avaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。这个 JavaScript 语句告诉浏览器向网页输出 Hello world：document.write(Hello world);JavaScript 注释可以添加注释来对 JavaScript 进行解释，或者提高其可读性。单行的注释以 / 开始。JavaScript 变量正如代数一样，JavaScript 变量用于保存值或表达式。可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。JavaScript 变量也可以保存文本值，比如 carname=Volvo。4运算符和控制语句运算符

13、 = 用于赋值。运算符 + 用于加值。算术运算符运算符描述例子结果+加x=y+2 x=7 -减x=y-2x=3*乘x=y*2x=10/除x=y/2x=2.5%求余数 (保留整数)x=y%2x=1+累加x=+yx=6 -递减x=-yx=4 赋值运算符运算符例子等价于结果=x=yx=5+=x+=yx=x+yx=15-=x-=yx=x-yx=5*=x*=yx=x*yx=50/=x/=yx=x/yx=2%=x%=yx=x%yx=0条件语句在您编写代码时，经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。在 JavaScript 中，我们可以使用下面几种条件语句：if 语句

14、在一个指定的条件成立时执行代码。 if.else 语句 在指定的条件成立时执行代码，当条件不成立时执行另外的代码。 if.else if.else 语句 使用这个语句可以选择执行若干块代码中的一个。 switch 语句 使用这个语句可以选择执行若干块代码中的一个。JavaScript 循环在编写代码时，你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能，这样就用不着重复地写若干行相同的代码。JavaScript 有两种不同种类的循环：for 将一段代码循环执行指定的次数 while 当指定的条件为 true 时循环执行代码 5消息框可以在 JavaScript 中创建三种消息框：警告

15、框、确认框、提示框。警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。确认框确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。提示框提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。6函数的定义与应用函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

16、将脚本编写为函数，就可以避免页面载入时执行该脚本。函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的 .js 文件，那么甚至可以从其他的页面中调用）。函数在页面起始位置定义，即 部分。7HTML事件处理JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。onload 和 onUnload当用

17、户进入或离开页面时就会触发 onload 和 onUnload 事件。onload 事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。onload 和 onUnload 事件也常被用来处理用户进入或离开页面时所建立的 cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在 cookie 中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼：Welcome John Doe!。onFocus, onBlur 和 onChangeonFocus、onBlur 和 onChange 事件通常相互配合用来验证表单。下面

18、是一个使用 onChange 事件的例子。用户一旦改变了域的内容，checkEmail() 函数就会被调用。onSubmitonSubmit 用于在提交表单之前验证所有的表单域。下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时，checkForm() 函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm() 函数的返回值是 true 或者 false。如果返回值为true，则提交表单，反之取消提交。onMouseOver 和 onMouseOutonMouseOver 和 onMouseOut 用来创建“动态的”按钮。Javasript与cookie

19、的应用1. Cookie简介cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。有关cookie的例子：名字 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 Welcome John Doe! 的欢迎词。而名字则是从 cookie 中取回的。 密码 cookie 当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站

20、时，密码就会从 cookie 中取回。 日期 cookie 当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息：Your last visit was on Tuesday August 11, 2005!。日期也是从 cookie 中取回的。 2. 创建和存储cookie我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时，他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时，他们就会收到欢迎词。function setCookie(c_name,value,expiredays)var

21、 exdate=new Date()exdate.setDate(exdate.getDate()+expiredays)document.cookie=c_name+ = +escape(value)+(expiredays=null) ? : ;expires=+exdate.toGMTString()在上面的函数中，我们首先将天数转换为有效的日期，然后，我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。之后，我们要创建另一个函数来检查是否已设置 cookie：function getCookie(c_name)if (document.cookie.l

22、ength0) c_start=document.cookie.indexOf(c_name + =) if (c_start!=-1) c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(;,c_start) if (c_end=-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end) return 上面的函数首先会检查 document.cookie 对象中是否存有 cookie。假如 docu

23、ment.cookie 对象存有某些 cookie，那么会继续检查我们指定的 cookie 是否已储存。如果找到了我们要的 cookie，就返回值，否则返回空字符串。最后，我们要创建一个函数，这个函数的作用是：如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。function checkCookie()username=getCookie(username)if (username!=null & username!=) alert(Welcome again +username+!)else username=prompt(Please enter your name:,) if (username!=null & username!=) setCookie(username,username,365) 学院 理工学院（电气信息类） 班级 电子115班 学号 110751156