网页制作基础第一章第二章
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.2 网页的基本概念 1.3 网页的设计(自学)
1.2 网页的基本概念
1. WWW简介 World Wide Web 超文本: 可以链接到其他网站或数据上的文本. 服务器端: 提供供客户浏览的网页 客户端: 安装网页浏览器软件
常用的浏览器软件: IE / Netscape Navigator
网页制作基础
主讲教师：常海燕 教材：《网页设计技术》 中国铁道出版社
主要内容
第1章 网页基础知识 第2章 网页设计的基本描述语言HTML 第3章 动态网页设计技术 第4章 用Dreamweaver制作网页
第5章 用Dreamweaver制作高级网页
第1章 网页基础知识
1.1 用浏览器浏览网页(自学)
说明:HTML文档包含 帧,body被frameset元
素取代
P23 自学
2.3 HTML元素
类别 文档结构元素 头部元素 块元素 列表元素 允许包含的元素 HTML,HEAD,BODY,FRAMESET TITLE,META,LINK,BASE,STYLE CENTER,Hx,ADDRESS,PRE,P,BR,DIV DIR,DL,DT,DD,LI,OL,UL
例5
2. 头部元素
title
3. 字符格式元素
font
(1) 格式:
<font face=值1 size=值2 color=值3> …… </font>
(2) 属性
属性
face
功能
设置文字字体
默认值
宋体
size
color
wk.baidu.com设置文字的大小
设置文字的颜色
3
黑色
(3) 说明
如果系统中没有face属性所指定的字体,则使用默认字体; size属性的取值为1~7;也可以用"+n"或"-n"来设定字号的 相对值,表示在basefont的基础上增加或减少; color属性的值为：rgb颜色("#rrggbb")或颜色的名称. 例6
第2章 网页设计的基本描述语言HTML
2.1 HTML概述
超文本标记语言HTML:Hyper Text Markup Language 专门用于制作网页的语言(.htm 或 .html文件). HTML是一种文字处理语言,不是程序语言 HTML 2.0
﹑2.2﹑
4.0﹑ 4.01
2.2 HTML文档的构成
(3) 使用img标记的注意事项
img标记没有结束标记; 图片文件一般使用.gif或.jpg文件,以保证下载速度;
图片文件的URL尽量使用相对路径.
例8
5. 块元素
CENTER标记 标题标记H1～H6 P标记 BR标记
PRE标记
HR标记
(1). 文本居中标记
<center> ……</center>
内嵌对象元素
APPLET,OBJECT,PARAM,EMBED
1. 文档结构元素
Html
head
body
frameset
P24--27 自学
文档体标记<body>的常用属性
属
link alink vlink
background bgcolor leftmargin topmargin bgproperties text
放在<i>与</i>标记之间的文字将以斜体方式显示。
(3) 下划线标记<u> 放在<u>与</u>标记之间的文字将以下划线方式显示。
(4) 删除线标记<s>
放在<s>与</s>标记之间的文字将以中划线方式显示。
(5) <strike> 同s (6) big 放在<big>与</big>标记之间可以将文字较之前大一号。 (7) small
例2
(2).属性
<标记名 属性名="属性值"> ……
</标记名>
说明: 属性只出现在起始标记中.
<font color=“#ff0000”>这是一段红色的文字</font>
例3
(3).元素
元素由起始标记﹑内容和结束标记组成,每个元素都有一些 相关的属性,元素是构成HTML文档的基本单位 注意: P20
例4
3. 注释
(1) 格式:
<!-- 注释内容 -->
(2) 功能与说明:
• 注释内容 不显示在网页上; • 主要功能是提高代码的可读性. P22 自学
4. HTML文档结构
<HTML> <head> …… </head> <body> HTML 文件的正文写在这里 </body> </HTML>
2. URL(统一资源定位地址) URL的功能: 用于指定信息的位置, 每一个Web页在 WWW上都有自己唯一的URL. URL的组成: 协议://Web服务器地址(IP地址)/文件位置和文件名
例如: http://www.tjpu.edu.cn/index.htm
(1) 绝对路径
包含了标识Internet上的文件所需要的所有信息。包 括完整的协议名称、主机名称、文件夹名称和文件
专门用于制作网页的语言(.htm 或 .html文件).
超文本传输协议HTTP:Hyper Text Transmission Protocol WWW上最常用的一种协议, 用于实现超文本和超媒 体的传输.
4. 什么是网页
其英文是web page,是存储在网站服务器上,通过网络进行传 输并被浏览器解释和显示的HTML文件 网页是HTML语言编写的文本文件,扩展名为,html/htm 网页是网站的基本信息单位，一个网站通常由许多网页构成 网页主要的元素有文本,图片﹑超链接﹑动画﹑按钮等组成
再输入文件名. 要链接到上一级目录中文件,则先输入"../",再输入文件 名.
例如: http://news.163.com/special/000120MC/drought060816.html
相对路径示例
相对路径名 href="abc.htm" 含义 abc.htm 是本地当前路径下的文件
href="web/abc.htm "
功能: 居中显示文本.
(2). 标题标记<h1~h6>
(1) 格式:
<hn align=值> …… </hn>
(2) 功能:
<h1>字号最大,<h6>字号最小.
n为1~6
(3) 分段标记
(A) 格式:
<P> ……</P> <P ALIGN= 参数> …… </P>
(B) 说明:
该标记可单独使用，也可成对使用。单独使用时，下 一个<P>的开始就意味着上一个<P>的结束。
4. 图片元素
(1) 格式:
必须指定的 属性
<img src="图像的URL" 其他属性="属性值" >
单标记
(2) img标记的其他常用属性
属性
alt height width name usemap align border
功能描 述
指定提示文本,即鼠标停留在图像上时显示的文本 指定图像在网页中显示的高度,单位为%或像素 指定图像在网页中显示的高度,单位为%或像素 指定图片的名字 该图片中是否有热区 指定图像与文本的对齐方式,取值为: top、middle、bottom、left、right 指定图像边框的宽度，单位为像素
性
功 能 描 述
设定页面默认的链接颜色 设定鼠标正在单击时的链接颜色 设定访问后链接文字的颜色
设定页面背景图像 设定页面背景颜色 设定页面的左边距 设定页面的上边距 设定页面背景图像为固定，不随页面的滚动而滚动 设定页面文字的颜色
<html> <head> <title>无标题文档</title> </head> <body bgcolor="black" link="green" alink="red" vlink="blue"> <a href="Untitled-1.htm">Untitled-1</a> </body> </html>
href="../ abc.htm " href="../../ abc.htm "
abc.htm 是本地当前路径下web子目录下的文 件
abc.htm 是本地当前目录的上一级子目录下 的文件 abc.htm 是本地当前目录的上两级子目录下 的文件
3. 超文本标记语言和超文本传输协议
超文本标记语言HTML:Hyper Text Markup Language
2. 特殊字符
(1) 特殊字符的两种表示方法:
格式1: &字符串名称;
例如: 代表空格
格式2: &#十进制数/十六进制数; 例如:   代表空格
P21表2-1
<html> <HEAD> <TITLE>特殊字符</TITLE> </HEAD> <BODY> <h2>一些特殊字符</h2> <p>标记符号：<> <p>注册商标：® <p>人民币符号：¥ </BODY> </HTML>
表格元素
表单元素
TABLE,TR,TD,TH,CAPTION
FORM,INPUT,SELECT,OPTION,TEXTAREA
超链接元素
字符格式元素 帧元素 图片元素 层元素 脚本元素
A,MAP,AREA
FONT,B,I,U,S等 FRAMESET,FRAME,NOFRAME,IFRAME IMG DIV,SPAN,LAYER,ILAYER SCRIPT
名称 。
例如: http://news.163.com/special/000120MC/drought060816.html 协议名 主机名 文件夹名 文件名
(2) 相对路径
相对路径是指目标文件地址相对于源文件的路径。 如果链接到同一目录下,只需输入要链接文件的名称.
要链接到下级目录中的文件,需先输入目录名,然后加"/",
HTML文档的基本结构
<HTML> <head> …… </head> <body> HTML 文件的正文写在这里 </body> </HTML>
标记和 标记对
例1
1. 元素﹑标记和属性
(1).标记
<标记名 > ……
</标记名>
说明: 有些标记可以没有结束标记.
<HTML> <HEAD> <TITLE>保护地球</TITLE> </HEAD> <BODY> <B>b标记:环境保护还需公民意</B><BR> <I>i标记:环境保护还需公民意识</I><BR> <U>u标记:环境保护还需公民意识</U><BR> </BODY> </HTML>
放在<small>与</small>标记之间可以将文字较之前小一
号。
上标标记<sup>和下标标记<sub>
(1) 上标标记<sup> 放在<sup>与</sup>标记之间的文字将以上标方式显示. (2) 下标标记<sub> 放在<sub>与</sub>标记之间的文字将以下标方式显示.
例7
<HTML> <HEAD> <TITLE>保护地球</TITLE> <P><B>b标记:环境保护还需公民意识</B> <P><I>i标记:环境保护还需公民意识</I> <P><U>u标记:环境保护还需公民意识</U> <P><S>s标记:环境保护还需公民意识</S> <P><STRIKE>strike标记:环境保护还需公民意识</STRIKE></P> <P><BIG>big标记:环境保护还需公民意识</BIG></P> <SMALL>small标记:环境保护还需公民意识</SMALL> <p> x<sub>1</sub><sup>2</sup>+y<sup>2</sup> =c<sup>2</sup> </BODY></HTML>
(5). 原样显示标记<pre>
(1) 格式:
<pre> …… </pre>
(2) 功能:
使标记对中的内容按照编辑的格式原样显示 在网页上. 例10
(6). 分隔线标记<hr>
(A) 格式:
<hr 属性=值>
<html> <head> <title>无标题文档</title> </head> <body> <font color=“#FF0000” size=6 face=“隶书" >大家看看效果怎样 </font> </body> </html>
物理字体标记<b> 等
(1) 粗体标记<b> 放在<b>与</b>标记之间的文字将以粗体方式显示。 (2) 斜体标记<i>
(C)对齐属性 align
取 值
left center right
功 能
缺省设置,段落内容左对齐 段落内容居中对齐 段落内容右对齐
例9
(4). 换行标记 <br>
(1) 格式:
<br>
(2) 功能与说明:
换行标记为单标记,且不包含任何内容; 功能为在段落间换行,不产生空行(与<p>标记不同)
1.2 网页的基本概念
1. WWW简介 World Wide Web 超文本: 可以链接到其他网站或数据上的文本. 服务器端: 提供供客户浏览的网页 客户端: 安装网页浏览器软件
常用的浏览器软件: IE / Netscape Navigator
网页制作基础
主讲教师：常海燕 教材：《网页设计技术》 中国铁道出版社
主要内容
第1章 网页基础知识 第2章 网页设计的基本描述语言HTML 第3章 动态网页设计技术 第4章 用Dreamweaver制作网页
第5章 用Dreamweaver制作高级网页
第1章 网页基础知识
1.1 用浏览器浏览网页(自学)
说明:HTML文档包含 帧,body被frameset元
素取代
P23 自学
2.3 HTML元素
类别 文档结构元素 头部元素 块元素 列表元素 允许包含的元素 HTML,HEAD,BODY,FRAMESET TITLE,META,LINK,BASE,STYLE CENTER,Hx,ADDRESS,PRE,P,BR,DIV DIR,DL,DT,DD,LI,OL,UL
例5
2. 头部元素
title
3. 字符格式元素
font
(1) 格式:
<font face=值1 size=值2 color=值3> …… </font>
(2) 属性
属性
face
功能
设置文字字体
默认值
宋体
size
color
wk.baidu.com设置文字的大小
设置文字的颜色
3
黑色
(3) 说明
如果系统中没有face属性所指定的字体,则使用默认字体; size属性的取值为1~7;也可以用"+n"或"-n"来设定字号的 相对值,表示在basefont的基础上增加或减少; color属性的值为：rgb颜色("#rrggbb")或颜色的名称. 例6
第2章 网页设计的基本描述语言HTML
2.1 HTML概述
超文本标记语言HTML:Hyper Text Markup Language 专门用于制作网页的语言(.htm 或 .html文件). HTML是一种文字处理语言,不是程序语言 HTML 2.0
﹑2.2﹑
4.0﹑ 4.01
2.2 HTML文档的构成
(3) 使用img标记的注意事项
img标记没有结束标记; 图片文件一般使用.gif或.jpg文件,以保证下载速度;
图片文件的URL尽量使用相对路径.
例8
5. 块元素
CENTER标记 标题标记H1～H6 P标记 BR标记
PRE标记
HR标记
(1). 文本居中标记
<center> ……</center>
内嵌对象元素
APPLET,OBJECT,PARAM,EMBED
1. 文档结构元素
Html
head
body
frameset
P24--27 自学
文档体标记<body>的常用属性
属
link alink vlink
background bgcolor leftmargin topmargin bgproperties text
放在<i>与</i>标记之间的文字将以斜体方式显示。
(3) 下划线标记<u> 放在<u>与</u>标记之间的文字将以下划线方式显示。
(4) 删除线标记<s>
放在<s>与</s>标记之间的文字将以中划线方式显示。
(5) <strike> 同s (6) big 放在<big>与</big>标记之间可以将文字较之前大一号。 (7) small
例2
(2).属性
<标记名 属性名="属性值"> ……
</标记名>
说明: 属性只出现在起始标记中.
<font color=“#ff0000”>这是一段红色的文字</font>
例3
(3).元素
元素由起始标记﹑内容和结束标记组成,每个元素都有一些 相关的属性,元素是构成HTML文档的基本单位 注意: P20
例4
3. 注释
(1) 格式:
<!-- 注释内容 -->
(2) 功能与说明:
• 注释内容 不显示在网页上; • 主要功能是提高代码的可读性. P22 自学
4. HTML文档结构
<HTML> <head> …… </head> <body> HTML 文件的正文写在这里 </body> </HTML>
2. URL(统一资源定位地址) URL的功能: 用于指定信息的位置, 每一个Web页在 WWW上都有自己唯一的URL. URL的组成: 协议://Web服务器地址(IP地址)/文件位置和文件名
例如: http://www.tjpu.edu.cn/index.htm
(1) 绝对路径
包含了标识Internet上的文件所需要的所有信息。包 括完整的协议名称、主机名称、文件夹名称和文件
专门用于制作网页的语言(.htm 或 .html文件).
超文本传输协议HTTP:Hyper Text Transmission Protocol WWW上最常用的一种协议, 用于实现超文本和超媒 体的传输.
4. 什么是网页
其英文是web page,是存储在网站服务器上,通过网络进行传 输并被浏览器解释和显示的HTML文件 网页是HTML语言编写的文本文件,扩展名为,html/htm 网页是网站的基本信息单位，一个网站通常由许多网页构成 网页主要的元素有文本,图片﹑超链接﹑动画﹑按钮等组成
再输入文件名. 要链接到上一级目录中文件,则先输入"../",再输入文件 名.
例如: http://news.163.com/special/000120MC/drought060816.html
相对路径示例
相对路径名 href="abc.htm" 含义 abc.htm 是本地当前路径下的文件
href="web/abc.htm "
功能: 居中显示文本.
(2). 标题标记<h1~h6>
(1) 格式:
<hn align=值> …… </hn>
(2) 功能:
<h1>字号最大,<h6>字号最小.
n为1~6
(3) 分段标记
(A) 格式:
<P> ……</P> <P ALIGN= 参数> …… </P>
(B) 说明:
该标记可单独使用，也可成对使用。单独使用时，下 一个<P>的开始就意味着上一个<P>的结束。
4. 图片元素
(1) 格式:
必须指定的 属性
<img src="图像的URL" 其他属性="属性值" >
单标记
(2) img标记的其他常用属性
属性
alt height width name usemap align border
功能描 述
指定提示文本,即鼠标停留在图像上时显示的文本 指定图像在网页中显示的高度,单位为%或像素 指定图像在网页中显示的高度,单位为%或像素 指定图片的名字 该图片中是否有热区 指定图像与文本的对齐方式,取值为: top、middle、bottom、left、right 指定图像边框的宽度，单位为像素
性
功 能 描 述
设定页面默认的链接颜色 设定鼠标正在单击时的链接颜色 设定访问后链接文字的颜色
设定页面背景图像 设定页面背景颜色 设定页面的左边距 设定页面的上边距 设定页面背景图像为固定，不随页面的滚动而滚动 设定页面文字的颜色
<html> <head> <title>无标题文档</title> </head> <body bgcolor="black" link="green" alink="red" vlink="blue"> <a href="Untitled-1.htm">Untitled-1</a> </body> </html>
href="../ abc.htm " href="../../ abc.htm "
abc.htm 是本地当前路径下web子目录下的文 件
abc.htm 是本地当前目录的上一级子目录下 的文件 abc.htm 是本地当前目录的上两级子目录下 的文件
3. 超文本标记语言和超文本传输协议
超文本标记语言HTML:Hyper Text Markup Language
2. 特殊字符
(1) 特殊字符的两种表示方法:
格式1: &字符串名称;
例如: 代表空格
格式2: &#十进制数/十六进制数; 例如:   代表空格
P21表2-1
<html> <HEAD> <TITLE>特殊字符</TITLE> </HEAD> <BODY> <h2>一些特殊字符</h2> <p>标记符号：<> <p>注册商标：® <p>人民币符号：¥ </BODY> </HTML>
表格元素
表单元素
TABLE,TR,TD,TH,CAPTION
FORM,INPUT,SELECT,OPTION,TEXTAREA
超链接元素
字符格式元素 帧元素 图片元素 层元素 脚本元素
A,MAP,AREA
FONT,B,I,U,S等 FRAMESET,FRAME,NOFRAME,IFRAME IMG DIV,SPAN,LAYER,ILAYER SCRIPT
名称 。
例如: http://news.163.com/special/000120MC/drought060816.html 协议名 主机名 文件夹名 文件名
(2) 相对路径
相对路径是指目标文件地址相对于源文件的路径。 如果链接到同一目录下,只需输入要链接文件的名称.
要链接到下级目录中的文件,需先输入目录名,然后加"/",
HTML文档的基本结构
<HTML> <head> …… </head> <body> HTML 文件的正文写在这里 </body> </HTML>
标记和 标记对
例1
1. 元素﹑标记和属性
(1).标记
<标记名 > ……
</标记名>
说明: 有些标记可以没有结束标记.
<HTML> <HEAD> <TITLE>保护地球</TITLE> </HEAD> <BODY> <B>b标记:环境保护还需公民意</B><BR> <I>i标记:环境保护还需公民意识</I><BR> <U>u标记:环境保护还需公民意识</U><BR> </BODY> </HTML>
放在<small>与</small>标记之间可以将文字较之前小一
号。
上标标记<sup>和下标标记<sub>
(1) 上标标记<sup> 放在<sup>与</sup>标记之间的文字将以上标方式显示. (2) 下标标记<sub> 放在<sub>与</sub>标记之间的文字将以下标方式显示.
例7
<HTML> <HEAD> <TITLE>保护地球</TITLE> <P><B>b标记:环境保护还需公民意识</B> <P><I>i标记:环境保护还需公民意识</I> <P><U>u标记:环境保护还需公民意识</U> <P><S>s标记:环境保护还需公民意识</S> <P><STRIKE>strike标记:环境保护还需公民意识</STRIKE></P> <P><BIG>big标记:环境保护还需公民意识</BIG></P> <SMALL>small标记:环境保护还需公民意识</SMALL> <p> x<sub>1</sub><sup>2</sup>+y<sup>2</sup> =c<sup>2</sup> </BODY></HTML>
(5). 原样显示标记<pre>
(1) 格式:
<pre> …… </pre>
(2) 功能:
使标记对中的内容按照编辑的格式原样显示 在网页上. 例10
(6). 分隔线标记<hr>
(A) 格式:
<hr 属性=值>
<html> <head> <title>无标题文档</title> </head> <body> <font color=“#FF0000” size=6 face=“隶书" >大家看看效果怎样 </font> </body> </html>
物理字体标记<b> 等
(1) 粗体标记<b> 放在<b>与</b>标记之间的文字将以粗体方式显示。 (2) 斜体标记<i>
(C)对齐属性 align
取 值
left center right
功 能
缺省设置,段落内容左对齐 段落内容居中对齐 段落内容右对齐
例9
(4). 换行标记 <br>
(1) 格式:
<br>
(2) 功能与说明:
换行标记为单标记,且不包含任何内容; 功能为在段落间换行,不产生空行(与<p>标记不同)