第五部分网页制作教学课件

计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心1第五章第五章 网页制作网页制作 掌握掌握 使用表格布局网页；使用表格布局网页；制作框架网页；制作框架网页；在网页中运用层；在网页中运用层；网页中的文字处理；网页中的文字处理；网页中的图像处理；网页中的图像处理；网页中超级链接的设网页中超级链接的设置；置；网页中网页中Flash动画的应动画的应用；用；网页中表单的制作。网页中表单的制作。了解了解 超文本标记语言；超文本标记语言；网页开发工具；网页开发工具；网站设计的基本过程；网站设计的基本过程；网页浏览的原理；网页浏览的原理；在网页中插入媒体文在网页中插入媒体文件；件；制作简单的动态效果制作简单的动态效果网页。网页。计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心2第五章第五章 网页制作网页制作 基础知识基础知识 Dreamweaver 8操作基础操作基础 页面布局页面布局 网页中文本、图像和动画元素网页中文本、图像和动画元素 制作表单制作表单 制作具有动态特效的网页制作具有动态特效的网页计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心35.1 基础知识基础知识1.网页基本知识网页基本知识 2.网页布局规划网页布局规划 3.导航设计导航设计 4.色彩搭配色彩搭配 5.网页浏览原理及发布网页浏览原理及发布 计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心41.网页基本知识网页基本知识 网站网站 存放在网上某个服务器中的信息服务系统存放在网上某个服务器中的信息服务系统 网页间按一定的方式链接而成的整体构成网网页间按一定的方式链接而成的整体构成网站站 网页网页 一般含有文字、图像、动画和表格等元素一般含有文字、图像、动画和表格等元素 通过超文本链接实现页面间的跳转，用户可通过超文本链接实现页面间的跳转，用户可以跟随超级链接，来到它所指向的页面，从以跟随超级链接，来到它所指向的页面，从而获取到互动的、丰富多彩的信息。而获取到互动的、丰富多彩的信息。计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心5网页基本知识网页基本知识 网页网页 通常以网页文件及其附属文件的形式通常以网页文件及其附属文件的形式存在存在 网页文件最终都采用超文本标记语言网页文件最终都采用超文本标记语言（Hyper Text Markup Language，HTML）说明网页中文字和图像的格）说明网页中文字和图像的格式设置、层次结构、超文本链接等式设置、层次结构、超文本链接等计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心6 根据页面内容是否固定，页面文件可以根据页面内容是否固定，页面文件可以分为静态的超文本文件和动态页面分为静态的超文本文件和动态页面 静态的超文本文件静态的超文本文件 在文本文件的基础上使用在文本文件的基础上使用HTML语言描述其格式语言描述其格式 可以在其中嵌入图像、声音、动画等信息可以在其中嵌入图像、声音、动画等信息 是纯文本文档，可以用任何一种文本编辑软件进是纯文本文档，可以用任何一种文本编辑软件进行编辑行编辑 文件扩展名是文件扩展名是.htm、.html、.shtml等等 动态的超文本文件动态的超文本文件 采用动态网站技术生成的网页文件采用动态网站技术生成的网页文件 文件扩展名是文件扩展名是.asp、.jsp、.php、.cgi等等计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心7HTML的标记的标记 HTML标记说明网页中的内容及其相关标记说明网页中的内容及其相关信息是如何显示的信息是如何显示的 标记总是用三角括号括起标记总是用三角括号括起 大多数标记成对出现，如：大多数标记成对出现，如：网页制作网页制作，用成对标记对所，用成对标记对所“夹夹”内容的显内容的显示进行控制示进行控制 结束标记比开始标记多结束标记比开始标记多“/”计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心8HTML文档的结构文档的结构 网页文档的开始网页文档的开始 头部标记头部标记 第一次编写网页第一次编写网页 标题标记标题标记 主体标记主体标记 网页制作网页制作 计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心9HTML的排版标记的排版标记 独立段落独立段落 换行换行 居中显示居中显示/加粗、倾斜、下划线加粗、倾斜、下划线 标题标题1标题标题6 字体字体计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心10例例1 文本标志的综合实例文本标志的综合实例文本标志的综文本标志的综合实例合实例最大的标题最大的标题使用使用h3的标题的标题最小的标题最小的标题黑体字文本黑体字文本 斜体字文本斜体字文本下加一划线文本下加一划线文本size取值取值“5”、color取值取值“green”时的文本时的文本计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心11浏览器显示效果（例浏览器显示效果（例1）计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心12HTML的排版标记的排版标记 水平线水平线 插入图片插入图片 超级链接超级链接计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心13例例2 图像标志的综合示例图像标志的综合示例图像标志的综合示图像标志的综合示例例友情链接友情链接与我联系与我联系计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心14浏览器显示效果（例浏览器显示效果（例2）计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心15HTML的排版标记的排版标记 有序号列表有序号列表 无序号列表无序号列表 具体列表项具体列表项计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心16例例3 列表示例列表示例无序号列表无序号列表 apples bananas有序号列表有序号列表 oranges peaches grapes计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心17浏览器显示效果（例浏览器显示效果（例3）计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心18HTML的排版标记的排版标记 表格表格 表格行表格行 表格单元格表格单元格 表格标题行表格标题行计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心19 6个单元格个单元格 第一列第一列 第二列第二列 第三列第三列 单元格单元格1单元格单元格2单元格单元格3单元格单元格4单元格单元格5单元格单元格6表例表例1计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心20表格的属性表格的属性 Colspan:跨的列数跨的列数 Bgcolor：背景色：背景色 Align：水平对齐：水平对齐,Valign：垂直对齐：垂直对齐 Width：宽度：宽度 Cellpadding:单元格边距单元格边距 Cellspacing:单元格间距单元格间距计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心21关于表格的背景色关于表格的背景色 的背景色会覆盖的背景色会覆盖的背景色的背景色 的背景色会覆盖的背景色会覆盖的背景的背景色色 Example 15计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心22 JUST 4 CELLS This is cell 1.This is cell 2.This is cell 3.This is cell 4.EXAMPLE 15Colspan是什么意思?计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心23Example16 对对Example 15进行更改如下进行更改如下 将将 This is cell 3.替换为替换为 网球网球 表格中出现超链接表格中出现超链接计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心24表格中的图片表格中的图片Example17 计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心25Example18TABLE border=我的兴趣爱好我的兴趣爱好 TH colspan 运动运动 TH bgcolor 主要爱好主要爱好 TD align=游泳游泳 TD align=足球足球 TD align=集邮集邮 羽毛球羽毛球 篮球篮球 阅读阅读 这个页面将显示什么这个页面将显示什么?计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心26如何编写以下网页如何编写以下网页?编写并保存为 Example19.htm，存入 C:homework计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心27怎样创建以下网页？怎样创建以下网页？计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心28HTML的排版标记的排版标记 表单表单 单行文本框、单选按钮、按钮单行文本框、单选按钮、按钮 列表框列表框 列表中的项目列表中的项目 多行文本框多行文本框计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心29例例4 表格和表单综合实例表格和表单综合实例留言薄留言薄留言人留言人主主 题题:教育教育 娱乐娱乐 旅游旅游 展览展览留言内容留言内容:计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心30您的职业是您的职业是律师律师企业工作人员企业工作人员IT从业人员从业人员教师教师    计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心31浏览器显示效果（例浏览器显示效果（例4）计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心32常用的HTML标记计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心33HTML使用归纳使用归纳 大部分标记分起始和结束大部分标记分起始和结束 部分标记可使用属性定义具体特征部分标记可使用属性定义具体特征 一些通用属性可通过总体样式进行定义一些通用属性可通过总体样式进行定义计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心34网页网页HTML代码示例代码示例计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心35计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心36添加了添加了Style的网页代码示例的网页代码示例 参见参见大学计算机软件应用大学计算机软件应用P202计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心37计算机技术应用计算机技术应用第五章第五章华东师范大学计算中心华东师范大学计算中心38实验与作业要求实验与作业要求 作业作业5.1.6习题与思考习题与思考07版教材版教材P207-208 实验实验补充实验补充实验