ASP动态网页程序设计与制作实训教程课件

1、ASP动态网页程序设计与制作实训教程l21 HTML标记的认识与使用2.1.1 2.1.1 制作制作“中国足球中国足球”网页网页2.1.2 2.1.2 知识讲解知识讲解认识并使用认识并使用HTMLHTML标记标记 1HTML标记及文件结构标记及文件结构 2标记的属性标记的属性2.1.3 2.1.3 拓展训练拓展训练制作漂亮制作漂亮MMMM网页网页ASP动态网页程序设计与制作实训教程l22 段落和文字标记l文档是网页的核心内容，置文档格式的文档是网页的核心内容，置文档格式的标记包括标题标记包括标题 和文字的字体、字号、字和文字的字体、字号、字型、颜色、段落格式以及文本布局等。型、颜色、段落格式以

2、及文本布局等。2.2.1制作“20102010年最受期待的十大游戏年最受期待的十大游戏”网页l图图2-3 2010年十大游戏年十大游戏(段落和文字标记段落和文字标记)网页效果图网页效果图ASP动态网页程序设计与制作实训教程2.2.2 2.2.2 知识讲解知识讲解段落和文字标记段落和文字标记1标题字体大小标记标题字体大小标记2对齐方向的控制对齐方向的控制3文本文件标记文本文件标记4段落与换行段落与换行5水平线水平线6特殊引述文件区标记特殊引述文件区标记7特殊符号特殊符号2.2.3 2.2.3 拓展训练拓展训练制作制作“世博场馆简世博场馆简介介”网页网页ASP动态网页程序设计与制作实训教程l23

3、建立超链接2.3.1 制作“流行街舞”网页2.3.2 2.3.2 知识讲解知识讲解建立超链接建立超链接 1文件内的链接文件内的链接HREF:标记最常见的属性，用于指明超链接所指向的URL。target：用于指定在哪个窗口打开超链接所指向的网页。常见的有四个属性值：ASP动态网页程序设计与制作实训教程l默认值为_self。在没有框架的网页中，_top、_self、_parent是同一个窗口。除这四个值之外，target的属性值还可以是任意一个窗口的名称。ltitle：用于定义指向超链接时所显示的标题文字。ASP动态网页程序设计与制作实训教程2跨文件、跨网络的链接跨文件、跨网络的链接3相对路径和绝

4、对路径相对路径和绝对路径l路径是指从站点根文件夹或当前文件夹起到目标文件所经过的路线。在进行链接时，需要使用路径指明目标文件所在的位置。l路径有以下3种类型： 绝对路径：也称为绝对URL，指被链接文档的完整URL，是包含服务器协议的完整路径。使用绝对路径与链接的源文件位置无关，适用于外部链接，但测试链接须上网进行。ASP动态网页程序设计与制作实训教程l相对路径：以源文件所在位置为起点到目标文件经由的路径。指和源文件所在文件夹相对的路径。指定文档相对路径时，省去了源文件与目标文件对URL相同的部分。适用于内部超链接，有利于站点整体移动，这种链接调试方便，不需上网。但移动源文件则会破坏链接。ASP

5、动态网页程序设计与制作实训教程l4创建邮件超链接创建邮件超链接 使用A标记创建邮件链接时，A标记的href属性值由3部分组成：电子邮件协议：mailto电子邮件地址：如可选的邮件主题，其形式是：subject=主题ASP动态网页程序设计与制作实训教程l第1部分与第2部分用“：”隔开，第2部分与第3部分用“？”隔开。如： 与我联系 5更改链接文字的颜色更改链接文字的颜色ASP动态网页程序设计与制作实训教程l在默认情况下，超链接的文字是蓝色（blue），访问过的文字呈粟色（maroon）。当然可以改成自己喜欢的颜色，方法是改变标记中相关的属性值。 请参照例2.9体会如何将链接颜色修改成自己喜欢的颜

6、色。2.3.3 2.3.3 拓展训练拓展训练制作制作“实例回顾实例回顾”的链接网页的链接网页ASP动态网页程序设计与制作实训教程l24 嵌入图片 2.4.1制作制作“风光旖旎风光旖旎”网页网页2.4.2 2.4.2 知识讲解知识讲解嵌入图片嵌入图片 2图片标记图片标记 3用图片作超链接用图片作超链接 1图片文件的格式：图片文件的格式： 语法：2.4.3 2.4.3 拓展训练拓展训练制作制作“流行街舞流行街舞”网页网页ASP动态网页程序设计与制作实训教程l25 列表标记2.5.12.5.1制作制作“雪在江湖雪在江湖”网页网页2.5.2 2.5.2 知识讲解知识讲解列表标记列表标记l2无序列表无序

7、列表l无序列表与有序列表的区别仅在于前导字符不无序列表与有序列表的区别仅在于前导字符不一样，它的前导字符一般为黑点、实方框或空一样，它的前导字符一般为黑点、实方框或空心圆，而不是编号。无序列表只是列表项的先心圆，而不是编号。无序列表只是列表项的先后次序无关紧要。后次序无关紧要。l前面介绍的几种列表是可以嵌套使用的，有序前面介绍的几种列表是可以嵌套使用的，有序列表和无序列表不仅可以自身嵌套，而且彼此列表和无序列表不仅可以自身嵌套，而且彼此可互相嵌套。可互相嵌套。2.5.3 2.5.3 拓展训练拓展训练-“奥林匹克知识奥林匹克知识”网页网页ASP动态网页程序设计与制作实训教程l26表格 261制作

8、制作“旅游风向标旅游风向标”网页网页” 本例包含两个独立的表格。标题及各地风光导航部分是一个无边框的表格。图片欣赏部分是一个有边框的表格。2.6.2 2.6.2 知识讲解知识讲解表格表格2 2表格字段背景颜色的设定表格字段背景颜色的设定 利用上面的知识制作的是基本表格，但是太单调。利用上面的知识制作的是基本表格，但是太单调。那么，这一部分讲述为表格字段加入色彩来美化表那么，这一部分讲述为表格字段加入色彩来美化表格。格。3.3.表格中的图文件表格中的图文件2.6.3 2.6.3 拓展训练拓展训练-制作制作“上海世博上海世博”网页网页ASP动态网页程序设计与制作实训教程l27框架l在网页的制作上，

9、如果能随时看到主列表项，在网页的制作上，如果能随时看到主列表项，当点击某列表项时不希望跳到新的页面，这时当点击某列表项时不希望跳到新的页面，这时就可以采用框架来完成网页的制作。框架设定就可以采用框架来完成网页的制作。框架设定主要是使用主要是使用和和两个标记来两个标记来制作，以达到窗口分割目的。制作，以达到窗口分割目的。2.7.1 2.7.1 制作制作“风景欣赏网页风景欣赏网页”2.7.2 2.7.2 知识讲解知识讲解框架框架 1框架标记 2. 框架间的链接2.7.3 2.7.3 拓展训练拓展训练制作制作“可爱咪咪可爱咪咪”网页网页ASP动态网页程序设计与制作实训教程l28自动刷新页面 浏览网页

10、时，大家常会遇到页面停留几秒后自动指向一个新的页面，这就叫自动刷新页面。2.8.1 2.8.1 制作制作“中华古文化网页中华古文化网页”2.8.2 2.8.2 知识讲解知识讲解自动刷新页面自动刷新页面2.8.3 2.8.3 拓展训练拓展训练制作制作“自动刷新自动刷新页面页面”网页网页ASP动态网页程序设计与制作实训教程l29 插入多媒体2.9.1 2.9.1 制作制作“庆祝世博成功庆祝世博成功”网页网页2.9.2 2.9.2 知识讲解知识讲解插入多媒体插入多媒体 1 1插入字幕标记插入字幕标记 2 2插入背景音乐标记插入背景音乐标记2.9.3 2.9.3 拓展训练拓展训练制作制作“字幕滚动字幕

11、滚动”网页网页ASP动态网页程序设计与制作实训教程l210层叠样式表CSS2.10.12.10.1制作制作“小新文化网页小新文化网页”2.10.2 2.10.2 知识讲解知识讲解层叠样式表层叠样式表 1创建并应用 CSS 样式 2使用文档内样式表 3链接外部样式表 4使用CSS设置超链接17ASP动态网页程序设计与制作实训教程 5.使用 CSS 滤镜 li font-size: 25px; color: red; font-family: 隶书隶书; ASP动态网页程序设计与制作实训教程l2.11 设计网页表单2.11.12.11.1制作制作“用户个人信息用户个人信息”表单表单2.11.22.11.2知识讲解知识讲解表单表单1.创建交互表单2. 插入输入型表单对象3. 使用其他表单对象例：