1、DreamWeaver 简介,1. DreamWeaver 概况介绍 2. 各项功能介绍 a.整体主菜单简介 b.各部分菜单简介 3. 以制作一网站为范例简介 4. 需要注意的一些细节问题,DreamWeaver 概况介绍,DreamWeaver 是 Macromedia 公司开发出的用于 设计、撰写和开发网站、网页及网络应用程序的专 业 HTML 编辑器。它集HTML程序代码编缉器，页面 编缉器等多种视觉编辑环境于一体,能够提供多种编 辑环境。Dreamweaver 中的视觉编辑功能在不撰写 任何一行程序代码的情况下就可以快速建立网页。可 以检视所有网站项目或资源，并将它们从方便使用 的面板
2、直接拖曳到文件中,也可以在 Macromedia,Fireworks 或其它图形应用程序中建立和编辑影 像,然后将它们直接汇入到 Dreamweaver，或新 增 Macromedia Flash 对象，来简化开发工作流 程。 Dreamweaver 也提供了功能完整的程序代码 撰写环境,包括程序代码编辑工具 (如程序代码色彩 标示和标签完成) 以及 HTML ，阶层式样式表 (CSS)JavaScript,ColdFusion 标记语言(CFML) , Microsoft Active Server Pages (ASP) 以及 Java Server Pages (JSP) 的参考数据。M
3、acromedia Roundtrip HTML 技术不需要重新格式化程序 码, 就可以汇入您手动撰写的 HTML 文件，,然后您可以使用偏好的格式样式来重新格式化程 式码。 Dreamweaver 也能使用如 CFML、ASP.NET、 ASP、JSP 和 PHP 等服务器技术，建立动态支持 数据库的网络应用程序。 Dreamweaver 可以完全自订。您可以根据个 人喜好建立自己的对象和命令, 修改快速键,甚至 撰写JavaScript用新的行为, 属性检测器和网站报 告来扩充 Dreamweaver 功能。,操作界面,DreamWeaver MX由两个部分组成，即页面 编辑器和站点管理器
4、。 1. 页面编辑器 : 分为五个部分：菜单栏、页面编辑区、工具 栏、控制面板、状态栏。 其中 控制面板有 属性面板、对象面板、设计面板、样式面板 帮助面板等。 2 . 站点管理器 : 站点管理器窗口显示了站点地,图，和当前网站中的文件列表。一般来说，在 建设一网站前 , 应先建立好站点，再开始制作网页,这样可以保证页面内文件链接的正确性。,DreamWeaver 制作基础,一、创建网页 启动Dreamweaver MX，就会自动生成一个 白色背景的文件工作区，这里就是设计和制作 网页的地方，在这里可以根据不同喜好来选择程序源代码编辑方式或页面编辑方式 , 在页面 编辑方式中 , 可以直接输入
5、网页设计过程中所 需要的文字、图片、表格、Flash动画等。 网页的背景颜色的，以及文字的颜色都是 可以通过“页面属性”来设置的。,二、文字的编辑可以直接在网页中输入文字，可以在【Text】下设置文字的格式，如字体、字号、颜色、粗体、斜体，段落居左、居中及居右，添加项目符号及 编号等。此外，还可以利用HTML样式和CSS样 式表对文字进行页面的统一格式设置。 也可以通过属性面板来更改文字的大小、颜 色、字体等。,三、插入图像在网页中插入一幅图片时，图片文件必 须位于当前站点中。 在对象面板中选择插入图片图标或者通过菜单中的“插入”-“图片”，此时系统将打 开“选择图像源文件”对话框。找到需要插
6、入的图片文件，选择“Select”,确定。 Dreamwaver支持常用的网页图片格式有 扩展名为“GIF”、“JPG”、“JPEG”、“PNG” 的图形文件。,四、插入鼠标变换图片该图片对象的特点是当鼠标经过该图片时,图片内容会自动更新。实际上，它是由两幅图 片组成的，一幅为主图片，显示在页面中；一 幅为滚动图片，当鼠标经过图片所在区域时显 示。单击对象面板中的图标，或者选择【插入】菜单的“影像对象”子菜单中的“鼠标变换影像”命令可实现该操作。,五、创建图片热点在插入的图片上，可以是交换式图片， 可以把图片分为若干个区域，每个区被称 为“热点”，可以为每个热点指定相关的链 接。当单击某个热点
7、时，系统显示相关的 网页。当绘制完热区后，属性面板会显示 热区的属性。 还可以调整热点区尺寸。,六、插入水平线 在对象面板中选择按钮，在页面中点击，画 面会自动生成一条水平线，在水平线上单击, 可 以设置水平线的宽度、高度、对齐方式、是否 有阴影等参数。七、插入邮件链接 创建邮件链接的作用是当浏览者点击该链接 时，系统将自动启动计算机中的邮件发送程序。,八、插入日期 在对象面板中选择按钮，在页面中点击， 会弹出对话框，可以设置日期格式、星期 格式、时间格式，点击“OK”，就会在页面 中自动加上时间。九、插入Flash对象 1插入Flash影片 2 3,十、表格的应用1插入表格 2表格属性面板
8、表格属性面板中的设置项对整个表格起 作用，如果想对表中的某一行单独设置， 首先选中表的某一行，再利用单元格属性 面板进行设置。 3表格的选取 4添加表格内容 5单元格的合并与拆分,十一、 层的应用层是网页中的一种容器，它可定位在页 面上的任意位置，并且其中可包含文本、 图像、表单等所有可直接用于文档的元素。 1创建层 2层的大小调整 3层的移动 4层的属性面板 5层控制面板 6层的动态效果,十二、框架的应用创建普通框架集 利用框架属性面板来设置该框架是否要 边线以及边线的颜色、边线宽度、框架的 名称和框架中所要显示的源文件。 可以查看框架集的文件的源代码，这里 面只保存了框架信息和它所对应的源
9、文件。,十三、行为面板的使用通过行为面板可以在网页上制作出一些 简单的交互效果。行为由两个部分组成， 即事件和动作，通过事件的响应执行对应 的动作。 事件是用于指明执行某项动作的条件， 动作实际上是一段执行特定任务的预先写 好的JavaScript代码，如打开窗口、播放声 音等都是动作。,十四、模板的运用1准备模板 2定义区域 3应用模板,各项功能介绍,1 .整体主菜单简介:,档案:其具体功用,1.开启新档 : 用来建立一个新的设计版面 2.开启旧档 : 用来打开已经存在的页面 3.存储 : 用来保存正在编辑或已经编辑完成的页面 4.另存新檔 : 见将正开启的页面保存为其它新的页面 5. ,编
10、辑 : 其具体功用,1.还原 : 撤消上一步的具体动作 2.重做 : 撤消还原的动作 3.剪下 :剪下选定的内容 4.贴上 :贴上剪下选定的内容 5.复制 :复制剪下选定的内容 6.清除 :清除选定的内容 7. ,检视 :其具体功用,1.程序代码 : 在编辑页面显示出来是html语言和其它源程序 2.设计 :在编辑页面显示出设计直观效果 3.程序代码和设计 : 上述二者兼有 4.表格模式 : 用来设计的三种样式 5.尺归 ,网格线 : 在编辑文档时的辅助标尺 6. ,插入 :其具体功用,1.标签 : 用来插入特定的html语法标记.如: - , - 2.影像 : 用来插入特定的图片 3.表格
11、:用来在特定位置插入一表格 4.超链接, 邮件 : 用来在特定位置插入超链接和邮件 5. ,修改 :其具体功用,1.页面属性 : 指修改页面的宽,高等等 2.表格 :指修改页面中表格的具体元素.如: 栏和列的数目 3.影像 :指修改页面中需要更改的图片 4.排列顺序 :指修改页面中文字和图片或其它元素的排列顺序 5.对齐 :指页面中特定元素的对齐方式 6. ,文字 :其具体功用,1.对齐 : 指将页面中文字以一特定参考物来对齐 2.大小 :指改变页面中选定文字的大小 3.颜色 :指改变页面中选定文字的颜色 4.字体 :指改变页面中选定文字的字体 5.样式 :指改变页面中选定文字的样式 6. ,
12、窗口 : 其具体功用,1.插入 : 用来显示插入特定标记 2.属性 : 用来显示属性面板 3.CSS样式 : 用来显示CSS属性面板 4.图层 : 用来显示图层属性面板 5.行为 : 用来显示行为属性面板 6.组件 : 用来显示组件属性面板 7.资源 : 用来显示资源属性面板 8. ,建设网站大概步骤,1. 对网站整体进行需求分析 1. 规划整个网站的布局 2. 搭建整个网站的框架 3. 制作整个网站的模板,配置网页 4. 撰写程序代码,填充整个网站的可编辑区域 5. 建立动态网页 6. 附上必要的版权标识 7. 对整个网站进行测试,修改 8. 网站的上传,规划整个网站,根据网站的整体功用进行
13、需求分析, 得 出需要将网站分成六大模块, 然后对整个网 站架构进行构思, 设计出六大相关菜单选项 和有关模块 , 然后进行相关草图设计与制 作及对相关模块进行程序开发.,新建网站站点,对于DreamWeaver MX可按照如下步骤建立 网站： （1）选择菜单中的“网站”“管理网站”-“新增”，就会弹出“网站”的对话框； （2）选择“网站”“管理网站”-“新增”-“网站”，会弹出“定义站点”窗口，输入站点名称和站点位置，其它选择默认值，就可以了。,搭建整个网站的框架,制作网站模板配置网页,1 . 将网站框架页面另存为模板即可 , 即“档案”-“另存为模板”. 2 . 配置可编辑区域 , 即选取
14、特定区域 后, 按如下步骤执行即可. “插入”“模板对象”“可编辑区域”. 效果如下:,菜单设计架构图,图(一),各部分详细菜单 : 综合查询 : 文件窗体查讯 , 签核状况查询 综合窗体 : ISO文件 , 窗体目录 , 窗体总览 , 共享窗体 , 标准书 申请作业 : 提出申请 牵核作业 : 签核处理 , 签核查询 法律文书 : 雁过留声 : 管理登录 :,菜单和弹出菜单制作过程,(一) 菜单的制作过程 首先选取表格控件 , 在预定栏内填取所要制作框架的数字. 具体祥情如图(二)所示 :,(二). 弹出菜单的制作过程 1 . 在已制作好的菜单中选取特定的菜单选项, 制作为超链接, 选取该选
15、项 , 打开 “窗口 ”-“标签检测器”-”行为”, 点击 “+”,选取“显示弹出式选单”,具体过程如图(三)所示 :,接着在弹出表框中填入特定子菜单选项,如下图所示 :,最终效果如下图所示 :,充实网页内容美化页面,1 . 到不同的可编辑区域填充相应的内容 2 . 根据整体效果来美化页面 3 . 建立不同的动态页面 4 . 附上相应的版权标识,最终效果图,需要注意的一些细节问题,在动手做一个网站之先,需做系统需求分析,规划 网站的拓朴 结构图; 2. 在制做设计的过程中,应避免页面色彩过多,字体 太乱; 3. 当预计整个网站的页面超过30页时 , 最好套用模 板,方便以后 的维护; 4. 在制作页面的过程中,尽量避免用到“层”, 这是为 了防止在不同的分辨率中出现页面错乱的情况; 5. 在运用图片的时候,应避免用到过大的图片, 图片 过大时应将其分割成小图片,以加快下载速度.,6. 在设置网站的目录结构时，需要注意到几点: （1）不要使用中文名字的目录名。 （2）不要使用过长的目录名。 （3）尽量使用意义明确的目录名，尽量做到 “见名知意”。 （4）目录的层次不要太多，建议不要超过3层,
