电子商务网站建设及维护课件：项目三 建设小型企业静态网站.ppt

《电子商务网站建设及维护课件：项目三 建设小型企业静态网站.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、项目3建设小型企业静态网站学习目标1.能够熟悉网站设计与制作的整体流程。2.能够使用图像处理软件设计网站的形象页及首页。3.能够使用网页编辑软件将页面的设计稿转换成静态网页。4.会收集与筛选信息，能够通过有效沟通、讨论等方式确定网站的建设方案。任务1设计风格确定任务目标:根据公司的具体情况，确定公司网站的主色调、主风格和整体布局。任务实施step1收集资料，了解企业情况step2设计元素梳理step3确定网站风格及版面①颜色:淡黄色。②风格:水墨山水。③布局:企业形象页+企业主页面（“F”字形）+子页面。任务2设计网页版面任务目标:1.掌握Photosho

2、p软件基本操作；2.能够根据整体设计方案来设计并制作网页设计图。任务实施step1设计形象页1.准备素材2.新建文档①选择“文件”→“新建”选项，设置1003像素×600像素、RGB颜色、72像素/英寸、背景内容为“白色”。②设置前景色为“#ffeec2”，按Alt+Delete键进行填充。按Ctrl+S键并命名为“形象页.psd”。3设置标尺按Ctrl+R键，在标尺处单击右键，选择“像素”。4.设置背景图片5.设置“书法文字”图片6.插入网站标题文字试一试如何安装新的字体？下载新字体文件“李旭科毛笔行书.ttf”（本项目已经提供，也可自行上网下载）。选择

3、“开始”→“控制面板”→“字体”菜单项，选择文件“李旭科毛笔行书.ttf”，按Ctrl+C键→Ctrl+V键粘贴至“字体”文件夹内。step2设计网站主页1.新建文件2.绘制参考线3.制作网站主页头文件4.制作网站主页导航栏5.制作网站主页主体部分（左边栏目）6.设计企业简介栏目7.设计特约经销商栏目练一练制作如图所示的网站效果图。任务3网页制作与内容编辑任务目标:1.熟练使用Dreamweaver软件的基本操作;2.能将网页设计图转化为静态网页文件。任务实施step1创建新站点①启动Dreamweaver站点，选择“站点”→“新建站点”选项。②设置文件夹

4、分别为“images”、“index.html”、“main.html”。③将准备好的网站素材复制到“images”。step2制作形象页网页文件(index.html)（采用DIV+CSS设计制作静态网站）1网页整体CSS样式表设置（styles.css）①打开“index.html”，选择“CSS样式”，空白处单击右键，选择“新建”选项。②保存新建的样式表在“images”目录下，新建文件名为“styles.css”。③设置“body”属性。2插入Div标签“index”并设置CSS属性①选择快捷工具栏中的“常用”→“插入Div标签工具”。②新建CSS

5、样式。③设置“.index”属性。3插入背景图像并建立超链接①选择快捷工具栏中的“常用”→“图像”选项。②设置热点新建超链接。4文件保存并预览选择“文件”→“保存”选项，按F12键预览。step3主页设计图转换为网页文件(header部分)1链接网页整体CSS样式表2插入Div标签“header”并设置CSS属性①选择快捷工具栏中的“布局”→“插入Div标签”。②新建“.header”样式。③设置“.header”属性。3插入Div标签“content”并设置CSS属性①选择快捷工具栏中的“常用”→“插入Div标签”。②新建“.content”样式。③设置

6、“.content”属性。4设置header背景5插入Div标签“banner”并设置CSS属性①光标定位在