《使用HTML创建静态页面.ppt》由会员分享，可在线阅读，更多相关《使用HTML创建静态页面.ppt（69页珍藏版）》请在金锄头文库上搜索。
1、使用HTML创建静态网站(1)网页编程第一课 HTML的基本标签会使用HTML的基本结构创建网页会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂的页面会使用超链接相关标签实现页面间的跳转HTML文件的基本结构HTML文档的结构我的第一个网页 Hello World!HTML 网页头部部分主体部分标签标记 HTML 文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在 标签内这部分包括标题和其他说明信息。包括在 标签内使用记事本创建网页使用记事本创建网页的步骤： 1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格
2、式问题4、打开网页预览效果使用记事本创建网页标签网页标题网页页面中出现乱码，那如何消除乱码使其正常显示？使用标签简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1可以避免页面中的乱码页面背景色或背景图像 Hello World！为了使页面美丽大方，网页背景要尽量地浅Hello World!网页背景色彩 网页背景图像 文本相关标签字体、字号标题标签标签特殊符号行的控制段落标签换行标签使用了 换段了设置了字体的大小和颜色换行了特殊符号字体、字号相关标签标题标签 . #=1, 2, 3, 4, 5, 6 说明：到字体大小依次递减 一级标题 二级标题 三级标题 四级标题 五级标题
3、 六级标题 H1 到 H6 标签用于指定不同级别的标题 . 字体、字号相关标签标签特殊符号特殊字符特殊字符转义码转义码空格空格 引号引号(“”)"小于小于()>版权号版权号( )©字体的大小值字体的颜色字体的类型字体、字号相关标签. 手机充值、IP卡/电话卡 移动 | 100 | 联通 | 50 Copyright © 2007 "淘宝网" All rights.空格效果. 淘宝集市欢迎您！ 淘宝网首届翠友会！ 行的控制相关标签段落标签段(Paragraph) (可以看作是空行) 换
4、行标签 换段了换行了图像标签常见的图片格式介绍图像类型图像类型优点优点缺点缺点适用场合适用场合制作工具制作工具*.jpg体积小，比较清晰体积小，比较清晰有损压缩有损压缩 、画面失真画面失真 网页图片网页图片Photoshop*.gif支持支持 Internet 标准标准 ,支持无损耗压缩和支持无损耗压缩和透明度，很流行透明度，很流行 支持有限的支持有限的透明度透明度,效果效果不如别的图不如别的图像像网页图片网页图片Photoshop*.swf体积小体积小,便于网络传便于网络传输输制作麻烦制作麻烦网页动画网页动画 Flash*.bmp支持支持 24 位颜色深度，位颜色深度，兼容性好兼容性好不支持
5、压缩不支持压缩 容量大容量大桌面墙纸桌面墙纸photoshop图像标签图像的基本语法鼠标移到图像上，出现的提示性文字图像的位置图像的宽度图像的高度为图像添加的提示性文字图像标签图像与文本的对齐方式图像与文本居中对齐,还可以取top, bottom 值. 请点击广告进入明星专区图像和文本居中对齐文字布局内容分隔标签项目列表和编号有序列表无序列表预格式文本标签水平分隔线有序列表无序列表用了预先定义好的格式如何使用内容分隔标签线的厚度值线的宽度 标签用于在页面上绘制水平线 线的颜色如何使用列表无序列表语法 列表项内容 有序列表语法 列表项内容 注册步骤： 填写信息 收电子邮件 注册成功 新人上路指南
6、 如何激活会员名？ 如何注册淘宝会员？ 注册时密码设置有什么要求？ 支付宝认证 预格式文本标签 如何实现如下图所示的页面中的文字效果？使用 标签可以实现如何使用预格式文本标签 腾讯-QQ币/QQ幻想-30元卡 一 口 价：26.45元 运费：卖家承担运费 剩余时间：5天 宝贝类型： 全新 卖主声明：货到付款，可试用10天！ HTML中代码格式与浏览器中显示效果一样页面链接标签链接到其他页面免费注册链接内容链接的地址链接到其他页面 免费注册 登录 单击”免费注册”之后链接到的页面页面链接标签链接到其他页面相对路径指定从根目录到文件的完整路径。绝对路径指定相对于当前文件的文件位置。 在同一个文件夹
7、下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？两种方式：相对路径和绝对路径页面链接标签要链接到同一目录 (C:HTML) 下的页面，可编写 或 相对路径名绝对路径名页面链接标签 要实现如下图所示的超链接效果，怎么办？使用锚记标签页面链接标签链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML 的 NAME 属性用于创建锚标记 主题名称为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称链接到其他页面新人上路新人上路指南1、定义锚标记2、链接到锚标记所在位置页面链接标签电子邮件链接要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”站长信箱演示示例5
8、：演示电子邮件链接 电子邮件链接 站长信箱单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可滚动标签 滚动文字或图像滚动延迟时间滚动对象的方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。滚动标签 水平滚动 垂直滚动 Avon化妆品 雅诗兰黛 水平向左移动垂直向上移动图片和文字同时垂直向上移动声明滚动文字结束声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动总结哪个标签中的哪个属性可以改变字体颜色和字号？图像与文本的对齐方式有哪几种？项目列表和编号有何区别？分别适用什么场合？链接到其他页面时，路径的表示方法有
9、两种：相对路径和绝对路径，这两种路径有何区别和联系？第二课 表格基础会使用表格的基本结构实现简单表格会使用表格相关标签实现跨行、跨列的复杂表格会使用表格相关设置进行美化修饰表格的基本结构表格的基本结构行行列列单元格单元格在在 HTML 文档中，广泛使用文档中，广泛使用表格表格来存放网页上的文本和图像来存放网页上的文本和图像表格的基本语法 单元格内容单元格内容 .定定义表格义表格 定义列定义列 定义行定义行 border用来设置表用来设置表格边框尺寸大小格边框尺寸大小如何创建表格 移动移动 联通联通 铁通铁通 IBM 惠普惠普 华硕华硕 跨跨3列列跨跨3行行下图中的表格哪里用了跨行？哪里用了跨列
10、？下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列跨了几行几列? ? 手机充值、手机充值、IP卡卡 办公设备、文具办公设备、文具 各种卡的总汇各种卡的总汇 铅笔铅笔 彩笔彩笔 打印打印 刻录刻录 如何创建跨行跨列的表格背景图片背景图片背景色背景色表格的高度表格的高度表格的宽度表格的宽度文字对文字对齐方式齐方式根据理解根据理解,下面表格应该从哪些方面进行美化修饰？下面表格应该从哪些方面进行美化修饰？如何设置表格的尺寸和边框 品牌商城品牌商城 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 width用来设置表格的宽度用来设置表格
11、的宽度height用来设置表格的高度用来设置表格的高度border用来设置表用来设置表格边框尺寸大小格边框尺寸大小bordercolor用来设用来设置表格边框颜色置表格边框颜色如何设置背景 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 background属性用来设置表格的背景图片属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列属性用来设置表格、行、列的背景色。的背景色。“#EBEFFF”是用是用RGB表表示的一种颜色值，示的一种颜色值，RGB指的是红绿指的是红绿蓝蓝 ，下图就是，下图就是RGB颜色对照表颜色对照表 。如何设置对其方式
12、; 笔记本电脑笔记本电脑 办公设备、文具、耗材办公设备、文具、耗材 惠普惠普 华硕华硕 打印机打印机 刻录盘刻录盘 align属性用来设置表属性用来设置表格、行、列的对齐方式格、行、列的对齐方式为什么要使用填充属性单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边未填充的效果，字与单元格边框之间的距离靠得太近框之间的距离靠得太近什么是填充属性和间距属性border(边框的厚度边框的厚度) 内容内容内容内容内容内容内容内容cellpadding(单元格填充单元格填充)cellspacing(单元格间距单元格间距)如何设置表格的填充属性 笔记本电脑笔记本电脑 办公设备、文具
13、、耗材办公设备、文具、耗材 .cellspacing属性用来设属性用来设置表格置表格内框宽度内框宽度 cellpadding属性用来属性用来设置表格内填充距离设置表格内填充距离填充之后填充之后的效果的效果如何实现图文内如何实现图文内容的布局，达到容的布局，达到如左图所示页面如左图所示页面的效果？的效果？分析上图所示页分析上图所示页面，应该用什么面，应该用什么进行布局？进行布局？ 什么是表格布局使用使用表格表格进行布局进行布局用表格对网页的内用表格对网页的内容进行整体控制容进行整体控制如何使用表格进行布局使用表格布局下图，需要几行几列？使用表格布局下图，需要几行几列？需要需要7行行2列列 如何使
14、用表格进行布局 超值变形金钢超值变形金钢2.5折折! 人们为啥对电视吼叫人们为啥对电视吼叫 总结创建表格最少需要那三个标签？创建表格最少需要那三个标签？简述表格的基本结构。简述表格的基本结构。跨行跨列的表格，主要在什么情况下使用？跨行跨列的表格，主要在什么情况下使用？给你一个表格，你会从哪些方面进行美化？给你一个表格，你会从哪些方面进行美化？第三课表单和框架会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能理解post和get两种提交方式的区别会使用框架结构实现多窗口展示页面表单表单表单的典型应用表单的典型应用注册用户注册用户收集信息收集信息反馈信息反馈信息为网站提供搜索工具为网
15、站提供搜索工具注册用户注册用户收集信息收集信息反馈信息反馈信息提供搜提供搜索工具索工具表单包含的控件单行文本输入单行文本输入框框(TEXT)单选按钮单选按钮(RADIO)复选框复选框(CHECKBOX)下拉列表下拉列表(SELECT)重置按钮重置按钮(RESET)提交按钮提交按钮(SUBMIT)多行文本框多行文本框(TEXTAREA)密码框密码框(PASSWORD)表单页面的基本结构METHOD =“post或或get”ACTIONMETHOD指定提交后，由服务器指定提交后，由服务器上那个处理程序处理上那个处理程序处理指定向服务器提交的方法指定向服务器提交的方法:一般为一般为post或或get
16、方法方法, post方法比较安全方法比较安全 ACTION = “URL” 表单元素的统一格式 指定元素的类型，可指定元素的类型，可为为TEXT、RADIO、SUBMIT等等控件的控件的名称名称控件的控件的初始值初始值控件的控件的初始初始宽度宽度控件中输入的控件中输入的最多字符个数最多字符个数控件是否控件是否被被选中选中表单元素的逐一介绍文本框基本语法名名 字：字： 单行文本输入框，单行文本输入框，字符宽度为字符宽度为20文本区的宽度文本区的宽度输入元素输入元素的默认值的默认值文本输入框文本输入框表单元素的逐一介绍密码框基本语法密码区宽度密码区宽度初始密码初始密码密码框密
17、码框密密 码码： 密码框，密码框，22个字符宽度个字符宽度表单元素的逐一介绍单选按钮基本语法单选按钮基本语法初始值初始值单选按钮单选按钮默认选中默认选中性性别别： 男男 查看源代码查看源代码设置此单选设置此单选按钮被选中按钮被选中表单元素的逐一介绍复选框基本语法复选框基本语法复选框复选框复选框名复选框名复选框值复选框值 聊天聊天 查看源代码查看源代码设置此复选设置此复选框被选中框被选中列表框基本语法列表框基本语法 说明：说明： size确定列表中可同时看到的行数。确定列表中可同时看到的行数。 selected默认被选中的可选项。默认被选
18、中的可选项。表单元素的逐一介绍出生日期：出生日期： 年年 选择选择月份月份 一月一月 二月二月 月月 日日 设置此输入框最多设置此输入框最多只能输入四个符号只能输入四个符号设置设置“选择选择月份月份”选项默认被选中选项默认被选中表单元素的逐一介绍按钮基本语法按钮基本语法按钮名称按钮名称按钮类型可为按钮类型可为button、submit按钮上的标签按钮上的标签 单击按钮，控件的值单击按钮，控件的值被重置为被重置为value属性属性中指定的初始值中指定的初始值表单元素的逐一介绍多行文本框基本语法多行文本框基本语法 文本框中的内容文本框中的内容 文本框文本框的名字的名字文本框
19、文本框的列数的列数文本框文本框的行数的行数欢迎阅读服务条款协议，本欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务淘宝的权利和义务 6行行40个字符宽个字符宽度的多行文字域度的多行文字域小结1编写如左图所示效果对应的html代码在网页设计中，表单的主要用途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX练习答
20、案练习答案练习代码练习代码框架广告栏顶部框架广告栏顶部框架(top.htm)导航栏左导航栏左侧框架侧框架(left.htm)详细内容页详细内容页面右侧框架面右侧框架(main.htm)框架的框架的边框边框框架集页面框架集页面(FrameSet.htm)框架使用场合页面的一个固定部分页面的一个固定部分显示徽标或静态信息显示徽标或静态信息在另一个在另一个固定部分固定部分显示导航显示导航部分详细部分详细内容内容在此处显示详细内容，在此处显示详细内容，页面中此部分页面中此部分是变化的是变化的。 框架的基本结构框架页面的基本语法框架页面的基本语法边框尺边框尺寸大小寸大小将窗口分割成左中将窗口分割成左中右
21、右3个部分个部分,可选可选将窗口分割成上将窗口分割成上下下2个部分个部分,可选可选第一个窗口要第一个窗口要显示的网页显示的网页框架的基本结构rows_cols框架框架 将窗口分割成将窗口分割成上中下上中下3部分部分窗口边框窗口边框的宽度的宽度如果要在浏览器中创建左中如果要在浏览器中创建左中右三个窗口右三个窗口,该如何实现？该如何实现？每个窗口对应一个页面，以及一个框架集每个窗口对应一个页面，以及一个框架集页面，总共需要几个页面，总共需要几个HTML页面文件？页面文件？如何创建多个复杂的窗口 要实现如下图所示的窗口，该如何制作？要实现如下图所示的窗口，该如何制作？1、分成上下两个窗口、分成上下两
22、个窗口2、把下面的窗口分成、把下面的窗口分成 左右两个窗口左右两个窗口top窗口窗口left窗口窗口right窗口窗口如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下：1、创建一个HTML页面“top.html”2、创建一个HTML页面“left.html”3、创建一个HTML页面“right.html”top.html效果图效果图left.html效果图效果图right.html效果效果如何创建多个复杂的窗口4、新建多框架HTML页面“Frame_Sets.html”. 设置无框设置无框架边框架边框不显示不显示滚动条滚动条禁止调整禁止调整框架大小框架大小框架名称，便于超框架名称，便于超
23、文本链接锚标签文本链接锚标签target属性所引用属性所引用如何设置窗口链接的显示位置 如如果果在在同同一一个个页页面面中中，要要实实现现在在一一个个框框架架窗窗口口中中的的超链接页面出现在另一个框架窗口中，如何实现？超链接页面出现在另一个框架窗口中，如何实现？使用使用target目标窗口属性目标窗口属性如何设置窗口链接的显示位置target目标窗口属性name“显示的窗口名” target属性指定了所链接属性指定了所链接的文件出现在名称为的文件出现在名称为“窗口名窗口名”的框架窗口里。的框架窗口里。 target属性指定了所链接的文属性指定了所链接的文件出现在名称为件出现在名称为“rightframe”的框架窗口的框架窗口里里如何设置窗口链接的显示位置target目标窗口属性四个特殊的窗口 显示在新窗口 显示在本窗口 显示在父窗口 显示在整个浏览器窗口 新启一个窗口打开文新启一个窗口打开文件件 “ “right.html”总结表单中提交数据的方法有那两种及其区别？表单里有哪些常用的表单元素？创建一个框架页面至少需要哪两个标签？target设定目标资源所要显示的窗口，其取值可以为哪些？简述创建一个多框架页面所需的主要步骤。
