《第三章、网页切片编辑》.docVIP

第三章 网页切片编辑 教学目的：了解网页切片的编辑特点 教学重点： 1.利用photoshop切片 2.切片编辑 3.单元格背景图像设置与flash背景处理 教学时间：3学时 教学过程： 网页切片的优点是提高浏览器下载网页的速度，也可节省网站存储空间。先参考线 在本地计算机盘符中新建文件夹，命名要根据站点文件夹的命名原则来进行，（不使用汉字，标点等字符），该文件夹就是站点根文件夹，用来存放网站一切内容的地方。 网页的文件名：若为首页，命名必须是index.html；若为其它页面，命名任意，但要遵守不使用汉字等原则，最好用字母拼写，也忌讳名字太长。保存的类型选择html和图像 必须保存到刚才新建的站点根文件夹下 6.站点文件下自动生成的文件，一个是网页文件，一个是images 7.利用DW打开站点，站点---新建---本地根文件夹，找到已保存的站点文件夹，如图 8.双击页面进行编辑，选择table，设置属性：居中对齐。如下图 分别删除1,2,4区域图像，并按照图像的大小设置该图像背后单元格的宽与高，在1,2,4区域放入相应的背景图像，选择各个单元格，在代码视图下写入相应的代码background=“”； 在第4区域内插入1行11列表格，设置表格高度（选择table，代码视图下在table后写入hight=“”）与原单元格的高度也即背景图像的高度等同，此为横向导航栏 删除5区域白色图像，设置此单元格的高度（大于等于原白色图像的高度即可）， 9.在上图1,2,区域单元格出入相应的flash，修改flash大小，flash的尺寸不允许超过背后单元格的尺寸，设置其参数为背景透明。 插入透明的flash(网上很多哟，自己下载去吧)，选中flash/属性/透明 效果如下图： 10.网页背景设置 在页面属性里设置背景图片，然后给相应的版面区域设置成白色颜色 教学总结：案例一主要是让学生了解用photoshop进行切片和切片后站点的保存与编辑 课堂作业: 对上图进行切片编辑  案例二、永大地产网页切片编辑 1.利用PHOTOSHOP打开图片，先参考线标题区修改。删除纯颜色图片，并根据图片的大小设置背后单元格大小， 如图 切换到photoshop软件中，利用吸管工具，吸取对应的颜色，在拾色器里查看颜色代码并复制，EFE7E4，然后再DW软件中，选择标题区上对象的单元格设置单元格颜色#EFE7E4，千万别忘记加#号 这样做的好处是减少网页上图片，用颜色来实现效果，提高网页下载速度。 删除掉“优雅环境，品质生活”图片，设置单元格大小，设置单元格背景图像（选中所在的td，在代码视图为TD添加属性 background=“”） 在单元格内插入2行2列表格，放入相应的flash动画，设置其透明度， 效果图：为静态网页增加动态效果 内容区： 删除相应的区域，并设置背后单元格大小，F12预览 切换到photoshop软件中，利用吸管工具，吸取对应的颜色，在拾色器里查看颜色代码并复制，EDE8E2，然后再DW软件中，选择内容区上对应的单元格设置单元格颜色# EDE8E2，千万别忘记加#号 在对应的各个区域内插入表格，放入相应的对象 4.广告区，删除图片，设置单元格背景颜色，高度 5.版权区，删除图片 切换到photoshop软件中，利用吸管工具，吸取对应的颜色，在拾色器里查看颜色代码并复制，CCBFAF，然后再DW软件中，选择版权区上对应的单元格设置单元格颜色# CCBFAF，千万别忘记加#号 并加注版权 6.页面属性设置： 7，头顶广告区设置 在页面顶部回车键另起一行，插入1行1列，宽度为页面宽度的表格，居中对齐，在表格内插入相应的广告图片或动画。增加网站收入。 课后作业： 裕科电子切分编辑 小结：案例二切图复杂，对基础进一步巩固