《第2讲 利用HTML编写网页1.ppt》由会员分享，可在线阅读，更多相关《第2讲 利用HTML编写网页1.ppt（25页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、JavaScript程序设计第第2讲讲 利用HTML编写网页1http:/2本次课任务v制作图文并茂的页面制作图文并茂的页面 http:/3本次课目标v会使用会使用HTML的基本结构创建网页的基本结构创建网页v会使用文本相关标签实现文字修饰和布局会使用文本相关标签实现文字修饰和布局v会使用图像相关标签实现图文并茂的页面会使用图像相关标签实现图文并茂的页面v会使用超链接相关标签实现页面间的跳转会使用超链接相关标签实现页面间的跳转v会使用表格的基本结构实现简单表格会使用表格的基本结构实现简单表格http:/4HTML文件的基本结构vHTML文档的结构文档的结构我的第一个网页我的第一个网页 Hell
2、o World!HTML 网页网页头部部分头部部分主体部分主体部分标签标记标签标记 HTML 文档的开始和结束文档的开始和结束网页标题网页标题网页内容，可以是网页内容，可以是文本、图像等文本、图像等这部分包含文本、图像和链接。它包括在这部分包含文本、图像和链接。它包括在 标签内标签内查看源代码查看源代码这部分包括标题和其他说明信息。包括在这部分包括标题和其他说明信息。包括在 标签内标签内http:/5页面背景色或背景图像 网页背景色彩网页背景色彩 网页背景图像网页背景图像 小提示：小提示：即便是页面的背景颜色是白色也需要在body标签中进行相应的设置http:/6如何实现图文内容的布局，达到如
3、左图所示页面的效果？分析上图所示页面，应该用什么进行布局？什么是表格布局使用使用表格表格进行布局进行布局用表格对网页的内用表格对网页的内容进行整体控制容进行整体控制http:/7表格的基本结构行行列列单元格单元格在在 HTML 文档中，广泛使用文档中，广泛使用表格表格来存放网页上的文本和图像来存放网页上的文本和图像http:/8表格的基本语法 单元格内容单元格内容 .定义表格定义表格 定义列定义列 定义行定义行 border用来设置表用来设置表格边框尺寸大小格边框尺寸大小http:/9制作“产品类目”background属性用来设置表格的背景图片属性用来设置表格的背景图片bgcolor属性用来
4、设置表格、行、列属性用来设置表格、行、列的背景色。的背景色。“#EBEFFF”是用是用RGB表表示的一种颜色值，示的一种颜色值，RGB指的是红绿指的是红绿蓝蓝，下图就是，下图就是RGB颜色对照表颜色对照表。align属性用来设置表属性用来设置表格、行、列的对齐方式格、行、列的对齐方式合并列合并列Colspan属性属性表格布局1v整个页面的整体布局整个页面的整体布局http:/10http:/11v利用表格制作页眉部分利用表格制作页眉部分表格布局2跨跨2行行，并放了，并放了一副图片一副图片此单元格放此单元格放了一副图片了一副图片此单元格此单元格跨了跨了3列列合并行合并行rowspan属性属性ht
5、tp:/12如何使用表格进行布局使用表格布局下图，需要几行几列？使用表格布局下图，需要几行几列？需要需要7行行2列列 http:/13如何使用表格进行布局http:/14文本相关标签v字体、字号字体、字号标题标签标签特殊符号v行的控制行的控制段落标签换行标签使用了使用了 设置了颜色设置了颜色设置段落设置段落设置文字大小设置文字大小和颜色和颜色设置换行设置换行http:/15字体、字号相关标签v标题标签标题标签.#=1,2,3,4,5,6 说明：到字体大小依次递减H1 到到 H6 标签用于指定不同级别的标题标签用于指定不同级别的标题查看源代码查看源代码使用了使用了 设置了颜色和设置了颜色和字体字
6、体v标签标签v特殊符号特殊符号http:/16字体、字号相关标签特殊字符特殊字符转义码转义码空格空格 引号引号(“”)"小于小于()>版权号版权号()©字体的字体的大小值大小值字体的字体的颜色颜色字体的字体的类型类型http:/17行的控制相关标签v段落标签段落标签段(Paragraph)(可以看作是空行)v换行标签换行标签换行 换行了换行了换段了换段了http:/18图像标签v图像的基本语法图像的基本语法v图像与文本的对齐方式图像与文本的对齐方式图像的图像的位置位置图像的图像的宽度宽度图像的图像的高度高度为图像添加的提示性文字为图像添加的提示性文字图像与文
7、本居中对图像与文本居中对齐齐,还可以取还可以取top,bottom 值值http:/19文字布局v内容分隔内容分隔标标签签v项目列表和编号项目列表和编号有序列表无序列表v预格式文本预格式文本标签标签有序列表有序列表无序列表无序列表用了预先定义用了预先定义好的格式好的格式水平分隔线水平分隔线如何使用列表 http:/20预格式文本标签http:/21http:/22如何使用内容分隔标签v线的厚度值线的厚度值线的宽度线的宽度查看源代码查看源代码 标签用于在页面上绘制水平线标签用于在页面上绘制水平线 线的颜色线的颜色页面链接标签http:/23http:/24滚动标签 滚动文字或图像滚动文字或图像滚
8、动延迟滚动延迟时间时间滚动对象的滚动对象的方向方向v说明：说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。http:/25总结v哪个标签中的哪个属性可以改变字体颜色和哪个标签中的哪个属性可以改变字体颜色和字号？字号？v图像与文本的对齐方式有哪几种？图像与文本的对齐方式有哪几种？v项目列表和编号有何区别？分别适用什么场项目列表和编号有何区别？分别适用什么场合？合？v链接到其他页面时，路径的表示方法有两种：链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别相对路径和绝对路径，这两种路径有何区别和联系？和联系？