在本教程中，你将学会如何在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,在你的画布顶端，画一条白线。
网页设计与制作教程 主讲：纪东华 第一章 WWW 概述 §1.1Internet 概述 一、什么是 Internet Internet 原意是互联网，又称因特网、国际互联网，它不是一个单一的网络，它是一个巨大的、全球范围的计算机网络，它是借助于现代通信和计算机技术实现全球信息传递的一种快捷、有效、方便的工具。 1 、
Internet 的现状 Internet 的前身是美国国防部高级研究规划局的 ARPA 网，成立于 1969 年 12 月，从八十年代开始发展，经过 20 年的发展，已取得了巨大的成功，现在已成为世界上规模最大、用户最多、资源最丰富的网络互联系统。迄今全球 Internet 网民已达3亿多,据估计到 2005 年网民将达 10 亿。基于
Internet 的电子商务交易额也将从 97 年的 80 亿美元增到 2003 年的 10000
亿美元。 2、信息高速公路与下一代 Internet 信息高速公路以高速度、大容量和高精度的声音、数据、文字、图形和影像等的交互式多媒体信息服务，来最大幅度和最快速度地改变着人类的生活面貌和社会景观。实质是一个多媒体信息交互高速通信的广域网，它可以实现实时电视点播等的多媒体的通信服务。借助于光纤和光电技术，传输速率能达到 Gbps 数量级，并且将会达到 Tbps(1012 b/s),
它与 Internet 并不是等同的。 下一代 Internet （ NGI ， Ipng) IPv4,IPv6
二、 Internet 与 TCP/IP 协议 TCP/IP ：传输控制协议/网际协议，是互联网络信息交换的规则、规范的集合体，包含了 100 多种协议。 TCP 的主要功能：对网络中计算机和通信设备的管理，规定了信息包应该怎样分层、分组，又怎样在收到信息包以后充组数据，以何种方式在线路上传输信号。 IP ：定义了 Internet 上计算机之间的路由选择，向传输层提供统一的报文。 如：电子邮件传输、文件传输、新闻网络的新闻发布、访问全球网。 IP 地址：是网上的通信地址，是计算机、服务、路由器的端口地址，每一个 IP 地址在全球是唯一的，是运行 TCP/IP 协议的唯一标识。 三、
网页设计与制作实例教程
习题答案
第1章 网页与网站基础
一、选择题
1．A 2．B 3．C 4．C 5．A
二、判断题
1．√ 2．× 3．√ 4．× 5．√
三、问答题
略
第2章 网页规划设计
一、选择题
1．D 2．A 3．C 4．A 5．C
二、判断题
1．× 2．× 3．× 4．√ 5．√
三、问答题
1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。）
2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词；③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容
3．答：打开新浪网首页，分析其布局类型。（答案略）
4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。
网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。
5．答：打开当当网，具体分析其规划过程。（答案略）
第3章 初识网页制作软件
一、选择题
1．C 2．C 3．B 二、填空题
1．代码、拆分、设计 2．文件、资源、规则 3．超级链接
三、操作题
略
第4章 制作网页内容
一、选择题
1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A
二、判断题
1．√ 2．√ 3．× 4．√ 5．√ 6．√ 7．√ 8．√ 9．× 10．√
三、操作题
略
第5章 设置网页超级链接
一、选择题
1．D 2．D 3．A 4． D 5． C
Frontpage制作网页-如何制作网页教程-网站制作教程-海乐网
怎样制作网页-如何制作网页-网站制作教程|海乐网
现在市面上的有许多制作网页的工具，office中也有一个专门作网页的工具
FrontPage ，其操作与word相似，比较容易上手。下面以FrontPage 2000 为例，介绍
网页制作的基本知识。
一、 如何打开FrontPage了解主界面
单击任务栏“开始”按钮，选择“程序”选项，单击FrontPage就可以进入。
进入后你会发现PRONTPAGE界面和WORD很相似
[图一
]，这是因为编辑WEB页
面和编辑WORD文档有很多同样的设置，这些设置所用的图标和WORD中的是一样的。
[图一]ProntPage2000 界面
Frontpage制作网页-如何制作网页教程-网站制作教程-海乐网
视图中的组框是用来切换视图的，单击里面的小图标就可以切换到不
同的视图。FRONTPAGE共有6种视图
[如左
]，使用不同的视图可以从不
同的侧面查看设计的WEB站点。对一个WEB站点而言，不断更新是很
重要的。随着站点的成长，维护站点的工作量会越来越大。建立站点可能
很快，但是如果没有这6种视图的帮助，维护起来就很困难了。
这些视图的使用不用一下就全部掌握，只要知道有这些视图就可以
了。
下面看一看同一个WEB站点在不同视图中是怎样显示的。
单击“网页”按钮，切换到网页视图，再单击工具栏上的“文件夹列表”
按钮，窗口
中增加了一个文件夹列表框
[图一
]。网页视图是用来显示选中的网页的，双击文件夹列
表中的某一个HTM文件，在最右方的工作区中就会显示该网页的内容。
[图一]网页视图
Frontpage制作网页-如何制作网页教程-网站制作教程-海乐网
注意，此时工作区的左下角有三个切换显示模式的选项卡
[图二
]。单击“普通”选项
卡，就切换到了普通模式。在普通模式可以编辑网页的内容以及设置各种格式。单击“预
览”选项卡就到了预览模式。如果要看一看当前编辑的文件在浏览器中的显示情况，就
