HTML速成.ppt

第第2章章 HTML速成速成2.1 实验一实验一 了解了解HTML2.2 实验二实验二 熟悉熟悉HTML标记标记2.3 实验三实验三 表格练习表格练习2.4 实验四实验四 多视窗练习多视窗练习2.5 实验五实验五 表单应用练习表单应用练习2.1 实实验一验一 了解了解HTML实验目的实验目的 1.掌握使用掌握使用“记事本记事本”编辑编辑HTML代码的基本操作以及使代码的基本操作以及使用用Internet Explorer测试测试HTML文件的操作。文件的操作。2.掌握掌握head、title、body等基本标记的用法。等基本标记的用法。3.能够利用文本编辑器建立能够利用文本编辑器建立HTML文档，制作简单的网页。文档，制作简单的网页。下一页返回2.1 实实验一验一 了解了解HTML实验内容实验内容 使用记事本编写一个带有标题的网页，并设置背景图片和使用记事本编写一个带有标题的网页，并设置背景图片和链接文字的颜色，操作步骤如下。链接文字的颜色，操作步骤如下。(1)在桌面上右击鼠标，在弹出的快捷菜单中选择在桌面上右击鼠标，在弹出的快捷菜单中选择“新建新建”“文本文档文本文档”命令，如命令，如图图2-1所示。所示。(2)在新建的文本文档中加入在新建的文本文档中加入HTML代码，将其另存为以代码，将其另存为以.htm或或.html为后缀名的文件，一个为后缀名的文件，一个HTML文件便创建成功了。文件便创建成功了。下一页返回上一页2.1 实实验一验一 了解了解HTML (3)通过通过Internet Explorer浏览编辑的效果。浏览编辑的效果。注意注意:如果在第如果在第(2)步中另存文件后无法显示步中另存文件后无法显示HTML文件图文件图标，需在标，需在“文件夹选项文件夹选项”对话框中取消选中对话框中取消选中“隐藏已知文件隐藏已知文件类型的扩展名类型的扩展名”复选框，如复选框，如图图2-2所示。所示。参考代码如下：参考代码如下：下一页返回上一页2.1 实实验一验一 了解了解HTML下一页返回上一页2.1 实实验一验一 了解了解HTML 浏览网页，可以看到如浏览网页，可以看到如图图2-3所示的页面。所示的页面。有许多有许多HTML可视化的编辑软件如可视化的编辑软件如Dreamweaver、FrontPage等，但在熟悉了等，但在熟悉了HTML的标记后会发现，在的标记后会发现，在Visual Studio.NET 2003编辑窗口中乎写编辑窗口中乎写HTML代码会更加得心应乎，代码会更加得心应乎，因为因为Visual Studio.NET2003有代码提示功能和自动检测页面有代码提示功能和自动检测页面命名冲突的功能等，如命名冲突的功能等，如图图2-4所示。即使没有记住标记的属性，所示。即使没有记住标记的属性，也没有关系。也没有关系。返回上一页2.2 实实验二验二 熟悉熟悉HTML标记标记实验目的实验目的 1.掌握掌握FONT标记的用法。标记的用法。2.了解常用物理字符样式和逻辑字符样式。了解常用物理字符样式和逻辑字符样式。3.了解文字布局的常用标记。了解文字布局的常用标记。4.掌握图片标记的用法及属性设置。掌握图片标记的用法及属性设置。5.掌握链接标记的用法。掌握链接标记的用法。6.掌握有序列表、无序列表的创建方法。掌握有序列表、无序列表的创建方法。下一页返回2.2 实实验二验二 熟悉熟悉HTML标记标记实验内容实验内容 1.字体标记的使用字体标记的使用 具体要求具体要求:实现如实现如Word中带有各级标题的文字格式，文章中带有各级标题的文字格式，文章中的文字使用常用物理字符样式和逻辑字符样式。中的文字使用常用物理字符样式和逻辑字符样式。参考代码如下参考代码如下:下一页返回上一页2.2 实实验二验二 熟悉熟悉HTML标记标记下一页返回上一页2.2 实实验二验二 熟悉熟悉HTML标记标记 浏览网页，可以看到如浏览网页，可以看到如图图2-5所示的页面。所示的页面。2.文字布局、图片和列表标记的使用文字布局、图片和列表标记的使用 具体要求具体要求:使用使用div标记实现页面任意位置布局，标记实现页面任意位置布局，div标记内标记内嵌套图片、列表标记，下面实现一个简单的宠物介绍网页供嵌套图片、列表标记，下面实现一个简单的宠物介绍网页供参考。参考。参考代码如下参考代码如下:下一页返回上一页2.2 实实验二验二 熟悉熟悉HTML标记标记下一页返回上一页2.2 实实验二验二 熟悉熟悉HTML标记标记下一页返回上一页2.2 实实验二验二 熟悉熟悉HTML标记标记下一页返回上一页2.2 实实验二验二 熟悉熟悉HTML标记标记 浏览网页，可以看到如浏览网页，可以看到如图图2-6所示的页面。所示的页面。返回上一页2.3 实实验三验三 表格练习表格练习实验目的实验目的 1.熟练掌握熟练掌握table标记的用法。标记的用法。2.掌握掌握tr、td标记的关系及其内部布局。标记的关系及其内部布局。3.掌握表格嵌套的用法。掌握表格嵌套的用法。下一页返回2.3 实实验三验三 表格练习表格练习实验内容实验内容 制作一个简单的个人简历网页，要求跨多行、多列，表格制作一个简单的个人简历网页，要求跨多行、多列，表格嵌套。嵌套。参考代码如下参考代码如下:下一页返回上一页2.3 实实验三验三 表格练习表格练习下一页返回上一页2.3 实实验三验三 表格练习表格练习下一页返回上一页2.3 实实验三验三 表格练习表格练习下一页返回上一页2.3 实实验三验三 表格练习表格练习下一页返回上一页2.3 实实验三验三 表格练习表格练习下一页返回上一页2.3 实实验三验三 表格练习表格练习下一页返回上一页2.3 实实验三验三 表格练习表格练习下一页返回上一页2.3 实实验三验三 表格练习表格练习下一页返回上一页2.3 实实验三验三 表格练习表格练习 浏览网页，可以看到如浏览网页，可以看到如图图2-7所示的页面。所示的页面。返回上一页2.4 实实验四验四 多视窗练习多视窗练习实验目的实验目的 1.熟练掌握多视窗的创建和排列设置方法。熟练掌握多视窗的创建和排列设置方法。2.掌握多视窗之间的联系。掌握多视窗之间的联系。下一页返回2.4 实实验四验四 多视窗练习多视窗练习实验内容实验内容 实现上中下分割窗体的效果，并模拟门户网站的导航菜单实现上中下分割窗体的效果，并模拟门户网站的导航菜单建立一个简单的导航菜单。建立一个简单的导航菜单。参考代码如下参考代码如下:下一页返回上一页2.4 实实验四验四 多视窗练习多视窗练习下一页返回上一页2.4 实实验四验四 多视窗练习多视窗练习 t1.htm部分代码如下部分代码如下:下一页返回上一页2.4 实实验四验四 多视窗练习多视窗练习 浏览网页，可以看到如浏览网页，可以看到如图图2-8所示的页面。所示的页面。在在Visual Studio 2003中创建和设置多视窗特别方便，操作步中创建和设置多视窗特别方便，操作步骤如下。骤如下。(1)新建新建ASP.NET Web应用程序后，选择应用程序后，选择“文件文件”菜单中的菜单中的“添加新项添加新项”命令，打开如命令，打开如图图2-9所示的对话框，选择所示的对话框，选择“框架集框架集”选项，单击选项，单击“打开打开”按钮。按钮。(2)打开打开“选择框架集模板选择框架集模板”对话框，如对话框，如图图2-10所示，选择击所示，选择击要的框架集模板，单击要的框架集模板，单击“确定确定”按钮。按钮。(3)创建框架集成功，可以通过鼠标拖动框架边框设置框架所创建框架集成功，可以通过鼠标拖动框架边框设置框架所占的比例占的比例;可以通过设置可以通过设置frameborder属性为属性为no去掉框架边框。去掉框架边框。返回上一页2.5 实验五实验五 表单应用练习表单应用练习实验目的实验目的 1.掌握表单标记、写入标记、列表框的用法。掌握表单标记、写入标记、列表框的用法。2.掌握多视窗之间的联系。掌握多视窗之间的联系。下一页返回2.5 实验五实验五 表单应用练习表单应用练习实验内容实验内容 实现简单用户注册页面输入功能。实现简单用户注册页面输入功能。参考代码如下参考代码如下:下一页返回上一页2.5 实验五实验五 表单应用练习表单应用练习下一页返回上一页2.5 实验五实验五 表单应用练习表单应用练习下一页返回上一页2.5 实验五实验五 表单应用练习表单应用练习下一页返回上一页2.5 实验五实验五 表单应用练习表单应用练习 浏览网页，可以看到如浏览网页，可以看到如图图2-11所示的页面。所示的页面。该实验中用到了脚本语言该实验中用到了脚本语言Java Script，它是一种很重要的，它是一种很重要的客户端脚本语言，要开发客户端脚本语言，要开发Web应用程序就应该熟练掌握应用程序就应该熟练掌握Java Script语言。语言。返回上一页图图2-1 新建文本文档新建文本文档返回图图2-2 “文件夹选项文件夹选项”对话框对话框返回图图2-3 个人主页网页结果个人主页网页结果返回图图2-4 Visual Studio 2003 编辑窗口编辑窗口返回图图2-5 实训教程网页运行结果实训教程网页运行结果返回图图2-6 庞物介绍网页运行结果庞物介绍网页运行结果返回图图2-7 个人简历网页运行结果个人简历网页运行结果返回图图2-8 框架集网页运行结果框架集网页运行结果返回图图2-9 “添加新项添加新项”对话框对话框返回图图2-10 “选择框架集模板选择框架集模板”对话框对话框返回图图2-11 用户注册网页运行结果用户注册网页运行结果返回