网络编辑实训教程-第7章网页制作软件介绍

1、第七章 网页制作软件介绍7.1 网页制作软件基础知识7.2 网页制作软件Dream Weaver7.3 网页动画制作软件Flash7.4 HTML语言简介71.网页制作软件基础知识一、网页设计的基本流程二、网页版面布局设计三、网络版面设计原则返回主目录一、网页设计的基本流程考虑因素：文字、图像、声音、动画等因素网页设计的五个环节：I.分析II.设计III.制作IV.测试V.维护返回网页制作的五个环节分析分析对象：网站将要服务的目标群体。分析内容：特征，可能的需求分析的作用：确定网页信息内容及其功能设计网页制作的五个环节设计重要性：关系用户对网页的接受与利用程度主要内容：1. 网页素材2. 网页

2、的内容结构3.连接方式（一般选用层次清晰、易于浏览 的树形结构）4. 网页模型的可视化设计 网页制作的五个环节制作利用网页制作工具完成网页制作工作。常用工具：Dream Weaver网页制作的五个环节测试测试内容：速度、兼容性、交互性、链接正确性、排版和内容错误、程序安全性、抽流量测试测试目的：发现并解决问题网页制作的五个环节维护网站建立是一个不断完善和改进的过程。维护工作的内容： 根据不同时期的需求实时调整网站的发展方向及设置的内容 收集外部反馈 进行王怀忠那内容及网络安全的维护二、网页版面布局设计常见的物种网页布局形式1.“同”字形布局内容布局类似“国”字2.“国”字形布局由“同”字形演化

3、而来页面下方增加一横条状菜单或广告。3.“匡”字形布局去掉“国”字形右边的边框部分，释放更多住内容区。适用于下载类和贺卡类站点使用。4.“三”字形布局采用简单的图片和线条代替拥挤的文字，给浏览者留下强烈的视觉冲击。适用于艺术性网页布局。5.“川”字形布局垂直方向散列布局，网站内容按栏目分布于三列 中，最大限度地突出主页索引功能。一般适用于栏目较多的网站。 返回三、网页版面设计原则突出特色显示出本网站与其他网站不同的整体素质和格调重视新闻高质量的新闻可带来巨大的浏览器量，使网站更受欢迎合乎逻辑内容布局要有序、相互配合，合乎逻辑。返回7.2网页制作软件一、DreamWeaver简介二、DreamW

4、eaver的优点返回主目录二、Dream Weaver的优点最佳的制作效率便捷的网站管理超强的控制功能返回一、Dream Weaver简介Dream Weaver由Macromedia公司推出，现为Adobe旗下产品特点1. 所见即所得，可制作出跨平台和浏览器的动感网页。2.集成功能强大的网站管理系统。3.不生成冗余代码，方便的代码编辑4.强大的动态支持5.精确的层定位6.操作简单7.提供了与很多其他插件兼容的多哦如机制，节省了开发者的劳动，便于扩展等。版本情况：目前最新版为CS6（于2012年4月发布），使用比 较多的是8.0，其次是CS5、CS4。“网页三剑客”：Dream Weaver、

5、Flash、返回7.3 网页动画制作软件Flash一、Flash简介二、Flash的功能三、Flash的特点四、Flash的基本界面五、新建与保存文档六、Flash动画的导出七、Flash动画的发布返回主目录一、Flash简介矢量动画制作软件可以做什么？1. 制作简单的动画、web交互程序可创建任何作品2. 添加图片、声音、视频和特殊效果构建丰富的Flash 应用程序。Flash文档组成：舞台、时间轴、库面板、Action Script代码 返回二、Flash的功能基本功能包括以下三种：1.绘图功能可完成图形绘制、特殊字形处理等方面工作。2.动画功能即使没有绘画基础也可以是使用Flash提供的

6、动画工具从外部倒入图像，制作出票连的动画。3.编辑功能制作交互动画不可少的部分。返回三、Flash的特点使用矢量图形和流式生意播放技术。可融合声音、动画、声效于一体，制作出令人惊奇的动画效果，同时支持MP3 音乐格式，使动画文件保持小巧身材。强大的动画编辑功能，可随心所欲的设计制作出高质的动画。返回四、Flash的基本界面Flash 基本界面包括以下内容： 标题栏 菜单栏 工具栏 时间轴 浮动面板 面板属性 编辑区返回五、新建与保存文档新建文档 方法：“文件”“新建”命令或按“Ctrl+N”组合键，可打开“新建文档”对话框，如图所示： 然后单击“Flash文件（Action3.0）”等选项，再

7、单击“确定”按钮也可新建Flash CS4文档文档的保存 保存方法：Ctrl+S，也可以使用工具栏上的“保存”按钮进行保存。返回六、Flash动画的导出Flash可以导出多种格式，本教程只介绍两种1. 导出为.SWF2.导出为GIF动画由于不同版本的导出过程会有所区别，这里不做详细的赘述。返回七、Flash动画的发布.SWF格式的文件必须要安装插件，若无插件则可以将.swf格式动画转化为.exe格式。注意：.exe比.swf大一些。若要将Flash动画发布为html页面，则需建立一个可以激活动画的html文档返回7.4 HTML语言简介一、标记语法和文档结构二、案例剖析三、字体与颜色四、超链和

8、URL五、图像、声音、视像和动画六、列表结构和预编排结构返回主目录一、标记语法和文档结构Html标记总是封装在“”内标记分类1.单标记 特点：只需单独使用即可完整的表达意 思。 语法：2.双标记 特点：必须成对使用。 语法：内容标记属性 语法： 各属性无顺序之分，属性也可省略（使用默认值）文档结构 头部信息 文档主题，正文内容 返回二、案例剖析如下源代码： Sample Html Document A sample HTML DocumentTo Demostrate HTML Style The document is written by HTML. At here to brake li

9、ne.Here is bold text Here is the next paragraph. 代码效果返回案例剖析源码分析标题文本作用：标明文件的总标题， 出现位置：一般出现在标 记中。：注释内容不会在浏览器中显示。文本：为一级标题，标题可分为六级， 随着级数的增加，标题字体依次减小。:表示在正文中换行三、字体与颜色常见的字体标记 你好：粗体； 你好吗：斜体； 好：定义长宽度字体； 以上属于无理意义上的标记，指明了属于 哪一类型的字体。 好：突出显示，并不指明怎样突出 发，而是让浏览器自行决定。大多数浏览器将 它处理为斜体。 类似的逻辑标记还有： 重点突出显示 按地址类型显示 按代码类型显

10、示以上标记只是定义字体的形状，而并不能改变字体的大小。若要该百年字体大小可以正文标题标记，或字体size属性。返回三、字体与颜色实例代码四、超链和URL（页面链接标签）在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有两种方式：相对路径与绝对路径。链接到其他页面1. 相对路径指定从根目录到文件的完整路径。2. 绝对路径指定相对于当前文件的文件位置。返回超链和URL（页面链接标签）要链接到同一目录 (C:HTML) 下的页面，可编写 或 相对路径名绝对路径名四、超链和URL（页面链接标签）演示示例：演示锚链接的例子 使用锚记标签超链和URL（页面链接标签）链接到本页面1.

11、锚记标签用于使用户“跳”到文档的某个部分2. HTML 的 NAME 属性用于创建锚标记 主题名称3. 为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称演示示例：演示锚链接的例子 链接到其他页面新人上路新人上路指南1、定义锚标记2、链接到锚标记所在位置五、图像、声音、视像和动画HTML支持内嵌式的图像显示。1. 插入图像（图片）标记语法： 2. URL表示图像（图片）的源文件(Source),必须对应一个图片3. 常用的图片格式：.GIF(256色)、.X位图格式(.XBM文件，黑白图像)、.jpeg格式(.jpg、.jpeg格式，支持RGB格式)4. 图片对齐方式：设置Align

12、属性。可以设置的值： 垂直方向：TOP、MIDDLE、BOTTOM 水平方向：LEFT、CENTER、RIGHT5. 若需要图片独占一块区域，则需要在图片前后添加或者6. Web浏览器会在图片链接的四周添加一个边框，若需要清除边框 ，只需设置border=“0”即可。7. 修改图片尺寸：可以设置WIDTH和HEIGHT属性，重新定义图片的尺寸。返回图像、声音、视像和动画声音和视像： Web浏览器自身不能解释声音和视像文件 ，需要其他辅助工具来完成声音和视频的 播放。 一般格式：声音：.wav、.AU、.SND等文件 扩展名。 视像：.avi、.MPG、RMVB、 .wav等格式文件。动画 java可支持内嵌式动画和内嵌式声音。六、列表结构和预编排结构列表结构：有序列表、