第四章-网页制作_第1页
第四章-网页制作_第2页
第四章-网页制作_第3页
第四章-网页制作_第4页
第四章-网页制作_第5页
已阅读5页，还剩52页未读， 继续免费阅读

下载本文档

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

文档简介

第四章网页制作苏雪峰本章主要内容1.静态网页与动态网页2.网页中的元素及其制作工具3.HTML基础

1.1静态网页静态网页:不含有服务器端脚本代码的网页称为“静态网页”，静态网页有五个特点：静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html等常见形式为后缀.静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件等。

静态网页的内容相对稳定，因此容易被搜索引擎检索；静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；静态网页的交互性交差，在功能方面有较大的限制.

静态网页工作原理如图所示:1.1静态网页

1.2动态网页动态网页:包含有服务器端脚本代码的网页称为“动态网页”，动态网页有五个特点:动态网页能常以.asp、.jsp

、.php

、.aspx等形式为后缀,可在文件后加”?”跟一些参数.一个服务器端的动态网页文件可生成多个网页。

动态网页通常以数据库技术为基础，可以大大降低网站维护的工作量；

动态网页不便于被搜索引擎收录,需要做一定的技术处理才能适应搜索引擎的要求.动态网页具有良好的交互性，功能强大.1.2动态网页静态网页工作原理如图所示:1.3网页制作中涉及到的技术静态网页开发技术Html、xml、xhtmlCssJavascript动态网页开发技术ASPJSPPHP.NET2.1网页中的元素网页包括的主要元素有：

文本、图像、动画、声音、视频、表格、表单等。1、文本:文本是人类最重要的信息载体和交流的工具，网页的主体一般以文本为主。文本在网页中的主要功能是显示信息和超级链接。

2.图像图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等效果。图像可以用作标题、网站标记、网页背景、链接按纽、导航条、网页主图等，网页中使用图像的格式主要有：GIF、JPEG、PNG等格式。2.1网页中的元素3.动画动画实质上就是动态的图像。在网页中使用动画可以有效地吸引浏览者的注意。由于活动的对象比静止的对象更具有吸引力，因而，网页上通常有大量的动画。网页中使用较多的动画是GIF动画和Flash动画。4.声音声音是多媒体网页的一个重要组成部分。用于网络声音文件格式非常多，常用的是MIDI、MAV、MP3和AIF等。一般来讲，不要使用声音文件作为网页的背景音乐，那样会影响网页的下载速度。2.1网页中的元素⒌视频在网页中视频文件格式也非常多，常见的有RealPlayer、MPEG、AVI和DivX、flash等。⒍表格表格是展示信息和控制页面布局的有效方式。为了达到理想的视觉效果，通常都不显示边框，我们所看到的网页如果具有横竖分明的风格，一般都是用表格来辅助布局的。2.1网页中的元素⒎表单表单是一种特殊的网页元素。表单的主要用途是：收集联系信息、接受用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录。登录的用户名、密码、搜索引擎等都是表单。表单由不同功能的表单元素组成，最简单的表单也要包含一个输入区域和一个提交按钮。站点浏览者填写表单的方式通常是输入文本、选中单选按钮和复选框，以及从下拉列表框中选择选项。根据表单功能和处理方式的不同，通常可以将表单分为用户反馈表单、流言簿表单、搜索表单和用户注册表单等类型。2.2网页以及网页元素的制作工具网页制作工具：1.FrontPage

2.Dreamweaver动画制作软件：Flash图像处理软件：FireworksPhotoshop3.1HTML概述HTML则是HyperTextMarkupLanguage（超文本标记语言）的缩写。一个HTML文件的后缀名是.htm或者是.html。一个HTML文件本质上是一个纯文本文件，可以用任何文本编辑器就可以编写HTML文件。和一般文本文件不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。HTML文件通过标记来描述文件中文本的布局和显示方式。

3.1HTML概述HTML标记一般格式：<标记名[属性名1=“属性值1”属性名2=“属性值2”…属性名n=“属性值n”]>内容</标记名>，例如带有对齐方式属性的段落标记：

<palign=“center”>这里是网页</p><标记名[属性名1=“属性值1”属性名2=“属性值2”…属性名n=“属性值n”]/>，例如带有颜色属性的水平线标记：

<hrcolor=“red”/>3.2HTML文档结构⒈文档标记

<HTML></HTML>。<HTML>标记用于HTML文档的最前面，用来标识HTML文档的开始。而</HTML>标记恰恰相反，它放在HTML文档的最后边，又来标识HTML文档的结束，两个标记必须成对使用。⒉文件头标记<head></head>。<head>和</head>构成HTML文档的开头部分，在此标记之间可以使用<title></title>、<script></script>等标记对。<head></head>标记对之间的内容是不会在浏览器的框内显示出来。两个标记必须成对使用。3.2HTML文档结构⒊文件主体标记<body></body>.<body></body>是HTML文档的主体部分，在此标记对之间可以包含<p></p>、<h1></h1>、<br/>、<hr>等众多标记。它们所定义的文本、图像等将会在浏览器的框内显示出来。⒋文件标题标记<title></title>。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的“主题”。要将网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标记对之间加如显示的文本即可。3.2HTML文档结构（举例）一个简单的HTML文件：<html><head><title>一个简单的例子</title></head><body>我的第一个网页</body></html>3.2HTML文档结构（举例）<title>一个简单的例子</title><body>我的第一个网页</body>

上述代码在浏览器中的运行效果：3.3常用的HTML标记1、标题标记

HTML语言提供了一系列对文本中的标题进行操作的标记对：<h1></h1>…<h6></h6>，一共有6对标题的标记对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，也就是说标记中h后面的数字越大标题文本就越小。如果HTML文档需要输出标题文本，就可以使用这6对标题中的任何一对。3.3常用的HTML标记（举例）标题标记使用举例<body><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body>3.3常用的HTML标记

上述代码在浏览器中的运行效果：3.3常用的HTML标记2、段落标记<p></p>标记对是用来创建一个段落,在此标记对之间加入的文本将按照段落的格式显示在浏览器上。3、换行标记<br/>是一个很简单的标记，它没有结束标记，因为它是用来创建一个回车换行的。3.3常用的HTML标记（举例）<body><p>这里是第一段，<br/>这里是回车</p><p>这里是二段</p></body>3.3常用的HTML标记4、列表标记

<oi></oi>、<ul></ul>、<li></li><ol></ol>标记对用来创建一个表有数字的列表；<ul></ul>标记对用来创建一个标有圆点的列表；<li></li>标记对只能在<ol></ol>或<ul></ul>标记对之间使用，此标记对用来创建一个列表项，若<li></li>放在<ol></ol>之间则每个列表项加上一个数字，若<li></li>放在<ul></ul>之间则每个列表项加上一个圆点。3.3常用的HTML标记（举例）<body><p>中国城市</p><ol><li>北京</li><li>上海</li><li>广州</li></ol><p>美国城市</p><ul><li>华盛顿</li><li>芝加哥</li><li>纽约</li></ul>3.3常用的HTML标记5、图像

<img/>标记并不是真正地将图像加入到HTML文档中，而是将标记对的src属性赋值,这个值是图像文件的文件名，包括路径。src属性在<img>标记中是必须赋值的，是标记中不可缺少的一部分。<img/

>标记的其它属性：alt属于是当鼠标移动到图像上时显示的文本。align是图形的对齐方式。border属性是图形的边框，可以取大于或者等于0的整数，默认单位是像素。width和height属性是图形的宽和高，默认单位是像素。3.3常用的HTML标记src属性值是图像文件的文件名，包括路径，可以是相对路径，也可以是绝对路径或网址假如HTML文件与图形文件（假设文件名为logo.gif）在同一个目录下，则可以将代码写成<img

src="logo.gif">。假如图形文件放在当前的HTML文档所在的目录的一个子目录（子目录名假设是images）下，则代码应该为<img

src="images/logo.gif">。假设图形文件放在当前的HTML文档所在的目录的上层目录（目录名假设是home）下，则相对路径就必须是准网址了。即用“../”表示网站，然后在后面紧跟文件在网站中的路径。假设home是网站下的一个目录，则代码应为<img

src="../home/logo.gif">，若home是网站下的目录king下面的一个子目录，则代码应该为<img

src="../king/home/logo.gif">了。3.3常用的HTML标记6、水平线标记<hr/>标记是在HTML文档中设置一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平的厚度。width是设置水平线的宽度、默认单位为像素。color设置水平线的颜色3.3常用的HTML标记7、表格标记（1）<table></table>标记对用来创建一个表格，下表所示的是属性。（2）<tr></tr>、<td></td><tr></tr>标记对用来创建表格的每一行。此标记对只能放在<table></table>标记对之间使用。<td></td>标记对用来创建表格中每一行中的每一个单元格，此标记对只有放在<tr></tr>标记对之间才识有效的，输入的文本也只有放在<td></td>标记对之间才有效（即才能被显示出来）。3.3常用的HTML标记<tableborder="1"><tr><td>张三</td><td>男</td><td>21</td><td>山西省太原市</td></tr><tr><td>李四</td><td>男</td><td>21</td><td>山西省晋中市</td></tr></table>3.3常用的HTML标记⑵<th></th><th></th>标记对用来设置表格头，文字通常是黑体、居中。<tableborder="1"><tr><th>姓名</th><th>性别</th><th>年龄</th><th>家庭地址</th></tr><tr><td>张三</td><td>男</td><td>21</td><td>山西省太原市</td></tr><tr><td>李四</td><td>男</td><td>21</td><td>山西省晋中市</td></tr></table>3.3常用的HTML标记<table></table>标记的属性属性用途<tablebgcolor="">设置表格的背景色<tableborder="">设置边框的宽度，若不设置宽度默认值为0<tablebordercolor="">设置边框的颜色<tablebordercolorlight="">设置边框明亮部分的颜色（当border的只大于等于1才有用）<tablebordercolordark="">设置边框昏暗部分的颜色（当border的只大于等于1才有用）<tablecellpadding="">设置表格的单元格边框与其内部内容之间空间大小<tablewidth="">设置表格的宽度，单位用绝对像素值或总宽度的百分比3.3常用的HTML标记此外，<tr>还有align和valign属性，

align是水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（右对齐）。

valign是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)、bottom(靠底部对齐)。<td>具有width、colspan、rowspan和nowrap属性width是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan设置一个表格单元格跨占的列数（缺省值为1）。rowspan设置一个表格单元格跨占的行数（缺省值为1）。nowrap禁止对表格单元格内的内容自动断行。3.3常用的HTML标记<html><hrad><title>表格标记的综合示例</title></head><body><tableborder="1"width="80%"bgcolor="#e8e8e8"cellpadding="2"bordercolor=“#3000ff"><tr><thwidth="32%"colspan="2"valign="bottom">意大利</th><thwidth="34%"colspan="2"valign="bottom">英格兰</th><thwidth="34%"colspan="2"valign="bottom">西班牙</th><tr><tdwidth="16%"align="center">AC米兰</td><tdwidth="16%"align="center">拂罗伦莎</td><tdwidth="17%"align="center">曼联</td><tdwidth="17%"align="center">纽卡斯尔</td><tdwidth="17%"align="center">巴塞罗那</td><tdwidth="17%"align="center">皇家社会</td>3.3常用的HTML标记<tr><tdwidth="16%"align="center">尤文图斯</td><tdwidth="16%"align="center">桑普多利亚</td><tdwidth="17%"align="center">利物普</td><tdwidth="17%"align="center">阿申纳</td><tdwidth="17%"align="center">皇家马德里</td><tdwidth="17%"align="center"></td><tr><tdwidth="16%"align="center">拉奇奥</td><tdwidth="16%"align="center">国际米兰</td><tdwidth="17%"align="center">切尔西</td><tdwidth="17%"align="center">米德尔斯堡</td><tdwidth="17%"align="center">马德里竞技</td><tdwidth="17%"align="center"></td></table></body></html>3.3常用的HTML标记8、超链接标记<a></a>用来在HTML文件中设置超链接,可以为文本、图像或其它对象设置超链接，标记的href属性用来设置被链接的资源。例如：<ahref=“http://”>搜孤</a>

<ahref=“http://”><img

src=“http:///img/baidu_logo.gif”></a>3.3常用的HTML标记(1)超链接指向本机中的文件的href设置格式：<ahref=“路径/文件名”>锚文本或图片</a>例如：<ahref=“SWOT分析法.htm”>SWOT分析法</a><ahref=“电子商务模式研究.doc”>电子商务模式研究(doc)</a>3.3常用的HTML标记(2)超链接指向另外一台机器上的文件的href设置，格式：<ahref=“URL”>锚文本或图片</a>URL格式：格式名：//域名(ip)/路径及文件名http:///20091105/n267990980.shtml例如：<ahref=“http://”>人人网</a><ahref=“http:///img/baidu_logo.gif”>百度图片</a>3.3常用的HTML标记(3)链接到同一页面的另一个位置的href设置这和前面两种链接稍有不同，需要先做出一个“锚点”标记，即链接的目标地，再做到“锚点”的链接。

“锚点“设置格式<aname=“锚点名”></a>超链接设置格式：

<ahref=“#锚点名">锚文本或图片</a>

3.3常用的HTML标记(4)链接到邮箱语法为<ahref=“mailto:EMAIL”>锚文本或图片</a>，这就创建了一个自动发送电子邮件的连接，mailto：后边紧跟着要自动发送的电子邮件的地址（即E-mail地址）。例如：<ahref="mailto:jmun_jsjxy@163.com">这是我的电子邮箱（E-mail）</a>3.3常用的HTML标记9、表单标记⒈创建表单标记<form></form>标记对用来创建一个表单，也就是定义表单的开始和结束位置，在标记对之间的一切都属于表单内容。<form>标记还有action、method,name属性。action的值是处理程序的程序名（包含绝对路径和相对路径），如：<formaction="http:///counter.cgi">当用户提交表单时，服务器将执行网址http:///上的名为counter.cgi的CGI程序。3.3常用的HTML标记name属性用来表示表单的名字。method属性用来定义处理程序从表单中获得信息的方式，可以取GET和POST中间的任何一个。GET方式是处理程序从当前HTML文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST方式与GET方式正好相反，它是当前的HTML文档把数据传送给处理程序，传送的数据量要比使用GET方式大得多。3.3常用的HTML标记⒉定义输入区标记<inputtype="">标记用来定义一个用户输入区，用户可以在其中输入信息。此标记必须放在<form></form>标记对之间。<inputtype="">标记中共提供了八种类型的输入区域，具体是哪一种类型由type属性来决定，这八种类型的具体内容见表1-5。3.3常用的HTML标记Type属性取值输入区域类型输入区域示例<inputtype="text"size=""maxlength="">单行的文本输入区域，size与maxlength属性用来定义此种输入区域显示尺寸大小与输入的最大字符数<inputtype="submit">将表单内容提交给服务器的按钮,value属性指定按键上的文本<inputtype="reset">将表单的内容全部清楚，重新填写按钮value属性指定按键上的文本。<inputtype="checkbox"checked="checked">一个复选框，checked属性用来设置该复选框缺省时是否被选中，右边示例使用了三个复选框3.3常用的HTML标记<inputtype="hidden">隐藏区域，用户不能在其中输入，用来预设某些要传送的信息<inputtype="image"src="URL">使用图像来代替submit按钮，图像的源文件由src属性指定，用户单击后，表单中的信息和单击位置的X、Y坐标一起传送给服务器<inputtype="password">输入密码的区域，当用户输入密码时，区域内将会显示“*”<inputtype="radio">单选框类型，radio属性表示输入项是一个单选项，右边示例中使用了三个单选项3.3常用的HTML标记3.创建列表框标记⑴<select></select><select></select>标记对用来创建一个下拉列表框或可以复选的列表框。此标记对用于<form></form>标记对之间。<select>具有multiple、name和size属性。name是此列表的名字，它与上面介绍的name属性作用是一样的。size属性用来设置用来设置列表的高度，缺省时值为1，若没有设置（加入）multiple属性，显示的将是一个弹出式的列表框。⑵.<option><option>标记是用来指定列表框的一个选项，它放在<select></select>标记对之间。此标记具有selected和value属性。Selected属性用来指定默认的选项。value属性用来给<option>指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用<select>区域的名字的value属性来获得该区域选中的数据项。3.3常用的HTML标记1.3.8表单标记HTML代码浏览器显示的结果<fromaction="cgi-bin/tongji.cgi"method="post"><p>请选择最喜欢的女歌手

:<selectname="gxl"size="1"><optionvalue="zh">祖海<optionvalue="szy"selected>宋祖英<optionvalue="hh">韩红<optionvalue="sy">孙悦</select></form><formaction="cgi-bin/tongji.cgi"method="post"><p>请选择最喜欢的男歌手

:<selectname="gxl"size="1"><optionvalue="ldh">刘德华<optionvalue="zhxy"selected>张学友<optionvalue="gfch">郭富城<optionvalue="lm">黎明</select></form>3.3常用的HTML标记4.创建文本框标记<textarea></textarea>用来创建一个可以输入多行的文本框,此标记对用于<form></form>标记对之间。<textarea>具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里的行和列是以字符为单位的，如表1-7例子所示。

HTML代码浏览器显示的结果<formaction="cgi-bin/tongji.cgi"method="post"><p>你的意见对我很重要:<textareaname="yj"cols="20"rows="5">请将意见输入此区域</textarea></form>3.3常用的HTML标记10、框架网页使用框架网页可以在一个页面中显示多个网页。<frameset></frameset>此标记对用来定义主文档中有几个网页构成并且各个网页是如何排列的。它具有rows和cols属性。rows是用来规定主文档中各个页面的行定位,而cols用来规定主文档中的各个页面的列定位。这两个属性的取值可以是百分数、绝对像素值或者“*”，其中“*”代表那些未被说明的空间。3.3常用的HTML标记示例说明<framesetrows="*,*,*">总共有三个按列排列的页面，每个页面占整个浏览器窗口是1/3<framesetcols="40%,*,*">总共有三个按行排列的页面，第一个页面占整个浏览器窗口的40%，剩下的空间平均分配给另外两个页面<framesetrows="40%,*"cols="50%,*,200">总共有六个页面，先是在第一行中从左到右排列三个页面，然后在第二行中从左到右再排列三个页面，即两行三列，所占空间依据rows和cols属性的值，其中200的单位是像素3.3常用的HTML标记⑴.<frame><frame>标记放在<frameset></fr

人人文库> 全部分类> 教育资料 > 中学教育

温馨提示

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

最新文档

评论

0/150

提交评论