DreamweaverMX讲义

1DreamweaverMX讲义Dreamweaver是Macromedia公司的出品的一款所见即所得的网页编辑工具。直观性与高效性是Frontpage所无法比拟的。与Flash、Firework并称为Macromedia的网页制作三剑客。一．建立站点及主页1．在硬盘建立文件夹，放置网站所有的文件。如在D盘文件新建文件夹，为文件夹命名为：site12．在文件夹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、输入文字。2CSS样式：可以一次修改所有的网页属性。文本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、创建表单交互式表单的作用是收集客房端信息。包括文本框（textfields）、按钮（buttons）、复选框（checkboxes）、单选框（radiobuttons）列表/菜单框（list/menu）、图片框（imagefiedlds）、跳转菜单框（Jumpmenu）、隐藏框（hidden）。这些是表单元素，必须存在于（Formtag）内。A、表单标记符（Formtag），属性面板：Action：表单的处理事件，即表单填完后怎样处理填写的资料，是通过E-mail发给网页创建者，还是把填完的资料交给服务器端的CGI程序处理。B、在表单标记符内，（1）输入文字“姓名：”在后面插入文本框；3（2）输入文字“E-Mail：”在后面插入文本框；（3）输入文字“性别”在后面插入两个单选框，分别在后面输入“男”“女”（4）输入文字“职业”在后面插入列表/菜单框，输入“教育业”“金融业”“服务业”，在属性面板上选“list”、“allowmultiple”（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”。416．选择文字“图片1”定义超级链接，在属性面板上点击链接旁边的黄色按钮，在站点文件夹“site1”中选择网页“photo1.htm”，目标项中选择“mainframes”。选择文字“图片2”定义超级链接，在属性面板上点击链接旁边的黄色按钮，在站点文件夹“site1”中选择网页“photo2.htm”，目标项中选择“mainframes”。五．定义第二部分flash的框架页17．重复步骤11－14，只不过在保存框架页时把名字换为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定义超级链接，连接到flash-main.htm，目标项中选择“_parents”。19．选择第一部分框架系photo-main.htm上面框架页里的整个表格，点击菜单命令编辑拷贝20．打开第二部分框架系flash-main.htm，用鼠标点击上面框架页，点击菜单命令编辑粘贴七．从主页跳转到内容21．双击打开index.htm，点击文字或图片，定义超级链接，连接到photo-main.htm，目标项中选择“_parents”。