`
steely816
  • 浏览: 126943 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

网页设计的步骤FireWorks

阅读更多

设计网页按这几个步骤进行:
(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

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics