ASP程序设计及应用（第二版）课件第2章 Web页面制作基础

上传人：1*** IP属地：广东上传时间：2023-12-19 格式：PPT 页数：45 大小：658.50KB 积分：12 举报 版权申诉

已阅读5页，还剩40页未读，继续免费阅读

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

文档简介

第2章

Web页面制作基础

2.1HTML语言概述

2.2文档的格式与风格

2.3加入多媒体与超级链接

2.4制作表格

2.5制作表单

2.6框架结构

2.7CSS基础

2.8XML基础2.1HTML语言概述

WWW（WorldWideWeb，万维网）拉进了人们彼此间的距离，使得人与人之间的信息交流变得更加简便和快捷。WWW上的信息，大部分是通过HTML语言发布的。本章首页2.1HTML语言概述

2.1.1HTML概述

HTML是（HyperTextMarkupLanguage，超文本标记语言）的缩写，最早源于SGML语言。HTML用来表示网上信息的符号标记语言。在WWW上，发布信息通常使用HTML，它是Web页面的基础，任何一个Web页面都离不开HTML，而且HTML也是Web应用开发的基础。

HTML语言是大多数浏览器都能识别的语言，使用HTML语法规则建立的文本可以运行在不同的操作系统平台上，而且能被大多数用户所接受。

2.1HTML语言概述

2.1.2文档的结构

头部信息

</HEAD><BODY>

正文部分

</BODY></HTML>

文件开头和结尾由<HTML>和</HTML>来标记。<HEAD>和</HEAD>标记头部，用来包含文件的基本信息；<BODY>和</BODY>标记正文部分，是整个文件的主体部分。

2.1HTML语言概述

<HTML><HEAD><TITLE>这是标题部分。</TITLE></HEAD><BODY><P>你好，这是正文部分！</P></BODY></HTML>2.1HTML语言概述

2.1.3HTML标记

1．HTML文档标记格式：<HTML>…</HTML>

功能：标志文档开始和结尾的标记。

2．HTML文件头标记格式：<HEAD>…</HEAD>

功能：用于包含文件的基本信息。

3．HTML文件主体标记格式：<BODY>…</BODY>

功能：文件主体标记。

2.1HTML语言概述

2.1.4常用HTML编辑工具任何一个文档编辑器都是HTML编辑器。为了减少网页设计师的工作，使设计网页更加的方便，很多公司设计了专用的网页编辑器，像Dreamweaver，FrontPage，CutePage，QuickSite等，是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。所谓所见即所得，就是在编辑网页时看到的效果，与使用浏览器时显示的效果基本一致。

2.2文档的格式与风格在大多数网页中，文档是核心的内容，只有设置适当的文档格式，才能得到绚丽多彩的网页。设置文档的格式包括：设置标题和文字的字体、字号、字型、颜色，段落格式、文本布局等。本章首页2.2文档的格式与风格2.2.1设置<BODY>的属性标记属性功能background=URL设置网页的背景图片bgcolor=colorvalue设置网页的背景颜色text=colorvalue设置文本的颜色link=colorvalue设置尚未被访问过的超文本链接的颜色，默认为蓝色vlink=colorvalue设置已被访问过的超文本链接的颜色，默认为紫色alink=colorvalue设置超文本链接在被单击的瞬间的颜色，默认为红色bgproperties=fixed设置背景是否随滚动条滚动leftmargin=size设置网页左边的空白topmargin=size设置网页上方的空白margingwidth=size设置网页空白的宽度marginheight=size设置网页空白的高度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>功能：强制换行。6．水平线标记格式：<HR>功能：插入水平线标记。

7．注释标记格式：功能：注释标记。

2.2文档的格式与风格<HTML><HEAD><TITLE>标记的使用</TITLE></HEAD><BODY><！--注释

本程序的功能是：

制作简单网页熟悉基本标记的使用！

--><Palign=center>三种标记的使用！</P><HR><DIValign=center>我在中间！<BR>中间</DIV><HR><DIValign=left>我在左边！<BR>左边</DIV><HR><DIValign=right>我在右边！<BR>右边</DIV><HR></BODY></HTML>

2.2文档的格式与风格2.2.3

建立列表1．有序列表格式：<OLtype="符号类型"><LItype="符号类型">…</LI><LItype="符号类型">…</LI>

…</OL>type属性：数字（1，2，…）、大写英文字母（A，B，…）、小写英文字母（a，b，…）、大写罗马字母（I，II，…）和小写罗马字母（i，ii，…），默认的序号是数字。

2.2文档的格式与风格2.2.3

建立列表2．无序列表格式：<ULtype="符号类型"><LItype="符号类型">…</LI><LItype="符号类型">…</LI>

…</UL>type属性：可以为disc（实心圆点）、circle（空心圆点）、square（方块）和自定义图片，默认为实心圆点。

2.2文档的格式与风格2.2.3

建立列表3．自定义列表格式：<DL><DT>…</DT><DD>…</DD><DT>…</DT><DD>…</DD>

…</DL>

<DL>定义列表；<DT>定义列表项，项目会自动换行并左对齐，但项目间没有空行；<DD>用来定义语句。

2.2文档的格式与风格2.2.4字符的格式化1．字体设置标记格式：<FONT>…</FONT>功能：设置字体格式标记。

标记属性功能size=size设置文字的大小face=fontstyle设置字体color=colorvalue设置文字的颜色2.2文档的格式与风格2.2.4字符的格式化2．其他标记其他标记格式功能<U>…</U>给字符加下划线<S>…</S>给字符上加横线，表示删除<B>…</B>给字符加粗<I>…</I>将字符设置成斜体<BLINK>…</BLINK>标记使得其中的文字产生闪烁的效果2.3加入多媒体与超级链接图像的出现为本来单调乏味的网络世界增添了一道亮丽的风景线。图像在网页设计中是必不可少的，所以用户应该掌握在网页中操作图像的方法。本章首页2.3加入多媒体与超级链接插入多媒体的一般形式：格式：<IMG>…</IMG>功能：在网页中加入图像、视频、动画等。

2.3加入多媒体与超级链接1．插入图像标记属性功能src=URL通过URL给出图像来源的位置，不可缺省width=size设置图像宽度height=size设置图像高度alt=txt设置在图像未载入前图片位置显示的文字border=size设置图像边框，缺省为0align=alignstyle设置对齐方式。取值为：top，middle，bottom，left，righthspace=size设置图片左右边沿空白vspace=size设置图片上下边沿空白2.3加入多媒体与超级链接2．插入视频标记属性功能dynsrc=URL设置多媒体来源位置loop=size设置视频播放的次数loopdelay=time设置两次播放的间隔时间start=value指定何时开始播放视频文件2.3加入多媒体与超级链接2.3.2加入超级链接格式：<A>…</A>功能：在当前页和其他页间建立超链接。标记属性功能href=URL给定链接目标的位置target=frametarget设置显示链接目标的框架accesskey=character设置快捷键tabindex=num设置Tab键的顺序rel=linktype设置到链接的关系2.4制作表格表格可以把文字和图片等内容按照行和列排列起来，可以用来建立主页的框架，使得整个网页更加清晰和条理化，有利于信息的表达。本章首页2.4制作表格2.4.1建立表格格式：<TABLE>…</TABLE>标记属性功能border=size设置表格边框大小width=size设置表格的宽度height=size设置表格的高度cellspacing=size设置单元格间距cellpadding=size设置单元格的填充距background=URL设置表格背景图片bgcolor=colorvalue设置表格背景色align=alignstyle设置对齐方式cols=size设置表格的列数2.4制作表格2.4.2定制表格格式：<TR>…</TR>。功能：定义表格的一行。格式：<TD>…</TD>。功能：定义单元格。

标记属性功能bgcolor=colorvalue设置行背景颜色align=alignstyle设置行对齐方式valign=valignstyle设置单元格垂直对齐方式2.4制作表格2.4.2定制表格格式：<CAPTION>…</CAPTION>功能：定义表格标题，可以通过align属性设置标题的对齐方式。标记属性功能bgcolor=colorvalue设置单元格背景颜色rowspan=num设置单元格所占的行数colspan=num设置单元格所占的列数align=alignstyle设置对齐方式valign=valignstyle设置单元格垂直对齐方式width=size设置单元格宽度height=size设置单元格高度2.5制作表单表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通过表单可以完成用户和计算机或服务器之间进行的信息交换。

本章首页2.5制作表单2.5.1表单的结构格式：<FORMaction=URLmethod=postmethodonsubmit=scripttarget=frametargetaccept-charset=cdataenctype=contenttype>

…</FORM>功能：定义表单。2.5制作表单2.5.2FORM中常用的标记1．输入域（1）单行输入域。格式：<INPUT>。标记属性功能type=inputtype设置输入域的类型name=cdata设置表项的控制名，在表单处理时起作用（适用于除submit和reset外的其他类型）size=num设置表单域的长度maxlength=num设置允许输入的最大字符数（适用于text和password类型）value=cdata设置输入域的值（适用于radio和checkbox类型）checked设置是否被选中（适用于radio，button，checkbox类型）2.5制作表单1）text类型。2）password类型。3）radio类型。4）checkbox类型。5）submit类型。6）reset类型。7）hidden类型。2.5制作表单（2）多行输入域。格式为：<TEXTAREA>…<TEXTAREA>功能：定义多行文本输入域。标记属性功能name=cdata设置FORM提交的输入信息的名称rows=num设置文本域的行数cols=num设置文本域的列数tabindex=num设置tab键的次序2.5制作表单2．按钮格式：<BUTTON>…</BOTTON>功能：定义按钮。

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

<OPTION>选项二

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

标记属性功能name=cdata设置选择栏的名字size=num设置在选择栏中一次可见的选项个数multiple设置选项栏是否支持多选标记属性功能value=cdata设置选项的默认值selected表示此选项为预置项<option>属性：<select>属性：2.6

框架结构

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

…</HEAD><FRAMESET><FRAME>

…<FRAME>

…</FRAMESET></HTML>本章首页注意：含有框架结构的网页其HTML的形式和一般的HTML文件相似，只是在文档中，若使用了<FRAMESET>，就不应该有<BODY>标记。在老版本的浏览器可能不支持框架结构。

2.6

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

框架结构2.6.3FRAME标记格式：<FRAME>功能：在网页中定义框架。标记属性功能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标记本章首页2.7CSS基础2.7.1CSS样式简介CSS（CascadingStyleSheets，层叠样式表），又称格式页，是近几年才发展起来的新技术。它提供了很多的样式定义方式来辅助HTML。

本章首页2.7CSS基础<HTML><HEAD><TITLE>CSS样式</TITLE><STYLEtype="text/css"></STYLE></HEAD><BODY><H3>CSS样式文本！arial，12pt，normal，blue！</H3></BODY></HTML>

本章首页2.7CSS基础2.7.2CSS样式表的定义1．通过HTML标记定义定义任何一个HTML标记，定义时在属性和属性值之间用“：”隔开，当有多重属性时，使用“；”进行分隔。2．用id属性定义样式表id以（#）开头，把标准的属性和属性值写入大括号内。

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

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

ASP程序设计及应用（第二版）课件第2章 Web页面制作基础

文档简介

温馨提示

最新文档

评论

ASP程序设计及应用（第二版）课件第2章 Web页面制作基础

文档简介

温馨提示

最新文档

评论

相关文档