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

③ 设置“.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 标签”。 ② 新建“.content .left .left_1”样式。 ③ 设置“.content .left .left_1”背景属性。 ④ 选择快捷工具栏中的“ 常用”→“ 图像”选项。 ⑤ 以段落的方式插入文字。 ⑥ 选中源代码，选择快捷工具栏中的“文本”→“项目列表。 ⑦ 新建“.content .left .left_1 ul”样式。 ⑧ 设置“.content .left .left_1 ul”属性。 ⑨ 新建“.content .left .left_1 li”样式。 ⑩ 设置“.content .left .left_1 li”属性。 L/O/G/O 项目3 建设小型企业静态网站 学习目标 1. 能够熟悉网站设计与制作的整体流程。 2. 能够使用图像处理软件设计网站的形象页及首页。 3. 能够使用网页编辑软件将页面的设计稿转换成静态网页。 4. 会收集与筛选信息，能够通过有效沟通、讨论等方式确定网站的建设方案。 任务1 设计风格确定 任务目标: 根据公司的具体情况，确定公司网站的主色调、主风格和整体布局。 任务实施 step 1 收集资料，了解企业情况 step 2 设计元素梳理 step 3 确定网站风格及版面 ① 颜色: 淡黄色。 ② 风格: 水墨山水。 ③ 布局: 企业形象页+ 企业主页面（“F”字形）+ 子页面。 任务2 设计网页版面 任务目标: 1. 掌握Photoshop 软件基本操作； 2. 能够根据整体设计方案来设计并制作网页设计图。 任务实施 step 1 设计形象页 1. 准备素材 2 . 新建文档 ① 选择“文件”→“新建”选项，设置 1003 像素×600 像素、 RGB 颜色、72 像素/ 英寸、背景内容为“白色”。 ② 设置前景色为“#ffeec2”，按Alt+Delete 键进行填充。按Ctrl+S 键并命名为“形象页.psd”。 3 设置标尺 按Ctrl+R 键，在标尺处单击右键，选择“像素”。 4. 设置背景图片 5. 设置“书法文字”图片 6. 插入网站标题文字 试一试 如何安装新的字体？ 下载新字体文件“李旭科毛笔行书.ttf”（本项目已经提供，也可自行上网下载）。 选择“开始”→“控制面板”→“字体”菜单项，选择文件“李旭科毛笔行书.ttf”，按Ctrl+C键→ Ctrl+V 键粘贴至“字体”文件夹内。