用Fireworks制作简洁清爽的网站

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

时间: 2024-10-03 09:00:51

用Fireworks制作简洁清爽的网站的相关文章

Photoshop制作简洁清爽的蓝色描边浮雕字

效果图非常简洁可爱,制作的过程也非常简单:先制作一个简单的背景:输入文字,并添加图层样式做出描边及浮雕效果:然后把文字多复制基层,填充改为零,分别加上图层样式丰富文字层次感即可. 最终效果 1.新建文档:500px * 400px. 2.添加背景,添加渐变叠加样式. [1] [2] [3] [4]  下一页

PS制作简洁清爽的蓝色描边浮雕字

  效果图非常简洁可爱,制作的过程也非常简单:先制作一个简单的背景;输入文字,并添加图层样式做出描边及浮雕效果;然后把文字多复制几层,填充改为零,分别加上图层样式丰富文字层次感即可. 最终效果: 图01 1.新建文档:500px * 400px. 图02 2.添加背景,添加渐变叠加样式. 图03 3.输入文字:FONT,字体选择卡通,圆一点的,给字体添加样式. 图04 图05 图06 图07 4.复制该文字图层,把副本填充改为:0%,然后清除图层样式,再重新设置. 图08 图09 图10 5.第

Photoshop制作简洁清爽风格的按钮

  最终效果图: 点击下面的图片,察看demo(鼠标滑过按钮的时候,按钮的颜色变成蓝色). 接着让我们开始慢慢的讲解如何来制作这样的一个效果吧: 新建一个文档 1 按钮的尺寸是250px 宽,50px 高.画布中要同时绘画按钮的原始状态(绿色按钮效果)和翻转状态(蓝色按钮鲜果),所以画布的高度100px. 2 在画布的垂直方向的一半的位置,拖拽一条标尺线.如果你的画布中,没有标尺,可以按住 (Ctrl + R) 调出它来.直接从标尺中向画布中心拖拽,就可以拖拽出一条标尺线. 创建形状 3 点击圆

纯CSS制作简洁的垂直网站导航条

css|导航 CSS代码 以下是引用片段:/* common styling */ /* set up the overall width of the menu div, the font and the margins */ .menu { font-family: arial, sans-serif;  width:750px;  margin:0;  margin:50px 0; } /* remove the bullets and set the margin and padding

photoshop制作简洁漂亮网站快速导航工具教程

给各位photoshop软件的使用者们来详细的解析分享一下制作简洁漂亮网站快速导航工具的教程. 教程分享: 打开PS软件,创建一个大小为"300*300"的画布   调整前景色为"#deffd5",新建"图层1",按"Alt+Del"填充前景色     选中"图层1",点击"滤镜"→"杂色"→"添加杂色"   选择"圆角矩形工具"

如何制作搜索引擎喜欢的网站标签

摘要: 以前的我是根本不懂什么是网站的优化?以前的我只知道如果让页面的图片占的空间小一些或者是把代码整理的简洁一些就可以了.甚至有时候觉得只要把网站用div+css制作出来了,就是 以前的我是根本不懂什么是网站的优化?以前的我只知道如果让页面的图片占的空间小一些或者是把代码整理的简洁一些就可以了.甚至有时候觉得只要把网站用div+css制作出来了,就是完成任务了,哪会还有那么多乱七八糟人问题呢?至于那些页面的title.keywords.description了这些都是特别的忽视的.以为只要描写

Fireworks制作字体遮罩动画

用Fireworks制作字体遮罩动画是一件非常轻松的事情,下面我们不妨一起动手试试. 完成效果 1.选择一幅图像作为Mask字体的底层动画. 2.把上一步骤的图复制/粘贴2次,然后把3幅图合并,这样会使动画更加连贯. 3.选中这幅图,然后在菜单中选择:Insert--Convert to Symbol,或按F8, 然后选择Animation,将它定义为动画.在动画参数设置里只要填Frames播映的帧数就可以了,我们在Frames那里填10. 4.选中箭头所指的红点,向右拖动. 5.拖动后,调整好

Fireworks制作钟摆式公告牌摇摆动画

今天我们用Fireworks制作一个钟摆式的公告牌. 先参阅一下效果图. 1.新建一个文件,画布背景颜色选取白色.同时将画布大小设置稍大些. 2.使用Fwmx2004的矢量工具,绘制圆角矩形,自选一种纹理效果填充,如图. 3.输入文字. 4.在圆角矩形右.左上角绘制小圆形,如图所示. 5.添加辅助形,找到该圆角矩形的中心点位置,如图. 6.在中心点上方垂直辅助线上绘制渐变效果的小圆形,以及两根斜直线段,复选该圆形及斜直线对角,组合并移至最后,使用钢笔工具,分别在两个白色小圆形上绘制曲线.如图.

Fireworks 制作地球旋转动画

旋转 Fireworks 制作地球旋转动画.本教程主要练习蒙板与动画原件的应用.闲话少说,看实际效果: 具体步骤: 1.双击任务栏右下角的时间. 2.打开日期和时间属性对话框后,按ALT+PrintScreenSysRq键,将对话框屏幕复制到剪贴板中(呵呵,就地取材). 3.进入Fireworks,新建文件,粘贴.粘贴后利用裁剪工具将世界地图部分裁剪下来,裁剪时一定要放大比例进行裁剪,精确一些. 4.将裁剪好的世界地图克隆一份(CTRL+SHIFT+D),移动到画布右侧之外,空白处单击,选择属性