网页设计与制作入门.docx

网页设计与制作入门.docx

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

网页设计与制作入门

HTML入门

主要介绍浏览器端开发技术，也就是HTML页面制作技术。

在WEB标准中，HTML/HTML负责页面结构，CSS负责页面样式表现，JavaScript

责动态行为。

万维网（WorldWideWeb,WWW）是一个基于超文本方式的信息检索服务工具，采用

指针连接的超网状结构把信息组织起来的。

HTML语言：

超文本标记语言。

网页设计相关概念

1.超链接

网页是使用HTML语言编写的，它的特点就是网页有“超链接”。

超链接是特殊的文字标识，它指向了万维网中的资源；文字的超链接在浏览器中显示出来就是带下划线的文字；判断网页中的某一个对象是不是超链接的一个简单的方法就是用鼠标的光标放在这个文字或图片上，如果是超链接，浏览器便会改变光标为一支手的形状。

2统一资源定位器

用于描述Internet上资源的位置和访问方式，相当于写信的通信地

址，因此叫做“网址”。

语法：

HTTP:

//

基本语法：

Scheme：

//host.domain:

portr/path/filename

说明：

URL包括三个部分，一个是Scheme,告诉浏览器该如何工作，第二部分是文字所存在的主机，第三部分是文件的路径。

（1）Scheme：

定义因特网的服务类型，告诉浏览器如何解析将要

打开的内容。

最流行的是HTTP

（2）Domain（域）：

定义因特网域名，比如。

（3）Host（主机）：

定义域中的主机如果被省略，默认的支持HTTP

的主机WWW，上述中是：

news.

（4）Port（端口）：

定义服务的端口号，端口号经常被省略。

HTTP

默认的端口号是80.

（5）Path（路径）：

定义服务器上的路径。

如果被省略，资源会

被定位到网站的根目录上；上例中的gaunafa.

（6）filename（文件名）：

定义文档的名称。

上述中的agisd.html.

URL的服务类型

file引用本地pc的文件

ftp文件传输协议，用于下载服务器上的文件。

HTTPWWW服务器上的文件，超文本协议

gophergopher服务器上的文件

newsUsenet新闻组

telnetTelnet连接

WAISWAIS服务器上的文件

3网站

网站是一个存放网络服务器上的完整信息的集合体。

它包括一个活多个网页，这些网站以一定的方式连接在一起，成为一个整体，用来描述一组完整的信息或达到某种期望的宣传效果。

4网页

网页可以看成是一个单一体，是网站的一个元素。

5.首页

首页也称为主页，它是一个单独的网页，和一般网页一样，可以存

放各种信息，也是网站所有信息的归类目录或分类缩影。

网页制作开发工具

1.编辑工具

HTML代码可以使用Windows操作系统中自带的记事本进行编

辑。

同时任何文本编辑器都可以编写HTML，但保存的时候必须保

存为.HTML或.htm的格式。

EditPlus就是这样一款非常好用的HTML

编辑器。

它支持颜色标记、HTML标记，同时支持C、C++、Perl、

Java等其他语言，同时还内建完整的HTML&CSS指令功能。

Dreamweaver是一款专业的HTML编辑器，用于设计网页和WEB

应用程序。

2.浏览工具

浏览器是阅读WWW上的信息资源的一个软件，它的作用是在网络上与WWW服务器打交道，从服务器上下载文件。

普及的是InternetExplorer（IE），其他的包括Opera，MozillaFirefox（火狐），腾讯TT。

网页制作相关技术

1.CSS

CSS就是一种叫做样式表（StyleSheet）的技术。

也有人称之为成叠样式表。

Css是一种标记语言，它不需要编译，属于浏览器解释型语言，可以由浏览器直接执行，CSS是由W#C的CSS工作组制定和维护的。

2.JavaSscript

Javascript就是为适应动态网页制作的需要而诞生的一种新的编程语言，是一种脚本语言，在HTML基础上，使用Javascript可以开发交互式WEb网页。

Javascript的出现使得网页和用户之间实现了一种实现性的、动态性、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。

Javascript程序其实是一个文档，一个文本文件，它需要嵌入到HTML文档中，所以任何编写HTMl文档的软件都可以编写开发Javascript。

HTML的基础介绍

超文本标记语言——HTML（HyperTextMarkupLanguage）是编写WEB应用程序的一种语言。

HTML基本结构

一个完整的HTML文件包含头部和主体两个部分的内容，在头部内容里，可以定义标题，样式等，文档的主体结构就是要显示的内容。

标记通常作为HTML的开始标记同样作为结束标记，该标记告诉浏览器或其它程序，这是一个WEB文档，应该按照HTML语言规则对文档的内容的标记进行解释

头部标记

是HTML文档的头部标记，头部信息不会显示在正文中，此标记可以插入其他说明文件的标题和一些公共属性的标记这是文档的网页标题，它将显示在浏览器窗口顶部的标题栏

标记用于描述不包含在标准HTML里的一些文档信息，列如：

作者、工具、网页关键字。

在

--

//-->

网页的开头

通常使用DOCTYPE标记来声明要使用什么风格的HTML或ＸＨＴＭＬ。

ＨＴＭＬ和XHTML有三种风格：

严格性、过渡性和框架型。

严格性的HTML特点是禁止使用被W3C已经废弃的标记。

而过渡型和框架型认为这些标记是有效的。

过渡型的声明：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:

//www.w3.org/TR/html4/loose.dtd">

严格型的声明：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:

//www.w3.org/TR/html4/strict.dtd">

框架型的声明：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:

//www.w3.org/TR/html4/frameset.dtd">

HTML的基本语法

标记语法

HTMl用于描述功能的符号称为“标记”。

等

都是标记。

标记分为单标记和双标记。

单标记

单独使用就可以表示完整的意思。

通常用的是
,表示换行。

双标记

由首标记和尾标记构成。

首标记告诉WEB浏览器从此处开始执行该标记所表述的功能。

尾标记告诉结束。

例：

两个之间的文本应以粗体显示。

标记可以成对嵌套，但不能交叉嵌套。

例

内容是对的；内容是错误的。

属性语法

为某些元素附加一些信息，这些附加的信息被称为属性<标记名称属性名1=“属性值”属性名2=“属性值”>例：

属性应写在首标记内，并且和标记名之间有一个空格分隔

注释

注释标签在源码中插入注释。

注释会被浏览器忽略，适当的代码注释会对以后的代码阅读和维护有很大的帮助。

--注释内容-->

另外就是把脚本或样式表元素放在注释文本中，这样可以避免不支持脚本或样式表的浏览器把他们当成文本显示。

编写HTML文件的注意事项

（1）“<”和“>”是任何标记的开始和结束。

元素的标记要用这对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠“/”;

（2）标记可以嵌套使用，但不能交叉嵌套标记。

（3）在源代码中不区分大小写，但推荐一个项目使用一种风格。

（4）任何回车符和空课在HTMl代码中都不起作用。

为了代码清晰，建议不同的标记都独占一行。

（5）标记中可以放置各种属性，属性值都使用“”括起来。

（6）编写代码，一般应该使用缩进风格，以便更好理解页面的结构。

对HTMl文件的命名要注意一下几点

（1）文件的扩展名为htm或html，建议统一使用html为文件名的

后缀。

（2）文件名只可由英文字母、数字或下划线组成。

（3）文件名不要包含特殊符号，比如空格等

（4）文件名区分大小写。

（5）网站首页文件名一般是index.html或default.html.

文字与段落

添加文字

文字是网页的基础部分，在需要输入文字的地方输入即可，但是一定要添加在之间。

标题字

标题字就是一几种固定的字号去显示文字，在HTML中定义了六级标题，从一级到六级，每级标题的字体依次递减。

标题文字

（1）标题标记本身具有换行的作用，标题总是从新的一行开始。

（2）#用来指示标题文字的大小，#取1到6的数值,取1是最大,去6时最小.

（3）Align设置标题字的对齐属性。

添加空格

通常情况下，HTML会自动删除文字内容中多余的空格，不管文字中有多少空格，都被视作一个空格，例如，有两个字之间有5个空格，HTML会截取4个空格，只保留一个空格，为了在网页中增加空格，可以明确使用“ ”表示空格，就可以控制空格。

添加特殊符号

特殊符号与空格一样，使用特殊符号可以将键盘上没有的字符输出来。

注释语句

两种方式

……

——……——>

注释不可以嵌套在其他注释中。

文字样式

在网页中添加文字后可以设置字体、字号、颜色等属性，利用标记或标记实现。

……

（1）标记的face属性用来定义字体，任何安装在操作系统中的文字都可以显示在浏览器中，可以给face一次定义多个字体，字体之间用“，”隔开，浏览器在读取字体时，如果第一种字体不存在，就显示第二种字体。

（2）Size属性用来定义字号，取值范围+1~+7，-1~-7。

（3）Color定义颜色，其值为该颜色的英文单词或十六进制数值。

基底文字标记

在制作网页时，可以使用标记对整个网页的文字进行一个基本定义，包括字体颜色和字号，当网页中没有另外定义的文字样式时，就自动套用定义的样式，定义将影响整个HTML页面。

三个属性的含义和<.font>属性一样。

中定义的字号要受到这个基本定义的影响，在基底文字的基础上操作

注意：

此标记尽量不要使用，它属于未来可能不被支持的标记。

文字修饰

粗体、斜体、下划线

标记实现加粗文字显示

标记实现斜体文字显示

标记实现给文字添加下划线

删除线

文字加上了删除线

上标和下标

在数学公式中，上标和下标使用非常广泛。

^{将文字放在次实现上标}

_{将文字放在此实现下表}

例如：

x²+y₂

显示：

x2+y2。

设置文字标注

在HTML中可以使文字上方添加说明，并以缩小的字号显示。

被说明的文字

文字标注。

例：

第二十九届奥运会在北京举行2008

结果：

设置地址文字

标记来实现。
……
忽略HTML标记
在HTML文件中，利用
标记，可以使得该标记后面的HTML标记的作用被忽略，直接显示在页面上。</p><p><xmp>文字会被忽略HTMl代码
设置段落缩进
利用段落缩进，可以增加段落的层次效果。
……
利用此属性可以实现文字的排版，一对缩排版标记可以缩进5个字符，要求实现多次缩排需要多次
文本和行内元素不应该直接放在标记中，而是应该将内容包围在一个快级标记中，然后再将这个标记放在
中。
列表
在制作网页时，列表经常被用到写提纲和品种说明书上。
常用三种列表
有序列表
无序列表
定义列表
还有不太常用的目录列表和菜单列表。
无序列表
是一个没有特定顺序的相关条目的集合。
项目名称
项目名称
使用无序列表标记的type属性，用户可以指定出现在列表前的项目符号的样式，如：
（1）disc:
指定项目符号为一个实心圆点（IE的默认值是disc）。
（2）Circle：
制定项目符号为一个空心圆点。
（3）Square：
制定项目符号为一个实心方块。
有序列表
有序列表是一个有特定顺序的相关条目的集合，各个列表项有先后次序之分，他们以编号来标记。
项目名称
项目名称
在使用有序列表的type属性，用户可以指定出现在列表项前的项目编号的样式。
（1）“1”指定项目编号为阿拉伯数字（IE浏览器的默认）
（2）“a”指定项目编号为小写英文字母。
（3）“A”指定项目编号为大写的英文字母。
（4）“i”指定项目编号为小写的罗马字母。
（5）“I”指定项目编号为大写的罗马字母。
编号的起始值
在使用有序列表标记的start属性后，用户可以改变编号的起始值。
Start属性值是一个整数，表示从那一个数字或字母开始编号。
列如：
设置start=“2”，则有序列表的列表项编号将从“2”“b”"B""
""
"开始编号。
列表项样式
除了对
进行属性设置，我们也可以对列表项标记
进行属性设置。
使用列表项标记
的type属性。
在列表标记
发生冲突时，以
的type属性进行显示。
注意：
（1）所指定的单个列表项只是样式发生改变，其顺序值大小不变。
a）列表项标记
的type属性只影响当前列表项，后续列表项将回复遵循列表中设置的type属性。
b）列表项标记
type属性的指定，既适用于无序列表也适用于有序列表。
列表项编号
使用列表标记
的value属性，可以改变当前列表项的编号大小，并会影响其后所有的列表项的编号的大小。
但该属性只适用与有序列表。
.
嵌套列表
一个列表还可以包含很多层子列表。
对于无序列表，在IE浏览器中除了一级条目（嵌套的第一层）使用默认实心圆点外，二级条目默认使用空心圆点，三级以下条目默认使用实心方块。
定义列表
在HTML中，只要在适当的地方插入
标记，即可自动生成定义列表（definitionlist）.它的每一项既没有项目符号，也没有编号，它是通过缩进的方式使内容层次清晰。
……
……
……
……
……
……
（1）
标记用来创建定义列表。
（2）
标记用来创建列表中的上层项目，此标记只能在
标记中使用。
显示时
的内容将左对齐。
（3）
标记用来创建列表中的下层项目，此标记也只能在
标记中使用，显示时
的内容相对于
的内容向右缩进。
菜单列表和目录列表
菜单列表（menulist）通常用于显示一个简单的单列列表，一般不会嵌套。
目录列表（Directorylist）通常显示一个多列的文件列表，可以嵌套。
使用与无序列表相似。
超级链接
超链接的本质上是属于一个网页的一部分，他是允许一个网页同其他网页或站点之间进行连接的元素。
创建超级链接
超链接的标记是a（anchor,锚），以开始，以结束。
锚可以指向任何网络上的资源。
超链接名称
即：
一个连接有三部分：
目标地址（URL）、链接标签（title）和打开位置（target）
（1）:
标记表示一个链接的开始表示一个链接的结束。
（2）Href:
链接属性，和URL结合可以定义了这个链接所指的目标地址。
（3）Url：
资源地址，是要链接到的网页或者文件。
、
（4）Target：
用于打开链接的窗口，其默认方式是原来窗口；
标签的target属性规定在何处打开链接文档。
如果在一个标签内包含一个target属性，浏览器将会载入和显示用这个标签的href属性命名的、名称与这个目标吻合的框架或者窗口中的文档。
如果这个指定名称或id的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。
从此以后，超链接文档就可以指向这个新的窗口。
在框架中打开窗口
不用打开一个完整的浏览器窗口，使用target更通常的方法是在一个显示中将超链接内容定向到一个或者多个框架中。
可以将这个内容列表放入一个带有两个框架的文档的其中一个框架中，并用这个相邻的框架来显示选定的文档：
 
特殊的目标
有4个保留的目标名称用作特殊的文档重定向操作：
_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。
这个目标是多余且不必要的，除非和文档标题标签中的target属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。
如果这个引用是在窗口或者在顶级框架中，那么它与目标_self等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用_top目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。
提示：
这些target的所有4个值都以下划线开始。
任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架name或id的第一个字符。
语法
属性值
值
描述
_blank
在新窗口中打开被链接文档。
_self
默认。
在相同的框架中打开被链接文档。
_parent
在父框架集中打开被链接文档。
_top
在整个窗口中打开被链接文档。
framename
在指定的框架中打开被链接文档。
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和