网页设计与制作论文.docx

《网页设计与制作论文.docx》由会员分享，可在线阅读，更多相关《网页设计与制作论文.docx（50页珍藏版）》请在冰点文库上搜索。

网页设计与制作论文

毕业设计（论文）

论文题目：

网页设计与制作

摘要

网页设计作为用户界面交互设计的延伸，实在新的媒体和新的技术支持实现一个全新的设计创作领域。

设计创作网页与循环其特有的特点和结构思路，具备可实际行和外观时尚。

本论文将对网页设计的开发语言开展研究和讨论。

在网页设计与制作语言的基础上，着重使用HTML作为工具语言进行网页设计与制作的实际操作，分别对基于对象的HTML、css、JavaScript进行详细描述并实现网页的开发。

关键字：

制作、设计、HTML

Summary

Webdesignasanextensionoftheinteractiveuserinterfacedesign,itisanewmediaandnewtechnologiestosupportawholenewfieldofcreativedesign.Designcreationofwebpagesandcirculationofitsuniquecharacteristicsandstructureofideaswiththeactuallineandstylish.Thewebdesignofthispaperwilldeveloplanguagetoolstocarryoutthestudyanddiscussion.Onthebasisofawebsiteonthedesignandproductionoflanguage,focusonusingHTMLwebdesignandproductionoperationsasatoolforlanguage,adetaileddescriptionoftheobject-basedHTML,CSS,JavaScriptandwebpagedevelopment.

Keywords:

production,design,HTML

第一章绪论

随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越来的职业需要具有计算机的应用技能。

掌握计算机是职业的需要，更是事业发展的需要。

网页设计与制作是计算机能力的具体表现，本章主要介绍网页设计的相关知识。

1.网页设计概述

网页是企业向用户和网民提供信息（包括产品和服务）的一种方式,是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。

企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。

1.2网页设计的要素

网页设计的两大要素是：

整体风格和色彩搭配。

一、确定网页的整体风格在这里，我提供给大家一些参考经验：

1．将你的标志logo，尽可能的放在每个页面上最突出的位置。

2．突出你的标准色彩。

3．总结一句能反映贵站精髓的宣传标语！

4．相同类型的图像采用相同效果，比如说标题字都采用阴影效果，那么在网页中出现的所有标题字的阴影效果的设置应该是完全一致的！

二、网页色彩的搭配

1．用一种色彩。

这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。

2．用两种色彩。

先选定一种色彩，然后选择它的对比色。

3．用一个色系。

简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

在网页配色中，还要切记一些误区：

1．不要将所有颜色都用到，尽量控制在三至五种色彩以内。

2．背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。

第二章HTML语言概述

2.1什么是HTML文件

HTML的英文全称是HypertextMarkedLanguage，中文叫做“超文本标记语言”。

和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。

一个HTML文件的后缀名是.htm或者是.html。

用文本编辑器就可以编写HTML文件。

下面写个小HTML文件

Thisismyfirsthomepage.Thistextisbold

2.2HTML元素

HTML元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码。

HTML元素以开始标签起始HTML元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些HTML元素具有空内容（emptycontent）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数HTML元素可拥有属性

2.3HTML格式

HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。

从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。

2.4HTML的特殊字符显示

有些字符在HTML里有特别的含义，比如小于号<就表示HTMLTag的开始，这个小于号是不显示在我们最终看到的网页里的。

那如果我们希望在网页中显示一个小于号，该怎么办呢？

这就要说到HTML字符实体（HTMLCharacterEntities）了。

一个字符实体（CharacterEntity）分成三部分：

第一部分是一个&符号，英文叫ampersand；第二部分是实体（Entity）名字或者是#加上实体（Entity）编号；第三部分是一个分号。

比如，要显示小于号，就可以写<或者<。

用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是lessthan的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。

而实体（Entity）编号，各种浏览器都能处理。

注意：

Entity是区分大小写的。

最常用的字符实体如下图：

2.5HTML样式

style属性的作用：

提供了一种改变所有HTML元素的样式的通用方法。

样式是HTML4引入的，它是一种新的首选的改变HTML元素样式的方式。

通过HTML样式，能够通过使用style属性直接将样式添加到HTML元素，或者间接地在独立的样式表中（CSS文件）进行定义。

2.6HTML链接

HTML使用（锚）标签来创建连接另一个文档的链接。

锚可以指向网络上的任何资源：

一张HTML页面，一幅图像，一个声音或视频文件等等。

1）a和href属性HTML用来表示超链接，英文叫anchor。

可以指向任何一个文件源：

一个HTML网页，一个图片，一个影视文件等。

用法如下：

链接的文字

点击当中的内容，即可打开一个链接文件，href属性则表示这个链接文件的路径。

比如链接到

2）target属性使用 title属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。

3）name属性使用name属性，可以跳转到一个文件的指定部位。

使用name属性，要设置一对。

一是设定name的名称，二是设定一个href指向这个name;

4）链接到email属性在网站中，你经常会看到“联系我们”的链接，一点击这个链接，就会触发你的邮件客户端，比如OutlookExpress，然后显示一个新建mail的窗口。

用可以实现这样的功能。

代码如：

这是一个最简单的邮箱地址的链接：

*************">给新浪网站发信

这个邮箱地址的链接写了subject内容：

*************?

subject=Hello">给新浪网站发信

这个邮箱地址链接写了to,cc,bcc,subject,body的内容：

*************?

cc=******************.com&bcc=**************&subject=I%20like%20your%20site&body=真是个好站点！

">写信给新浪

注:

空格请用%20表示。

显示效果如下图：

图2-1

2.7HTML表格

表格由

每个表格均有若干行（由

一行三列的表格

100

200

300

两行三列的表格

100

200

300

400

500

600

图2-2

2.8HTML列表

无序列表无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于

标签。

每个列表项始于

• 。

  有序列表同样，有序列表也是一列项目，列表项目使用数字进行标记。

  有序列表始于

  标签。

  每个列表项始于

  1. 标签。

     示列如图2-3：

     列分frame

     图2-3

      

     2.9HTML表单

     表单是一个包含表单元素的区域。

     表单元素是允许用户在表单中（比如：

     文本域、下拉列表、单选框、复选框等等）输入信息的元素。

     表单使用表单标签（）定义。

     10.HTML框架框架结构标签（）定义如何将窗口分割为框架每个frameset定义了一系列行或列rows/columns的值规定了每行或每列占据屏幕的面积Css

     示列如图2-4：

     action="method="get">

     请输入你的姓名：

  图2-4

  2.10HTML图片

  用这个Tag可以在HTML里面插入图片。

  最基本的语法如下：

  url表示图片的路径和文件名。

  比如url可以是images/logo/blabla_logo01.gif，也可以是个相对路径是"../images/logo/blabla_logo01.gif"。

  图片alt属性中有一个alt属性，英文叫alternatetext。

  例句如下：

  假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。

  其实，现在大多数浏览器都支持图片载入。

  在此介绍Alt属性，是因为它的另外一个重要功能。

  目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上图片的说明，便于搜索引擎抓取你网页的内容

  示列如图2-5：

  将鼠标停留在图片上，你可以看到Alt属性里写的内容。

  
  

  图2-5

  2.11HTML字体的大小

  在HTML里，可以用font这个元素及其属性来设定字体的大小，颜色和字体风格。

  字体大小用字体大小属性（size）来设定字体的大小。

  示例代码如下：

  这一段的字体大小的值是2。

  字体风格用face属性来设定字体风格。

  示例代码如下：

  这一段的字体风格是arial。

  字体颜色用颜色属性（color）来设定字体颜色。

  字体颜色代码请参见字体颜色代码请参见HTML颜色参考字体颜色代码请参见HTML颜色参考（HTMLColorReference）。

  这一段的字体颜色是红色

  注意HTML4的标准中，已经不建议使用font及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。

  有关CSS中和文字的相关属性，请参见我们教程中的。

  示列如图2-6：

  这段文字的字体大小值为1。

  这段文字的字体大小值为2。

  这段文字的字体大小值为3。

  这段文字的字体大小值为4。

  这段文字的字体大小值为5。

  这段文字的字体大小值为6。

  这段文字的字体大小值为7。

  如图2-6

   

  第三章Css的运用

  3.1Css简介

  随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。

  为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。

  直到CSS出现。

  CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。

  可以这么说，HTML的Tag主要是定义网页的内容（Content），而CSS决定这些网页内容如何显示（Layout）。

  CSS的英文是CascadingStyleSheets，中文可以翻译成串联式样式表。

  CSS按其位置可以分成三种：

  1）内嵌样式（InlineStyle）2）内部样式表（InternalStyleSheet）3）外部样式表（ExternalStyleSheet）

  示列如图3-1：

  20pt;color:

  red">这个内嵌样式（InlineStyle）定义段落里面的文字是20pt字体，字体颜色是红色。

  这段文字没有使用内嵌样式。

  图3-1

  3.2Css基础语法

  CSS语法由三部分构成：

  选择器、属性和值：

  selector{property:

  value}选择器（selector）通常是你希望定义的HTML元素或标签，属性（property）是你希望改变的属性，并且每个属性都有一个值。

  属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：

  body{color:

  blue}上面这行代码的作用是将body元素内的文字颜色定义为蓝色。

  在上述例子中，body是选择器，而包括在花括号内的的部分是声明。

  声明依次由两部分构成：

  属性和值，color为属性，blue为值。

  示列如图3-2：

  H1.mylayout{border-width:

  1;border:

  solid;text-align:

  center;color:

  red}

  这个标题使用了Style。

  这个标题没有使用Style。

  图3-2

  3.3派生选择器

  通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

  在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器（contextualselectors），这是由于它们依赖于上下文关系来应用或者避免某项规则。

  在CSS2中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。

  派生选择器允许你根据文档的上下文关系来确定某个标签的样式。

  通过合理地使用派生选择器，我们可以使HTML代码变得更加整洁。

  3.4id和类选择器

  id选择器可以为标有特定id的HTML元素指定特定的样式。

  id选择器以"#"来定义。

  下面的两个id选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

  #red{color:

  red;}#green{color:

  green;}下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。

  #sidebarp{font-style:

  italic;text-align:

  right;margin-top:

  0.5em;}#sidebarh2{font-size:

  1em;font-weight:

  normal;font-style:

  italic;margin:

  0;line-height:

  1.5;text-align:

  right;}

  3.5Css框架型结构

  CSS框模型（BoxModel）规定了元素框处理元素内容、内边距、边框和外边距的方式。

  元素框的最内部分是实际的内容，直接包围内容的是内边距。

  内边距呈现了元素的背景。

  内边距的边缘是边框。

  边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

  内边距、边框和外边距都是可选的，默认值是零。

  但是，许多元素将由用户代理样式表设置外边距和内边距。

  可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。

  这可以分别进行，也可以使用通用选择器对所有元素进行设置：

  在CSS中，width和height指的是内容区域的宽度和高度。

  增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

  假设框的每个边上有10个像素的外边距和5个像素的内边距。

  如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素

  示列如图3-3：

  这段文字大小是10pt。

  这段文字大小是16px。

  这段文字大小是16pt。

  这段文字大小是10pt的80%。

  这段文字的大小比10pt大。

  这段文字的大小是特大号（xx-large）。

  图3-3

  3.6定为基础和相对绝对定位

  CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。

  定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

  显然，这个功能非常强大，也很让人吃惊。

  要知道，用户代理对CSS2中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。

  另一方面，CSS1中首次提出了浮动，它以Netscape在Web发展初期增加的一个功能为基础。

  浮动不完全是定位，不过，它当然也不是正常流布局。

  我们会在后面的章节中明确浮动的含义。

  CSS有三种基本的定位机制：

  普通流、浮动和绝对定位。

  除非专门指定，否则所有框都在普通流中定位。

  也就是说，普通流中的元素的位置由元素在X（HTML）中的位置决定。

  块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

  行内框在一行中水平布置。

  可以使用水平内边距、边框和外边距调整它们的间距。

  但是，垂直内边