网页设计与开发_第1页
网页设计与开发_第2页
网页设计与开发_第3页
网页设计与开发_第4页
网页设计与开发_第5页
已阅读5页，还剩77页未读， 继续免费阅读

下载本文档

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

文档简介

网页设计与开发lv0595@2021/5/91网页和网站网站是有独立域名、独立存放空间的内容集合（即对外发布），这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间，那怕只有一个页面也叫网站。网页是网站的组成部分。有了很多网页没有独立的域名和空间也只能说是网页。例如一个程序，尽管有很多页面，功能也齐全，但没有独立域名和空间，没对外发布，但都不能叫网站。一、概述2021/5/92网页表现形式静态网页通常是以.htm、.html、.shtml等为后缀的，它的特点是不会“变”静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难静态网页的交互性较差，功能简单，无法实现更多的功能2021/5/93网页表现形式动态网页通常是以.php、.aspx、.jsp等为后缀的，它的特点是会“变”以数据库技术为基础，大大降低网站维护的工作量可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页;2021/5/94什么是万维网

万维网的核心部分由统一资源定位器（URL）、超文本传输协议（HTTP）以及超文本标记语言（HTML）三个标准构成。

1．统一资源定位器统一资源定位器，又叫URL（UniformResourceLocator）。是专为标识Internet网上资源位置而设的一种编址方式，通常所说的网页地址指的即是URL。

2．超文本传输协议HTTP是超文本转移协议，是客户端浏览器或其他程序与Web服务器之间的应用层通信协议。在Internet上的Web服务器上存放的都是超文本信息，客户机需要通过HTTP协议传输所要访问的超文本信息。

3．超文本标记语言HTML（HyperTextMarkupLanguage）超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。2021/5/95工作原理当进入万维网上一个网页，或者其他网络资源的时候，通常你要首先在浏览器上键入想访问网页的统一资源定位器（URL），或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是URL的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个IP地址。接下来的步骤是为所要访问的网页，向在那个IP地址工作的服务器发送一个HTTP请求。在通常情况下，HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了浏览器中所看到的“网页”。

2021/5/96开发工具的选择HTML的编辑工具是比较多的，读者既可以选择最常用的基于文本的HTML编辑器（Windows自带的记事本），也可以选择一套功能强大，可取代记事本编辑器的EditPlus，还可以选择所见即所得的Dreamweaver等。2021/5/97网页制作的相关技术1．HTMLHTML（HyperTextMarkupLanguage）超文本标记语言是一种嵌入式语言。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。通过定义标记标签使浏览器解析页面并进行显示。一个HTML文件的后缀名是htm或者是html。

2．CSSCSS意思就是叠层样式表（CascadingStyleSheets），使用CSS的优点在于将格式从功能中分离出来。它定义了HTML元素的显示，是一种对web文档添加样式的简单机制。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。2021/5/98网页制作的相关技术3．JavaScriptJavaScript是由Netscape公司开发的一种脚本语言（scriptlanguage），称为描述性语言，具有面向对象的能力，可以非常自由地嵌入到HTML/XHTML文件中，从而更便捷地开发出可交互的Web网页。JavaScript是目前最为流行的客户端脚本语言，大大地增强了网页的交互性。JavaScript语法构成与C、C++、Java类似，都包括if语句、while循环、分支选择以及运算等结构，但也仅是在语法上的相似。2021/5/99网页元素单位相对长度单位px：像素是相对于显示器屏幕分辨率而言em：相对于当前对象内文本的字体尺寸绝对长度单位cm：厘米mm：毫米in：英寸2021/5/910HTML文档结构HTML（HyperTextMarkupLanguage）超文本标记语言是一种嵌入式语言。通过定义标记标签使浏览器解析页面并进行显示。一个HTML4.01的文档结构包括以下几部分：

DOCTYPE声明定义文档类型。

HTML头元素信息。

HTML正文信息（body标签内信息）。二、初识HTML2021/5/911声明定义文档类型

在HTML4.01中提供了三种DTD文档：严格型HTML4.01DTD文档不包括那些不被推荐的元素和属性，并且不能在带有frameset的页面中出现。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/strict.dtd">

过渡型HTML4.01DTD文档包含所有严密型DTD文档中所允许的内容，还可以使用那些不被推荐的元素以及属性。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">

框架型HTML4.01DTD文档包含过渡型以及框架。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/frameset.dtd">2021/5/912

HTML头元素信息

HTML文档的head元素中包含了meta元素，meta元素用来指定有关这个文档的相关信息。例如：

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">用http—equiv、content、charset描述页面的内容。meta

元素的属性有两种：http-equiv和name

。2021/5/913什么是标签

大多数HTML文档的标签都是由开始标签和结束标签进行界定（开始标签和结束标签成对出现），结束标签是以斜线开头（/），例如<html>……</html>中</html>为结束标签。每一个标签都是由尖括号（<>）包围。有单向标签和双向标签单向标签：br、hr、img等三、标签2021/5/914标签的属性标签可以拥有属性，属性可以为页面中的HTML元素提供附加信息。属性被放置在标签的后面，但在最终括号（>）的前面，即属性应该添加在HTML元素里的起始标签中。例如：<bodybgcolor=“red">2021/5/915标签的嵌套HTML标签经常使用嵌套的方式，所谓的嵌套是指一个HTML标签包含另外一个标签的情况。例如：<html><head><title>标题</title></head><body>

显示的内容</body></html>2021/5/916HTML基本标签HTML基本标签包括:标题标签h1、段落标签p、换行标签br、水平分割标签hr、部分标签div、注释标签、字体标签font。部分标签<div>最早在HTML3.2标准中定义，可以将文档分割成独立的、不同的部分。在<div>标签中定义的文本内容，实际上与没有在<div>标签中定义的没有什么区别，但要是引入了align属性，<div>标签就变的十分有用了（用来设置段落或标题的对齐方式）。和其他编程语言一样，HTML也提供了代码注释的方式（<!--这是注释的部分-->，作为一个程序员应该养成对代码注释的习惯，这样可以保持清晰的思路。浏览器不显示注释的部分。2021/5/917文字格式化

常见的文字格式化标签如下表。2021/5/918字体设置在HTML中，字体标签（font）通过其属性来设置文本字体、字体大小和字体颜色。字体标签的属性如下表。colorcolorcolorcolor2021/5/919无序列表所谓无序列表就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈、方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰，更合理。当创建一个无序列表时，主要使用用HTML的<ul>标签和<li>标签来标记。其中<ul>标签标识一个无序列表的开始；<li>标签标识一个无序列表项。基本语法结构为：<ul> <li>项目名称</li> <li>项目名称</li> <li>项目名称</li> <li>项目名称</li></ul>四、列表2021/5/920有序列表有序列表与前面介绍的无序列表正好相反，所谓有序列表就是列表项的前导符号是有序的符号标识的列表。有序的符号标识包括：阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数字。基本语法结构为：<oltype=""> <li>项目名称</li> <li>项目名称</li> <li>项目名称</li></ol><ol>标签的type属性用来定义一个有序列表的前导字符，如果省略了type属性，浏览器会默认显示为“1”前导字符。type取值为1（阿拉伯数字）、a（小写英文字母）、A（大写英文字母）、i（小写罗马数字）、I（大写罗马数字）2021/5/921图片的使用HTML和XHTML的一个重要特性就是可以在文本中加入图片，既可以把图片作为文档的内在对象加入，又可以通过超级链接的方式加入，同时还可以将图片作为背景加入到文档中。在文档中合理地使用图片会使浏览器显示的网页更活泼、引人入胜。五、图片2021/5/922在页面中插入图片

在HTML中，用<img>标签在网页中添加图片。图片是以嵌入的方式添加到网页中的。网页开发者可以通过多种方式获取网页设计中用到的图片，可以将现有的图片扫描到计算机内、从Internet上的Web站点获取以及通过制图软件自己动手制作。如果是“引用”的图片，一定要得到图片版权拥有者的同意才可使用。在页面中插入图片的语法：<imgsrc="url">2021/5/923替换文本说明

有时，由于网络过忙或者用户在图片还没有下载完全就点击了浏览器的停止键，用户不能在浏览器中看到图片，这时替换文本说明就十分有必要了。替换文本说明应该简洁而清晰，能为用户提供足够的图片说明信息，在无法看到图片的情况下也可以了解图片的内容信息。例如：<imgsrc="images/logo_cn.png"alt="这是谷歌中国的logo">2021/5/924调整图片大小

在HTML中，通过img标签的属性width和height来调整图片大小，其目的是通过指定图片的高度和宽度加快图片的下载速度。如果不设置width和height属性，浏览器就要等到图片下载完毕才显示网页，因此延缓了其它页面元素的显示。例如：<imgsrc="images/logo_cn.png"border="2"width="130"height="50">2021/5/925设置背景图片

背景属性将背景设置为图片。属性值为图片的URL。如果图片尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。例如：<bodybackground="images/background.png">2021/5/926添加背景颜色

使用body标签的bgcolor属性可以给HTML页面指明背景颜色。其值可以是16进制数、RGB值或者是颜色的名称。例如：<bodybgcolor="#FF0000

"><bodybgcolor="rgb(255,0,0)"><bodybgcolor="red">2021/5/927HTML使用<a>标签来建立一个链接，通常<a>标签又称为锚。一个超级链接可以指向任意一个Web上的资源（一个HTML页面，一张图片，一段声音文件，一部电影等）。创建超级链接的基本语法格式：<ahref=“url”>这是要链接的站点(文字、图片)</a>在<a>和</a>标签之间的文本文字，用户可以单击该文字来实现网页的浏览访问。六、超级链接2021/5/928同一页面内的书签链接

当网页的页面较长，且该页面是由几个部分组成时，不得不拖动浏览器的滑动条查看信息，这样既麻烦又费时。HTML恰好提供了跳转功能，能够非常方便、快捷地实现从网页当前的部分跳转到同一网页的另一部分。建立书签语法：

<aname=”书签名称”>链接内容</a>创建书签链接语法：

<ahref=”#书签名称”target=”窗口名称”>链接标题<a>2021/5/929不同页面间的书签链接

书签链接还可以在不同页面间进行链接。当单击书签链接标题，页面会根据链接中的href属性所以定的地址，将网页跳转到目标地址中书签名称所表示的内容。建立书签语法：

<aname=”书签名称”>链接内容</a>创建书签链接语法：

<ahref=”URL地址#书签名称”target=”窗口名称”>链接标题<a>2021/5/930超级链接路径超级链接标签<a>的属性“href”定义了当前链接所指的目标地址，也就是超级链接路径。在HTML中，主要提供了2种路径：绝对路径和相对路径。2021/5/931绝对路径

绝对路径就是主页上的文件或目录在硬盘上真正的路径（URL和物理路径）。例如，C:\xyz\index.html代表了index.html文件的物理绝对路径；/index.html代表了一个URL绝对路径。2021/5/932相对路径相对路径就是相对与某个基准目录的路径。相对路径适合于创建网站内部链接。它是以当前文件所在的路径为起点，进行相对文件的查找。

1．同一级目录的文件链接假设1.html路径是：c:\Inetpub\wwwroot\sites\admin\1.html假设2.html路径是：c:\Inetpub\wwwroot\sites\admin\2.html1.html文件和2.html文件在同一个文件夹，1.html文件链接到2.html文件，可以在1.html中写成：<ahref=”2.html”>同级目录文件链接</a>2．上级目录的文件链接假设1.html路径是：c:\Inetpub\wwwroot\sites\1.html假设2.html路径是：c:\Inetpub\wwwroot\sites\admin\2.html1.html文件是2.html文件的上一级目录的文件，2.html文件链接到1.html文件，可以在2.html中写成：<ahref=”../1.html”>1.html</a>2021/5/933相对路径假设1.html路径是：c:\Inetpub\wwwroot\1.html假设2.html路径是：c:\Inetpub\wwwroot\sites\admin\2.html1.html文件是2.html文件的上两级目录中的文件，2.html文件链接到1.html文件，可以在2.html中写成：<ahref="../../1.html">1.html</a>假设1.html路径是：c:\Inetpub\wwwroot\sites\admin\1.html假设2.html路径是：c:\Inetpub\wwwroot\sites\reg\2.html1.html文件和2.html分别在c:\Inetpub\wwwroot\sites\目录下的admin和reg两个文件夹内，1.html文件链接到2.html文件，可以在1.html中写成：<ahref="../reg/2.html">2.html</a>2021/5/934相对路径3．下级目录的文件链接假设1.html路径是：c:\Inetpub\wwwroot\sites\1.html假设2.html路径是：c:\Inetpub\wwwroot\sites\admin\2.html2.html文件是1.html文件的下一级目录的文件，1.html文件链接到2.html文件，可以在1.html中写成：<ahref=”admin/2.html”>2.html</a>假设1.html路径是：c:\Inetpub\wwwroot\sites\1.html假设2.html路径是：c:\Inetpub\wwwroot\sites\admin\user\2.html2.html文件是1.html文件的下两级目录的文件，1.html文件链接到2.html文件，可以在1.html中写成：<ahref=”admin/user/2.html”>2.html</a>2021/5/935七、表格

主要内容：表格的构成设置表格背景设置表格表头设置表格大小设置表格数据对齐方式cellspancing与cellpadding属性横跨行和列添加表格高级标签使用表格进行网页布局2021/5/9367.1表格简介表格在网站开发中应用广泛，几乎多有的HTML页面或多或少地采用了表格。表格可以灵活地控制页面的排版，使整个页面层次清晰。学好网页制作，熟练掌握表格的各种属性是很有必要的。2021/5/937表格标记

基本标签:table定义一个表格

tr定义表格中的行

td定义表格中的数据

基本语法：<table><tr><td>…</td>┇</tr>┇</table>2021/5/938表格边框

可以使用table标签的border属性为表格添加边框并设置表格边框宽度，表格的边框按照数据单元将表格分割成单元格，边框的宽度以像素为单位。可以通过bordercolor属性为边框添加颜色，其颜色值可以是rgb(x,x,x)、16进制颜色值或代表颜色值的颜色名称。2021/5/939表格表头

表头是指表格的第一行或第一列对该列或该行的表格内容进行说明。表头的文字样式为居中、加粗显示，通过<th>标签实现。基本语法：<table><tr><th>…</th>┇</tr>┇</table>2021/5/9407.2表格背景

表格可以添加背景颜色和背景图片，使用表格背景颜色或背景图片必须使表格中的文本数据颜色与表格的背景颜色或背景图片形成足够的反差。否则，将不容易分辩表格中的文本数据。2021/5/941设置表格背景

可以使用bgcolor属性设置表格的背景颜色，其值可以是rgb(x,x,x)、#xxxxxx或颜色名（colorname）。例如：<tableborder="1"bgcolor="red">

或<tableborder="1"background="images/background.png"> 2021/5/942设置表格单元背景

可以通过bgcolor属性和background属性为表格中的单元格添加背景颜色或背景图片。2021/5/9437.3表格大小

设置表格大小：如果需要表格在网页中占用适当的空间，可以通过width和height属性指定像素值来设置表格的宽度和高度，也可以通过表格宽度占浏览器窗口的百分比来设置表格的大小。方法如下：

<tableborder="1"width="300"height="120">

设置单元格大小：width属性和height属性不但可以设置表格的大小，还可以设置表格单元格的大小，为表格单元设置width属性或height，将影响整行或整列单元的大小。例如：<tr><thwidth="100"height="30">汽车名称</th><thwidth="100"height="30">价格范围</th><thwidth="100"height="30">级别</th></tr>2021/5/9447.4对齐方式

表格的对齐方式包括：行数据水平对齐单元格数据水平对齐行数据垂直对齐单元格数据垂直对齐align属性和valign属性混合使用2021/5/945设置表格对齐方式

使用align属性设置表格在网页中的对齐方式，在默认的情况下表格的对齐方式为左对齐。设置方法为：<tableborder="1"align="right|center|right">

这里align的值为left、center、right。将表格的对齐方式设置成右对齐，则表格的右边框自动地向浏览器右边框对齐。2021/5/946设置表格数据对齐方式

1．行数据水平对齐使用align可以设置表格中数据的水平对齐方式，如果在<tr>标签中使用align属性，将影响整行数据单元的水平对齐方式。align属性的值可以是left、center、right，它的默认值为left。

2．单元格数据水平对齐如果在某个<td>标签中使用align属性，那么align属性将影响一个表格单元数据水平对齐方式。

3．行数据垂直对齐如果在<tr>标签中使用valign属性，那么valign属性将影响整行数据单元的垂直对齐方式，这里的valign值可以是top、middle、bottom、baseline。它的默认值是middle。2021/5/947设置表格数据对齐方式

4．单元格数据垂直对齐如果在某个<td>标签中使用valign属性，那么valign只影响当前表格单元数据垂直对齐方式。

5．align属性和valign属性混合使用align属性和valign属性除了上述用法外，有时在格式化表格单元数据时需要align属性和valign属性混合使用。2021/5/9487.5表格单元格的边距改变表格单元格间距离和单元格内的数据填充距离可以通过table标签的cellspancing与cellpadding属性实现。

cellspancing属性用来添加表格单元格之间的间距（以像素为单位或表格宽度百分比）。

cellpadding属性用来添加表格单元格内数据填充间距（以像素为单位或表格宽度百分比）。2021/5/9497.6横跨行和列横跨列是指一个表格单元格横跨多列；横跨行是指一个表格单元格横跨多个行。表格横跨行和列属性，有时横跨行和列又称为合并单元格。表格横跨行和列属性：colspan=“…”指明该单元格应有多少列的跨度，在th和td标签中使用。rowspan=“…”指明该单元格应有多少行的跨度，在th和td标签中使用。2021/5/9507.7表格的高级标签使用表格的高级标签可以为表格中相似的区域添加边界，在表格标题上添加行或文本格式信息，定义表格的脚标等。表格的高级标签如下：

thead定义表格的标题区域。

tbody定义表格的主题区域。

tfoot定义表格的脚标区域。

colgroup定义表格的列组。

col为表格中的一个或多个列定义属性值。只能在表格或colgroup里使用这个元素。2021/5/9517.8使用表格进行网页布局使用个非HTML时一常普遍的应用就是用HTML表格功能给网页进行布局。下图就是利用HTML表格对网页进行布局的效果，此布局定义了两个表格，上下各一个表格，将这两个表格的border值设置为0。如果将border值设置为1，则很容易看出此页面的表格布局。2021/5/952八、表单

主要内容：创建单行文本框创建口令文本框创建提交与复位按钮创建单选按钮与复选按钮创建多行文本框创建下拉框上传文件处理表单定义域集合使用Tab键与快捷键

2021/5/9538.1单行文本框一个表单是一块可以含有表单元素的区域，可以使用<form>标签在网页中创建表单。例如：<form><inputtype="text"name=""size=“"maxlength=“"></form>2021/5/9548.2口令文本框在进行网上注册的时候，用户使用的是提交用户名和口令的表单。口令文本框隐藏了当前要填写的内容，使信息更加保密。例如：<form><inputtype="password"name=""size=""maxlength=""></form>2021/5/9558.3提交与复位按钮使用提交按钮（submit）可以将填写在文本框中的内容发送到服务器，复位按钮（Reset）使表单文本框的内容返回初始值。例如：

<inputtype="submit"value="Submit"><inputtype="reset"value="Reset">2021/5/9568.4单选按钮与复选框按钮单选按钮允许用户从选择列表中选择一个单项的输入字段类型。当type=“radio”是表示该输入是一个单选按钮。复选按钮允许用户从选择列表中选择一个或多个选项的输入字段类型。当type=“checkbox”是表示该输入是一个复选按钮。2021/5/9578.5多行文本框多行文本框是在表单中应用比较广泛的文本输入区域。多行文本框主要用于得到用户的评论和一些反馈信息，用户可以在里面书写文字，字数没有限制。默认的字体是固定的。可以通过<textarea>标签创建多行文本。textarea标签的属性：Cols指定文本区域的列数。Row指定文本区域的行数。Disabled第一次加载的时候文字区域不可用。Readonly将文本区域的内容设置为不可修改（可选属性）。Name：指定文本区域的名称（可选属性）。2021/5/9588.6下拉框如果一个列表选项过长，可以考虑使用下拉框。下拉框可以使用户选择其中的一个选项，在选择列表中仅有一个是可选项，单击右边下拉按钮便可进行选项的选择。下拉框通过select标签、option标签来定义。其属性如下表。2021/5/9598.7处理表单通常情况下，用户通过submit按钮来提交表单，收集的信息发送到Web服务器上。这一过程通过HTML文档中action属性指定所收集的信息发送到哪里。如何处理信息，可以通过form标签的特殊属性实现。处理表单的通用语法模式：<formaction=""method=""></form>2021/5/9608.8定义域集合在设计网页时，如果表单中包含多个控件，可以通过<fieldset>标签将相关主题的控件或标签组合在一起（定义域集合），这样使网页中的表单分布更合理、结构更清晰，从而增加了网页的易读性；同时也有利于tab键在元素之间的移动。在定义表单的域集合时，往往要用<legend>标签为fieldset设置标题，还可以使用align属性设置标题的对齐方式。

<fieldset><legend>用户信息</legend>姓名：<inputtype="text"size="5"/>年龄：<inputtype="text"size="5"/>性别：<inputtype="text"size="5"/>籍贯：<inputtype="text"size="5"/></fieldset>2021/5/9618.9使用Tab键与快捷键1.使用Tab键浏览者可以通过使用Tab键在表单的各个组件之间移动。默认情况下，Tab键的移动顺序为顺序移动。可以通过tabindex属性来实现。例如：<formmenthod="post"action=“">姓名：<inputtype="text"size="4"tabindex="1"/>年龄：<inputtype="text"size="4"tabindex="3"/>性别：<inputtype="text"size="4"tabindex="4"/>籍贯：<inputtype="text"size="4"tabindex="2"/></form>2.快捷键可以通过accesskey属性给HTML中的元素指定一个快捷方式，指定方法如下：<formaction="……"menthod=""><inputtype="text"size="4"accesskey="F"></form>2021/5/962九、多媒体

主要内容：会滚动的文字音乐创建视频2021/5/9639.1会滚动的文字滚动文字可以增加文字的动态效果，引起浏览者的注意，丰富页面的内容。2021/5/964创建滚动文字标签使文字在网页中动态地滚动好像只是flash的专利，其实则不然，可以通过HTML的<marquee>同样能够达到文字在网页中移动的效果。但是<marquee>只适用于InternetExplorer，<marquee>并不是标准标签，这里并不推荐使用这个扩展标签。例如：<marquee>这是会滚动的文字！！！！</marquee>

2021/5/965设置滚动文字的属性

滚动文字的属性用来控制文字的移动方向、滚动方式、文字滚动速度以及移动文字的外观等多个属性。常见的属性有direction、scrollamount、align、bgcolor等。

1．设置文字滚动的方向可以通过direction属性来设置文字滚动的方向，该属性有left、right属性值，left为默认属性值，在不设置direction属性时文字的滚动顺序为从右向左移动。

2．设置滚动文字速度<scrollamount>与<scrolldelay>属性用来控制滚动文字的速度。scrollamount属性用来设置滚动过程中文字每次移动的像素数，当scrollamount取值较小时，文字滚动的较慢；反之文字滚动较快。scrolldelay属性用来设置文字移动的延迟，以毫秒为单位。值越小，文字滚动的越快（文字滚动速度与计算机的处理能力有关）。2021/5/966设置滚动文字的属性3．设置滚动文字字幕区域使用height和width属性设置滚动文字字幕区域大小，在默认情况下，滚动文字字幕区域为整个IE浏览器屏幕。这两个属性值可以取绝对的像素数，也可以取相对的百分比。2021/5/9679.2背景音乐为网页添加背景音乐的方法一般有三种，第一种是通过普通的<bgsound>标签来添加，一种是通过<embed>标签来添加,还有一种直接建立声音的链接。2021/5/968嵌入背景音乐1.<bgsound>标签InternetExplorer自带了一个内置音频解码器，支持特殊的标签<bgsound>，该标签可以把声音文件集成到文档中，在后台作为背景音乐播放。基本语法：<bgsoundsrc="">2.<embed>标签embed可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等等。基本语法：<embedsrc=url>

3.建立声音的链接在设计网页的时候可以创建一个背景音乐的链接，单击网页上的链接后，就会播出背景音乐。当建立声音链接时，提倡使用万维网上的音频格式。建立声音的链接方法如下：<ahref="music/springbreeze.rm">点击播放音乐"春风"</a>2021/5/9699.3创建视频在网页中创建视频与创建音频的方法基本相同，可以通过创建一个视频的链接实现视频在网页中的加载。当浏览者选中视频连接时，浏览器将播放该视频。如果浏览器不能播放该视频格式，则会自动打开本地计算机上已安装支持该格式的视频播放器软件。如果本地计算机上没有安装所需的视频播放软件，则浏览器会提示浏览者是否要保存该视频文件到本地的计算机上。2021/5/970创建内部视频

1．使用<embed>标签创建视频所谓内部视频就是视频文件可以直接在网页中播放。可以通过<embed>标签创建内部视频。创建方法如下：<embedsrc="musicspringbreeze.rm"width="250"height="180">2．使用<img>标签创建视频一些网页设计者利用<img>标签的dynsrc属性在网页内部添加视频文件。dynsrc属性用来指定视频文件所在位置。例如：<imgdynsrc="eclipse.avi">2021/5/97111CSS语法基础CSS意思就是叠层样式表（CascadingStyleSheets），使用CSS的优点在于将格式从功能中分离出来。它定义了HTML元素的显示，是一种对web文档添加样式的简单机制。

主要内容：CSS定义CSS语法CSS类型伪类与为元素2021/5/97211.1理解CSS1．基本语法

CSS规则由选择器（selector）、属性（property）和值（value）三部分组成。基本格式如下：selector{property:value}2．组合为了提高效率，可以将相同属性和值赋给多个选择器，并用逗号将选择器分开。例如：h1,h2,h3,h4,h5,h6{color:blue}2021/5/97311.1理解CSS3．选择器类选择器类可以将同一类型的HTML元素定义出不同的样式。例如：<styletype="text/css">p.right{text-align:right}p.center{text-align:center}</style><pclass="right">居右显示。</p><pclass="center">居中显示。</p>4．ID选择器可以使用id选择器来定义HTML标签的样式。id选择器可用“#”来定义。例如：p#idone{text-align:center;color:blue}或#idone{text-align:cent

人人文库> 全部分类> 应用文书 > 研究报告

温馨提示

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

最新文档

评论

0/150

提交评论