《清华网制作2.ppt》由会员分享，可在线阅读，更多相关《清华网制作2.ppt（34页珍藏版）》请在三一文库上搜索。
1、网页制作,计算机文化基础课程电子讲稿 2008年11月 http:/,HTML,2,本次大课的内容提要,认识图形格式,图形简单的编辑,绝对路径与相对路径,设置超链接,网页布局（表格）,网页布局（框架）,参考资料,3,图形的插入,HTML并不能包含图像，它只是包含图像文件的名称 和相应的格式代码。 ,图形的插入 直接拖拽来改变图片的大小 使用图片属性对话框来设置 图片的替代文字、图片边框 使用图片工具栏编辑图片,4,认识图形格式,GIF JPEG PNG （图形交换格式）（联合图像专家组）（可移植网络图形） 可用颜色数 16777216 16777216 4294967296 每幅图像的颜色 2
2、56 16777216 256-4294967296 压缩 无损 有损 无损 透明 单色 否 Alpha通道 半透明 否 否 Alpha通道 动画 是 否 否,参阅教材7.4节内容,5,GIF格式图像举例,GIF（Graphics Interchange Format）是作为一个跨平台图形标准而开发的、与硬件无关的8位彩色图形格式，也是在因特网上使用最早、应用最广泛的图像格式，包含87A和89A两种格式。,2cm2cm 2K,4cm3.6cm 8K,5cm14cm 47K 256色的调色板 导致色滩出现， 色彩层次感差。,6,JPEG格式图像举例,JPEG格式（简称JPG）是一种流行的图像文件
3、压缩格式，通常，JPEG可将图像文件的长度缩短成原来的50%到2%不等。在保证对图像质量的前提下，获得较高的压缩比。摄影图像通常采用JPEG格式存储和显示，大多数数字相机拍摄的图像都经过了JPEG压缩处理。,高压缩比 15cm20cm 43K,低压缩比 8cm6cm 116K,7,图形的简单编辑（1）,图形的插入：执行“插入”/“图片”/“来自文件” 菜单命令 直接拖拽来改变图片的大小 大图像不能通过减小该图像尺寸以达到减少 其文件大小和下载时间的目的。 图片的替代文字和缩略图,参阅教材9.3.4节内容,重新取样图片,HTML并不能包含图像，它只是包含图像文件的名称 和相应的格式代码。 ,自动
4、缩略图,8,图形的简单编辑（2）,参阅教材9.3.4节内容,使用图片属性对话框来精确设置图片大小,9,图形的简单编辑（3）,定位图像 自由放置图像位置，调整多个重叠图像的层次关系。 旋转和翻转图像,参阅教材9.3.4节内容,10,图形的简单编辑（4）,剪裁图像 剪去不需要的部分。 设置透明色 选择图片中的一种颜色为透明效果。,参阅教材9.3.4节内容,“剪裁”按钮,设置透明的颜色,11,图形插入的补充,FrontPage,在FrontPage 可以输入其他的一些图像格式，但在保存网页时，FrontPage会自动将它们转换成GIF 或JPEG格式，对超出256色的图像，将转换成JPEG格式，而将
5、少于256色的图像转换成GIF格式。,12,网页中图片不能正常显示问题,原因1：图片没有保存到网站中 原因2：图片保存到网站中，但保存的路径不正确。,13,绝对路径和相对路径（1）,网页中的图像、动画等素材都有自己固定的存放位置，网页只是通过路径使用HTML语言来调用它们，然后把它们显示在网页中。网页中的路径有相对路径和绝对路径，在应该使用相对路径的地方使用了绝对路径，或相对路径的引用不正确都会导致浏览器无法在指定的位置打开指定的文件，使素材不能正常显示。,HTML并不能包含图像，它只是包含图像文件的名称 和相应的格式代码。 ,14,绝对路径与相对路径（2）,绝对路径：文件在硬盘上的真正路径,
6、D:/myweb/wuming.html D:/myweb/images/wm.gif,如果在wuming.html网页中 插入wm.gif图片，使用绝对,路径，那么在本地电脑中将一切正常，因为在D:/myweb/images路径下的确存在wm.gif这个图片。但你将它们拿到另一台机器上或传到网站服务器上后，就会出错，因为要到当前的机器的D:/myweb/images路径下找wm.gif文件。,15,绝对路径与相对路径（3）,相对路径：当前网页相对目标文件的位置 / 根目录 / 上一级 / 上两级,例1：D:/myweb/wuming.html D:/myweb/images/wm.gif,相
7、对路径：,例2：D:/myweb/web/index.htm D:/myweb/img/wm.gif,相对路径：,16,绝对路径与相对路径（4）,例3:D:/myweb/web/zhang/index.htm D:/myweb/img/images/wm.gif,把绝对路径转化为相对路径的时候，两个文件绝对路径中相同的部分忽略，只考虑他们不同之处。,相对路径：,为了避免在制作网页时出现路径错误，我们可以使用FrontPage或DreamWeaver的站点管理功能来管理素材。站点中的网页保存时将把图片保存到站点中并自动把绝对路径转化为相对路径，并且当你在站点中移动文件的时候，与这些文件关联的连接
8、路径都会自动更改。,17,给予网页一致性外观,18,建立超链接,超链接的实现方法：将某个文本串或某幅图像和其他 网页的地址（URL）联系在一起。 单击此处可获得某某信息。,创建超链接：,其他Web服务器上的网页文件 本地机器中网页文件 同一个网页文件中（书签）,19,图像映射,图像映射是另一种形式的超链接，允许将不同的URL指定给一幅图像的不同部分，使访问者根据不同的图像区域跳转到不同的位置，这些区域称做“热点”，每一个热点与一个超链接相对应。 如下图汽车生产商的站点可以用新车的图像映射：当站点访问者单击“车子”时，就会显示详细说明车子的网页。,20,网页布局（表格）,21,网页布局（表格）,
9、22,表格布局举例补充,利用单元格的合并与拆分 ，创建不规则的表格。,单元格的不同填充色、边框线颜色分割区域。,设置单元格属性，单元格内对象的排版方式。,设置表格属性，整个表格的排版方式。,23,表格布局补充,要用表格来布局网页，首先应决定表格在水平方向和垂直方向上所需的单元格数量，然后为需要跨越多行或多列的对象合并单元格。 大多数网页布局采用了带有不可见边框的表格。,24,表格单位的设置,相对单位,绝对单位,不随浏览器窗口尺寸变化而变化,随着浏览器窗口尺寸变化而变化,绝对单位范围 0-显示器分辩率值,相对单位范围 0%-100%,25,表格单位的设置举例,绝对单位,不随浏览器窗口尺寸变化而变
10、化,26,框架布局,框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架的内容。一个框架的超链接可以更改显示在另一个框架中的网页。,框架名称 初始网页 banner 页头.html Main 柠檬寝室.html contents 菜单.htm,27,认识框架集网页,框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。, VIVABAND 此网页使用了框架，但您的浏览器不支持框架。 ,vivaband.htm,28,框架网页的创建（1）,29,框架网页的创建（2）,30,框架网页的创建（3）,分别为不同的框架设定初始网页文件,banner 页头.html,Main 柠檬寝室.html,contents 菜单.htm,31,框架网页的创建（4）,设置框架属性：选中具体的框架，执行“框架”/ “框架属性”命令。,32,框架网页的保存,需要分别保存每一个框架对应的网页文件，并要保存“框架集”文件本身。对话框的右侧为框架示意图，其中以深兰色框来突出显示的框架就是当前需要保存的框架。,当前要保存的框架,33,框架之间的超链接,34,参考资料,参考教材,网站资源,网页制作栏目中的视频资源,第九章10.1-10.3节,计算机文化基础上机指导第7章,