第3章静态网页基本操作.ppt
《第3章静态网页基本操作.ppt》由会员分享,可在线阅读,更多相关《第3章静态网页基本操作.ppt(39页珍藏版)》请在三一文库上搜索。
1、静态网页基本操作,本章主要内容,学会设置页属性 熟悉插入网页基本元素 掌握设置文本、图像、链接的属性 了解插入文件头标签 学会使用媒体,设置页面属性,1.概述 打开“页面属性”对话框的方法: “修改/页面属性”(快捷键CTRL+J) 单击属性面板中的“页面属性”按钮 2.设置外观,设置页面属性,“外观”具体设置如下: 页面字体:用于设置文字的字体,如宋体、黑体等 大小:用于设置网页中文本的字号 文本颜色:用于设置网页中文本的颜色 背景颜色:用于设置网页背景的颜色 背景图像:指网页可以用图片作背景,单击“浏览”按钮,在弹出的“选择图 像”对话框中选择一个图像作为网页的背景图 重复:指网页背景图以
2、什么样的重复方式显示,如横向显示、纵向显示等 左边距、右边距、上边距、下边距:指定页面四周边距的大小 注:这些值仅适用于Microsoft Internet Explorer ,而Netscape Navigator忽略 这些值,要确保在任何一个浏览器中都不出现边距,请将四个值都设置为“0”,设置页面属性,3.设置链接,设置页面属性,设置链接的参数如下: 链接字体:设置页面的超链接文本的字体 大小:设置超链接文本的字号的大小 链接颜色;设置页面中超链接的颜色 交换图像链接:设置页面里变换图像后的超链接的颜色 已访问链接:设置页面中访问过的超链接的颜色 活动链接:设置网页里激活的超链接的颜色 下
3、划线样式:用于设置超链接的下划线,如显示下划线或隐藏下划线,设置页面属性,4.设置标题 设置与页面标题有关的属性,该对话框设置相对简单,只要求设置标题的字 体、字号和颜色。,设置页面属性,5.设置标题与编码,设置页面属性,具体参数设置如下: 标题:指定在“文档”窗口和浏览器窗口的标题栏中出现的内容 文档类型(DTD):指定文档类型定义 编码:指定文档中字符所用的编码。文档编码在文档头的meta标签内指定 ,它告诉浏览器和Dreamweaver 应如何对文档进行解码以及使用哪些字体来 显示解码的文件 Unicode标准化表单:仅在选择UTF-8作为文档编码时启用。有四种 Unicode标准,最重
4、要的是标准化表C,因为它是用于万维网的字符模型的最 常用表单 包括Unicode签名(BOM):可在文档中包括字节顺序标记(BOM)。 BOM是位于文本文件开头的24个字节,可将文件标识为Unicode ,若是这样 ,还标识后面字节的字节顺序。由于UTF8没有字节序,因此可以先择添加 UTF8.,设置页面属性,6.设置跟踪图像 跟踪图像是指在网页设计时作为参考的图像。该图像只供参考,当文档在 浏览器中显示时并不出现。通过点击“浏览”按钮,可以选择相应的跟踪图 像;拖动滑块可以指定图像的透明度,透明度越高图像显示得越明显。,使用文本,1.概述 文本是网页设计最常用的的元素,文本的操作包括文本的插
5、入和文本属性 的设置等。 注:一个中文字符占2个字节 2.插入文本 插入文本有三种方法: (1).直接在文档窗口中输入文本 Enter:分段换行 Shit+Enter:换行 Dreamweaver默认情况下不允许输入连续的空格,若需要输入多个空格, 可执行菜单命令“编辑/首选参数”,在打开的“首选参数”面板里将“允许多个连 续的空格”选项选中即可,或者将输入法设置为全角状态。 注:在全角状态下输入的空格,浏览器的支持效果不好,有时会出现“?”号 形式出现报错信息,建议设计者不要在此状态下输入空格。,使用文本,(2).粘贴其他文本 将光标定位到需要插入文本的位置 “编辑/粘贴”(ctrl+v)或
6、者单击标准工具栏上的粘贴按钮 (3).导入Word或Excel文档 导入文档的方法: “文件/导入/word文档” “格式化”选项:是指将选中的Word文档以什么样的格式导入到当前文档里, 其下拉列表包括四个选项: 仅文本:插入无格式文本。若原始文本带格式,所有格式将被删除 带结构的文本:插入文本并保留结构,但不保留基本格式设置 结构:段落、列表、表格 基本格式:加粗、倾斜 带结构的文本及基本格式:插入结构化并带简单的HTML格式的文本。 带结构的文本及全部格式:插入文本并保留所有结构、HTML格式设置和CSS 样式,使用文本,3.设置文本属性 选中文本,打开属性面板,即可对选中的文本进行属性
7、设置 具体设置如下: 格式:设置所选文本的段落样式 字体:文本应用所选字体组合 大小:设置字体的字号 文本颜色 :设置所选文本的颜色。单击颜色框选择网页安全色,或在 相邻的文本域中输入十六进制数值 粗体 :将文本加粗 斜体 : 将文本倾斜 左对齐( )、居中对齐( ) 、右对齐( )、两端对齐( ):将 选 中的文本应用各自的对齐方式,使用文本,链接;创建所选文本的超文本链接 项目列表( )、编号列表( ):创建所选文本的项目列表和编号列 表。若未选择文本,则启动一个新的项目列表或编号列表 缩进( )、凸出( ):应用或删除blockqutote标签缩进或删除所选 文本的缩进。在列表中,创建一
8、个嵌套列表,而删除缩进则取消嵌套列表。,使 用 图 像,1.Web页面中常用的三种图片格式 (1).GIF 图形交换格式 GIF文件最多使用256种颜色,最适合显示色调不连续或具有大面积单一 颜色的图像,如导航条、按钮、图标、徽标或其他有统一色彩和色调的图 像。另外,还可用作动画图片。 (2).JPEG 联合图像专家组标准 JPEG文件格式是用于摄影或连续色调图像的高级格式,这是因为JPEG文 件可以包含数百万种颜色。随着JPEG文件品质的提高,通常可以通过压缩 JPEG文件在图像品质和文件大小之间达到良好的平衡。 (3).PNG 可移植网络图形 PNG文件格式是一种替代GIF格式的无专利权限
9、的格式,它包括对索引颜色 、灰度、真彩色图像以及alpha通道透明的支持。PNG是Macromedia Fireworks 固有的文件格式,PNG文件可保留所有原始层、矢量、颜色和效,使 用 图 像,果信息(如阴影),并且在任何时候所有元素都是可以完全编辑的。文件必 须具有.png 文件扩展名才能被Dreamweaver识别PNG文件。 2.插入图像 插入图片的方法: (1). 在“插入”菜单栏中单击插入图像按钮 (2). 插入/图像(Ctrl+Alt+I) “图像标签辅助功能属性”对话框中的设置值: 替代文本:设置图像标签Alt属性值,对当前图像进行说明 详细说明:指定一个网页来加以更详细的
10、说明,其设置的是图像标签 Longdesc属性值 3.设置图像属性值 宽和高:以像素为单位指定图像的宽度与高度。 注:若设置的“高”和“宽” 的值与图像的实际宽和高不相符,则图像在浏览器中 可能不会正确显示,使 用 图 像,目标:打开链接窗口的形式 对齐:指对齐同一行上的图像与文本 参数选项: 默认值:与基线对齐 基线和底部:将文本(或同一段落中的其他元素)的基线与选定对象的底部对齐。 顶端:将图像的顶端与当前行中最高项(图像与文本)的顶端对齐 居中:将图像的中部与当前行的基线对齐 文本上方:将图像的顶端与当前文本的中最高字符的顶端对齐 绝对居中:将图像的中部与当前行中文本的中部对齐 绝对底部
11、:将图像的底部与文本行的底部对齐 左对齐:将所选图像放置在左边,文本在图像的右侧换行 右对齐:将所选 图像放置在右边,文本在图像的左边换行,使 用 图 像,使 用 图 像,地图名称和热点名称:允许标注和创建客户端图像地图 垂直边距和水平边距:沿图像的边缘添加边距(以像素为单位) 垂直边距:沿图像的顶部和底部添加边距 水平边距:沿图像的左侧和右侧添加边距 边框:以像素为单位的图像边框的宽度,默认为无边框 编辑:启动在“外部编辑器”首选参数中指定的图像编辑器并打开选定的图 像,默认值为Fireworks ,其中包含优化、裁剪、重新取样、亮度和对比度、 锐化。,使 用 图 像,3.编辑图像 (1).
12、优化图像 打开优化面板的方法: 点击“优化( )”按钮 命令/在Fireworks中优化图像 注: 若在本地机安装Fireworks软件,Dreamweaver会自动打开fireworks优 化面板,但不打开Fireworks软件 优化图像是一个不可逆的过程,一亘更更新后,将无法撤消 (2).裁剪图像 裁剪图像就是可让用户修剪图像的大小,从所选图像中删除不需要的区域,使 用 图 像,(3).图像重新取样 重新取样就是让用户对已调整图像大小后确认,提高图片在新的大小和形状 下的品质。 (4).调整图像的亮度与对比度 亮度与对比度:通过调整图像的高亮显示、阴影和中间色调来修正过暗或过 亮的图像。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 静态 网页 基本 操作
链接地址:https://www.31doc.com/p-3406478.html