《网页设计与制作毕业设计论文.doc》由会员分享，可在线阅读，更多相关《网页设计与制作毕业设计论文.doc（48页珍藏版）》请在三一办公上搜索。
1、电 子 科 技 大 学毕 业 设 计（论 文）论文题目：网页设计与制作 学习中心（或办学单位）：电子科技大学指导老师：官晓波 职 称： 高级实验师 学生姓名：钟华 学 号: v08060441111专 业：计算机科学与技术 电子科技大学继续教育学院制网络教育学院2012年 06月 12日电 子 科 技 大 学毕业设计（论文）任务书题目：网页设计与制作任务与要求： 利用所学的语言做一个以介绍低碳生活为主题的静态网页以及网页 多个模块的连接。时间： 2012 年 2 月28 日 至 2012 年 6 月 4 日 共 8 周学习中心：（或办学单位）电子科技大学学生姓名：钟华 学 号：v0806044
2、1111专业： 计算机科学与技术指导单位或教研室：电子科技大学中山学习中心指导教师：官晓波 职 称：高级实验师电子科技大学继续教育学院制网络教育学院2012年 6月 12日毕业设计(论文)进度计划表日 期工 作 内 容执 行 情 况指导教师签 字4月15日至4月20日进行毕业资料收集和整理良好4月21日至5月1日网页设计和制作良好5月2日至5月10日经过中期检查后，对网页设计与实现进行修改及完善良好5月11日至5月22日论文的构思，修改撰写良好5月23日至5月25日将论文由网上发给指导老师良好5月日至5月日论文的打印及装订良好6月日至6月日论文提交良好教师对进度计划实施情况总评 签名 年 月
3、日 本表作评定学生平时成绩的依据之一。摘要网页设计作为用户界面交互设计的延伸，实在新的媒体和新的技术支持实现一个全新的设计创作领域。设计创作网页与循环其特有的特点和结构思路，具备可实际行和外观时尚。本论文将对网页设计的开发语言开展研究和讨论。在网页设计与制作语言的基础上， 着重使用 HTML作为工具语言进行网页设计与制作 的实际操作，分别对基于对象的 HTML、css、JavaScript进行详细描述并实现网页的开发。关键字：制作、设计、HTMLSummaryWeb design as an extension of the interactive user interface design,
4、 it is a new media and new technologies to support a whole new field of creative design. Design creation of web pages and circulation of its unique characteristics and structure of ideas with the actual line and stylish. The web design of this paper will develop language tools to carry out the study
5、 and discussion. On the basis of a website on the design and production of language, focus on using HTML web design and production operations as a tool for language, a detailed description of the object-based HTML, CSS, JavaScript and web page development.Keywords: production, design, HTML目录第一章 绪论71
6、.网页设计概述71.2网页设计的要素7第二章 HTML语言概述82.1什么是HTML文件82.3HTML格式82.5HTML样式102.6HTML链接102.7HTML表格112.8HTML列表132.9HTML表单14第三章 Css的运用173.1Css简介173.2 Css 基础语法173.3派生选择器183.4 id 和类选择器183.5 Css 框架型结构19第四章Javascript的运用224.1JavaScript 介绍224.2HTML包含JavaScript 的方法224.3 JavaScript 语句，注释与变量234.4JavaScript常用运算符234.5JavaSc
7、ript 条件语句244.6函数的定义与应用274.7HTML事件处理27第五章 WEB页面信息的交互窗体与框架335.1窗体基础知识335.2 窗体中的基本元素345.3窗体对象实例385.4 框架425.5 框架的访问43第六章 结束语47致 谢47参考文献47第一章 绪论随着 21 世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越 来越重要，越来越来的职业需要具有计算机的应用技能。掌握计算机是职业的需 要，更是事业发展的需要。网页设计与制作是计算机能力的具体表现，本章主要 介绍网页设计的相关知识。1.网页设计概述网页是企业向用户和网民提供信息(包括产品和服务)的一种方式, 是企
8、业开 展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站 ） 去谈 电子商务是不可能的。企业的网址被称为“网络商标” ，也是企业无形资产的组 成部分，而网站是 INTERNET 上宣传和反映企业形象和文化的重要窗口。1.2网页设计的要素 网页设计的两大要素是：整体风格和色彩搭配。 一、确定网页的整体风格 在这里，我提供给大家一些参考经验： 1将你的标志 logo，尽可能的放在每个页面上最突出的位置。 2突出你的标准色彩。 3总结一句能反映贵站精髓的宣传标语！ 4相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在 网页中出现的所有标题字的阴影效果的设置应该是完全一致的！
9、 二、网页色彩的搭配 1用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度， 这样的页面看起来色彩统一，有层次感。 2用两种色彩。先选定一种色彩，然后选择它的对比色。 3用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿； 或者土黄，土灰，土蓝。 在网页配色中，还要切记一些误区： 1不要将所有颜色都用到，尽量控制在三至五种色彩以内。 2背景和前文的对比尽量要大(绝对不要用花纹繁复的图案作背景)，以便 突出主要文字内容。 第二章 HTML语言概述2.1什么是HTML文件HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 和一
10、般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的后缀名是.htm或者是.html。 用文本编辑器就可以编写HTML文件。 下面写个小HTML文件Title of pageThis is my first homepage. This text is bold2.2 HTML元素 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元
11、素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性2.3HTML格式HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。2.4 HTML 的特殊字符显示有些字符在HTML里有特别的含义，比如小于号就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办呢？这就要说到HTML字符实体(HTML Character Entities)了。一个字符实体(Character Entity)分成三部分：第一部分是
12、一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。比如，要显示小于号，就可以写<或者<。用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。注意：Entity是区分大小写的。最常用的字符实体如下图：2.5HTML样式 style 属性的作用： 提供了一种改变所有 HTML 元素的样式的通用方法。 样式是 HTML 4 引入的，它是一种新的首选的改变 H
13、TML 元素样式的方式。通过 HTML 样式， 能够通过使用 style 属性直接将样式添加到 HTML 元素， 或者间接地在独立 的样式表中（CSS 文件）进行定义。 2.6HTML链接HTML 使用 （锚）标签来创建连接另一个文档的链接。 锚可以指向网络上的任何资源：一张 HTML 页面，一幅图像，一个声音或视频文件等 等。1）a和href属性 HTML用来表示超链接，英文叫anchor。可以指向任何一个文件源：一个HTML网页，一个图片，一个影视文件等。用法如下：链接的文字点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。比如链接到 2）target属性使用ti
14、tle 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。 3）name属性 使用name属性，可以跳转到一个文件的指定部位。使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这个name; 4)链接到email属性 在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如Outlook Express，然后显示一个新建mail的窗口。用可以实现这样的功能。代码如：这是一个最简单的邮箱地址的链接：给新浪网站发信这个邮箱地址的链接写了subject内容：给新浪网站发信这个邮箱地址链接写了to, cc, bcc, subject
15、, body的内容：写信给新浪注:空格请用%20表示。显示效果如下图：图2-12.7HTML表格 表格由 标签来定义。每个表格均有若干行（由 标签定义） ，每行被分割 为若干单元格（由 标签定义） 。字母 td 指表格数据（table data） ，即数据单元格的内 容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。示列如图2-2：表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。只有一行(Row)一列(Column)的表格100一行三列的表格100200300两行三列的表格100200300400500600图2-22.8HTML
16、列表无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表始于 标签。每个列表项始于 。 有序列表 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 标签。每个列表项始于 标签。 示列如图2-3：列分frame图2-32.9HTML表单表单是一个包含表单元素的区域。 表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入 信息的元素。 表单使用表单标签（）定义。 10. HTML 框架框架结构标签（）定义如何将窗口分割为框架 每个 frameset 定义了一系列行或列 rows/columns 的值规定了每行或每
17、列占据屏幕的面积 Css示列如图2-4：输入用户姓名请输入你的姓名：图2-42.10 HTML图片 用 这个 Tag 可以在HTML里面插入图片。最基本的语法如下： url表示图片的路径和文件名。比如 url 可以是images/logo/blabla_logo01.gif，也可以是个相对路径是./images/logo/blabla_logo01.gif。图片alt属性中有一个alt属性，英文叫alternate text。例句如下：假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引
18、擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容示列如图2-5：将鼠标停留在图片上，你可以看到Alt属性里写的内容。图2-52.11 HTML字体的大小在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。字体大小用字体大小属性(size)来设定字体的大小。示例代码如下：这一段的字体大小的值是2。字体风格用face属性来设定字体风格。示例代码如下：这一段的字体风格是arial。字体颜色用颜色属性(color)来设定字体颜色。字体颜色代码请参见字体颜色代码请参见HTML颜色参考字体颜色代码请参见HTML颜色参考(HTML C
19、olor Reference)。这一段的字体颜色是红色注意HTML4的标准中，已经不建议使用font及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。有关CSS中和文字的相关属性，请参见我们教程中的。示列如图2-6：字体大小 font size这段文字的字体大小值为1。这段文字的字体大小值为2。这段文字的字体大小值为3。这段文字的字体大小值为4。这段文字的字体大小值为5。这段文字的字体大小值为6。这段文字的字体大小值为7。如图2-6第三章 Css的运用3.1Css简介随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界
20、面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。CSS按其位置可以分成三种：1)内嵌样式(Inline Style) 2)内部样式表(Internal Sty
21、le Sheet) 3)外部样式表(External Style Sheet)示列如图3-1：内嵌式样式(Inline Style)这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。这段文字没有使用内嵌样式。图3-13.2 Css 基础语法 CSS 语法由三部分构成：选择器、属性和值： selector property: value 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望 改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组 成了一个完整的样式声明（dec
22、laration） ： body color: blue 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。 在上述例子中， body 是 选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为 属性，blue 为值。示列如图3-2：H1.mylayout border-width: 1; border: solid; text-align: center;color:red 这个标题使用了Style。这个标题没有使用Style。图3-23.3派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 在 CSS1 中，通过这种方
23、式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们 称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。 派生选择器允许你根据文档的上下文关系来确定某个标签的样式。 通过合理地使用派生 选择器，我们可以使 HTML 代码变得更加整洁。3.4 id 和类选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 # 来定义。 下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为 绿色： #red color:red;
24、 #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; margin: 0; line-height: 1.5; text-align: right; 3.5 Css 框架型结构 CSS 框模型 (Box Mo
25、del) 规定了元素框处理元素内容、 内边距、 边框 和 外边距 的方 式。 元素框的最内部分是实际的内容， 直接包围内容的是内边距。 内边距呈现了元素的背景。 内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何 元素。 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表 设置外边距和内边距。 可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样 式。这可以分别进行，也可以使用通用选择器对所有元素进行设置： 在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外 边距不会影
26、响内容区域的尺寸，但是会增加元素框的总尺寸。 假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框 达到 100 个像素，就需要将内容的宽度设置为 70 像素示列如图3-3：字体大小属性 font-sizeBODYfont-size:10pt.s1 font-size:16px.s2 font-size:16pt.s3 font-size:80%.s4 font-size:larger.s5 font-size:xx-large这段文字大小是10pt。这段文字大小是16px。这段文字大小是16pt。这段文字大小是10pt的80%。这段文字的大小比10pt大。这段文
27、字的大小是特大号(xx-large)。图3-33.6定为基础和相对绝对定位 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一 部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单， 它允许你定义元素框相对于其正常位置应该出现的位置， 或者 相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让 人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感 到奇怪。 另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功 能为基础。浮动
28、不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明 确浮动的含义。 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元 素在 X(HTML) 中的位置决定。 块级框从上到 下 一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。 可以使用水平内边距、 边框和外边距调整它们的间距。 但是， 垂直内边距、 边框和外边距不影响行内框的高度。 由一行形成的水平框称为行框 （Line Box） ， 行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高
29、度。 在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。 CSS 相对定位 相对定位是一个非常容易掌握的概念。 如果对一个元素进行相对定位， 它将出现在它所 在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移 动。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设 置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对 定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流
30、中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在一样： 第四章Javascript的运用4.1JavaScript 介绍 JavaScript 是属于网络的脚本语言！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建 cookies，以 及更多的应用。 JavaScript 是因特网上最流行的脚本语言。 在数百万张页面中， JavaScript 被用来改进设计、 验证表单、 检测浏览器、 创建 cookies， 等等等等。 JavaScript 是因特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说 Internet Explorer、 Mo
31、zilla、Firefox、Netscape、和 Opera。下面来看一下简单的JavaScript的入门示列如图4-1.用document.write输出带格式的HTML文本的Javascript示例document.write(Hello World!)图4-14.2HTML包含JavaScript 的方法Javascript程序放到一个后缀名为.js的文本文件里。这样做，可以提Javascript的复用性，减少代码维护的负担，不必将相同的Javascript代码拷贝到多个HTML网页里，将来一旦程序有所修改，也只要修改.js文件就可以，不用再修改每个用到这个Javascript程序的HT
32、ML文件。在HTML里引用外部文件里的Javascript，应在Head里写一句，其中src的值，就是Javascript所在文件的文件路径。示例代码如下：script src=演示示例里的common.js其实就是一个文本文件，内容如下：function clickme()alert(You clicked me!)4.3 JavaScript 语句，注释与变量 语句， JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。 这个 JavaScript 语句告诉浏览器向网页输出 Hello world： document.write(Hello world);
33、JavaScript 注释 可以添加注释来对 JavaScript 进行解释，或者提高其可读性。 单行的注释以 / 开始。JavaScript 变量 正如代数一样，JavaScript 变量用于保存值或表达式。 可以给变量起一个简短名称，比如 x，或者更有描述性的名称，比如 length。 JavaScript 变量也可以保存文本值，比如 carname=Volvo。4.4JavaScript常用运算符算数运算符：逻辑运算符：赋值运算符：注意：请注意赋值(=)和等于(=)的区别。4.5JavaScript 条件语句在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执行，后面的代
34、码后执行。但是这种简单的自上而下的单向流程只适于用一些很简单的程序。大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语句，Javascript也不例外。这一节我们主要介绍Javascript条件语句。Javascript条件语句有以下几种：1)单项条件结构 (if条件语句)2)双向条件结构 (if.else条件语句)3)多项条件结构 (switch条件语句)4)单项条件结构 (if条件语句)If条件语句的语法如下：if (expression)statement1这句语法的含义是，如果符合expression条件，就
35、执行statement1代码，反之，则不执行statement1代码。下面的这个Javascript示例就用到了Javascript的if条件语句。首先用.length计算出字符串Whats up?的长度，然后使用if语句进行判断，如果该字符串长度100，就显示该字符串长度小于100。一个使用到if条件语句的Javascript示例var vText = Whats up?;var vLen = vText.length;if (vLen 100)document.write( 该字符串长度小于100。)双向条件结构 (if.else条件语句)If.else条件语句的语法如下：if (expr
36、ession) statement1 else statement2 这句语法的含义是，如果符合expression条件，则执行statement1代码，反之，则执行statement2代码。下面的Javascript示例使用了if.else条件语句判断，如果vHour小于17，显示日安，反之则显示晚安。使用if.else条件语句的Javascript示例var vDay = new Date()var vHour = vDay.getHours()if (vHour 17)document.write(日安)elsedocument.write(晚安)多项条件结构 (switch条件语句)Switch条件语句的语法如下：switch (expression) case label1 : statement1 break case label2 : statement2 break .
