山西信息职业技术学院毕业设计
来制作精美的网页动画,而Fireworks用来处理网页中的图形。
对于Web图形的创建和优化,Macromedia公司的Fireworks是公认的标准应用程序。fireworks不仅仅是一个图象处理工具,它还是一个全功能的web设计工具。利用fireworks,不仅可生成静态的图象,还可以生成包含有html动态图象,甚至可以编辑整幅的网页。例如,可以在fireworks中直接生成各种分格的动态按钮或轮替图象,或是生成图象映像热区和切片。在将位图导出到网页中的时候,fireworks将会自动的将相应html放置到合适的位置上,从而实现丰富多彩的网页动态效果,避免了用户学习html的麻烦。Adobe~photoshop能实现的功能,fireworks几乎全能实现,而对于Web图形的创建和优化,Macromedia公司的Fireworks是公认的标准应用程序。唯一的区别就是:fireworks是基于整个屏幕的图象处理软件,而Adobe~photoshop是基于出版印刷的图象处理软件。Macromedia Fireworks
设计和处理网上图形的专业工具,
Macromedia Dreamweaver,可视化建立和管理网页及站点的工具软件,2者均提供了创建专业的丰富图象网站的解决方案。除了他们各自独立的能力,Dreamweaver和Fireworks同时提供了让你将他们综合使用来编辑网页和图形的可能性。通过2者完美的结合你能把Fireworks的图形和表格放置到Dreamweaver中,并使用Dreamweaver的工Flash由macromedia公司推出的交互式矢量图和~Web~动画的标准。网页设计者使用~Flash~创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。
Flash用于网页设计和多媒体创作等领域,功能非常强大。使用Flash,可以轻松创建网页上动态、交互的多媒体内容。Flash的应用范围非常广泛,在早期的网页片头、演示动画,到现在的手机彩信,Macromedia一直在立致于使其Flash播放器嵌入到任何的媒体平台中去。展望Flash技术未来的发展,我们可以想像到是在任何的多媒体设备上都将能够观看Flash动画。比如电视机、手机、游戏机等。 Flash强大的功能,加在页面中所表达的信息会更丰富,动静结合,动感中显出生气,使我们本来就已经琳琅满目的WEB世界变得更加多姿多彩。 1.3 网页设计的色彩
人们常常感受到色彩对自己心理的影响,这些影响总是在不知不觉中发挥作用,左右我们的情绪。色彩的心理效应发生在不同层次中。有些属直接的刺激,有些要通过间接的联想,更高层次则涉及到人的观念,信仰,对于艺术家和设计者来说,无论哪一层次的作用都是不可忽视的。对于网页设计者来说,色彩的心理作用尤其重要,因为用网络是在一种特定的历史与社会条件的环境下,即高效率,快节奏的现代生活方式的条件,这需要做网页时把握人们在这种生活方式用网络的一种心理需求。针对不同的主题来布置色彩,如健康类的网页就不能采用较为刺激的大红和黄,橙以及象征死亡和神秘的黑色和紫色,这样会造成一种紧张和某种程度的恐慌,我们的网站就是用清爽单调的颜色为背景,这样就不会造
1
山西信息职业技术学院毕业设计
成太大的视觉疲劳和视觉冲击。 第2章 网站总体分析与设计 2.1网站系统分析
根据前面的设计思想进行分析,按照系统开发的基本观点对网站进行分解,从内容上可对网站作如下划分:
①日志 通过文章的形式来展现。 ②心情 记录当下的心情。
③杂谈 通过论坛栏目来实现,内容有网友的意见和建议。
④相册 展示各种照片,同学、家人等。这样展示可以使更多的人了解他们。 2.2主页设计
网站主页采用静、动相结合的方式,即静态的主画面和动态的图片相结合。静态主页方式介绍个人日志、心情等等,就得利用Dreamweaver与数据库结合的技术建立数据库查询管理系统,采用交互式的动态的web画面来实现。 在主页的左上角我做了一个动画,中间做了一个逐字出现的效果,中间偏右放了一张图片作为背景。
我还设计了很有创意的几个不同的笑脸,可以让网友能轻松愉快地欣赏本网站,这样也能让网友们能更喜欢本网站。
在最下面我们写了一些个人的信息,使得网站更具实用性。 2.3 背景设计
想要在视觉化环境下制作复杂网页的专业网页制作,MX0050720123已经渐渐在网页编辑工具中崭露头角,成为专业人士编写网页的最佳选择。 可分成四个主题。分别是:
I.设计网页页面(Dreamweaver里具有弹性的页面设计功能)、
II.搭配Macromedia其它产品一起使用Dreamweaver(制作动画和图片不求人)。
III.自订使用界面(享受个性化的使用经验)
IV.最后的加入Dreamweaver扩充程序(在网页中载入扩充高级功能)。 第3章 设计方案
在主页的最上面是一个Flash图片:采用默认安装的Dreamweaver MX 2004只提供了一种让自己的主页更加富于变化和个性!从上到下的各种属性依次为:图片播放界面背景色、图片标题色彩、图片标题字体、图片标题字体大小、动画色彩等。 Flash让我们的主页更加富于变化和个性! 我们还要对各选项进行一下设置。需要注意的是imageCaptions、imageLinks以及imageURLs处的各项之间需用逗号分开,并将你的图片地址
2
山西信息职业技术学院毕业设计
以及点击后的链接地址填入相应框内,对于色彩的设置以及其它处理大家可根据自己需要来设置。在Macromedia Dreamweaver 8对页进行布局有好几种方式。
使用 Macromedia Dreamweaver 8 中的可视化设计工具创建复杂的页面布局。
1. 使用css对页进行布局 2. 使用表格显示内容 3. 在\布局模式\对页进行布局 4. 使用框架 3.1 Css简介
层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,请将内容与表现形式分开。页面内容(即 HTML 代码)驻留在 HTML 文件自身中,而用于定义代码表现形式的 CSS 规则驻留在另一个文件(外部样式表)或 HTML 文档的另一部分(通常为文件头部分)中。使用 CSS 可以非常灵活并更好地控制具体的页面外观,从精确的布局定位到特定的字体和样式。
CSS 允许控制 HTML 无法独自控制的许多属性。
除设置文本格式外,还可以使用 CSS 控制 Web 页面中块级别元素的格式和定位。
CSS 的主要优点是: 它提供了便利的更新功能;更新一处的 CSS 规则时,使用该已定义样式的所有文档的格式都会自动更新为新样式。
外部 CSS 样式表是一系列存储在一个单独的外部 CSS (.css) 文件(并非 HTML 文件)中的 CSS 规则。利用文档文件头部分中的链接,该文件被链接到 Web 站点中的一个或多个页面。
内部(或嵌入式)CSS 样式表是一系列包含在 HTML 文档文件头部分的 style 标签内的 CSS 规则。 3.2表格说明
表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。
很多设计人员使用表格来对 Web 页进行布局。Macromedia Dreamweaver 8 提供了两种查看和操作表格的方式:在\标准\模式中,表格显示为行和列的网格,而\布局\模式允许您在将表格用作基础结构的同时在页面上绘制、调整方框的大小以及移动方框。表格是用于在 HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成;每行又由一个或多个单元格组成。虽然 HTML 代码中通常不明确指定列,但 Dreamweaver 允许您操作列、行和单元格。
3
山西信息职业技术学院毕业设计
当选定了表格或表格中有插入点时,Dreamweaver 会显示表格宽度和每个表格列的列宽。宽度旁边是表格标题菜单与列标题菜单的箭头。使用菜单可以快速访问一些与表格相关的常用命令。根据需要可以启用或禁用宽度和菜单。 如果您未看到表的宽度或列的宽度,说明没有在 HTML 代码中指定该表或列的宽度。如果出现两个数字,说明\设计\视图中显示的可视宽度与 HTML 代码中指定的宽度不一致。当拖动表格的右下角来调整表格的大小,或将内容添加到比设置宽度大的单元格时会发生这种情况。
例如,如果您将某列的宽度设置为 200 像素,而添加的内容将宽度延长为 250 像素,则该列将显示两个数字:\(代码中指定的宽度)和\(位于括号中,表示该列呈现在屏幕上的可视宽度)。 HTML 中的表格格式设置优先顺序
当在\设计\视图中对表格进行格式设置时,您可以设置整个表格或表格中所选行、列或单元格的属性。如果将整个表格的某个属性(例如背景颜色或对齐)设置为一个值,而将单个单元格的属性设置为另一个值,则单元格格式设置优先于行格式设置,行格式设置又优先于表格格式设置。 表格格式设置的优先顺序如下: 1. 单元格 2. 行 3. 表格
例如,如果将单个单元格的背景颜色设置为蓝色,然后将整个表格的背景颜色设置为黄色,则蓝色单元格不会变为黄色,因为单元格格式设置优先于表格格式设置。
在这次的设计网页中,我主要甬道的就是这两种。其它的就不予介绍了。 3.3 设计说明 3.3.1模板创建
当需要制作大量布局基本一致的网页时,使用模板是最好的方法。在我的作品中使用了模版,它的好处就是在于后期维护方便,可以快速地改变整个站点的布局和外观,我们的网页制作就是基于一个网页创建模板而设计的。 3.3.2页面制作
首先启动Dreamweaver8.0,确保已经用站点管理器建立好了一个网站(根目录)。
⑴设置站点 思路 地图
Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具,因此使用它不仅可以创建单独的文档,还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果,在创建任何 Web 站点页面之前,应对站点的结构进行设计和规
4
山西信息职业技术学院毕业设计
划。决定要创建多少页,每页上显示什么内容,页面布局的外观以及页是如何互相连接起来的。
现在,站点定义了一个本地根文件夹。下一步,我们就可以编辑自己的网页了。
为了制作方便,请事先打开资源管理器,把要使用的图片收集到网站目录images文件夹内,把要使用的flash收集到网站目录flash文件夹内。 具体介绍如下:
① 网页顶端的中间标题\是一段用FLASH做的从左到右逐字出现的文字。
图1 主页标题
② 在网页的左边我做了几个笑脸的动画,使整体效果看起来不至于那么生硬。
图2动画界面
③ 网页中间是一幅用FIREWORKS做的带蝴蝶结的图片. ④ 最左边也是FIREWORKS画的一个小女孩和小男孩。
5