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