第四章_网页制作ppt课件

.,第四章网页制作,苏雪峰,本章主要内容,1.1静态网页,静态网页:不含有服务器端脚本代码的网页称为“静态网页”，静态网页有五个特点：静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html等常见形式为后缀.静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件等。静态网页的内容相对稳定，因此容易被搜索引擎检索；静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；静态网页的交互性交差，在功能方面有较大的限制.,静态网页工作原理如图所示:,1.1静态网页,1.2动态网页,动态网页:包含有服务器端脚本代码的网页称为“动态网页”，动态网页有五个特点:动态网页能常以.asp、.jsp、.php、.aspx等形式为后缀,可在文件后加”?”跟一些参数.一个服务器端的动态网页文件可生成多个网页。动态网页通常以数据库技术为基础，可以大大降低网站维护的工作量；动态网页不便于被搜索引擎收录,需要做一定的技术处理才能适应搜索引擎的要求.动态网页具有良好的交互性，功能强大.,1.2动态网页,静态网页工作原理如图所示:,1.3网页制作中涉及到的技术,静态网页开发技术Html、xml、xhtmlCssJavascript动态网页开发技术ASPJSPPHP.NET,2.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.FrontPage2.Dreamweaver动画制作软件：Flash图像处理软件：FireworksPhotoshop,3.1HTML概述,HTML则是HyperTextMarkupLanguage（超文本标记语言）的缩写。一个HTML文件的后缀名是.htm或者是.html。一个HTML文件本质上是一个纯文本文件，可以用任何文本编辑器就可以编写HTML文件。和一般文本文件不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。HTML文件通过标记来描述文件中文本的布局和显示方式。,3.1HTML概述,HTML标记一般格式：内容，例如带有对齐方式属性的段落标记：这里是网页，例如带有颜色属性的水平线标记：,3.2HTML文档结构,文档标记。标记用于HTML文档的最前面，用来标识HTML文档的开始。而标记恰恰相反，它放在HTML文档的最后边，又来标识HTML文档的结束，两个标记必须成对使用。文件头标记。和构成HTML文档的开头部分，在此标记之间可以使用、等标记对。标记对之间的内容是不会在浏览器的框内显示出来。两个标记必须成对使用。,3.2HTML文档结构,文件主体标记.是HTML文档的主体部分，在此标记对之间可以包含、等众多标记。它们所定义的文本、图像等将会在浏览器的框内显示出来。文件标题标记。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的“主题”。要将网页的主题显示到浏览器的顶部其实很简单，只要在标记对之间加如显示的文本即可。,3.2HTML文档结构（举例）,一个简单的HTML文件：一个简单的例子我的第一个网页,3.2HTML文档结构（举例）,上述代码在浏览器中的运行效果：,3.3常用的HTML标记,1、标题标记HTML语言提供了一系列对文本中的标题进行操作的标记对：，一共有6对标题的标记对。是最大的标题，而则是最小的标题，也就是说标记中h后面的数字越大标题文本就越小。如果HTML文档需要输出标题文本，就可以使用这6对标题中的任何一对。,3.3常用的HTML标记（举例）,标题标记使用举例这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题,3.3常用的HTML标记,上述代码在浏览器中的运行效果：,3.3常用的HTML标记,2、段落标记标记对是用来创建一个段落,在此标记对之间加入的文本将按照段落的格式显示在浏览器上。3、换行标记是一个很简单的标记，它没有结束标记，因为它是用来创建一个回车换行的。,3.3常用的HTML标记（举例）,这里是第一段，这里是回车这里是二段,3.3常用的HTML标记,4、列表标记、标记对用来创建一个表有数字的列表；标记对用来创建一个标有圆点的列表；标记对只能在或标记对之间使用，此标记对用来创建一个列表项，若放在之间则每个列表项加上一个数字，若放在之间则每个列表项加上一个圆点。,3.3常用的HTML标记（举例）,中国城市北京上海广州美国城市华盛顿芝加哥纽约,3.3常用的HTML标记,5、图像标记并不是真正地将图像加入到HTML文档中，而是将标记对的src属性赋值,这个值是图像文件的文件名，包括路径。src属性在标记中是必须赋值的，是标记中不可缺少的一部分。标记的其它属性：alt属于是当鼠标移动到图像上时显示的文本。align是图形的对齐方式。border属性是图形的边框，可以取大于或者等于0的整数，默认单位是像素。width和height属性是图形的宽和高，默认单位是像素。,3.3常用的HTML标记,src属性值是图像文件的文件名，包括路径，可以是相对路径，也可以是绝对路径或网址假如HTML文件与图形文件（假设文件名为logo.gif）在同一个目录下，则可以将代码写成。假如图形文件放在当前的HTML文档所在的目录的一个子目录（子目录名假设是images）下，则代码应该为。假设图形文件放在当前的HTML文档所在的目录的上层目录（目录名假设是home）下，则相对路径就必须是准网址了。即用“./”表示网站，然后在后面紧跟文件在网站中的路径。假设home是网站下的一个目录，则代码应为，若home是网站下的目录king下面的一个子目录，则代码应该为了。,3.3常用的HTML标记,6、水平线标记标记是在HTML文档中设置一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平的厚度。width是设置水平线的宽度、默认单位为像素。color设置水平线的颜色,3.3常用的HTML标记,7、表格标记（1）标记对用来创建一个表格，下表所示的是属性。（2）、标记对用来创建表格的每一行。此标记对只能放在标记对之间使用。标记对用来创建表格中每一行中的每一个单元格，此标记对只有放在标记对之间才识有效的，输入的文本也只有放在标记对之间才有效（即才能被显示出来）。,3.3常用的HTML标记,张三男21山西省太原市李四男21山西省晋中市,3.3常用的HTML标记,标记对用来设置表格头，文字通常是黑体、居中。,姓名性别年龄家庭地址张三男21山西省太原市李四男21山西省晋中市,3.3常用的HTML标记,标记的属性,3.3常用的HTML标记,此外，还有align和valign属性，align是水平对齐方式，取值为left(左对齐)、center（居中对齐）、right（右对齐）。valign是垂直对齐方式，取值为top(靠顶端对齐)、middle(居中间对齐)、bottom(靠底部对齐)。具有width、colspan、rowspan和nowrap属性width是单元格的宽度，单位用绝对像素值或总宽度的百分比。colspan设置一个表格单元格跨占的列数（缺省值为1）。rowspan设置一个表格单元格跨占的行数（缺省值为1）。nowrap禁止对表格单元格内的内容自动断行。,3.3常用的HTML标记,表格标记的综合示例意大利英格兰西班牙AC米兰拂罗伦莎曼联纽卡斯尔巴塞罗那皇家社会,3.3常用的HTML标记,尤文图斯桑普多利亚利物普阿申纳皇家马德里.拉奇奥国际米兰切尔西米德尔斯堡马德里竞技.,3.3常用的HTML标记,8、超链接标记用来在HTML文件中设置超链接,可以为文本、图像或其它对象设置超链接，标记的href属性用来设置被链接的资源。例如：搜孤,3.3常用的HTML标记,(1)超链接指向本机中的文件的href设置格式：锚文本或图片例如：SWOT分析法电子商务模式研究(doc),3.3常用的HTML标记,(2)超链接指向另外一台机器上的文件的href设置，格式：锚文本或图片URL格式：格式名：/域名(ip)/路径及文件名,3.3常用的HTML标记,(3)链接到同一页面的另一个位置的href设置这和前面两种链接稍有不同，需要先做出一个“锚点”标记，即链接的目标地，再做到“锚点”的链接。“锚点“设置格式超链接设置格式：锚文本或图片,3.3常用的HTML标记,(4)链接到邮箱语法为锚文本或图片，这就创建了一个自动发送电子邮件的连接，mailto：后边紧跟着要自动发送的电子邮件的地址（即E-mail地址）。例如：这是我的电子邮箱（E-mail）,3.3常用的HTML标记,9、表单标记创建表单标记标记对用来创建一个表单，也就是定义表单的开始和结束位置，在标记对之间的一切都属于表单内容。标记还有action、method,name属性。action的值是处理程序的程序名（包含绝对路径和相对路径），如：当用户提交表单时，服务器将执行网址,3.3常用的HTML标记,name属性用来表示表单的名字。method属性用来定义处理程序从表单中获得信息的方式，可以取GET和POST中间的任何一个。GET方式是处理程序从当前HTML文档中获取数据，然而这种方式传送的数据量是有所限制的，一般限制在1KB以下。POST方式与GET方式正好相反，它是当前的HTML文档把数据传送给处理程序，传送的数据量要比使用GET方式大得多。,3.3常用的HTML标记,定义输入区标记标记用来定义一个用户输入区，用户可以在其中输入信息。此标记必须放在标记对之间。标记中共提供了八种类型的输入区域，具体是哪一种类型由type属性来决定，这八种类型的具体内容见表1-5。,3.3常用的HTML标记,3.3常用的HTML标记,3.3常用的HTML标记,3.创建列表框标记标记对用来创建一个下拉列表框或可以复选的列表框。此标记对用于标记对之间。具有multiple、name和size属性。name是此列表的名字，它与上面介绍的name属性作用是一样的。size属性用来设置用来设置列表的高度，缺省时值为1，若没有设置（加入）multiple属性，显示的将是一个弹出式的列表框。,.标记是用来指定列表框的一个选项，它放在标记对之间。此标记具有selected和value属性。Selected属性用来指定默认的选项。value属性用来给指定的那一个选项赋值，这个值是要传送到服务器上的，服务器正是通过调用区域的名字的value属性来获得该区域选中的数据项。,3.3常用的HTML标记,1.3.8表单标记,3.3常用的HTML标记,4.创建文本框标记用来创建一个可以输入多行的文本框,此标记对用于标记对之间。具有name、cols和rows属性。cols和rows属性分别用来设置文本框的列数和行数，这里的行和列是以字符为单位的，如表1-7例子所示。,3.3常用的HTML标记,10、框架网页使用框架网页可以在一个页面中显示多个网页。此标记对用来定义主文档中有几个网页构成并且各个网页是如何排列的。它具有rows和cols