资源简介

(共58张PPT)
中等职业教育国家规划教材
电子商务
项目五
商务网页的制作
目录
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
项目五
商务网页的制作
目录
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1
任务情境：根据天津爱特米诺电子有限公司的背景与现状，在前段时间里张家豪对公司网站做了详细的设计和安排，为使后期制作能正常、顺利进行，他决定按计划流程做好前期的准备工作：如熟悉DreamWeaver cs5工作环境，创建本地站点等。
2
任务分析本任务主要是了解DreamWeaver cs5工作环境与各面板的功能，根据公司的具体情况与领导的要求规划站点，并创建本地站点及首页。
3
任务实施：
步骤一：了解DreamWeaver cs5的工作环境
步骤二：创建本地站点
步骤三：创建首页
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1
任务情境：根据天津爱特米诺电子有限公司的背景与现状，在前段时间里张家豪对公司网站做了详细的设计和安排，为使后期制作能正常、顺利进行，他决定按计划流程做好前期的准备工作：如熟悉DreamWeaver cs5工作环境，创建本地站点等。
2
任务分析本任务主要是了解DreamWeaver cs5工作环境与各面板的功能，根据公司的具体情况与领导的要求规划站点，并创建本地站点及首页。
3
任务实施：
步骤一：了解DreamWeaver cs5的工作环境
步骤二：创建本地站点
步骤三：创建首页
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
DreamWeaver cs5工作环境
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
创建本地站点
在开始定义站点之前请先在本地磁盘创建
一个文件夹，作为站点根文件夹。（此处
创建的文件夹名为“aiteminuo” ）
注意
启动Dreamweaver CS5后， 选择“站点”——“新
建站点”菜单，打开【站点设置对象未命名站点】
对话框——……
方法
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
创建首页
启动Dreamweaver CS5后，选择“文件”->“新
建”菜单，或按 【ctrl+N】组合键，打开“新
建文档”对话框。
1
在左侧的【文档类型】列表中选择一项”，在【页面类
型 】列表中选择网页类型，在【布局】列表中选择布
局类型，单击“创建”按钮，便创建了一新的网页文档。
2
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1
任务情境：经过前期的准备，张家豪已经在白纸上为公司网站首页结构进行了设计，可他现在担心的是自己这样的设计将来做出来的网页是否符合美学欣赏标准，能否吸引浏览者的目光，同时又能否容纳下公司足够多的信息？张家豪通过查阅书籍与咨询，得知他所担心的这一切都与网页的布局息息相关。
2
任务分析：本任务主要是掌握表格、CSS及CSS+DIV等网页布局方法，并能根据公司的具体情况选择合理的网页布局。
3
任务实施：
步骤一：布置表格
步骤二：应用CSS样式
步骤三：使用DIV+CSS规划网页布局
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1
任务情境：经过前期的准备，张家豪已经在白纸上为公司网站首页结构进行了设计，可他现在担心的是自己这样的设计将来做出来的网页是否符合美学欣赏标准，能否吸引浏览者的目光，同时又能否容纳下公司足够多的信息？张家豪通过查阅书籍与咨询，得知他所担心的这一切都与网页的布局息息相关。
2
任务分析：本任务主要是掌握表格、CSS及CSS+DIV等网页布局方法，并能根据公司的具体情况选择合理的网页布局。
3
任务实施：
步骤一：布置表格
步骤二：应用CSS样式
步骤三：使用DIV+CSS规划网页布局
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
布置表格——设计结构图
Logo 爱特米诺电子
首页 智能 产品 成功 案例 业内 动态 体验与 分享 合作 伙伴 关于 我们 招贤 纳士 下载区
Banner（宣传广告）
业内动态
产品展示
快速链接 体验馆 动态展示
案例展示
网站备案
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
布置表格——插入表格并设置表格参数
按【Ctrl+ALT+T】 键或
单击“插入” 栏中“表格”按钮，
创建表格
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
布置表格——表格布局后效果图
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
布置表格——提高网页下载速度
在一个网页中，当一张表格的高度需要设置很高时，可以考虑把一个表格拆分成若干个表格，注意将拆分后的表格设置为相等，这样，表格的排版效果没变，但显示时各小表格的内容逐渐显示出来，可明显加快页面的打开速度。另外，在使用嵌套表格时，最好不要层次太多，否则会加长网页打开时间。
温馨提示
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
应用CSS样式
CSS（Cascading Style Sheets的简称）
的中文翻译为层叠样式表， CSS的定义是
由3部分构成：选择器（selector） 、属性（property）和取值（value）
CSS的概念
1.类样式：由用户自定义的CSS样式，能够应用到
网页中的任何标签上，可以任意命名，以“.”开始，
如“.h”等，它是将CSS样式应用于选定的区域。
2.标签样式：对现有的HTML标签进行重定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新。
3.ID样式：可以定义含有特定ID属性的标签。
4.复合内容样式：定义同时影响两个或多个标签、类或ID的复合规则。
CSS的种类
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
单击【CSS】面板中的“新建CSS规
则”按钮，即可弹出【新建CSS规则】对话框，具体设置如图所示，单击“确定”按钮。
CSS的创建
应用CSS样式
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
CSS规则定义的8种分类
1.“类型”：用于定义CSS样式的基本字体和类型等属性。
2.“背景”：用于定义CSS样式的背景属性。
3.“区块”：用于定义标签和属性的间距和对齐方式。
4.“方框”：用于定义元素放置方式的标签和属性。
5.“边框”：用于定义元素的边框（如颜色、宽度和样式）。
6.“列表”：用于定义列表标签设置列表属性（如项目符号大小和类型）。
7.“定位”：用于对元素进行定位设置。
8.“扩展”：用于设置一些附加属性（如滤镜、分页和光标形状）。
CSS的创建
应用CSS样式
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
选中页脚导航栏中“智能产品”等文字，在属性面板的【目标规则】栏中选择刚才建立的“.yanse_bai”(如图所示)，即可完成CSS样式的应用。
CSS的应用
应用CSS样式
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
1.表现和内容相分离
2.提高页面浏览速度
3.易于维护与修改
CSS的优点
应用CSS样式
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
DIV+CSS是网页布局的另一种方式。DIV是网页的“块”，网页中的元素均可以划分到不同的块中。以块为单位，块及块中所包含元素的属性通过CSS进行控制，从而实现整个页面的布局。与表格布局的页面相比，使用DIV+CSS布局的网页，代码简洁，结构清晰，而向搜索引擎更加友好，而且网站中包含多个网页，通过修改CSS就能完成批量页面的变化、修改起来十分方便，降低了网站的维护成本。
DIV+
CSS
使用DIV+CSS规划网页布局
步骤一
步骤二
步骤三
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
DIV包括DIV标签和AP DIV（本文简称AP层）两种。DIV标签的定位类型为“静态”；AP层的定位类型为“绝对”，可以根据它的TOP和LEFT来规定这个层的显示位置。
DIV的概念
步骤一
步骤二
步骤三
使用DIV+CSS规划网页布局
——DIV的基本概念和操作
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1、分析网页结构
DIV的基本操作
步骤一
步骤二
步骤三
“公司宣传网页”效果图 “公司宣传网页”布局结构图
使用DIV+CSS规划网页布局
——DIV的基本概念和操作
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
2、创建AP层
（1）插入AP层。选择菜单命令“插入”->“布局对象”->“AP DIV”，即可创建一个默认大小的AP层 （2）设置AP层的属性
DIV的基本操作
步骤一
步骤二
步骤三
插入AP层效果图
AP层属性面板
使用DIV+CSS规划网页布局
——DIV的基本概念和操作
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
3、插入DIV标签
将光标置于相应层内，然后选择菜单命令“插入”->“布局对象”->“DIV标签”，打开【插入DIV标签】对话框，参数设置如图所示 ——……
DIV的基本操作
使用DIV+CSS规划网页布局
——DIV的基本概念和操作
步骤一
步骤二
步骤三
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1.页面布局与规划
2.写入整体层结构与CSS
操作步骤
使用DIV+CSS规划网页布局
步骤一
步骤二
步骤三
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1
任务情境：就公司的背景与现状以及网站在今后希望所起到的效应，张家豪与相关人员进行了讨论与规划，且对公司网站的首页与内页进行了布局。但仅有规划与布局还是远远不够的，还必须得在网页上添加丰富多彩的内容方可吸引浏览者的眼球。在接下去的日子里，张家豪的主要工作就是确定网页风格与颜色搭配，并为网页添加相应的网页元素，及各页面之间的关系导航。
2
任务分析：本任务主要是丰富网页内容，且为各网页之间设置链接关系。另外，通过创建模板与库来提高网页制作的效率。
3
任务实施：
步骤一：制作首页
步骤二：创建模板和库
步骤二：设置超链接
步骤二：插入表单
步骤二：制作简单动画
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1
任务情境：就公司的背景与现状以及网站在今后希望所起到的效应，张家豪与相关人员进行了讨论与规划，且对公司网站的首页与内页进行了布局。但仅有规划与布局还是远远不够的，还必须得在网页上添加丰富多彩的内容方可吸引浏览者的眼球。在接下去的日子里，张家豪的主要工作就是确定网页风格与颜色搭配，并为网页添加相应的网页元素，及各页面之间的关系导航。
2
任务分析：本任务主要是丰富网页内容，且为各网页之间设置链接关系。另外，通过创建模板与库来提高网页制作的效率。
3
任务实施：
步骤一：制作首页
步骤二：创建模板和库
步骤三：设置超链接
步骤四：插入表单
步骤五：制作简单动画
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
所谓首页，也叫主页，就是打开网站时所见到第一张网页，是浏览一个网站的入口。
制作首页
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作首页——确定网页风格与色彩搭配
网页风格
贴近民俗 喜闻乐见
色彩搭配
主色调：绿色（象征科技与环保）
点晴色：蓝色
背景色：浅灰色
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作首页——添加网页元素
基础网页元素
文本、图像
高级网页元素
Flash、视频、音频
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作首页——添加网页元素
文本
文本的输入与编辑
输入文本
修改属性
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作首页——添加网页元素
图像
插入——图像——“选择图像源文件”对话框
——“图像标签辅助功能属性”
“替换文本”有何作用？
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作首页——添加网页元素
Flash
插入——媒体——“SWF”——……
想一想：FLASH背景透明与否有什么不一样的效果？
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
创建模板与库——创建模板
方法
新建空白模板文档
将已经制作好的普通网页转换成模板
文件——另存为模板——
确定模板文档文件名——更新链接
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
创建模板与库——编辑模板
创建可编辑区域
打开模板文件，确定可编辑区域，“插入”
——“模板对象”——“可编辑区域”——……
更改可编辑区域名称
删除可编辑区域标记
选中可编辑区域——“修改”——“模板”
——“删除模板标记”
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
创建模板与库——应用模板
文件——新建——在“新建文档”对话框中选择“模
板中的页”——选择相应的模板文件——创建
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
创建模板与库——管理模板
更新模板
删除模板
分离模板
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
创建模板与库——创建库项目
库项目是一种特殊类型的Dreamweaver文件，
我们可以将当前网页中的任意页面元素定义
为库项目，如图像、表格、文本、声音和
Flash影片等。创建库项目的好处是可以在
多个网页中重复使用，每当更改某个库项
目时，所有应用该库项目的网页都可以同
时更新。
打开相应网页，确定要创建库项目区域，“修改”
——“库”——“增加对象到库”菜单——……
注：库项目的扩展名为.lbi，一般被存放在library
文件夹中，且位置不能随便移动。
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
创建模板与库——应用库项目
库项目的应用方法非常简单，只需从【资源】
面板的库窗格中将其拖入到文档的适当位置即
可。此外，也可在定位插入点后，选中库中的
项目并单击“资源”面板底部的“插入”按钮，将
库项目插入到文档中。
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
设置超链接
连接这些单个网页的桥梁就是超链接。超链接
由两部分组成，分别为源端点和目标端点。超
链接中有链接的一端为链接的源端点，跳转到
的页面称为链接的目标端点。
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
设置超链接——设置链接样式
在创建链接之前，需要对网页链接的样式进行
设置，其中包括链接字体、链接颜色、变换图
像链接颜色、已访问链接颜色、已访问链接颜
色、活动链接颜色以及链接下划线样式等。
选择“修改”菜单“->“页面属性”，打开【页面属
性】对话框，并切换至【链接（CSS）】面板
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
设置超链接——链接的类型
（1）文本链接：链接源为文本，分内、外部链接。
（2）图像链接：链接源为图像，分整张图像链接和在图像
上创建热区两种方式。
（3）锚链接：主要用于内容较多的网页，链接对象为创建
的锚点名，如“#TOP”。
（4）空链接：指未指定目标端点的链接，链接源文本和图
像均可，链接目标为“#”。
（5）电子邮件链接：链接源只能为文本，链接目标为“邮箱
地址”，格式为：“mailto:电子邮箱地址”。
（6）下载链接：为了资源共享所创建的链接，链接目标为
“文件的具体地址”，创建方法与一般链接相同。
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
设置超链接——创建链接
文本链接 图像链接
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
插入表单——表单的组成部分
在互联网的应用中，表单是不可或缺的一个网页组成
元素，在人机交互过程中起到了越来越重要的作用，
如在论坛、留言板、网络调查问卷中，都可看到表单
运用的影子，是用户沟通的一个桥梁。
（1）表单标签：包含了处理表单数据的方法
（2）表单域：包含用于采集信息的表单对象。
（3）表单按钮：包括提交按钮、复位按钮和一般按钮。
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
插入表单——表单属性面板
表单ID：设置表单名称，可用于程序调用。
动作：用于指定处理该表单的动态页或脚本文件的路径，
可以直接键入完整的路径，也可以单击编辑框右侧的文件来图
标来选择站点中的文件。如果没有相关程序支持，也可以使
用E-MAIL方式传输表单信息，此时只需在“动作”编辑框中输
入“mailto:电子邮箱地址”即可。
方法：选择传送表单数据的方式，分GET方式与POST方式。
目标：选择打开返回信息网页的方式。如果在“动作”
属性中使用了E-MAIL方式，则“目标”为空。
编辑类型：指定提交给服务器的数据所使用的编码类型。
类：对表单应用定义好的CSS样式。
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
插入表单——插入表单对象（文本域）
确定插入点位置，单击“插入”——“表单”类别
中“文本字段”——……
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作简单动画
为提高网页的视觉效果，舒缓眼睛疲劳，制作
者们经常会在网页中增加一些简单的动画，如
滚动字幕、滚动图片、图像晃动、浮动广告等
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作简单动画——制作滚动字幕
滚动字幕在网页经常会用到，例如公告栏、欢迎词等。
选中相应的文本（此处以“欢迎光临天津爱特米诺电子
有限公司网站”为例，并切换到代码窗口，在其位置
增加下列代码：
欢迎光临天津爱特米诺电子有限公司网站
marquee各参数详解
ascrollAmount：它表示速度，值越大速度越快。如果没有
它，默认为6，建议设为1～3比较好。
width和height：表示滚动区域的大小，width是宽度，height
是高度。特别是在做垂直滚动的时候，一定要设height的值。
direction：表示滚动的方向，默认为从右向左：←。可选的
值有right、down、up。滚动方向分别为：right表示→，up
表示↑，down表示↓。
scrollDelay：这也是用来控制速度的，默认为90，值越大
Behavior：用它来控制属性，默认为循环滚动，可选的值
有alternate(交替滚动)、slide(幻灯片效果，指的是滚动一次，
然后停止滚动)
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作简单动画——制作动态导航图像
所谓动态导航图像，就是诸如鼠标经过图像时，图像会发生
变化等情况 。操作方法如下：
选中导航条上的“成功案例”图像（以这为例）并删除，选择
“插入”->“图像对象”->“鼠标经过图像”，弹出【插入鼠标经过
图像】对话框 ——……
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作简单动画——制作晃动图像
所谓晃动图像，就是鼠标经过（或单击等）时，该图像会晃
动几下。若想网页中的关键图像引起浏览者的特别注意时，
往往会将其设置成特殊的效果。操作方法如下：
选中相应的图片，此处为（“产品展示”栏目中的“智能家居”图
片） ，选择“窗口”->“行为”菜单，弹出【行为】面板——……
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作简单动画——制作晃动图像
行为及其事件与动作
行为由事件和动作两部分组成，事件是指“用户的操作”，
如鼠标移到对象上方、离开对象或双击对象等；而动作
是指“发生什么”，如打开浏览器窗口、播放声音或弹出信
息等。一般的行为都是由事件来激活动作。
事件
Onload：在浏览器中加载完网页时发生的事件。
Onclick：鼠标单击对象时发生的事件。
Onfocus：对象获得焦点时发生的事件。
Onmousedown：单击鼠标左键（不必释放鼠标键）是发生
的事件。
Onmousemove：鼠标指针经过对象时发生的事件。
Onmouseover：鼠标指针移至对象上方时发生的事件。
Onmouseup：当按下的鼠标按键被释放时发生的事件。
动作
拖动AP元素：利用该动作允许用户拖动AP元素。
转到URL：发生指定事件时跳转到指定的网页。
打开浏览器窗口：在新窗口中打开网页，并可设置新窗口
的宽度和高度等属性。
弹出信息：显示带指定信息的JaveScript警告。
设置状态栏文本：在浏览器左下角的状态栏中显示信息。
显示-隐藏元素：显示、隐藏一个或多个AP元素，或者恢复
其缺省属性。
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
步骤一
步骤二
步骤三
步骤四
步骤五
制作简单动画——制作浮动窗口
浮动窗口在网页中的使用频率很高，一般都是为了打广告
或链接一个新链接时使用。切换的代码视图，将代码粘贴
到与之中,并将链接地址与图片地址修改
成自己需要的地址
温馨提示：诸如浮动广告窗口等网页特效，现在有很
多网站都提供下载，只需对代码适当的加以修改即可。
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1
任务情境：经过一段时间的紧张忙碌，张家豪终于完成了公司网站的制作。在这一段反反复复的制作与修改中，张家豪也体会到一个网站是否吸引网上冲浪者的眼球，除了有丰富的内容之外，网页美化也是至关重要的。下面张家豪就网页美化的个人经验与大家分享、探讨。
2
任务分析：本任务主要是分析网页美化时，如何做到合理的规范布局与色彩的完美搭配。
3
任务实施：
步骤一：规范布局
步骤二：色彩搭配
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
1
任务情境：经过一段时间的紧张忙碌，张家豪终于完成了公司网站的制作。在这一段反反复复的制作与修改中，张家豪也体会到一个网站是否吸引网上冲浪者的眼球，除了有丰富的内容之外，网页美化也是至关重要的。下面张家豪就网页美化的个人经验与大家分享、探讨。
2
任务分析：本任务主要是分析网页美化时，如何做到合理的规范布局与色彩的完美搭配。
3
任务实施：
步骤一：规范布局
步骤二：色彩搭配
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
风格定位
政府部门：庄重
娱乐行业：活泼生动
文化教育：高雅大方
电子商务：贴近民俗
喜闻乐见
步骤一
步骤二
版面编排
主次分明，中心突出
大小搭配，相互呼应
图文并茂，相得益彰
规范布局
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
网页色彩搭配的原理
1.色彩的鲜明性
2.色彩的独特性
3.色彩的合适性
4.色彩的联想性
色彩
搭配
步骤二
步骤一
任务一
认知DW CS5
任务二
设计网页布局
任务三
制作网页
任务四
美化网页
网页色彩搭配技巧
1.使用单色 2.使用邻近色
3.使用对比色 4.使用黑色
5.背景色的使用 6.色彩的数量
7.要和网站内容匹配 8.围绕网页主题
步骤二
步骤一
色
彩
搭
配
单色网页
紫色邻近色配色：紫色+紫红色
高纯度对比：蓝色+玫瑰色
漂亮的黑色网站
谢谢！

展开更多......

收起↑