Fireworks-网页设计综合实例
Fireworks 网页设计综合实例
在本文中我们将帮助您亲身体验Fireworks
在网页创作中的强大功能，我们通过一个网站页面的设计过程，为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务，您将对Fireworks的主要功能有一个统一的全局性的了解，同时为您在设计中如何利用Fireworks 提供一个清晰的思路。下图是这个教程完成后的外观：
我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容：
1、导入并编辑位图图像。
2、自动任务处理
3、创造矢量图形
4、创建文字
5、创建按钮
6、创建导航条
7、设定按钮属性
8、建立切片
9、创建拖拽翻转效果
10、创建弹出菜单
11、创建变形动画
12、优化图像
13、输出HTML文件到Dreamweaver
14、在Dreamweaver中进行往返表格编辑
一、设计前准备
1、网站介绍：
在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站设计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司的基本概况和产品信息，并作为公司的
一个展示窗口，向参观者展示企业的形象及产品系列。根据业主的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网站的导航结构。
2、设计指导思想：
本网站设计的指导思想是在网络上营造一
个优雅、高贵、宁静的氛围，为了体现这一主题，设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一
主题，以穿插的直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面的坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。
3、页面结构：
整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。右边为内容区，以深色带条纹的图片作为背景。
下面我们将根据上述设计分析，分不同的部分为您介绍制作过程。在新建一个文件后，我们需要对我们的工作环境进行简单的设定，以符合我们的任务要求。首先需要设定工作区的面积及背景颜色，打开Modify>Canvas Size针对常见的800x600分辨率，我们设定工作区的长为776这可以根据需要设定，但最好不要超过778，高为515根据实际内容确定，再执行Modify>Canvas Color设定背景色为黑色。再打开View>Grid>Edit Grid对话框，设定水平方向网格间距为10像素，垂直方向为5像素，并将网格颜色设为暗灰色以不影响观察页面，打开网格显示和网格捕捉。如下图所示：
一、导入并编辑位图图像。
Fireworks4带有完善的位图创建、修改和处理功能，我们可以导入外部位图文件并对它
进行编辑，可以修改和删除位图中的颜色，可以向对矢量图一样增加效果。我们的工作将从层面板开始，新建一个文件后，默认的只有两个图层Web层和Layer1层，双击Layer1层，将层名改为“背景层”。如下图所示：
1、我们将一张男性模特的照片导入此层中。
2、双击图片可以进入位图编辑模式，我们可以用矩形选择工具选定不需要的部分并删除它。
3、位图大小调整好后可以使用实时特效进行色彩调节，打开Effect面板，选择Adjust Color/Levels，在Levels分布图中分别拖动三个滑尺，按照下图所示进行色彩调节：
4、导入的位图一般都有一些细小的杂点，我们可以使用Effect>Blur>Gaussian Blur对图像进行一些模糊处理，使其增加一些柔和的感觉，如下图所示：
二、自动任务处理。
由于我们在后面将多次使用这个处理过程对位图进行加工，因此可以利用Fireworks提供的自动处理功能加快我们后面的工作，这种自动任务处理可以有很多种途径，我们介绍其中最常用的三种：
网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题 略 第2章网页规划设计 一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略） 第3章初识网页制作软件 一、选择题 1．C 2．C 3．B
二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题 略 第5章设置网页超级链接 一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页 一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页 一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题
Fireworks-网页设计综合实例
Fireworks 网页设计综合实例 在本文中我们将帮助您亲身体验Fireworks 在网页创作中的强大功能，我们通过一个网站页面的设计过程，为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务，您将对Fireworks的主要功能有一个统一的全局性的了解，同时为您在设计中如何利用Fireworks 提供一个清晰的思路。下图是这个教程完成后的外观： 我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容： 1、导入并编辑位图图像。 2、自动任务处理
3、创造矢量图形 4、创建文字 5、创建按钮 6、创建导航条 7、设定按钮属性 8、建立切片 9、创建拖拽翻转效果 10、创建弹出菜单 11、创建变形动画 12、优化图像 13、输出HTML文件到Dreamweaver 14、在Dreamweaver中进行往返表格编辑 一、设计前准备 1、网站介绍： 在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站设计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司的基本概况和产品信息，并作为公司的
一个展示窗口，向参观者展示企业的形象及产品系列。根据业主的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网站的导航结构。 2、设计指导思想： 本网站设计的指导思想是在网络上营造一 个优雅、高贵、宁静的氛围，为了体现这一主题，设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一 主题，以穿插的直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面的坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。 3、页面结构： 整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。右边为内容区，以深色带条纹的图片作为背景。
广西玉林高级技工学校 《网页制作与设计》课程标准 一、课程基本信息 二、课程性质 本课程是中职计算机术专业的一门主干专业课程。通过本课程的学习，要求学生掌握网页设计的基本概念，学会使用常用的网页设计工具和常用脚本语言，能够设计制作常见的静态和动态网页，具备网站的建立和维护能力。同时通过本课程的学习，培养学生的综合职业能力、创新精神和良好的职业道德。 三、设计思路 本课程标准的总体设计思路：以计算机专业学生的就业为导向，根据行业专家对计算机网络技术专业所涵盖的岗位群进行的任务和职业能力分析，紧紧围绕完成工作任务的需要来选择课程内容，设定职业能力培养目标；以“工作项目”为主线，创设工作情景；以书本知识的传授变为动手能力的培养为重点，强化学生实践动手能力的培养，以实现职业能力的培养目标。 四、课程目标 1.职业知识目标 1．熟悉HTML 语言的作用和开发环境，能够编写HTML 代码； 2．掌握常用的HTML 标签，能够实现基本的图文信息显示； 3．理解HTML 页面框架的作用，能够针对需求进行框架的设计； 4．掌握各类HTML 表单元素标签，能够进行表单设计；
5．掌握各类HTML 多媒体元素标签，能够进行多媒体页面设计； 6．掌握CSS 样式的基本使用方法，能够应用CSS 样式表美化页面；7．掌握CSS 网页布局的方法，能够结合DIV 标签进行页面布局； 8．掌握JavaScript 的语法基础，能够编写简单的JavaScript 应用程序；9．掌握JavaScript 的函数、内置对象、事件等，能够实现表单的验证；10．掌握DOM 树形结构及其操作方法，能够控制DOM 对象。 2.职业技能目标 1．能独立进行资料收集与整理、具备用户需求的理解能力； 2．能根据项目需求，具备项目页面的设计与实现能力； 3．能根据静态页面设计原则与CSS 技术规范，实现页面美化与布局；4．具有使用JavaScript 技术进行页面事件处理与表单验证的能力； 5．能根据DOM 树形结构，进行页面DOM 的控制； 6．具有综合应用HTML 语言、CSS 样式、JavaScript 脚本进行页面的设计、编码、调试、维护能力。 3.职业素质目标 1．养成善于思考、深入研究的良好自主学习的习惯； 2．通过项目与案例教学，培养学习者的分析问题、解决问题的能力； 3．具有吃苦耐劳、团队协作精神，沟通交流和书面表达能力； 4．通过课外拓展训练，培养学习者的创新意识； 5．具有爱岗敬业、遵守职业道德规范、诚实、守信的高尚品质。 五、课程主要内容与要求
一、计算机技术系LOGO制作 二、Loading实例制作 1.打开fireworks MX 2004，执行：文件/新建，大小为400*400PX， 白色。 2.使用矢量矩形工具,在图像中创建一个20*20PX的矩形,填充的颜 色为红色，用指针工具,调整其线性渐变为：白→红，调整其渐变的方向。 3.选择这个正方形,按F8键或使用菜单命令：修改/元件/转换为元件, 在打开的符号属性对话框中,选择其类型为,.图形 4.在库面板中选择上面创建的元件，将它拖入图像中，在属性面板 中设置后面一个元件的宽度为300px。 5.选中上面两个实例,使用菜单命令：修改/对齐/左对齐。 6.使用菜单命令：修改/元件/补间实例 7.在实例对话框中,设置步骤为15,选中分散到帧，确定 8.在库面板中选区中元件,双击,在打开的对话框中设置效果为凸起 浮雕,角度为90度,设好后关闭 9.保存文件
三、文字曲线动画 1.单击：文件/新建，宽770*高110像素，分辨率为：72px/inch，背 景：白色。 2.单击：文件/导入，选择：综合楼.png，在图像中调整其大小与画 布的大小相吻合。 3.使用文字工具在图像中输入文字：“热烈庆祝江西信息应用职业技 术学院建院五十周年”，使用：隶书，43号字，红色。 4.使用钢笔工具，勾画出所需要的路径的形状，在属性面板中设置 无颜色、无填充。 5.按住房Shift键，将文字与路径同时选中，执行：文本/附加到路 径，按Ctrl+C将变形后的文字进行复制。 6.在帧面板中新建一个帧，按Ctrl+V粘贴，在属性面板中的文本偏 移中输入：10 7.重复这样，在属性面板中的文本偏移中输入：20 8.重复这样，在属性面板中的文本偏移中输入：30 9.重复这样，在属性面板中的文本偏移中输入：40 10.。。。。。。。。。。 11.在帧面板中调整动画持续的时间。 12.预览动画，导出动画。
Photoshop经典实例教程3000例 1、教你打造偏色艺术色调教程 2、·教你打造偏色艺术色调教程 3、Photoshop┾製造制造另类婚纱照片 4、⒈款粉帥氣de游戲做圖 5、PS(IR)可爱的棒棒糖 6、ps打造唯美色调 7、PS打造超炫人物效果 8、一款比较自然的眨眼教程 9、Photoshop最简易的磨皮法 10、Photoshop]制作下雨的效果 11、小菱形背景和圆点背景的做法 12、[Photoshop]PS打造淡彩风格的幻眼效果 13、Photoshop]用Photoshop滤镜打造梦幻艺术效果 14、Photoshop]巧用PS打造镶满诱人钻石的文字 15、Photoshop]PS制作幽冥火焰 16、Photoshop]简单的叠影制作方法 17、Photoshop]制作冬季恋歌浪漫雪景效果 18、Photoshop]用Photoshop设计另类树皮人体 19、Photoshop]教你设计绚丽光芒效果 20、Photoshop]教你设计胶片风情电影海报 21、Photoshop]教你设计神秘炫光黑洞效果 22、Photoshop]PS特效字：闪亮钻石效果 23、[Photoshop]巧绘晶莹剔透的水晶樱桃 24、Fireworks]QQ空间初级玩家必学的11条技巧 25、Flash]给FLASH初学者的10点制作经验 26、Flash]Flash全屏效果全攻略 27、Photoshop]利用PS图层样式绘制彩色玻璃立体文字 28、Photoshop]Photoshop制作逼真的洁白羽毛 29、Photoshop]用PS把秋景照片变为冬景效果 30、[Photoshop]Photoshop教你给MM的衣服换个颜色 31、Photoshop]用PS制作周迅的怀旧效果图 32、Photoshop]转用PS轻松给MM衣服添加图案 33、Photoshop]用PS的动态画笔制作鞭炮 34、Photoshop]教你做天使翅膀的卡通效果 35、Photoshop]制作融化的冰淇淋 36、Photoshop]打造宇宙场景爆炸星球特效 37、Photoshop]教你设计恐怖电影海报 Photoshop]制作奔驰中的汽车 [Photoshop]蝴蝶结边框 [Photoshop]印章制作小教程（ps新手适用）[Photoshop]Photoshop高级柔化处理人物照片
《网页设计与制作》课程教学大纲 课程名称：网页设计与制作 学分及学时：4学分总学时72学时，理论36学时 适用专业：网络工程 开课学期：第四学期 开课部门：计算机与互联网学院 先修课程：计算机文化基础计算机网络 考核要求：考试 使用教材及主要参考书： 向知礼主编：《网页设计与制作》航空工业出版社2017年 杨松主编：《网页设计案例教程》航空工业出版社2015年 一·课程性质和任务： 本课程全面地介绍网页制作技术的基本理论和实际应用。全书共10章，分为3大部分。前5章为第1部分，主要介绍网页制作的基本理论——HTML，同时穿插介绍Fireworks，Flash，Anfy等软件在网页制作过程中的应用；第6章～第8章为第2部分，主要介绍网页制作技术，包括CSS技术、客户端脚本技术(DHTML)以及XML技术；第9章～第10章为第3部分，主要介绍当前最流行的网页制作工具——Dreamweaver，通过应用实践能够从实际应用的角度进一步巩固所学知识。 课程内容不但包括各种网页制作技术的基础理论，而且强调网页制作的具体应用，使读者既能打下坚实的理论基础，又能掌握实际的操作技能。 二·课程教学目的与要求 以Dreamweaver的使用为主线，介绍网页制作的相关技术。使学生理解网页制作的基本概念和理论,掌握站点的建立和网页的设计,能用HTML语言修改网页;掌握网页制作和站点的
基本知识;掌握站点的创建和网页的编辑;掌握超链接、图像、CSS样式的使用;掌握表格、框架、表单、多媒体对象的使用;理解行为、模板、库、CSS布局的概念和使用;理解HTML语言、网站的测试与的发布； 要求：教学过程中，须注重学生实践操作能力的培养，采取“面向实践、能力为先”的教学思路，教学内容应结合当前WEB技术的发展趋势，把握未来企业级WEB页面开发的发展方向，兼顾各行各业的需求变化，力争面向社会，服务于企业“互联网+”战略。 三、课程学时分配 四·课程教学中应注意的问题 理论课讲解WEB页面开发的原理及方法，并在多媒体教师机上进行演示操作；
课程设计报告书 题目：《苹果公司》网页设计与制作 二级学院数学与计算机科学学院年级专业2012级计算机网络学号 学生姓名 指导教师 教师职称讲师
新余学院课程设计（论文）任务书二级学院：
说明：此表一式叁份，学生、指导教师、二级学院各一份。 2013年 6 月 18 日
目录 第1章课程设计概述 (1) 第2章网站设计方案说明 (3) 2.1 需求分析 (3) 2.2 网站布局类型和配色方案的确定 (3) 2.3 网站整体规划 (5) 2.4 素材的收集和整理 (5) 第3章网站制作 (7) 3.1创建站点 (7) 3.2创建样式表文件 (7) 3.3页面制作 (9) 第4章主要技术特点和特色说明 (13) 第5章课程设计总结 (16)
第1章课程设计概述 本课程设计主要是利用已经学习的网页设计与制作知识和初步掌握的网页开发工具如Dreamweaver、Photoshop等软件为苹果公司设计并实现一个公司网站。根据老师的要求及指导，我设计了此网站。 此网站属于小型网站，网站以苹果公司原网站为依托，按照原网站配色方案和表面结构以DIV+CSS的方式仿制，苹果公司（Apple Inc.）是美国的一家高科技公司，2007年由苹果电脑公司（Apple Computer, Inc.）更名而来，核心业务为电子科技产品，总部位于加利福尼亚州的库比蒂诺。苹果公司由史蒂夫·乔布斯、斯蒂夫·沃兹尼亚克和Ron Wayn在1976年4月1日创立，在高科技企业中以创新而闻名，知名的产品有Apple II、Macintosh电脑、Macbook笔记本电脑、iPod音乐播放器、iTunes商店、iMac一体机、iPhone手机和iPad平板电脑等。2012年8月21日，苹果成为世界市值第一的上市公司。 本网站的主要功能是提供丰富、清晰的公司信息和资源，主要包括iphone、ipad、ipod、Mac、itunes等硬件产品以及iOS、Mac OS和APP应用软件等软件产品的全方位展示和介绍；通过在线商店网页为顾客和公司提供购买和销售苹果产品的便利通道；通过技术支持网页为产品购买者提供维修服务和支持范围。 设计者希望通过清新简洁，赏心悦目的外观设计给予客户和顾客以舒适的网页浏览体验。网站充分展示公司提供的产品及设计理念和售后服务能力，注重推广公司各方面形象。以公司的宣传推广和将网站浏览者吸引成为公司的客户作为网站的目标。坚持严谨、负责、创新的态度为消费者提供展示苹果公司完美产品和周边设备的个性化页面，不断创新变革助力科技进步和公司前进。 此外，这不仅是为了肩负学生的责任而去完成老师交给我的任务，更是对过去学习的知识的温习巩固，是一个把理论转化为实践的过程，是一个把自己的设计思想转化为实物的过程，是一个发挥自己创造力和想象力的过程。 再者，这是对自己在一学期内该学习科目以来的成果的检查，这是一个自我审视的过程：检测我该学期的学习成果，衡量一期以来的收获，更为重要的是扬长避短，发现自己的问题与缺点，使自己及时改正，发觉自身的优点和长处并坚
存档资料成绩： 课程设计报告书 课程名称网页设计与制作 题目设计个人网站主页 分院电信分院 专业班级电子商务 学号 学生姓名 指导教师 2011 年 6月 20日
课程设计评阅意见 评阅人__________职称________ 年月日
目录 第1章课程设计任务书 .................................. 错误!未定义书签。 一、课程设计题目设计个人网站主页............... 错误!未定义书签。 二、课程设计工作：................................... 错误!未定义书签。 三、课程设计的内容要求：............................. 错误!未定义书签。 1、课程设计要求.................................. 错误!未定义书签。 2、课程设计内容.................................. 错误!未定义书签。 第2章课程设计目的 .................................... 错误!未定义书签。 第3章课程设计内容................................... 错误!未定义书签。 设计一选题的基本原则................................. 错误!未定义书签。 （1）选题应反映本专业的培养目标，符合专业综合训练的要求。错误!未定义书签。 （2）选题要有利于深化所学的专业知识和拓展所学的知识面。错误!未定义书签。 （3）选题的难易程度和工作量要适当，保证在规定的时间内，在教师的指导下，经过努力能够完成。 设计二选题范围..................................... 错误!未定义书签。 设计三选材......................................... 错误!未定义书签。 设计四正确运用DW和Ps ............................. 错误!未定义书签。 设计五课程设计心得................................. 错误!未定义书签。 第4章课程设计步骤 .................................... 错误!未定义书签。 设计一查找相关资料................................. 错误!未定义书签。 设计二利用Ps进行切片.............................. 错误!未定义书签。 设计三利用DW编辑.................................. 错误!未定义书签。
Fireworks网页设计综合实例1 在本文中我们将帮助您亲身体验Fireworks在网页创作中的强大功能，我们通过一个网站页面的设计过程，为您详细介绍Fireworks在网页设计的不同阶段是如何处理各种不同任务的。通过解决您所遇到的每一个具体的任务，您将对Fireworks的主要功能有一个统一的全局性的了解，同时为您在设计中如何利用Firework s提供一个清晰的思路。最终完成的实际页面请看这里。下图是这个教程完成后的外观： 我们将根据这一个典型网站其中一个页面设计流程，使您逐步学习到以下内容： 1、导入并编辑位图图像。 2、自动任务处理 3、创造矢量图形 4、创建文字 5、创建按钮 6、创建导航条 7、设定按钮属性 8、建立切片 9、创建拖拽翻转效果 10、创建弹出菜单 11、创建变形动画 12、优化图像 13、输出HTML文件到Dreamweaver 14、在Dreamweaver中进行往返表格编辑 一、设计前准备 1、网站介绍： 在教程介绍之前首先让我们来看一下我们将要完成的主要任务。这是一个服饰公司的企业网站设计，公司主要以男式服饰为主，同时也兼顾部分女士服饰。网站的主要任务是帮助浏览者了解公司的基本概况和产品信息，并作为公司的一个展示窗口，向参观者展示企业的形象及产品系列。根据业主的要求，网站包含了企业概况、企业人才、产品展示、公司荣誉以及联系方式。我们将以此得到网站的导航结构。
2、设计指导思想： 本网站设计的指导思想是在网络上营造一个优雅、高贵、宁静的氛围，为了体现这一主题，设计者将纹理、景深、光影、基调与有形的模特照片和静态的文字结合起来，更多的使用直线、坚硬的边缘、暗的色调来组成网站界面。页面中以较大面积的男性模特图片突出男式服饰这一主题，以穿插的直线段体现一种服装纹理的感觉。公司的名称则以一种柔软光滑的粗倩体来表现，以打破整个页面的坚硬感，同时以白色突出企业名称，达到非常亮眼的感觉。 3、页面结构： 整个网站采用统一的结构，分为上下两个部分，上面为网站的导航条，下面左边以不同的男式服饰图片及文字标题表示各页主题。右边为内容区，以深色带条纹的图片作为背景。 下面我们将根据上述设计分析，分不同的部分为您介绍制作过程。在新建一个文件后，我们需要对我们的工作环境进行简单的设定，以符合我们的任务要求。首先需要设定工作区的面积及背景颜色，打开Modify>Ca nvas Size针对常见的800x600分辨率，我们设定工作区的长为776这可以根据需要设定，但最好不要超过778，高为515根据实际内容确定，再执行Modify>Canvas Color设定背景色为黑色。再打开View>Grid>Edit Grid 对话框，设定水平方向网格间距为10像素，垂直方向为5像素，并将网格颜色设为暗灰色以不影响观察页面，打开网格显示和网格捕捉。如下图所示： Fireworks网页设计综合实例2 一、导入并编辑位图图像。 Fireworks4带有完善的位图创建、修改和处理功能，我们可以导入外部位图文件并对它进行编辑，可以修改和删除位图中的颜色，可以向对矢量图一样增加效果。我们的工作将从层面板开始，新建一个文件后，默认的只有两个图层Web层和Layer1层，双击Layer1层，将层名改为“背景层”。如下图所示：
一、带阴影的小球 1、新建文件：宽400px 高300 px 72pixels/inch背景白色 2、选择椭圆形工具，在“属性面板”中设置椭圆为无边框，填充为渐变---放射状，颜色为白蓝，按住shift键，绘制一个正圆，并用选择工具调整填充的效果
3、选择圆，为图形增加投影效果，宽度14，柔化4，不透明度65％， 角度315 4、为使小球界不是很明显，增加模糊效果，可多次添加模糊。
二、制作环绕文字 1、新建文件：宽600px 高400 px 72pixels/inch背景白色 2、选择文字工具，输入“Hello,welcome to Wenzhou!”：字体：Arial Black,字号：15，颜色红色（可自己选择） 3、选择椭圆工具，在画布上绘制一个椭圆 4、按住shift键，同时选择文字和椭图，再选择“文本”菜单下的“附加到路径”即可。
5、调整“文本”属性面板的水平缩放或字体大小，使环绕效果更完美。 三、制作透明按钮 1、新建文件：宽300px 高150 px 72pixels/inch背景白色 2、选择圆角矩形工具，无边框，填充色为＃006699，绘制圆角矩形 宽202，高48，并增加如下效果 ：
?投影：宽度为“6”透明度“25％”黑色柔化度为“2” ?发光：光晕宽度为“3”颜色“cccccc”柔化度为“6” 3、再绘制一个圆角矩形，无边框，填充色为＃84FFFF,宽186，高25， 并设置边缘效果为羽化，羽化值为18px 并调整位置加在上一个圆角矩形内，形成如下效果。
4、输入文本，字体“Arial Black”大小“28”颜色为“黑色”给文本 添加阴影效果，阴影宽度为“12”，透明度为“30％”，颜色为黑色，柔化度为“2”，并调整位置如下图效果即可。 四、立体特效文字制作 1、新建文件：宽400px 高200 px 72pixels/inch背景白色 2、输入文本“立体特效”，“隶书”，大小为“60”其它参数不变 选中文字，将其边框设为“黑色”，填充设为“无” 3、选中文本，编辑菜单下克隆一个文本，将新文本选中变形，修改菜 单---变形---数值变形，宽度比例“110％”高度比例“114%”
Dreamweaver网页设计与制作 一、课程性质与任务 本课程是中等职业学校计算机专业网络方向核心课程之一。本课程的主要任务是介绍利用Dreamweaver开发工具进行网页设计，包括新建、编辑和设置一个Web站点；如何对页面属性进行基本的设置，如何设置、编辑CSS层叠式样式表；如何排版文字、表格和层；如何进行基本的图像处理；建立框架；模板和库的使用和编辑；网站的发布与维护等基本知识与应用。目的是通过本课程的学习，培养学生的实际动手能力和计算机的操作能力，能够运用所学的知识进行网页设计。 本课程建议安排在二年级完成。 二、课程教学目标 1．了解WEB站点的工作原理； 2．了解、HTML、CSS的定义，概念和作用； 3．掌握HTML语言中的各种文本格式、字符格式、段落设置、列表、表单、框架、多媒体标记的作用； 4．掌握Dreamweaver应用软件的使用功能； 5．能熟练运用Dreamweaver应用软件；熟练掌握使用绝对和相对URL，创建超链接，图像链接，图像映射的建立方法； 6．掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法； 7．熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；
8．能够按网页设计技术要求修改和调试JavaScript代码； 三、教学的内容及要求 本课程的教学内容由理论模块、实训模块两个部分构成。 1.讲授模块是由教师示范操作，让学生通过练习达到掌握操作的要求；总的教学时数为36-42学时。 2.实训模块是由教师布置实训任务，由学生分组共同完成，达到熟练掌握使用Dreamweaver设计网站的要求，教学时数为48-54学时。 理论模块 第一单元网页设计概述 第二单元创建Web站点 第三单元网页设计语言基础
在Fireworks或者是PhotoShop中设计好的网页效果图，需要导入到Dreamweaver中进行排版布局。在导入到Dreamweaver之前，可以使用Fireworks对效果图进行切片和优化，然后才能够把优化好的切片输出到Dreamweaver的站点中进行布局。切片的目的是为了获得图像素材，也就是说能够通过写XHTML语言脚本实现效果的部分，就不需要切片，而必须用图像的地方，则一定要切片。下面通过一个实例来给大家介绍一下Firework s CS3的切片和优化功能，具体操作步骤如下： 1、在Fireworks CS3中打开制作好的网页效果图，如图1-23所示。 图1-23 在Fireworks CS3中打开制作好的效果图 【说明】效果图中的辅助线是在效果图设计之初就添加完毕的。 2、选择Fireworks CS3中的【切片】工具，对效果图进行切片，切片完成后的效果如图1-24所示。
图1-24 切片完成后的效果 【说明】切片的时候，尽量保证所有的切片和被切片的图像尺寸一致，不要切片大于或者小于被切片的图像，同时切片之间尽量保持不要重叠。 3、几个特别需要注意的地方来详细给大家说一下，首先是在内容区域，文本的前方有小的黑色三角箭头，这是用图像来制作的，所以必须要切片，但是由于所有文本前方的箭头图标都是一样的，所以只需要切一张即可。如图1-25所示。 图1-25 切片小图标
4、同样的道理，在这个效果图中，有很多的圆角效果，但是在切片的时候同样的效果仍旧只切片一张即可。如图1-26所示。 图1-26 切片圆角图像 5、切片完成后，选择Fireworks CS3中的【2幅】窗口，如图1-27所示。在这个窗口的左侧，是可编辑的原图，而在这个窗口的右侧，则是优化以后的图像。在这个窗口的下方，可以看到详细的关于每一个切片的文件量和下载时间等信息。
分享网页设计的案例分析 在我们美丽的地球村里,绿色随处可见,如草、叶等的绿。绿色象征着生命、青春与和平。绿色,是一种中性色,介于黄色与蓝色之间,是最适合人眼注视的色彩。由于接近自然的特性,绿色给人沉稳、平静、舒适的感觉。因此,绿色也是在网页设计中使用得最广泛的颜色之一。下面笔者就通过不同的绿色搭配方式来分析下绿色在网页设计中的色彩和文字颜色搭配。 绿色设计可以结合任何其他颜色,纹理和阴影,可以直观地改变用户的印象。添加纹理可以使颜色变暗,光滑的表面纹理则更加丰富性和富有深度。 1.绿色+白色+暗红色 如下图所示,主色调、辅色调HSB模式的数值可看出,主色调与辅色调是同一种色,只是在明度上有所不同,让页面多了些空间感、层次感。由于绿色本身的特性,所以整个网页看起来很清爽舒适。中间使用白色块面,拉开了两种绿色之间距离,增加了视觉节奏感。点晴色暗红色的加入为网页增添了一分光彩,极具诱惑感,页面瞬间活跃提神了不少,使得整个页面配色清新爽朗。 2.绿色同类色+多种点睛色 上图中用色较多,主色调为明度稍低的黄绿色,辅助色
则为高明度的黄绿色,二者形成强烈反差,增加了页面层次感。此图的点晴色有4种,包括红色与主色调绿色、蓝色与橙红色,二者互相形成对比色。虽说点晴色较多,但都按色相环顺序出现在页面上,形过一个缓和的过渡效果,让人感觉到舒服而非突兀。整个页面色彩谐调,重点突出,层次分明,热闹多彩又不失井然有序。这样的网页配色方案的设计适用于小清新类的服装网站。现今的小清新取景都倾向于海边、公路,若是主色调仍是以白色、黄粉色为主,则会显得单调枯燥。在此笔者建议可以试试看绿色加上多色点睛色的配色方案,你会大有收获。 3.突出绿色+强暗色系 此图中大家一眼就能看出位于正中间的绿色植物,与周围纯度很高的黑色相比,这样的绿色显得醒目,形成鲜明的刺激对比。这两组色彩虽然不是严格意义上的对比色,但足够在页面中形成鲜明对比,整个页面瞬间被烘托得鲜活起来。就像是在油锅中加入水滴一样,瞬间显得生动,有效地突出网页前景。整个页面显得通透鲜活,主题鲜明。此外,加入了棕色和白色的,耀眼的绿色得到平衡,起到舒缓视觉的效果,有效平衡了绿色与暗黑色的强烈对比较果。 结论: 中国人普遍认为绿色是青春,向上,活力的代表,在网页设计中也越来越多的运用绿色系,以显示网页设计的年轻的
Fireworks图形符号解析 一、符号在图片编辑中的作用 既然谈到Fireworks的符号(Library)了,那么大家还必须了解一个新概念-实例,顾名思义实例即符号对象在编辑窗口中的应用。操作上嘛!也就是把符号从Library面板里拉出来. 首先,使用符号来管理对象可以使我们更加方便的创建和更改多个相同对象,当然创建相似对象也就不在话下了. 下面深入的了解一下符号和实例之间的紧密关系,当原始符号发生变化时,相应的应用实例(没有破坏链接关系的)会自动作出修改动作,这样可以使我们在处理大型图片对象时同时操作多个相同对象的变化,当然你还可以同时应用多个符号以适应要求.相反单个实例发生变化时不会影响其他实例. 注意以下两种情况: 1,当对实例进行滤镜处理时,该实例会自动转化成图片对象而脱离符号的约束. 2,对实例作类似:变形、缩放、扭曲、透明的操作时,其他符号实例不会受影响. 其次,通过符号及实例可以创建简单的逐帧动画,确定第一帧和最后一帧然后利用Firework的自动插入帧功能完成中间帧的过渡,比如常见的放缩,渐变等. 二、如何创建符号 创建新符号可以通过三种方式完成:直接创建,转化创建和导入. 1,直接创建 建立一个新的工作文件,选择菜单"Insert"-"Symbol",然后在弹出的Symbol属性窗口中输入符号名称,另外还要确定该符号所属的类型,如图: 在上面的窗口中提供了三种不同的符号类别:
Graphic:一般的静态符号对象;Animation:动态的符号对象;Button:按钮类的符号对象. 其中前两种的编辑窗口和Firework的主窗口是完全一样的,只是在窗口的最上部以"Symbol:chinabyte.png"字样标示当然处于符号编辑状态而已.制作按钮类符号时,就不一样了,编辑窗口如图: Firework默认情况下为按钮对象分配了4个不同的Frames:Up(默认显示时);Over(鼠标滑过);Down(鼠标单击);Over while Down(单击后滑过的显示),后面的Active Area为活动显示区域。 当建立完第一帧(Up)时,鼠标单击相应标签切换到其他帧,在编辑窗口的右下位置会有一个"Copy Up Graphics"按钮,单击它可以直接复制Up帧的内容而不需要再制作.你唯一要作的就是进行细微的变化,比如改变颜色,变形了等等.
第二篇 Dreamweaver案例图文混排：几米页面的制作 要求： 运用Dreamweaver编辑编写网页，熟悉文字、段落、图片、超链接等各种页面元素的使用。 掌握背景颜色和背景图片的属性设置。 实例如下：
在dw中实现框架：上-中—下 要求： 在 Dreamweaver编辑工具中，利用前面所学的框架知识，制作上-中—下结构的框架页面；左边的超链接可以在右侧窗口打开； 各个窗口无缝连接。 实例如下： 在dw中设计漂亮表单 要求： 在 Dreamweaver编辑工具中，利用前面所学的表单和布局知识，制作一个漂亮的表单界面。熟悉表单的各种控件 简单布局1：图片合成页面 要求： 在 Dreamweaver编辑工具中，利用“布局”界面绘制布局表格和布局单元格，
制作如下图所示的页面； 掌握布局表格和布局单元格的使用方法； 注意页面的内容添加需要在“标准”界面中完成。 实例如下： 简单布局2：背景色填充表格 要求： 在 Dreamweaver编辑工具中，学会利用不同的背景颜色来填充页面； 实例如下： 布局测验：色块布局 要求： 在 Dreamweaver编辑工具中，利用“布局”界面绘制布局表格和布局单元格中，制作下图所示的页面；要求页面结构相同，颜色可以变化； 时间10分钟。
实例如下： 自己设计页面首页 要求： 参考Dreamweaver素材库，利用所学知识，制作一个漂亮的网站首页面；内容丰富、布局清晰； 看看谁的作品更漂亮！！
利用模版制作结构相同的3个页面 要求： 在 Dreamweaver编辑工具中，利用模板的功能，制作一个简单的模版，并且基于自己制作的模版，生成结构大体相同的三个页面； 超链接能够正常跳转。 实例如下： 页面一： 页面二：
所有实例制作步骤 第五讲练习--------------------------------------------------------------------------------------- 制作立体相片效果（矩形工具和扭曲变形工具、羽化效果的使用） （1）新建一文档，大小为400*300，颜色为“白色”； （2）选择工具箱中的“矩形”工具，绘制一个大小为“240*160”像素，颜色为“白色”的矩形；（3）选择【编辑】|【克隆】，克隆一个矩形； （4）改变底层矩形框的颜色为“灰色”，在属性面板里选择“边缘”为“羽化”效果，“边缘总量”为“5”； （5）选择工具箱中的“扭曲变形”工具，拉动底层矩形的右下角，使其达到立体的效果； （6）导入一副图片素材，将大小缩放到合适的位置；立体相片效果制作完毕。 ---------------------------------------------------------------------------------------------------- 制作天空的云彩实例（矩形工具、铅笔工具线条、填充的使用和滤镜） （1）新建一文档，大小为500*400，颜色为蓝色； （2）选择“矩形”工具，绘制一个和画布大小一样的矩形，利用渐变填充的“线性填充”，将矩形填充为一个“蓝、白、绿”色的线性渐变，得到一个蓝天、绿地的效果图； （3）选择工具箱中的“刷子”工具，将颜色设置为“白色”，“大小”设置为“2”，“纹理”设置为“丝褶”在编辑区任意绘制一些笔触； （4）选择【滤镜】|【模糊】|【高斯模糊】，调整模糊范围数值，确定得到效果； 用同样的方式制作各种不同的云朵，得到最终的填空云朵效果；填空云彩实例制作完毕。第四讲---------------------------------------------------------------------------------------------------- 制作齿轮的效果实例（复习路径的使用，联合，学习裁切） （1）新建一画布，大小为400*400，背景色为白色； （2）选择“椭圆”工具，在画布中绘制一椭圆，并将颜色填充为“无”，边框线设置为“黑色”；（3）选中椭圆，并对该椭圆克隆（【编辑】|【克隆】），旋转图形的角度，旋转30度（选择【修改】—【变形】|【数值变形】—选择“旋转”—“30°”—【确定】）；
第1小题(Dreamweaver单选题(1分) 下述关于图像对象的设置错误的是（_______）。 A 按住shift键后用鼠标拉动图像控制柄可保持图片宽高比例不变 B 直接在属性面板输入图像的宽高像素，也能改变图像的显示大小 C 图像属性面板中的“对齐方式”指的是调整图像与同一行中文本的相对对齐 D 对图像进行重新取样，不会影响图像品质 第2小题(Dreamweaver单选题(1分) 下列哪种软件是用于网页排版的？（_______） A Flash B Photoshop C Dreamweaver D CuteFTP 第3小题(Dreamweaver单选题(1分) Dreamweaver是哪家公司的产品？（_______） A IBM B Corel C Microsoft D Adobe 第4小题(Dreamweaver单选题(1分) 下列的HTML标记中，定义表格的单元格是（_______）。 A tr B dr C br D td 第5小题(Dreamweaver单选题(1分) 想将文字“2”设置为上标文字，在HTML5代码中应如何编写( ) A 标记符中连接图片的参数是（_______）。 A href B src
C type D align 第7小题(Dreamweaver单选题(1分) 要隐藏一个ap层(设置了绝对定位DIV盒子)，需要把它的可见性设置为（_______）。 A default B inherit C visible D hidden 第8小题(Dreamweaver单选题(1分) 如何去掉文本超级链接的下划线？( ) A a {text-decoration:none} B a {decoration:no underline} C a {underline:none} D a {text-decoration:no underline} 第9小题(Dreamweaver单选题(1分) （1）在CSS中下列哪一项是“右边框”的语法（） A border-right<值> B border-top:<值> C border-right-width: <值> D border-top-width:<值> 第10小题(Dreamweaver单选题(1分) 以下哪一种选择器是标签选择器（） A #newbox br B table C #newtext D .newtext 第11小题(Dreamweaver单选题(1分) 下列（_______）可能是自定义样式的名字。 A body B .pic C text D c
文章由情难枕精心整理，希望对大家的学习和工作带来帮助整理人：情难枕 整理时间：2011-4-10 PS经典教程 1、教你打造偏色艺术色调教程 2、·教你打造偏色艺术色调教程 3、Photoshop┾製造制造另类婚纱照片 4、⒈款粉帥氣de游戲做圖 5、PS(IR)可爱的棒棒糖 6、ps打造唯美色调 7、PS打造超炫人物效果 8、一款比较自然的眨眼教程 9、Photoshop最简易的磨皮法 10、Photoshop] 制作下雨的效果 11、小菱形背景和圆点背景的做法 12、[Photoshop] PS打造淡彩风格的幻眼效果 13、Photoshop] 用Photoshop滤镜打造梦幻艺术效果 14、Photoshop] 巧用PS打造镶满诱人钻石的文字 15、Photoshop] PS制作幽冥火焰 16、Photoshop] 简单的叠影制作方法 17、Photoshop] 制作冬季恋歌浪漫雪景效果 18、Photoshop] 用Photoshop设计另类树皮人体
19、Photoshop] 教你设计绚丽光芒效果 20、Photoshop] 教你设计胶片风情电影海报 21、Photoshop] 教你设计神秘炫光黑洞效果 22、Photoshop] PS特效字：闪亮钻石效果 23、[Photoshop] 巧绘晶莹剔透的水晶樱桃 24、Fireworks] QQ空间初级玩家必学的11条技巧 25、Flash] 给FLASH初学者的10点制作经验 26、Flash] Flash全屏效果全攻略 27、Photoshop] 利用PS图层样式绘制彩色玻璃立体文字 28、Photoshop] Photoshop制作逼真的洁白羽毛 29、Photoshop] 用PS把秋景照片变为冬景效果 30、[Photoshop] Photoshop教你给MM的衣服换个颜色 31、Photoshop] 用PS制作周迅的怀旧效果图 32、Photoshop] 转用PS轻松给MM衣服添加图案 33、Photoshop] 用PS的动态画笔制作鞭炮 34、Photoshop] 教你做天使翅膀的卡通效果 35、Photoshop] 制作融化的冰淇淋 36、Photoshop] 打造宇宙场景爆炸星球特效 37、Photoshop] 教你设计恐怖电影海报 Photoshop] 制作奔驰中的汽车 [Photoshop] 蝴蝶结边框