第二节 网页设计制作节(skb).ppt

主要内容纲要 回顾HTML Dreamweaver CS3简介与工作界面 网页文件的基本操作 网页制作的基本操作 建立网页链接 表格处理 框架结构 插入多媒体元素 AP DIV元素 行为特效 第一讲网页制作基础 学习内容 初识Dreamweaver Dreamweaver CS5工作界面 网页文件的基本操作 设置网页外观属性 创建站点 设置默认图像文件夹 站点的管理 软件下载 安装 启动 退出 插入面板：主要用于在网页中插入各类网页元素。默认情况下显示的是“常用”插入栏。 文档工具栏：用于切换编辑区视图模式、设置网页标题等，还可用于在浏览器中浏览网页。 浮动面板组：是浮动面板的集合。位置可任意拖动。 属性面板：用于设置和查看所选对象的各种属性。不同对象其属性面板的参数设置项目不同。 扩展按钮：可以显示或隐藏浮动面板和属性面板。扩展按钮有水平和纵向两种，其作用分别介绍如下：水平扩展按钮：单击编辑窗口右侧的”水平扩展“按钮，可以隐藏或展开工作界面右侧的浮动面板组，这样可以在水平方向扩大编辑窗口….. 状态栏：选择标签、选取工具、手形工具、缩放工具、设置缩放比率、调整窗口大小，显示文件大小及下载可能需要时间。 新建网页文件 多个编辑文件的切换选择 保存指定文件 关闭文件 打开已建网页文档： 预览编辑中的网页（快捷键F12） 网页标题 网页默认字体 默认字体大小 背景颜色 背景图片 边距 什么是站点？ Dreamweaver 的站点是一种网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理，还可以实现将文件上传到网页服务器，测试网站。 简单的说站点就是一个文件夹。在这个文件夹里包含了网站中所有用到的文件。通过这个文件夹（站点）对我们的网站进行管理，有次序，一目了然。 创建站点： 操作 在“文件”面板中点击管理站点→选中一站点→打开“站点管理”对话框→然后点“编辑” →再设置“默认图像文件夹”路径即可。 站点管理 编辑站点 复制站点 删除站点 文件面板中实现的操作 选择编辑网页文件 创建文件或文件夹 剪切/粘贴/复制/删除/重命名文件或文件夹 第二讲制作网页的基本操作 学习内容 添加、编辑文本 设置文本样式 分段和换行 设置段落格式 网页中使用的图片格式 在网页中插入图像 设置图像属性 图文混排 编辑图片 鼠标经过时更改图片特效 添加普通文本 添加空格 添加日期时间 添加水平线 添加特殊字符：? ? ￥ 等 实例操作： 我的足球网－首页 CSS：Cascading Style Sheet，层叠样式表或级联样式表，是一组格式设置规则，用于控制web页面的外观。 字体：建议选择常用字体 大小 颜色 风格 拖动鼠标选中一个或多个文字、一行或多行文本，也可以选中网页中的全部文本 按BachSpace键或Delete键实现删除文本操作 实现复制、剪切、粘贴等操作 实现查找与替换查找 实现撤销或重做 分段按Enter回车键（隔一行） 换行按Shift+Enter（不分段） 对齐方式 列表编号 列表可以将文本段落用符号或序号标注起来，有两种类型：项目列表和编号列表。设置项目列表的操作过程如下： 选择要添加列表的若干文本段落 单击属性检查器中的“项目列表”按钮或“编号列表”按钮 缩进 .GIF格式 特点：它的图片数据量小，可以带有动画信息，且可以透明背景显示，但最高只支持256种颜色。 用途：大量用于网站的图表Logo、广告条Banner及网页背景图像。但由于收到颜色的显示，不适合用于照片级的网页图像。 .GPEG格式 特点：可以高效地压缩图片的数据量。使图片文件变小的同时基本不丢失颜色画质。 用途：通常用于显示照片等颜色丰富的精美图像。 .PNG格式 特点：是一种逐步流行的网络图像格式。既融合了gif能做成透明背景的特点，又具有jpeg处理精美图像的优点。 用途：常用于制作网页效果图。 **插入→图像 **插入面板→常用→图像 **直接将图像文件拖入编辑区 注意： **在插入图像前应先将网页文件已保存，从而使所插图像引用正确 **图像插入网页后，应确定图像文件已经存入站点，否则在下次打开网页时，会出现看不到图像的情况。 **图像——设置的名称 **宽、高——可缩小和放大图片的显示尺寸 **源文件——图片的路径和名称 **替代——图像的说明文字 **边框——图片是否要加边 **垂直边距和水平边距——图片四周突出的尺寸 **对齐——在一行中图形和文本的对齐方式 **裁切 **锐化 **对比度/亮度 **重新采样：当图片的宽、高缩小后，重新生成更小的图片 **优化：为图片“瘦身” 概念： 指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一张图像。 步骤： **将光标放到要插入图像的地方 *