HTML速成.ppt

1、第2章 HTML速成,2.1 实验一 了解HTML 2.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、标，在弹出的快捷菜单中选择“新建” “文本文档”命令，如图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、-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.掌握有序

4、列表、无序列表的创建方法。,下一页,返回,2.2 实验二 熟悉HTML标记,实验内容 1.字体标记的使用 具体要求:实现如Word中带有各级标题的文字格式，文章中的文字使用常用物理字符样式和逻辑字符样式。 参考代码如下:,下一页,返回,上一页,2.2 实验二 熟悉HTML标记,下一页,返回,上一页,2.2 实验二 熟悉HTML标记,浏览网页，可以看到如图2-5所示的页面。 2.文字布局、图片和列表标记的使用 具体要求:使用div标记实现页面任意位置布局，div标记内嵌套图片、列表标记，下面实现一个简单的宠物介绍网页供参考。 参考代码如下:,下一页,返回,上一页,2.2 实验二 熟悉HTML标记

5、,下一页,返回,上一页,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 实验三 表格练习,下一页,返

6、回,上一页,2.3 实验三 表格练习,下一页,返回,上一页,2.3 实验三 表格练习,下一页,返回,上一页,2.3 实验三 表格练习,下一页,返回,上一页,2.3 实验三 表格练习,下一页,返回,上一页,2.3 实验三 表格练习,下一页,返回,上一页,2.3 实验三 表格练习,下一页,返回,上一页,2.3 实验三 表格练习,浏览网页，可以看到如图2-7所示的页面。,返回,上一页,2.4 实验四 多视窗练习,实验目的 1.熟练掌握多视窗的创建和排列设置方法。 2.掌握多视窗之间的联系。,下一页,返回,2.4 实验四 多视窗练习,实验内容 实现上中下分割窗体的效果，并模拟门户网站的导航菜单建立一个

7、简单的导航菜单。 参考代码如下:,下一页,返回,上一页,2.4 实验四 多视窗练习,下一页,返回,上一页,2.4 实验四 多视窗练习,t1.htm部分代码如下:,下一页,返回,上一页,2.4 实验四 多视窗练习,浏览网页，可以看到如图2-8所示的页面。 在Visual Studio 2003中创建和设置多视窗特别方便，操作步骤如下。 (1)新建ASP.NET Web应用程序后，选择“文件”菜单中的“添加新项”命令，打开如图2-9所示的对话框，选择“框架集”选项，单击“打开”按钮。 (2)打开“选择框架集模板”对话框，如图2-10所示，选择击要的框架集模板，单击“确定”按钮。 (3)创建框架集成

8、功，可以通过鼠标拖动框架边框设置框架所占的比例;可以通过设置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 编辑窗口,返回,图