Web页面制作基础课件_第1页
Web页面制作基础课件_第2页
Web页面制作基础课件_第3页
Web页面制作基础课件_第4页
Web页面制作基础课件_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

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

文档简介

Web页面制作基础2.1HTML语言概述

2.1.1HTML概述

HTML是（HyperTextMarkupLanguage，超文本标记语言）的缩写，用来表示网上信息的符号标记语言。

HTML最早源于SGML语言.HTML语言内容丰富，从功能上大体可分为：文本结构设置、列表建立、文本属性制定、超链接、图片和多媒体插入、对象、表格以及窗体的操作。

2.1HTML语言概述2.1.2HTML文档的结构包括HEAD、TITLE、BODY三部分，下面是基本结构：

<HTML><HEAD>

标题部分

</HEAD><BODY>

正文部分

</BODY></HTML>

2.1HTML语言概述2.1.3HTML标记

1．HTML文档标记格式：<HTML>…</HTML>标志文件开始和结尾的标记。

2．HTML文件头标记格式：<HEAD>…</HEAD>用于包含文件的基本信息。

3．HTML文件主体标记格式：<BODY>…</BODY>文件主体标记。注意：<HEAD>与<BODY>为独立的两个部分，不能互相嵌套。2.1HTML语言概述2.1.4常用HTML编辑工具任何一个文档编辑器都是HTML编辑器。为了减少网页设计师的工作设计了专用的网页编辑器，像Dreamweaver、FrontPage、CutePage、QuickSite等，是专门用来制作网页的，具有所见即所得的功能。所见即所得的概念。本书例题均在FrontPage2000编辑环境中调试并通过。2.2文本的格式与风格

2.2.1设置<BODY>的属性1．<BODY>属性概述

background属性bgcolor属性bgproperties属性link，vlink，alink属性Leftmargin，topmargin属性Margingwidth，marginheight属性2．FrontPage2000中的实现2.2文本的格式与风格2.2.2段落格式化1．标题标记格式：<H1>…</H1>，<H2>…</H2>…<H6>…</H6>设置各种大小不同标题的标记。2．段落标记格式：<P>…</P>设置段落标记。3．预定格式标记格式：<PRE>…</PRE>在浏览器中浏览时，按照文档中预先排好的形式显示内容。2.2文本的格式与风格4．分区显示标记格式：<DIV>…</DIV>分区显示标记。5．词标记这种标记有两种：<BR>和<HR>格式：<BR>强制进行换行标记。格式：<HR>插入水平线标记。6．注释标记格式：<!--注释内容-->注释标记。

2.2文本的格式与风格2.2.4建立列表1．有序列表格式：<OLtype="符号类型"><LItype=”符号类型”>…</LI><LItype=”符号类型”>…</LI>

…</OL>功能：建立有序列表。

2.2文本的格式与风格2．无序列表格式：<ULtype=”符号类型”><LItype=”符号类型”>…</LI><LItype=”符号类型”>…</LI>

…</UL>功能：建立无序列表。2.2文本的格式与风格3．自定义列表格式：<DL><DT>…</DT><DD>…</DD><DT>…</DT><DD>…</DD>

…</DL>注意：根据文档的具体要求，列表可以嵌套使用。在FrontPage2000中实现。2.2文本的格式与风格2.2.5字符的格式化1．字体设置标记格式：<FONT>…</FONT>功能：设置字体格式标记。<FONT>标记提供了几种属性：size：设置文字的大小。face：设置字体。color：设置文字的颜色。2.2文本的格式与风格其他标记格式功能<U>…</U>给字符加下划线<S>…</S>给字符上加横线，表示删除<B>…</B>给字符加粗<I>…</I>将字符设置成斜体<BLINK>…</BLINK>标记使得其中的文字产生闪烁的效果2.3加入多媒体与超级链接2.3.1加入图像、视频、动画图像在网页设计中是必不可少的，所以用户应掌握在网页中操作图像的方法。格式：<IMG>…</IMG>

功能：在网页中加入图像、视频、动画等。

2.3加入多媒体与超级链接标记属性功能src=URL通过URL给出图像来源的位置，不可缺省width=size设置图像宽度height=size设置图像高度alt=txt设置在图像未载入前图片位置显示的文字border=size设置图像边框，缺省为0align=alignstyle设置对齐方式。取值为：top，middle，bottom，aleft，righthspace=size设置图片左右边沿空白vspace=size设置图片上下边沿空白1．插入图像

2.3加入多媒体与超级链接2．插入视频

标记属性功能dynsrc=URL设置多媒体来源位置loop=size设置视频播放的次数loopdelay=time设置两次播放的间隔时间start=value指定何时开始播放视频文件使用FrontPage2000在网页中插入多媒体

2.3加入多媒体与超级链接2.3.2加入超级链接格式：<A>…</A>

标记属性功能href=URL给定链接目标的位置target=frametarget设置显示链接目标的框架accesskey=character设置快捷键tabindex=num设置Tab键的顺序rel=linktype设置到链接的关系2.4制作表格

2.4.1建立表格创建表格是规划页面最常用的方法。格式：<TABLE>…</TABLE>功能：创建表格进行页面设计。

在浏览器中显示时，表格的整体外观由<TABLE>标记的属性决定。2.4制作表格标记属性功能border=size设置表格边框大小width=size设置表格的宽度height=size设置表格的高度cellspacing=size设置单元格间距cellpadding=size设置单元格的填充距background=URL设置表格背景图片bgcolor=colorvalue设置表格背景色align=alignstyle设置对齐方式cols=size设置表格的列数2.4制作表格2.4.2定制表格使用<TABLE>只是定义空表格，还需要定义行和单元格。格式：<TR>…</TR>功能：定义表格的一行。对于每一行，可以定义行属性

2.4制作表格标记属性功能bgcolor=colorvalue设置行背景颜色。align=alignstyle设置行对齐方式。valign=valignstyle设置单元格垂直对齐方式。行属性：2.4制作表格单元格属性：标记属性功能bgcolor=colorvalue设置单元格背景颜色rowspan=num设置单元格所占的行数colspan=num设置单元格所占的列数align=alignstyle设置对齐方式valign=valignstyle设置单元格垂直对齐方式width=size设置单元格宽度height=size设置单元格高度格式：<CAPTION>…</CAPTION>定义表格说明，通过属性align设置标题的对齐方式。

2.5制作表单

2.5.1表单的结构

格式：<FORM>…</FORM>定义表单。

标记属性功能action=URL设置处理表单的程序method=postmethod设置发送表单的HTTP方法enctype=contenttype设置发送表单的内容属性onsubmit=script设置被发送事件target=frametarget设置显示表单内容的窗口accept-charset=cdata设置可支持的字符列表2.5制作表单2.5.2FORM中常用的标记

1．输入域（1）单行输入域<INPUT>1）text类型

2）password类型

3）radio类型

4）checkbox类型5）submit类型

6）reset类型

7）hidden类型

2.5制作表单（2）多行输入域标记<TEXTAREA>标记属性功能name=cdata设置FORM提交的输入信息的名称rows=num设置文本域的行数cols=num设置文本域的列数tabindex=num设置tab键的次序2.5制作表单2．按钮

<BUTTON>

标记属性功能name=cdata设置已发送表单的关键字。value=cdata设置已发送表单的值。type=buttontype设置按钮的类型。tabindex=num设置tab键的次序。2.5制作表单3．选择域格式：

<SELECT><OPTION>选项一

<OPTION>选项二

…</SELECT>功能：定义选择栏。

2.5制作表单2.5.3表单的处理处理信息时，经常配合表格标记，使用循环输出的方法。

2.6框架结构

2.6.1框架结构的文件格式<HTML><HEAD>

…</HEAD>

注意：在老版本的浏览器<FRAMESET>

可能不支持框架结构。

<FRAME>

…<FRAME>

…</FRAMESET></HTML>

2.6框架结构2.6.2框架结构标记的使用格式：<FRAMESET>…</FRAMESET>标记属性功能rows=size设置多重框架的高度cols=size设置多重框架的宽度onload=script设置框架被载入的事件onunload=script设置框架被卸载的事件2.6框架结构2.6.3FRAME标记

标记属性功能src=URL设置要链接到的HTML文件name=framename表示子窗口的名字marginwidth=size用来控制显示内容和窗口左右边界的距离，默认为1marginheight=size用来控制显示内容和窗口上下边界的距离，默认为1scrolling=scrollingstyle

指定子窗口是否使用滚动条，有YES/NO/AUTO三个值，默认AUTO，即根据窗口内容决定是否有滚动条noresize使用该属性后，指定窗口不能调整窗口大小2.6框架结构2.6.4TARGET属性的使用三种常见的用法：1．用于A标记2．用于BASE标记3．用于FORM标记

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论