《网页设计与制作》模块4图文模板
合集下载
网页设计与制作PPT模板.ppt
所提供的服务主要是、、、网上传呼、在线聊天、网上购物等等，而其 中和是最常用的服务。
1.1.2
• ( )简称为或万维网，客户端只要通过“浏览器”（）就可以非常方 便地访问上的服务器端，迅速地获得所需的信息。如图所示。
客户端 浏览器
HTTP 网络协议
internet
WEB服务器
用户通过浏览器访问服务器的网页，那么如何查找这些网页呢？通过在浏览 器的地址栏中输入网址，即，统一资源定位器。
1.2.2 图形和图像处理工具
• 目前常用的图形和图像处理工具主要：及。 • 的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆
绑了 ，能够实现各种专业化的图像处理、动画的制作等。 • 是由公司出品的首选图形图像处理软件。它的独特之处在于其能够优化
处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等， 可以生成 ，直接导入到网页中，使用非常方便。本教材将在以后的章节 做详细的介绍。
1.1.1 的概述
最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部 高级研究计划署协助开发的。最初是只允许国防部人员进入的封闭式 网络。到1987年，在美国国家科学基金会的推动下，将之主要从军 事用途转向科学研究和民事用途，形成了今天的主干网雏形。全球网 络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网 站这些活动已融入我们的日常生活。
1.2.3 动画制作工具
• 是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设 计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一 起，以制作出高品质的网页动态效果。所使用的图形是压缩的矢量图 形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载 边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出 高品质的动画，已经慢慢成为网页动画的标准，成为一种新兴的技术 发展方向。本教材将在以后的章节做详细的介绍。
1.1.2
• ( )简称为或万维网，客户端只要通过“浏览器”（）就可以非常方 便地访问上的服务器端，迅速地获得所需的信息。如图所示。
客户端 浏览器
HTTP 网络协议
internet
WEB服务器
用户通过浏览器访问服务器的网页，那么如何查找这些网页呢？通过在浏览 器的地址栏中输入网址，即，统一资源定位器。
1.2.2 图形和图像处理工具
• 目前常用的图形和图像处理工具主要：及。 • 的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆
绑了 ，能够实现各种专业化的图像处理、动画的制作等。 • 是由公司出品的首选图形图像处理软件。它的独特之处在于其能够优化
处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等， 可以生成 ，直接导入到网页中，使用非常方便。本教材将在以后的章节 做详细的介绍。
1.1.1 的概述
最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部 高级研究计划署协助开发的。最初是只允许国防部人员进入的封闭式 网络。到1987年，在美国国家科学基金会的推动下，将之主要从军 事用途转向科学研究和民事用途，形成了今天的主干网雏形。全球网 络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网 站这些活动已融入我们的日常生活。
1.2.3 动画制作工具
• 是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设 计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一 起，以制作出高品质的网页动态效果。所使用的图形是压缩的矢量图 形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载 边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出 高品质的动画，已经慢慢成为网页动画的标准，成为一种新兴的技术 发展方向。本教材将在以后的章节做详细的介绍。
网页设计与制作4
5．显示／隐藏图层或对象 在【层】面板中图层和对象前面都有一 个【眼睛】图标，单击该【眼睛】图标，该 【眼睛】图标会消失，对应的图层或对象在 画布上也被隐藏。再单击该【眼睛】图标所 在的地方，该【眼睛】图标会重新出现，对 应的图层或对象也重新在画布上显示。 当某个图层被隐藏后，位于该图层中的对象 都将被隐藏。 可以在图层的菜单中选择【显示全部】或 【隐藏全部】命令来显示或者隐藏所有的图 层。
对象组合以后，在【层】面板中的对象图 层将合并为一个组合对象图层。 对象组合以后，使用【指针工具】单击组合对 象，可以将组合对象作为一个对象选中并做各 种编辑工作，特别是移动组合对象，其中所有 对象将一起移动，且各对象的相对位置不变。 使用【部分选择工具】可以选中组合对象中的 某一个对象，单独进行编辑。 使用【指针工具】选中组合对象，选择菜单 【修改】|【取消组合】命令可以取消对象的组 合。取消对象组合以后，在【层】面板中的对 象图层恢复原样。
图4-6 【变形】菜单
图4-7 【数值变形】对话框
10．对齐对象 选中多个对象将其对齐的方式有八种，分 别为左对齐、右对齐、顶对齐、底对齐、垂直 居中、水平居中、均分宽度、均分高度，前六 种至少同时选中两个对象，后两种至少同时选 中三个对象。选中对象在包含所有被选对象的 最小矩形区域内对齐，如图4-8中用辅助线标出 包含所有被选对象的最小矩形区域。 选中要对齐的多个对象。选择菜单【修改】 |【对齐】命令中的相关子命令或单击修改工具 栏中相应的按钮即可实现对象的对齐操作。
4.1.1 【层】面板中图层ห้องสมุดไป่ตู้对象的操作 1．【层】面板 Fireworks 8主要通过【层】面板对图层进行管理 和操作，【层】面板如图4-1所示。可通过选择【窗 口】|【层】命令来显示【层】面板。
网页设计与制作教程PPT课件
案例二：企业官网制作
总结词
专业形象塑造
详细描述
企业官网是企业形象的重要组成部分，设计时需注重专业 形象的塑造。采用符合企业品牌形象的颜色、字体和布局 ，以及专业的图片和内容，提升企业形象和可信度。
总结词
用户体验优化
详细描述
企业官网的用户体验至关重要，设计时应注重用户需求和 习惯。提供清晰的信息架构、便捷的导航和搜索功能，以 及响应式设计，确保用户在不同设备和浏览器上都能获得 良好的访问体验。
使用CSS和JavaScript创建一个模 态对话框，当用户与页面交互时弹 出，并覆盖背景内容。
表单验证
使用JavaScript对表单输入进行验 证，确保用户输入的数据符合要求， 提高数据质量。
特效制作
淡入淡出效果
使用CSS动画实现元素从透明到不透明或从一种颜 色渐变到另一种颜色的效果。
滑动效果
使用CSS或JavaScript实现元素在页面上的滑动效 果，如左右滑动、上下滑动等。
本课程将涵盖网页设计理念、HTML、CSS、JavaScript等前端技术，以及响应 式设计、网页性能优化等方面的知识，使学员能够独立完成一个精美、高效的网 页作品。
学习目标
01
掌握网页设计的基本理 念和原则，能够独立设 计出符合用户需求的网 页。
02
熟悉HTML、CSS、 JavaScript等前端技术， 能够熟练地编写网页代 码。
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
《网页设计与制作—DreamweaverMX2004、FireworksMX(精)
《网页设计与制作—Dreamweaver MX 2004、Fireworks MX 2004、Flash MX 2004课程网站》课件介绍《网页设计与制作》是我院高职计算机专业的核心课程，是我院本科非计算机专业学生的计算机公共基础课程的后续选修课程。
该课程主要讲授网站的建立与发布、网页的设计与制作、网页图形图像处理、Flash动画制作。
本课件是以计算机网络技术和多媒体技术为手段开发的课程网站.。
本课件设计制作了两个教学网站——『课堂教学网站』与『远程自学网站。
』（见图1）图1一. 课堂教学网站课堂教学网站适用于在多媒体教室或计算机房教师授课时使用。
该网站课件包括8个模块：（见图2）1. 多媒体网络授课教案：该课件将课程的全部内容制作成多媒体网页，教师在讲授过程中通过访问课程网站，打开多媒体网页，通过讲解、演示教案网页进行授课。
本课件对每章教案都设计了教学目标→范例预览→知识讲解→操作演示→课堂练习→要点总结→实验作业→单元测试8个教学环节。
2. 知识结构图与学习路径导航：本教程分别制作了Dreamweaver网页制作、Fireworks图像制作、Flash动画制作的知识结构图；并在每章教案中使用学习路径流程图进行导航。
学生通过这些结构图，可以较快地建构、掌握整个知识体系。
并方便学生在课后访问课程网站时根据自己的实际水平与学习需要自主快捷地获取知识。
图23. 实验指导：本课件根据各知识点的教学要求设计每次上机练习需要学生完成的实验，在课件中说明实验的制作方法、展示实验范例样本，提供实验素材下载、提供制作方法的动画演示。
学生通过访问课程网站可自主获取课程实验的全部相关信息与在线辅导。
4. 在线测试：为了使学生能够及时对所学的知识进行总结、复习与检测，本课件制作了在线测试系统（目前已制作了48套单元测试卷）。
根据每章内容的重点与知识点进行单元自测。
要求学生在完成每个单元的学习后，通过访问课程网站进行在线测试，测试系统进行自动评判并给出答案或试题分析。
新编Dreamweaver CS3动态网页设计与制作教程图文 (4)
第4章 文字和图像的应用 图4.5 【换行符】命令
第4章 文字和图像的应用
3. 插入水平线 为了区分网页中插入的不同内容，可以通过添加水平线 在不完全分隔界面的情况下来区分上下区域。具体操作步骤 如下： (1) 打开文本并定位插入点。 (2) 执行【插入记录】→【HTML】→【水平线】命令， 插入与单元格宽度相等的水平线。 (3) 单击插入的水平线，打开水平线【属性】面板，如 图4.6所示。可在【水平线】文本框中输入水平线名称(只能 以英文或数字命名)，并设置水平线宽度及高度，从而制作出 所需的水平线。
(8) 删除不需要的行/列。选中刚插入的新行，单击鼠标 右键，选择【表格】→【删除行】命令，删除该行，如图 4.16所示。
(9) 保存文档。
第4章 文字和图像的应用 图4.14 【插入行或列】命令
第4章 文字和图像的应用 图4.15 【插入行或列】对话框
第4章 文字和图像的应用 图4.16 【删除行】命令
第4章 文字和图像的应用 图4.23 图像【属性】面板
第4章 文字和图像的应用
(2) 在【属性】面板的【替换】下拉栏中，输入提示文 字“话说懒羊羊还是很可爱的呐”，如图4.24所示。
(3) 保存更改，在浏览器中预览该图像。当指向这个图 像时，便会出现文字提示。
第4章 文字和图像的应用 图4.24 【替换】下拉菜单
第4章 文字和图像的应用 图4.9 【表格】按钮
第4章 文字和图像的应用 图4.10 【表格】对话框
第4章 文字和图像的应用
(3) 如果要在表格的第一列中插入400 × 240像素的图像， 则先要增大列宽，即将光标移动到第一列和第二列之间的边 界处，光标变成双箭头形状，如图4.11所示。
(4) 单击光标并向右拖动，在左侧列下方的宽度值达到 400像素后，停止拖动光标，如图4.12所示。
《网页设计与制作》PPT课件
图片边框宽度为0 (无边框)
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
一种简单滚动图片制作方法2：
将下面代码放在<body>和</body>之间就可以了
<p> <marquee width="415" height="152"> 有超链接的滚动图片 超链接地址和名称 <a href="求职意向.htm"> <img border="0" src="鸽.gif" > </a> <a href="成绩单.htm="旗.gif" > </a> <a href="能力展示.htm"> <img border="0" src="猪.gif" > </a> </marquee> </p>
4、你们怎么学？ 5、如何获得学分又获得知识？
教学网站：/qjbok
基本概念： 1、什么是网页？ 2、网页有哪些构成要素？ 3、常用网页设计工具有哪些？ 4、网站怎么做？
教学、教室安排：
周二班：时间：晚上5、6节（14:00~16:10） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） 周四班：时间：晚上9、10节（7:00~8:40） 理论课：单周（瑞樟4-101） 实验课：双周（瑞樟6-306） • 要求：严格按照老师安排的实验内容上实验， 不允许玩游戏等，一旦发现取消上机资格，实 验成绩为零分； • 请假：要有辅导员签字的假条送给本课程老师。
五、制作滚动字幕
网页设计与制作项目4拓展2
任务要求
利用图像交换技术设计首页导航，不需要二级菜
单。
最终效果
操作提示
打开“index.h，
将导航需要的8张图片顺序拖入到“menu”中。
选择“首页”这张图，在“属性”面板里填写ID为
“img1”，设置“替换”为“首页”，并添加空链接，如 图4-29所示。
谢谢大家！
操作提示
同样的方法设置其他7张图片。 选择“首页”这张图，在右边找到“行为”面板，单
击“+”添加“交换图像”行为，弹出的对话框如图4-30 所示。
操作提示
图像中显示的是当前图像“img1”，单击“浏览”按钮，
选择交换的图像，然后单击“确定”按钮。
用同样的方法给其他7张图片添加“交换图像”的行为。
利用图像交换技术设计首页导航，不需要二级菜
单。
最终效果
操作提示
打开“index.h，
将导航需要的8张图片顺序拖入到“menu”中。
选择“首页”这张图，在“属性”面板里填写ID为
“img1”，设置“替换”为“首页”，并添加空链接，如 图4-29所示。
谢谢大家！
操作提示
同样的方法设置其他7张图片。 选择“首页”这张图，在右边找到“行为”面板，单
击“+”添加“交换图像”行为，弹出的对话框如图4-30 所示。
操作提示
图像中显示的是当前图像“img1”，单击“浏览”按钮，
选择交换的图像，然后单击“确定”按钮。
用同样的方法给其他7张图片添加“交换图像”的行为。
网页设计与制作项目4文图应用
设置图像占位符参数
插入图像占位符效果
4.2.3 通过插入鼠标经过图像制作导航条
步骤1 在表格“Table 1”第3行单元格中定位光 标，执行【插入】|【图像对象】|【鼠标经过图像】菜单 命令，弹出【插入鼠标经过图像】对话框，如图所示。
【插入鼠标经过图像】对话框
4.2.3 通过插入鼠标经过图像制作导航条
【选择图像源文件】对话框
4.2.1
插入图像
步骤6 在弹出的【图像标签辅助功能属性】对话框 中，如图所示，单击“确定”按钮。
设置图像标签辅助功能属性
4.2.1
插入图像
步骤 7 在【图像】属性面板中设置图像宽： 210 、高： 90等属性，如图所示；效果如图所示。 步骤 8 用同样的方法在表格“Table 21”的第2列单 元格中插入图像“ banner.gif ”，在【图像】属性面板中 设置宽度为480、高度为90，效果如图所示。
4.3.1
文本的基本操作
2．插入特殊字符 有些特殊符不能直接输入，如§、£、 ¥、 ©等，可以 用以下方法插入特殊字符。 方法一：执行【插入】|【HTML】|【特殊字符】菜单 命令，在弹出的子菜单中选中需要插入的字符名称，如图 所示。如果在子菜单中没有需要的字符，可以执行【其他 字符】命令，打开【插入其他字符】对话框，如图所示。 选中要插入的对象，单击“确定”按钮即可插入字符。
3、5行第1列单元格内输入文本“机票、旅游”。 步骤4 在表格“Table 32”的第2、4、6行第1
列单元格内分别输入文本“热门信息、旅游度假、机 票”。 步骤5 在表格“Table 32”的第2、4、6行第2列 单元格内输入文本“更多……”；在单元格属性面板中
选择【水平】|【右对齐】选项。
《网页设计与制作》第4章课件
如何实现窗口间的关联3-1
如何实现左列导 航，在右面显示 相关页面？
使用<a>标签的target目标窗口属性
如何实现窗口间的关联3-2
实现窗口间关联的步骤 1、设置窗口名（框架主页）
设置右窗口名为： rightFrame
…… <frameset rows="20%,*" frameborder="0"> ... ... <frame src="subframe/right.html" name="rightFrame"> ... ... </frameset> ……
操作演示：iframe常用属性
练习——引用google主页
需求说明：
根据提供的素材实现
引用Google主页
练习——<iframe>实现页面复用
需求说明：
根据提供的素材实现
总结2-1
框架的基本语法？ 如何实现2行2列的典型框架？
如何实现窗口间关联？
内嵌框架的语法？
……
<body> <iframe src="" width="400px" height="236px" frameborder="1" scrolling="no" > <iframe/>
引用站内页面 <iframe src="subframe/the_second.html" width="400px" height="236px" scrolling="no" > <iframe/> </body> …… 引用站外页面： sohu
网页设计与制作第4章PPT课件
ID：用于设置HTML 5音频的标题。 源：用于设置HTML 5音频源文件。 Controls：选中该属性，表示显示音频播放控件。 Autoplay：选中该属性，则音频在加载完成后自动播放。 Loop：选中该属性，则音频将循环播放。 Muted：设置音频是否静音。 Preload：选中该属性，则音频在页面加载的同时进行加载，并预备播放。如果已选中 “Autoplay”，则忽略该属性。 “Alt源1”和“Alt源2”：用于设置当“源”编辑框中设置的音频格式不被当前浏览器支持 时，打开的第2种和第3种音频格式。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站 点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”，并单 击“确定”按钮，插入插件， 如右图所示。
一、网页、网站和主页
15
拓展知识
HTML 5 Audio和Video所支持的音频和视频格式
HTML 5 Audio元素能够播放声音文件和音频流，下表列出了当前Audio元素支持的3种音频格式及其所适用 的浏览器。
IE 9
Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
4
相关知识
一、插入HTML 5 Audio
步骤 01 将本书附赠的“素材与实例\ch04”目录下的“blog”文件夹拷贝至本地磁盘，并以“blog”为站 点文件夹，在Dreamweaver CC中创建站点“blog”。
步骤 02 启动Dreamweaver CC，在“文件”面板中双击打开站点“blog”中的“music.html”文档。
“W”和“H”：用于设置视频对象的宽度和高度，默认单位为像素。 Flash回退：用于设置在不支持HTML 5视频的浏览器中显示的SWF文件。
9
三、插入并编辑插件
步骤 01 步骤 02
步骤 03
在“blog”站点中新建文档“chj.html”，并将其在文档编辑窗口中打开。 将插入点置于文档编辑窗口中，单击“插入”面板“HTML”类别中的“插件”按钮，打 开“选择文件”对话框。 在对话框的文件列表中选择要 插入的文件“cj.mp3”，并单 击“确定”按钮，插入插件， 如右图所示。
网页设计与制作PPT课件
1.1 网页和网站
1.1.3 网页的基本功能
1、媒介的作用。使用者与信息之间的媒介。 一方面是发布者，功能是发布信息；另一方面 是浏览者，功能是提供浏览的信息，通过浏览 网页找寻需要的信息。
2、互动的作用。浏览者与网页制作单位之 间互动的窗口，可以单向或双向传递信息。
3、传输的作用。作为传输各种电子文件或 信息之用，如下载说明书、更新文件、驱动程 序等。
超链接的标志一般有：文本、图像、热区 三种。要注意的是，所有超链接标志均应清晰 无误地向浏览者标识出来，让人一看就知道。
1.2 网页中的主要元素
1.2.4其他的基本要素
除上述几种要素之外，在网页上经常使用 的还有动画、视频、声音等各种信息的形式。
1．动画。目前网络上常用的动画类型有 gif和Flash动画两种。
第2讲 HTML语言基础
$ [知识目标]
了解HTML文件的基本结构 掌握HTML中文本的编辑及图像的语法 掌握HTML中各种设置超级链接的语法 掌握HTML中表格和框架的基本语法
8 [能力目标]
掌握进行文本及图像的编辑操作 掌握创建各种超级链接的操作 能够编写简单的HTML网页 掌握HTML文件中表格和框架的使用
1.4 网页设计的基本流程
1.4.3网页的测试
1．浏览器兼容性测试。目前浏览器有： Internet Explorer与Netscape两大主流浏览器，二 者对HTML和CSS等语法的支持度是不同的。在 Dreamweaver中提供了可以检查网页中是否含有某版本浏 览器不能识别的语法功能，设计者可以借助其进行检查。
1.4 网页设计的基本流程
1.4.4网页上传和发布
网页设计好，必须把它发布到互联网上， 否则网站形象仍然不能展现出去。发布的服务 器可以是远程，也可以是本地。如果是发布到 互联网上，要先申请域名和主页空间，然后再 利用专用软件（如：CuteFTP）上传，FTP有很 多种软件，最著名的是 CuteFTP 和 LeapFTP， 也可以用Dreamweaver内置的FTP上传。
《电子商务网页设计与制作》项目四 设计与制作网店结构模块
项目四 设计与制作网 店结构模块
主要内容
1 项目引导 2 项目任务书 3 项目任务实施 4 项目任务分析 53 自学与拓展
项目引导
当商品图片的素材收集完毕后就是如何来搭建电子商务网店了。 由于绝大多数运行在淘宝、易趣等电子商务平台上的网店页面版面 布局基本是固定的，那么可以先对结构模块所用的素材进行设计与 制作，最后来生成整体页面效果。在电子商务网店设计与制作中， 最主要的网页元素就是图像。本项目将完成网店各结构模块中的静 态图像元素制作。
项目任务实施—任务一 制作网店告示牌
4.合并图层，保存文件：可先直接存储文件“告示板.psd”,保留图层信息作为备用。 再可通过单击“图层”，在图4-7所圈选的合并图层方式合并图层后，并存储为“告 示板.jpg”，用于网店。
项目任务分析—任务一 制作网店告示牌
1.规则选区 矩形选框 ，建立一个矩形选区（使用 Shift 键可建立正方形选区）。 椭圆选框 ，建立一个椭圆形选区（使用 Shift 键可建立圆形选区）。 单行 或单列 选框，将边框定义为宽度为 1 个像素的行或列。 在选区属性栏中，选区相加减的选项如图4-8所标示。1图标标示，创建新选区，是 默认选项；2图标标示，添加到选区，可把新选区，和已有选区相加在一起；3图标 标示，从选区中减去，可从已有选区中减去新选区；4图标标示，与选区相交，可 将新选区与已有选区相交部分保留。
项目任务引导—任务一 制作网店告示牌
本任务目标将通过对图像素材的简单处理和文字的制作来完成网店 告示板模块的设计与制作。网店告示牌一般内容可包括：网店工作 时间、联系方式、最新信息等。效果如下图所示。
项目任务实施—任务一 制作网店告示牌
1.创建告示板文件 网店中告示板文件一般放置在页面左边分类列表上方或者下方。宽度基本在190像 素，高度不一，本任务中文件大小以190*300像素为例。打开Photoshop，按要求新 建文件，背景为白色。 2.素材编辑 在Photoshop中打开“素材01.psd”，该素材文件为PSD分图层素材，便于编辑。按 住“Ctrl”键，鼠标点选图层“Layer 1”的图层缩览图，如图4-2所示。
主要内容
1 项目引导 2 项目任务书 3 项目任务实施 4 项目任务分析 53 自学与拓展
项目引导
当商品图片的素材收集完毕后就是如何来搭建电子商务网店了。 由于绝大多数运行在淘宝、易趣等电子商务平台上的网店页面版面 布局基本是固定的，那么可以先对结构模块所用的素材进行设计与 制作，最后来生成整体页面效果。在电子商务网店设计与制作中， 最主要的网页元素就是图像。本项目将完成网店各结构模块中的静 态图像元素制作。
项目任务实施—任务一 制作网店告示牌
4.合并图层，保存文件：可先直接存储文件“告示板.psd”,保留图层信息作为备用。 再可通过单击“图层”，在图4-7所圈选的合并图层方式合并图层后，并存储为“告 示板.jpg”，用于网店。
项目任务分析—任务一 制作网店告示牌
1.规则选区 矩形选框 ，建立一个矩形选区（使用 Shift 键可建立正方形选区）。 椭圆选框 ，建立一个椭圆形选区（使用 Shift 键可建立圆形选区）。 单行 或单列 选框，将边框定义为宽度为 1 个像素的行或列。 在选区属性栏中，选区相加减的选项如图4-8所标示。1图标标示，创建新选区，是 默认选项；2图标标示，添加到选区，可把新选区，和已有选区相加在一起；3图标 标示，从选区中减去，可从已有选区中减去新选区；4图标标示，与选区相交，可 将新选区与已有选区相交部分保留。
项目任务引导—任务一 制作网店告示牌
本任务目标将通过对图像素材的简单处理和文字的制作来完成网店 告示板模块的设计与制作。网店告示牌一般内容可包括：网店工作 时间、联系方式、最新信息等。效果如下图所示。
项目任务实施—任务一 制作网店告示牌
1.创建告示板文件 网店中告示板文件一般放置在页面左边分类列表上方或者下方。宽度基本在190像 素，高度不一，本任务中文件大小以190*300像素为例。打开Photoshop，按要求新 建文件，背景为白色。 2.素材编辑 在Photoshop中打开“素材01.psd”，该素材文件为PSD分图层素材，便于编辑。按 住“Ctrl”键，鼠标点选图层“Layer 1”的图层缩览图，如图4-2所示。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图4-
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
9、图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都 知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品 质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所 以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较 小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求， 试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他 切片又要重新设置，所以存的时候最好检查一下。
模块4：网页切图
学习导入
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
在本模块中着重介绍切片工具、切片选择工具在切图面 方面的应用，通过讲解一个简单的例子，掌握切图的方法和技巧
模块4：网页切图
学习目标
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
图4-10
图4-
10、前面设置好后点击存储会显示以上界面。格式选11项选择HTML和图
像，默认是图像的，这样我们就能得到网页代码了。
模块4：网页切图
任务评价
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结 备知
11、保存后得到一个图片文件夹和一个网页，你看到的网页图标可 能与4-12不一样，这个没有关系，因为浏览器不一样。
日期：
60%
模块4：网页切图
任务总结
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
○任务总结
本任务详细讲解了切片工具、切片选择工具的使用， 在制作过程中，理解操作步骤中各关键步骤的作用，结合制作 分析，明确这些步骤的制作目的。
模块4：网页切图
20%
70%
关键能力
1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。
1.课堂表现2.学习任务完 成
40%
专业能力
1.能使用PS中的切图工具切出图片，切出的图 片合理性；
1.课堂表现 2.学习任务完成3.效果图 质量
指导教师综合评 价
指导教师签名：
感谢
谢谢，精品课件 资料搜集
感谢
谢谢，精品课件
资料搜集
1、切图工具有两个，一个是切片工具，另一个是切片选择工 具。左边有个小按钮，按住它这三个选项就会显示出来,如图42所示。
图4-3
图4-4
图4-2
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总结必
4、切片工具先裁一个框出来，我们可以看到图片上已经有01 的框，但是右边02显示为灰色。（图4-5 ）
图4-12
模块4：网页切图
任务评价
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
○任务评价 任务名称：
班级：
学号：
评价项目
切割图片
姓名：
指导教师：
评价标准
评价方式
评价依据（评（价企业） 权重
得分小 计
总分
10%
图4-6
图4-5
5、继续用切图工具裁第二个框，01和02的框一定要贴合，否则 会出现一个03的框。当切图位置没切对，可能给后面带来麻烦 的是换图片会比较麻烦。这个时候切图的框是可以移动的，你 可以把鼠标放在边框上试着移动下，看下效果。你只能移动02， 不能移动01。 （图4-6）
6、发现切图的位置出现错误，开始调整，刚才把02位置往右挪 好，它从02变成了03。（图4-7）
○任务描述 小花毕业后在一家网络公司从事网页美工工作，要将网页切图处 理。 ○任务目标 利用切片工具、切片选择工具将下图4-1所示，切成两个小块， 并将切出的图片保存。
图4-1 ○任务分析 使用切片工具切出图片，再用切片选择工具对切片进行调整，最 后将切片保存。
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
7、然后用切图选择工具选择01，这样我就能把01的位置调 整正确了。 8、切好图之后就图到4最-8重要的步骤了，如下图所示，选择文件下 面的存储为Web和设备所用格式，最好能记住快捷键。
技能目标： 将photoshop制作出的整体网页，切割成若干个小图片 知识目标： 1.掌握切片工具工具的应用 2.掌握切片选择工具的应用 3.了解切图的原因 4.了解切图的一些基础原则
模块4：网页切图
分析
任务描述、任务目标、任务
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
必备知识
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结 备知
1.切图原因 在制作纯静态页面的时候，多用photoshop制作整体页面，以达到网页 整理色调协调的目的，在图片上传时，一整张网页图片不仅上传容易产生 数据丢失，且在打开网页的过程中，浏览器也需要逐一读取，导致网页打 一速度慢，因此我们需要把一整张图切割成N个小图，证浏览器同时开打 每个小图，以加快网页展开速度。 2.切图注意事项 网页设计的切图，最好先用PS做出效果图，然后进行切图，切出的图片 常用的格式为：jpg、gif、png。 （1）切图的原则：①分析图片,了解图片布局(切图时就知道布局的 div+css怎么写) 2.图切的大小越小越好。②图切的数量越少越好。 那 对于一整张图来说，同时达到这两个原则是相互矛盾的，所以一个网页差 不多切成20-30个图就可以了，这样网页的加载速度是不会受影响的。 （2）切图的技巧： ①一行一行的切图。 ②背景的切成小条。③不 能分开的不分好了，选行的时候要注意怎么样合理。④能取整数，则取整 数 能整则不零 。⑤切图的时候要放大至少到300%，因为一次移动一个
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
9、图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都 知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品 质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所 以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较 小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求， 试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他 切片又要重新设置，所以存的时候最好检查一下。
模块4：网页切图
学习导入
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
在本模块中着重介绍切片工具、切片选择工具在切图面 方面的应用，通过讲解一个简单的例子，掌握切图的方法和技巧
模块4：网页切图
学习目标
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
图4-10
图4-
10、前面设置好后点击存储会显示以上界面。格式选11项选择HTML和图
像，默认是图像的，这样我们就能得到网页代码了。
模块4：网页切图
任务评价
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结 备知
11、保存后得到一个图片文件夹和一个网页，你看到的网页图标可 能与4-12不一样，这个没有关系，因为浏览器不一样。
日期：
60%
模块4：网页切图
任务总结
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
○任务总结
本任务详细讲解了切片工具、切片选择工具的使用， 在制作过程中，理解操作步骤中各关键步骤的作用，结合制作 分析，明确这些步骤的制作目的。
模块4：网页切图
20%
70%
关键能力
1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。
1.课堂表现2.学习任务完 成
40%
专业能力
1.能使用PS中的切图工具切出图片，切出的图 片合理性；
1.课堂表现 2.学习任务完成3.效果图 质量
指导教师综合评 价
指导教师签名：
感谢
谢谢，精品课件 资料搜集
感谢
谢谢，精品课件
资料搜集
1、切图工具有两个，一个是切片工具，另一个是切片选择工 具。左边有个小按钮，按住它这三个选项就会显示出来,如图42所示。
图4-3
图4-4
图4-2
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总结必
4、切片工具先裁一个框出来，我们可以看到图片上已经有01 的框，但是右边02显示为灰色。（图4-5 ）
图4-12
模块4：网页切图
任务评价
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
○任务评价 任务名称：
班级：
学号：
评价项目
切割图片
姓名：
指导教师：
评价标准
评价方式
评价依据（评（价企业） 权重
得分小 计
总分
10%
图4-6
图4-5
5、继续用切图工具裁第二个框，01和02的框一定要贴合，否则 会出现一个03的框。当切图位置没切对，可能给后面带来麻烦 的是换图片会比较麻烦。这个时候切图的框是可以移动的，你 可以把鼠标放在边框上试着移动下，看下效果。你只能移动02， 不能移动01。 （图4-6）
6、发现切图的位置出现错误，开始调整，刚才把02位置往右挪 好，它从02变成了03。（图4-7）
○任务描述 小花毕业后在一家网络公司从事网页美工工作，要将网页切图处 理。 ○任务目标 利用切片工具、切片选择工具将下图4-1所示，切成两个小块， 并将切出的图片保存。
图4-1 ○任务分析 使用切片工具切出图片，再用切片选择工具对切片进行调整，最 后将切片保存。
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
模块4：网页切图
任务实施
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
7、然后用切图选择工具选择01，这样我就能把01的位置调 整正确了。 8、切好图之后就图到4最-8重要的步骤了，如下图所示，选择文件下 面的存储为Web和设备所用格式，最好能记住快捷键。
技能目标： 将photoshop制作出的整体网页，切割成若干个小图片 知识目标： 1.掌握切片工具工具的应用 2.掌握切片选择工具的应用 3.了解切图的原因 4.了解切图的一些基础原则
模块4：网页切图
分析
任务描述、任务目标、任务
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结
必备知识
学习导 入 学习目 标 任务切割图 片 任务 描任述务 任目务标 任分务析 实任施务 评任价务 总必结 备知
1.切图原因 在制作纯静态页面的时候，多用photoshop制作整体页面，以达到网页 整理色调协调的目的，在图片上传时，一整张网页图片不仅上传容易产生 数据丢失，且在打开网页的过程中，浏览器也需要逐一读取，导致网页打 一速度慢，因此我们需要把一整张图切割成N个小图，证浏览器同时开打 每个小图，以加快网页展开速度。 2.切图注意事项 网页设计的切图，最好先用PS做出效果图，然后进行切图，切出的图片 常用的格式为：jpg、gif、png。 （1）切图的原则：①分析图片,了解图片布局(切图时就知道布局的 div+css怎么写) 2.图切的大小越小越好。②图切的数量越少越好。 那 对于一整张图来说，同时达到这两个原则是相互矛盾的，所以一个网页差 不多切成20-30个图就可以了，这样网页的加载速度是不会受影响的。 （2）切图的技巧： ①一行一行的切图。 ②背景的切成小条。③不 能分开的不分好了，选行的时候要注意怎么样合理。④能取整数，则取整 数 能整则不零 。⑤切图的时候要放大至少到300%，因为一次移动一个