DreamweaverMX讲义.doc

DreamweaverMX讲义Dreamweaver是Macromedia公司的出品的一款所见即所得的网页编辑工具。直观性与高效性是Frontpage所无法比拟的。与Flash、Firework 并称为 Macromedia的网页制作三剑客。一建立站点及主页1在硬盘建立文件夹，放置网站所有的文件。如在D盘 文件新建文件夹 ，为文件夹命名为： site1 2在文件夹site1下建立两个子文件夹分别为： swf （放置flash动画），html （放置网页）， image （放置图片，图片格式为*.jpg, *.gif）， 把事先做好的动画拷贝粘贴到文件夹（swf）中，把图片拷贝粘贴到文件夹（image）中。或是在制作图片和动画的时候直接输出到这两个文件夹中。3打开 dreamweaverMX ， 选择“dreamweaverMX工作区模式”， 站点站点文件打开站点管理面板。4在站点窗口中选择菜单命令，站点新建站点，在站点定义对话框中为网站命名，“把文件存储在计算机的位置”，选择D盘文件夹 site1为网站的目录。点击 下一步不连接远程服务器的话就选择无，完成5在站点窗口右键点击根目录“站点”，选择 新建文件 ，为文件起一个名字，例如“index.htm”。将网站的主页（第一页）命名为index.html或 index.htm 。6设置页面属性： 双击打开新建的index.htm，编辑网页。选择菜单命令修改 页面属性设置一些必要的网页面。标题，背景图片，背景：选择背景颜色， 文本：文字颜色二建立各内容页9建立第一大类的内容网页文件，在站点窗口右击 html ，选择 新建文件，为文件起一个名字，例如是“photo1.htm” ，“photo2.htm”。10建立第二大类的内容网页文件，在站点窗口右击html，选择 新建文件，为文件起一个名字，例如“flash1.htm” ，“flash2.htm”。 双击分别打开各个网页，进行以下所介绍的各种网页页面的操作，如打字，插图，插入动画。三、网页页面编辑：1、页面布局安排，可利用表格及层。还可进入布局视图，绘制表格和单元格，绘制好布局后再回到标准视图。2、插入表格 宽度：百分比：占浏览窗口的百分比，随浏览器窗口的大小而改变 像素：大小不变。 行、列的选择，整个表格的选择，相邻单元格的选择。单元格的合并、拆分。3、层 绘制层，层的属性面板：编号，显示（可见，不可见），背景图像。 层的控制面板：窗口其它层，改变层的叠放顺序。4、输入文字。CSS样式：可以一次修改所有的网页属性。文本CSS样式，定义字体属性，背景等等。 应用CSS样式，编辑，删除。5、插入图片点击对象面板上的 按钮，选择需要插入的图片，选择一个图片文件，如果该文件是网站目录以外的文件，系统就会问是否将图片复制到网站内，选择“是”。 接着，选择图片在网站的目录 “Images”。 或者直接从站点管理窗口中把图片文件拖到网页中。6、建立超级链接A、文字链接在页面中选取需要建立链接的文字，在属性面板的链接一项，填写链接地址。如果希望该页面是在一个新窗口打开，可以在目标中选择“_balnk”。如果要链接到网站内的文件，可以点击 浏览文件，也可点击直接指向站点窗口中的文件。B、图片链接选择图片，定义链接的步骤与文字的相同。C、热区链接：一张图可对应多个链接。选取一张图片后，可以在属性面板看到Map选项： 创建矩形热区， 创建原形热区， 创建多边形热区。在图片上绘制热区：同样地，在 链接 输入链接地址（“#”表示一个空链接）。如果要链接到一个E-mail地址，则在 链接 处填写：“mailto:地址”。D、命名锚点的应用 相当于书签，可在同一网页上实现跳转。当网页页面过于冗长时，可在网页最上端建立命名锚点，进行锚点链接。（1）输入提纲文字“教学要点” （2）选中网页下方的“教学要点”详细内容的第一行，建立锚点插入命名锚记 输入文字“1” （3）选中提纲文字“教学要点”，在属性面板上的 链接 输入“#1”。E、跳转菜单：也即一个下拉菜单，每个选项都链接了文件。 在对象面板的表单选择“插入表单”，再选择“插入跳转菜单”在对话框中的 文本 中输入菜单选 项的名称； 选择时，前往 URL 选择链接文件。增加多个则单击左上方的 。7、时间轴动画1、在网页中先拖出一个层，放置图片或输入文字。调出时间轴面板 .窗口其它时间轴.2、对准图层的边框点击，使其外面出现黑色小块，选中该图层，右击鼠标选择命令添加到时间轴 ，在时间轴上用鼠标点击最后的关键帧，把图层拖到最后移动的定点。可以看到屏幕上有一个表示移动路径的线。还可增加关键帧，调整移动路线。选择自动播放，循环8、创建表单 交互式表单的作用是收集客房端信息。包括文本框（text fields）、按钮（buttons）、复选框（checkboxes）、单选框（radio buttons）列表/菜单框（list/menu）、图片框（image fiedlds）、跳转菜单框（Jump menu）、隐藏框（hidden）。这些是表单元素，必须存在于（Form tag）内。A、表单标记符（Form tag），属性面板：Action：表单的处理事件，即表单填完后怎样处理填写的资料，是通过E-mail 发给网页创建者，还是把填完的资料交给服务器端的CGI程序处理。B、在表单标记符内，（1）输入文字“姓名：”在后面插入文本框；（2）输入文字“E-Mail：”在后面插入文本框；（3）输入文字“性别”在后面插入两个单选框，分别在后面输入“男”“女”（4）输入文字“职业”在后面插入列表/菜单框，输入“教育业”“金融业”“服务业”，在属性面板上选“list”、“allow multiple”（5）输入文字“兴趣”在后面插入三个复选框，分别在后面输入“绘画”“旅游”“看书”（6）加入启动表单开始传送的按钮。插入按钮，属性面板上“标签”改为“提交”，再插入一个按钮， “标签”改为“清除”，“Actions”设置为“重设表单”。9、插入导航栏 先绘制一些导航栏图标，点击对象面板上的插入导航栏对象，定义图标及超级链接的文件名或网址。四定义第一部分photoshp的框架页框架是用于定义导航区域或内容区域：包括框架系（Frameset）和独立的框架。如果一个页面包括三个框架，则存在4个文件，其中一个是框架系文件，另外3个文件分别存储每个框架的内容。11创建框架，选择菜单命令 文件新建，在常规一栏中选择框架集，并在右边框架集窗口中选择第五种，上方固定左侧嵌套，选择创建。（或者在菜单命令插入框架，选择各项命令，定制自己的框架方式）12改变框架系里各个框架页的页面属性，按住键盘上的Alt键，同时用鼠标点击相应的框架页， 在属性面板 可修改各个页面的属性。（为选择相应框架页，也可在菜单窗口其它框架显示框架布局视图） 指定框架名称、框架内的源文件、是否显示滚动条。不能调整大小不允许用户通过拖曳缩放框架13保存整个框架页，文件保存全部，一共保存四个文件，保存文件时要注意保存在站点下的文件夹html。观看屏幕上虚线框在哪一个部分就知道当前保存的是哪一个文件，一般来说，首先保存的是整个框架系，输入文字photo-main ，接着保存右边的框架页，输入名字photo-right，保存左边的框架页，输入名字photo-left，保存上边的框架页，输入名字photo-top。14在上面的框架页里点击鼠标，插入表格，行数：1，列数：2，在左边的单元格里放入网站的标志动画或文字图片。在右边的单元格里再插入表格，行数：1，列数：4，在单元格里输入第一级菜单，如photoshp，flash之类的文字。15在左边的框架页里插入表格，“行数：5，列数：1”，输入第二级菜单，如“图片1”，“图片2”。16选择文字“图片1”定义超级链接，在属性面板上点击链接旁边的黄色按钮，在站点文件夹“site1”中选择网页“photo1.htm” ，目标项中选择“mainframes”。选择文字“图片2”定义超级链接，在属性面板上点击链接旁边的黄色按钮，在站点文件夹“site1”中选择网页“photo2.htm” ，目标项中选择“mainframes”。五定义第二部分flash的框架页17重复步骤1114，只不过在保存框架页时把名字换为 flash-main，flash-right，flash-left，flash-top 。18在左边的框架页里插入表格，rows：5，columns：1，输入第二级菜单，如“动画1”，“动画2”。16选择文字“动画1”定义超级链接，在属性面板上点击链接旁边的黄色按钮，在站点文件夹“site1”中选择网页“flash1.htm”，目标项中选择“mainframes”。选择文字“动画2”定义超级链接，在属性面板上点击链接旁边的黄色按钮，在站点文件夹“site1”中选择网页“flash2.htm”，目标项中选择“mainframes”。六定义框架系之间的跳转18打开第一部分框架系 photo-main.htm，选择上面框架页里的文字photoshp，在属性面板上定义超级链接，连接到 photo-main.htm，也即跳转到自身部分，目标项中选择“_parents”。再选择文字flash定义超级链接，连接到 fl