设计网页按这几个步骤进行:
(1)先知道需求和了解要设计的页面风格
(2)收集内容资料[要把收集来的页面分割成一个个元素来参用]
(3)初步构想一个页面 再和大家交流 然后做出一个草图[主要从色彩和构图上着手 配色时一定要按配色表配色]
(4)用FW实现 绘出页面 再和大家探讨和验收
(5)最后再修改完成
图层合并后不能对单层的效果进行处理 要分层后才可以处理"效果"
CTRL+钢笔工具会变成部分选取工具 可以选择以哪端为端点也可以调节各个节点 而CTRL+其他的所有
的工具都会变成指针工具
"效果"也可以应用与位图图形
打孔只能对矢量图进行 对位图不行
点CTRL+U设置钢笔工具鼠标样式 要使光标不呈十字形 就不要点"精确光标"
PS,FW里SHIFT+选取筐选取的是正方形或正圆 而ALT+选取筐则是以按下处为中心点拖出
COLORSPY是一个屏幕取色软件 可以将颜色转换成色码
抓下的桌面可以直接粘贴到FW里面
位图也可以进行斜面浮雕等效果制作
联合可以把两个图片接合成一个图片 轮廓也是融合为一体的
只能是两个矢量图进行打孔 而位图和位图位图和矢量图间不能打孔
可以全选图片改大小再修改画布大小就可以修改整体的大小了
调节圆角矩形的角的弧度时候按住ALT可以使指针工具对单个角进行调节
已经组合了的图片零件 要复制 只能按ALT复制
用任意变形工具时要先选定要变形的曲线才可
刀子工具可以切位图也可以切矢量图
用任意变形工具时要先选定要变形的图层 否则工具会变成"更改区域形状"
属性面板里边缘里的羽化可以把矢量填充羽化
位图也可以按CTRL+部分选择工具复制并拖动选区
打孔只能在两个都是矢量图时用
网页里的文字一般是宋体12号字体状态一般选"无"[PS里画页面 导航器只有用100% 才能画的清晰]
FW因为里面有些功能是特有的 所以有时候也会比PS好用
油漆桶不能应用于位图里
虽然图层已经组合了 但在对某一图层进行编辑时还是要先选择图层
点右键里的"分散到图层"是把选中零件煎切到新建图层里
在任意变形时 定义的边框颜色应该为白色
PNG放PS里不能分层 而PSD放FW里可以分层
FW里对矢量和位图都可以做渐隐效果 FW的渐隐效果图PNG可以放进PS里 但是要拖动进PS里 不能用打开命令[FW里的渐隐效果实际上是用蒙版做的] 、而PS里做的渐隐效果PSD图片放FW里仍有渐隐效果
可以做透明底的图片 导出的图象也是GIF格式的
保存出来的GIF格式的图象要比JPG的图象清晰得多 GIF的会模糊点但不会出现马赛克
网页里文字一般用"宋体"12号 要不消除锯齿 如果这样设置以后文字还是不清晰的话 则要打开窗口菜单里的"字符"修改其文字宽度或高度[PS里和FW里是一样的]
CTRL+A是全选图片 其直线工具是用来花直线的 相当于特殊的画笔工具
键盘上的方向盘用来控制直线或图形的方位 每次一个单位格
页面矩形方框的边缘最好不要用直线工具做 要用矩形工具做
颜色可以用属性面板里效果里的色相饱和度调节成各种颜色 黑白灰也可以变成彩色
FW也可以导出JPG格式的 用文件里的导出向导改输出格式为JPG 以后用导出命令输出的格式也都是JPG的了 效果比GIF的更好
按住ALT用替换颜色工具可以吸取点击处的颜色涂到别处
位图工具里 橡皮擦工具不能用到矢量图里 而油漆桶都可以
用套索剪切时应先选择好相应位图图层
用图章工具时要先选择好图层 它只能在单个图层里使用 即不能涂抹别的图层里的图案[但PS里可以]
做网页程序:在PS里或FW里用工具面板上的切片工具切片好后储存为WEB所用格式,再放进DW里修改代码便完成一个网页 在切片的时候尽量把所有有活动功能的点切成片,有图案的地方要切成片,而只有单一颜色的切片可以在DW里用代码生成 并排的规则图片只要切其中一个元素就行了
PS和FW里渐变工具都是位图工具
按SHIFT+图片选中几个图片再按CTRL+G可以组合这几个图片 即让这几个图片结合成一个图片[而不是分散独立的零件]CTRL+G+SHIFT可以取消组合
双击钢笔工具可以终止钢笔
打开什么格式的图片就可以导出什么格式的图片 如果是在FW里制作出来的图片导出来的只能是GIF
格式的
FW和FLASH里的组合就是把两个层里的图片合并在同一图层里
指针拖曳可以筐选几个图片
指针工具是把一个图层里的所有图片都拖动 部分选定工具只能把一图层里选定的那部分图片拖动
打孔要先把两层的图片[即打与被打孔的两层图片 只能是矢量图片 而且只能是两层]全选定
点右键里的"平面化所选"即让几个图片重合在一起成为一个不可分离的整体[即没有了零件 而组合[几个图层合成一个图层]所得的图层里的每个零件仍然存在 而且仍可以编辑 "联合"后的图片也可以编辑 但是没有零件了]平面化所选后 所得的图片就是位图了 就可以用位图工具编辑了[这点很重要 可以把矢量图位图化后用位图工具修改]
刀子工具是把一图层里的一个图片切成两个独立图层里的两个图片
钢笔工具靠近钢笔线条里的节点时 右下角出现加号时候为添加一节点 减号时为删除一节点
临近的线条会伸直
矢量图形可以对其颜色大小进行定义 而位图则不行
按住ALT调节弯曲度可以控制其单方向独立的调节
拆分就是把同一图层里被打孔后或者是接合[即接成一个不可分割的整体 而组合后的图形可以分离]后的不能单独移动的图片[即复合路径]分成几个独立的图层以便于图片的单独处理
位图和矢量图没法共处一个图层 所以在矢量图层里画位图 它会自动生成一个图层[两个动作的矢量图也不能共处一个图层里]
部分选定工具可以对每个零件的每个节点进行编辑 而指针工具只能进行整体的移动
钢笔工具描的端点用自由变形工具调节不了 但可以用部分选定工具调节[修改某节点 先双击改节点]
点击钢笔工具端点可以继续连接描点下去
FW里的油漆桶工具不能用于位图
刀子是切矢量图的 不能切位图 能切面也能切线 切后的图在两个图层内[选定几个图层再使用切刀 可以同时切几个图层里的图片]
要让切后的线条端点不是弧线而是直线 应该先画两个同心的面然后打孔成线条 得到的环就是一个面的图形而不是线了 就可以用刀子工具切成端点为直线的一条线条了
位图工具不能运用于矢量图层上 但油漆桶工具可以在矢量图层上填充颜色
调节渐变的时候用指针工具
部分选定工具只能调节两节点间的曲线 而任意变形工具则调节的是所选节点附近?喔鼋诘慵涞那?lt;BR>FLASH里部分选定工具和选择工具都可以调节曲线或形状 不过部分选定工具只能调节两个节点间的线段形状
位图也可以调整宽高粗细 不过调整的是整个图层的图片
矢量图组合后还是矢量图
联合有把公共部分除去 而接合没有
直线工具是用来画直线的 是矢量工具
命令菜单里的创意很好用 比如画箭头
打孔只用与矢量图
要修改矩形工具等的形状[用自由变形工具修改]前应先按CTRL+B把矩形工具取消组合
要得到矢量图最后是套在FW里用矢量工具再画一次出矩尺
矢量图在FW里无限放大都不会出现锯齿 但是将它导成位图 在ACDSEE里打开并放大后它仍会出现锯齿[不过它的分别率仍比一般的位图高]
打散用CTRL+B相当于FW里的拆分 用两次这个命令才可以打散文字以编辑文字形状
单击贞按F6可复制该贞齿 但如果用指针拖大四个角的话 则不会有锯齿
组合:把两个图层图片[矢量图位图或两种都有均可]组合在一个图层里 各自可以单独编辑
接合:把两个图片[只能是矢量图]连接在一起成为不可分割的一个整体
联合:把两个或两个以上图层图片[只能是矢量图]组合在一个图层里 各自不可以单独编辑
拆分:只能拆分接合的路径
网页是这样做的:一 FW是生成代码的工具 先在FW里切块 做简单的分区和一些效果 如按扭 导航栏 下拉菜单制作等[在FW里基本上可以完成网页的制作] 二 生成的代码再放进DREAWEAVER里做细致的修改 最后完成[DREAVEAVER可以说是用来修改FW生成的代码的工具 页面的基本筐架和特效基本上是在FW里制作出来的]
按住SHIFT选择区域时 选取筐会合成并集 按住ALT则是删除交集的区域 同时按住ALT和SHIFT则选取的是两个选取筐的交集[这
一点和PS是一样的]
矢量路径工具和钢笔工具差不多 不过画起路径更随便和容易 和刷子工具差不多[不过它画出来的是矢量路径可以修改颜色和粗细等]
PS里保存出来的PSD图片移到FW里可以分层 而保存出的PNG图片移进去则不能分层 只有FW自己保存成的PNG图片可以分层 FW导出的PSD在PS里可以分层
油漆桶可以填充位图也可以填充矢量图形
先选定某一区域 再用部分选定工具拖动选区时候[必须有选区筐] 拖一次就复制一个[这时箭头是两个重叠的黑白三角形] 而且都在同一个图层内 如果按住ALT再用部分选定工具或是指针工具拖动某一区域[矢量或位图都可以] 也是拖动一次就复制一个 但是复制在新层里[这点和PS里的一样]
任何位图都可以拖入FW
用选择后方对象工具移动的是图层下面那个图层[但要先双击一下上面的那图层]
用 CTRL/ALT+选择工具可以调节钢笔工具一边的手柄 [和PS一样]而用CTRL还会拖着节点走[这时候鼠标为空心三角形] 而ALT则不会 要调节节点一边的线段的曲度最好用ALT[第二次点击节点时调节的是节点另一边的线条]钢笔工具可以先点击曲线添加一节点再对该节点进行编辑
选择钢笔工具按住CTRL点击曲线终点可以继续绘制曲线[这点有别于PS]
用部分选定工具圈选或双击钢笔曲线时 曲线节点会显示手柄
当指针工具移动到节点上显示为空心的时候才说话可以对该节点进行编辑
可以用矩形热点工具对所选区域图片创建链接 用导处命令生成的代码放到DREAWEAWER里进行修改
矩形工具的边缘线也可以用自由变形工具或钢笔工具调节形状
软件里导出的是文件的成品[可以是软件自带的制作成品功能]而保存出来的文件则不一定是成品 大多是可供下次再制作的源文件
FW也可以导出动画 和FLASH一样 它也可以分层和贞[而且各个层之间独立 但只有第一贞有分层和显示缩略图]双击贞右边可以调节贞的停留时间
在库里先做好首末贞元件拖到舞台
网页层只能用来做切片 不能做绘图编辑
缩放 扭曲 倾斜工具可以运用到矢量图上也可以运用到位图上
矢量图绘制完后还可以进行很多设置修改[如填充色 边缘线等] 而位图则不行 它只能进行效果和透明度的修改
切片是把网页切割成多块 绿色区域为热区 带有红色分割线 而热点工具是圈定链接感应区域[热区]的工具 没有红色分割线 可以自由圈定绘制的按扭图片在热区里的话才可以被感应到而随着鼠标的移入热区产生变化 否则不会变化
切片中心点的作用是:拖动它可以与下一贞的图片做连接 使鼠标移动到该切片里时 前后两贞做连接 自动跳转[第一贞会全部显示 而第2贞只会显示切片区域的部分]还可以点击行为窗口中的"交换图象"得到这个效果:鼠标移到贞1的切片上时候才出现贞2的图片[贞1任何时候都看得到]
左键点击中心点再点菜单中的编辑弹出菜单可以编辑出下拉菜单功能
用FW做网页效果[包括网页互动或特效]时可以点"预览"进行预览效果
FW打不开BMP格式的图片
蒙版作用与用法和PS里的一样
文件:在浏览器中预览:可以在浏览器里预览所做的页面的最后效果
"平面化所选"是把矢量图转化为位图 同滤镜:转化为ALPRA
发表评论
-
页面相似度的概念
2011-02-28 12:29 1589页面相似度一直是站长 ... -
在CSS中定义a:link、a:visited、a:hover、a:active顺序
2011-02-28 08:43 2651CSS样式表中a:link,a:visited ... -
HTML map标签
2011-02-25 16:20 2211在Html中,给图像使用map标签,可以给图像的某个部分建立超 ... -
HTML模板和CSS基准样式(三)
2011-02-24 17:23 1246今 天是这个连载的最后一部分,内容关于网页的布局。 ... -
HTML模板和CSS基准样式(二)
2011-02-24 17:08 968今天,我要写的是CSS文件的模块化。 如果你看过CS ... -
HTML模板和CSS基准样式(一)
2011-02-24 17:07 880我经常写网页。 很多人喜欢用Dreamwea ... -
Wordpress图片相册插件/ Gallery Plugins
2011-02-24 11:14 2729用插件把你的图片相册 打扮的更加漂亮, 更加容易自己管理, ... -
用wordpress搭建专业的企业网站
2011-02-24 10:02 1151在看该文档之前需要对WordPress 主题模板的层 ... -
十大WordPress的SEO优化技巧
2011-02-24 09:59 1071WordPress 系统本身, ... -
网站优化的一些工具和RP查询地址
2011-02-14 11:06 1144网站优化的一些工具和RP查询地址 网站PR值查询http: ... -
10个给力的在线Web设计开发工具介绍
2011-02-09 21:44 8451.在线文本生成器 BlindTextGenerator ... -
web开发插件
2011-01-04 19:41 658一、firebug: Firebug是firef ...
相关推荐
在本篇关于"Fireworks 网页设计综合实例"的文章中,我们将深入探讨使用Adobe Fireworks进行网页设计的关键步骤和技巧。Fireworks是一款强大的工具,尤其适合网页设计师,它集成了位图编辑、矢量图形创建和网页优化等...
### 完整网页设计的步骤 #### 一、确定网站主题与功能 1. **明确网站定位**:首先,需要明确网站的主要目标和受众群体,这有助于后续的设计工作更加聚焦和有效。例如,是一个电子商务网站还是一个个人博客? 2. **...
【标题】:“上海网页设计培训、Fireworks打造未来风格的球和金属” ...通过实践这些步骤,设计师可以扩展其创作技巧,为网页设计注入更多创新元素。同时,了解和掌握这些工具也能为设计工作带来更高的效率和专业度。
【Fireworks网页设计综合实例】 Fireworks是一款强大的网页设计软件,尤其在处理位图和矢量图形方面表现出色。在本教程中,我们将通过一个具体的网站页面设计过程,全面了解Fireworks的各项主要功能。该教程的目标...
【Fireworks网页设计综合实例】 在本篇教程中,我们将深入探索Adobe Fireworks在网页设计中的强大应用。Fireworks是一款专业级的图形设计和原型工具,特别适合网页设计师用于创建和优化网页元素。通过一个完整的...
本实验报告的主要目的是了解专业网页设计工具 Dreamweaver、Fireworks 和 Flash,并了解网页的核心技术 HTML 语言。在实验中,我们使用 Dreamweaver 等网页设计软件,设计和制作了一个个人网站,了解了网页设计工具...
文件名"\8653647_Web标准网页设计与Asp(清华大学出版)第5章 Fireworks.ppt"暗示这是一个PowerPoint演示文稿,可能包含了详细的课件内容,包括理论讲解、实例分析和步骤演示。"\no.txt"可能是无关的文本文件,或是...
七、网页设计步骤 1. 确定主题:确定网站的主题和功能。 2. 找好模板:查找一些好看的网页模板作为自己网站的参考。 3. 利用表格进行布局:使用 Dreamweaver 软件进行网页布局。 4. 制作图片和 Flash 素材:使用 ...
在网页设计领域,Adobe的四剑客——Dreamweaver、Flash、Fireworks和Photoshop是不可或缺的工具,它们各自承担着不同的职责,共同构建出丰富多彩的网页内容。本主题将详细解析这四个软件在网页综合设计中的应用及其...
第11章和第12章分别讲解了“网页图形处理工具Fireworks CS3”和“网页动画制作工具Flash CS3”,这两款软件在网页设计中扮演着重要角色,能提升网页的视觉效果和互动性。 第9章“行为与时间轴”和第13章“动态网站...
《Fireworks MX 2004:网页设计与图像优化的经典工具》 Adobe Fireworks MX 2004,作为2004年发布的一款官方正式版软件,是Adobe公司针对网页设计师精心打造的一款强大工具。它在网页设计领域扮演着不可或缺的角色...
第五章“Fireworks MX中的图像技术”更深入地探讨了这个Adobe工具,它在网页设计中用于创建和优化矢量图形与位图图像,提供快速的原型设计和交互式编辑功能。 第六章“表格”是网页布局的传统方法,虽然现代网页...
在网页设计领域,Adobe Fireworks CS6是一款不可或缺的工具,尤其对于初学者和专业开发者来说,它提供了强大的图像编辑和网页设计功能。"fireworks_cs6chinese32-64bitgreen.zip" 是一个专为中文用户设计的32位和64...
本文将从零开始,遵循Web标准,介绍网页设计的7个步骤:内容分析、结构设计、原型设计、效果图设计、布局设计、视觉设计和交互设计。 一、内容分析 内容分析是网页设计的第一步骤。它的目的是为了研究需要在网页中...
本书全面、详实地介绍了使用Dreamweaver、Photoshop、Flash、Fireworks,以及脚本语言JavaScript进行网页设计制作的具体方法和步骤。 全书共分为5篇,以“Dreamweaver 8网页制作篇→Photoshop CS2网页图像制作篇→...
网页设计是一个系统性的过程,涵盖了多个步骤,从最初的规划到最后的推广与维护,每一步都是确保网站成功的关键。以下是对网页设计一般步骤的详细说明: 1. **规划站点**:在开始设计前,需要对网站的目标、受众、...
Adobe Fireworks是一款强大的图形设计和网页编辑工具,尤其适用于创建网页图形、交互式原型以及优化图像。 1. **界面介绍**:Fireworks 8的界面包含菜单栏、工具箱、面板、属性检查器等关键元素,这些都对高效工作...
网页设计的一般步骤涵盖多个关键环节,从需求分析到后期的推广和维护,每个阶段都是构建成功网站不可或缺的一部分。以下是对这些步骤的详细说明: 1. **需求分析**:这是设计网页的第一步,主要是理解客户的需求和...
4. **Fireworks**:这是Adobe的一款专门针对网页设计的图形编辑和优化工具。它结合了矢量图形和位图编辑,并且可以快速制作网页按钮、切片导出以及优化图片。学习者需掌握基本的矢量绘图技巧,以及如何为网页设计...