PS网页设计与制作
ps制作网页的教程 详细
在本教程中，你将学会如何在photoshop中制作一个漂亮的干净的网页效果图。
出自: 翻译:苏打苏塔设计量贩铺最终效果图看一看我们最终的效果图吧，看上去还不错:>在photoshop中新建文档1在photoshop中新建一个文档，尺寸为980px ×830px.2 如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图>标尺(Ctrl + R)可以显示标尺。
3 在画布的四个边，分别拖拽四条标尺线。
在这四条线中间，我们将绘制我们的页面创建页面背景4 选择圆角矩形工具(U), 设置圆角半径为10px，设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。
设置这个图层名字为“bg“.5 好了，现在，我们将扩大我们的画布。
首先，缩小我们的画布视图(ctrl+-)，然后点击图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。
6 再一次选择图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。
7 在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景8 在背景图层上面创建一个新图层，命名为”gradient“.9 在工具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。
10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.11 保持该图层仍为选定状态，点击图层>图层蒙版>显示全部。
12 在工具栏中选择渐变工具(G) ，从你的画布底部向上拖拽一个从黑色到透明的渐变。
可以根据下面的截图进行拖。
13 右键单击图层“gradient”,在弹出的菜单中，设定转换为智能元件。
14 点击滤镜>杂点>添加杂点。
根据下图设置参数。
15 新建一个图层，用画笔工具(B)，选择白色的软笔刷，直径为300px,在你的画布顶端，画一条白线。
16 设置这个图层的透明度为50% ,并命名该图层为“highlight“.17 在bg图层上面，新建图层。
网页设计与制作Photoshop+Dreamweaver+Flash立体化教程项目三
任务实施
创建热点图片超链接
选择图片，单击属性面板中的“矩形热点工具”按钮，在图像上的标志 区域位置拖曳鼠标绘制热点区域，释放鼠标后单击属性面板中 “链接” 文本框右侧的“浏览文件”按钮，设置目标链接网页。
任务实施
创建锚点超链接
• 在文本前单击鼠标定位插入点，在“插入”面板中选择“常用” 插入栏， 并选择“命名锚记”选项，插入一个锚记，并在属性面板设置名称。 • 选择需要单击跳转的文本，在属性面板的“链接”文本框中输入“#+锚 记名称”。
插入与编辑图像
插入图像 在需要插入图像位置定义文本插入点，选择【插入】/【图像】菜单命令， 打开“选择图像源文件”对话框，在其中双击提供的图片“xx.jpg”。
任务实施
插入与编辑图像
编辑图像 将鼠标移动到右下角，当变为双向箭头时按住【Shift】键拖曳鼠标调整 图像尺寸，在属性面板的“垂直边距”和“水平边距”文本框中输入 适当的数字。
任务实施
优化图像
，在属性面板中单击“亮度和对比度”按钮，在打开的提示对话框中单 击 按钮，打开“亮度/对比度”对话框，在其中设置数值即可。
任务实施
设置鼠标经过图像
选择【插入】/【图像对象】/【鼠标经过对象】菜单命令，打开“插入 鼠标经过图像”对话框，在其中设置原始图片和鼠标经过图片。
任务实施
项目三 编辑网页元素
职业院校立体化精品系列规划教材
目标
学习目标
● 掌握网页中图片的设置方法。 ● 掌握超链接的相关操作。 ● 掌握多媒体文件的添加方法。
技能目标
● 掌握“蓉锦大学主页”页面的编辑方法。 ● 能够完成基本的网页页面编辑操作。
主要内容
1
2 制作“蓉锦大学”首页页面 为“果蔬网”网页创建超链接 实训一——制作果蔬网首页 实训二——为果蔬网创建超链接
网页设计与制作Photoshop+Dreamweaver+Flash立体化教程项目七
主要内容
配置动态网页数据源 制作登录数据管理页面 实训一——制作“加入购物车”页面 实训二 ——制作蓉锦大学“用户登录 ”动态页面
1
2
3
4
配置动态网页数据源
任务目标
相关知识
任务实施
任务目标
本任务将完成实现动态网页前的各种配置操作，包括安装于配置IIS 服务器、定义站点、创建数据库连接等。本任务完成后效果如下图所 示。
任务实施
分页记录集
单击“服务器行为”面板中的“添加”按钮，在弹出的列表中选择 【记录集分页】/【移至前一条记录】菜单命令，打开 “移至前一条记 录”对话框，确认即可。
实训一——制作“加入购物车”页面
实训要求
本实训要求为果蔬网购物网站制作“加入购物车”页面，使用户可 以在此页面中输入需要购买的产品信息，然后通过单击“加入购物车” 按钮将这些信息显示到确认购买的页面。
任务实施
创建数据源
打开“ODBC 数据源管理器”对话框，选择“系统DSN”选项卡，单击其 中的按钮，打开“创建新数据源”对话框，在“名称”列表框中选择 “Microsoft Access Driver（*.mdb，*.accdb）”选项，确认后根据提 示进行设置。
制作登录数据管理页面
任务目标
相关知识
任务实施
创建记录集
打开“绑定”面板，单击“添加”按钮，在弹出的列表中选择“记 录集（查询）”命令。打开“记录集”对话框，在“名称”文本框中输 入“mes”，在“连接”下拉列表框中选择“testconn”选项，在“排序” 下拉列表框中选择“UserID”选项，在右侧的下拉列表框中选择“升序” 选项，确认即可。
项目七 实现动态网页效果
职业院校立体化精品系列规划教材
PS网页设计流程及操作指导
Photoshop网页设计案例教学网页框图Photoshop网页设计案例教学详细操作步骤：一、创建文件及布局参考线1、创建文件，大小990x1200像素，RGB模式，白色背景，如图所示：2、设置布局参考线：（1）横向5对参考线，分别为140/150、470/480、740/750、1010/1020像素；（2）纵向2对参考线，分别为325/335、660/670像素；3、将文件存储为“01创建文件及布局参考线.psd”。
效果如文件“01创建文件及布局参考线.psd”所示。
二、创建布局块之一（LeadStory）1、设置矩形选区框样式为“固定大小”，大小为660x320像素；2、在“视图”菜单下将“对齐到(T)”设置为“参考线”或者“全部”；3、在“背景”图层上新建图层，命名为“LeadStory”；4、选中图层“LeadStory”，用矩形选区框工具建立一个选区，将选区移动到位；5、将选区填充为灰色；6、将文件存储为“02创建布局块之一LeadStory.psd”。
效果如文件“02创建布局块之一LeadStory.psd”所示。
三、创建布局块之二（Story1-4）1、保持矩形选区框样式为“固定大小”，大小为325x260像素；2、在图层“LeadStory”上建立一个图层，命名为“Story1”；3、选中图层“Story1”，用矩形选区框工具建立一个选区，将选区移动到位；4、将选区填充为灰色；5、用同样方法建立相同大小的图层Story2、Story3、Story4；6、将文件存储为“03创建布局块之二Story1-4.psd”。
效果如文件“03创建布局块之二Story1-4.psd”所示。
四、创建布局块之三（FeatureStory）1、保持矩形选区框样式为“固定大小”，大小为320x260像素；2、在图层“Story4”上建立一个图层，命名为“FeatureStory”；3、选中图层“FeatureStory”，用矩形选区框工具建立一个选区，将选区移动到位；4、将选区填充为灰色；5、将文件存储为“04创建布局块之三FeatureStory.psd”。
ps网页设计知识点
ps网页设计知识点PS网页设计是指使用Adobe Photoshop软件进行网页设计的技术和技巧。
它涉及到网页设计的各个方面，如布局设计、图像处理、色彩搭配、文字排版等。
在进行PS网页设计时，掌握一些关键的知识点可以帮助设计师更好地进行设计和实现自己的创意。
一、布局设计在PS网页设计中，布局设计是非常重要的一步。
一个好的布局能够让网页看起来简洁明了，同时体现出设计师的创意和个性。
在进行布局设计时，需要注意以下几个要点：1. 网页的整体结构：包括导航栏、页眉、页脚等。
2. 内容的排列方式：可以采用栅格布局或自由布局。
栅格布局可以使得网页看起来更为整齐和规整；自由布局则能够更好地展现创意。
3. 空白与边距的运用：适当的留白和合理的边距能够有效地提升网页的可读性和美观度。
二、图像处理图像是网页设计中的重要元素之一，良好的图像处理能够提升整个设计的质量和吸引力。
以下是一些图像处理的技巧：1. 图片的优化：使用PS软件可以对图片进行优化，包括压缩、调整尺寸和保存格式等。
优化后的图片要保证在保持清晰度的同时，尽量减小文件大小，以提高加载速度和用户体验。
2. 色彩和对比度的调整：通过调整颜色、饱和度和对比度等参数，可以改变图像的效果，使其更符合设计的整体风格和要求。
3. 制作图标和按钮：PS软件提供了强大的图形绘制功能，可以用于制作网页中的各种图标和按钮。
通过巧妙的设计和绘制，可以使这些元素更加突出和美观。
三、色彩搭配色彩搭配是网页设计中的关键要素之一，合理的色彩搭配能够提升网页的整体效果和吸引力。
以下是一些关于色彩搭配的技巧：1. 色彩选择：根据网页的主题和目的，选择相应的色彩。
可以使用配色工具来辅助选择，确保色彩的搭配和谐统一。
2. 色彩搭配原则：可以运用色彩的对比、互补、类似和分层等原则来进行色彩的搭配。
通过巧妙地运用这些原则，可以使网页的色彩更加丰富和有吸引力。
3. 颜色的运用：在设计中，可以运用不同的颜色来突出某些元素，比如按钮、链接或标题等。
使用钢笔工具_Dreamweaver+Flash+Photoshop网页设计与制作教程_[共2页]
![使用钢笔工具_Dreamweaver+Flash+Photoshop网页设计与制作教程_[共2页]](https://img.taocdn.com/s3/m/48c427ff915f804d2b16c1db.png)
块也可实现透明度的调整。
：钢笔工具属于矢量绘图工具，使用该工具可以直接绘制直线路径和曲线路径。
单击工具箱中的钢笔工具所示。
所谓路径，就是用一系列点连接起来的线段或曲线，可以沿着线段或曲线进行
描边或填充。
路径组成的线条或图形称为贝塞尔曲线，该曲线是由3个点组合定义
而成的，一个点在曲线上，另两个点在控制手柄上，拖动这3个点即可改变曲度和
知识提示
图９－５９ “钢笔工具”属性栏 图９－６０ 贝塞尔曲线
◎ 个按钮分别用于创建形状图层、创建工作路径、创建填充区域。
在绘制路径时一般都单击选择路径按钮。
◎ 按钮：和删除锚点单击工具箱中的钢笔工具，在属性工具栏单击“路径”按钮。
在图像窗口中需要绘制直线的位置单击鼠标，创建直线路径的第将鼠标光标移到路径的起点，此时鼠标光标将变成形状，单击鼠标即可创建一条封闭的路预览画笔设置画笔笔设置画笔大小、硬度、图９－５８ 画笔面板设置。
利用PHOTOSHOP制作网页
二、网页制作步骤
”
01.
一切完毕，下面使用切片工具，将页面切割成相应小块，如图所示。
02.
另存为WEB格式，为后面页面排版做好准备。
ቤተ መጻሕፍቲ ባይዱ
本节课通过一个实例，我们学习了网页制作的流程及基本步骤。
01
问答题： 为什么要使用切片工具将网页进行切割？
02
模仿练习： 请尝试设计本站的欢迎页面
03
课后小结及练习
03
绘制导航条
04
填充页面左边部分
05
使用圆角矩形工具绘制如图所示圆角：
二、网页制作步骤
应用渐变工具和圆角矩形绘制四个按钮并添加如图所示文字： 用矩形选框、自定义形状等工具绘制如图所示界面：
二、网页制作步骤
回到右上边，导入素材，使用圆角矩形工具进行处理，使之成为如图所示效果：
二、网页制作步骤
第二讲 PS网页制作案例
点击此处添加副标题
教学重、难点
利用PhotoShop制作网页
利用PhotoShop制作网页
一、PhotoShop制作网页简介
网页制作工具很多，PhotoShop是一个很不错的选择。利用PhotoShop制作网页的一般步骤是：
二、网页制作步骤
01
新建画布
02
我们先来设计网页的顶部区域
删除多余部分如图所示：
美化图形 复制一份合制的形状，将其透明度设置成15％，并移动到如图所示位置，用自定义图形中的箭头为图片添加一个ICO:
二、网页制作步骤
为展示学生作品，我们在中间绘制一个作品展示区 我们在页面下方设计出版权信息模块
按照同样的方法，绘制如图所示图形：
二、网页制作步骤
在整体看一下我们的界面
网页设计与制作立体化教程(Photoshop+Dreamweaver+Flash CS6) 第3章 使用Photoshop设计界面
15
添加素材和文本
添加海报素材
添加灯具素材
3.1.4 制作网页内容部分
16
输入文本并绘制直线
输入文本并设置样式
制作标题
制作按钮
3.1.4 制作网页内容部分
17
绘制色块布局
添加素材
3.1.4 制作网页内容部分
18
为第2张图片添加文本
添加素材并编辑文本
为第1张图片添加文本
3.1.4 制作网页内容部分
23
课堂案例：输出“灯具网主页”效果图
24
老洪告诉米拉，网页效果图完成并与客户确认后，还需要对其进行切片输入，这样才能在 Dreamweaver中进行静态页面的制作，这是每个网页设计人员必备的技能之一。本例的参考效果 如图所示。
切片主页参考效果
3.2.1 创建切片
25
在Photoshop CS6中使用切片工具即可进行切片操作。切片的方法与使用矩形工具绘制矩形 的方法相同。
输入并编辑文本
19
查 看 效 果
3.1.5 设计网页页尾
20
网页页尾应设计简洁，通常由文字组成。下面使用Photoshop来设计网页页尾。
设置直线样式
设置描边
3.1.5 设计网页页尾
21
绘制直线
添加并设置文本
绘制矩形
3.1.5 设计网页页尾
22
删除选区内容
绘制五角星
输入并设置文本
内容导航
3.1 课堂案例：设计“灯具网主页” 效果图 3.2 课堂案例：输出“灯具网主页” 效果图 3.3 项目实训 3.4 课后练习
3.3.1 设计“摄影之家”网页效果图
31
3. 操作思路
① 制作效果图
[工学]ps课程作业二：制作网页效果图
![[工学]ps课程作业二：制作网页效果图](https://img.taocdn.com/s3/m/4899db781fb91a37f111f18583d049649b660ea1.png)
课程作业2（图层的应用）：通过以下指导步骤，学会如何在photoshop中制作网页效果图。
最终效果图在photoshop中新建文档1在photoshop中新建一个文档，尺寸为980px × 830px.2 如果你在photoshop软件界面中，没有看到在画布的周围看到标尺，点击试图>标尺（Ctrl + R）可以显示标尺。
3 在画布的四个边，分别拖拽四条标尺线。
在这四条线中间，我们将绘制我们的页面。
创建页面背景4 选择圆角矩形工具(U), 设置圆角半径为10px，设置颜色为#E0E0AC, 在你的整个画布中拖拽一个圆角矩形。
设置这个图层名字为“bg“.5 好了，现在，我们将扩大我们的画布。
首先，缩小我们的画布视图(ctrl+-)，然后点击图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。
6 再一次选择图像>画布尺寸(Alt + Ctrl + C)，然后根据下面的截图设置参数。
7 在图层面板中点击背景图层，设置前景色为#6C821C，用油漆桶(G)填充背景。
8 在背景图层上面创建一个新图层，命名为”gradient“.9 在工具栏中选择渐变工具(G)，从画布头部开始向下拖拽出一个从白色到黑色的渐变。
10 设置该图层渲染模式为颜色加深,然后设置图层图层透明度为10%.11 保持该图层仍为选定状态，点击图层>图层蒙版>显示全部。
12 在工具栏中选择渐变工具(G) ，从你的画布底部向上拖拽一个从黑色到透明的渐变。
可以根据下面的截图进行拖拽。
13 右键单击图层“gradient” ,在弹出的菜单中，设定转换为智能元件。
14 点击滤镜>杂点>添加杂点。
根据下图设置参数。
15 新建一个图层，用画笔工具(B)，选择白色的软笔刷，直径为300px,在你的画布顶端，画一条白线。
16 设置这个图层的透明度为50% ,并命名该图层为“highlight“.17 在bg图层上面，新建图层。
设计页面效果图_Dreamweaver+Flash+Photoshop网页设计与制作教程_[共4页]
![设计页面效果图_Dreamweaver+Flash+Photoshop网页设计与制作教程_[共4页]](https://img.taocdn.com/s3/m/840b22e110661ed9ad51f3f8.png)
11.4.1 设计页面效果图
262
素材收集完成后就可以开始进行页面效果设计。这一过程需要综合应用到Photoshop的相 关知识来处理页面效果。
1．制作网页头部 网页的头部包含网页的标志、搜索栏等部位，是一个网站的网眼。下面先在Photoshop CS5中制作网页的头部，其具体操作如下。 （1）启动Photoshop CS5，新建一个名称为“微观多肉世界”，大小为1200×973像素、分辨率 为150像素／英寸的图像文件，显示标尺，拖出参考线。 （2）新建组，设置组名称为top，打开“LOGO．png”图像，将其移动到“微观多肉世界”图 像中的“top”组中，然后自由变换调整大小和位置，效果如图11－4所示。 （3）单击矩形选框工具 ，在页面右上角绘制一个矩形选区，然后新建一个图层，设置前景 色为深灰色（R：100，G：100，B：100），填充前景色后取消选区。 （4）在其上输入“设为首页｜收藏本站｜登录｜免费注册”文本，并在工具属性栏中设置文字格式为 “方正黑体简体、8点”，颜色为浅蓝色（R：215，G：240，B：242），并设置水平居中对齐。 （5）使用圆角矩形工具在页面右侧绘制一个圆角矩形路径，然后将其换为选区，并对其进行描 边，颜色为深灰色，描边宽度为“1px”。 （6）取消选区后再次选择圆角矩形工具，新建一个图层，在矩形的右侧绘制一个圆角矩形， 颜色为浅蓝色（R：215，G：240，B：242），效果如图11－5所示。 （7）选择【图层】→【图层样式】→【投影】菜单命令，打开“图层样式”对话框，在其中设 置投影、内阴影、内发光、外发光、颜色叠加、描边样式，完成后在其上输入“搜索”文 本，文字格式为“方正黑体简体、8点、深灰色（R：81，G：92，B：82）”，最后将其与下 面的按钮对齐，效果如图11－6所示。
网页设计与制作第1-1Ps基础
Ps
TIFF格式 该格式是一种无损压缩的保存方式，即保存为此格式时，不会造成图像的 丢失，且原图像的质量不会受到任何影响，一般用于设计作品输出格式。 BMP格式 该格式是微软考发的Microsft Pain的固有格式，大多数软件支持这种格 式，BMP格式采用RLE无损压缩，对图像质量不会产生影响。
Ps
吸管工具 利用吸管工具可以从当前图像、“色板”面板、“颜色”面板的色条 上进行采样，采集的色样可用于指定新的前景色或背景色。 标尺工具 标尺工具主要用来测量图像的长度、宽度和倾斜度。选择标尺工具测 量图像时，在选项栏中会出现相关选项。 裁剪工具切片工具
33
裁剪工具和切片工具主要用于调整图像构图或定位图像。
Ps
7
在图像特效合成中的应用
Photoshop具有强大的图像合成功能，常被用于图像特效合成。此类
设计在视觉上具有强劲的冲击力，能在第一时间吸引人们的视线。
在插画设计中的应用
Photoshop软件不仅可以进行图像处理与合成，在插画绘制中常常运
用Photoshop中的画笔工具、图层混合模式、色阶命令、色相饱和度命令等 多种功能，进行插画作品绘制。
• PSD格式
Ps
• GIF格式 将图像保存为此格式时，可以将图像的指定区域设置为透明状态，而且可 以赋予图像动画效果。 • JPEG格式
21
将素材文件保存为此种格式时，将会把图像的文件容量进行缩小，是一种 压缩式的保存方式。
• PNG格式 采用PNG格式保存图像与JPEG不同的是，PNG格式是一种无损失的压缩方 式，并且PNG还支持通道定义的透明等级。
Ps
辅助工具应用
缩放工具 缩放工具常用于查看图像局部区域。当打开图像时，为了方便观察图像的 细节，这时就要用到缩放工具。 抓手工具
PS网页设计与制作
PS网页设计与制作（主页）一、教材分析设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。
本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。
二、学情分析认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。
知识技能水平：在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS 的相关知识与技能，有一定的基础。
本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。
学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。
三、教学目标（一）、知识与技能1.了解主页大小，掌握设置主页大小的方法。
2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。
3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。
（二）、过程与方法1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。
2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高的理解与认识。
PS学生对．（三）、情感态度与价值观在信息技术课堂上勇于探索实践，只怕不动。
提倡学生多观察、多动手实践，不怕失败，通过作品展示自己。
四、教学重点主页大小设定、标题和图片的大小及位置、导航栏制作五、教学难点主页中各对象的大小及位置六、教学方法任务驱动、分层教学、同伴互助七、教学准备、学案极域多媒体网络教室、Photoshop cs5 八、教学过程教学教学活动学生活动设计意图阶段展示同个年龄段同观看放映1.展示范例，吸引学生的注意力，学的作品，可以吸调动学习的积极性聆听老师引学生的注意力，也更贴近学生的生活，引起更多的共创观察素材文件设情鸣，尽快进入学习境并进入创设情境氛围。
网页设计与制作Photoshop+Dreamweaver+Flash立体化教程项目二
实训二——编辑“招生就业概况”网页
实训要求
为蓉锦大学的招生就业部分制作一个“招生就业概况”网页，用于 介绍学校在招生就业方面的内容，相关文字内容可打开“招生就业概 况.txt”素材复制，效果如下图所示。
实训二——编辑“招生就业概况”网页
实训思路
本实训可综合练习在网页中添加文本等网页元素的方法，并掌握设置操 作，可先打开提供的素材文件，然后将其复制到网页中，再进行设置
任务实施
设置文本格式
选择需要设置格式的文本，在属性面板中单击 按钮，然后在“字体 ”下拉列表框中选择任意一种字体选项，打开“新建 CSS 规则”对话 框，在其中设置样式名称，然后继续在“属性”面板中设置相关的格 式。
任务实施
插入网页其他元素
• 选择【插入】/【HTML】/【水平线】菜单命令，即可插入一条水平线。 • 选择【插入】/【HTML】/【特殊字符】/ 【商标】菜单命令，即可插 入商标字符，并自动应用商标字符的专用格式。
实训一——创建“蓉锦大学”站点
实训要求
蓉锦大学决定推出“蓉锦大学”网站网上服务，便于学员学习和宣 传了解，以及资料的查询。请你为该学校创建一个站点，作为该学校的 官方网站。
实训——创建“蓉锦大学”站点
实训思路
作为学校的网站， 在规划站点时需要先确定该网站需要包含的内容方面， 然后再细分每个版块中的内容。在Dreamweaver CS5新建站点，然后 制定本地文件位置，最后用过“文件”面板规划网网站的内容和表现
3
图片：图片需要选择清晰、信息量大、与文字能很好匹配的
任务实施
新建网页
选择【文件】/【新建】菜单命令，打开“新建文档”对话框,在其中可选 择需要新建文档的类型，单击 按钮。
PS教程第9章 网页制作
第9章综合案例制作课题第一节按钮制作课时教学内容1、掌握Photoshop制作按钮的方法2、了解网站首页的组成内容教学目标掌握Photoshop制作按钮的方法；了解网站首页的组成内容教学重点网站首页的组成内容教学难点掌握Photoshop制作按钮的方法教学活动及主要语言学生活动一、创设意境，导入新课（设疑法、提问法）导入：网站首页是一个网站的门面，要想设计出一个优秀的网站，就必须让它能引人入胜，能吸引每一个来访者的注意力，引起人们的好奇心。
优秀的首页是一个好的网站必须具备的要素。
在网页制作过程中，Photoshop 软件起到了重要的作用。
本章课程将学习网页的总要组成内容的制作方法。
提出疑问：老师现在有个问题,请一位同学来回答：网站首页包含了那些元素？由同学做答，老师补充并引入新课题：总要组成内容：按钮、GIF动画、网页LOGO、网页导航、网站首页排版等。
接下来看本节课案例效果图：二、新课教学（讲解法、提问法、示范法、练习法）1、新建文件，使用“圆角矩形”工具在工具属性栏中设置参数，固定大小值为（W:20,H:6）、半径为30像素。
绘制圆角矩形。
观察学生反映(对导入是否产生兴趣),并随着教师的讲解，引导出本节课要学习的内容。
此部分主要由老师来讲解，同时学生也配合着老师回答一些常见问题学生听课状态:此时学生应该注意听教师的讲解，因为此处是新知识，同时也应积极回答相应的问题，进行认真的思考学生听讲，笔记学生思考、讨论2、制作圆角矩形选区，创建一个新图层。
点击“图层1”，确定它为当前图层，点击鼠标左键绘制固定大小的圆角矩形路径，按<Ctrl+Enter>键，将路径转为选区，如图所示。
3、填充颜色，打开工具箱中“拾色器”对话框，设置前景色淡蓝色RGB为（149.197.217）。
将圆角矩形填充为淡蓝色，得到如图所示的效果。
4、为圆角矩形添加立体效果单击图层面板中的【添加图层样式】按钮。
分别设置斜面和浮雕、内发光、光泽、渐变叠加、外发光、投影，如图所示。
使用辅助工具_Dreamweaver+Flash+Photoshop网页设计与制作教程_[共2页]
![使用辅助工具_Dreamweaver+Flash+Photoshop网页设计与制作教程_[共2页]](https://img.taocdn.com/s3/m/8133b78dbe23482fb5da4cc7.png)
Dreamweaver+Flash+ Photoshop网页设计与制作教程
令，如图2-25所示。
若需对存在的多个工作区布局进行管理，可选择【窗口】→【工作区布局】→【管理工作
区】菜单命令，打开“管理工作区”对话框，如图2-26所示。在其中选择一个工击
1．标尺 借助标尺可以精确地计算所编辑网页的宽度和高度，同时可以比较页面中各个对象元素的 大小。标尺的默认单位是像素，还可选择英寸和厘米。选择【查看】→【标尺】→【显示】菜 单命令，即可在编辑窗口中显示标尺，如图2-27所示，若要隐藏标尺，再次执行该命令即可。 标尺原点的默认位置位于Dreamweaver编辑窗口的左上角，在该处按住鼠标左键不放拖曳 该点，可以设置标尺原点到编辑窗口中的任意点，如图2-28所示。要将原点恢复到默认左上 角顶点位置，选择【查看】→【标尺】→【重设原点】菜单命令或双击左上角顶点默认位置。
图２－２７ 显示标尺 图２－２８ 拖曳标尺原点
2．使用网格 网格的使用主要是针对AP元素（层）进行绘制、定位、大小调整的可视化操作。借助网 格辅助工具，可以使页面元素在被移动后自动对齐。选择【查看】→【网格】→【显示网格】 菜单命令，将在编辑窗口中显示网络，如图2-29所示。 如果想使网页中的AP元素自动靠齐到网格，方便AP元素的定位，应选择【查看】→【网 格】→【靠齐到网格】菜单命令。无论网格是否显示，都可使用靠齐功能，如图2-30所示。
按钮删除选择的工作
区布局。
图２－２５ 菜单中增加的自定义的布局命令 图２－２６ “管理工作区”对话框
2.1.4 使用辅助工具
要想得心应手地制作网页，就应该先从Dreamweaver中提供的各种辅助工具入手，使用这 些辅助工具，能大大提高网页的制作效率。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
PS网页设计与制作（主页）
一、教材分析
设计制作网页的方法有很多，所用软件也各不相同，在本次拓展课程教学中，采用Photoshop设计网页。
本课是第四课时，在之前的课中，教师介绍了网页大小、图片素材的保存及处理方法，学生已了解有关网页的相关知识点，本节课在此基础上，开始学习PS网页设计，通过新建文档，完善网页中的其它要素，如：文本、页头、页脚、图片等要素。
二、学情分析
认知水平：本班学生为八年级学生，善于接受新鲜事物，欠缺专注力、知识迁移能力。
知识技能水平：
在前几课时的学习中学生了解了网页的常见大小，主页包含的各项要素，七年级下已学习过PS的相关知识与技能，有一定的基础。
本节课，学生需要灵活运用以前的所学，制作出有个人特色的主页。
学生在自主实践环节是遇到的问题，通过同伴互助、范例展示等方式，更好地理解为何这么做，以及怎么做。
三、教学目标
（一）、知识与技能
1.了解主页大小，掌握设置主页大小的方法。
2.掌握文本设置的方法，尝试通过更改大小、字体、变形、混合选项呈现出有个人特色的文本。
3.了解导航栏的样式及位置，掌握矩形的绘制调整方法。
（二）、过程与方法
1.通过课堂任务的设计，强化学生个人自主探究能力及小组协作学习能力。
2.培养学生对问题的分析和解决能力，更好地理解PS制作主页的方法与策略，提高学生对PS的理解与认识。
（三）、情感态度与价值观
提倡学生多观察、多动手实践，不怕失败，只怕不动。
在信息技术课堂上勇于探索实践，通过作品展示自己。
四、教学重点
主页大小设定、标题和图片的大小及位置、导航栏制作
五、教学难点
主页中各对象的大小及位置
六、教学方法
任务驱动、分层教学、同伴互助
七、教学准备
极域多媒体网络教室、Photoshop cs5、学案八、教学过程
2.师：刚才大家看到的是我们八年级
一些同学的网页设计作品，在这些作
导航——形状
师：主页新建完成后，第二步要添加背景图片，那么，如何将上周保存过的图片添加进来呢？邀请学生上台
师：教师小结标题特点：醒目，颜色、
九、教学反思
本课是一节常态课，通过前期的课上接触结合上交的作业，发现本班学生的认知能力和操作水平存在不小的差异，大部分学生的学习的积极性有，但持续时间不长，在学习中遇到问题时，大部分学生愿意主动探究，探究成功后积极性倍增，探究失败后有挫败感，积极性大幅下降。
在开展网页设计制作教学时，采用PS网页设计与制作。
本课设计时考虑到了不同能力学生的学习情况，采用“分层教学”。
课上通过展示作品，激起学生的学习兴趣，抛出问题，引出答案，进入本课的学习主题。
课堂中任务驱动与分层教学相结合，很好地照顾到不同层次的学生。
演示环节，由学生自愿和教师抽查相结合，整个课堂教学进展有序。
课前预设的学习目标也较好地完成了。
本节课的不足之处在于，课堂整体学习效率受学生的完成情况影响较大，若学生花很多时间纠结在选哪个颜色更好看类似的问题上，不利于开展后面的教学，在今后的教学中，不妨向学生明确提出这一段的操作时间。
更有效地开展每一课的教学。
教案信息表。