网页设计教学PPT

上传人：0*** IP属地：湖北上传时间：2023-02-03 格式：PPT 页数：64 大小：1.56MB 积分：30 举报 版权申诉

已阅读5页，还剩59页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第二章网页设计语言HTMLHTML基础知识页面基本信息和布局文本修饰超文本链接表格图像表单多媒体什么是HTML？

HTML是HyperTextMarkupLanguage的英文缩写，翻译为“超文本标识语言”。它是一种用来制作超文本文档的简单标记语言，是WWW上描述网页内容和外观的标准。HTML是一种标识语言，由一些编码和标注组成，对网页的行为作出说明，允许Web浏览器解释它们，以便于理解。HTML如何表示呢？<html><head><title>table示例</title></head><body><tableborder=1><tr><td>第一列</td><td>第二列</td></tr></table></body></html>

HTML包含了一对打开和关闭的标记，在当中并有属性和值。标记描述了每个网页上的元素，例如文本段落、表格、或者图像等。返回例如HTML代码：

<H1align=“left”>欢迎!</H1><H1>……</H1>标记是描述文本显示大小。（其中</H1>表示标记结束）其中align=“left”是设置文本显示的对齐方式，它是这个标记的属性和值。HTML的特点应用的简易性可以使用任何一种文字处理工具；语法规则比其他编程语言简单的多。功能的强大性几乎能够完成所有的设计工作。兼容性几乎每个软件都提供了HTML视图模式。HTML的功能可以设计远程服务表单，用于商务网页中的信息检索和商品订购等；可以定义标题、文字、表格、列表、图像、声音和影视文件等网页中的各类元素；通过超链接功能可以将互联网中不同页面或页面中的不同位置进行逻辑链接，以供用户进行定位浏览；可以将互联网上的不同资源进行链接，以实现资源共享。HTML文档结构标记我们先来看一个标准的HTML文档结构：<html><head><title>标题内容</title></head><body>

主要内容在这里！</body></html>将以上代码在浏览器上发布，会是什么结果？在记事本中演示。HTML文档结构它是以标签（tag）来标识，而标签本身则由“<”和“>”号标识，标签内的内容称为元素。绝大多数元素是由三部分组成的，即起始标记、内容和结尾标记。元素的起始标记叫做起始链接签(starttag)，元素结束标记叫做结尾链接签(endtag)。在起始链接签和结尾链接签中间的部分是元素体，即元素内容。

例子<bodybgcolor="blue"><p><b>欢迎进入E商网</b></p></body>说明：第一行<bodybgcolor=“blue”>是元素的起始链接签，它表明元素从此开始。起始链接签的形式为<元素名属性名=属性值>。第二行是body元素的元素体。第三行</body>是body元素的结尾链接签。结尾链接签的形式为</元素名>。HTML文档结构<元素名>文件或超文本<／元素名>

<元素名属性名＝“属性值…>文本或超文本<／元素名>

<元素名>关于编写HTML文档的说明HTML标记包含在<>中，以区别于在页面上显示的文本。大多数HTML标记都成对出现，只有极少数单独出现，例如，<BR>标记。HTML标记不区分大小写。HTML文档的扩展名为htm，也可以为html。HTML文档是一个纯文本的文档，可以使用任何文本编辑器来编辑它，例如记事本。因为浏览器的差异，一些扩充的HTML标记在不同的浏览器上可能显示的结果并不相同。页面基本信息和布局一、HEAD元素格式：

标记说明：HEAD标记是页面的第二层标记，用于包含页面的标题信息。提示：

HEAD标记必须在BODY标记开始之前结束，即</head>必须放在<body>之前）。一、HEAD元素标题<title>网页标题</title>基本属性网页的基本属性通常利用meta（元信息），例如字符编码、作者、版权和关键字等。（1）keywords<metaname=“keywords”content=“关键字具体内容”>（2）description<metaname=“description”content=“网页描述的具体内容”>（3）refresh<metahttp-equiv=“refresh”content=“10;URL=index.htm”>(4)Content-Type<metahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”>(5)Link,Base,Target,ID等等。Body元素及语法规则用于定义网页的页面信息，如背景、链接等。页面颜色<bodybgcolor=#text=#link=#alink=#vlink=#>背景色彩非可链接文字的色彩可链接文字的色彩正被点击的可链接文字的色彩已经被点击过的可链接文字的色彩#代表色彩值，可以用6位十六进制的数值表示，也可以用各种颜色的英文单词表示。如下例所示：<bodybgcolor=“FF0000”><bodybgcolor=“red“>FFFFFF：白色white000000：黑色blackBody元素及语法规则设置网页背景图片<bodybackgroud=“image-URL”>设置页面左边的空白语法<bodyleftmargin=#>设置页面上方的空白语法<bodytopmargin=#>#=marginamount，通常设置成默认值。

1、FONT标记标记的格式：

<fontface=“字体名称1,字体名称2,…字体名称n,”size=“字号”color=“字体颜色”>…</font>标记说明：FONT标记是专门对文本进行设置的标记，该标记共有三个参数：face指定字体的名称，可以设置一种，也可以设置多种，字体名称之间用逗号隔开。Size参数指定字体的大小（字号），数值范围在7~(-7)之间。Color参数用于指定文本的颜色。2、H标记P29标记的格式：<H1>文本内容</H1>…….

<H6>文本内容</H6>标记说明：实际H标记是一系列以H开头的标记，使用H标记指定标记之间的文本的大小（共分为6级，数值越大字越小）。(专门用作标题)H标记有一个参数：align,它用于设置文本的对齐方式，取值为center(居中对齐)、left(左对齐)、right(右对齐)。<fontface="幼圆"size="7"color="#FF0000">e5</font>4、B标记、I标记、U标记、S标记这四个标记的格式为：

<I>文本</I><S>文本</S>标记说明：B标记用于将标记之间的文本设置成粗体。I标记用于将标记之间的文本设置成斜体。U标记用于将标记之间的文本加下划线。S标记用于将标记之间的文本添加删除线。list元素及语法规则

（1）无序列表<ul>

<li>列表内容1<li>列表内容2

</ul>（2）有序列表<ol>

<li>列表内容1

<li>列表内容2

</ol>例子<ol><li>财经</li><li>体育<ul><li>足球</li><li>篮球</li><li>其它</li></ul></li><li>娱乐</li></ol>文字布局行控制<p>回车符，表示一个段落的结束，可以单独使用，不用成对出现。<p>标记后面的正文将另起一段落。（演示）<br>换行符，仅表示另起一行，不表示段落的结束，也可以单独使用。<br>标记后面的正文将另起一行。（演示）(2)

对齐<palign=#>...</p>其中#=left,center,right，分别表示左对齐，居中和右对齐。（演示）(3)预格式化所谓预格式化，就是保留文字在源代码中的格式，页面中显示的和源代码中的效果完全一致。浏览器在显示其中的内容时，会完全按照其真正的文本格式来显示。例如原封不动地保留文档中的空白，如空格、制表符等。<pre>…...</pre>

marquee元素及语法规则

滚动字幕是网页中常用的文字特效，它通过marquee语句实现，具体的语法规则如下。<marqueedirection=#bihavior=#loop=#scrollamount=#scrolldelay=#bgcolor=#height=#width=#onmouseover=this.stop()onmouseout=this.start()>滚动文本内容</marquee>表示滚动方向，包括left、right、up、down，如direction=up表示向上滚动。表示滚动方式，包括scroll、slide、alternate，分别为普通、一次性滑动和双向交替式。

表示循环次数，默认的为无限循环，当把#值设置成-1时也表示无限循环。

表示一次滚动的距离表示两次滚动之间的延迟，以毫秒为单位。

表示将鼠标放在字幕上时，停止滚动，鼠标移开时继续滚动。普通链接

<ahref="URL"target="Window_Name">……</a>说明：（1）href="URL"表示链接的目标文件。（2）target="Window_Name"目标文件的打开窗口，默认的是在当前窗口打开，在新窗口打开为target="_blank"。普通链接注意Ⅰ如果是内部链接，则直接使用目标文件在网站中的相对地址。如果是外部链接，则一定要写上协议名称，如链接到网易，则语法为href=。Ⅱ如果将链接的地址设为mailto:电子邮件地址，则可通过单击此链接自动调用计算机默认的电子邮件程序发送E-mail。书签在网页的不同位置定位，提高了浏览效果,书签在DreamWeaver中也被称为锚点。书签在使用时，首先要定义书签，然后再设置书签链接。（1）定义书签的语法<aname="书签名称">...</a>例如：<aname=“aaa”>导航</a>，意为将文本“导航”处设置名为aaa的书签。书签（2）书签链接的语法<ahref="URL#书签名称">...</a>例如：<ahref=“index.htm#aaa”>返回导航处</a>

意为将文本“返回导航处”设置成链接，链接的目标位置为index.htm网页中的书签aaa处。如果是在本页中进行书签链接，则URL也可以省略，但#千万不能丢掉。表格表格是网页中常见的元素，设计者通常都使用表格进行网页的布局定位，由此得到的网页中的各元素显得更整齐、更美观。

主标题：表明了这个表格的主要内容；表栏：

是表格中用来存放数据的矩形区域；表头：

表示数据项所对应的名称，

数据：

就是存放在表栏中的文字、数字和图像等信息。

基本表格标记表格的始末标记为<table>…</table>，意为定义一个表格。其中表格的属性在起始标记中设定，具体包括如下属性。

属性用途<tablebgcolor="">设置表格的背景色<tableborder="">设置边框宽度，若不设置此属性，则默认值为0<tablebordercolor="">设置边框的颜色<tablebordercolorlight="">设置边框明亮部分的颜色<tablebordercolordark="">设置边框昏暗部分的颜色<tablecellspacing="">设置表格中单元格之间的距离<tablecellpadding="">设置表格中单元格边框与其内部内容之间的距离<tablewidth="">设置表格宽度，单位用绝对像素值或总宽度的百分比<tablecols="">设置表格的列数<tablerows="">设置表格的行数<tablealign=left/right/center>设置表格的对齐方式以上各个属性的设定可以结合使用，如<tablebgcolor=“#00FFFF”border=0width=“100%”>，指将表格背景色设置成浅蓝色，不显示边框，表格宽度占满整个页面。

<tr></tr>、<td></td>标记对

<tr></tr>标记对：用来创建表格中的每一行。此标记对只能放<table></table>标记对之间使用，而在此标记对之间加入文本将是无用的；<td></td>标记对：用来创建表格中一行中的每一个单元格，此标记对也只有放在<tr></tr>标记对之间才是有效的，用户想要输入的文本也只有放在<td></td>标记对中才能够显示出来。align是水平对齐方式，取值为left(左对齐)、center(居中)、right(右对齐)；valign是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)；<td>具有width、colspan、rowspan和nowrap属性。width是单元格的宽度，单位用绝对像素值或总宽度的百分比，colspan表示设置一个单元格跨占的列数(缺省值为1)，rowspan表示设置一个单元格跨占的行数(缺省值为1)，nowrap表示禁止单元格内的内容自动断行。

<tr></tr>、<td></td>标记对

<th></th>标记对

<th></th>标志对用来设置表头，通常是黑体居中文字。<caption></caption>

用于设置表格的标题，即表格上方显示的内容。2.5.6.实例图像的基本语法<imgsrc=#alt=#align=top/middle/bottom/left/right/border=#class=typeid=Valuename=valueborder=nheight=nwidth=nhspace=nvspace=n>⑴src：规定插入图像的url地址及文件名；⑵align：指定图像的位置是靠左、靠右、居中、靠上或者是靠底。默认情况下是靠上，align=top；⑶class和id：分别指定图像所属的类型和图像的id号；⑷name：设定图像的标题。⑸alt：设定图像的替代字，主要用于在浏览器还没有装入图像（或关闭图像显示）的时候，先显示有关此图像的替代字；⑹border：设定图片的边框。；⑺height和width：分别用于指定图像的高度和宽度；⑻hspace和vspace：分别用于设定图像的左右边框大小和上下边框大小。

图像热点

把图像划分成多个作用区域，并链接到不同网页的标记，那就是<area>地图作用区域标记。标记主要用于图像地图，通过该标记可以在图像地图中设定作用区域（又称为热点）<areaclass=typeid＝Valuehref＝urlalt＝textshape＝area-shapecoods＝value>

class和id是分别指定热点的类型和id号。用于设定热点的替代性文字用于设定该热点所链接的url地址shape和coords：是两个主要的参数，用于设定热点的形状和大小。1、<areashape="rect"coords="x1,y1,x2,y2"href=url>表示设定热点的形状为矩形，左上角顶点坐标为（x1,y1），右下角顶点坐标为（x2,y2）。

2、<areashape="circle"coords="x1,y1,r"href=url>

表示设定热点的形状为圆形，圆心坐标为（x1,y1），半径为r。3、<areashape="poligon"coords="x1,y1,x2,y2......"href=url>

表示设定热点的形状为多边形，各顶点坐标依次为（x1,y1）、（x2,y2）、（x3,y3）......。表单

<form></form>用来创建一个表单，具有action、method和target属性；action的值是处理程序的程序名(包括网址或相对路径)；method属性用来定义处理程序从表单中获得信息的方式，可取值为GET和POST的其中一个；target属性用来指定目标窗口或目标帧。<inputtype="…"name="…">用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在<form></form>标志对之间。共提供了八种常见的输入区域，分别为text,password,checkbox,radio,image,hidden,submit,reset；八种类型的输入区域有一个公共的属性name，此属性用于定义每一个输入区域的名称。value属性是另一个公共属性，它可用来指定输入区域的缺省值。表单

1）单行文本框和密码框

单行文字框的标志如下：<inputtype=textname=""size=""maxlength=""value="">密码框的标志如下：<inputtype=passwordname=""size=""maxlength=""value="">例2.5在网页的html状态下输入如下语言。<form><p>姓名：<inputtype="text"name="姓名"size="20"value="请在此处输入您的姓名"></p><p>密码：<inputtype="password"name="密码"size="20"></p></form>单选框和复选框

单选框的语法如下：<inputtype=radiovalue=""checkedname="">复选框的语法如下：<inputtype=checkboxvalue=""checkedname="">例2.6

<form><p>性别：男<inputtype="radio"value="男"checkedname="性别">女<inputtype="radio"name="性别"value="女"></p><p>兴趣爱好：电影<inputtype="checkbox"name="C1"value="电影"> 旅游<inputtype="checkbox"name="C2"value="旅游"> 音乐<inputtype="checkbox"name="C3"value="音乐"> 体育<inputtype="checkbox"name="C4"value="体育"></p></form>3）隐藏域

<inputtype=hiddenvalue=*>

4）图像

<inputtype=imagesrc=url>

5）按钮表单中的按钮通常有三种类型，分别为提交、重置和一般按钮。①提交按钮表示将表单内容提交给服务器，语句为<inputtype="SUBMIT">。②重置按钮表示将表单内容全部清除,重新填写，语句为<inputtype="RESET">。③一般按钮可以设置特殊指令，实现特殊效果，如下语句。<inputtype="button"name="谢谢"value="点我试试"onclick="alert('谢谢点击')">

列表框

<select></select>标记对用来创建一个下拉列表框或可以复选的列表框。此标记对用于<form></form>标记对之间。multiple属性不用赋值，直接加入标志中即可使用，加入了此属性后列表框就成了可多选式列表。若没有设置multiple属性，显示的将是一个弹出式的列表框。name是此列表框的名字。size属性用来设置列表的高度，缺省时值为1。<option>标记

用来指定列表框中的一个选项，它放在<select></select>标志对之间。Selected属性：用来指定默认的被选项；value属性：用来给<option>指定的某一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的选项的value属性来获得该区域选中的数据项。例2.7

<form><selectsize="1"name="下拉菜单"><optionvalue="北京大学"selected>北京大学</option><option>清华大学</option><option>南开大学</option><option>天津大学</option></select></form>例2.8

<form>

<selectsize="1"name="下拉菜单"multiple><optionvalue="北京大学"selected>北京大学</option><option>清华大学</option><option>南开大学</option><option>天津大学</option></select></form>多行文本框

语法为<textarea></textarea>，此标记对用于<form></form>标记对之间。<textarea>具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里列与行是以字符数为单位的。例2.9

<form><p>意见栏：</p><p><textarearows="10"name="意见栏"cols="20">您的意见对我们很重要</textarea></p></form>多媒体多媒体的种类多媒体文件多为音乐、视频、动画等，其中音乐主要属于REAL、AU、MIDI文件格式；WAV文件属于波形原始声音文件，体积相对较大，尽量不要使用；MP3文件属于压缩文件，不同的软件其兼容性不尽相同，使用时应该注意；MIDI属于合成音乐，体积较小，在网页中应用较为广泛；

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

网页设计教学PPT

文档简介

温馨提示

最新文档

评论

网页设计教学PPT

文档简介

温馨提示

最新文档

评论

相关文档