《网页设计与制作Dreamweaver CS5》全套PPT课件.pptx

Dreamweaver基本操作1 Dreamweaver基本操作2Dreamweaver基础操作 Dreamweaver的工作环境主要由以下几个部分组成：标题栏、菜单栏、文档窗口、工具栏、属性面板以及多个浮动面板组成，如图所示。 Dreamweaver基本操作3CS3版本8.0版本CS5版本CS6版本 Dreamweaver基本操作Dreamweaver的辅助功能4 Dreamweaver基本操作创建站点5 站点按照位置的不同分为本地站点及远程站点。本地站点是建立在本地计算机硬盘中的一个文件夹，用于存放站点中所有的网页、图像等对象。 Dreamweaver基本操作创建站点6站点文件夹index.html图片文件夹其它文件夹例如：images例如：filessoundswf Dreamweaver基本操作创建站点7“VB教学课件”站点文件夹（按文件类型分类）“网页教学课件”站点文件夹（按章节内容分类） 表格基本操作8 表格基本操作9表格在网页中的作用组织数据 表格基本操作10表格在网页中的作用版面布局 表格基本操作11表格在网页中的作用版面布局 表格基本操作12表格在网页中的作用 组织信息 表格可以使大量的信息资料有组织的排列起来，以达到查阅快捷，管理便利的目的。 版面布局 表格是网页制作中最为重要的一个对象，网页是依靠表格来进行版面布局和组织各元素的。 表格基本操作13表格在网页中的作用组织信息 表格直接决定了网页是否美观，内容组织是否清晰。合理的利用表格可以美化页面。 表格基本操作14表格操作新建表格 “行”、“列”：指定表格的行数或列数； “宽度”：指定表格宽度，以像素或占浏览器窗口百分比为单位； “边框”：指定边框宽度； “单元格边距”：指定单元格中的内容到单元格边框之间的空白宽度； “单元格间距”：指定各个单元格之间的间距。 表格基本操作15表格操作 相对宽度：百分比％，设置的表格会自动调整大小。 绝对宽度：像素，设置的表格大小不变。表格的相对宽度和绝对宽度 表格基本操作16表格操作表格Id：表格名行、列：数值框中可修改表格的行数和列数，修改完后按【Enter】键进行确认。宽： 数值框中可修改表格宽度，并在其后的列表中选择“像素”或“百分比”作为度量单位。填充：数值框中修改单元格内容和单元格边界之间相距的像素数。间距：数值框中设置相邻的单元格之间相距的像素数。对齐：下拉列表中选择表格在所属对象中的位置边框：表格外框的粗细 类：下拉列表框中选择表格的CSS样式。表格属性 表格基本操作17表格操作 可删除表格的列宽值 可删除行高值 将表格宽度从浏览器窗口的百分比转换为像素 将表格宽度从浏览器窗口像素转换为百分比表格属性 表格基本操作18表格操作表格单元格属性水平：单元格中的数据水平对齐方式垂直：单元格中的数据水垂直对齐方式宽： 单元格的宽度高：单元格的高度背景颜色：单元格的背景颜色 表格基本操作19实验1新建表格设置表格的属性 表格基本操作20实验2新建表格设置表格的属性单元格的合并 表格基本操作21实验3 表格基本操作22实验4（选做题）数据导入 图像23 图像24图像的分类及特点图形图像是构成网页的重要元素 图像25网页中常用的图像格式JPG格式：质量越高，文件越大。支持真彩色，网页中常来表现风景摄影、新闻图片等。GIF格式：支持透明属性，常用于网页中的图形、符号、标题等。PNG格式：支持真彩色和透明属性，文件量较之JPG和GIF格式要大。 图像26添加图像对象图像鼠标经过图像（翻转图）图像占位符 图像27设置图像的属性恢复图像大小 图像28实验1 图像29实验2翻转图效果 图像30实验3 图像31实验4翻转图效果 CSS样式32 CSS样式33CSS样式层叠样式表（Cascading Style Sheet） CSS样式34文字的CSS样式 CSS样式35图像的CSS样式 CSS样式36表格的CSS样式 CSS样式37项目列表的CSS样式 CSS样式38链接文本的CSS样式 CSS样式39CSS的选择器类型 CSS样式40CSS的选择器类型类ID标签复合内容 CSS样式41文字的CSS样式字体大小字型行距颜色 CSS样式42文字的CSS样式文本对齐方式段落首页空位 CSS样式43文字的CSS样式 CSS样式44图像的CSS样式大小与其它元素的间距与边框的距离 CSS样式45图像的CSS样式图像的边框 CSS样式46图像的CSS样式 CSS样式47表格的CSS样式 表格的边框 表格单元格之间的线条表格起始标签：table /table 表格行标签： tr /tr 单元格标