网页设计制作篇skb.pptxVIP

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