首页 理论教育 相片网页制作:DreamweaverCS6美工设计入门

相片网页制作:DreamweaverCS6美工设计入门

时间:2023-11-05 理论教育 版权反馈
【摘要】:个人网站在制作时需要一个相片浏览的相片集。该相片集可以将所有图片进行缩小,在网页中以列表的形式显示出来,并且每一个缩小图片都可以通过超级链接正常显示。当单击相册中的一个缩小图片时,则会显示该图片的原始大小,同时在网页中还会显示相册标题、图像文件的文件名、导航条及源图像。图3-41 打开的Web相册的子页面源图像把建立的汽车展示相册页面主页与网站首页的导航“汽车相册”做一个链接就可以实现这个栏目的建设。

相片网页制作:DreamweaverCS6美工设计入门

个人网站在制作时需要一个相片浏览的相片集。该相片集可以将所有图片进行缩小,在网页中以列表的形式显示出来,并且每一个缩小图片都可以通过超级链接正常显示。当用户单击一个缩小图片后,该图片将被放大,然后以实际的尺寸显示该图像。这对于个人网站建设中建立个人的相片册或者可爱的宠物相册非常方便。下面以汽车的展示为例来介绍这一功能。

(1)首先打开Windows【资源管理器】,在站点根目录下建立新文件夹image,然后在里面再建立两个目录:imagesource和photoalbum。imagesource文件夹用来保存要建立相册的图像源文件,photoalbum文件夹用来保存将要建立的相册,如图3-35所示。

978-7-111-40644-0-Chapter03-41.jpg

图3-35 建立文件夹

(2)将所需的图片复制到本站点的imagesource目录下,即image\imagesource下,本实例使用了12张汽车的图片,这些图像在随书附带光盘的Sourse\chap03\image文件夹下,如图3-36所示。

978-7-111-40644-0-Chapter03-42.jpg

图3-36 本例中要应用的素材

(3)选择【新建】列表框中的【HTML】选项,如图3-37所示。

978-7-111-40644-0-Chapter03-43.jpg

图3-37 选择创建基本页

(4)单击【HTML】按钮,即可在Dreamweaver CS6中创建一个HTML页面。在【文档】窗口的【标题】文本框中输入该文档的标题“汽车相册”,如图3-38所示。

978-7-111-40644-0-Chapter03-44.jpg(www.xing528.com)

图3-38 保存文件

(5)执行菜单栏上的【文件】→【保存】命令,打开【另存为】对话框,在【文件名】文本框输入汽车相册,其他保持默认值。单击【保存】按钮保存该文档,按如图3-39所示样式制作一个简单的相册效果。从图中可以看出,在页面的最上方显示了标题及副标题。相册中列出了所有图像的缩小列表,它们以表格的形式显示,同时在缩小图像与文件名之间插入一个回车换行符。

978-7-111-40644-0-Chapter03-45.jpg

图3-39 生成的相册

(6)生成的相册以HTML文件格式保存在设置的相册目标目录中,即在本地站点的photoalbum子目录下。而且在该子目录下还建立了三个目录及一个相册的主页文件index.htm。这些子目录及主页文件在【资源管理器】中的显示如图3-40所示。

978-7-111-40644-0-Chapter03-46.jpg

图3-40 保存相册的子目录及主页

(7)按<F12>键对生成的相册进行预览,则会显示所有源图像的缩小相册。当单击相册中的一个缩小图片时,则会显示该图片的原始大小,同时在网页中还会显示相册标题、图像文件的文件名、导航条及源图像。通过导航条可以显示“前一个”图像、“下一个”图像及显示相册“首页”。如图3-41显示的是一个源图像。

978-7-111-40644-0-Chapter03-47.jpg

图3-41 打开的Web相册的子页面源图像

把建立的汽车展示相册页面主页与网站首页的导航“汽车相册”做一个链接就可以实现这个栏目的建设。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈