Dreamweaver网页制作课件.ppt

1、使用最广的URL形式是用于表示网页的Internet位置。http:/ 三类软件间的相互关系示意图三类软件间的相互关系示意图nHTML文件一行可以写多个标记，也可以一个标记写在多行中，但一个单词不能分两行写nHTML源文件的换行、回车符及多个空格在显示时都是无效的。是换行符，是换段符n注释：正确：北京文件体文件体标题标题网页制作工具栏工具栏插入栏插入栏属性面板属性面板编辑窗口编辑窗口浮动面板组浮动面板组网页标签网页标签图图 新建站点对话框新建站点对话框_1输入站点名字单击“下一步”单击“基本”选项卡图图 新建站点对话框新建站点对话框_2单击“下一步”选择“否”，表示该站点是一个静态站点，没有动

2、态页。图图 新建站点对话框新建站点对话框_3单击“下一步”选择站点的本地根文件夹选中图图 新建站点对话框新建站点对话框_4选择“无”单击“下一步”图图 新建站点对话框新建站点对话框_5“总结总结”界面界面单击“完成”n单击“站点”“管理站点”命令。可以对站点进行编辑、删除和复制等操作。图图 “管理站点管理站点”对话框对话框1.新建文件夹右击“站点”窗口的空白处，在弹出菜单中选择“新建文件夹”。2.新建文件右击新建的文件夹，在弹出菜单中选择“新建文件”。此时即可在Dreamweaver窗口中进行网页文件的编辑。3.复制文件/文件夹4.删除文件/文件夹5.重命名文件/文件夹6.打开文件打开一个已有

3、的网页文件 example.htm。7.保存文件单击“文件”“另存为”，将它保存到站点中。1.创建我的站点地图2.要求：在D盘建立名为Mysite的站点在新建站点下建立名为untitled、image及web的三个文件夹。将名为untitled的文件夹改名为yuansujin单击“文件”“新建”命令。图图 “页面属性页面属性”对话框对话框文本类型文本类型（段落（段落/标题）标题）字体字体字体大小字体大小字体颜色字体颜色 粗体粗体 斜体斜体 段落对齐方式段落对齐方式段落整体凸出段落整体凸出 缩进缩进设置项目无序列表设置项目无序列表 有序列表有序列表图图 “属性面板属性面板”建立链接建立链接文本类

4、型文本类型（段落（段落/标题）标题）字体字体字体大小字体大小字体颜色字体颜色粗体粗体 斜体斜体 图图 “属性面板属性面板”使字体显示使字体显示默认色默认色打开打开“颜色颜色”对话框对话框图图 “颜色颜色”对话框对话框图图 “颜色列表颜色列表”段落对齐方式段落对齐方式段落整体凸出段落整体凸出 缩进缩进设置项目无序列表设置项目无序列表 有序列表有序列表图图 “属性面板属性面板”2.3.1 2.3.1 图像文件格式图像文件格式2.3.2 2.3.2 插入图像插入图像2.3.2.1 2.3.2.1 直接插入图像直接插入图像2.3.2.2 2.3.2.2 用占位符插入图像用占位符插入图像2.3.3 2.

5、3.3 编辑图像编辑图像1.JPG/JPEG(联合图像专家组)：有损压缩格式的图像，扩展名jpg或jpeg;它支持24位真彩色，如果要显示的图像特别重视色彩，可以使用该类型的图像。2.GIF(图像交换格式)：无损压缩，仅支持8位颜色，适用于显示卡通等对色彩要求不高的地方；它支持动画格式，所以在网络上很流行。n单击“插入”“图像”命令。n如果图像文件不在定义的本地站点中，则询问是否复制到本地站点中。图图 “选择图像源选择图像源”对话框对话框选中选中“文件系文件系统统”单选项单选项“图像占位符图像占位符”对话框对话框更换图像输入该图像的名称以便用脚本语言（如JavaScript）引用。边框粗细设置

6、图像左侧和右侧的边距设置图像顶部和底部的边距图像与周围文字的对齐方式宽、高建立链接图图 图像属性面板图像属性面板 3.4上机实战n新建一个网页，输入不同字体和颜色新建一个网页，输入不同字体和颜色的文字，并为其加上背景图片。的文字，并为其加上背景图片。n选择一张喜欢的图片，插入到网页中，选择一张喜欢的图片，插入到网页中，使文字与图环绕使文字与图环绕n插入一张图片，要求当鼠标滑过图片插入一张图片，要求当鼠标滑过图片时能看到相关介绍时能看到相关介绍n在网页中练习插入各种媒体（在网页中练习插入各种媒体（flash按按钮、水平线等）钮、水平线等）1.表格：由一些线条分开的小格组成。2.边框：组成表格的线

7、条。3.单元格：被边框分开的区域。4.行：位于水平方向的一系列单元格。5.列：位于垂直方向的一系列单元格。6.单元格中可以存放数据、文字、图形、图片。7.单元格内部边距：文字或其他对象同单元格边缘之间的距离。8.单元格间距：单元格之间的距离班级学号姓名计算机0101张千 列1列2列3行1行2边框单元格间距单元格间距内部边距内部边距“插入表格”按钮图图 “插入表格插入表格”对话框对话框单元格中可以插入任何类型的数据，例如文本、图像、单元格中可以插入任何类型的数据，例如文本、图像、表单甚至表格，同时可以按照通常的编辑方式编辑其中表单甚至表格，同时可以按照通常的编辑方式编辑其中的内容的内容。清除列宽

8、清除列宽清除行高清除行高表格与同一段落中文本表格与同一段落中文本或图像的对齐方式。或图像的对齐方式。将表格宽度将表格宽度/高高度转换成像素度转换成像素将表格宽度将表格宽度/高度转换成高度转换成%单元格内间距（像素）单元格内间距（像素）单位是单位是：像素：像素单元格中的单元格中的文本在文本在“水水平平”/“”/“垂垂直直”方向上方向上的对齐方式的对齐方式以以“像素像素”表示，若以表示，若以百分比表示百分比表示，在数值后，在数值后加加%使单元格使单元格成为标题成为标题单元格单元格 图图 单元格的属性面板单元格的属性面板图图 “格式化表格格式化表格”对话对话框框边框粗细。边框粗细。“0”“0”表示表

9、示无表格线无表格线n制作个人简历制作个人简历n制作各种不同效果的立体表格制作各种不同效果的立体表格 突出的立体表格突出的立体表格 边框凹进的立体表格边框凹进的立体表格 凹进的立体表格凹进的立体表格 边框突出的立体表格边框突出的立体表格完整的URL地址：协议类型:/服务器名:端口号/目录/文件名+文档中的命名锚 http:/:1024/news/index.html#hello指定链接文档在哪一级目录中被打开图图 属性面板属性面板 图图 “电子邮件链接电子邮件链接”对话对话框框 图图 属性面板属性面板 图图 “E-mailE-mail链接链接”演示演示复习：相当于一个网站的目录，导航条通过超级链

10、接与各个站点或网页链接。添加/删除导航条按钮图图 “插入插入导航条导航条”对话框对话框在“导航条元件”列表框中上移/下移图图 在设计视图中看到的在设计视图中看到的导航条导航条“目标”栏设置为“_blank”图图 在浏览器中使用在浏览器中使用导航条导航条图图 “修改导航条修改导航条”对话框对话框框架按框架按钮钮图图 “插入栏插入栏”图图 创建好的框架创建好的框架图图 框架面板框架面板该名称可以被该名称可以被JavaScript程序引用程序引用框架中的内容框架中的内容到边框的距离到边框的距离框架源文件的框架源文件的URL地址地址是否能在浏览器中通过拖动是否能在浏览器中通过拖动框架边框来改变框架大小

11、框架边框来改变框架大小文档内容超出框架的大小时，是否显示滚动条是否显示边框设置框架集中不同设置框架集中不同框架的行列大小框架的行列大小n注意：框架的属性设置优于框架集的属性设置。注意：框架的属性设置优于框架集的属性设置。框架中的文档内容框架中的文档内容LeftFrameTopFrameMainFrame建立一个框架结构的建立一个框架结构的网页，使左边链接的网页，使左边链接的内容可以在右下方的内容可以在右下方的框架内变换。框架内变换。n作三个网页，使他们运用相同的样式表作三个网页，使他们运用相同的样式表n制作一个黑色背景的网页，制作一种样制作一个黑色背景的网页，制作一种样式，使上面的文字呈阴影状

12、。式，使上面的文字呈阴影状。“描绘层”按钮层标记图图 设计面板中的设计面板中的“层层”面板面板注意：注意：表单不能嵌套，但是一个网页中可以有多个表单。表单不能嵌套，但是一个网页中可以有多个表单。插入表单插入表单表单域表单域 单行单行 密码密码 多行多行图图 插入的文件域插入的文件域图图 文件域的属性面板文件域的属性面板图图 复选框的属性面板复选框的属性面板图图 “单选按钮组单选按钮组”对话对话框框单选按钮单选按钮单选按钮组单选按钮组图图 插入的单选按钮插入的单选按钮/组组图图 “列表列表/菜单菜单”属性面属性面板板图图 “列表值列表值”对话框对话框图图 插入的列表插入的列表/菜单菜单按钮上的文

13、字按钮上的文字三种动作三种动作图图 “按钮按钮”属性面板属性面板图图 插入的按钮插入的按钮图图 用表格帮助设计的表单用表格帮助设计的表单 Onmouseout(鼠标移出)Onmouseover(鼠标移过)Onreset(复位)Onsubmit(提交)Onfocus(获得焦点)Onchange(改变)Onbeforeupdate(更新前)Onblur(失去焦点)7.打开浏览器窗口 8.播放声音 9.弹出信息框 10.设置导航条图像 11.设置文本 12.显示隐藏 13.控制轮替图像 19.验证表单图图 行为面板行为面板图图 动作菜单动作菜单Thank you very much!Thank you very much!本章到此结束，本章到此结束，谢谢您的光临！谢谢您的光临！返回本章首页返回本章首页