02第二讲html编程技术.pptVIP

例：窗口切分 html head title2－14/title /head frameset rows=20%,* frame name=top src=top.html noresize=noresize / frameset cols=20%,* frame name=left src=left.html noresize=noresize / frame name=main src=2-3.html / /frameset /frameset /html 浮动窗口 浮动窗口 iframe：网页上的浮动窗口 iframe name=dog width=150 height=110 src=dog.jpg scrolling=no align=right/iframe 小结 HTML 常用标签 图像img，超级链接a href=…/a 分行、分段、字体 列表：有序、无序、标题 表格 表单 窗口拆分 作业 1. 使用HTML标记语言编写网页，实现如下用户注册页面 作业 2.使用HTML标记语言编写网页，实现如下网页布局效果 实训一 HTML编程技术应用 训练目的 通过本次技能训练，使学生掌握Web服务器安装与环境配置。 训练内容 在记事本中编写网页代码，可以借助DW生成部分代码，完成作业的设计。 训练要求 总结调试过程中遇到的问题及解决办法。 * * 演示： TG4-Source文件夹中“图片对齐“用例 强调2个属性： 1）align 2）src * a href= target=_blankggg/a _self _parent * 提问：上图的两行和两段发现有什么不同没有？ 引导并解释解释： 1）换行间距较小。 2）BR标签比较特殊，不需要配对，即不需要/BR * * 1)Face字体 2）size 大小 3）color 颜色 * * 演示： TG4-Source文件夹中“有序列表“用例，并演示改变type类型的效果。 * * * 强调表格的几个重要组成部分： 1）行 2）列 3）单元格 4）列标题（一般位于第一行或第一列，粗体显示），可选 5）表格标题，可选 * 1.先根据效果图：集体提问，表格是多少行多少列？ 回答：肯定是2行3列。 2.讲解代码：TABLE表示….TR表示…TD表示。 3.为了代码的可读性，象C语言写代码一样，为了显示层次关系， 建议学员写HTML代码时保持一定的缩进，如幻灯片的示例代码所示。 4.演示：TG5-Source文件夹中的“简单表格”用例。 * * 提问： 1.我们前面学习过表单，请问表单有什么用途？ 引导回答： 1)在用户注册某种服务或活动时收集姓名、地址、电话号码、电子邮件地址和其他信息 2)在用户购买商品时收集信息 3)收集关于网站的反馈信息 2.表单使用哪个标签？有哪些属性？ * * * * * * * * 第二讲 HTML编程技术 *** 温故 *** Java Web技术概述 课程简介 B/S结构的基本概念 主流Web技术介绍 JavaWeb环境配置 Web项目开发步骤 存在的问题 个别同学上机不认真，学习主动性差 *** 知新*** HTML编程技术 HTML文件执行过程 HTML文件结构 HTML常用标记 本地磁盘 2.1 HTML文件执行过程 浏览器从服务器提取HTML文件 浏览器本地加载HTML文件（P11） 只能调试Html/CSS/JavaScript编写的程序 1请求HTML文件 Web服务器 浏览器 4 解释HTML文件 3返回HTML文件 2 查找HTML文件 2.2 HTML文件结构 html/html是HTML文件的根标记 头 head/head 对当前网页进行说明和声明的信息 title/title标题 体 body/body 决定网页显示效果 2.3 HTML常用标记 HTML：HyperText Markup Language HTML文档是由标记组成的文档 HTML标记大部分开始标记与结束标记成对出现，也有个别标记没有结束标志。很多标记是有参数的，参数只能出现在开始标记中。 HTML HEAD TITLE学习 HTML /TITLE /HEAD BODY BGCOLOR = green H1欢迎来到 HTML 世界/H1 /BODY /HTML 标签 标识 BODY 元素 属性 提供有关元素的附加信息 值 分配给属性的内容 HTML常用标记 结构化标记:描述Web页的整体结构 html/html head/head title/title body/body 文本标记：编排文本内容的布局和格式 列表标记：以列表的形式显示文本 表格标记：将要显示的内容以表格的形式组织 表单标记：创建数据条目