拓展提高部分 项目二网站主页设计 【学习目的】 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 格式，为后面页面排版做好准备。（至此步骤，一个静态网页界 面初步完成） 想一想 为什么要使用切片工具将网页进行切割？ 五、任务布置： 请用同样的方法，尝试设计我校网站站的欢迎页面