1 / 40

第 4 章 图片、表格与框架

第 4 章 图片、表格与框架. 本章要点:  图片的特点与操作  表格的创建、编辑和属性设置  框架网页的使用. 4.1 使用图片改善网页效果. 4.1.1 图片格式简介 1 . JPG 格式 JPG 是利用 JPEG 方法压缩的图片格式,它也是浏览器所广泛支持的一种格式。 2 . GIF 格式 GIF ( Graphics Interchange Format )是 “ 图形互换格式 ” 的简称,它是专为联机图形设计的,目的是能够在不同平台上交流使用。

Download Presentation

第 4 章 图片、表格与框架

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 第4章 图片、表格与框架 本章要点: •  图片的特点与操作 •  表格的创建、编辑和属性设置 •  框架网页的使用

  2. 4.1 使用图片改善网页效果 • 4.1.1 图片格式简介 1.JPG格式JPG是利用JPEG方法压缩的图片格式,它也是浏览器所广泛支持的一种格式。 2.GIF格式GIF(Graphics Interchange Format)是“图形互换格式”的简称,它是专为联机图形设计的,目的是能够在不同平台上交流使用。 3.BMP格式BMP(Bit Map)是一种与设备无关的图片文件格式,它是Windows软件推荐使用的一种位图格式。 注:只支持GIF和JPG

  3. 4.1 使用图片改善网页效果 1、插入图片 • 选择“插入”菜单的“图片”命令,单击“来自文件”按钮。

  4. 4.1 使用图片改善网页效果 1、插入图片 • 单击“常用”工具栏的“保存”按钮

  5. 4.1 使用图片改善网页效果 1、插入图片 • 从INTERNET上插入一个图片 • 从“剪贴画”中插入一个图片 保存网页,把剪贴画复制到站点目录下。

  6. 4.1 使用图片改善网页效果 2.设置图片透明

  7. 4.1 使用图片改善网页效果 3.剪切图片

  8. 4.1 使用图片改善网页效果 4. 给图片添加文本

  9. 4.1 使用图片改善网页效果 5.设置特殊效果

  10. 4.1 使用图片改善网页效果 5.设置特殊效果 对比度 亮度 半透明

  11. 4.1 使用图片改善网页效果 6.图片与文本的对齐

  12. 4.1 使用图片改善网页效果 6.图片与文本的对齐 单击鼠标右键,选择“图片属性”,选择“外观”选项卡

  13. 4.1 使用图片改善网页效果 思考题?

  14. 4.1 使用图片改善网页效果 思考题?

  15. 4.1 使用图片改善网页效果 思考题?

  16. 4.2 表格

  17. 4.2 创建和编辑表格 FrontPage 2003中提供了四种创建表格的方法: 1.快速创建表格单击【常用】工具栏中的【插入表格】按钮

  18. 4.2 创建和编辑表格 FrontPage 2003中提供了四种创建表格的方法: 2.菜单命令插入表格执行【表格】→【插入】→【表格】命令,打开【插入表格】对话框

  19. 4.2 创建和编辑表格 FrontPage 2003中提供了四种创建表格的方法: 3.手绘表格操作步骤如下: (1)执行【表格】→【手绘表格】命令,打开【表格】工具栏 (2)单击【表格】工具栏的【手绘表格】按钮,鼠标指针在文本编辑区变为铅笔状图标。

  20. 4.2 创建和编辑表格 FrontPage 2003中提供了四种创建表格的方法: 4.将文本转换为表格要将文本转换为表格,必须先设置文本的格式。一般用逗号分割数据项,用回车符表示段落结束。

  21. 4.2 创建和编辑表格 单元格的控制 • 创建好表格后,就可以在表格里输入文本了。

  22. 4.2 创建和编辑表格 单元格里的文本与单元格的对齐方式 首先单击要调整格式的单元格,单击鼠标右键,选择“单元格属性”命令,在这里你不仅可以设置水平对齐方式还可以设置垂直对齐方式。

  23. 设置单元格背景色、边框颜色、背景图片 • 4.2 创建和编辑表格

  24. 单元格的选定 • 4.2 创建和编辑表格

  25. 合成和拆分单元格 • 4.2 创建和编辑表格

  26. 表格的外观设置示意图

  27. 页面布局 • 4.2 创建和编辑表格 • 如下图所示,就是一个采用表格布局的网页,具体制作过程,用户可以参考以上的表格编辑方法,自己独立完成。

  28. 思考题? • 4.2 创建和编辑表格

  29. 4.3 创建框架网页 • 4.3.1创建框架 把一个浏览器窗口分成几个区域,每一个部分可以显示不同的网页。

  30. 4.3 创建框架网页 • 4.3.1创建框架 选择“文件”菜单的“新建”命令,单击“网页”按钮,选择“框架网页”选项卡

  31. 4.3 创建框架网页 • 4.3.2调整框架 1、鼠标 2、框架属性

  32. 4.3 创建框架网页 • 4.3.2调整框架 2、框架属性

  33. 思考题? • 4.3 创建框架网页

  34. 4.3 创建框架网页

  35. 思考题? • 4.3 创建框架网页

  36. 小结 • 本章主要讲述图片在网页制作中的应用技术,包括图片的格式、编辑及映射和替代等,以及表格、框架在网页的整体及局部布局中的应用等。通过本章的学习,用户可以使用图片来丰富网页的内容,并通过FrontPage 2003对所用的图片进行编辑,还可以创建图片的映射及替代性文本等。另外,在制作网页时通常都离不开表格,有时是因为页面内容本身的需要,而在更多数情况下,是需要表格对网页作整体的编排布局。应用表格来设计页面的整体布局,通常这样的表格不是独立的,而是多个表格间的嵌套。设计页面布局的另一个重要技术,就是框架的应用。FrontPage 2003中提供了多个框架式网页的模板,通过模板可以轻松的创建各式各样的框架式网页,本章详细地介绍了框架的编辑及应用。

  37. 思考题? • 练习 上机实战将练习用表格来布局安庆师范学院网站的首页(http://www.aqtc.edu.cn)。通过练习读者应掌握表格的绘制、表格属性的设置和用表格来布局的方法。用表格布局网页是网页布局中最常用的方法,也是制作网页的重要部份,读者应多加练习。

More Related