《电子商务网页设计与制作》课件第六章

第六章设计与制作中小企业形象网站首页对于电子商务网站的设计与制作而言,首先要对网站首页进行确定。网站首页又称网站主页,是用户了解整个网站的关键,也是体现整个网站的主题和制作风格的关键。在网页制作中,Photoshop除了可以完成网站图像素材的编辑处理外,还能完成网站页面效果图的设计与制作,并对效果图文件进行切片,最终导出生成页面图像素材及网页文件。掌握首页的设计与制作,有助于掌握常规电子商务网站的页面制作流程,为网站的子页面制作打下基础。(1)认识Photoshop的切片工具和切片选择工具。(2)了解Photoshop切片的导出。(3)了解Flash的工作区。(4)掌握Flash的基本操作。(5)了解Flash元件和库。(6)掌握Flash补间动画和补间形状。(7)认识Flash的遮罩层。(8)了解Flash的测试和发布。(9)了解Dreamweaver的工作区。(10)掌握Dreamweaver的基本操作。(11)掌握Dreamweaver表格的创建和设置。(12)了解Dreamweaver各网页元素属性面板。学习完本章后,学生应当能够依据网站的首页效果图来制作网站的首页,包括:(1)将PSD效果图切片导出生成网页图像素材。(2)通过图像素材创建简单的Flash动画。(3)通过Dreamweaver创建表格来制作网页。第一节首页效果图切片处理及导出一、启动Photoshop,打开网页效果图为了提高制作效率,目前很多网站通常直接通过网页模板来修改完成。网页模板格式最常见的是“.psd”,可以将模板文件直接通过Photoshop打开,然后根据客户的需要进行相应的修改,完成最终的页面效果。由于在前面章节中已经详细介绍了Photoshop的操作,因此本节重点讲述效果图的切片处理,以及如何通过Dreamweaver完成网站首页面的制作。二、设置标尺和参考线

为了方便定位和测量距离,需要设置标尺和参考线。首先将标尺和参考线的单位进行常规设置。执行“编辑”→“首选项”→“单位与标尺”命令,在弹出的对话框中分别设置“单位与标尺”“参考线、网格、切边和计数”。在本节中将“单位与标尺”中的“标尺”单位设置为“像素”。通过执行“视图”→“标尺”命令,在工作区边缘显示标尺,以便参考线定位。三、使用切片工具(1)考虑按整体布局结构进行切片。(2)对整个横向导航栏和banner广告宣传栏进行整体切片,其中对于颜色复杂的区域,常采用整体框选。(3)对页面主体部分进行切片。(4)对尾部进行切片。(5)对网页背景和边框进行处理。四、使用切片选择工具如果要对切片进行精确调整,同时对切片进行命名、拆分、附加链接等操作来进一步完善,则需要通过切片选择工具来完成。单击“工具箱”中的切片选择工具,再单击网页LOGO的切片,单击鼠标右键,弹出快捷菜单，在弹出的快捷菜单中选择“编辑切片选项”,弹出该切片的“切片选项”对话框,在对话框中,将名称改为“logo”后,单击“确定”按钮。选择横向导航栏切片,在“切片选项”对话框中将名称改为“daohang”。五、将切片完成后的图片另存为Web格式

要将切片导出过渡到Dreamweaver,就需要将图片保存为Web格式。通过执行“文件”→“存储为Web和设备所用格式”命令,在弹出的对话框中进行所示的设置,单击“存储”按钮即可。六、预览导出的页面在Dreamweaver中,打开该站点“index.html”文件,切片图片则保存在该站点的图像文件夹“images”中。可通过浏览器预览该页面,完成从Photoshop过渡到Dreamweaver,实现图像切片的导出。七、切片1.切片的作用2.切片工具3.切片类型4.切片时的注意事项5.组合切片八、实例操作1.内利商城首页PSD效果图切片对含有多图层的内利商城首页PSD图像进行切片,切片后,再对结果进行优化,完成切片及网页文件的导出。2.对切片进行不同的优化对含有动画的PSD促销信息图像进行切片，在“存储为Web和设备所用格式”时,将含有动画的切片保存为GIF动画格式,其余静态切片则保存为JPEG格式。第二节制作FlashBanner条一、新建Flash文档

打开Flash,选择新建文件,在“新建”列表中可选Flash文件(ActionScript

3.0)。Flash软件的运用Photoshop类似,也是通过各类浮动工作面板和菜单选项来完成的。Flash工作区中显示文档的区域称为舞台,类似Photoshop的“画布”。舞台的大小,可通过创建文件后的工作区,利用其文档的“属性”面板中的“大小”选项进行设置,在本节中,舞台大小设置为838×312像素,其余采用默认设置。同样,也可通过执行“修改”→“文档”命令来完成。二、修改舞台大小三、创建背景图层banner宣传区动画由三幅背景图像切换构成。首先,双击“时间轴”面板上的“图层1”,将其更名为“背景”,选中第1帧。执行“文件”→“导入”→“导入到舞台”命令,在弹出的对话框中通过路径选择“flash”文件夹中的“背景1.jpg”,完成导入文件。四、新建元件通过执行“插入”→“新建元件”命令,打开“创建新元件”对话框,在元件编辑界面中,输入文本“浙江内利信息技术有限公司”,设字体为楷体,大小为30。再在其下方输入“Zhejiang

Neili

Information

Technology

Co.,Ltd”并调整其位置,属性设置如图6选中文字,选择“滤镜”面板,在添加滤镜中选择“投影”,完成滤镜设置后,再分别将两段文字颜色设置为白色,通过单击“场景1”返回原舞台场景。五、将元件运用到舞台六、创建补间动画七、创建“背景2.jpg”对应文字

按照相同的方法新建元件“卡宣传”,文字内容为“综合缴费

小额支付”,大小为28,颜色为白色,灰色投影。再新建元件“卡宣传2”,文字内容为“轻松便利生活

就要内利卡”,大小为32,颜色为白色,灰色投影。八、创建“背景3.jpg”对应文字九、创建遮罩层十、预览动画十一、调整动画速度十二、保存Flash动画十三、发布Flash动画十四、实例操作1.补间形状动画2.Flash导航条第三节制作首页页面一、启动Dreamweaver打开页面将所需素材放入内利站点内对应的文件夹中,通过Dreamweaver打开在内利站点中产生的首页“index.html”。为了便于分析页面结构布局,通过单击“布局”工具栏的“扩展”按钮,进入扩展表格模式,在弹出的“扩展表格模式入门”对话框中单击“确定”按钮后,在该模式下,分析从Photoshop自动导出的网站首页面的结构布局模式,可以看出表格中单元格布局较为凌乱。为了提高网页编辑效率,减少切片图片数量,只保留核心切片图片,一般需要通过Dreamweaver重新规划页面的表格布局来实现网站首页面的制作。二、设置页面属性在页面“index.html”中,将网页标题设为“浙江内利信息技术有限公司”,按下Enter键后,若在页面名称后出现“*”标记,表示页面有修改而未保存。这时可通过执行“文件”→“保存”命令对修改内容进行保存,“*”标记即可消失。三、创建首页整体结构

执行“插入记录”→“表格”命令,在弹出的对话框中设定表格的行数和列数等相关属性,具体在空白页面中插入一个1行3列、宽度为961像素的表格。四、创建首页Logo区域按Tab键将光标切换到原表格的最后一列所在的单元格中,再按Tab键可自动在已有表格的下方追加一行。按Tab键将光标切换至第2行第2列中,在其“属性”面板中将单元格的“垂直”参数设置为“顶端”,在以上单元格中插入一个1行2列、宽度为100%的表格,单击“常用”插入栏中的“图片”，在弹出的对话框中选择站点图像文件夹“images”下的图片“logo.jpg”,完成LOGO图片的插入,然后将该单元格的宽度设置为和图片的宽度相一致,即“337”像素。五、创建首页导航栏部分将光标置于上一个表格的最后一个单元格中,按Tab键追加一行。将光标置于新插入行的中间单元格中,在单元格的“属性”面板中将其“水平”参数设置为“居中对齐”。然后单击“常用”插入栏中“媒体”下拉列表中的“Flash”按钮，在弹出的“选择文件”对话框中选择站点根目录下“Flash”文件夹中的“dh.swf”文件,单击“确定”按钮,在弹出的“对象标签辅助功能属性”对话框中,单击“确定”按钮,完成Flash文件的插入。六、创建首页banner宣传区部分将光标置于上一个表格的最后一个单元格中,按Tab键追加一行。七、创建首页主体区域板块根据首页效果图所示,主体区域板块主要分为3个栏目区,即“内利简介”“内利动态”和“内利加盟商”。将光标置于上一个表格的最后一个单元格中,按Tab键追加一行。将光标移至新插入行的中间单元格中,在单元格的属性面板中将其“垂直”参数设置为“顶端”。八、创建网页底部中的“合作伙伴”区域选中首页主体区域部分最外层的表格,按向右的光标键,连续按两次Tab键,在原有表格的基础上追加一行,将光标定位至中间单元,插入一个1行3列、宽度为100%的表格,背景颜色设置为“#f1f1f1”。九、创建首页中的版权区域在原有表格尾部继续追加一行,将该行的单元格“高度”设置为“15”,这部分用于留白,在空间上起到内容分隔的作用。十、保存并预览网页完成整个页面制作后,将页面保存,并通过浏览器预