dw网页设计素材图片-Peggy教你如何快速修改网页模板

网页设计是一项非常实用的技能。 初学者独立制作一个完整的网页需要多长时间？ 我很负责任的说，只要大家看了我的文章，立马就能制作出一个像样的网页。 今天，Peggy教大家如何使用网页模板快速创建网页。

我们马上进入正题吧。 我们先来准备一下。 使用的东西有：dwcs5、ps4、网页模板、以及相应的素材。 所有的东西都可以在Peggy提供的ftp上下载，也可以自己上网下载。

01

如何下载网页模板

首先，我们先根据自己的需求选择一个网页模板。 哪里可以下载网页模板？这里我选择站长之家网站

还记得站长之家这个网站吗，后面我们有很多东西，都会从这个网站下载。

如图，我们点击站长资料进入如下页面

点击网页模板即可查看模板列表

好的

这些都是网页模板。 选择我们要下载的网页模板。

选择您喜欢的模板，点击此处下载

这里我以压缩文件的形式下载到桌面：

解压模板，会生成一个文件夹，如下图

这是网页模板。 我简单介绍一下。 一般网页模板都是这样的结构。

模板的一般结构

index.html 文件：模板中常见的文件。 它是网页的主页文件，其中包含网页的源代码。 如果我们要修改网页中的文字。 您需要更改此文件。

img 文件夹：包含网页上使用的所有图像。 如果我们想要改变图像，我们必须在这个文件夹中进行修改。

js：是脚本文件夹

css：是层叠样式表文件夹

当我们点击index.html时，我们可以看到如下页面

02

如何修改网页的文字

这里我们需要用到两个工具，一个是dw，另一个是ps。 （dw用于修改网页源文件，ps用于修改图片大小和格式）

1.我们来修改一下文字

比如我想修改模板中的这段文字

我们使用dwcs5打开index.html，进入代码模式，如下图

这里我们按ctrl+f（查找替换快捷键）

如上图所示，在搜索栏中输入您要查找的文字，在替换栏中输入您要替换的内容。 点击替换（一般点击两次，第一次搜索位置，第二次替换），就完成了。

（这里必须注意的是dw网页设计素材图片卡通人物，查找的值必须是唯一的，避免替换其他地方）

进行更改后，请务必稍后保存。

如果不保存的话，如下图，会有一个星号

如果保存，如下图所示，星号消失。

接下来我们预览一下：

重新单击index.html 文件，或刷新浏览器。 你可以看到下面的图片。

这样，文本修改就成功了~

温馨提示：如果您操作失误或者想要取消错误的操作，可以按ctrl+z取消之前的操作。

03

如何修改网页模板中的图像

修改图片非常简单。 单纯替换图片不需要dw。 我们打开网页模板的文件夹。

一般情况下，模板图片放在img文件中。

接下来，我将用类似的图像替换它。

它不是简单的替换，而是一张新图片，修改为与源图片相同的尺寸和格式。

首先我们右键该图片，查看其属性，如下图

我们得到两条信息。 该文件称为 blog_listing。 它的格式是jpg。

同时，其长宽比为640*329。

接下来，我想用这样的图片（1920*1080）替换原始图片。 这是我从网上下载的图片。

我用ps打开这张图：

如下所示

我们选择裁剪工具

设置宽度和高度

剪出我们想要的部分

只需双击剪切区域，如下图所示。

我们会发现剪切出来的图片会小很多。 这是正常现象dw网页设计素材图片卡通人物，因为分辨率降低了。

接下来我们点击文件->另存为网络设备使用的格式

因为原图是jpg格式，所以我这里选择jpeg格式，然后点击保存按钮。

选择网页上的原图并保存并替换。

让我们再次浏览我们的网站。

网页上的图片已更改。

好，接下来就是全体学员动手实践的过程了。 这种设计网页的方法非常简单，需要大量的练习和练习。

接下来我会推出一些其他的教程，比如如何修改网页上的LOGO、如何用图片替换文字等。 请关注老师的公众号。 查看更多内容。