1 / 21

制作班级主页

制作班级主页. ——网页切片应用. 1. 什么是切片. 2. 网页切片的作用. 3. 网页切片的流程. 4. 切片原则和注意问题. 网页切片应用. 什么是切片. 在PhotoShop或者FireWork中 将大图片分解为小图片 ，用于提高网页浏览的速度。. 网页切片的作用. 加快网页浏览和图片下载的速度 更好的对页面元素进行定位 有效地减 少 页面文件的大小. 美工. 切片. 编辑. 导出. 布局. 网页切片流程. 双击添加标题文字. 网页切片流程： 在PS中画出美工图 使用切片工具进行切片 编辑和细化切片 存储为web所用的格式

jonah-saunders
Download Presentation

制作班级主页

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. 制作班级主页 ——网页切片应用

  2. 1 什么是切片 2 网页切片的作用 3 网页切片的流程 4 切片原则和注意问题 网页切片应用

  3. 什么是切片 • 在PhotoShop或者FireWork中将大图片分解为小图片，用于提高网页浏览的速度。

  4. 网页切片的作用 • 加快网页浏览和图片下载的速度 • 更好的对页面元素进行定位 • 有效地减少页面文件的大小

  5. 美工 切片 编辑 导出 布局 网页切片流程 双击添加标题文字 • 网页切片流程： • 在PS中画出美工图 • 使用切片工具进行切片 • 编辑和细化切片 • 存储为web所用的格式 • 在DW中对网页进行布局和调整

  6. 美工 切片 编辑 导出 布局 网页切片流程之美工 双击添加标题文字 关键字：页面设置｜参考线｜图层组｜字体格式 难度指数：

  7. 双击添加标题文字 美工 切片 编辑 导出 布局 网页切片流程之切片 操作方法：切片工具 关键字： 页面规划｜参考线｜隐藏层 难度指数：

  8. 美工 切片 编辑 导出 布局 网页切片流程之编辑 操作方法：切片选取工具 关键字： 切片名称 难度指数：

  9. 双击添加标题文字 美工 切片 编辑 导出 布局 网页切片流程之导出 操作方法：文件——存储为web所用格式 关键字： 图片格式 难度指数：

  10. 双击添加标题文字 美工 切片 编辑 导出 布局 网页切片流程之布局 关键字：背景｜错位｜CSS 难度指数：

  11. 网页美工图关键字 • 美工图长宽设置： • 网页的宽度 = 显示器分辨率宽度 - 滚动条宽度 • 1024分辨率——1002 宽度(1024-22) • 800分辨率—— 778 宽度(800-22) • 长度根据需要而定 • 参考线的设置 • 图层组的设置，图层的命名 • 文本格式的设置 • 尽量使用常用字体——中文：宋体、黑体、楷体；英文：Arial • 一级标题：16px；二级标题：14px；普通文本：12px

  12. 网页切片关键词之页面规划 • 切片是一个总体的规划，要事先把设计图与页面结构、CSS样表对应起来。 • 同样的一张模板，不同的人会有不同的切法，因为每个人都有自己的布局习惯，有些人习惯table布局，有些人则擅长div+css。

  13. 网页切片关键字之页面规划 • 大刀阔斧的在PS中将效果图切成几行——横向对齐。 • 放大效果图，分别将几行切成小图，原则是， • 颜色一样的切成一个小图， • 网页中布局中作为文字内容显示的区域切成小图 • 尽量切成一列一列的 • 小图小图之间不要留空隙，可以放大来观察，发现了可以及时调整。

  14. 网页切片关键词之参考线 • 选中布局时标志性的图片拖出参考线 • 切片的一种方法——基于参考线的切片 • 切片时会自动依附，使之更细致，无误差

  15. 网页切片关键词之隐藏层 • 隐藏图层中的文本,链接,图像 • 尽可能的显示只有容器相关的图层 • 只显示背景,头部,导航,主体的容器,和页脚

  16. 切片编辑关键词之切片命名 • 给每一个切片命一个名字(名字最好是有意义的) • 合并（或者链接）可以合并的图片 • 已经隐藏的需要单独保存的图片（如logo）需要单独保存

  17. 切片导出关键字之图片格式 • 用菜单栏的“存储为Web所用格式”转换成html和图片 • 颜色单一过渡少的，应该导出为GIF • 颜色过渡比较多，颜色丰富的应该导出为JPG • 有动画的部分应该导出为GIF动画

  18. 切片注意点—二次切片 • 若有需要的话，切背景，改名，只存当前背景切片的图片。 • 第一次切片（剪裁出的页面主体） • 根据网页布局的需要切成大块，存储为web和设备所用格式——html和图像 • 注意给重点切片取名字 • 切大块时，一些无关图片需隐藏 • 第二次切片 • 根据第一次切片的大块分别裁剪以进行二次切片 • 用作超链接或者网页内容的图片单独保存（可以进行二次切片、或者复制组、复制图层），二次切片时，存储为web和设备所用格式——仅限图像

  19. 网页布局注意点 • 简单网页无需重新布局 • 进行小部分调整：设置背景色、背景图片、CSS样式 • 复杂网页若改动会导致网页变形，需要重新用表格或者DIV+CSS进行页面布局。 • 由切片生成的网页需将一些图片设置为背景，注意设置单元格的宽度和高度

  20. 切片原则和常见问题 • 只切你需要的元素，很多元素可以通过CSS样式表来实现，图片并不代表一切 • 切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。 • 对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来 • 在DW中进行编辑时，少用图片，如果能用背景颜色代替的就使用背景颜色 能使用图案的也尽可能使用图案平铺来形成背景 • 在DW中进行编辑时，删除图片时出面表格错位如何办？ 删除图片的时候记住图片的长宽，再设置单元格的属性。

  21. 谢谢！

More Related