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