用Fireworks一步步制作网页

   先看最终效果图:


  下面开始讲解:

  1.布局

  先来说一下 我们制作网页一般的大小

  高度:没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值。

  宽度:

  1、在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

  2、在Firefox下,宽度的分率辨减19。比如1024的宽度-19就变成1005

  3、在Opear下,宽度的分率辨减23。比如1024的宽度-23就变成1001

  注:Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

  所以如果是1024的分辨率,你的网页不如设成1000安全一点。

  如果是800的分辨率一般都设成770。

  这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右,1024的设定990左右.


  我这样用辅助线和标尺把大概范围划分出来,注意我的划分,正好是770,和1000的地方,应为我要做的网站是1024分辨率下的,但是考虑到依然可能存在800分辨率的用户,所以我回把主要的内容和菜单都放置在770以内,770-1000的地方放一些辅助的东西,这个习惯特别是在做一些门户网站设计的时候更要考虑以下,毕竟改善用户体验也是我们要考虑的问题.

  2.开始工作

  我们继续讲解,现在我们来画上部菜单部分的内容,其实很简单拉,就是画一个方框,一个圆,然后组合,加上渐变就可以了,如下图设置

 


 

 

  3.下面我们来画哪个类似徽章的东西

  其实也很简单,创意是类似奖状上贴的哪个获奖标志一样,会让网站生动一点,嘿嘿.

  我们选择多边形,如图:


  设置如下,继续贴图,大家要注意一下图层顺序,拖动到下层就好了


  恩 要注意,这个图层我们固定了以后通常就不动了,所以要锁定,不然鼠标晃来晃去很容易把图移位,注意图层那里点一下就多了一个小锁子,方便吧,这下他就彻底不干扰我们了!


  好的我们继续,其实其他的东西都大同小异

  我们来研究一下细节.

  我最喜欢的就是firewroks超级多的纹理,在ps里面有些纹理要自己做真的好麻烦啊!

  我最喜欢的对角线,恩

  看页面左边的渐变部分,其实就是拉出来了一个矩形,然后加上线性的渐变,然后加上对角线的纹理,稍微调整一下透明度,就这么简单,效果却很好看,嘿嘿


  下一个小地方,就是产品资讯的背景框,其实也很简单

  就是一个矩形,然后外框为红色,矩形加一个内部发光,发浅灰色的光,就这样就成了


  下一个地方 就是右上角大家可以看到一个类似网格的底纹

  其实就是一个矩形,再加上一个蒙版,一个渐变,就ok了,现在看起来是不是生动很多,嘿嘿

  OK,看图


  就这样一个网站的平面设计三下五除二的就搞定了,嘿嘿,怎么样fireworks方便不!

  OK,今天就到这里,再欣赏一下我们的作品吧,不错吧!

 

时间: 2016-03-28

用Fireworks一步步制作网页的相关文章

用Fireworks制作网页

  先看最终效果图: 下面开始讲解: 1.布局 先来说一下 我们制作网页一般的大小 高度:没有一个固定值,因为每个人的浏览器的工具栏不同,我见过有的浏览器工具栏被插件占了半个屏幕,所以高度没有确切值. 宽度: 1.在IE6.0下,宽度为显示器分辨率减21,比如1024的宽度-21就变成1003.但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框. 2.在Firefox下,宽度的分率辨减19.比如1024的宽度-19就变成1005 3.在Opear下,宽度的分率辨减23.比如1

Photoshop结合Dreamweaver制作网页相册方法

dreamweaver|网页 Photoshop(以下简称PS)的批处理功能是很强大的,如果利用好可以做为我们做很多工作.今天我们介绍"PS批处理设计制作网页相册".    一.准备好自己要做相册的素材,产品展示.案例展示.照片展示等都可以,统一将这些图片放在一个文件夹下,我这里将这个文件叫做"Res_IMg",这里面放的都是大的图片,小图片一会儿ps会为我们做的.     二.打开PS,选择菜单如下:       三.这个就是PS制作图片展示的主要界面啦,主要有以

用Fireworks 4.0制作旋转文字动画

旋转  Fireworks与Dreamweaver.Flash一起合称网页制作三剑客,可是如果我们没有学会很好地利用它,那就与未出鞘的宝剑一样,难见光芒.所谓万事靠积累,只有多学多练才能让剑客真正发挥威力.今天就让我们来看一下如何利用Fireworks 4.0制作一个旋转文字的小动画,希望能对您有所帮助.    1.建立新文件:     启动Fireworks 4.0,按Ctrl+N键新建一个工作区,设置工作区宽度(Width)为400,高度(Height)为300,颜色为黑色,其余依照默认值.

用Fireworks合成设计制作一个化妆品网站首页

本例向朋友介绍运用Fireworks合成设计制作一个化妆品网站首页,在本例中我们将学习到Fireworks位图工具的应用.合理运用素材设计网页设计稿的方法,希望能给朋友们带来帮助~~ 本例是一个以女性化妆品为主打产品的企业宣传网站的形象页面效果图设计.该公司一直致力于结合科技和自然的化妆品产品的研发,主打自然健康的产品理念,因此在整体的页面设计中以绿色为主要的风格,同时配以女性模特.植物和蝴蝶的素材来体现清新.自然的感觉.如图1.1所示. 1.1 效果图 素材如下 设计过程: 1.新建一个Fir

5款中级制作网页的软件

之前笔者介绍过菜鸟级制作网页需要什么软件?我们的技术都在进步,一些菜鸟级的软件已经达不到我们的要求了,我们应该选择哪些制作网页的软件呢?以下5款软件是专门为中级网站制作准备的软件: 相信大家都听说过网页三剑客,那么是哪三种软件呢?DreamWeaver.Flash.Fireworks被称为网页三剑客,最初是由Macromedia公司开发出来的.为什么称他们为三剑客呢?因为要制作网页,需要这三个软件相互无缝合作,由Fireworks导出切片.图片,Dreamweaver制作页面,Flash制作页面

使用Pages(页面)面板制作网页

  下面通过一个具体的实例来说明Pages(页面)面板的实际作用,具体操作步骤如下. 1.新建一个Fireworks文件. 2.在弹出的[新建文档]对话框中设置画布的宽度为932像素.高度为538像素,背景颜色为白色.如图1.3所示. 图1.3 新建文档对话框 3.把实现准备好的背景素材复制到当前的文档中.并且把背景图像所在图层的名称更改为"背景".效果如图1.4所示. 图1.4 复制图像素材到当前文档 4.在背景图层中制作页面左侧的按钮和图像广告,页面右上角的导航背景,效果如图1.5

简单谈一下制作网页时如何选择字体和字体大小

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 网站建设中的字体及字体大小的的选择直接影响着网站整体的视觉效果,在某种程度上也会对网站优化起到一定的作用,比如大号字体和黑体字在网页上显示 更加醒目,具有加强某些信息显示的效果,而搜索引擎也会捕捉到这些字体的大小,更重视这些大号字体和黑体字内的信息.虽然现在的字体种类非常多,但是可以供网站建设人员选择的字体还是比较少的,主要是因为网站建设要以

Fireworks礼花动画制作教程学习

  Fireworks 不仅具备编辑矢量图形与位图图像的灵活性, 还提供了一个预先构建资源的公用库,本教程是关于Fireworks礼花动画制作教程的讲解,该文章中包括动画制作的8个步骤,以下请看正文: 1. 新建一文档,画布大小为 200 * 200,底色为黑(#000000). 2.用画圆工具画一个圆形,大小为 10 * 10,Fill 为 None,调节 Stoke . 3.选中刚画好的圆形(其实这时已经就是静态的礼花了),按 F8 键转换为 Animation Symbol. 4.调节弹出

DreamWeaver巧用模板工具批量制作网页

一.建立模板 1.创建模板页面 最简单的办法是将一个网页另存为模板文件,通过执行命令:File→Save as Template,DreamWeaver会在网站根目录中建立一个模板文件夹--Templates来保存该模板.当然,也可以新建一个模板:Window→Templates,会出现的Templates面板,单击右下角的New Template按钮,输入文件名,就建立了一个空模板:再单击Open Template按钮打开该模板,保存后自动存放于网站模板文件夹Templates中.新建.打开的