关于我们 广告服务 社区论坛
设为首页 加入收藏

行业新闻
服 务 器
模版下载
建站指南
冲浪宝典
办公软件
网站运营
操作系统
QQ 专题
网页制作
安全防御
视频教程
网络编程
SEO专区
软件下载
图像设计
Cisco
网页特效
Wap 技术
联盟赚钱
网页素材
 首页 | 企业建站 | 网页制作 | 网站运营 | 网络编程 | 图像设计 | 冲浪宝典 | 操作系统 | SEO专区 | 联盟赚钱 | Cisco

欢迎来到e天下网络首页>>图像设计>>Fireworks>>正文|用Fireworks制作简洁清爽的网站

用Fireworks制作简洁清爽的网站

[ 来路:ENet硅谷动力      时间:2007-7-10 2:56:47    点击: ]

 

  网络的已经成为人们日常生活中的一部分,就像生活中房子,大部分人也想拥有自己网络空间,如果把自己的房子设计的漂亮大方呢?下面我们就以一个简洁清爽的页面为例来教大家如何设计一个好网页。

  1. 启动Fireworks,新建一个大小为180*200像素的画布,设置画布颜色为 #EFEFEF。

  2. 在工具栏中选择矩形工具,绘制一个154* 183的矩形,在属性面板中设置这个矩形的填充色为#A9B1BE,描边设置为1像素的柔化,颜色为#677387,如图所示。

用Fireworks制作简洁清爽的网站

  3. 利用矩形工具绘制一个宽 152,高 19 的矩形,在属性检查器中设置描边为无,填充类别改为线性, 修改线性填充的颜色样本,第一个颜色样本的颜色为#E6FFFF,然后单击渐变色阶下面的区域,新增 一个新的颜色样本,颜色为 #A4BECF,最后一个颜色样本为 #FFFFFF,具体设置如图所示:

用Fireworks制作简洁清爽的网站

  回到画布上,调整一下渐变方向,现在你的图看起来应该像是下图那样。 

用Fireworks制作简洁清爽的网站

  4. 以步骤 3 同样的方式制作下面的矩形。

用Fireworks制作简洁清爽的网站

  选中下边的矩形,在属性检查器的效果菜单中,选择“阴影和光晕”>“投影”,为矩形添加一个阴影效果, 具体参数如图所示。  

用Fireworks制作简洁清爽的网站

  5.使用直线工具画出两条长为153的线段,颜色为 #677387,描边种类为1 像素柔化,分别放在上方矩形的下边及下方矩形的上边。

  6. 加入标题列的文字,字体为 elektr_02_5,大小为 10,不消除锯齿,加入内容区的文字,字体为 04b03b,大小为 8,不消除锯齿,   

用Fireworks制作简洁清爽的网站

  7. 在帧面板,单击“新建/重制帧”按纽,新增一帧。返回到第一帧,按“Ctrl”+“A”全选中画布上的所有对象,按“Ctrl” +“C” 复制,然后到第二帧,按 “Ctrl” +“V” 粘贴,然后按住SHIFT键不放,选择将帧二上的 HOME、FIREWORKS、DREAMWEAVER 文字,往上及往左各偏移 1 个像素,这是要制造当鼠标移到文字上时,使其产生偏移的效果。

  8. 回到第一帧,选择工具栏上的切片工具,将文字链结的区切割出来。   

用Fireworks制作简洁清爽的网站

  然后切换到指针工具,单击 HOME 的切片,在弹出的菜单中选择“添加图像交换行为…”,在弹出的交换图像对话框中,选择相对应的切片,单击确定。  

用Fireworks制作简洁清爽的网站

  用同样的方法,分别制作 FIREWORKS、DREAMWEAVER 交换图像的行为。

  提示:你可以先切换到预览视图,将鼠标移到链结上察看效果。

  9. 综合以上各步骤,将可以将整个网页版型制作完成,最终效果如图所示。   

用Fireworks制作简洁清爽的网站

  这个页面是我喜欢的类型,感觉清清爽爽的,希望您也会喜欢。 点击这里下载源文件

::::站长友情提示:多花一分钟学点什么都好::::

 

上一篇:Fireworks制作妇女节主题宣传动画  下一篇:Fireworks 8绘制情人节卡通桌面

 ::热点信息::

 

= = 免责声明 = =

① 欢迎转载我网所刊信息,请注明“来源:E天下网络”。
② 凡本网注明“来源:XXX(非E天下网络)”的作品,均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如因作品内容、版权和其它问题需要同本网联系的,请在30日内进行。
※联系方式:Airtofly@163.com

::推荐文章::

 

Photoshop 轻松打造神秘银河系

::网页制作::

 

初学:什么是DIV+CSS?有什么
网页制作实例CSS用一张图片实
用CSS控制图片自适应大小的方
小技巧:CSS列表标签出现问题
CSS网页设计中使用背景图片须
想让DIV居中,如何编写CSS的
总结两年以来使用DIV网页排版
DIV CSS技巧:对CSS命名的一
更多内容..

 

 

关于我们 广告服务 友情链接 合作伙伴 社区论坛 免责声明

Copyright © 2007   21kn.com Inc. All rights reserved.e天下网络工作室

网站白天客服QQ:26875416 (非24小时)  合作QQ:597004688    粤ICP备06026423号