建设小型企业静态网站.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”属性。 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 键粘贴至“字体”文件夹内。 step 2 设计网站主页 1 . 新建文件 2 . 绘制参考线 3. 制作网站主页头文件 4 . 制作网站主页导航栏 5 . 制作网站主页主体部分（左边栏目） 6 . 设计企业简介栏目 7 . 设计特约经销商栏目 练一练 制作如图所示的网站效果图。 任务3 网页制作与内容编辑 任务目标: 1. 熟练使用Dreamweaver 软件的基本操作; 2. 能将网页设计图转化为静态网页文件。 任务实施 step 1 创建新站点 ① 启动Dreamweaver 站点，选择“站点”→“新建站点”选项。 ② 设置文件夹分别为“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 属性 ① 选择快捷