《精编》网站建设与管理之简单网页设计

《《精编》网站建设与管理之简单网页设计》由会员分享，可在线阅读，更多相关《《精编》网站建设与管理之简单网页设计（80页珍藏版）》请在金锄头文库上搜索。

1、第四章简单网页设计 内容提要 4 1插入文本4 2格式化文本4 3项目列表的应用4 4标尺和网格4 5在网页中添加图像4 6创建超级链接4 7插入多媒体 4 1插入文本 插入普通文本插入特殊字符在字符之间添加空格插入其他文本 插入普通文本 将插入点定位在文档编辑区中 直接输入文本即可 在Word等文本编辑软件中编辑好文本之后 将其复制到剪贴板上 然后在Dreamweaver8中将插入点定位到文档编辑区中 粘贴剪贴板中的文本亦可 插入特殊字符 在Dreamweaver8中编辑文本时 往往会遇到一些无法通过键盘直接输入的特殊字符 如版权符号 注册商标符号 等 这时可通过插入特殊字符的功能进行插入

2、在字符之间添加空格 Dreamweaver8中的文档格式都是以HTML编码形式存在的 而HTML编码中只允许字符之间包含一个空格 所以在Dreamweaver8中无论按多少次空格键都只会输入一个空格 Ctrl Shift 空格可以插入空格 插入水平线 在文档编辑区将插入点定位到所需位置 选择 插入 HTML 水平线 菜单命令或单击 插入 栏中的 HTML 选项卡在其中单击按钮即可添加水平线 修改水平线 初始绘制的水平线的格式往往不能满足实际需要 此时可通过属性面板对其进行修改 插入日期 在制作网页时 有时需要插入当前的日期 Dreamweaver8提供了快速插入日期和时间的功能 4 2格式化文

3、本 设置字体外观设置字体大小设置颜色设置字体样式设置对齐方式设置标题格式设置样式 设置字体外观 用户也可对属性面板的 字体 下拉列表框中的字体列表重新编辑 设置字体大小 在属性面板的 大小 下拉列表框中选择相应的选项 并选择其后的 单位 下拉列表框中相应的单位选项 即可设置所选文本的字体大小 字体的度量单位有像素 px 厘米 cm 等 可根据具体情况进行选择 但一般都以像素为单位 设置颜色 单击属性面板中的按钮 在弹出的颜色列表框中选择相应的选项可设置所选文本的字体颜色 在其后的文本框中可直接输入颜色的英文名 如Red Green等 或以 开头的十六进制颜色代码 如 ff0000 00ff00

4、 设置所选文本的颜色 设置字体样式 粗体根据在 首选参数 对话框的 常规 选项中设置的样式参数选择 将或标签应用于选定的文本 即对所选文本加粗 单击按钮即可设置 加粗 设置 再次单击按钮可取消 加粗 设置 斜体根据在 首选参数 对话框的 常规 选项中设置的样式参数选择 将或标签应用于选定的文本 即对所选文本进行倾斜设置 选中按钮即可将所选的文本应用 倾斜 再次单击按钮可取消 倾斜 设置 设置对齐方式 通过属性面板中的 左对齐 按钮 居中对齐 按钮 右对齐 按钮和 两端对齐 按钮可设置文本的对齐方式 设置标题格式 在属性栏的 格式 下拉列表框中可设置标题格式 其中 段落 是应用标签的默认格式 标

5、题1 选项应用标签 设置该选项可以将所选的文本设置成各种标题 标题号越小 字体越大 设置样式 属性面板中的 样式 下拉列表框可用于显示当前应用于所选文本的样式 4 3项目列表的应用 有序列表无序列表定义列表为现有文本创建列表创建嵌套列表设置项目列表属性 有序列表 有序列表又称为编号列表 是有一定排列顺序的列表 一般前面有数字前导字符 其中前导字符可以是阿拉伯数字 英文字母或罗马数字等 无序列表 无序列表又称为项目列表 是一系列无顺序级别关系的项目文本组成的列表 一般前面是用项目符号作为前导字符 定义列表 定义列表不使用项目符号或数字这样的前导字符 通常用在词汇表或说明书中 为现有文本创建列表

6、除了先创建列表项再输入文本外 还可以先输入文本 然后再设置列表项 创建嵌套列表 嵌套列表是包含在其他列表中的列表 演示 设置项目列表属性 使用 列表属性 对话框可以设置列表项的外观 包括编号样式 项目符号样式等 标尺和网格 标尺分为水平标尺和垂直标尺 分别显示在Dreamweaver8文档编辑区的上方和左侧 标尺的单位包括像素 厘米和英寸 在默认状态下使用像素为单位 网格 网格与标尺都是定位工具 但在网页布局中使用网格更方便 文档编辑区中显示了网格后 就可以对网页元素进行准确的定位了 4 5在网页中添加图像 网页图像的格式及来源插入图像设置图像属性图像高级设置 网页图像的格式及来源 GIF格式

7、JPEG格式PNG格式网页图像来源 GIF格式 GIF全称为 GraphicsInterchangeFormat 意为可交换图像格式 它是第一个支持网页的图像格式 在PC机和苹果机上都能被正确识别 GIF文件占用空间小 最多支持256种颜色 GIF图像可以在网页中以透明方式显示 还可以包含动态信息 即GIF动画 JPEG格式 JPEG全称为 JointPhotographicExpertsGroup 意为联合图像专家组 它可以高效地压缩图片 丢失人眼不易察觉的部分图像 使文件容量在变小的同时基本不失真 通常用来显示颜色丰富的精美图像 PNG格式 PNG全称为 PortableNetworkGr

8、aphics 意为便携网络图像 它是逐渐流行的网络图像格式 PNG格式既融合了GIF能透明显示的特点 又具有JPEG处理精美图像的优势 且可以包含图层等信息 常常用于制作网页效果图 网页图像来源 网页图像的素材有很多来源 如可以使用图形处理软件 如Photoshop Fireworks和FreeHand等软件 制作 可以购买网页素材光盘 可以从网络上下载等 插入图像 直接插入占位符插入图像的放大显示 直接插入 选择 插入 图像 菜单命令 单击插入栏的 常用 选项卡中的按钮 按 Ctrl Alt I 键 占位符插入 制作网页时还未选定需插入的图像 但确定了图像大小的时候 可以使用占位符来代替图像

9、的方式插入到文档中 将图像确定后双击占位符 在打开的对话框中设置后插入即可 图像的放大显示 Dreamweaver8新增的放大镜功能可以让用户更方便地进行对齐图像 选择较小的对象以及查看较小的文本 动画或网页元素等操作 设置图像属性 在网页中插入图像后可通过属性面板对其属性进行修改等设置 图像命名图像大小编辑图片源文件设置 文本说明图像与文本的对齐图像边距图像边框 图像命名 为了在使用Dreamweaver行为 如交换图像 或脚本撰写语言 如JavaScript或VBScript 时可以引用该图像 可在属性面板的 图像 文本框中为图像命名 图像大小 在Dreamweaver8中插入图像后系统会

10、自动将图像的原始大小显示在 宽 和 高 文本框 以像素为单位 中 编辑图片 在网页中选择图像之后 单击属性面板中的按钮 打开图像处理软件 对图像进行处理 如果安装了Fireworks 那么Fireworks将被默认为图像处理软件 如果没有安装 用户也可自己设置使用其他软件中处理图像 源文件设置 在属性面板的 源文件 文本框中显示了图像的保存路径 如果要重新插入一幅新图像 可以在选取图像后的属性面板中的 源文件 文本框中重新输入要插入图像的地址 或单击右侧后的按钮 在打开的 选择图像源文件 对话框中重新选择需要的图像 文本说明 在选取图像后的属性面板的 替换 下拉列表框中可以输入图像的文本说明

11、图像与文本的对齐 选取图像后 在属性面板的 对齐 下拉列表框中可设置处于同一行上的图像与文本的对齐方式 图像边距 选取图像在属性面板的 垂直边距 和 水平边距 文本框中可以设置图像与页面上方和左侧之间的距离 也可以设置图像与其他网页元素之间的距离 图像边框 选取图像后 在属性面板的 边框 文本框中可以设置图像边框的宽度 单位为像素 0 表示无边框 图像高级设置 鼠标经过图像设置插入FireworksHTML对象 鼠标经过图像设置 鼠标经过图像是一种在浏览器中查看网页时 鼠标光标经过该图像时 图像发生变化的动态图像 插入FireworksHTML对象 Macromedia公司的图形处理软件Fir

12、eworks优化后的图像和HTML文件 使用Dreamweaver可直接插入保存到所需的Dreamweaver站点文件夹中 4 6创建超级链接 创建文本超级链接创建锚链接创建空链接创建电子邮件超级链接创建图像超级链接创建导航条 创建文本超级链接 文本超级链接是最常见的超级链接 通过使用鼠标点击文本即可从一个网页跳转到另一个网页 创建锚链接 创建命名锚记链接命名锚记 创建命名锚记 在制作网页时 为了达到跳转到网页固定位置的目的 可以使用锚链接 通过对网页中指定位置的命名 利用超级链接打开目标网页时可直接跳转到相应的命名位置上 链接命名锚记 创建好锚记之后 必须创建对应的超级链接源端点 创建空链接

13、 要想对文本设置行为 首先必须为文本建立空超级链接 空超级链接是一个未指派目标的超级链接 这样行为才会有效 为文本建立空超级链接时 只要先在文档窗口中选中需要建立空超级链接的文本 然后在属性面板的 链接 文本框中输入一个 符号即可 建立空超级链接的目的只是为了应用行为 其他情况下不必建立 创建电子邮件超级链接 电子邮件在网络应用中十分广泛 在网页中建立电子邮件超级链接可方便网页浏览者与设计者之间的联系 创建图像超级链接 为一般图像创建超级链接创建图像热点超级链接 为一般图像创建超级链接 创建图像热点超级链接 要在一幅比较大的图片中添加许多超级链接时 应该将图片化整为零 分割成较小的图片 然后分

14、别为这些小图像上建立超级链接来达到目的 但这时整幅图片就不能对齐 利用Dreamweaver8的图像热点超级链接功能就能避免这个问题 创建导航条 插入导航条编辑导航条 插入导航条 导航条一般由图像或图像组组成 这些图像的显示内容随用户的操作不同而进行相应的变化 导航条为访问者浏览不同网页提供了一条捷径 编辑导航条 上机实战 制作如下图所示导航条 4 7插入多媒体 1 插入Flash对象 2 插入音频文件 3 插入视频文件 4 插入JavaApplet 插入flash对象 插入Flash动画插入Flash文本图像查看器插入Flash按钮插入Flashpaper插入Flash视频 插入flash动

15、画 在Dreamweaver中 可以直接插入发布后的Flash动画 其具体操作步骤如下 1 将光标定位在要插入flash动画的位置 2 选择 插入 媒体 flash 命令 或单击 常用 工具栏按钮 在弹出的下拉菜单中选择flash命令 弹出 选择文件 对话框 3 在 查找范围 下拉列表框中选择需要插入的flash动画文件 4 单击确定按钮 会在网页中出现flash标志 如果插入的flash文件不在站点文件夹下 系统会提示复制该flash文件到站点文件夹下 插入flash动画 5 选择插入到网页中的flash动画元件 可以在 属性 面板中设置它的高度和宽度 可以点击 属性 面板上的 播放 按钮来

16、预览效果 6 其他属性设置为宽和高 用于以像素为单位指定Flash对象的宽度和高度 因为Flash使用的是矢量图形 所以改变高度和宽度时不会影响动画的质量 还可以指定英寸 毫米 厘米等等单位 插入flash动画 文件 显示Flash文件的路径 单击后面的浏览按钮可以指定新的动画文件 编辑 此按钮用于启动MacromediaFlashMX以编辑Flash文件 如果计算机上没有加载MacromediaFlashMX 此按钮将被禁用 重设大小 恢复到Flash文件默认尺寸 自动播放 选中后Flash电影会自动播放 垂直边距与水平边距 设置Flash文件垂直与水平方向上的空白区域 品质 此下拉列表框用于在对象播放期间控制抗失真 设置越高 效果越好 比例 此下拉列表框用于指定对象如何在设置好的宽度和高度尺寸下显示 默认值 设置显示整个对象 对齐 此下拉列表框用于指定对象在页面上的对齐方式 背景颜色 用于指定对象的背景颜色 参数 可设定ActiveX参数 这些参数用于ActiveX控件之间的数据交换 演示 插入flash文本 用户如果希望制作一个有Flash动画效果的文字 在Dreamweaver