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

项目3 建设小型企业静态网站;学习目标;任务1 设计风格确定;任务实施; step 3 确定网站风格及版面 ① 颜色: 淡黄色。 ② 风格: 水墨山水。 ③ 布局: 企业形象页+ 企业主页面（“F”字形）+ 子页面。 ;任务2 设计网页版面;任务实施; 2 . 新建文档 ① 选择“文件”→“新建”选项，设置 1003 像素×600 像素、 RGB 颜色、72 像素/ 英寸、背景内容为“白色”。 ② 设置前景色为“#ffeec2”，按Alt+Delete 键进行填充。按Ctrl+S 键并命名为“形象页.psd”。 ; 3 设置标尺 按Ctrl+R 键，在标尺处单击右键，选择“像素”。 ; 4. 设置背景图片 ; 5. 设置“书法文字”图片 ; 6. 插入网站标题文字 ;试一试; step 2 设计网站主页 1 . 新建文件 2 . 绘制参考线 3. 制作网站主页头文件 4 . 制作网站主页导航栏 5 . 制作网站主页主体部分（左边栏目） 6 . 设计企业简介栏目 7 . 设计特约经销商栏目 ;练一练;任务3 网页制作与内容编辑 ;任务实施; ② 设置文件夹分别为“images”、“index.html”、“main.html”。 ③ 将准备好的网站素材复制到“images”。 ; step 2 制作形象页网页文件(index.html) （采用DIV+CSS 设计制作静态网站） 1 网页整体CSS 样式表设置（styles.css） ① 打开“index.html”，选择“CSS 样式”，空白处单击右键，选择“新建”选项。 ; ②保存新建的样式表在“images”目录下，新建文件名为“styles.css”。; ③ 设置“body”属性。 ; 2 插入Div 标签“index”并设置CSS 属性 ① 选择快捷工具栏中的“ 常用”→“插入Div 标签工具”。 ; ② 新建CSS 样式。 ; ③ 设置“.index”属性。 ; 3 插入背景图像并建立超链接 ① 选择快捷工具栏中的“常用”→“图像”选项。 ;; 4 文件保存并预览 选择“文件”→“保存”选项，按F12 键预览。 ; step 3 主页设计图转换为网页文件(header 部分) 1 链接网页整体CSS 样式表 ; 2 插入Div 标签“header”并设置CSS 属性 ① 选择快捷工具栏中的“布局”→“插入Div 标签”。 ; ② 新建“.header”样式。 ; ③ 设置“.header”属性。 ; 3 插入Div 标签“content”并设置CSS 属性 ① 选择快捷工具栏中的“常用”→“插入Div 标签”。 ; ② 新建“.content”样式。 ; ③ 设置“.content”属性。 ; 4 设置header 背景 ; 5 插入Div 标签“banner”并设置CSS 属性 ① 光标定位在div header/div 中间，选择快捷工具栏中的“常用”→“插入Div 标签”。 ; ② 新建“.header .banner”样式。 ; ③ 设置“.header .banner”属性。 ; 6 制作导航栏 ① 以段落的方式修改Div 标签banner 中文字内容。 ; ② 选中以上源代码，选择快捷工具栏中的“文本”→“项目列表”。; ③选中源代码，选择“属性”选项，设置链接。 ; ④ 新建“.header .banner ul”样式。 ; ⑤ 设置“.header .banner ul”属性。 ; ⑥ 新建“.header .banner li”样式。 ; ⑦ 设置“.header .banner li”属性。 ; 7 新建超链接并设置CSS 属性 ① 新建“.header .banner a”样式。 ; ② 设置“.header .banner a”属性。 ; 8 保存文件并预览 选择“文件”→“保存”选项实现保存。 ;step 4 主页设计图转换为网页文件(content 部分) 1. 插入Div 标签“left”并设置CSS 属性 ①光标定位在div content/div 中间，选择快捷工具栏中的“常用”→“插入Div 标签”。 ; ② 新建“.content .left”样式。 ; ③ 设置“.content .left”背景属性。 ; 2 插入Div 标签“left_1”并设置CSS 属性（企业简介） ① 光标定位在div content/div 中间，选择快捷工具栏中的“常用”→“插入Div 标签”。