网站建设与管理之简单网页设计

第四章 简单网页设计,内容提要,4.1 插入文本 4.2 格式化文本 4.3 项目列表的应用 4.4 标尺和网格 4.5 在网页中添加图像 4.6 创建超级链接 4.7 插入多媒体,4.1 插入文本,插入普通文本 插入特殊字符 在字符之间添加空格 插入其他文本,插入普通文本,将插入点定位在文档编辑区中，直接输入文本即可。 在Word等文本编辑软件中编辑好文本之后，将其复制到剪贴板上，然后在Dreamweaver 8中将插入点定位到文档编辑区中，粘贴剪贴板中的文本亦可。,插入特殊字符,在Dreamweaver 8中编辑文本时，往往会遇到一些无法通过键盘直接输入的特殊字符，如版权符号©、注册商标符号®等，这时可通过插入特殊字符的功能进行插入。,在字符之间添加空格,Dreamweaver 8中的文档格式都是以HTML编码形式存在的，而HTML编码中只允许字符之间包含一个空格，所以在Dreamweaver 8中无论按多少次空格键都只会输入一个空格。 Ctrl+Shift+空格 可以插入空格,插入水平线,在文档编辑区将插入点定位到所需位置，选择插入HTML水平线菜单命令或单击“插入”栏中的“HTML”选项卡在其中单击 按钮即可添加水平线。,修改水平线,初始绘制的水平线的格式往往不能满足实际需要，此时可通过属性面板对其进行修改。,插入日期,在制作网页时，有时需要插入当前的日期，Dreamweaver 8提供了快速插入日期和时间的功能。,4.2 格式化文本,设置字体外观 设置字体大小 设置颜色 设置字体样式 设置对齐方式 设置标题格式 设置样式,设置字体外观,用户也可对属性面板的“字体”下拉列表框中的字体列表重新编辑。,设置字体大小,在属性面板的“大小”下拉列表框中选择相应的选项，并选择其后的“单位”下拉列表框中相应的单位选项，即可设置所选文本的字体大小。 字体的度量单位有像素（px）、厘米（cm）等，可根据具体情况进行选择，但一般都以像素为单位。,设置颜色,单击属性面板中的 按钮，在弹出的颜色列表框中选择相应的选项可设置所选文本的字体颜色，在其后的文本框中可直接输入颜色的英文名（如Red、Green等）或以“#”开头的十六进制颜色代码（如#ff0000、00ff00）设置所选文本的颜色。,设置字体样式,粗体 根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本加粗。单击按钮即可设置“加粗”设置，再次单击按钮可取消“加粗”设置。 斜体 根据在“首选参数”对话框的“常规”选项中设置的样式参数选择，将或标签应用于选定的文本，即对所选文本进行倾斜设置。选中按钮即可将所选的文本应用“倾斜”。再次单击按钮可取消“倾斜”设置。,设置对齐方式,通过属性面板中的“左对齐”按钮、“居中对齐”按钮、“右对齐”按钮和“两端对齐”按钮可设置文本的对齐方式。,设置标题格式,在属性栏的“格式”下拉列表框中可设置标题格式，其中“段落”是应用标签的默认格式，“标题 1”选项应用标签，设置该选项可以将所选的文本设置成各种标题。标题号越小，字体越大。,设置样式,属性面板中的“样式”下拉列表框可用于显示当前应用于所选文本的样式。,4.3 项目列表的应用,有序列表 无序列表 定义列表 为现有文本创建列表 创建嵌套列表 设置项目列表属性,有序列表,有序列表又称为编号列表，是有一定排列顺序的列表，一般前面有数字前导字符，其中前导字符可以是阿拉伯数字、英文字母或罗马数字等。,无序列表,无序列表又称为项目列表，是一系列无顺序级别关系的项目文本组成的列表，一般前面是用项目符号作为前导字符。,定义列表,定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中,为现有文本创建列表,除了先创建列表项再输入文本外，还可以先输入文本，然后再设置列表项。,创建嵌套列表,嵌套列表是包含在其他列表中的列表, 演示,设置项目列表属性,使用“列表属性”对话框可以设置列表项的外观，包括编号样式、项目符号样式等。,标尺和网格,标尺分为水平标尺和垂直标尺，分别显示在Dreamweaver 8文档编辑区的上方和左侧。标尺的单位包括像素、厘米和英寸，在默认状态下使用像素为单位。,网格,网格与标尺都是定位工具，但在网页布局中使用网格更方便。文档编辑区中显示了网格后，就可以对网页元素进行准确的定位了。,4.5 在网页中添加图像,网页图像的格式及来源 插入图像 设置图像属性 图像高级设置,网页图像的格式及来源,GIF格式 JPEG格式 PNG格式 网页图像来源,GIF格式,GIF全称为“Graphics Interchange Format”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别。 GIF文件占用空间小，最多支持256种颜色。GIF图像可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画。,JPEG格式,JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。,PNG格式,PNG全称为“Portable Network Graphics”，意为便携网络图像，它是逐渐流行的网络图像格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。,网页图像来源,网页图像的素材有很多来源，如可以使用图形处理软件（如Photoshop、Fireworks和FreeHand等软件）制作；可以购买网页素材光盘；可以从网络上下载等。,插入图像,直接插入 占位符插入 图像的放大显示,直接插入,选择插入图像菜单命令。 单击插入栏的“常用”选项卡中的按钮。 按【Ctrl+Alt+I】键。,占位符插入,制作网页时还未选定需插入的图像，但确定了图像大小的时候，可以使用占位符来代替图像的方式插入到文档中。 将图像确定后双击占位符，在打开的对话框中设置后插入即可。,图像的放大显示,Dreamweaver 8新增的放大镜功能可以让用户更方便地进行对齐图像、选择较小的对象以及查看较小的文本、动画或网页元素等操作。,设置图像属性,在网页中插入图像后可通过属性面板对其属性进行修改等设置。,图像命名 图像大小 编辑图片 源文件设置,文本说明 图像与文本的对齐 图像边距 图像边框,图像命名,为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。,图像大小,在Dreamweaver 8中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。,编辑图片,在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了Fireworks，那么Fireworks将被默认为图像处理软件。如果没有安装，用户也可自己设置使用其他软件中处理图像,源文件设置,在属性面板的“源文件”文本框中显示了图像的保存路径，如果要重新插入一幅新图像，可以在选取图像后的属性面板中的“源文件”文本框中重新输入要插入图像的地址，或单击右侧后的 按钮，在打开的“选择图像源文件”对话框中重新选择需要的图像。,文本说明,在选取图像后的属性面板的“替换”下拉列表框中可以输入图像的文本说明。,图像与文本的对齐,选取图像后，在属性面板的“对齐”下拉列表框中可设置处于同一行上的图像与文本的对齐方式。,图像边距,选取图像在属性面板的“垂直边距”和“水平边距”文本框中可以设置图像与页面上方和左侧之间的距离，也可以设置图像与其他网页元素之间的距离。,图像边框,选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框。,图像高级设置,鼠标经过图像设置 插入Fireworks HTML对象,鼠标经过图像设置,鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。,插入Fireworks HTML对象,Macromedia公司的图形处理软件Fireworks优化后的图像和HTML文件。使用Dreamweaver可直接插入保存到所需的Dreamweaver站点文件夹中。,4.6 创建超级链接,创建文本超级链接 创建锚链接 创建空链接 创建电子邮件超级链接 创建图像超级链接 创建导航条,创建文本超级链接,文本超级链接是最常见的超级链接，通过使用鼠标点击文本即可从一个网页跳转到另一个网页。,创建锚链接,创建命名锚记 链接命名锚记,创建命名锚记,在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超级链接打开目标网页时可直接跳转到相应的命名位置上。,链接命名锚记,创建好锚记之后，必须创建对应的超级链接源端点。,创建空链接,要想对文本设置行为，首先必须为文本建立空超级链接（空超级链接是一个未指派目标的超级链接），这样行为才会有效。 为文本建立空超级链接时，只要先在文档窗口中选中需要建立空超级链接的文本，然后在属性面板的“链接”文本框中输入一个“#”符号即可。建立空超级链接的目的只是为了应用行为，其他情况下不必建立。,创建电子邮件超级链接,电子邮件在网络应用中十分广泛，在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系。,创建图像超级链接,为一般图像创建超级链接 创建图像热点超级链接,为一般图像创建超级链接,创建图像热点超级链接,要在一幅比较大的图片中添加许多超级链接时，应该将图片化整为零，分割成较小的图片，然后分别为这些小图像上建立超级链接来达到目的，但这时整幅图片就不能对齐，利用Dreamweaver 8的图像热点超级链接功能就能避免这个问题。,创建导航条,插入导航条 编辑导航条,插入导航条,导航条一般由图像或图像组组成，这些图像的显示内容随用户的操作不同而进行相应的变化。导航条为访问者浏览不同网页提供了一条捷径。,编辑导航条,上机实战,制作如下图所示导航条。,4.7 插入多媒体,（1）插入Flash对象 （2）插入音频文件 （3）插入视频文件 （4）插入Java Applet,插入flash对象,插入Flash动画 插入Flash文本 图像查看器 插入Flash按钮 插入Flashpaper 插入Flash视频,插入flash动画,在Dreamweaver中，可以直接插入发布后的Flash动画，其具体操作步骤如下： （1） 将光标定位在要插入flash动画的位置 （2） 选择“插入”|“媒体”|“flash”命令，或单击“常用”工具栏 按钮，在弹出的下拉菜单中选择flash命令，弹出“选择文件”对话框。 （3） 在“查找范围”下拉列表框中选择需要插入的flash动画文件。 （4） 单击确定按钮，会在网页中出现flash标志。如果插入的flash文件不在站点文件夹下，系统会提示复制该flash文件到站点文件夹下。,插入flash动画,（5）选择插入到网页中的flash动画元件，可以在“属性”面板中设置它的高度和宽度。可以点击“属性”面板上的“播放”按钮来预览效果。 （6）其他属性设置为宽和高：用于以像素为单位指定Flash对象的宽度和高度。因为Flash使用的是矢量图形，所以改变高度和宽度时不会影响动画的质量。还可以指定英寸、毫米、厘米等等单位。,插入flash动画,文件：显示Flash文件的路径。单击后面的浏览按钮可以指定新的动画文件。 编辑：此按钮用于启动Macromedia Flash MX以编辑Flash文件。如果计算机上没有加载Macromedia Flash MX，此按钮将被禁用。 重设大小：恢复到Flash文件默认尺