第14章 Web图形处理与切片

教学大纲精选集团标准化小组：[VVOPPT-JOPP28-JPPTL98-LOPPNN]《A I》教学大纲教学学时：共102节，其中讲授32节。

适用专业：广告设计开课教研组：一、课程性质和任务本课程是针对图形设计的课程，实践性较强，此软件已广泛用于广告、图形设计、编排设计、插画设计等领域，illustrator的基本功能和使用方法的学习，为在今后的广告行业中占有极为重要的地位。

二、课程教学目标本课程的教学目标是：通过系统学习，牢固掌握软件应用方面的专业知识，培养学生的图形处理能力，掌握图形处理的基本技术，可以对平面广告设计中的编排、图形、插画作电脑辅助表达，使学生在掌握基础知识的情况下，激发学生的动手动脑的创造和想象空间，为今后在网络技术、广告平面设计等方面的工作打下基础。

(一)知识教学目标通过系统学习使学生能做到基本掌握该软件的知识结构框架及要点，理解不同章节的重点和难点。

(二)能力培养目标通过讲解辅导与作业练习，要使学生能对该软件熟练掌握操作方法、灵活应用知识技巧，加深对本课程的理解，提高对lllustrator软件的应用能力。

（三）思想教育目标1、具备一定的艺术设计能力和思维能力。

2、学习设计师对艺术设计的创作热诚。

三、课程内容第一章IllustratorCS5的基础1、教学内容I本章将对illustratorCS5的基础知识进行讲解，包括illustratorCS5的新增功能、启动与退出等内容。

2、教学目的与要求1)认识illustrator的界面风格，其中包括界面的总体布局，工具箱、设置栏以及各种不同的调板。

2)能够熟练地了解illustrator的各个组成部分。

3）了解illustrator的基本用途，是学生对illustrator的学习产生兴趣。

3、重点、难点重点：1）IllustratorCS5的基础2）图像处理基础知识3）IllustratorCS5的工作界面难点：1）illustratorCS5的新增功能2）图像分辨率第二章文件的基本操作1、教学内容本章将介绍文件操作，对象操作、视图及页面辅助工具等2、教学目的与要求在于介绍并且让学员掌握illustratorCS5的一些基本文件操作方法，如文件和页面的管理、视图的显示操控、辅助工具的应用等。

重庆三峡职业学院《网页编辑与设计》课程标准课程学分：8总学时：128适用专业：计算机应用技术专业一、前言1、课程性质网页编辑与设计是高职高专计算机应用技术专业的主干专业课程，旨在培养学生的网页制作的WUI网页界面设计及编辑、Flash网站动画设计和动态网站开发基础的技能，使学生掌握Dreamweaver网页设计软件的操作和网页图形设计以及网站整体开发思路和测试发布的方法，熟练掌握Web图形的设计和制作方法，学会利用图形设计工具和Flash动画编辑设计Banner广告条和Web导航条和网页图标等设计；通过学习，使学生掌握Web网站建设的基本方法，掌握网页制作工具的使用方法和技巧，熟悉建站流程和网站服务器基础、动态网站开发基础，培养学生设计网站的能力，同时培养学生的方法能力、社会能力及职业素质。

2、设计思路本课程以“基于工作过程”为指导，邀请行业专家对计算机应用技术专业所涵盖的岗位群进行工作任务和职业能力分析，并以此为依据确定本课程的工作任务和课程内容。

根据计算机应用技术专业所涉及到的网页设计和网站开发技术的运用与web图形图像处理的技能与知识内容，设计若干个学习情境，实施情境化教学，使学生掌握网站开发工具的操作方法、界面设计及处理技术的技能以及相关的专业知识，同时培养学生职业素质，锻炼学生的方法与社会能力。

3、典型任务本课程设计中注重由知识本位向能力本位转化，由知识的划分转向工作任务的划分转化。

以任务引领为基本取向，将所要传授的新知识隐含在一个或几个任务中，学生通过任务引领实现对所学知识的构建。

课程实施中以学生为中心，以完成工作任务的活动为过程，创设真实工作环境，边讲边练，融“教、学、做”为一体。

（1）根据网站项目开发过程，构建了可根据岗位需求变化和教学实际情况灵活组合动态调整的模块化的课程结构：分为6大教学模块、16个教学单元。

（2）课程教学采用了基于3个真实产品的任务驱动型项目教学法。

教学内容与教学方法、教学手段相结合，同时还实施启发式教学法、理论实践一体化教学法、小组协作型教学法等方法。

PS切片工具的基础知识在网页中处理图片时，如果文件很大，它加载的时候需要的时间就会长，尤其是用户网速比较慢的时候。

你可以通过压缩来减小文件大小，但是这会使图像质量受到影响，压缩文件也要适可而止。

因此你需要注意以下几个问题：一是实际文件的大小;二是分辨率;三是压缩。

解决这个问题的方法就是把图片分割，它将允许你在加载图片的时候可以一片一片地加载，直到整个图像出现在你的屏幕上。

一、它的使用原理首先概述下它的工作原理，当你有一个需要花很长时间来加载的大图像时，你可以使用Photoshop中的切片工具把图像切成几个小图。

这些图像将被作为一个单独的文件保存，还可以进行优化通过保存为中Web所用格式。

此外，Photoshop生成HTML和CSS以便用来显示切片图像。

在网页中使用时，图像通过使用前面提到的HTML或CSS在浏览器中重新组合以便达到一个平滑流畅的效果。

下面是一个关于图像切片的例子。

二、切片的基础知识为了简单起见，我们只在一个图上使用切片工具。

在这个例子中，我使用的图片大小为960x722px。

在我们开始之前你需要了解一些知识:a.在创建切片时，你可以使用切片工具或构建使用层。

b.切片可以选择使用选择工具来选中。

c.你可以移动它，设置它的大小，还可以让切片与其他切片对齐。

而且你还可以给切片指定一个名称，类型和URL。

d.每个切片都可以通过保存时的网页对话框进行优化设置。

按下键盘上的C键，选中裁剪工具，右键选择切片工具。

当您创建切片时，你可以进行如下三个样式设置:正常，固定长宽比和固定大小。

a.正常:随意切片，切片的大小和位置取决于你在图像中所画的框开始和结束的位置b.固定长宽比:给高度和宽度设置数字后，你得到的切片框就会是这个长宽比c.固定大小:固定设置长和宽的大小当分割图像时你会碰到一些选项。

如果精确度不那么重要时，你可以手工切片图像，必要的时候，可以使用切片选择工具对已完成的切片图像进行调整。

如果精确度很重要，可以使用参考线在图像上标出重要的位置。

图像处理课程标准课程代码：建议课时数：136（两学期，每学期68）学分：8适用专业：电子商务、计算机应用先修课程：计算机基础、美术后续课程：网页设计与制作、电子商务运营综合技能训练一、前言1、课程的性质《图像处理》课程是江苏省五年制高职电子商务专业的一门主干专业课程。

通过学习，学生要正确理解图像处理技术的基本概念和术语，熟练掌握图像处理的基本操作方法和技巧，具有较强的处理图像的综合操作能力，并初步形成设计意识和思维，此外，通过本课程的学习，培养学生踏实认真、精益求精、团结合作、创新精神，培养良好的职业素质。

2.设计思路本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，引入企业项目，每个项目通过真实的案例展开，通过系统的分析企业需求、构画设计立意到完成最终作品，让学生了解完整的设计流程。

项目根据学习进度设置阶梯状操作难度，通过实践操作掌握商务知识、PS基本概念和平面设计相关知识等。

该课程分两学期讲授，第一学期主要讲授图像处理软件工具的应用，第二学期主要通过具体项目讲授设计的理念及技巧。

教学中立足学生实际，注重学生自主学习、合作学习和个性化教学，根据进阶项目的逐个完成，培养学生学习自主性、创造性和成就感，发展职业能力，提高学生的就业竞争力和综合素质。

二、课程目标1、知识目标：1）熟悉PS工作环境；2）理解工具箱内工具的作用和常用控制面板的功能；3）理解色彩的基本概念和色彩调整的知识3）理解图层、蒙版、滤镜、路径、通道的概念、特点及其作用；4）理解切片在网页图像中的作用；5）理解动作、批处理的作用。

2、能力目标：1）熟练使用PS工具箱中的工具、各主要菜单处理图像；2）熟练使用图层、蒙版、滤镜、路径等进行图像编辑和处理；3）了解通道在图像编辑中的应用；4）掌握切片技术在网页图像中的使用方法；5）掌握动作、批处理在网站建设中批处理图像的方法。

3、素质目标：1）具有勤奋、精益求精、创新的学习的态度；2）具有良好的心理素质和职业道德素质；3）具有高度责任心和良好的团队合作精神；4）具有一定的科学思维方式和判断分析问题的能力；5）具有较强的图像创意思维、艺术设计素质。

《网页设计与制作》笔记第一章：网页设计基础1.1网页设计的定义与重要性1.2网页设计的历史与发展1.3设计原则与最佳实践1.4用户体验的基本概念第二章：网页设计工具与技术2.1设计软件介绍（如Photoshop、Sketch）2.2前端开发工具（如HTML、CSS、JavaScript）2.3响应式设计与框架（如Bootstrap、Foundation）2.4版本控制与协作工具（如Git、GitHub）第三章：网页布局与结构3.1网页布局的基本概念3.2网格系统与布局设计3.3导航设计与信息架构3.4模块化设计与组件化开发第四章：色彩与字体选择4.1色彩理论与配色技巧4.2字体的选择与排版4.3色彩与品牌形象4.4可访问性与色彩使用第五章：网页内容与互动5.1内容策略与信息呈现5.2图像与多媒体的使用5.3互动设计与用户反馈5.4SEO基础与内容优化第六章：网页测试与上线6.1测试类型与测试工具6.2性能优化与加载速度6.3上线流程与维护建议6.4数据分析与用户行为追踪第1章：网页设计基础网页设计的定义与重要性网页设计是指为网站创建和布局视觉内容的过程。

这包括网页的整体外观、结构和交互功能。

网页设计不仅涉及视觉元素的排版和配色，还包括用户如何与网页互动。

一个好的网页设计能够提升用户的体验，增加网站的访问量和转化率。

重要性：1.吸引用户：优秀的网页设计能够第一时间吸引用户的注意，提高用户的留存率。

2.增加可用性：良好的设计帮助用户更容易找到他们所需的信息，减少用户的挫败感。

3.提升品牌形象：专业的网页设计能够增强品牌的可信度和专业形象。

4.搜索引擎优化：设计良好的网页更容易被搜索引擎抓取，从而提升网站在搜索结果中的排名。

考试要点：网页设计的定义及其组成部分网页设计对用户体验和品牌形象的影响网页设计在市场营销中的作用网页设计的历史与发展网页设计的起源可以追溯到20世纪90年代初。

当时网页主要是以文本为主，简单的超链接连接不同的信息。

网页切片方法知识点总结一、什么是网页切片方法？网页切片方法是指将一个整体的网页按照一定的规则或需求，分割成若干个特定的部分或模块，以便更好地进行管理和使用。

通过网页切片方法，可以实现网页内容的细化管理、模块化开发和可复用性，提高网页的可维护性和可拓展性。

二、网页切片方法的基本原理1. 标记语言：网页通常是由HTML、CSS、JavaScript等标记语言组成的，网页切片即是对这些标记语言进行分割和重组的过程。

2. 选择器：网页切片方法往往需要通过选择器来获取并定位特定的元素或模块，常用的选择器包括ID选择器、类选择器、标签选择器等。

3. 分割和重组：在获取到特定的元素或模块后，通过分割和重组的方式，将网页内容按照需求进行拆分和重组，以实现对网页的精细管理和定制。

4. 数据绑定：在网页切片方法中，常常需要将获取到的数据和元素进行绑定，实现数据与视图的绑定，以便实现动态内容的展示和交互。

三、网页切片方法的应用场景1. 响应式布局：在移动端浏览网页时，往往需要对网页进行适配和布局调整，这时可以通过网页切片方法，将网页内容按照不同尺寸的设备进行分割和重组，实现响应式布局。

2. 模块化开发：网页切片方法可以将网页内容分割成独立的模块，使得这些模块可以被单独开发、测试和调试，同时提高模块的复用性和可维护性。

3. 动态页面交互：通过网页切片方法，可以实现对网页内容的动态加载和交互，例如实现局部刷新、异步加载等操作。

4. 降低耦合度：通过网页切片方法，可以将网页内容分割成独立的模块，降低模块之间的耦合度，实现更好的代码管理和维护。

四、网页切片方法的常用技术1. 选择器引擎：通过选择器引擎，可以方便地获取网页中的元素或模块，实现对网页内容的定位和获取。

2. 模板引擎：通过模板引擎，可以方便地生成网页的静态内容和动态内容，实现对网页内容的自动生成和渲染。

3. 数据绑定框架：通过数据绑定框架，可以实现数据与视图的绑定，实现数据的动态展示和交互。