《HTML-Web页面制作基础课件》由会员分享，可在线阅读，更多相关《HTML-Web页面制作基础课件（71页珍藏版）》请在金锄头文库上搜索。
1、模块3 HTML语言,3.1 HTML语言概述 3.3 文档的格式与风格 3.3 加入多媒体与超级链接 3.4 制作表格 3.5 制作表单 3.6 框架结构 3.7 CSS基础,3.1 HTML语言概述,本章首页,HTML（HyperText Markup Language）中文是“超文本标记语言” ，是一种专门用来设计网页的计算机描述语言。 其扩展名为.html(或.htm),任何一个Web页面都离不开HTML，HTML也是Web应用开发的基础。 HTML语言是大多数浏览器都能识别的语言。,常用HTML编辑工具 任何一个文档编辑器都是HTML编辑器。 很多公司设计了专用的网页编辑器，像Dre
2、amweaver，FrontPage，CutePage，QuickSite等，是专门用来制作网页的，利用它们可以很容易的编写出精美的网页，具有所见即所得的功能。,HTML文档的结构 头部信息 正文部分 , 这是标题部分。 你好，这是正文部分！ ,HTML标记 1HTML文档标记 格式： 功能：标志文档开始和结尾的标记。 3HTML文件头标记 格式： 功能：用于包含文件的基本信息。 3HTML文件主体标记 格式： 功能：文件主体标记。,1. 文档头标记 HTML文档的HEAD部分是文档头，在文档头中常用的一些标记有： （1）标记 用于定义网页标题栏上的显示内容。 例如： 这是标题部分。 ,（2）
3、标记：放于与之间的标记，功能为： 1）定义该网页的关键字，可以使搜索引擎根据关键字搜索到我们网站的页面。 例 其中name=“Keywords” 说明要定义关键字， Chris,Web,Music,photo是给搜索引擎搜索的关键字 2）页面刷新和自动跳转 其中refresh表示设置页面的刷新，10表示10秒，url指明刷新后要跳转到的页面,HTML标准单位,1、长度单位 长度单位可以用来定义页面可见标记对象（如水平线、表格、图片等）的长、宽、高等一系列属性。长度的表示有两种方式，绝对长度和相对长度。 相对单位： em：相对于字母高度的比例因子。 en：相对于字型大小的比例因子。 %：相对于长
4、度单位的百分比例。 绝对单位： in：英寸 cm：厘米 mm：毫米 px：像素 pc：印刷活字单位 pt：像点 注意：1 in=6pc=72pt=2.54cm,2、颜色单位(colorvalue) 网页颜色的表示共有五种方式 （1）#RRGGBB：每种颜色取值范围00FF （2）#RGB：每种颜色取值范围0F （3）rgb(R,G,B)：每种颜色取值范围0255 （4）rgb(R%,G%,B%)：相对比例 （5）Color_Name：有141种标准色 例如BlackNavyGrayLimePurpleSliver等等,3、URL路径 URL（Uniform Resource Locator：统
5、一资源定位器）是WWW页的地址。 有绝对路径： 和相对路径： ,文档的格式与风格,在网页中，文档是核心的内容，只有设置适当的文档格式，才能得到绚丽多彩的网页。 设置文档的格式包括：设置标题和文字的字体、字号、字型、颜色，段落格式、文本布局等。,本章首页,1 设置的属性,标记属性,功能,background=URL,设置网页的背景图片,bgcolor=colorvalue,设置网页的背景颜色,text=colorvalue,设置文本的颜色,link=colorvalue,设置尚未被访问过的超文本 链接的颜色，默认为蓝色,vlink=colorvalue,设置已被访问过的超文本 链接的颜色，默认为
6、紫色,alink=colorvalue,设置超文本链接在被单击 瞬间的颜色，默认为红色,bgproperties =fixed,设置背景是否随滚动条滚动,leftmargin=size,设置网页左边的空白,topmargin=size,设置网页上方的空白,margingwidth=size,设置网页空白的宽度,marginheight =size,设置网页空白的高度,接上页,段落格式化 1标题标记 格式：， ， 功能：设置各种大小不同标题的标记。 3段落标记 格式： 功能：设置段落标记。 3预定义格式标记 格式：,4分区显示标记 格式： 功能：分区显示标记。 5换行标记 格式： 功能：强制换行
7、。 6水平线标记 格式： 功能：插入水平线标记。 7注释标记 格式： 功能：注释标记。, 标记的使用 三种标记的使用！ 我在中间！ 中间 我在左边！左边 我在右边！右边 ,建立列表 1有序列表/标号列表 格式： OL的start属性：设定从何数值开始标号，默认为1。 LI 的type属性：用来设定标号的样式，例如数字（1，2）、大写英文字母（A，B）、小写英文字母（a，b）、大写罗马字母（I，II）和小写罗马字母（i，ii），默认的序号是数字。,2无序列表/项目列表 格式： LI 的type属性：可以为disc（实心圆点）、circle（空心圆点）、square（方块）和自定义图片，默认为实心
8、圆点。,*3自定义列表 格式： 定义列表；定义列表项，项目会自动换行并左对齐，但项目间没有空行；用来定义语句。,字符的格式化 1字体设置标记 格式： 功能：设置字体格式标记。, 设为上标 设为下标 加强强调,常用页面标记,., 段落标记 单标记-换行标记 空格标记,水平线标记, 水平线标记-单标记 其属性有： align 控制水平线对齐方式,有 left/right/center width 控制水平线长度,值为数字或百分比 size 控制水平线粗细,值为数字 color 控制水平线颜色 noshade 取消水平线预设的3D阴影 例如 ,加入多媒体与超级链接,图像增添了一道亮丽的风景。图像在网
9、页设计中是必不可少的。,本章首页,插入多媒体的一般形式： 格式： 功能：在网页中加入图像、视频、动画等。,1插入图像,标记属性,功能,src =URL,通过URL给出图像来源的位置，不可缺省,width=size,设置图像宽度,height =size,设置图像高度,align=alignstyle,设置对齐方式。取值为：top， middle，bottom，left，right,border= size,设置图像边框，缺省为0,hspace=size,设置图片左右边沿空白,vspace=size,设置图片上下边沿空白,alt= text,设置在图像未载入前 图片位置显示的文字,*插入视频,加
10、入超级链接 格式： 功能：在当前页和其他页间建立超链接。,给定链接目标的位置,标记属性,功能,href=URL,target=frametarget,设置显示链接目标的框架,accesskey=character,设置快捷键,tabindex=num,设置Tab键的顺序,rel=linktype,设置到链接的关系,绝对地址 上海热线 相对地址 翻到另外一页 连接到电子邮箱 给我写信 使用书签 1）设定书签 此地 2）跳转到书签 跳到此地, 网络系列 中文IE5.0使用实例 FLASH 4.0应用实例集 绘图系列 中文Photoshop5.02图像处理实例 中文Photoshop5.02特效字制
11、作实例 ,链接到网站 上 海热线 新浪 链接到本机页 近期新书推 欢迎来信指教！,列表的项目符号： 苹果 芒果 葡萄 列表的编号： 水果 颜色 花 ,跑马灯标记用来设置文字、图片等的滚动 该标记常带参数：direction-滚动的方向 ,可以设为left/right/up/down。 loop-文本滚动的次数，设为-1（默认）时，表示无限次。 behavior-滚动的方式，可设的值为： scroll 完全滚动，从一端消失后，在另一端出现 并滚动 slide 滚动一次 alternate 从一端到另一端后又反向,制作表格,表格可以把文字和图片等内容按照行和列排列起来，使整个网页更加清晰，利于信息
12、的表达。,本章首页,制作表格标记 表格开始、结束的标记 设定表格标题-可用align和valign（top、bottom）设定对齐方式 单行 标题单元格 字段数据, 表格制作举例 公司职员表 姓名 部门 职称 王海 业务部 工程师 朱红 会计部 会计师 ,美化表格-标记的属性,标记属性,功能,border=size,表格边框粗细（=0时边框隐藏）,background =URL,表格背景图片,cellspacing=size,表格内框线的间距,cellpadding =size,表格内容与单元格边框之间距离,bordercolor =colorvalue,表格边框颜色,适用标记,width=
13、size,表格/单元格的宽度,height=size,用是设表格水平对齐方式用设单元格文字水平对齐方式,Align =alignstyle,bgcolor =colorvalue, ,表格/单元格的高度,设置背景色, ,功能,标记属性,标记属性,功能,valign=valignstyle,设置垂直对齐方式，值 可以是top/middle/bottom,该属性适用标号：,制作表单,表单是用户和Web应用程序、Web数据库等进行交互的界面。在Web上，通过表单可以完成用户和计算机或服务器间的信息交换。,本章首页,表单的格式： 其中 action属性：指定服务器端处理此表单程序所 在位置； meth
14、od属性：处理方式，默认值GET ； name属性：表单名,form里常用标记： 一、单行文本框 格式： input type=cdata name=“fieldname” sizenumvaluecdata maxlengthnumdisabled,name= cdata,设文本框的名称,size=num,设文本框的显示长度,maxlength =num,设允许输入的最大字符数,value=cdata,设文本框的初始值,标记属性,功能,type=cdata,Type=text时表示单行文本框 Type=password时表示密码 输入内容用星号显示,disabled,加入该属性会使得无法输入
15、文本,二、单选按钮 input type=“radio” name=cdata valuecdata checked disabled 同一组单选按钮的name是相同的。 加上 checked属性，该按钮初始为选中。 当表单数据提交时，被选中按钮的value属性值会送出,三、复选框 input type=“checkbox” name=cdata valuecdata checked disabled 由于每个复选框是独立的，所以name不要相同, 请选择您最常用的搜索引擎 Yahoo Sohu Infoseek , 请选择您上网浏览时感兴趣的内容： 时事新闻 体育比赛 文学艺术 ,四、多行文本框|滚动文本框 格式： ,其中 off-必须按Enter键才换行 physical-自动换行，数据传送时传出换行字符 virtual-自动换行，但是不传出换行字符,不会自动换行，30*4, 留言栏： ,五、下拉式菜单 格式： 选项一 选项二 ,属性：,属性：,标记属性,功能,value=cdata,设定该选项被选中后，传送到 服务器的值,selected,有该属性，此项初始为选中,标记属性,功能,name=cdata,设下拉菜单的名字,size=num,设下拉菜单大
