
拓展提高部分 项目二网站主页设计 【学习目的】 1,了解网页美工设计所包含的内容 2.掌握P0T0S0P进行网页设计的技巧和方法 3.掌握OTOSHOP处理网页图片的优化方法 【重点与难点】 1.利用POT0SOP进行静态网页设计 2.PHOTOSHOP切片工具的使用 【教学内容】 一、任务布置: 为我校制作一个静态网页模版。 要求: 1.网页的每个页面中都包含我校的10c0. 2。要有“校园公告”、“关于我校”、“友情连接”、“各系(部门)菜单”及 “搜索”等基本栏日,以及相关的业务信息等内容。 3。每个页面的底部都包含有“版权声明”。 二、任务设计主要步骤分析: 1.设计主页画面 2.设计网站背景 3。编排主要内容 4。存储网页图片 三、主页设计主要步骤分析 1。新建一个画布 2.在新建的面布上绘制界面 3。将设计的界面使用PHOTOSHOP中切片工具裁剪成小的便于编辑的模块 4.另存成DB格式 四、网页背景棋块设计主要步骤分析
拓展提高部分 项目二 网站主页设计 【学习目的】 1.了解网页美工设计所包含的内容 2.掌握 PHOTOSHOP 进行网页设计的技巧和方法 3.掌握 PHOTOSHOP 处理网页图片的优化方法 【重点与难点】 1.利用 PHOTOSHOP 进行静态网页设计 2.PHOTOSHOP 切片工具的使用 【教学内容】 一、任务布置: 为我校制作一个静态网页模版。 要求: 1.网页的每个页面中都包含我校的 LOGO。 2.要有“校园公告”、“关于我校”、“友情连接”、“各系(部门)菜单”及 “搜索”等基本栏目,以及相关的业务信息等内容。 3.每个页面的底部都包含有“版权声明”。 二、任务设计主要步骤分析: 1.设计主页画面 2.设计网站背景 3.编排主要内容 4.存储网页图片 三、主页设计主要步骤分析 1.新建一个画布 2.在新建的画布上绘制界面 3.将设计的界面使用 PHOTOSHOP 中切片工具裁剪成小的便于编辑的模块 4.另存成 WEB 格式 四、网页背景模块设计主要步骤分析

1。新建画布 2.设计网页的顶部区域 3.绘制导航条 4。填充页面左边部分 5.使用圆角矩形工具绘制如图所示圆角 6。应用渐变工具和圆角矩形绘制四个按钮并添加如图所示文字: 同猪挎疑 在生作业 常见置 互动留吉 ?。用矩形选框、自定义形状等工具绘制如图所示界面:
1.新建画布 2.设计网页的顶部区域 3.绘制导航条 4.填充页面左边部分 5.使用圆角矩形工具绘制如图所示圆角 6.应用渐变工具和圆角矩形绘制四个按钮并添加如图所示文字: 7.用矩形选框、自定义形状等工具绘制如图所示界面:

d-⊙ ⊙在槿西 回站拼按 8。回到右上边,导入素材,使用圆角矩形工具进行处理,使成为如图所示效果: 绘制圆角矩形和自定义图形 合并图形 别除多余部分 9。按照同样的方法,绘制如图所示图形: 海唐计座到 海性图肤西 海界南度目 净间南南自 An
8.回到右上边,导入素材,使用圆角矩形工具进行处理,使成为如图所示效果: 9.按照同样的方法,绘制如图所示图形:

10.一切完毕,下面使用切片工具,将页面切割成相应小块,如图所示 另存为B格式,为后面页面挂版做好准备。(至此步骤,一个静态网页界 面初步完成) 想一想 为什么要使用切片工具将网页进行切料? 五、任务布置: 请用同样的方法,尝试设计我校网站站的欢迎页面
10.一切完毕,下面使用切片工具,将页面切割成相应小块,如图所示。 另存为 WEB 格式,为后面页面排版做好准备。(至此步骤,一个静态网页界 面初步完成) 想一想 为什么要使用切片工具将网页进行切割? 五、任务布置: 请用同样的方法,尝试设计我校网站站的欢迎页面