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

1、L/O/G/O项目3 建设小型企业静态网站学习目标学习目标1. 能够熟悉网站设计与制作的整体流程。2. 能够使用图像处理软件设计网站的形象页及首页。3. 能够使用网页编辑软件将页面的设计稿转换成静态网页。4. 会收集与筛选信息，能够通过有效沟通、讨论等方式确定网站的建设方案。任务任务1 设计风格确定设计风格确定任务目标任务目标:根据公司的具体情况，确定公司网根据公司的具体情况，确定公司网站的主色调、主风格和整体布局。站的主色调、主风格和整体布局。任务实施任务实施step 1 收集资料，了解企业情况收集资料，了解企业情况step 2 设计元素梳理设计元素梳理step 3 确定网站风格及版面确定网

2、站风格及版面 颜色: 淡黄色。 风格: 水墨山水。 布局: 企业形象页+ 企业主页面（“F”字形）+ 子页面。任务任务2 设计网页版面设计网页版面任务目标任务目标:1. 掌握Photoshop 软件基本操作；2. 能够根据整体设计方案来设计并制作网页设计图。任务实施任务实施step 1 设计形象页设计形象页1. 准备素材准备素材2 . 新建文档新建文档 选择“文件”“新建”选项，设置 1003 像素600 像素、 RGB 颜色、72 像素/ 英寸、背景内容为“白色”。 设置前景色为“#ffeec2”，按Alt+Delete 键进行填充。按Ctrl+S 键并命名为“形象页.psd”。3 设置标尺

3、设置标尺按Ctrl+R 键，在标尺处单击右键，选择“像素”。4. 设置背景图片设置背景图片5. 设置设置“书法文字书法文字”图片图片6. 插入网站标题文字插入网站标题文字试一试试一试如何安装新的字体？如何安装新的字体？下载新字体文件“李旭科毛笔行书.ttf”（本项目已经提供，也可自行上网下载）。选择“开始”“控制面板”“字体”菜单项，选择文件“李旭科毛笔行书.ttf”，按Ctrl+C键 Ctrl+V 键粘贴至“字体”文件夹内。step 2 设计网站主页设计网站主页1 . 新建文件2 . 绘制参考线3. 制作网站主页头文件4 . 制作网站主页导航栏5 . 制作网站主页主体部分（左边栏目）6 .

4、设计企业简介栏目7 . 设计特约经销商栏目练一练练一练制作如图所示的网站效果图。任务任务3 网页制作与内容编辑网页制作与内容编辑 任务目标任务目标:1. 熟练使用Dreamweaver 软件的基本操作;2. 能将网页设计图转化为静态网页文件。任务实施任务实施step 1 创建新站点创建新站点 启动Dreamweaver 站点，选择“站点”“新建站点”选项。 设置文件夹分别为“images”、“index.html”、“main.html”。 将准备好的网站素材复制到“images”。 step 2 制作形象页网页文件制作形象页网页文件(index.html)（采用DIV+CSS 设计制作静态网

5、站）1 网页整体网页整体CSS 样式表设置（样式表设置（styles.css） 打开“index.html”，选择“CSS 样式”，空白处单击右键，选择“新建”选项。 保存新建的样式表在“images”目录下，新建文件名为“styles.css”。 设置“body”属性。 2 插入插入Div 标签标签“index”并设置并设置CSS 属性属性 选择快捷工具栏中的“ 常用”“插入Div 标签工具”。 新建CSS 样式。 设置“.index”属性。 3 插入背景图像并建立超链接插入背景图像并建立超链接 选择快捷工具栏中的“常用”“图像”选项。 设置热点新建超链接。 4 文件保存并预览文件保存并预览

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

7、插入插入Div 标签标签“banner”并设置并设置CSS 属性属性 光标定位在 中间，选择快捷工具栏中的“常用”“插入Div 标签”。 新建“.header .banner”样式。 设置“.header .banner”属性。 6 制作导航栏制作导航栏 以段落的方式修改Div 标签banner 中文字内容。 选中以上源代码，选择快捷工具栏中的“文本”“项目列表”。 选中源代码，选择“属性”选项，设置链接。 新建“.header .banner ul”样式。 设置“.header .banner ul”属性。 新建“.header .banner li”样式。 设置“.header .bann

8、er li”属性。7 新建超链接并设置新建超链接并设置CSS 属性属性 新建“.header .banner a”样式。 设置“.header .banner a”属性。8 保存文件并预览保存文件并预览选择“文件”“保存”选项实现保存。step 4 主页设计图转换为网页文件主页设计图转换为网页文件(content 部分部分)1. 插入插入Div 标签标签“left”并设置并设置CSS 属性属性光标定位在 中间，选择快捷工具栏中的“常用”“插入Div 标签”。 新建“.content .left”样式。 设置“.content .left”背景属性。2 插入插入Div 标签标签“left_1”并设置并设置CSS 属性（属性（企业简介）企业简介） 光标定位在 中间，选择快捷工具栏中的“常用”“插入Div 标签”。 新建“.content .left .left_1”样式。 设置“.content .left .left_1”背景属性。 选择快捷工具栏中的“ 常用”“ 图像”选项。 以段落的方式插入文字。 选中源代码，选择快捷工具栏中的“文本”“项目