ASP.NET实训教程第2章 HTML速成.ppt

第2章HTML速成2.1实验一了解HTML2.2实验二熟悉HTML标记2.3实验三表格练习2.4实验四多视窗练习2.5实验五表单应用练习2.1实验一了解HTML实验目的1.掌握使用“记事本”编辑HTML代码的基本操作以及使用InternetExplorer测试HTML文件的操作。2.掌握head、title、body等基本标记的用法。3.能够利用文本编辑器建立HTML文档，制作简单的网页。2.1实验一了解HTML实验内容使用记事本编写一个带有标题的网页，并设置背景图片和链接文字的颜色，操作步骤如下。(1)在桌面上右击鼠标，在弹出的快捷菜单中选择“新建”→“文本文档”命令，如图2-1所示。(2)在新建的文本文档中加入HTML代码，将其另存为以.htm或.html为后缀名的文件，一个HTML文件便创建成功了。2.1实验一了解HTML(3)通过InternetExplorer浏览编辑的效果。注意:如果在第(2)步中另存文件后无法显示HTML文件图标，需在“文件夹选项”对话框中取消选中“隐藏已知文件类型的扩展名”复选框，如图2-2所示。参考代码如下：2.1实验一了解HTML2.1实验一了解HTML浏览网页，可以看到如图2-3所示的页面。有许多HTML可视化的编辑软件如Dreamweaver、FrontPage等，但在熟悉了HTML的标记后会发现，在VisualStudio.NET2003编辑窗口中乎写HTML代码会更加得心应乎，因为VisualStudio.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所示的页面。在VisualStudio2003中创建和设置多视窗特别方便，操作步骤如下。(1)新建ASP.NETWeb应用程序后，选择“文件”菜单中的“添加新项”命令，打开如图2-9所示的对话框，选择“框架集”选项，单击“打开”按钮。(2)打开“