网页设计与制作 —Dreamweaver 8 网页设计课件.ppt

网页设计与制作 —Dreamweaver 8 网页设计 李京文 教学目标 1．熟悉Dreamweaver 8的操作界面； 2．熟悉和掌握使用Dreamweaver 8建立与管理站点； 3．掌握如何使用Dreamweaver 8设置页面属性； 4．掌握如何使用Dreamweaver 8对文本进行编辑； 5．掌握在Dreamweaver 8中如何插入和编辑图像； 6．掌握如何在Dreamweaver 8创建表格并对其进行编辑； 7．掌握如何在Dreamweaver 8建立超链接； 8．掌握如何在Dreamweaver 8中使用多媒体； 9．掌握如何在Dreamweaver 8中使用层； 10．掌握如何在Dreamweaver 8中使用框架； 11．了解如何在Dreamweaver 8中创建和使用样式表； 12．了解如何在Dreamweaver 8中使用模板与库； 13．掌握如何在Dreamweaver 8创建表单； 14．了解如何在Dreamweaver 8中使用行为与时间轴； 15．熟练运用Dreamweaver 8创建自己个人主页。 本章内容 Dreamweaver 8简介 站点的建立与管理 页面设计 3.1 Dreamweaver 8简介 本章案例的小型个人网站是利用Dreamweaver 8设计的，在设计前首先要对该环境作个基本的了解，下面就来简单的介绍Dreamweaver 8。 3.1 Dreamweaver 8简介 3.1.1 Dreamweaver 8操作界面 在安装好Dreamweaver 8后，我们可以通过windows中的“开始/程序/Macromedia/Macromedia Dreamweaver 8”来启动Dreamweaver 8。 第一次启动时会出现“工作区设置”对话框，如下图所示，可以从“设计者”和“编码者”中选择一种工作区布局，它们分别面向设计者和代码编写者，两种布局也可以在主菜单“编辑/参数选择”中切换，通常选择默认的“设计者”工作区。 3.1 Dreamweaver 8简介 Dreamweaver 8工作界面如下图所示。 3.1 Dreamweaver 8简介 3.1.2 标题栏 Dreamweaver 8的“标题栏”中将显示文字“Macromedia Dreamweaver 8”，如果打开网页的话，在后面还会显示该网页的一些信息，如网页标题、所在位置及文件名称，右边有3个按钮，分别对应Dreamweaver 8窗口的最小化、最大化和关闭的操作。 3.1 Dreamweaver 8简介 3.1.3 菜单栏 “标题栏”的下面是“菜单栏”， 菜单栏中提供了“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”十个菜单项。单击其中任意一个菜单，会出现一个下拉式指令菜单，如果指令选项为浅灰色的话，则代表该指令在当前的状态下不能执行。有些指令的右边会有键盘的代码，这是该指令的快捷键，熟练使用快捷键将会有助于提高工作效率。有些指令的右边会有一个小黑三角的标记，它代表该指令还包含有下一级的指令，鼠标停留片刻即可显现下一级指令 3.1 Dreamweaver 8简介 3.1.4 工具栏 “工具栏”指的是“菜单栏”下边三排按钮，选择菜单“查看/工具栏”，选定里面的“插入”、“文档”和“标准”三项，三个工具栏就显示出来了，如下图所示。 3.1 Dreamweaver 8简介 3.1.5 网页编辑窗口 工具栏下面的区域是“网页编辑区域”，在Dreamweaver 8启动时显示一个“起始页”，其中包括“打开最近项目”、“创建新项目”、“从范例创建”三个较方便使用的项目。选中任意项，出现“网页编辑窗口” ，则“网页编辑区域”就会出现“网页编辑窗口”，用户可以在文档区域中输入文字、插入表格和编辑图片等操作。 3.1 Dreamweaver 8简介 3.1.6 状态栏 文档区下部有一个如下图所示的区域，其中左半部分文字（如“body”）表示当前光标所在区域的HTML标记，单击可以选定这个HTML标记包括的区域，其中右半部分文字表示的是当前页面的尺寸（单位是像素），单击它会出现下拉菜单，用户可以选择各种网页分辨率，也可以自定义新的分辨率。 3.1 Dreamweaver 8简介 3.1.7 面板工具 1.属性面板 网页编辑窗口下面是“属性面板”, 用来显示和调整页面对象的属性，根据鼠标所选中对象的不同，“属性面板”界面会有差异，用户可以分别对不同的对象进行设置 2.浮动控制面板组 3.2 站点的建立与管理 如果要制作一个完整的网站，在制作网站的具体页面之前，首先需要创建一个本地站点。下面我们以本章案例