Photoshop 网页设计 实例——静态LOGO图标制作
网站LOGO，是互联网上各个网站用来与其它网站链接的图形标志；是与其它网站链接以及让其它网站链接的标志和门户。在一个布满各种LOGO的链接页面中，受众要在大堆的网站中寻找自己想要的特定内容的网站时，一个能让人轻易看出它所代表的网站的类型和内容的LOGO很重要。LOGO图标分为静态的和动态的，本案例中LOGO图标为静态，网站标识和网站名称包含在内，如图1-69所示。
图1-69 优秀设计网 操作步骤：
（1）新建一个【宽度】和【高度】分别为1100和420像素，白色背景文档。使用【横排文字工具】，输入N字母。右键单击文字图层面板，执行【转换为形状】命令，将文字转换为形状，如图1-70所示。
图1-70 添加渐变叠加效果
（2）使用【直接选择路径】，调整路径各锚点。双击该图层，打开【图层样式】对话框，启用【渐变叠加】命令，设置由#367CFB到#1FC6FB渐变，设置参数，如图1-71所示。
提示
通过使用【添加锚点工具】和【删除锚点工具】，添加和删除路径锚点。
图1-71 添加渐变效果
（3）新建“图层1”，使用【椭圆工具】。设置W和H分别43像素，在文字图像上方绘制正圆。如同上述方法，添加【渐变叠加】效果，设置参数，如图1-72所示。
图1-72 绘制正圆
（4）使用【横排文字工具】，输入neBoiz字母。如同上列方法，文字添加【渐变叠加】效果，设置参数，如图1-73所示。
图1-73 绘制文字
（5）如同上述方法，将文字转换为形状。使用【直接选择路径】，将i字母上的方点删除。并使用【多边形工具】，在该点的位置上绘制五角星路径，如图1-74所示。
图1-74 绘制图像
（6）隐藏“背景”层以外图层，新建“图层2”，填充白色。启用【渐变叠加】样式，添加渐变效果，设置参数，如图1-75所示。
图1-75 添加渐变背景
《网页设计与制作（静态）》教学大纲
课程名称：网页设计与制作（静态）
课程类型：专业基础课 课程总学时：68
适用专业：计算机与商务专业 开设学期：
一、课程的性质
《网页设计与制作》课程是计算机应用技术、电子商务等专业的一门核心课程，也是其他计算机专业的普及型课程。内容主要涵盖了HTML语言的语法规则及文字、链接、列表、表格、表单、图像、多媒体、框架元素标记及属性，、JavaScript脚本编程语言、Dreamweaver、Fireworks、Flash、Photoshop等相关知识，全面介绍WEB站点设计的基本操作技术和使用技巧。
二、课程的任务和要求
通过本课程的学习，要求学生掌握静态网页的制作方法、学会HTML语言、熟悉站点的上传和维护并能够独立解决网页编辑中遇到的一般问题，能熟练运用Dreamweaver进行网站的导入、规划、管理、发布的相关技术及网页制作的操作技能；能熟练掌握JAVASCRIPT脚本编程语言的基本语法知识，能实现网页的交互和特殊效果；能维护、管理和设计WEB应用程序；能独立设计小型WEB站点。
三、教学中应注意的问题
在教学过程中要注重Dreamweaver、Firework或Photoshop和Flash软件的主要功能，其中Dreamweaver主要是完成网页设计和网站管理；Firework或Photoshop主要进行图像的设计与编辑；Flash主要开发适应网络传输的流媒体电脑规划。并且要培养学生综合使用这些软件的能力，注重学生动手能力的培养和上机试验。教学过程中应该以Dreamweaver为主。在讲授理论的同时加入具体的设计项目实验，力求达到实战的效果避免空洞的理论学习。
四、学时分配
单元课题 名称 总课时 理论 实训
第一单元 初识网站和网页
课题一 熟悉网站的管理与制作软件并编写简易的 6 4 2 单元课题 名称 总课时 理论 实训
实验五：静态网页制作
一、实验目的
1. 掌握静态网页编辑基本方法
2. 熟悉网页编写、网站建立的基本操作
3. 会设置文字、段落的格式及图片的使用
4. 能够使用表格管理网页结构
二、实验原理与要求
HTML是超文本标记语言（Hyper Text Markup Language）的缩写。
HTML文件的开头和结尾由和来标记的。所有HTML文件都可以分为两个部分：标题和正文。每一部分用特定的标记标出：在HTML语言中规定和标记标题部分，用和标记正文部分。
三、实验内容
程序段如下：
New Page 1
color="#0000FF">学院
计算机信息管理专业
计算机网络
计算机硬件
编程语言
邓小平理论
数据库及其应用
lang="EN-US">HTML文件的开头和结尾由<HTML>和</HTML>来标记的。所有HTML文件都可以分为两个部分：标题和正文。每一部分用特定的标记标出：在HTML语言中规定<HEAD>和</HEDAD>标记标题部分，用<BODY>和</BODY>标记正文部分。
四、实验步骤
1． 启动FrontPage 2000，认真观察界面。（如果熟悉其它网页编辑工具请使用其它工具）
1
授 课 教 案
商贸职业技术学院教师授课教案
课程名称 静态网页制作 上课时间 2011年 2月22日1-2节
课 题 课前准备
教学目的 通过本次上机，收集学生对该门课程的看法、意见，并使学生初步了解html代码的输入和保存
教学重点 Html代码的输入和保存
教学难点 Html代码的输入和保存
教学方法 上机
教 学 容 提 纲 2 一、请各位同学畅所欲言，谈谈对《网页制作》这门课程的看法和想法（专业联系、意义、自身兴趣、是否有过网页制作的学习经历或基础、期望的授课容、方式或课程要求）保存在word文档中并提交
二、预习课本1.1节中html语言的【相关知识】，并自行练习制作【实例1】
教 学 后 记
1、 学生对这门课程的学习兴趣很浓，每位同学都谈了自己的基础情况及课程意见
2、 基本能对照课本完成实例1的操作，对html的输入、保存有了初步的印象
商贸职业技术学院教师授课教案
课程名称 静态网页制作 上课时间 2011年 2月24日3-4节
课 题 第一章 网页设计基础 §1.1§1.2§1.3
教学目的 通过本次课的教学，使学生对与网页制作相关的Internet知识、网页术语、设计方式有较为清晰的认识，为以后的学习打下良好的基础
教学重点 Internet协议
网页设计相关术语
教学难点 让学生将技术较强的网络术语与现实的应用联系，理解它 3 们对的重要性
教学方法 讲授
教 学 容 提 纲
§1 Internet概述
一、Internet的用途
二、Internet的协议
三、Internet的地址
§2网页设计相关术语 网页、、主页、HTTP、HTML、URL
§3网页设计的工具
