网页设计要点汇总

心之所向，所向披靡

网页设计要点汇总（可能不是那么的准确，请大家见谅）

Lesson1

一、了解工作界面：

●“插入”栏，包含用于将各种类型的“对象”（如表格，图像，文本）等插入到文档中的按钮。

●“文档”工具栏：包含按钮和弹出式菜单，可以在“设计”视图，“拆分”视图和“代码”视

图之间切换

●“文档”窗口：显示当前创建和编辑文档

●“属性”检查器：用于查看和更改所选对象或文本的各种属性，选择的对象不同，“属性”检

查器中包含的信息也不一样、

●“面板组”：分组在某个标题下面的相关面板的集合。

●“文件”面板：用来管理文件和文件夹，当使用dw创建一个站点后，站点的所有文件都将

显示在“文件”面板上。

二、网站制作的基本流程

1.站点：新建站点，取名→否，不适用服务器技术→选择储存位置（一般默认）→如何连接到服务器：无→完成

三：表格

插入→表格→常用表格设置：1024像素，粗细和间距一般设为0

增加一行表格：按住tab键即可

空格：crtl+shit+空格

换行：按回车键，显示的是两倍行距

按shift+回车键，是强制换行，显示一倍行距

四：html信息的设置

1.meta设置：meta标签是记录有关当前页面的信息

操作：插入记录→html→文件头标签→meta设置

2.关键词设置，描述设置，刷新设置操作与meta操作相同，都在文件头标签下。

Lesson 2

一：制作图像页面

1.图像常识：常用格式gif, jpeg, png三种图像格式

2.Gif：图像交换格式

只包含256种颜色，支持透明的背景色和动画格式

大面积单色区域图片

Jpeg(jpg)：联合图像专家组开发的图形标准，采用有损压缩算法，24位真彩色

不支持透明背景和动画格式

Png：可移植网络图形

保存的图像压缩，以减少占用的存储空间和下载速度，同时又不损失图像质量，一般情况

下，一个网页的图片大小加起来不宜超过500k。

Lesson 3

一、Flashde 的文件类型

Fla是所有项目的源文件，在flash程序中科创建

Swf是压缩的，已进行优化，便于在网页中使用。

Swt能修改和替换flash swf文件中信息

Flv是一种视频文件

二、插入flash动画

1.先插入一个表格

2.插入→媒体→flash

3.在下面的页面属性面板中勾上循环与自动播放，高品质，比例默认

三：flash与图像合成：既使flash变透明能够在图上使用

1.把图片设为背景图片：先点击一下表格中要插入的地方，代码区就会显示

2.但这时候图像是平铺的，就是背景图片不断重复，不重复的操作：在上一步显示的图片后/*.jpg”接着按空格键（选择style,按回车）style=background-repeat(按回车)--no repeat

3.把flash背景设成透明色：先单击flash,再在下面属性面板中按参数-----wmode----transparent

Lesson 4

Photoshop图层功能

一、抠图方法：

1.魔棒工具抠图-------调整容差------选择反选-----按ctrl键拖入图层

选中图层，ctrl+T可调整大小

2.多变套索工具：磁性套索，出现失误按DEL键消除，抠完后按右键可以羽化

3.钢笔工具：要选择路径按钮：按住ctrl可以进行拉伸，Alt可以删除锚点。完成后，点右键选择建立选区，好

二、照片处理

第一步：去痘去痣：仿制图章工具，覆盖区域

先Alt按住不放，再鼠标在其好的区域点一下，然后就可直接点击需要处理的部分进行覆盖。

第二步：按历史画笔-----滤镜-----模糊---高斯模糊（半径为1.0像素）

再在历史记录中点击高斯模糊前面的方框，再点击历史记录中前一个仿制图章按钮，直接在脸上磨皮。

第三步：变非主流

滤镜-----液化-----向前变形工具----画笔设置15，膨胀工具：放大眼睛

调下亮度和对比度即可。

图层多的时候，按住Ctrl+右键，可找出它的图层。

Lesson 5

立体字：

方法一：新建如800*600，输入文字

点文字图层进行进一步编辑

Ctrl+j 创建副本

在副本上点击右键，栅格化图层，变成透明背景

把原来文本前面的眼睛去掉，先不锁定

在副本上按右键，混合选项：双击斜面和浮雕，大小=3

新建图层1，并与立体字副本合并

按住ctrl+t 变换角度

菜单上按选择-------载入选区，按ctrl+alt不放，按上或下键，制造立体效果，再取消选择即可。

方法二：

新建文档，命名为bottom,图层栅格化

Ctrl+t 进行变换

Ctrl+j,复制很多的图层，然后合并所有的图层，留下Tpo和botton

双击bottom,混合选项------渐变叠加

在对top在建3个图层，使其突出，弄一个middle层，双击混合选项，颜色叠加。

滤镜：

光线的制作：

1选中背景-----复制图层为图层1----滤镜---像素化-----点状化

2.图像-----调整-----阀值

3.图层面板-----滤色

4.滤镜------模糊----动感模糊

5.滤镜------锐化----usm锐化

部分的阳关：举行选框选区域----ctrl+j,也可用套索工具，之后的做法与光线一致。

雪花的制作：点状化的值要大-----调整阀值---图层，滤色----由动感模糊地值改变雨或光或雪

Lesson 6

网页布局

切片工具：比较简单，就说少点

切片时要先切列再切行

存储为web格式，html和图像

切片完成后，要对其中的图片进行修改和覆盖，打开ps图后，其模式是索引模式，不能修改。进行如下操作：图像---模式---RGB模式即可

创建连接：点击属性-----在其框中输入Http:……，边框选择0，以免表格被撑大。

Lesson7

插入背景音乐和视频

方法一：插入表格----插入媒体----插件---选择站点中的音频，在网页中显示出来是带有播放器的。注：现将表格保存一下再插入

方法二：当背景音乐插入

1.纯代码（推荐）

2.

……