静态网页任务4.ppt

任务说明 星网科技公司是一家研发、经营消费类电子产品的企业。其主要产品包括：手机、数码相机、摄像机、MP3/MP4、笔记本、台式机、上网本、家用电器等。 按照静态网站“网站需求分析→网站栏目设计→网页美工设计→网页素材编辑→网页编辑制作→网页发布与测试”的开发流程，运用相应的制作工具，完成该企业的静态网页设计与制作,实现展示企业形象和推广企业产品 。 任务安排 任务一：星网科技公司网站策划 任务二： 星网科技公司网页美工设计 任务三： 星网科技公司网页素材编辑 任务四：星网科技公司网页编辑制作 任务五：星网科技公司网页发布与测试 任务四：星网科技公司网页编辑制作 任务说明: 根据效果图和素材制作星网科技公司网站页面。至少包含网站首页（每组制作）、网站子页（每人制作1-2页）。 任务四：星网科技公司网页编辑制作 一、网页制作流程 1、新建站点（必须） 2、新建页面（首页index.html） 3、修改页面属性 4、网页布局 5、插入页面元素（图片、文字、超级链接） 6、添加css样式 7、保存，F12预览 任务四：星网科技公司网页编辑制作 二、知识要点 4.7.1 认识“CSS样式” CSS是Cascading Style Sheets（层叠样式表）的简称 在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 4.7.1 认识“CSS样式”面板 4.7.2 新建CSS样式——1 在【CSS样式】面板上，单击【新建CSS规则】按钮，打开【新建CSS规则】对话框。 4.7.2 新建CSS样式——2 【定义在】选项 【新建样式表文件】 【仅对该文档】 【选择器类型】选项 【类（可应用于任何标签）】 【标签（重新定义特定标签的外观）】 【高级（ID、伪类选择器等）】 【名称】文本框 在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以输入或者选择不同的名称。 4.7.3 网页中应用CSS样式 在【属性】面板选择应用样式 利用【标签选择器】选择样式 使用右键快捷菜单 4.7.4 删除CSS样式 选中CSS样式，点击DELETE键 选中CSS样式，按下CSS面板中的删除键 4.7.5 CSS属性详解 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS的属性，Dreamweaver把这些属性分为8个部分 Type（类型） Background（背景） Block（块） Box（盒子） Border（边框） List（列表） Positioning（定位） Extensions（扩展） 4.7.5 CSS属性详解——类型 设置文字的字体，大小，颜色，效果等样式（只对要改变的属性进行设置，没有必要改变的属性就使之为空）。 4.7.5 CSS属性详解——背景 背景面板主要是对元素的背景进行设置，包括背景颜色、背景图像、背景图像的控制。一般是对BODY（页面）、TABLE（表格）、DIV（区域）的设置。 背景颜色 背景图像 重复 附件 水平位置 垂直位置 4.7.5 CSS属性详解——区块 区块面板主要是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。 单词间距 字母间距 垂直对齐 文本对齐 文本缩进 空格 4.7.5 CSS属性详解——方框 方框面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。 宽 高 浮动 清除 填充 边界 4.7.5 CSS属性详解——边框 边框面板可以设置对象边框的宽度、颜色及样式。 样式 宽度 颜色 4.7.5 CSS属性详解——列表 列表面板可以设置列表项样式、列表项图片、和位置。 类型 项目符号图像 位置 4.7.5 CSS属性详解——定位 定位面板中的CSS属性用来确定与选定的CSS样式相关的内容在页面上的定位方式。这就相当于对象放在一个AP元素里来定位，它相当于HTML的DIV标记。可以把定义看作为一个CSS定义的AP元素。 类型 可见性 Z 轴 溢出 位置 剪辑 4.7.5 CSS属性详解——扩展（指针） 扩展面板中的CSS属性指针选项 hand：是大家所熟悉的手型 crosshair：是十字型 text：是平时鼠标移动到文本上的样式 wait：是等待的效果 default：是默认的那种效果 help：是带问号的鼠标样式 e-resize：是向右的箭头 ne-resize：是向右上方的箭头 n-resize：是向上的箭头 nw-resize：是向左上方的箭头 w-resize：是向左的箭关 sw-resize：是向左下的箭头 s-resize：是向下的箭头 se-resize：是向右