1、电子商务网站外 观设计与内容编辑,第四章,本章内容,6.1 FIREWORKS操作篇 6.2 FLASH操作篇 6.3 DREAMWEAVER操作篇,Fireworks MX操作,制作图像切片制作图片羽化、模糊、减淡等效果制作旋转五角星将图片或GIF动画导入Dreamweaver各种Logo的设计与编辑不规则图片的编辑与导出 ,Flash MX操作,图形、对象的移动 图形、文字对象的变形 翻转图片 滚动图片 层遮罩 多图层、多对象运动编辑 影片导出 ,Dreamweaver MX简介,Dreamweaver MX是Macramedia公司最新发布的集网页设计、代码开发、网站创建和管理于一体的软
2、件。他保留了早期Dreamweaver个版本的优点,在此基础上,提供了可视化的布局工具、快速的web应用程序开发以及广泛的代码编辑支持,新增对ASP、JSP、ASP.NET、PHP等动态网页的支持,也可实现完整数据库的编写。,几个注意点,在视窗设置框中显示的当前文档窗口的大小都是以像素为单位的; 工作区窗口八大功能块; 浮动面板组个浮动面板的功能;,注意:1、在网页设计时,不要用中文作为文件名或文件夹名;2、网页文件命名区分大小写字母;3、每个网站都只有一个首页,首页一般命名为index.htm4、首页应放在跟文件夹下。 创建站点地图站点地图是提供本地站点结构的高度可视化的表现形式,可用于管理
3、站点内的文件和目录,对站点内的文件进行改名、编辑和删除等操作,也可完成添加、删除、更改站点内超链接等操作。 站点中的文件操作,创建本地站点,网页文件的基本操作,创建、打开、保存、关闭网页 页面设置、网页对象颜色设置 网页文本的输入和属性设置 网页图片的插入和属性设置,网页编辑的基本操作,在网页中插入各种元素水平线、日期、flash按钮和文字、Java Applet程序、ActiveX控件、第三方插件(java applet程序的扩展名为.class) 建立网站相册 利用外埠编辑器编辑图像 创建鼠标经过图像鼠标经过图像由主图像和翻转图像两部分组成,创建超链接,超链接概述是在源端点和目标端点之间建
4、立一种链接。源端点:超文本链接和非超文本链接目标端点:外部链接、内部链接、电子邮件链接、局部链接、脚本链接 在超链接中,连接路径是通过URL来确定的。常用形式有:HTTP FTP File 绝对路径:使用完整地URL地址的连接路径 相对路径:指明目标端点和源端点的相对位置的路径,源锚,目标锚,6种创建超链接的方法: 在站点管理器中编辑超链接 创建锚点链接 创建电子邮件链接 创建导航条 创建跳转菜单 创建映射图链接,创建表格的基本操作,建立表格 设置表格和单元格的属性 选取表格和单元格 表格的嵌套 改变表格或单元格的大小 表格行、列的增加和删除 单元格的拆分和合并 单元格的复制、粘贴、移动和清除
5、 表格格式化,层的创建和基本操作,创建和删除层 激活和选中层 调整、移动和对齐层 设置层的属性 层的控制和操作,层与表格互换,优缺点:表格转换为层 层转换为表格,框架的基本操作,框架概述框架、框架集 创建框架与框架集 框架的调整、拆分和删除 框架和框架集的选择 框架和框架集的属性设置 框架和框架集的保存,行为面板及使用方法添加和修改行为行为的简单应用内置动作内置事件 使用时间轴面板 创建时间轴动画 生成和编辑动画路径 在时间轴中加入行为,行为和时间轴,层叠样式概述,四种格式化文档的方法层叠样式的优点:方便修改网页的格式提高网页的设计效率使得网页的风格比较统一减少网页的体积网页元素更加容易定位缺
6、点:低版本的浏览器无法支持它,层叠样式表的创建与编辑,创建和编辑层叠样式 创建和编辑层叠样式表,层叠样式创建应用,创建名为.char1的层叠样式,并将这个样式定义在新建的docformat.css的层叠样式表文件中。设置:字体为“方正舒体”,大小为“36像素”,样式为“斜体”,颜色为“#ff0000”,修饰为“闪烁”。,层叠样式表的应用,滤镜的概述透明度滤镜(Alpha)语法格式: filter:Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?, StartY=?, FinishX=?, FinishY=?)例:参数分别为100,0,2,0,0,
7、400,300,透明度滤镜的应用例:在本地站点中,分别建立名为exa1.htm和exa2.htm的Web页面,完成:(1)在网页exa1.htm合适位置创建大小为40070像素的层1和400 300的层2,在层一种输入文字“书人生的伴侣”,层2中插入图片。(2)创建css样式表format.css,并分别设置样式.char1和Filter,并分别应用于层1和层2,保存预览。(3)打开exa2.htm同(1),然后链接外部样式表abcde.css,分别作用于层1和层2,保存预览。,显示滤镜的应用混合blend滤镜、显示reveal滤镜语法格式分别为: filter:blendTrans(dura
8、tion=时间数值)filter:revealTrans(duration=时间数值,transition=过渡类型)例:参数分别为5,10,023数值,模糊滤镜的应用模糊Blur滤镜语法格式分别为: filter:Blur(Add=add,Direction= direction,Strength= strength)例:参数分别为true,135,20,翻转FlipH FlipV滤镜的应用波浪滤镜的应用波浪wave滤镜语法格式分别为: filter:Wave(Add=add,Freq=fred,LightStrength= lightStrength,Phase= phase,Streng
9、th= strength)例:参数分别为1,3,70,50,10,(波纹频率),(波纹增强光的效果),(波纹偏移量),(振幅大小),Chroma滤镜:制作专用颜色透明(颜色参数)DropShadow滤镜:创建对象的固定影子语法格式分别为: filter: DropShadow(Color=?,OffX=?,OffY= ?, Positive= ?)例:参数分别为gray,5,5,1Glow滤镜:在附近对象的边外加光辉语法格式分别为: filter: DropShadow(Color=?, Strength= ?)例:参数分别为#ff0000,5,Gray滤镜:把图片灰度化Invert滤镜:反色
10、Light滤镜:在对象上创建光源Mask滤镜:在对象上创建透明掩膜(颜色参数)Shadow滤镜:创建偏移固定影子语法格式分别为: filter: Shadow(Color=?, Direction= ?)例:参数分别为#ff0000,45,交互式表单概述,表单技术可以实现浏览者与internet服务器之间信息交互传送 两个组成部分:由Dreamweaver MX生成的表单的页面;用于处理浏览者在表单域中输入信息的服务器端应用程序或客户端脚本。,设计和创建表单的一般步骤,决定要收集的信息,然后开始表单设计在表单中添加表单对象设置表单对象的数据输入规则设置表单信息的处理方式,创建表单及表单对象,创建表单的文本框 创建表单的单选按钮 创建表单的复选框 创建表单的列表框 创建表单的提交和重置按钮 其他表单域的应用,