网站设计与管理作业ppt课件.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,作业一,网站设计与管理,1,题目一,什么是鼠标经过图像？如何制作鼠标经过图像？对选取的图像素材有什么要求（出自第二单元）,2,在网页中插入图片不仅能起到美化页面的作用，而且图片能更加直观地表现网页的内容。,在网页中的图像一般有两种存在方式，一是作为网页的内容，二是作为网页或其他对象的背景。在网页中插入图像的格式主要有,GIF,、,JPG,和,PNG 3,种。,添加图像,3,常用图像格式,(1)GIF,图像格式,GIF,是网页中大量使用的图片格式之一，该格式的图像文件相当小，并且还可以在网页中以透明的方式显示，但是它最多只能储存,256,色，所以通常用来显示简单图像及字体。如果图像颜色比较丰富，使用该格式会使图像颜色丢失。,4,(2)JPEG,图像格式,也称为,JPG,，该格式支持,24,位真彩色，它精确地记录每一个像素的亮度。在压缩时可以最大限度地保证图像质量，并且文件变小的同时基本不失真，通常用于显示照片等。,5,(3)PNG,图像格式,PNG,格式是一种新兴的网络图像格式，它汲取了,JPEG,和,GIF,两者的优点，存储形式丰富，兼有,GIF,和,JPEG,的色彩模式；它的另一个特点是把图像文件压缩到极限，以利于网络传输，但又能保留所有与图像品质有关的信息；它的第三个特点是显示速度很快；第四，,PNG,同样支持透明图像的制作。,6,插入图像,(1),直接插入图像,直接插入图像就是将图像直接插入到网页中，它是网页中最常用的图像插入方式，在插入图像时通常将要插入的图像事先保存在站点的某文件夹中，再在,Dreamweaver,中插入图像。,操作方法：,首先将鼠标定位在需要插入图像的位置，然后执行,“,插入,|,图像,”,命令或利用,【,常用,】,选项卡中的图像按钮，打开,“,选择图像源文件,”,对话框，在对话框中选择图像文件。,7,(2),使用占位符插入图像,在网页制作过程中，如果还没想好要插入什么图像时，可以插入图像占位符来解决这个问题。图像占位符在网页中只占据一个位置，当确定插入的图像后再使用图像占位符将图像插入。,8,操作方法：,首先将鼠标定位在要插入图像的位置，然后执行,“,插入,|,图像对象,|,图像占位符,”,命令或利用,【,常用,】,选项卡中的图像按钮，打开,“,图像占位符,”,对话框，在对话框中设置图像占位符的,“,名称,”,、,“,宽度,”,等属性，单击,“,确定,”,按钮，插入占位符。双击图像占位符，即可打开,“,选择图像源文件,”,对话框进行图像插入。,9,创建鼠标经过图像,鼠标经过图像是一种动态图像效果，它由原始图像和替换图像两部分组成。在浏览器中浏览网页时，当鼠标光标移动到原始图像上时将显示替换图像，鼠标移出图像范围时将显示原始图像。在创建鼠标经过图像之前，需要先准备两幅图像,(,原始图像和替换图像,),，且两幅图像大小相同，当图像大小不一致时，,Dreamweaver,将自动把图像大小调整为一致。,10,添加背景颜色或图像,操作方法：,在属性面板中选择,“,页面属性,”,按钮，然后在打开的对话框中选择,“,外观,”,，在,“,背景颜色,”,栏中选择输入所需的背景颜色或在,“,背景图像,”,栏中选择所需的背景图片。,11,设置图像属性,在网页中插入图像后，有时还需要对图像进行设置，如设置图像大小、源文件位置、链接和对齐方式等。选择要设置属性的图像后，在属性面板中即可设置图像属性。,(1),命名图像名称,在属性面板的,“,图像,”,文本框中可以命名或重命名图像。,12,(2),添加替换文本,在浏览网页时，为了显示图像说明，可以在,“,替换,”,下拉列表框中输入图像说明。当鼠标光标移动到该图像上或当图片在网页中无法显示时，会在图像所在位置显示该图像的说明。,(3),设置图像的对齐方式,通常情况下，图片是和文本排列在一起的，所以图片的对齐方式是根据文本的相对位置进行划分的。在属性面板中的,“,对齐,”,下拉列表框中可以选择对齐方式。,13,(4),设置边距,在属性面板的,“,垂直边距,”,和,“,水平边距,”,文本框中可以设置图像与文本的边距。,“,垂直边距,”,通常用于设置图像顶部和底部与文本之间的距离；,“,水平边距,”,通常用于设置图像左侧和右侧与文本之间的距离。,14,(5),改变图像大小,改变图像大小的方法有两种：一是通过属性面板进行修改，二是通过拖动来实现。,小技巧：,在利用拖动控制点改变图像宽度和高度时，可以同时按下,Shift,键来控制拖放比例，以保证不失真。,15,题目二,层的初始可见性设置选项有几种？他们的含义分别是什么？（出自第三单元）,16,层的使用,层是,HTML,中的一种页面元素，也是页面中元素的容器,借助层可以实现页面元素的精确定位，层在网页中的位置是不受限制的，可以放置在页面的任何位置,在一个网页中可以通过层的重叠和设置层的可见性来实现一些特殊效果,17,创建层,(1),创建普通层,方法一：执行“插入,|,布局对象,|AP div”,命令；,方法二：在布局工具栏中单击“绘制层”按钮。,小技巧：单击绘制层按钮，按下,Ctrl,键不放，在文档窗口中就可以连续绘制出多个不同的层。,18,创建层,(2),创建嵌套层,在网页中，层可以进行嵌套。,在层内部创建的层称为嵌套层或子层，嵌套在层外部的层称为父层。,子层与父层有如下特点：,子层与父层可以重叠，也可以不重叠。,子层大小可超过父层。,子层的可见性与父层保持一致，,子层与父层的相对位置保持一致。,19,创建层,创建嵌套层的方法如下：,先创建父层，将光标放在父层中，单击菜单,“,插入,”,“,布局对象,”,“,AP Div,”,，即可创建嵌套层，新插入的层为子层。,利用,“,层,”,面板创建嵌套层，在,“,层,”,面板中选中作为子层的层，按住,【Shift】,键，将选中的层拖动到要作为父层的层上，释放鼠标即可创建嵌套层，这时子层与父层以连接线相连，表明其从属关系。,20,创建层,说明：,嵌套层并不一定是页面上一层位于另一层内，它们可以分布在页面的不同位置，但是它们的,HTML,代码一定是层层嵌套的。,嵌套层中，拖动嵌套层中的父层，子层和父层是一起移动的。,单击父层左边的号可以展开其所有子层，单击号可以折叠其子层,21,(1),显示层面板,在网页中，通过,“,层,”,面板可以显示网页中所有的层及各个层之间的关系，以及选择层、设置层的显示属性、设置层的堆叠顺序、显示或隐藏层等。,打开方法：选择,“,窗口,|,层,”,命令或按,F2,键将弹出,“,层,”,面板,设置层属性,层的基本操作,22,设置层属性,层的基本操作,(2),层的选择,要对层进行移动、调整大小等操作，首先要选择层。可以选择一层，也可以同时选择多层。,(3),调整层的大小,说明：调整多个层的大小时，可以利用,“,修改,|,对齐,|,设成宽度相同,(,设成高度相同,),”,命令。,(4),移动层,层最大的特点就是可以在文档窗口中任意移动。,23,设置层属性,层的基本操作,(5),对齐层,层的对齐主要有左对齐、右对齐、对齐上缘及对齐下缘,4,种方式。,方法是选择所有要对齐的层，执行,“,修改,|,排列顺序,”,命令，在弹出的子菜单中选择相应的命名即可。,在进行多层调整大小和层的对齐时，会以最后选择的层为标准。,24,(6),改变层的可见性,层的可见性可以控制层内元素的显示与隐藏，从而设计出网页的一些特殊效果。,方法一：利用,“,层,”,面板中的眼睛图标进行设置。,方法二：在,“,属性,”,面板的,“,可见性,”,下拉列表框中设置相应的选项即可。,设置层属性,层的基本操作,25,(6),改变层的可见性,可见性：,可见性下拉列表框用来设置层的初始可见性，有,default,、,inherit,、,visible,和,hidden4,个选项。,default,表示不制定层的可见性；,inherit,表示继承父层的可见性；,visible,表示设定层的内容可见性；,hidden,表示隐藏该层的内容。,设置层属性,层的基本操作,26,(6),改变层的可见性,溢出：,溢出下拉列表框用来设置当层的内容超过层的指定大小时，对层内容的显示方法，该属性有,visible,、,hidden,、,scroll,和,auto4,个选项。,visible,表示当层的内容超过指定大小时，层的边界会自动延伸以容纳这些内容；,hidden,表示当层的内容超过指定大小时，将隐藏超出部分的内容；,scroll,表示不管层的内容是否超过指定大小，浏览器都将在层上添加滚动条；,auto,表示当层的内容超过指定大小时，浏览器才显示层的滚动条。,设置层属性,层的基本操作,27,设置层属性,层的基本操作,(7),设置层的叠放次序,层与其他对象元素不同，它除了具有平面上的上下左右位置外，它还具有垂直的位置，叫做层的叠放次序，即,Z,轴顺序。,通常情况下先创建的层的,Z,轴顺序值低，而后创建的层的,Z,轴顺序依次升高，在网页中,Z,轴顺序值较大的层会遮盖,Z,轴顺序值较小的层的内容。,28,设置层属性,层的基本操作,(7),设置层的叠放次序,只有通过设置层的叠放次序，才能有效地控制内容的显示与隐藏。,方法一：在,“,属性,”,面板中修改,“,Z,轴,”,文本框中的数值，大于原数值则将该层上移，反之小于原数值则将该层下移。,方法二：在,“,层,”,面板中直接输入层的,Z,值或将层直接拖放到所需位置。,方法三：利用,“,修改,|,排列顺序,|,移到最上层（或移到最下层）,”,菜单命令。,29,层的使用,层与表格的转换,层只有在较高版本的浏览器中才能正常显示层中的元素。,为了解决这种问题，一般可在编辑网页时采用层布局或者部分页面采用层布局，而在发布网页时再将其转换为表格布局。,需要时，也可以在层和表格之间相互转换，以调整布局和页面优化,层与表格的转换操作,(1),层转换为表格,(2),表格转换为层,说明,层转换为表格后就不能随便移动了。,将表格转换为层时，空的单元格不转换，表格之外的内容也被置于层中。,Dreamweaver,不会把重叠的层转换为表格。,30,