地址 : 北京百万庄大街 22 号邮编 : 100037 编辑热线 : (010) 88379739...

地址 : 北京百万庄大街 22 号邮编 :100037 编辑热线 : (010) 88379739

基于工作过程的网页设计与网站开发教程基于工作过程的网页设计与网站开发教程

机械工业出版社机械工业出版社

主编：张洪斌刘万辉主编：张洪斌刘万辉

地址地址 :: 北京百万庄大街北京百万庄大街 22 号号邮编邮编 :100037 编辑热线编辑热线 : (010) 88379739

机械工业出版社机械工业出版社CHINA MACHINE PRESSCHINA MACHINE PRESS

1. 1. 项目展示与项目目标项目展示与项目目标

2. 2. 项目资讯项目资讯

3. 3. 项目计划与决策项目计划与决策

4. 4. 项目实施项目实施

5. 5. 项目检查与评估项目检查与评估

6. 6. 强化拓展实训强化拓展实训 :: 图像的抠取强化练习图像的抠取强化练习

情境 1 ：淮安信息职业技术学院网站欢迎页设计

基于工作过程的基于工作过程的网页设计与制作教程网页设计与制作教程

第三章网页效果图设计



项目展示与项目目标

1 项目展示与项目目标

•能够认识能够认识 Photoshop CS4Photoshop CS4 界面界面

•熟练掌握快捷键与鼠标操作熟练掌握快捷键与鼠标操作

•掌握掌握 Photoshop CS4Photoshop CS4 的基本操作的基本操作

•掌握掌握 Photoshop CS4Photoshop CS4 的部分基本工具的使用的部分基本工具的使用



1 ．项目背景

2. 项目资讯

淮安信息职业技术学院是经江苏省人民政府批准、教

育部备案的一所全日制专科层次的普通高等学校。首页网

页界面要简洁、大气，能反映学院的性质，包括中文版、

英文版的超级链接，突出学院的“教育部高职高专人才培

养工作水平评估优秀学校”、“江苏省首批示范性高职院

校建设单位”办学优势。



关键知识点一 : 认识 Photoshop CS4 界面

2. 项目资讯

菜单栏菜单栏

工具属性工具属性

工具栏工具栏

编辑窗口编辑窗口

状态栏状态栏

面板栏面板栏



关键知识点二 : 快捷键与鼠标操作

2. 项目资讯

1 ）指法介绍

食指食指

小指小指

快捷键 <Ctrl+A> 的功能是选择全部（与 Windows 操作系统一样）。




2. 项目资讯

食指食指

母指母指

快捷键 <Ctrl+P> 打印




2. 项目资讯

食指食指

母指母指

<Ctrl+Alt+ 空格 > 切换至缩小工具

小指小指




2. 项目资讯

食指食指

母指母指

<Ctrl+Shift+Alt+T> 再次变换复制的像素数据并建立一个副本。

小指小指

无名指无名指




2. 项目资讯

常见问题：

•许多快捷键在中文输入法状态下无效；解决办法：切换至英文输入状态。许多快捷键在中文输入法状态下无效；解决办法：切换至英文输入状态。•按了键但没有按到底（主要为女生）；解决办法：按键时适当用些力气。按了键但没有按到底（主要为女生）；解决办法：按键时适当用些力气。•按组合快捷键时，先按了的按键不小心松开了，使整个组合快捷键无效（初按组合快捷键时，先按了的按键不小心松开了，使整个组合快捷键无效（初

期会出现）；解决办法：不要松开第一个按键。期会出现）；解决办法：不要松开第一个按键。•快捷键与鼠标协同操作时，先松开键盘，后松开鼠标导致鼠标操作无效，解快捷键与鼠标协同操作时，先松开键盘，后松开鼠标导致鼠标操作无效，解

决办法：先松开鼠标，再松开键盘。决办法：先松开鼠标，再松开键盘。



常用快捷键

2. 项目资讯

快捷键快捷键功能与作用功能与作用快捷键快捷键功能与作用功能与作用

Ctrl+NCtrl+N 新建图形文件新建图形文件 TabTab 隐藏所有面板隐藏所有面板

Ctrl+OCtrl+O 打开已有的图像打开已有的图像 Shift+TabShift+Tab 隐藏其他面板（除工具栏）隐藏其他面板（除工具栏）

Ctrl+WCtrl+W 关闭当前图像关闭当前图像 DD 默认前景色和背景色默认前景色和背景色

Ctrl+ACtrl+A 全部选择全部选择 XX 切换前景色和背景色切换前景色和背景色

Ctrl+DCtrl+D 取消选区取消选区 FF标准屏幕模式、带有菜单栏标准屏幕模式、带有菜单栏的全屏模式、全屏模式的全屏模式、全屏模式

Ctrl+Shift+ICtrl+Shift+I 反向选择反向选择 Ctrl++Ctrl++ 放大视图放大视图



常用快捷键

2. 项目资讯

Ctrl+Shift+ICtrl+Shift+I 反向选择反向选择 Ctrl++Ctrl++ 放大视图放大视图

Ctr+SCtr+S 保存当前图像保存当前图像 Ctrl+-Ctrl+- 缩小视图缩小视图

Ctr+ XCtr+ X 剪切选取的图像或路径剪切选取的图像或路径 Ctrl+0Ctrl+0 满画布显示满画布显示

Ctr+ CCtr+ C 拷贝选取的图像或路径拷贝选取的图像或路径 Ctrl+LCtrl+L 调整色阶调整色阶

Ctrl+VCtrl+V 将剪贴板的内容粘到当将剪贴板的内容粘到当前图形中前图形中 Ctrl+MCtrl+M 打开曲线调整对话框打开曲线调整对话框

Ctr+ KCtr+ K “ ”打开预置对话框“ ”打开预置对话框 Ctrl+UCtrl+U “打开色相“打开色相 // ”饱和度对话”饱和度对话框框

Ctr+ ZCtr+ Z 还原还原 //重做前一步操作重做前一步操作 Ctrl+ShifCtrl+Shift+Ut+U 去色去色



常用快捷键

2. 项目资讯

Ctr t+Alt+ ZCtr t+Alt+ Z 还原两步以上操作还原两步以上操作 Ctrl+ICtrl+I 反相反相

Ctrt+ Shift + ZCtrt+ Shift + Z 重做两步以上操作重做两步以上操作 Ctrl+JCtrl+J 通过拷贝建立一个图层通过拷贝建立一个图层

Ctrl+TCtrl+T 自由变换自由变换 Ctrl+ECtrl+E 向下合并或合并联接图层向下合并或合并联接图层

Ctrl+Shift+Alt+TCtrl+Shift+Alt+T 再次变换复制的象素数据并再次变换复制的象素数据并建立一个副本建立一个副本 Ctrl+[Ctrl+[ 将当前层下移一层将当前层下移一层

DelDel 删除选框中的图案或选取的删除选框中的图案或选取的路径路径 Ctrl+]Ctrl+] 将当前层上移一层将当前层上移一层

Ctrl+BackSpaceCtrl+BackSpace或或 Ctrl+DelCtrl+Del

用背景色填充所选区域或整用背景色填充所选区域或整个图层个图层 Ctrl+Shift+[Ctrl+Shift+[ 将当前层移到最下面将当前层移到最下面

Alt +BackSpaceAlt +BackSpace或或 Alt +DelAlt +Del

用前景色填充所选区域或整用前景色填充所选区域或整个图层个图层 Ctrl+Shift+]Ctrl+Shift+] 将当前层移到最上面将当前层移到最上面

Shift+BackSpaceShift+BackSpace “ ”弹出填充对话框“ ”弹出填充对话框 Ctrl+Alt+DCtrl+Alt+D 羽化选择羽化选择



3. 项目计划与决策

淮安信息职业技术学院网站欢迎页效果图设计项目根据项目背景分淮安信息职业技术学院网站欢迎页效果图设计项目根据项目背景分

析，以一个人为小组进行实施项目。由于是初次制作效果图项目在教师的析，以一个人为小组进行实施项目。由于是初次制作效果图项目在教师的

指导下进行审核工作计划与项目的实施方案，最终确定实施方案。指导下进行审核工作计划与项目的实施方案，最终确定实施方案。

项目设计原则：网页界面要简洁、大气能反映学院的性质，包括中文项目设计原则：网页界面要简洁、大气能反映学院的性质，包括中文

版、英文版的超级链接，突出学院的“教育部高职高专人才培养工作水平版、英文版的超级链接，突出学院的“教育部高职高专人才培养工作水平

评估优秀学校”、“江苏省首批示范性高职院校建设单位”办学优势。评估优秀学校”、“江苏省首批示范性高职院校建设单位”办学优势。



4. 项目实施

11 ）执行“开始”→“程序”→“ ）执行“开始”→“程序”→“ Adobe Photoshop CS4”Adobe Photoshop CS4” 命令打开命令打开 PhotosPhotos

hop hop 软件，然后执行“文件”→“新建”命令，打开新建对话框，其中设置标软件，然后执行“文件”→“新建”命令，打开新建对话框，其中设置标题为：淮安信息职业技术学院欢迎页效果图，宽度：题为：淮安信息职业技术学院欢迎页效果图，宽度： 778778 像素，高度：像素，高度： 430430 像像素，分辨率：素，分辨率： 7272 像素像素 // 英寸，颜色模式：英寸，颜色模式： RGBRGB ，背景内容：白色，如图所示，，背景内容：白色，如图所示，点击“确定”按钮文件新建就完成了。点击“确定”按钮文件新建就完成了。

22 ）在新建文件后，执行“文件”→“存储为”命令将文件保存为“淮安信息职）在新建文件后，执行“文件”→“存储为”命令将文件保存为“淮安信息职业技术学院欢迎页效果图业技术学院欢迎页效果图 .psd”.psd” ，在工具栏单击“前景色”图标，打开“拾取，在工具栏单击“前景色”图标，打开“拾取器（前景色）”对话框，将器（前景色）”对话框，将 RGBRGB值设置为（值设置为（ 4646 ，， 153153 ，， 253253 ），如图），如图 3-83-8 所所示。示。



4. 项目实施

33 ）执行“编辑”→“填充”命令（可采用快捷键）执行“编辑”→“填充”命令（可采用快捷键 <Alt+BackSpace><Alt+BackSpace> 来完成），来完成），

用刚刚选取的颜色填充图像。用刚刚选取的颜色填充图像。

44 ）执行“文件”→“打开”命令将素材文件中的“学院大门）执行“文件”→“打开”命令将素材文件中的“学院大门 . jpg”. jpg” 图片打开，图片打开，

使用工具栏中的“套索工具”中的“多边型套索工具”，采用逐点选择大门场使用工具栏中的“套索工具”中的“多边型套索工具”，采用逐点选择大门场

景的方法直到区域闭合为止，选择前后如图景的方法直到区域闭合为止，选择前后如图 3-93-9 所示。所示。



4. 项目实施

55 ）学院大门选区完成后，执行“编辑”→“拷贝”命令（快捷键）学院大门选区完成后，执行“编辑”→“拷贝”命令（快捷键 < Ctrl +C>< Ctrl +C> ），），

将图像文件切换到“淮安信息职业技术学院欢迎页效果图将图像文件切换到“淮安信息职业技术学院欢迎页效果图 .psd”.psd” 文件，执行“编文件，执行“编

辑”→“粘贴”命令（快捷键辑”→“粘贴”命令（快捷键 < Ctrl +V >< Ctrl +V > ）完成选取图像的粘贴，效果如图所示。）完成选取图像的粘贴，效果如图所示。

66 ）执行“编辑”→“自由变换”命令（快捷键）执行“编辑”→“自由变换”命令（快捷键 < Ctrl +T >< Ctrl +T > ），左手按住），左手按住 < Alt >< Alt >

（以图像中心为中心）和（以图像中心为中心）和 <Shift><Shift> （图像比例不变）键，鼠标控制角点缩小图像到适（图像比例不变）键，鼠标控制角点缩小图像到适

当的位置，使用移动工具调整图像的位置后，图片在整个效果图中和谐，如图所示。当的位置，使用移动工具调整图像的位置后，图片在整个效果图中和谐，如图所示。



4. 项目实施

77 ）打开“院标）打开“院标 .psd”.psd” 文件，使用移动工具，按住鼠标左键直接将“院标”拖动到效文件，使用移动工具，按住鼠标左键直接将“院标”拖动到效

果图中，采用同样的方法将“院名”也拖动到效果途中，再次使用移动工具调整院标果图中，采用同样的方法将“院名”也拖动到效果途中，再次使用移动工具调整院标

与院名所在图层的位置，如图与院名所在图层的位置，如图 3-123-12 所示。所示。

88 ）使用“文字工具”分别添加“教育部高职高专人才培养工作水平评估优秀学校”、）使用“文字工具”分别添加“教育部高职高专人才培养工作水平评估优秀学校”、

“江苏省首批示范性高职院校建设单位”文本，设置它们的字体为“楷体”，字体大“江苏省首批示范性高职院校建设单位”文本，设置它们的字体为“楷体”，字体大

小小 1616点，字体颜色为白色；在院名下方添加“点，字体颜色为白色；在院名下方添加“ Huaian College of Information TeHuaian College of Information Te

chnology”chnology” 文本，设置字体为“文本，设置字体为“ Arial Black”Arial Black” ，字体大小为，字体大小为 99点，字体颜色为白色，点，字体颜色为白色，

调整为之后，如图调整为之后，如图 3-133-13 所示。所示。



4. 项目实施

99 ）打开“树叶）打开“树叶 .psd”.psd” 文件，将树叶文件复制到效果图中，调整图像的位置，如图文件，将树叶文件复制到效果图中，调整图像的位置，如图 3-3-

1414 所示，使用“仿制图章工具”工具（就是将图像中某个地方的像素原样复制到其所示，使用“仿制图章工具”工具（就是将图像中某个地方的像素原样复制到其

他地方，使两个地方的内容一致），按住他地方，使两个地方的内容一致），按住 <Alt><Alt> 键先在采样点“键先在采样点“ 1” 1” 处单击一下，然处单击一下，然

后在“后在“ 2”2”处拖动绘制，就会看到前面的像素被复印出来，如图处拖动绘制，就会看到前面的像素被复印出来，如图 3-153-15 所示。所示。

1

2



4. 项目实施

1010 ）在图层面板新建一个图层，按住）在图层面板新建一个图层，按住 <Shift><Shift> 键，使用“多边型套索工具”在效果键，使用“多边型套索工具”在效果

图中绘制如图图中绘制如图 3-163-16 所示的选区，然后设置前景色的所示的选区，然后设置前景色的 RGBRGB值为（值为（ 88 ，， 8888 ，， 172172 ），），

执行“编辑”→“填充”命令，填充前景色，如图执行“编辑”→“填充”命令，填充前景色，如图 3-173-17 所示，最后执行“编辑”→所示，最后执行“编辑”→

“描边”命令，在“描边”对话框中设置宽度：“描边”命令，在“描边”对话框中设置宽度： 11 像素，颜色：白色，位置：居外，像素，颜色：白色，位置：居外，

混合模式：正常，设置如图混合模式：正常，设置如图 3-183-18 所示，点击确定如图所示，点击确定如图 3-193-19 所示。所示。



4. 项目实施

1111 ）采用同样的方法添加图层，绘制不规则形状后，区域填充为白色，最后在效果图）采用同样的方法添加图层，绘制不规则形状后，区域填充为白色，最后在效果图

右下角用“黑体”添加“中文版”以及用“右下角用“黑体”添加“中文版”以及用“ Arial Black”Arial Black”添加“添加“ English”English” 文字，字体文字，字体

大小为大小为 2424点。最终效果如图点。最终效果如图 3-13-1 所示。所示。

效果图浏览技巧：在效果图浏览技巧：在 PhotoshopPhotoshop 中有三种不同的显示模式，执行“视图” →“屏幕模中有三种不同的显示模式，执行“视图” →“屏幕模

式”下的命令可切换显示模式（快捷键式”下的命令可切换显示模式（快捷键 <F><F> ），如图所示（），如图所示（ <Tab><Tab> 键隐藏了所有工键隐藏了所有工

具）。具）。

图 3-20 效果图浏览显示模式



5. 项目检查与评估

学习目标学习目标评价项目评价项目

了解了解 LogoLogo 的概念与作用的概念与作用能够简单分析一些知名网站的能够简单分析一些知名网站的 LogoLogo

了解文本工具的使用了解文本工具的使用能够熟练使用文本工具，能够调整文本属性与能够熟练使用文本工具，能够调整文本属性与段落的设置等段落的设置等

能够认识图层面板能够认识图层面板

能够设置投影、发光、描边等能够设置投影、发光、描边等 1111种样式效果能种样式效果能够复制图层样式够复制图层样式

能够设置投影、发光、描边等能够设置投影、发光、描边等 1111种样式效果能种样式效果能够复制图层样式够复制图层样式

掌握图层的操作掌握图层的操作能够掌握创建图层、移动图层、复制图层、删能够掌握创建图层、移动图层、复制图层、删除图层、连接图层、合并图层、隐藏除图层、连接图层、合并图层、隐藏 //显示图显示图层、图层编组等基本操作层、图层编组等基本操作



6. 强化拓展实训与作业：企业 LOGO 设计



1. 1. 项目展示与项目目标项目展示与项目目标

2.2. 项目资讯项目资讯

3.3. 项目计划与决策项目计划与决策

4.4. 项目实施项目实施

5.5. 项目检查与评估项目检查与评估

6.6. 强化拓展实训强化拓展实训 :: 图像的抠取强化练习图像的抠取强化练习

课程小结

基于工作过程的基于工作过程的网页设计与制作教程网页设计与制作教程

第三章网页效果图设计



谢谢大家

地址 : 北京百万庄大街 22 号 邮编 : 100037 编辑热线 : (010) 88379739...

Documents

地址 : 北京百万庄大街 22 号邮编 : 100037 编辑热线 : (010) 88379739...