网站美工设计教学设计方案教案

教学设计方案

系（部）（盖章）：信息工程系

教研室：计算机多媒体

课程名称：网站美工设计

主讲教师：

2014年〜2015年第二学期

****职业技术学院制

教学设计方案

课程学时80课程学分5

授课班级1：计多专业13级2班

授课班级2：计多专业13级3班

公共必修课（）公共选修课（）专业必修课（J）专业

课程性质

选修课（）

课程类型理论课（）理论课（）理实一体课（V）

本课程主要面对网站界面设计、网站美工设计、网页制作、

网站开发等相关岗位，扶植学生明确网站界面设计在网站开发中

的重要性，关键培育学生具备肯定的网站界面设计实力，能独立

课程定位

完成一个网站界面的设计与制作，为后续课程打下扎实的根底，

具备网站界面设计的素养和技能，最终成为适应社会岗位需求的

网站建立与管理人才。

考核方式考试（J）考察（）

教材：

《美工神话：Dreamweaver+Photoshop+Flash网页设计与美化》，

邓文达，龚勇编著，人民邮电出版社，

参考教材：

教材及

《中文版PHOTOSHOP图像处理运用教程

参考教材

《网站色彩与构图案例教程》，唐一鹏编著，北京高校出版社，

2008.08

序号授课章节课时

第1章图像的根底学问

1.1位图和矢量图1.2辨别率

1.3色彩形式1.4常用文件格式

第2章文件操作和设置颜色

2.1界面介绍2.2文件操作

课时安排2.3图像显示限制

第1次

2.4标尺、网格线和参考线

2.5图像和画布尺寸

2.6设置图像颜色

第3章绘制选区和编辑图像

3.1选区工具3.2编辑选区

3.3编辑选区中的图像

3.4裁切和变换图像

3.5协助编辑图像工具

3.6复原操作

第4章绘制和修饰图像

4.1绘图工具4.2填充工具

4.3填充与描边吩咐

4.4历史记录画笔

4.5修复与修补工具

4.6修饰工具4.7橡皮擦工具

第2次工程一：制作风景插画

第3次工程二：制作欢乐儿童照片

第4次工程三：修复照片

第5次工程四：更换照片背景

第5章图像色彩

5.1调整图像色彩

第6次第6章绘制途径和图形

6.1绘制途径6.2绘制图形

6.3选取和编辑途径

第7次工程五：将彩色照片调为单色

第8次工程六：调整照片的部分颜色

第9次工程七：制作服饰产品插画

第10次工程八：制作儿童照片模板

第7章图层、通道与蒙版

7.1图层7.2通道7.3蒙版

第11次第8章输入与编辑文字

8.1文本输入8.2文字变形

8.3途径文字

第12次工程九：制作梦幻鼠标

第13次工程十：制作欢乐厨师

第14次工程十一：制作餐饮广告

第15次工程十二：制作运动鞋广告

第9章滤镜效果

9.1滤镜的应用

9.2滤镜的操作技巧

第16次第10章动作的创立与应用

10.1动作限制面板10.2创立动作

第11章网页图片

11.1图像切片11.2存储图片

第17次工程十三：制作素描人生2

第18次工程十四：制作水墨画效果2

第19次工程十五：制作饼干包装2

第20次工程十六：制作端午节网页2

第21次Photoshop图形图像处理综合训练2

第22次工程十七：水果光盘2

第23次工程十八：爱惜地球2

第24次工程十九：冲出画框2

第25次工程二十：可乐苹果2

第1章网站界面设计根底

11网站界面的开展

1.2网站界面的构成要素和要点

1.3网站界面设计原则

1.4网站界面与软件界面的异同

1.5常用工具软件简介

第2章网站界面设计中的色彩

2.1色彩的作用2.2色彩的根本原理

第26次2.3色彩设计的心理效应2

第3章网站界面设计中的图形图像

3.1图形图像的作用

3.2图形图像的分类

3.3图形图像的处理技巧

3.4图形图像的创意与设计

第4章网站界面中首页的设计

4.1网站界面的整体设计

4.2版式的设计

第27次工程二十一：网站按钮的制作2

第28次工程二十二：网站导航栏设计2

第29次工程二十三：网站Log。制作2

第30次工程二十四：网站文字制作2

第5章：网站界面中导航系统的设计

5.1导航系统设计概述

5.2导航系统设计

第6章网站界面中其他功能的设计

第31次2

6.1用户注册与登录6.2论坛

6.3搜寻界面的设计

6.4互动界面设计技巧

6.5后台管理系统的界面设计

第7章网站界面中的广告设计

7.1网络广告的特点

7.2网络广告设计的原则

7.3网络广告的表现手法

7.4网络广告的设计

第32次工程二十五：需求的提出12

第33次工程二十六：综合设计12

第34次工程二十七：用Photoshop设计效果图12

工程二十八：在Dreamweaver中生成网页

第35次2

1

复习；布置考核工程完成信息工程系

第36次2

网站首页界面的设计

第37次工程二十九：需求的提出22

第38次工程三十：综合设计22

第39次工程三H—：用Photoshop设计效果图22

工程三十二：在Dreamweaver中生成网页

第40次2

2

备注：

1、课时安排可依据工程、情境设计，也可依据教材篇章组织，一般是2节课为1次课。

2、表格内的字体为“仿宋_GB2312,小四”。

第1次

【理论一】

授课

第1章图像的根底学问第2章文件操作和设置颜色

章节

第3章绘制选区和编辑图像第4章绘制和修饰图像

授课

授课课时2

日期

1、对PhotoshopCS3有初步的相识和理解，并可以驾驭软件的根本操作方法。

驾驭图像处理的根本概念。

2、娴熟应用PhotoshopCS3的选择工具绘制须要的选区，并能应用好选区的操

作技巧编辑选区。

教学

3、理解PhotoshopCS3绘制、修饰以及填充图像的功能。理解和驾驭绘制和修

目的

饰图像的根本方法和操作技巧。学会将绘制和修饰图像的各种功能和效果应用

到实际的设计制作任务中，真正做到学有所用。

4、理解并驾驭图像的编辑方法和应用技巧，为进一步的编辑和处理图像打下坚

实的根底。

教学内容：

1.1位图和矢量图L2辨别率

1.3色彩形式1.4常用文件格式

2.1界面介绍2.2文件操作

2.3图像显示限制2.4标尺、网格线和参考线

2.5图像和画布尺寸2.6设置图像颜色

3.1选区工具3.2编辑选区

3.3编辑选区中的图像3.4裁切和变换图像

3.5协助编辑图像工具3.6复原操作

教学4.1绘图工具4.2填充工具

内容4.3填充与描边吩咐4.4历史记录画笔

4.5修复与修补工具4.6修饰工具

4.7橡皮擦工具

重点：

1、理解工作界面，图层的含义，标尺参考线等的设置，图像画布尺寸的调整、

位图矢量图的概念及图像文件格式。

2、选框工具的运用、套索工具的运用、魔棒工具的运用。

3、绘图工具、修图工具、填充工具的应用。

4、图像编辑工具、图像的挪动复制和删除、图像的裁剪和变换。

难点：选区编辑、修补工具的运用。

学复习：0分钟；教师讲解：30分钟；思索探讨：5分钟；

教

法

方学生讲解：0分钟；学生练习：50分钟；布置作业：0分钟；

布置下次课预习内容：5分钟；

教学

多媒体模型口实物口挂图口音像口实训口其他口

手段

教任务教师活动设计学生活动设计时间支配

学

钟

5分

演练

后风景

制作秋

1

过任务

程

钟

5分

任务2

演练

然风光

制作自

钟

5分

任务3

演练

片阅读

制作照

钟

5分

演练

海报

乐视听

绘制音

任务4

钟

5分

演练

案

素化图

制作像

任务5

钟

5分

油画

制作

任务6

演练

钟

5分

任务7

杂物

片中的

去除照

演练

钟

5分

任务8

物照片

修复人

演练

钟

5分

饰画

制作装

任务9

演练

钟

5分

插画

灵驿站

制作心

演练

10

任务

无。

作业

课后

体会

授课主要内容

教学内容：

第1章图像的根底学问

位图和矢量图

图像文件可以分为两大类：位图和矢量图。在绘图或处理图像的过程中，这

两种类型的图像可以互相穿插运用。

1.1.1位图

位图图像也叫点阵图像，它是由很多单独的小方块组成的，这些小方块又称为

像素点。每个像素点都有特定的位置和颜色值。位图图像的显示效果与像素点是严

密联络在一起的，不同排列和着色的像素点组合在一起构成了一幅色彩丰富的图

像。像素点越多，图像的辨别率越高，相应地，图像文件占用的存储空间也会随之

增大。运用放大工具放大后，可以清楚地看到像素的小方块形态与不同的颜色。

1.1.2矢量图

矢量图也叫向量图，它是一种基于图形的几何特性来描绘的图像。是以数学的

矢量方式来记录图像内容的。矢量图像中的图形元素称为对象，每个对象都是独立

的，具有各自的属性。矢量图是由各种线条、曲线或是文字组合而成。矢量图与辨

别率无关。

1.2辨别率

辨别率是用于描绘图像文件信息的术语。辨别率分为图像辨别率、屏幕辨别

率和输出辨别率。

1.2.1图像辨别率

在Photoshop中，图像中每单位长度上的像素数目，称为图像的辨别率，其

单位为像素/英寸或是像素/厘米。

1.2.2屏幕辨别率

显示器上每单位长度显示的像素数目。

1.2.3输出辨别率

照排机或打印机等输出设备产生的每英寸的油墨点数（dpi）o

1.3色彩形式

1.3.1CMYK形式

C：青色；M：洋红色；Y：黄色；K：黑色。

1.3.2RGB形式

一种加色形式。R：红色；G：绿色；B：蓝色。

1.3.3灰度形式

灰度形式的灰度图又叫8bit深度图。

此外还有Lab形式、HSB形式、索引颜色形式、位图形式、双色彩形式、多通

道形式。

1.4常用文件格式

PSD格式和PDD格式、TIF格式（TIFF）、JPEG格式、BMP格式、GIF格式、EPS

格式、TGA格式。

可以依据工作任务的须要选择适宜的图像文件存储格式。

用于印刷:TIFF、EPSo

出版物：PDFo

Internet图像：GIF、JPEG、PNG0

用于Photoshop工作：PSD、PDD、TIFF。

第2章文件操作和设置颜色

PhotoshopCS3的系统要求：

图片文件不仅有大量的信息须要存储，而且在每一步操作中都须要经过困难

的计算，才能变更图像的效果。所以配置的凹凸对于软件的运行有干脆的影响。

中文PhotoshopCS3的最低配置：

>CPU：Pentium4处理器。

>内存:512MB。举荐用lGBo

>硬盘：80GB可用磁盘空间。

>显示器：16位彩色或更高级视频卡的彩色显示器。

>1024*768像素或更高的显示器辨别率。

>鼠标或其他定位设备。

>Windows2000sp4或XPspl或sp2操作系统。

>CD—ROMo

2.1界面介绍

主要由标题栏、菜单栏、工整竺、属性拦艮制面板和状态栏组成。

:产/X

"一

2.1.1菜单栏及快捷方式

1、菜单分类

分为文件、编辑、图像、图层、选择、滤镜、分析、视图、窗口及扶植菜单。

2、菜单吩咐的不同状态

子菜单吩咐；不行执行的菜单吩咐；可弹出对话框的菜单吩咐。

3、按工作类型分类显示

可以依据操作习惯存储自定义的工作区。窗口》工作区》存储工作区。

可以依据须要突出显示软件的新增功能。窗口》工作区》新增功能。

可以依据不同的工作类型，显示不同的限制面板。窗口》工作区〉动画。

4、显示或隐藏菜单吩咐

编辑》菜单。

5、突出显示菜单吩咐

编辑》菜单。

6、键盘快捷方式

运用方法有几种：运用鼠标选择所须要的吩咐；运用快捷键选择所须要的吩

咐（如Ctrl+0翻开文件吩咐、Alt+英文字母翻开某个菜单）；自定义键盘快捷方

式（编辑-键盘快捷键,或Alt+Shift+Ctrl+K）。

2.1.2工具箱

工具箱供应了强大的工具，包括选择工具、绘图工具、填充工具、编辑F

工具、颜色选择工具、屏幕视图工具、快速蒙版工具等。

选择工具箱的工具有两种方式：干脆用鼠标点击；运用快捷键。喙这

选择隐藏工具：运用鼠标选择；运用快捷键选择（按住Alt键，再用鼠

标反复单击；按住shift再反复按键盘上的工具快捷键）。¥三

复原工具箱的默认设置。在属性栏中右键单击工具图标，选择“复位工

具”吩咐。号.

2.1.3属性栏

用户选择工具箱中的随意一个工具后，都会在界面中出现相对应的属性栏。

可以通过属性栏对工具进展进一步的设置。

2.1.4状态栏

窗口底部为状态栏，左侧是显示百分数，中间是文件信息。

2.1.5限制面板

限制面板是处理图像时另一个不行或缺的部分。软件的界面为用户供应了多个

限制面板组。

选择限制面板有三种方式：在窗口菜单中选择；运用快捷键（F6为颜色、F7

为图层、F8为信息）；用鼠标点解所须要的面板。

收缩与扩展限制面板、拆分限制面板、组合限制面板、限制面板弹出式菜单。

Tab：隐藏或显示工具箱和限制面板；Shift+Tab：隐藏或显示限制面板。也可

以通过窗口菜单来隐藏或显示。

自定义工作区：窗口〉工作区》存储工作区。

删除工作区：窗口》工作区》删除工作区。

2.2文件操作

2.2.1新建图像

文件》新建；Ctrl+N；按住Ctrl的同时在灰色区域双击。

2.2.2翻开图像

文件》翻开；Crtl+O；在灰色区域干脆双击。

2.2.3保存图像

文件〉存储；Ctrl+S；文件＞存储为;Shift+Ctrl+So

2.2.4关闭图像

文件》关闭吩咐；Ctrl+W；单击关闭按钮。

2.3图像显示限制

2.3.1100%显示图像

2.3.2放大显示图像

运用缩放工具（Ctrl++）、导航面板、状态栏都可以放大图像的显示效果。

2.3.3缩小显示图像

运用缩放工具（Ctrl+-）、导航面板、状态栏都可以缩小图像的显示效果。

2.3.4全屏显示图像

选择缩放工具，单击“合适屏幕”按钮，勾选“调整窗口大小以满屏显示”,

窗口会和屏幕的尺寸相适应。

单击“实际像素”，图像将以实际像素比例显示。

单击“填充屏幕”，图像铺满整个图像区域。

单击“打印尺寸”，图像将以打印辨别率显示。

2.3.5图像窗口显示

鼠标拖曳法;窗口＞排列＞层叠吩咐；窗口＞排列〉平铺吩咐。

2.3.6视察放大图像

抓手工具。可以用来挪动图像，以变更图像在窗口中的显示位置。

启用抓手工具，有以下几种方法。

＞单击工具箱中的“抓手”工具

＞按H键

＞按住Spacebar（空格）键

2.4标尺、网格线和参考线

2.4.1标尺的设置

编辑》首选项〉单位与标尺。视图/标尺吩咐；Ctrl+Ro

2.4.2网格线的设置

编辑》首选项＞参考线、网格和切片。视图/显示/网格；Ctrl+\

2.4.3参考线的设置

视图/显示/参考线；Ctrl+；o

锁定、去除、新建参考线操作：视图菜单。

2.5图像和画布尺寸

2.5.1图像尺寸的调整

图像》图像大小。

2.5.2画布尺寸的调整

图像》画布大小。

2.6设置图像颜色

2.6.1运用“拾色器”对话框设置颜色

2.6.2运用“颜色”限制面板设置颜色

2.6.3运用“色板”限制面板设置颜色

还可以运用吸管工具汲取所需颜色进展设置前风光和背风光。

第3章绘制选区和编辑图像

3.1选区工具

选框工具包括矩形选框工具、椭圆选框工具、单行选框工具和单列选框工具。

在各选框工具的属性栏中，新选区选项去除旧选区，绘制新选区。添加到选

区选项在原有选区的根底上再增加新的选区。从选区减去选项在原有选区的根底

上减去新选区的部分。与选区穿插选项选择新旧选区重叠的部分。

3.1.1矩形选框工具

ill*|1口©也|m：|opx|□消除锯齿|样式：|正常1gll宽度:匚二|=高度:匚二11J

3.1.2椭圆选框工具

O▼」口好的羽化:恒二《消除锯齿牌蹄日期：||二ag：|11I调整,…]

套索工具可以在图像或图层中绘制不规则形态的选区，选取不规则形态的图

像，套索工具组共包括套索工具、多边形套索工具和磁性套索工具，反复按Shift+L

组合键，可以在这3个工具之间进展切换。

3.1.3套索工具

g▼」口尸的|羽化:|0px|叵消除锯齿

3.1.4多边形套索工具

'▼」口『旦1|羽化：0^/消除锯齿W二

3.1.5魔棒工具

选择“魔棒”工具，或按W键，可以选择“魔棒工具”，它可以选取图像中的

某一点，并将与这一点颜色一样或相近的点自动融入选区中。

入，」口『期容差:]，消除幅£3，连续对所有51层或祥

3.1.6课堂案例一一制作秋后风景

3.2编辑选区

3.2.1挪动选区

在图像中创立选区后，将光标放在选区中，光标变为“挪动选区”形态时，

按下鼠标左键拖曳鼠标可挪动选区。

当运用矩形选框工具或椭圆选框工具绘制选区时，在绘制过程中，按住键盘

上的Spacebar（空格）键并拖曳鼠标，可挪动选区。

按键盘上的方向键，可以将选区挪动1个像素。按Shift+方向键，可以将选

区挪动10个像素。

3.2.2调整选区

选择》调整边缘吩咐。

中选择图像的区域后，还可以进展增加选区、减小选区、相交选区等操作。

>运用快捷键调整选区：在已有选区的根底上，按住Shift键，绘制出增加

的选区。按住Alt键，绘制出减小的选区。按住Shift+Alt组合键，绘制

出相交选区。按Ctrl+D组合键，可以取消选区。按Shift+Ctrl+I组合键,

可以对当前的选区进展反向选取。

>运用工具属性栏调整选区。

>运用菜单调整选区。在“选择”菜单下选择“全选”、“取消选择”和“反

选”吩咐，可以对图像选区进展全部选择、取消选择、反向选择的操作。

选择”选择>修改”吩咐，可对选区进展平滑、扩展、收缩等操作。

3.2.3羽化选区

“羽化”吩咐可以使图像产生柔软的效果。通过以下的方法可以设置选区的羽

化