网页设计工具

第四章网页设计工具Dreamweaver的使用2主要内容4.1操作界面介绍4.2基本操作4.3构建站点和管理站点4.4模板4.5布局表格4.6层、行为、导航条4.7TimelineDreamweaver的使用34.1操作界面介绍在Windows中首次启动Dreamweaver时，会出现一个对话框，您可以从中选择一种工作区布局。并可以使用”编辑”菜单－“首选参数”对话框切换到一种不同的工作区。设计人员工作区是一个使用MDI（多文档界面）的集成工作区，其中全部“文档”窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。建议大多数用户使用此布局。Dreamweaver的使用44.1操作界面介绍一、主要界面与基本操作Dreamweaver的使用54.2基本操作1、新建网页（注意建完先保存）2、页面设置3、字体排版4、超链接编辑5、清单和表格6、插入图片、绘制热点7、创建框架网页Alt＋点击框架，设置框架页的属性设置每个框架的name属性，实现框架之间的跳转Dreamweaver的使用6框架新建－－修改－－框架页－－－进行相应拆分可按住alt键，点框架边，建新框架可拖动框架到父框架边缘，取消框架设置框架集属性：点击框架分割边，设置对应框架集的属性边框有或无、边框宽度、颜色等框架大小设置框架属性：alt＋点击对应的框架页，属性面板中设置属性设置显示的源文件框架名称设置每个框架的name属性，实现框架之间的跳转实例：sy3/3-3frameset.htmlDreamweaver的使用74.3构建站点和管理站点1、定义站点在在菜单栏选择“站点”|“管理站点”选项，弹出“管理站点”对话框，点击“新建”，按照提示进行设置。2、编辑站点和操作站点将站点连到FTP服务器上，并进行网页的下载和上传操作。3、删除站点4、创建站点首页编辑站点的首页index.htm，将以往的作业链接到首页中。5、查看站点文件和链接当建立完首页之后，就可以编辑首页，然后添加与其相关的网页，网页之间的相互链接可以通过站点管理器来查看Dreamweaver的使用84.4模板创建模板–空白模板–现有文档另存编辑模板使用模板–创建基于模板的文档–在现有文档上应用模板–将文档脱离出模板Dreamweaver的使用94.5布局表格1、布局设计概述2、常见的几种布局形式3、版面布局设计要求和实例4、使用表格、框架和图层进行布局5、使用布局模式进行布局Dreamweaver的使用104.5布局表格——1、布局设计概述版面：浏览器观看到的完整的一个页面。因各个用户的显示器分辨率不同，同一个页面的大小可能出现800*600像素、1024*768像素等等。目前，1024*768像素占多数。一般分辨率800×600下，页面的显示象素为780×428；在1024×768下，为1007×600。设计中，向下拖动页面是唯一增加页面尺寸的方法，但最好不超过3屏，否则最好在上方做内部链接。布局：指的是以最适合浏览的方式将图片和文字排放在页面的不同位置。布局设计的四个步骤：方案设计：画出页面的结构草图初步设计：把各个功能模块安排到页面上技术设计：确定网站标志、题头和背景图等等。定案设计：精细化、具体化Dreamweaver的使用114.5布局表格——2、常见的几种布局形式1、“┏”型布局①主要为网站标志和广告条②主要为主菜单③主要为内容主窗口①③②杭州旅游集散中心Dreamweaver的使用124.5布局表格——2、常见的几种布局形式2、“┬”型布局①主要为网站标志和广告条②主要为主菜单③主要为内容主窗口④主要为友情链接等②④①③Dreamweaver的使用134.5布局表格——2、常见的几种布局形式3、其他布局盛大在线Dreamweaver的使用144.5布局表格——3、版面布局设计要求和实例1、设计要求整洁大方：各种元素的运用应适度突出重点：突出主体内容平衡对称：页面的上下左右应给人以任意匀称的感觉风格一致：样式统一，配色合理2、实例：详见书P90页面尺寸整体造型页面题头页脚文本与图片Dreamweaver的使用154.5布局表格——4、使用表格、框架和图层进行布局1、使用表格进行布局如何创建表格、选取表格、修改表格，详见P93－95进行布局设置，详见P95－98布局实例，P98－992、使用框架进行布局框架的创建框架的保存，注意框架集和框架页的保存框架的属性面板和框架集的属性面板框架之间的跳转P1033、使用图层进行布局（自学，P105）--------------要转换为表格Dreamweaver的使用164.5布局表格——5、使用布局模式进行布局1、布局模式2、绘制布局表格和布局单元格3、编辑布局表格和布局单元格4、使用网格5、内容添加，制作主页Dreamweaver的使用17绘制布局单元格4.5布局表格——5、使用布局模式进行布局1、布局模式标准视图绘制布局表格布局视图若要使用布局表格和布局单元格，必须进入布局模式，在布局模式下，仅可以进行布局，不可编辑网页内容。Dreamweaver的使用184.5布局表格——5、使用布局模式进行布局2、绘制布局表格和布局单元格P107信息提示课程介绍信息分类756px105px45px190px180px564px19pxDreamweaver的使用194.5布局表格——5、使用布局模式进行布局3、编辑布局表格和布局单元格P108Dreamweaver的使用204.5布局表格——5、使用布局模式进行布局4、使用网格P110Dreamweaver的使用214.5布局表格——5、使用布局模式进行布局5、内容添加P111Dreamweaver的使用224.6层和行为一、层层是网页中的一种容器，它可定位在页面上的任意位置，并且其中可包含文本、图像、表单等所有可直接用于文档的元素。1．创建层2．层的大小调整3．层的移动4．层的属性面板5．层控制面板6．层的动态效果Dreamweaver的使用234.6层和行为1．创建层(1)在「窗口」菜单＞选“层”，或点「插入」菜单＞布局对象＞选“层”。(2)在页面中显示一个层。(3)通过周围的黑色调整柄拖动控制层的大小(4)拖动层左上角的选择柄可以移动层的位置。(5)单击层标记可以选中一个层。(6)在层中可以插入其他任何元素包括图片文字链接表格等。一个页面中可以画出很多的层，这些层都会列在层面板中。层之间也可以相互重叠。层面板可以通过菜单「窗口」菜单＞选“层”打开。Dreamweaver的使用244.6层和行为二、行为行为是在网页中进行的一系列动作。行为包括事件和动作组成，是Dreamweaver最具有特色的功能之一。事件是用于指明执行某项动作的条件，而动作实际上是一段执行特定任务的预先写好的javaScript代码，如打开窗口、播放声音等都是动作。常见事件的一些解释onClick单击；onDbclick双击onKeypress按键；onMouseDown鼠标按下onMouseOut鼠标移出；onMouseOver鼠标移上onMouseUp鼠标抬起。Dreamweaver的使用25例如：显示、隐藏跳舞小人要素：一张图片、一个层（层内贴入跳舞小人）实施步骤：1）在层面板中，将该层设置成为隐藏（点击眼睛使其闭眼），可使该网页打开时不显示该层。2）单击图片，打开行为面板（「窗口」菜单＞行为）。在行为面板按“+”号，在弹出菜单中选中显示-隐藏层。3）其中设置onMouseOver事件为显示层，onMouseOut事件为隐藏层。应用示例1：显示和隐藏层Dreamweaver的使用26例如：在网页打开时同时弹出另外一个窗口如广告窗口。在设计窗口状态栏中选中Body标签选择打开浏览器窗口行为，可设置弹出的新窗口的某些属性。使用onLoad事件，弹出新窗口。应用示例2：打开新窗口Dreamweaver的使用27单击图片按钮，加入一幅原始图片，并设置标识名；按“+”号按钮选择“交换图像”，在弹出的对话框中，选择用以切换的另一图像文件名，并选中“预先载入图像”和“鼠标滑开时恢复图像”；由于指定了恢复初始图象的选项，在Behavior对话框中已经自动地增加了两个事件；当onMouseOver时，交换图像事件被触发；当onMouseOut时，交换图像恢复事件被触发。应用示例3：切换图片Dreamweaver的使用28要素：主菜单（文字、表格）实施步骤：（1）为主菜单的文字设置超链接，因为单独的文本文字是无法添加行为的，按照Dreamweaver中的约定，将文字的超链接设置为“JavaScript:;”才能够添加弹出菜单这个行为。（2）设置菜单项和子菜单项，并为菜单设置超链接，然后安排好各个菜单的次序.（3）主要步骤见下图：应用示例4：弹出菜单制作Dreamweaver的使用29Dreamweaver的使用30Dreamweaver的使用314.7TimeLineDhtml通过Jscript或Vbscript语言来改变样式和位置的特性。Timelines利用Dhtml所提供的这项功能，随着时间的改变通过一系列连续的帧变换层的特性以形成动画。（1）创建Timeline将图像插入到层中，选中层，点击右键，选择“添加到时间轴”拖动时间轴到终点时间，而后再拖曳图片，将其拖至终点位置。在相应时间点插入关键帧，并将图片拖曳至对应位置。（2）设置Timeline（3）为时间轴添加行为。Dreamweaver的使用324.8其他效果设置1．Dreamweaver中加入竖直线的办法应用表格应用HR标记(宽width，高size，颜色color)2．制作电子相册——利用FlashElement这个功能图标（1）首先在Dreamweaver的菜单栏下找到FlashElement这个功能图标:（2）.选择这个按钮之后，在Dreaweaver中生成一个Flash文件，需要制定这个自制的Flash文件的保存位置。Flash文件在网页中的大小，可以随意调节。Dreamweaver的使用334.8其他效果设置Dreamweaver的使用344.8其他效果设置（3）设置属性：右边Tag面板中CSS的变化，其中增加了ImageLinks和ImageURLs两个选项。ImageLinks：若图片需要指向其它的文件做链接，要在ImageLinks添加链接的地址ImageURLs：图片的来源位置（4）设置图片的来源位置选中ImageURLs，在旁边有一个小图标的下拉菜单，点击之后出现一个对话框，这里我们输入图片的来源位置Dreamweaver的使用354.8其他效果设置（5）设置链接，在ImageLinks中使用与ImageURLs同样的操作，在链接设置对话框中它默认了三个指向Macromedia的链接地址，每个地址和图片来源的文件是相对应的，按照顺序输入地址就行。Dreamweaver的使用364.8其他效果设置（6）其他参数设置：BgColor是设置相册的背景颜色；ImageCaptions是填写相册名；TitleFont是设置相册名的文字字体；TilteSize是设置相册名文字大小；TranstitionsType是设置图片出场方式的效果，在下拉菜单中有很多特效。Dreamweaver的使用37添加背景音乐－－需要插件支持Iframe关于时间轴插件的行为