电子商务网页制作-项目六

1、项目六 设计与制作中小企业网站首页面项目综述 本项目主要通过对浙江内利信息技术有限公司的企业形象展示网站首页的制作,使学生掌握首页制作的主流流程。具体包括通过Photoshop软件来完成首页效果图的切片处理及导出,生成网页基础素材以及通过Dreamweaver软件来完成最后的首页面的制作与测试。项目目标能力目标：学习完本项目后,学生应当能够依据网站的主题按照网站制作的标准流程进行页面的设计与制作,包括:(1)利用Photoshop软件完成页面效果图的切片及导出。(2)利用Dreamweaver软件完成页面的具体制作。知识目标：(1)Photoshop的切片工具和切片选择工具。(2)Dreamw

2、eaver的基本操作。(3)Dreamweaver表格的创建和设置。(4)Dreamweaver各网页元素属性面板。Part 01任务一首页效果图切片处理及导出任务引导 本任务的目标本是基于浙江内利信息技术有限公司的企业形象网站的首页效果图来完成切片的处理及导出。任务实施1.启动Photoshop，打开网页效果图2.设置标尺和参考线3.使用切片工具4.使用切片选择工具5.切片的导出及生成知识分析1.切片的作用切片的作用在于依据网页布局及参考线将大图切割成小图,从而加快网页图片的下载速度,降低网页的整体大小。2.切片工具的使用（1）选择工具箱上的“切片工具”。（2）依据参考线,通过拖动鼠标的方式

3、进行图片的切割,在通过切片工具创建切片时,按住“Shift”键并拖动可使切片为正方形,按住“alt”键可使切片从中心向四周扩展。知识分析 （3）如果要对切片做细微的调整,可以选中相应的切片, 在弹出的菜单中选择“编辑切片选项”,在弹出的对话框中可以对切片的大小及位置做精确的设定 。 （4）如果需要切片的图片布局比较简洁,也可以采用基于参考线的切片来完成图片的切割。 （5）执行“存储为Web和设备所用格式”命令,可以完成切片的导出,在弹出的对话框中将保存类型设为“HTML和图像(*.html)”,将切片设为“所有用户切片”,最后点击“保存”按钮即可。3.切片时的注意事项 各个切片的边界尽应可能多

4、的处于同一横坐标或纵坐标上。这样便于调整每个切片的边界,也便于在Dreamweaver中编辑。拓展练习 对提供的购物网站首页效果图源文件进行切片处理及导出。习题1.下载一个韩国电子商务平台的网页PSD模板,在Photoshop中进行简单修改后,执行切片导出。2.了解切片选择工具栏中 的作用。Part 02任务二内利公司形象网站首页的设计与制作任务引导 本任务的目标是使用Dreamweaver软件完成内利公司形象网站首页的制作。任务实施1.新建站点及首页文件2.制作网站头部3.制作网页主体部分4.制作网站版权部分知识分析 1. 表格布局的作用 为了使页面元素准确定位,可以采用表格进行页面布局。通

5、过表格布局的页面在不同的浏览器跨平台时有较好的兼容性,表格布局是网页中最常用的布局方式之一。在表格布局的时候通常会遵循这样的方法,即先使用较大的表格对网页的版面进行大致的控制和区域的分配,再使用嵌套表格对细节进行刻画。为了使网页的显示不受显示器分辨率的影响,外部表格的宽度和高度一般以像素为单位,而嵌套表格的宽度和高度一般以百分比为单位。知识分析 2.表格的常规操作 (1)创建表格。 点击“插入”菜栏的表格后,弹出“表格”对话框 。在对话框中进行参数的设置完成表格的创建。 (2)设置表格属性。 表格由行和列组成,行和列交叉的部分称为单元格。当选中整个表格时“属性”面板会显示表格属性面板 。 (3)设置单元格、行或列属性。当选中一个或多个单元格,或者选中表格的一行或多行、一列或多列单元格时,“属性”面板会显示对应的单元格或者行、列属性面板,可设置这些单元格的相关属性。拓展练习 要求基于任务一拓展练习的网站首页效果图,使用Dreamweav