第2章ASP动态网页程序设计与制作实训教程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
–3.表格中的图文件
–2.6.3 拓展训练--制作“上海世博”网页
2．7框架 在网页的制作上，如果能随时看到主列表项，
当点击某列表项时不希望跳到新的页面，这时 就可以采用框架来完成网页的制作。框架设定 主 要 是 使 用 <frameset> 和 <frame> 两 个 标 记 来 制作，以达到窗口分割目的。
默认值为_self。在没有框架的网页中， _top、_self、_parent是同一个窗口。除 这四个值之外，target的属性值还可以是 任意一个窗口的名称。
title：用于定义指向超链接时所显示的标 题文字。
– 2．跨文件、跨网络的链接 – 3．相对路径和绝对路径
路径是指从站点根文件夹或当前文件夹 起到目标文件所经过的路线。在进行链 接时，需要使用路径指明目标文件所在 的位置。
· 第2章ASP框架语言----HTML
2．1 HTML标记的认识与使用
–2.1.1 制作“中国足球”网页
–2.1.2 知识讲解—认识并使用HTML标记
– 1．HTML标记及文件结构 – 2．<body>标记的属性
2.1.3 拓展训练—制作漂亮MM网页
2．2 段落和文字标记 文档是网页的核心内容，置文档格式的
–2.2.3 拓展训练—制作“世博场馆简 介”网页
2．3 建立超链接
–2.3.1 制作“流行街舞”网页 –2.3.2 知识讲解—建立超链接
– 1．文件内的链接
HREF:<A>标记最常见的属性，用于指明超链接 所指向的URL。
target：用于指定在哪个窗口打开超链接所指向 的网页。常见的有四个属性值：
–2.8.3 拓展训练—制作“自动刷新 页面”网页
2．9 插入多媒体
–2.9.1 制作“庆祝世博成功”网页 –2.9.2 知识讲解—插入多媒体
• 1．插入字幕标记 • 2．插入背景音乐标记
–2.9.3 拓展训练—制作“字幕滚动”网页
2．10层叠样式表CSS
–2.10.1制作“小新文化网页” –2.10.2 知识讲解—层叠样式表
–2.7.1 制作“风景欣赏网页” –2.7.2 知识讲解—框架
• 1．框架标记 • 2. 框架间的链接
–2.7.3 拓展训练—制作“可爱咪咪”网页
2．8自动刷新页面
• 浏览网页时，大家常会遇到页面停留几秒 后自动指向一个新的页面，这就叫自动刷 新页面。
–2.8.1 制作“中华古文化网页”
–2.8.2 知识讲解—自动刷新页面
路径有以下3种类型：
绝对路径：也称为绝对URL，指被 链接文档的完整URL，是包含服务器协 议的完整路径。使用绝对路径与链接的 源文件位置无关，适用于外部链接，但 测试链接须上网进行。
相对路径：以源文件所在位置为起点到 目标文件经由的路径。指和源文件所在 文件夹相对的路径。指定文档相对路径 时，省去了源文件与目标文件对URL相 同的部分。适用于内部超链接，有利于 站点整体移动，这种链接调试方便，不 需上网。但移动源文件则会破坏链接。
• 1．创建并应用 CSS 样式 • 2．使用文档内样式表 • 3链接外部样式表 • 4．使用CSS设置超链接17
– <style type="text/css"> <!—
– a:link { text-decoration: none} – a:active { text-decoration: none } – a:visited { text-decoration: none } – --> – </style>
– <input type="checkbox" name="ah" value="钓鱼">钓鱼
– <input type="checkbox" name="ah" value="集邮">集邮
上机实训2 使用HTML语言编程
– 目的与要求：练习并掌握HTML各种 标记的使用。
思考与练习
– 一．简答题： – 二．上机操作
• Hale Waihona Puke Baidu.使用 CSS 滤镜
– li { – font-size: 25px; – color: red; – font-family: "隶书"; –}
2.11 设计网页表单
–2.11.1制作“用户个人信息”表单 –2.11.2知识讲解—表单
• 1.创建交互表单 • 2. 插入输入型表单对象 • 3. 使用其他表单对象 例： <TEXTAREA name="textarea"
标记包括标题 和文字的字体、字号、字 型、颜色、段落格式以及文本布局等。
–2.2.1制作“2019年最受期待的十大游戏” 网页
图2-3 2019年十大游戏(段落和文字标记) 网页效果图
–2.2.2 知识讲解—段落和文字标记
– 1．标题字体大小标记 – 2．对齐方向的控制 – 3．文本文件标记 – 4．段落与换行 – 5．水平线 – 6．特殊引述文件区标记 – 7．特殊符号
–2.5.2 知识讲解—列表标记
2．无序列表
无序列表与有序列表的区别仅在于前导字符不 一样，它的前导字符一般为黑点、实方框或空 心圆，而不是编号。无序列表只是列表项的先 后次序无关紧要。
前面介绍的几种列表是可以嵌套使用的，有序 列表和无序列表不仅可以自身嵌套，而且彼此 可互相嵌套。
–2.5.3 拓展训练--“奥林匹克知识”网页
2．6表格
– 2．6．1制作“旅游风向标”网页”
• 本例包含两个独立的表格。标题及各地风光导航部分是 一个无边框的表格。图片欣赏部分是一个有边框的表格。
–2.6.2 知识讲解—表格 –2．表格字段背景颜色的设定
– 利用上面的知识制作的是基本表格，但是太单调。 那么，这一部分讲述为表格字段加入色彩来美化表 格。
<A href="mailto:tjp?subject=关于ASP"> 与我联系</A>
– 5．更改链接文字的颜色
在默认情况下，超链接的文字是蓝色（blue）， 访问过的文字呈粟色（maroon）。当然可以 改成自己喜欢的颜色，方法是改变<body>标记 中相关的属性值。
请参照例2.9体会如何将链接颜色修改成自己 喜欢的颜色。
cols="50" rows="6" > 请留 言!</TEXTAREA> • 4．提交处理表单
–2.11.3拓展训练—注册表单
– <input type="checkbox" name="ah" value="音乐">音乐
– <input type="checkbox" name="ah" value="汽车">汽车
请参照例2.8理解根相对路径。
—4．创建邮件超链接 使用A标记创建邮件链接时，A标记的
href属性值由3部分组成： 电子邮件协议：mailto 电子邮件地址：如yunhai 可选的邮件主题，其形式是：subject=主
题
第1部分与第2部分用“：”隔开，第2部分 与第3部分用“？”隔开。如：
–2.3.3 拓展训练—制作“实例回顾”的链接网页
2．4 嵌入图片
– 2.4.1制作“风光旖旎”网页 –2.4.2 知识讲解—嵌入图片
– 2．图片标记 – 3．用图片作超链接 – 1．图片文件的格式：
• 语法：
–2.4.3 拓展训练—制作“流行街舞”网页
2．5 列表标记
–2.5.1制作“雪在江湖”网页
–2.6.3 拓展训练--制作“上海世博”网页
2．7框架 在网页的制作上，如果能随时看到主列表项，
当点击某列表项时不希望跳到新的页面，这时 就可以采用框架来完成网页的制作。框架设定 主 要 是 使 用 <frameset> 和 <frame> 两 个 标 记 来 制作，以达到窗口分割目的。
默认值为_self。在没有框架的网页中， _top、_self、_parent是同一个窗口。除 这四个值之外，target的属性值还可以是 任意一个窗口的名称。
title：用于定义指向超链接时所显示的标 题文字。
– 2．跨文件、跨网络的链接 – 3．相对路径和绝对路径
路径是指从站点根文件夹或当前文件夹 起到目标文件所经过的路线。在进行链 接时，需要使用路径指明目标文件所在 的位置。
· 第2章ASP框架语言----HTML
2．1 HTML标记的认识与使用
–2.1.1 制作“中国足球”网页
–2.1.2 知识讲解—认识并使用HTML标记
– 1．HTML标记及文件结构 – 2．<body>标记的属性
2.1.3 拓展训练—制作漂亮MM网页
2．2 段落和文字标记 文档是网页的核心内容，置文档格式的
–2.2.3 拓展训练—制作“世博场馆简 介”网页
2．3 建立超链接
–2.3.1 制作“流行街舞”网页 –2.3.2 知识讲解—建立超链接
– 1．文件内的链接
HREF:<A>标记最常见的属性，用于指明超链接 所指向的URL。
target：用于指定在哪个窗口打开超链接所指向 的网页。常见的有四个属性值：
–2.8.3 拓展训练—制作“自动刷新 页面”网页
2．9 插入多媒体
–2.9.1 制作“庆祝世博成功”网页 –2.9.2 知识讲解—插入多媒体
• 1．插入字幕标记 • 2．插入背景音乐标记
–2.9.3 拓展训练—制作“字幕滚动”网页
2．10层叠样式表CSS
–2.10.1制作“小新文化网页” –2.10.2 知识讲解—层叠样式表
–2.7.1 制作“风景欣赏网页” –2.7.2 知识讲解—框架
• 1．框架标记 • 2. 框架间的链接
–2.7.3 拓展训练—制作“可爱咪咪”网页
2．8自动刷新页面
• 浏览网页时，大家常会遇到页面停留几秒 后自动指向一个新的页面，这就叫自动刷 新页面。
–2.8.1 制作“中华古文化网页”
–2.8.2 知识讲解—自动刷新页面
路径有以下3种类型：
绝对路径：也称为绝对URL，指被 链接文档的完整URL，是包含服务器协 议的完整路径。使用绝对路径与链接的 源文件位置无关，适用于外部链接，但 测试链接须上网进行。
相对路径：以源文件所在位置为起点到 目标文件经由的路径。指和源文件所在 文件夹相对的路径。指定文档相对路径 时，省去了源文件与目标文件对URL相 同的部分。适用于内部超链接，有利于 站点整体移动，这种链接调试方便，不 需上网。但移动源文件则会破坏链接。
• 1．创建并应用 CSS 样式 • 2．使用文档内样式表 • 3链接外部样式表 • 4．使用CSS设置超链接17
– <style type="text/css"> <!—
– a:link { text-decoration: none} – a:active { text-decoration: none } – a:visited { text-decoration: none } – --> – </style>
– <input type="checkbox" name="ah" value="钓鱼">钓鱼
– <input type="checkbox" name="ah" value="集邮">集邮
上机实训2 使用HTML语言编程
– 目的与要求：练习并掌握HTML各种 标记的使用。
思考与练习
– 一．简答题： – 二．上机操作
• Hale Waihona Puke Baidu.使用 CSS 滤镜
– li { – font-size: 25px; – color: red; – font-family: "隶书"; –}
2.11 设计网页表单
–2.11.1制作“用户个人信息”表单 –2.11.2知识讲解—表单
• 1.创建交互表单 • 2. 插入输入型表单对象 • 3. 使用其他表单对象 例： <TEXTAREA name="textarea"
标记包括标题 和文字的字体、字号、字 型、颜色、段落格式以及文本布局等。
–2.2.1制作“2019年最受期待的十大游戏” 网页
图2-3 2019年十大游戏(段落和文字标记) 网页效果图
–2.2.2 知识讲解—段落和文字标记
– 1．标题字体大小标记 – 2．对齐方向的控制 – 3．文本文件标记 – 4．段落与换行 – 5．水平线 – 6．特殊引述文件区标记 – 7．特殊符号
–2.5.2 知识讲解—列表标记
2．无序列表
无序列表与有序列表的区别仅在于前导字符不 一样，它的前导字符一般为黑点、实方框或空 心圆，而不是编号。无序列表只是列表项的先 后次序无关紧要。
前面介绍的几种列表是可以嵌套使用的，有序 列表和无序列表不仅可以自身嵌套，而且彼此 可互相嵌套。
–2.5.3 拓展训练--“奥林匹克知识”网页
2．6表格
– 2．6．1制作“旅游风向标”网页”
• 本例包含两个独立的表格。标题及各地风光导航部分是 一个无边框的表格。图片欣赏部分是一个有边框的表格。
–2.6.2 知识讲解—表格 –2．表格字段背景颜色的设定
– 利用上面的知识制作的是基本表格，但是太单调。 那么，这一部分讲述为表格字段加入色彩来美化表 格。
<A href="mailto:tjp?subject=关于ASP"> 与我联系</A>
– 5．更改链接文字的颜色
在默认情况下，超链接的文字是蓝色（blue）， 访问过的文字呈粟色（maroon）。当然可以 改成自己喜欢的颜色，方法是改变<body>标记 中相关的属性值。
请参照例2.9体会如何将链接颜色修改成自己 喜欢的颜色。
cols="50" rows="6" > 请留 言!</TEXTAREA> • 4．提交处理表单
–2.11.3拓展训练—注册表单
– <input type="checkbox" name="ah" value="音乐">音乐
– <input type="checkbox" name="ah" value="汽车">汽车
请参照例2.8理解根相对路径。
—4．创建邮件超链接 使用A标记创建邮件链接时，A标记的
href属性值由3部分组成： 电子邮件协议：mailto 电子邮件地址：如yunhai 可选的邮件主题，其形式是：subject=主
题
第1部分与第2部分用“：”隔开，第2部分 与第3部分用“？”隔开。如：
–2.3.3 拓展训练—制作“实例回顾”的链接网页
2．4 嵌入图片
– 2.4.1制作“风光旖旎”网页 –2.4.2 知识讲解—嵌入图片
– 2．图片标记 – 3．用图片作超链接 – 1．图片文件的格式：
• 语法：
–2.4.3 拓展训练—制作“流行街舞”网页
2．5 列表标记
–2.5.1制作“雪在江湖”网页