网页设计之如何插入表格

单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,向下,向上,末页,首页,中文,Dreamweaver,8,网页设计培训教程,调音,返回,零点 起飞电脑培训学校,初识,CorelDRAW 11,结束,课堂讲解,上机实战,第,4课 为网页添加图像,课堂讲解,网页图像的格式及来源,插入图像,设置图像属性,图像高级设置,网页图像的格式及来源,GIF,格式,JPEG,格式,PNG,格式,网页图像来源,GIF,格式,GIF,全称为“,Graphics Interchange Format”，,意为可交换图像格式，它是第一个支持网页的图像格式，在,PC,机和苹果机上都能被正确识别。它最多支持256种颜色，可以使图像变得容量相当小。,GIF,图像可以在网页中以透明方式显示，还可以包含动态信息，即,GIF,动画。,JPEG,格式,JPEG,全称为“,Joint Photographic Experts Group”，,意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。,PNG,格式,PNG,全称为“,Portable Network Graphics”，,意为便携网络图像，它是逐渐流行的网络图像格式。,PNG,格式既融合了,GIF,能透明显示的特点，又具有,JPEG,处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。,网页图像来源,网页图像的素材有很多来源，如可以使用图形处理软件（如,Photoshop、Fireworks,和,FreeHand,等软件）制作；可以购买网页素材光盘；可以从网络上下载等。,插入图像,直接插入,占位符插入,图像的放大显示,直接插入,选择插入,图像菜单命令。,单击插入栏的“常用”选项卡中的按钮。,按【,Ctrl+Alt+I】,键。,占位符插入,制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。,将图像确定后双击占位符，在打开的对话框中设置后插入即可。,图像的放大显示,Dreamweaver,8,新增的放大镜功能可以让用户更方便地进行对齐图像、选择较小的对象以及查看较小的文本、动画或网页元素等操作。,设置图像属性,在网页中插入图像后可通过属性面板对其属性进行修改等设置。,图像命名,图像大小,编辑图片,源文件设置,文本说明,图像与文本的对齐,图像边距,图像边框,图像命名,为了在使用,Dreamweaver,行为（如交换图像）或脚本撰写语言（如,JavaScript,或,VBScript）,时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。,图像大小,在,Dreamweaver,8,中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。,编辑图片,在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了,Fireworks，,那么,Fireworks,将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像。,源文件设置,在属性面板的“源文件”文本框中显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属性面板中的“源文件”文本框中重新输入要插入图像的地址，或单击右侧后的 按钮，在打开的“选择图像源文件”对话框中重新选择需要的图像。,文本说明,在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。,图像与文本的对齐,选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。,图像边距,选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上方和左侧之间的距离，也可以设置图像与其他网页元素之间的距离,。,图像边框,选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框。,图像高级设置,鼠标经过图像设置,插入,Fireworks HTML,对象,鼠标经过图像设置,鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。,插入,Fireworks HTML,对象,Macromedia,公司的图形处理软件,Fireworks,优化后的图像和,HTML,文件。使用,Dreamweaver,可直接插入保存到所需的,Dreamweaver,站点文件夹中。,上机实战,本课上机实战主要练习在网页中插入图像并对其进行属性设置。在练习过程中，将用到课堂讲解中所学的插入图像的方法、图像属性设置的方法、热点链接的设置及鼠标经过图像的创建方法等知识。,