插入本地图像

极海网络  发布于:2014-11-22  浏览:

摘要:在设计网页时,网页中的图像实际上只是一个指向磁盘上其他位置的引用,网站在上传到服务器端时,需要将本地的图像作为网站的资源一起上传到服务器端才能正确显示,由于网页会保存图片的路径,因此为了保证图像路径的正确性,通常要将图像复制到网站项目的images文件夹下,为此一般建议先创建一个网站项目,以便确保图片引用路径的正确性。 下面演示一下在Dreamweaver中如何创建一个站点,然后向站点中插入图片,最后将图片插入到网页中,步骤如下所示。 (1)打开Dreamweaver,单击主菜单中的站点l新建站点;菜单项,Dreamweaver将弹出创建站点对话框,输入站点名称和站点保存位置之后,单击保存;按钮,一个站点就创建成功了,如图5.15所示。 (2)成功创建网站项目后,在Dreamweaver的面板区域将会看到文件面板,文件面板是用来管理Dreamweaver站点的逻
 
     在设计网页时,网页中的图像实际上只是一个指向磁盘上其他位置的引用,网站在上传到服务器端时,需要将本地的图像作为网站的资源一起上传到服务器端才能正确显示,由于网页会保存图片的路径,因此为了保证图像路径的正确性,通常要将图像复制到网站项目的images文件夹下,为此一般建议先创建一个网站项目,以便确保图片引用路径的正确性。
     下面演示一下在Dreamweaver中如何创建一个站点,然后向站点中插入图片,最后将图片插入到网页中,步骤如下所示。
     (1)打开Dreamweaver,单击主菜单中的"站点l新建站点";菜单项,Dreamweaver将弹出创建站点对话框,输入站点名称和站点保存位置之后,单击"保存";按钮,一个站点就创建成功了,如图5.15所示。
     (2)成功创建网站项目后,在Dreamweaver的面板区域将会看到文件面板,文件面板是用来管理Dreamweaver站点的逻辑视图,它会对在第1步中所指定的物理磁盘文件进行管理。选中站点,右击鼠标,从弹出的快捷菜单中分别创建一个名为Index.html的HTML
文件和一个名为images的文件夹,如图5.16所示。
     (3)双击Index.html在Dreamweaver的文档窗口中打开文件,切换到设计视图,然后在右侧的插入面板的常规页中找到插入图像按钮,图像。如果插入面板没有显示,请单击主菜单的"窗口l插入";菜单项以显示插入面板。单击该按钮后,将显示如图5.17所示的图像,允许用户从本地硬盘中选择一幅图片。
     可以看到这个打开文件的对话框与Windows标准的对话框不同,"选择文件名目";使用默认的"文件系统";单选按钮。如果要从站点目录中选择一幅图像,可以单击"站点根目录";按钮,笔者浏览到本地硬盘上的一幅图像,Dreamweaver检测到这幅图像不是本地站点根目录中的图片,会弹出如图5.18所示的对话框。
     (4)单击"是";按钮之后,Dreamweaver会弹出一个指定要复制到的目标地址的对话框,在该对话框中选择网站根目录下的images文件夹,如图5.19所示。
     (5)在指定了图片保存位置之后,Dreamweaver会将本地硬盘中的图片复制到目标位置,然后弹出一个"图像标签辅助功能属性";设置窗口,如图5.20所示。
     在该属性框中设置替换文本,也就是当图像不可用时,将要显示在HTML页面上的文本内容,单击"确定";按钮。Dreamweaver将在设计视图上显示图片,并生成如下所示的代码:
     Dreamweaver将原本需要手动复制图像、手动插入代码的工作全部自动化,使得用户可以轻松地插入图像。这个特性非常好用,笔者现在已经习惯了使用这种方式来向网站插入图片。
 
 

文章链接:http://www.jihai.com/a/jiaocheng/dreamweaver/201411/676.html
标签:本地(1)时(9)图像(37)插入(12)设计(33)网页(67)在(109)中的(17)
作者:极海网络 来源:未知 发布于2014-11-22 17:17
您可能喜欢的文章

热门模板
热门阅读
热门插件