网页设计与制作项目式PPT模块二_第1页
网页设计与制作项目式PPT模块二_第2页
网页设计与制作项目式PPT模块二_第3页
网页设计与制作项目式PPT模块二_第4页
网页设计与制作项目式PPT模块二_第5页
已阅读5页，还剩27页未读， 继续免费阅读

下载本文档

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

文档简介

模块二使用标记语言制作网页

学习目标1、掌握HTML的文档结构2、掌握给文字或图片添加链接的方法。2、熟悉表格在网页中的运用3、了解XHTML的基本知识任务1使用HTML创建简单的网页任务导入本任务是通过了解HTML文件的基本结构、常用标记的使用方法，使用HTML制作一个简单的网页，如图2-1所示。知识指导HTML（HypertextMarkupLanguage）是超文本标记语言的英文缩写，它是一种建立网页文件的语言，通过标记，将影像、声音、图片、文字等显示出来。HTML网页文件可以使用记事本、写字板或后面介绍的Dreamweaver等编辑工具来编写，以.htm或.html为文件后缀名保存。一.HTML文档的结构HTML的结构包括头部（head）、主体（body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。二．HTML的结构标记1．<html>和</html>标记

一个HTML文档必须用<html>标记开始，并用</html>标记结尾。2．<head>和</head>标记<head>…</head>标记之间的内容是HTML文档的头部，用来放置有关网页的信息，如标题等。3．<body>和</body>标记

在<body>…</body>标记之间是网页的主体内容，包括文本、链接、图像及其他媒体内容。每个文档只能有一个<body>，在</head>之后。4．<title>和</title>标记

在<title>…</title>标记之间定义文件的标题，浏览器会以特殊的方式来显示标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。三．常用的格式标记1．<p>和</p>标记<p>…</p>标记用来创建段落，在此标记之间加入的文本将按照段落的格式显示在浏览器中。<p>标记的可选属性align，用来说明段落的对齐方式，其值有3个，分别是：left（左对齐）、center（居中）和right（右对齐）。2．<br>标记<br>是一个很简单的标记，它没有结束标记，用它来创建一个回车换行。3．<h#>和</h#>标记HTML语言提供了一系列对文本中的标题进行操作的标记对，其中#代表数字1到6的任意一个。<h1>…</h1>是最大的标题，而<h6>…</h6>则是最小的标题。如果在HTML文档中需要输出标题文本，可以使用这6对标题标记对中的任何一对。4．<ul>、</ul>，<ol>、</ol>和<li>、</li>标记<ul>…</ul>标记用来标记无序列表的开始和结束，无序列表中各个列表项都没有顺序可言。<ol>…</ol>标记用来标记有序列表的开始和结束，其中的列表项不用设置就可以自动按顺序排列。<li>…</li>标记是用来标记列表中的一个列表项。列表的语法如下：<ul>或<ol><li>列表项一</li><li>列表项二</li><li>列表项三</li></ul>或</ol><ul>标记的主要属性为type，它有三个值，分别代表不同的形状：disc代表实心圆点（默认值），circle代表空心圆，square代表实心小方块。<ol>标记的type属性的值主要有：“1”、“i”、“Ⅰ”、“a”、“A”，分别代表了排序时项目符号使用的类型。任务2

使用超级链接和图像标记任务导入本任务是使用HTML语言在网页中插入超级链接和图像，并通过设置属性实现图文混排，如图2-5所示。知识指导一、超级链接基本格式：<a>…</a>作用：用来创建超级链接，以达到网页间相互跳转的效果。<a>标签有几个重要属性，介绍如下：href：用于指定目标文件的URL地址。target：用于设置打开目标文件所在的窗口形式。常用属性取值

二．图像标记<img>基本格式：<img

src=”图像名称或路径”>作用：在网页上插入图像，并实现图文混排。值作用_blank在新窗口中打开_parent在上一级窗口中打开__self在当前窗口中打开，此项为默认值_top在浏览器的整个窗口中打开，忽略任何框架常用图像标记属性如表2-3所示。表2-3常用图像标记属性属性作用范例src设置插入图像的名称或路径<img

src=”images/wave.jpg”>alt替换文本<img

src=”images/wave.jpg”alt=”波纹”>width设置图像的宽度，单位是像素<img

src=”images/wave.jpg”width=”240”height=”180”>height设置图像的高度，单位是像素border设置图像的边框，默认为0hspace（vspace）设置图像水平（垂直）方向与其他对象之间的距离，单位为像素<img

src=”images/wave.jpg”

hspace=”15”

vspace=”10”>align设置图像与文本的对齐方式。取值有：top、middle、bottom、left、right等。当取值为left、right时，可以实现图像与文字混排的效果<img

src=”images/wave.jpg”align=”right”>任务3使用表格标记布局网页任务导入本任务通过表格及其相关标记布局一个网页，并通过常用的属性设置来控制网页的外观，效果如图2-7所示。

知识指导

一．表格标记<table><table>标记定义一个表格。每一个表格只有一对<table>和</table>，一个页面中可以有多个表格。<table>标记主要属性如表2-4所示。属性作用范例bgcolor设置背景颜色<tablebgcolor="#ff0000">background设置表格的背景图像<tablebackground=”images/wave.jpg”>width设置表格的宽度，单位为像素<tablewidth=”360”>height设置表格的高度，一般采用默认值border设置表格边框的宽度，默认值为0<tableborder=”1”>align设置表格在页面中的对齐方式<tablealign=”center”>二．行标记<tr><tr>标记定义表格的行，一个表格可以有多行。三．单元格标记<td><td>标记定义表格的一个单元格。每行可以有不同数量的单元格，在<td>和</td>之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。四．表头标记<th><th>标记定义表头单元格，单元格中的文字将以粗体显示，此标记必须放在一对<tr>标记内，在单元格中也可以不用此标记。五．表格的基本结构<table>——定义表格<tr>——定义表行

<th>…</th>——定义表头</tr><tr><td>…</td>——定义单元格</tr></table>任务4使用XHTML制作网页

任务导入

本任务是制作一个滚动字幕，设置字幕中4个段落，使其滚动方向向上，方式为单向滚动，并设置适当的滚动速度，如图2-8所示。图2-8随机截取两次滚动字幕的效果图

知识指导

HTML在初期，为了它更广泛地被接受，大幅度放宽了标准的严格性，例如标记可以不封闭；属性可以加引号，也可以不加引号；网页的结构和表现混杂在一起，使得产生大量的冗余代码。这显然不符合标准化的发展趋势，影响了互联网的进一步发展。于是W3C（WorldWideWebConsortium万维网联盟）制定了Web标准，1998年2月10日发布了XML1.0。Web标准是将页面划分成3个组成部分，即结构（Structure）、表现（Presentation）和行为（Behavior）。XML（ExtensibleMarkupLanguage）为可扩展标记语言。XML类似于HTML也是标记语言，它们的不同之处在于HTML有固定的标记，而XML允许编写者定义自己的标记。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。目前页面展现还是采用HTML和XHTML编写的居多。一．XHTML的优势XHTML是面向结构的语言，它主要用于对网页内容进行结构设计。另一方面XHTML是XML的过渡语言。XML是完全面向结构的设计语言，XHTML能够帮助浏览器快速适应结构化的设计，以便于平滑过渡到XML，并能与XML和其他程序语言直接进行良好的交互，帮助扩展其功能。使用XHTML的另一个优势是它非常严密。当前网络上的HTML的使用极其混乱，不完整的代码、私有标记的定义、反复复杂的表格嵌套等，使得页面的体积越来越庞大，HTML也跟着变得非常庞大。XHTML可以与其它基于XML的标记语言、应用程序及协议进行良好地交互。XHTML是Web标准家族的一部分，能很好地用在无线设备等其他用户代理上。在网站设计方面，XHTML可以帮助制作者改掉表现层代码的恶习，并帮助制作者养成标记校验测试页面工作的习惯。二．XHTML的页面结构1．文档类型声明部分文档类型声明部分由<!DOCTYPE>元素定义，DOCTYPE文档类型是DocumentType的简写，在页面中用来说明页面使用的XTHML是什么版本。制作XTHML页面，一个必不可少的关键组成部分就是DOCTYPE声明，只要确定了一个正确的DOCTYPE，XHTML里的标记和级联样式才能正常生效。在XTHML1.0中有3种DTD（文档类型定义）声明可以选择，分别是过渡的（Transitional）、严格的（Strict）和框架的（Frameset）2．<html>元素和名字空间3．其他部分网页头部元素，由<head>标记标识；页面主体元素，由<body>标记标识。三．XHTML和HTML的区别1．XHTML中标记名称和属性名称必须小写2．XHTML的标记必须严格嵌套3．XHTML的标记必须封闭4．XHTML的空元素标记也必须封闭5．XHTML中属性值用双引号括起来6．XHTML区分“内容标记”与“结构标记”四．滚动字幕及其设置基本格式：<marquee>滚动文字或图片</marquee><marquee>标记中可以设置的属性包括direction（方向）、behavior（方式）和loop（次数）等，如表2-5所示。表2-5属性作用取值范围及说明direction设置字幕的滚动方向Left/right/up/downbehavior设置字幕的滚动方式scroll：字幕单向滚动slide：字幕到达边界停止alternate：字幕到达边界后反向滚动loo

人人文库> 全部分类> 应用文书 > 事务文书

温馨提示

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

最新文档

评论

0/150

提交评论