您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>学习教材>>>Dreamweaver教程>>>网页制作——第三课:文档与图像
网页制作——第三课:文档与图像
发表日期:2007/3/31 8:00:00 出处:闪客启航 作者:未知 发布人:aypy1020 已被访问 3339

录音下载

第一节:新建和保存文档

文本的信息量大且生成的文件小,容易被浏览器下载,不会让浏览者用过多的时间等待,因此,不论网页内容如何丰富,文本始终都是网页中的基本元素。同时掌握好文本的使用也是网页制作的基本功。

【新建文档】

    新建一个文档有两种方法:

A:如果您的Dreamweaver MX 2004 运行后显示起始页,则在起始页中直接选择【新建HTML文档】

B:如果您的Dreamweaver MX 2004运行后不显示起始页,则在【文件】菜单选择【新建】命令,打开【新建文档对话框】,我们以方法B为例。

    1、在【文件】菜单选择【新建】命令。打开【新建文档】对话框,如下图所示:

 【类别】列表框中显示出八大选项【基本页】列表框中显示出六大选项,普通网页都是HTML文档。

    2、在【类别】列表选择【基本页】选项,在【基本页】列表框中选择【HTML】选项,然后按下【创建】按钮,创建一个新的文档。

    窗口底部状态栏上有一组相成的数字,单击此处会弹出一个菜单。这些数字是用来定制文档窗口的大小,括号的数字对应的用户窗口的分辨率。据有关资料表明,目前网络用户使用最多的屏幕分辨率为800X600和
1024X768居多,因此我们在设计网页的时候应当兼顾浏览的用户,不仅使自己网页布局美观合理,也方便用户浏览。

    点击分辨率数字,选择【编辑大小】弹出参数选择对话框,选择您面向的用户的分辨率然后【确定】,一般测试是以56K/S的连接速度为标准,因此【连接速度】请选择“56”该速度值取整数显示,并不精确,用途是给设计者一个参考值,避免网页浏览时下载时间过长。

 

【输入文本】

    新建文档之后打开编辑界面,此时可以在【编辑窗口】中输入文本了,为了节省时间,我们把下面的文字复制,然后粘贴在编辑窗口中:

    “闪客启航”是一所成功的网络学校。成立两年来,在大成校长的领导下,由开始几个老师在一起的学术交流,到现在规范教学,从无到有不断发展壮大,为广大闪客一族提供了一个健康纯净的学习交流的平台。

    复制/粘贴之后出现以下界面,至此文档建立,文本输入完成。

 

【保存文档】

    新建一个文件后,选择主菜单的【文件】/【保存】命令,将打开【保存为】对话框:

选中保存路径,给文件命名后,选择保存类型,然后按下【保存】按钮即可完成文件保存。

 

第二节:编辑文档

一个精美的网页跟排版布局关系很大,页面的排版是给人的第一印象,上一小节我们学会了输入文本,但大家不难发现,文本的开头紧贴着左侧,这一点不符合汉字排版的规范,因此这一小节中我们一起来讨论如何编辑文本。

【插入换行符】

    我们知道使用键盘的【回车】可以换行,但同时也就结束了一个段落。如果我们既要换行又要处在同一个段落中,就必须使用换行符。

    将光标移动到要换行的字符处:

按下键盘【Shift】+【Enter】键,文档在同一个段落中换行,同时出现了换行符的符号:

 

    插入换行符后设计视图中出现了黄色的换行符符号,它只在设计视图中出现,浏览网页的时候是不可见的,因此它是不可见元素之一。是否让不可见元素在设计中出现,是可以设置的。

【设置不可见元素】

  • 选择主菜单中【编辑】/【首选参数】命令,打开【首选参数】对话框。
  • 在【分类】列表中选中【不可见元素】选项。

 

在显示栏中选中的符号将在设计视图中显示,反之则不显示。

同样,前面我们提到汉字顶格的问题,可能您无法在段落的开头连续输入空格,那么请在【首选参数】对话框中选中选中【常规】分类,然后在编辑选项中选中【允许多个连续的空格】即可。

 

【设置页边距】

    设计视图中文本的上下左右都有一定的边距,这是因为 Dreamweaver MX 2004 默认的文档的上下左右边际并非为零,选择【修改菜单】的【页面属性】命令,打开其对话框可以进行修改。

 

【设置文字大小】

    鼠标选中欲改变大小的文字,然后点击属性面板中的字体大小下拉菜单设置即可。

【改变字体】

    鼠标选中欲改变字体的文字,然后点击属性面板中的字体下拉菜单设置即可。

【改变字体组合】

    点击属性面板【字体】的下拉菜单,选中【编辑字体列表】

打开字体列表对话框:

【字体组合】

    尽管我们可以在Dreamweaver MX 2004中设定字体,我们电脑中安装的字体,用户的电脑中不一定安装,最终字体的显示取决于访问者的浏览器。
    在浏览器中默认是按照顺序读取字体组合的字体,一种没有就用第二种显示,依此类推,尽管有了这个保护,如果我们采用了非常少见的字体,不仅无法按照我们的设计显示,还有可能造成浏览器发生错误。
    Windows系统中默认的中文字体是宋体、仿宋体_GB2312、楷体_GB2312、黑体。

【改变文本颜色】

1、修改文本颜色,鼠标选中欲修改的文本,然后在属性面板中选择颜色,打开调色板选择颜色即可。

 

2、改变整个页面的文本颜色,打开【页面属性】对话框,选中【外观】/【文本颜色】,打开调色板选中颜色即可。

 

【段落】

    将光标移动到段落前,然后在【属性】面板中的【格式】下拉列表中选择相关的选项,光标后的文本即可发生变化。

【其他】

    在属性面板中可以设置文本的对齐方式,如加粗,倾斜,左右最齐,居中对齐等,这些都与Word或者WPS等字处理软件用法相同,大家可以试一试,在此不过多叙述了。

 

第三节:插入图像

本节素材下载

图文并茂是网页的一大特色,图像不仅能使网页生动、形象、美观,而且能使网页中的内容更加丰富多彩,因此图像在网页中的作用是举足轻重的。作为一个网页设计者,掌握好网页中图像的应用尤为重要。

    要掌握好网页中图像的应用,首先我们来了解一下跟图像有关的内容:

网页安全色

    理论上根据红绿蓝三种基色,加上每种基色、饱和度和透明度的变化,排列组合之后,我们可以得到16777216种(RGB)颜色,但在这一千六百万种颜色中只有216种颜色能被浏览器识别,超出这个范围,浏览器就会忽略或者显示出现偏差。尽管现在浏览器性能越来越好,支持的颜色范围也越来越广,但最安全的颜色还是这216种,因此它们被成为网页安全色。Dreamweaver MX 2004 的调色板就是网页安全色范畴之内的颜色,使得网页颜色的选取控制在安全色之内。

GIF图像

    GIF图像是网页中使用的最广泛,最普遍的一种图像格式,它是英文“可交换图像格式”的缩写。GIF图像最多只能支持256种颜色,因此一般来说文件体积较小,适合在网络上使用。
    GIF格式的图像可以被交替下载,当浏览器下载时,首先只下载其中某些行,使浏览器显示图像的大致轮廓,然后逐步下载其他行,使图像逐渐清晰起来。网页中使用交错的GIF图像能够减少访问者的等待时间。

JPEG图像

    是网页中另一种被广泛使用的图像格式,它是“联合图像专家组文件格式”的英文缩写,最多可以支持16.8兆种颜色,适合在需要表现细腻颜色细节的图像上使用,因为它支持的颜色数目较多,所以生成的文件体积较大。但由于JPG格式图像具有较高的压缩率,提高了浏览器下载速度,也被广泛应用在网页中。

    当我们对颜色和图像有了初步了解之后,就能尝试在网页中插入图像了。

插入图像

    Dreamweaver MX 2004 中插入图像非常方便,只要在站点管理器相应的文件夹下选中图像,用鼠标拖拽到文档编辑窗口即可,也可以在【插入】菜单中选择【图像】命令然后打开“选择图像源文件”对话框:

选择图像文件然后确定就能将图像插入网页中了。

如果该文档是没有保存的新建文档,在【URL】文本框中显示的是在本地计算机硬盘中的绝对路径,一旦文档被保存,【URL】选项就变成相对于文档或站点根目录的路径名。

如果选择的图像文件不在定义的站点目录内,将弹出对话框询问复制到网站的目录下,应该选择“是”否则,当今后将网站上传到服务器之后该图像就无法显示了。

 

第四节: 图像属性

跟输入文本之后需要编辑排版一样,插入图像之后也要进行布局编排,同时来设定图像各种特有的属性。首先我们插入一个图像,如下图:

    用鼠标拖动【缩放手柄】可以改变图片大小,但仅仅是在网页中显示的大小,并不改变原图像尺寸。同时选中图片(即图像周围出现拖放手柄)的时候【属性面板】也能看到和设置该图像的属性:

【宽】【高】是图片的尺寸,默认单位是象素。

【源文件】是图片的路径,点击后面的文件夹图标也能选择其他图片。

【链接】是链接的目标页面或者定位点的URL。

【目标】链接时的目标窗口或框架。

【替代】是图片的文字注释,当图片不能正常显示的时候,图片的位置就会显示文字注释。

【编辑】启动图像编辑软件对图像编辑。

【地图】用于制作图像映射(热点)

【垂直边距】【水平边距】图像在垂直或水平方向与网页中其他元素之间的距离。

【边框】图像边框的宽度。选择空白或零时没有边框。

【对齐】下拉列表用于指定图片相对于文本的排列方式。

【低解析度源】当前图片的低分辨率副本的路径。如果图片很大,则先让浏览器下载显示一个文件较小的图片副本,浏览器装载完其他内容后再回头来下载较大的图像,这样做既能保持网页的完整性,又能减少用户等待时间。

 

第五节:应用图像

 

了解了图像的基本属性之后,就是对图像的基本处理和应用了。Dreamweaver MX 2004 中还有一些功能是对图像功能的补充,下面分别介绍。

图像占位符

    图像占位符是在网站排版布局中经常使用的功能,我们可以随意定义它的大小,然后放置在准备放置图像的位置,用自定义的颜色来替代图像的出现。

1、在【插入】菜单选择【图像对象】下的【图像占位府】命令,弹出对话框:

【名称】填写图像占位符的名称,不能使用汉字也不能用数字起头。它将出现在图像占位符上。
【宽度】【高度】欲插入图像的尺寸。
【颜色】图像占位府在设计布局中的颜色。
【替换文本】当网页中图像不能显示的时候出现的文字注释。

2、我们在【名称】填写“qhlogo”尺寸为114X40,颜色定义为墨绿色,替换文本为“启航LOGO”然后确定:

3、鼠标选中图像占位符后在属性面板【源文件】中填写图像路径。

点击【源文件】后面的文件夹图标或者鼠标将用前面的指针图标直接指向站点管理器中相应的图片都可以指定源文件。

4、指定源文件之后,图像占位符被指定的图像取代。

启航LOGO

5、如果在网页中图片不能正常显示,则图像位置出现【替代】中的文本注释:

 

设置网页背景

    改变网页的背景状态一种是可以使用网页安全色设置背景颜色,另一种是设置背景图像,当然不是所有的图像都能用作背景。

    在【页面属性中】打开【背景颜色】调色板选中颜色后确定即可设定网页的背景色,我们重点来讨论在网页中设置背景图像。

【设置背景图像】

1、将本小节素材中的“flash3.jpg”图片拷贝在站点中的图片文件夹下。

2、在属性面板点击【页面属性】按钮,打开【页面属性】对话框,在【背景图像】中选中该图片:

3、图片被平铺成为网页背景图像:

【重点提示】

    不论图片尺寸多大,一旦将它设置为背景图像,Dreamweaver MX 2004 就会将它反复拼接,铺满整个背景区。因此选择背景图片的时候,不能选择颜色太深的图片,以免文档内容不能衬托出来,为了使用背景图像,网页中其他元素的背景应该是透明的,否则背景图片将会被其他元素的背景遮挡,影响整个页面的美观。

 

图像映射

    要使图像成为一个超级链接,我们就要在图像中设定“热区”然后给出URL,这样,当用户鼠标移动到图片热区的时候会变成手的形状,提示用户这里有一个超级链接,当用户点下鼠标的时候,页面就跳转到或者打开设定的URL。

    1、选中图像后看到属性面板,下图中红色标记内的形状代表可以在图片中使用的热区形状,分别是矩形、圆形和多边形,可以根据实际需要选中相应的形状,然后在图片中画出热区。箭头按钮用于移动已经建立的热点。

    2、绘制出热点之后,【属性面板】如下:

【链接】给出需要链接的URL。
【目标】给出点击后URL的打开位置,如在本窗口打开还是在新窗口打开等。

 

跟踪图像

    跟踪图像是 Dreamweaver MX 2004 的独有功能,其实就像是工程设计蓝图,大家可能都很熟悉小孩练习写字的时候的描红吧?很多网页设计者喜欢在图像处理软件中首先勾勒出一个网页的雏形,然后将它做为网页蓝图添加在网页背景区域,然后在上面对号入座,好比小孩描红。

    点击【页面属性】按钮,打开页面属性对话框,在【分类】列表中选择【跟踪图像】打开对话框:

    点击浏览按钮选择跟踪图像的的路径和文件名,设置透明度至符合自己的需要,按下【确定】按钮即可完成跟踪图像的设置。

    完成跟踪图像之后,网页设计窗口中出现蓝图,我们可以根据蓝图完成制作,而蓝图并不在网页中添加任何代码,这幅蓝图将来也不会被上传到服务器上。

 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

兰幽空间 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话: 联系人:心梦、劳拉