模块3-利用HTML编写简单网.ppt_第1页
模块3-利用HTML编写简单网.ppt_第2页
模块3-利用HTML编写简单网.ppt_第3页
模块3-利用HTML编写简单网.ppt_第4页
模块3-利用HTML编写简单网.ppt_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

主讲教师：谭荣华,网页设计与制作 学习情境3：利用HTML编写简单网页,布置习题,学习目标,知识讲解,课堂实践,利用HTML编写简单网页,学习情境3,课程引导,网页的组成元素以及属性设置最终都形成HTML代码，有必要对HTML语言的语法结构、HTML标记有一定的了解，虽然很少直接输入HTML代码制作网页，但经常要修改HTML代码以满足网页设计的需要，当HTML代码出现错误时，也要切换到代码视图，查找并改正错误。,概述,布置习题,知识讲解,课堂实践,教学总结,课程引导,利用HTML编写简单网页,学习情境3,学习目标,掌握Dreamweaver CS3的HTML源代码编辑功能。掌握快速标签编辑器、标签选择器和标签编辑器的使用方法。 掌握常用的HTML标记的含义及其应用。 学会手工修改HTML代码。,学习目标,布置习题,知识讲解,课堂实践,教学总结,课程引导,利用HTML编写简单网页,学习情境3,学习目标,手工编写、修改HTML代码的能力,专 业 能 力 目 标,布置习题,知识讲解,课堂实践,教学总结,课程引导,利用HTML编写简单网页,学习情境3,学习目标,HTML语言的结构、格式 文本、排版格式、图像、链接、表格、表单、层等标记 块级元素和行级元素的概念和区别,专 业 知 识 目 标,布置习题,知识讲解,课堂实践,教学总结,课程引导,利用HTML编写简单网页,学习情境3,学习目标,自主学习能力 创新能力 感悟能力 效率观念 获取知识能力,专 业 素 质 目 标,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,教学案例,案例01 - 利用HTML代码编写网页,案例02 - 在网页中输入并设置文本,案例03 - 更改网页中的背景,综合案例实训 - 制作“九龙湾” 图文混排网页,案例04 - 处理网页中的图像,案例05 - 创建简单表格,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,案例操作过程,相关知识点,案例01 - 利用HTML代码编写网页,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,HTML(HyperText Markup Language)即超文本标记语言，是使用类似于“”的标记来描述头部信息、段落、列表、超链接等内容的一种结构化语言。 目前我们所使用的是HTML4.01版 HTML XML DHTML XHTML可以看作是一种过渡,HTML 简介,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,一个标准的HTML文件的基本结构如下： (一般为标题等) (一般为正文) ,HTML文件结构,说明： HEAD标记部分一般描述有关该HTML文件的一些基本信息，如：网页标题、关键字和网页制作工具等信息,说明： BODY标记是主体，是HTML文件的实际内容,说明： 并不强求书写缩进，只为易读性,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,标记：是元素的代码表现形式。是指由”括起来的具有特定含义的字符串，每一个HTML元素都有对应的起始标记和结束标记。开始标记为结束标记为。 属性：与标记相关的若干性质，只出现在起始标记中，且具有固定的描述结构即 属性名=“属性值”。 如：,标记与属性,标记和属性的一些特性： HTML标记和属性通常不区分大小写 属性值通常用双引号引起来，属性值为单个字符时可省 各属性之间用空格分开，如一行写不下，可在下行接着写 HTML元素允许相互嵌套，但不得交叉嵌套 每个HTML元素只能嵌套合法的子元素 有些HTML元素可以没有结束标记 所有的HTML标记均为ASCII码字符，不能是全角、中文字符,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,特殊字符,在HTML中，定义转义字符串的原因有两个：第一个原因是像“”这类符号已经用来表示HTML标签，因此就不能直接当作文本中的符号来使用。为了在HTML文档中使用这些符号，就需要定义它的转义字符串。当解释程序遇到这类字符串时就把它解释为真实的字符。在输入转义字符串时，要严格遵守字母大小写的规则。第二个原因是，有些字符在ASCII字符集中没有定义，因此需要使用转义字符串来表示。 如：版权所有 © 南昌师专,思考一下：如果要在浏览器中显示出“标记一般包含正文内容”这几个字，代码就如何书写？ 例：<body>标记一般包含正文内容,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,为了以后更容易地阅读HTML代码而生。 用法： 如：,HTML 注释,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,步骤： 1). 选择“开始所有程序附件记事本”命令，打开记事本 2). 在创建的记事本文件中输入HTML代码 3). 选择“文件保存”或“文件另存为”命令，保存文件为.html文件 4). 用浏览器打开.html文件，查看显示效果,用记事本编写HTML网页,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,步骤： 1). 启动Dreamweaver CS3 2). 从设计视图切换至代码视图 3). 输入相应的HTML代码 4). 保存文件并预览效果,Dreamweaver CS3中的HTML源码编辑窗口,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,案例02 在网页中输入并设置文本,案例操作过程,相关知识点,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,HTML中的大部分元素都可分为两种类型：块级元素和行级元素。块级元素会从新的一行出现，行级元素则不会。块级元素的前后都会有插入的断行，所以如果不用CSS则没法让两个块级元素并列在一起 (更多的块元素和行元素知识请问百度),块级元素和行级元素,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,标题标签 至 段落标签 ,标题元素和段落元素,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,用以对网页中文本的字体、大小、颜色等进行定义的元素，有了CSS后实际上用处已不是很大。主要元素有以下几种： 、,字符格式元素,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,1. 有序列表（OL元素） 功能：对分段的文本进行有序的列表显示 语法： 列表项一 列表项二 列表项三 属性：start、type,列表元素-1,Start 用以指明列表序号的起始值，如果没有这个属性，则默认从1开始。 例： type 用以指明序号的类型，一共有五种类型，分别是： A：大写字母 a: 小写字母 I：大写罗马字母 i: 小写罗马字母 1：阿拉伯数字 例：,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,2. 无序列表（UL元素） 功能：将分段显示的文本作无序的列表显示 语法： 列表项一 列表项二 列表项三 属性：type（值分别为circle、disc、square）,列表元素-2,Circle 项目符号为空心圆 Disc 项目符号为实心圆 Square 项目符号为方块 ,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,3. 定义列表 功能：用以罗列定义。每个定义有两项内容，一是定义的内容，二是定义的描述。 语法： 标题一 内容一 内容二 标题二 内容一 内容二 ,列表元素-3,简单DL列表示例： 国内电视台 北京电视台 上海电视台 江西电视台 浙江电视台 国际电视台 美国电视台 英国电视台 日本电视台 ,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,可用于在网页中插入水平线 语法： 属性： Color用于设置水平线颜色，width用于设置水平线长度，align用于设置水平线位置,插入水平线,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,案例03 更改网页中的背景,案例操作过程,相关知识点,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,bgcolor标记文档的背景颜色。 语法： 其中value可以使用RGB十六进制码，也可以使用颜色所对应的英文单词或者三个十进制数。 例： 或者： ,背景颜色,更多的颜色表可访问以下网址：/man/dhtmlcn/colors/colors.html,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,background 标记文档的背景图片 语法： 例： 背景图片和背景色可同时指定，但在显示时，浏览器会优先考虑背景图片,背景图像,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,bgsound 标记文档的背景音乐 语法： 例： Loop属性设置重复次数，-1为无限重复,背景音乐,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,案例04 处理网页中的图像,案例操作过程,相关知识点,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,网页中每一个图片都是以独立文件存在的，HTML代码只是指明了这个图片所在的位置，即URL。浏览器在显示这个图片时，需要根据图片的URL找到这个图片并下载显示出来,图像元素img,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,IMG元素 功能：引用图片URL 语法： 空标记，无需要结束标记,图像元素img,主要属性： Src 指明图片的URL Alt 设定鼠标移动到图片上时显示的文字 Width 指明要显示的图片的高度，单位是像素，像素的英文缩写是px。 Height 指明要显示的图片的宽度，单位同上 vspace 垂直边距 Hspace 水平边距 Align 指明图片的对齐方式，有：top、middle、bottom、left、right等属性值 Border 指明图片的边框宽度，无该属性或值为0时，表示无边框 Lowsrc 设定低分辨率图片URL Usemap 指明该图片是否有热区，其值指向一个map元素,例：引用一图片，存放在本地计算机的D盘myphoto文件夹中，文件名为photo1.jpg，要求:在网页中鼠标指向图片时显示：“这是一幅示例图片”的字样，边框宽度为5，图片高度300，宽度200，对齐方式为居中对齐。试写出其HTML代码 ,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,案例05 创建简单表格,案例操作过程,相关知识点,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,相关知识点,表格元素一共有5个,用来定义表格的标题、行和列。 table caption tr th td,表格元素,1. Table 功能：用来标志一个表格。 语法： 表格内容 属性：align bgcolor cellpadding cellspacing height width Table的元素很多，上述几个是最常用的。 Align ：对齐方式。 Bgcolor: 表格的背景色。 Border: 表格边框的宽度。 Cellpadding: 单元格中的内容到表格边框线的最短距离。 Cellspacing: 两个单元格之间的距离。 Height: 表格高度，其值可以是像素或百分比。 Width: 表格宽度，其值可以是像素或百分比。 这里的百分比是指该高度或宽度占整个屏幕的百分比。,2. Caption 功能：指明表格的标题或说明 语法： 表格标题 属性：align align有四个值：top，bottom，left，right。如果没有指定align属性，默认值是表格的上方且居中显示标题。 例：学生成绩登记表,3. Tr 功能：定义表格的一行。一个table元素中至少要有一个Tr元素。Tr元素可以嵌套Td和Th子元素。 语法： 或者 或者 属性：align valign bgcolor等 Align: 设置该行中内容的水平对齐方式 Valign: 设置该行中内容的垂直对齐方式 其值可以是：baseline(基线对齐) bottom(底端对齐) top(顶端对齐) middle(垂直居中) Bgcolor: 设置该行的背景色，此项设置会覆盖表格的背景色，即table中的bgcolor颜色设置。,4. Th, Td 功能：指明表格某一行中的某一列，即一个单元格。与基本一样，唯一不同的就在于会将单元格内的内容以粗体且默认居中显示，故经常用于表格的表头，也就是第一行或者第一列，而用于普通的单元格且默认为左对齐。 语法： 单元格内容 单元格内容 属性：align valign bgcolor colspan rowspan height width nowrap bgcolor 该属性在表格中的排序是： th，td tr table colspan和rowspan用于不规则的表格，其值是一个正整数。colspan指明该单元格跨越几列；rowspan指明该单元格跨越几行。 nowrap 设置内容超过单元格宽度时不换行，否则将自动换行。,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,知识拓展：HTML的其他元素介绍,HTML的元素可以分为： 文件结构元素（html、head、body、frameset） 头部元素（title、base、meta、link、style等） 格式元素（font、b、i、u 、p、h1-h6、pre、br、adress等） 图片元素（img） 链接元素（a） 列表元素（ul、ol、dl、li、dt、dd） 表格元素（table、tbody、caption、tr、th、td） 表单元素（form、input、select、textarea） 层元素（div、span） 脚本元素（script） 对象元素（applet、param、object、embed、noembed）,课堂实践,布置习题,学习目标,教学总结,课程引导,利用HTML编写简单网页,学习情境3,知识讲解,页面效果图,综合案例实训 制作“九龙湾” 图文混排网页,实训步骤： 1. 新建文件夹：“D:webdesignjiulongwuan”，将“随书光盘03最终文件综合案例实验images”文件夹复制到“D:we
人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论