如何创建一个缩略图，当点击图片在Dreamweaver中打

我收到的游客人数从过去几天问我如何，他们可以创建一个网页，显示缩略图，或更小的版本，一个图片，点击时会引起较大的高分辨率图像显示要求。本教程介绍了如何可以做到这一点，一个众所周知的网页编辑器设计网站使用Dreamweaver。

先决条件
与所有的教程，我不得不做出某些假设。

你有Dreamweaver CS3中。
由于这是一个使用Dreamweaver CS3的教程，你会（显然）需要有Dreamweaver CS3中。

你有一些基本知识，如何使用Dreamweaver。
我会假设你有一些基本知识使用Dreamweaver。本教程只创建一个网页的缩略图，点击时显示图片放大处理的具体问题。它并不需要你通过使用Dreamweaver或设计一个网站的所有其他方面。如果你只是刚刚开始，我建议你开始与以下两个教程：

◦入门AZ指南启动/创建自己的网站，
◦Dreamweaver教程内容：如何创建一个网站使用Dreamweaver CS3。
这些教程指导你从头创建一个全功能的网站的步骤。

你需要一个照片编辑程序。
你需要某种形式的照片编辑或图像编辑程序。此程序需要创建缩略图，您的照片或较小的分辨率版本。我将介绍使用Photoshop CS3的程序（因为这是我有什么），但您可以自由使用任何其他的照片编辑器，如果你愿意。上thefreecountry.com免费图片和照片编辑程序页面可以找到一些免费的照片编辑程序。不过，请注意，如果你使用一个不同的照片编辑器，从我做起，确切的方法生成一个缩略图会有所不同。但是，因为基本原则是一样的，你不是完全在你自己。

创建缩略图
你需要做的第一件事是您的图片创建一个缩略图。缩略图，你可能已经猜测，仅仅是一个较小的版本，您的图片。要创建缩略图，我们将使用一个照片编辑器来调整我们的形象副本。

正如前面提到的，下面的程序是使用Photoshop进行。如果你使用不同的程序，只要看看每一步的主标题，并使用等效的程序软件。

1。您的照片的副本。
你应该做的第一件事是让您的照片的副本，该副本上的工作。这纯粹是一项预防措施，万一你不小心覆盖了原来的照片缩略图。如果你有很多的照片或图片，你想创建缩略图，创建一个新的文件夹复制到该文件夹​​中的所有照片。

（如果您使用的是Windows，切记不要拖动照片从一个文件夹到另一个，如果这两个文件夹是相同的驱动器上，你会被移动的照片，而不是复制，而是选择的照片，右键单击并选择“复制”，进入到新的文件夹，右键单击并选择“粘贴”。）

2，打开您的图像编辑器中的图片。
要加载的图片，你要调整在Photoshop中，单击“文件|打开”选择图像。需要注意的是“文件|打开”，单击“文件”菜单，然后在出现的菜单中的“打开”项。点击各种菜单项目，在这篇文章的其余部分，我将使用这种同类的简写来形容过程。

的图像3.Resize。
选择“图像|图像大小”。 “图像大小”对话框将出现。在窗口中的默认宽度和高度是目前的尺寸，你的形象。既然你要创建一个你的图片缩略图的宽度或高度框中，输入一个较小的数字。

请注意，我说只输入一个新的尺寸，也就是说，无论是宽度或高度。如果选择“约束比例”复选框（在某处同一个对话框的下半部分），Photoshop会自动计算出其他尺寸。这样一来，您的照片中描绘的事情将保持相称。如果你喜欢手动指定的宽度和高度，并且不介意扭曲的图像（其中一人或物体在画面中可能出现过肥或过身高）取消“约束比例”。

对于那些谁不知道缩略图应该是多大的，让我向你保证，缩略图的大小是没有“标准”。它给你。基本上，只要确保缩略图可以融入您目前的网页设计，以及作为足够小，使你的页面可以快速加载应用的常识规则。图片是非常大的，会花很长的时间来下载，减慢你的网页的显示。

的图像4.Save。
选择“文件|另存为”下一个新的名字并保存图像。除了名称之外，接受你的形象，如果你试图保存该文件，除非你有特定要求时，系统会提示Photoshop所提供的默认值。

有关文件名的一些注意事项：

◦确保你有办法区分您的原始照片和缩略图。保存在一个文件夹中的所有缩略图专门为缩略图（例如，将其命名为“缩略图”），或加少许后缀文件名（例如，缩略图可以被称为“photo_small.jpg”photo.jpg“ “）。

当然，没有什么阻止你命名任何你喜欢的文件，或将它们放置任何你想要的。但是你会明白我说什么有关命名约定在未来，当你有上百个文件进行修剪或维护。然后，如果你没有一个标准的命名惯例，你会已经忘记了是哪个文件，以及将不得不去通过每一个文件，只是为了找出这是缩略图，也就是原来的。

◦不要把空间在您的文件名。不使用大写字母（大写）。空格和大写字母可以为您的网站在未来会造成问题。即使你坚持并正确编码空间在你的网页地址，并使用正确的情况下，别人链接到您的网站可能没有，从而导致各种问题。如果你不完全理解我的前一句，你绝对不应该把您的文件名中的空格，也不使用大写字母。

其他图像5.Repeat过程。
如果你有一个以上的图片，做同样的事情，其他的照片。

插入你在Dreamweaver中的图片和链接
现在，我们有缩略图，我们将使用它链接到全图，在Dreamweaver中。

1.Copy（复印）到您的网页文件夹的图像。
此步骤是非常重要的。之前，您可以修改您的网页缩略图和照片，你会需要集全尺寸的照片和他们的缩略图复制到一个文件夹中，您的网站在您的本地副本。例如，如果您的网站的所有文件，目前保存在“C：\ Documents和Settings \ thesitewizard \我的文档\我的网站”，创建一个新的文件夹内的“我的网站”和所有的图像复制。

需要注意的是，当我说“你的网站的本地副本”，我的意思是复制你的网页，目前保存在自己的电脑上，而不是在你的Web主机之一。它的副本，你平时工作在Dreamweaver之前发布到您的网站。您的图片必须被复制到子文件夹的地方，在这个本地副本。否则，当你在Dreamweaver中，链接到它，你会得到错误。而当你上传到您的网站页面，你会发现不会自动上传图片。最终的结果是，你将有一个网页，没有出现的照片。

再次，我要强调，这一步是非常重要的。

您的网页2.Load。
加载页面，你要插入的缩略图。如果你创建一个新的页面，您希望您的照片库页作为您的网站的其余部分具有相同的基本布局和设计，确保您从您的网站的模板（假设你使用一个）创建新的页面。

3。插入缩略图。
将光标移动到你想要的缩略图部分页面。选择“插入图片”。在“选择图像源”对话框出现，找到前面创建的缩图，然后单击“确定”。出现提示时，您的图片在“替换文本”字段输入一个简短的描述。这个描述是有用的辅助功能目的，以及为使您的网站搜索引擎更友好。

4.Make缩略图转换为可点击的链接。
将鼠标放在图片上，点击鼠标右键。在出现的菜单中，选择“链接”。在出现的对话框中，选择缩略图对应的全尺寸图片。单击“确定”按钮。

5.Save发布页面
当你通过，除通常的方式发布页面。装入您的网站，您的网页浏览器，并测试该页面，通过点击缩略图。你应该能看到一个更大的版本，画面。

顺便说一句，如果你从Dreamweaver中得到错误消息告诉你，“该文件是网站的根文件夹之外什么名的站点'，可能无法访问您发布网站时，”当你插入您的缩略图或使之变成可点击的链接，这意味着你没有按照我的第一步的图像复制到您的网站的文件夹。

创建多个缩略图的快捷方式和完整的照片库网站（Photoshop CS3的用户）
如果您使用的Photoshop CS3，有一个更快的方法创建为您的所有照片的缩略图，特别是如果你有很多的照片处理。事实上，Photoshop会为您创建一个基本的照片相簿网页。当然，你不使用所创建的Web页面，如果你不想 - 只要抓住它产生的所有缩略图和他们在Dreamweaver中插入如上所述。或者，如果你喜欢Photoshop的生成网页的基本功能，但想美化它，你也可以加载和使用Dreamweaver编辑它。

要使用Photoshop的照片库功能，选择“文件”|“自动”|“Web照片画廊”。选择你的照片的源文件夹 - 文件夹，你把所有的全尺寸图像。选择目标文件夹的照片画廊。您应事先就此而言，创建一个新的空文件夹。如果你愿意，你也可以自定义其他的东西 - 例如，缩略图的大小是可以改变的“选项”部分。当你准备好了，点击“确定”，Photoshop将创建整个照片库“页面，完成您的原始照片缩略图和副本。

我如何从缩略图链接到一个更大的照片吗？
本教程中，你所学到的基础知识，如何创建一个照片库或相册，你的网站，你的网页有图片的缩略图，点击它时，会导致显示照片的放大版。

高端网站建设