静态网页任务4

1、1湖南省中等职业学校专业教师湖南省中等职业学校专业教师省本级培训省本级培训模模 块：静态网页设计块：静态网页设计 教教 师：罗卓君师：罗卓君 邝月娟邝月娟湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块2任务说明 星网科技公司是一家研发、经营消费类电子产品的星网科技公司是一家研发、经营消费类电子产品的企业。其主要产品包括：手机、数码相机、摄像机、企业。其主要产品包括：手机、数码相机、摄像机、MP3/MP4MP3/MP4、笔记本、台式机、上网本、家用电器、笔记本、台式机、上网本、家用电器等。等。 按照静态网站按照静态网站“网站需求分析网站需

2、求分析网站栏目设计网站栏目设计网网页美工设计页美工设计网页素材编辑网页素材编辑网页编辑制作网页编辑制作网页网页发布与测试发布与测试”的开发流程，运用相应的制作工具，的开发流程，运用相应的制作工具，完成该企业的静态网页设计与制作完成该企业的静态网页设计与制作, ,实现展示企业实现展示企业形象和推广企业产品形象和推广企业产品 。 湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块3任务安排任务安排任务一：星网科技公司网站策划任务一：星网科技公司网站策划任务二：任务二： 星网科技公司网页美工设计星网科技公司网页美工设计任务三：任务三： 星网科技公

3、司网页素材编辑星网科技公司网页素材编辑任务四：星网科技公司网页编辑制作任务四：星网科技公司网页编辑制作任务五：星网科技公司网页发布与测试任务五：星网科技公司网页发布与测试 湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块4任务四：星网科技公司网页编辑制作任务说明任务说明: :根据效果图和素材制作星网科技公司网站页面。至根据效果图和素材制作星网科技公司网站页面。至少包含网站首页（每组制作）、网站子页（每人少包含网站首页（每组制作）、网站子页（每人制作制作1-21-2页）。页）。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省

4、本级培训静态网页设计模块静态网页设计模块5任务四：星网科技公司网页编辑制作一、网页制作流程一、网页制作流程1 1、新建站点（必须）、新建站点（必须）2 2、新建页面（首页、新建页面（首页index.htmlindex.html）3 3、修改页面属性、修改页面属性4 4、网页布局、网页布局5 5、插入页面元素（图片、文字、超级链接）、插入页面元素（图片、文字、超级链接）6 6、添加、添加csscss样式样式7 7、保存，、保存，F12F12预览预览湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块6任务四：星网科技公司网页编辑制作二、知识要点

5、二、知识要点4.1.1 Dreamweaver 的工作环境起始页湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块7 4.1.2 Dreamweaver工作环境简介菜单栏工具栏文档编辑区属性面板面板组湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块84.1.3 Dreamweaver的三种视图模式代码视图设计视图拆分视图湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块94.1.4 建立站点设置站点名称湖南省中等职业学校专业教师省本

6、级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块104.1.5 新建页面 新建HTML网页文档注意：o页面的后缀名为html/htmo首页命名为index.htmo网页一定要保存到站点内o网页名必须为非中文湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块114.1.6 新建页面 编辑和保存网页湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块124.1.7 新建页面 预览网页湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模

7、块静态网页设计模块134.2.1 插入文字o直接通过键盘输入直接通过键盘输入o粘贴剪贴板中的文字粘贴剪贴板中的文字o导入导入WordWord文档文档湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块14o设置文本字体设置文本字体4.2.2 设置文本格式o关于设置文本格式关于设置文本格式o设置文字大小设置文字大小o设置文本颜色设置文本颜色o设置文字标题设置文字标题Dreamweaver中的文本格式设置与使用标准的字处理程序类似。可以为文本块设置默认格式（段落、标题 1、标题 2 等）、更改所选文本的字体、大小、颜色和对齐方式，或者应用文本样式

8、（如粗体、斜体和下划线）。 湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块154.2.3 输入文本空格输入法切换到半角状态，按空格键只能输入一个输入法切换到半角状态，按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：以下几种方法来实现： 将输入法切换到中文全角状态。 直接按“Ctrl+Shift+Space”组合键。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块164.2.4 实现文本换行输入多行文本，要实现换

9、行，可以按输入多行文本，要实现换行，可以按EnterEnter键或者键或者按按ShiftShiftEnterEnter组合键来实现。按组合键来实现。按EnterEnter键，换行键，换行的行距较大，按的行距较大，按ShiftShiftEnterEnter组合键，换行的行组合键，换行的行距较小。距较小。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块174.2.5 插入相关文本要素插入特殊字符插入特殊字符 菜单【插入】【HTML】【特殊字符】插入 插入水平线插入水平线插入时间插入时间湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业

10、教师省本级培训静态网页设计模块静态网页设计模块184.2.6 设置段落格式设置段落对齐设置段落对齐段落间距和换行标签段落间距和换行标签两端对齐左对齐右对齐居中对齐定位光标在此处湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块194.3.1 插入图像o插入图像插入图像o插入图像占位符插入图像占位符图像占位符，顾名思义是在需要使用图形图像占位符，顾名思义是在需要使用图形的地方先插入一个占位图形先的地方先插入一个占位图形先“占领占领”着地着地盘。盘。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页

11、设计模块204.3.2 设置图像属性o图片宽度图片宽度o图片高度图片高度o替换文本替换文本o源文件源文件o图片边框图片边框o图片对齐方式图片对齐方式湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块214.4 插入Flash动画oFLASH动画（动画（SWF格式）格式）oFLASH按钮按钮oFLASH文本文本oFLASH视频视频湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块224.5.1 创建超级链接文字创建超级链接文字创建超级链接图片创建超级链接图片创建超级链接文本由默认颜色变为蓝

12、色，并且下面多了一条下划线湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块234.5.2 设置超级链接1超级链接的组成与分类超级链接的组成与分类湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块244.5.3 设置超级链接2路径 绝对路径绝对路径 文档相对路径文档相对路径 站点根目录相对路径。站点根目录相对路径。链接目标 _blank _parent _self _top湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块254.6.

13、1 插入表格在网页中创建一个新的表格有在网页中创建一个新的表格有3 3种方法：种方法： 打开【插入记录】菜单，选择【表格】命令。 单击常用面板中的按钮。 直接按快捷键Ctrl+Alt+T。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块264.6.2 设置表格属性表格宽度表格宽度边框粗细边框粗细 单元格边距单元格边距单元格间距单元格间距边框边框清除列宽和清除行高清除列宽和清除行高 将表格宽度转换成像素和将表格宽度转换成百分比将表格宽度转换成像素和将表格宽度转换成百分比背景颜色背景颜色 边框颜色边框颜色 背景图像背景图像 湖南省中等职业学校

14、专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块274.6.3 表格布局网页1网页排版构成网页排版构成 顶部，包括网站的LOGO区及BANNER区 网站导航条 页面的主体区 最下面是网站的底部，是网站的版权声明区湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块284.6.4 表格布局网页2创建表格创建表格设置表格的边框、填充、间距均为设置表格的边框、填充、间距均为0 0设置表格的宽度，即页面的宽度设置表格的宽度，即页面的宽度根据内容的排版设定表格的行数和列数根据内容的排版设定表格的行数和列数表格嵌套（

15、正文部分内容排布复杂）表格嵌套（正文部分内容排布复杂）湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块294.6.4 表格布局网页3设置单元格属性设置单元格属性 设置单元格对齐方式 设置单元格的高度和宽度湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块304.6.5 布局表格布局网页切换到表格布局模式切换到表格布局模式 绘制“布局表格” 绘制“布局单元格” 绘制嵌套布局表格湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块314.

16、7.1 认识“CSS样式”CSSCSS是是Cascading Style SheetsCascading Style Sheets（层叠样式表）（层叠样式表）的简称的简称 在在DreamweaverDreamweaver中，中，“CSSCSS样式样式”面板是新建面板是新建、编辑、管理、编辑、管理CCSCCS的主要工具。选择的主要工具。选择“窗口窗口”|“CSS|“CSS样式样式”命令可以打开或者关闭命令可以打开或者关闭“CSSCSS样式样式”面板。面板。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块324.7.1 认识“CSS样式”面板

17、样式表文件名样式表文件名CSS规则列表规则列表属性和属性值属性和属性值列表列表工具按钮栏工具按钮栏类别视图类别视图湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块334.7.2 新建CSS样式1在【在【CSSCSS样式】面板上，单击【新建样式】面板上，单击【新建CSSCSS规则】按规则】按钮，打开【新建钮，打开【新建CSSCSS规则】对话框。规则】对话框。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块344.7.2 新建CSS样式2【定义在】选项【定义在】选项 【新建样式表文件】

18、【仅对该文档】【选择器类型】选项【选择器类型】选项 【类（可应用于任何标签）】 【标签（重新定义特定标签的外观）】 【高级（ID、伪类选择器等）】 【名称】文本框【名称】文本框 在这个文本框中输入CSS规则名称。根据所选择的“选择器类型”的不同，这里可以输入或者选择不同的名称。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块354.7.3 网页中应用CSS样式在【属性】面板选择应用样式在【属性】面板选择应用样式利用【标签选择器】选择样式利用【标签选择器】选择样式使用右键快捷菜单使用右键快捷菜单湖南省中等职业学校专业教师省本级培训湖南省中等

19、职业学校专业教师省本级培训静态网页设计模块静态网页设计模块364.7.4 删除CSS样式选中选中CSSCSS样式，点击样式，点击DELETEDELETE键键选中选中CSSCSS样式，按下样式，按下CSSCSS面板中的删除键面板中的删除键湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块374.7.5 CSS属性详解在在DreamweaverDreamweaver的的CSSCSS样式里包含了样式里包含了W3CW3C规范规范定义的所有定义的所有CSSCSS的属性，的属性，DreamweaverDreamweaver把这些把这些属性分为属性分为8

20、 8个部分个部分 Type（类型） Background（背景） Block（块） Box（盒子） Border（边框） List（列表） Positioning（定位） Extensions（扩展）湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块384.7.5 CSS属性详解类型设置文字的字体，大小，颜色，效果等样式（只设置文字的字体，大小，颜色，效果等样式（只对要改变的属性进行设置，没有必要改变的属对要改变的属性进行设置，没有必要改变的属性就使之为空）。性就使之为空）。湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本

21、级培训静态网页设计模块静态网页设计模块394.7.5 CSS属性详解背景背景面板主要是对元素的背景进行设置，包括背景颜背景面板主要是对元素的背景进行设置，包括背景颜色、背景图像、背景图像的控制。一般是对色、背景图像、背景图像的控制。一般是对BODYBODY（页面）、（页面）、TABLETABLE（表格）、（表格）、DIVDIV（区域）的设置。（区域）的设置。 背景颜色 背景图像 重复 附件 水平位置 垂直位置 湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块404.7.5 CSS属性详解区块区块面板主要是设置对象文本文字间距、对齐方区块面

22、板主要是设置对象文本文字间距、对齐方式、上标、下标、排列方式、首行缩进等。式、上标、下标、排列方式、首行缩进等。 单词间距 字母间距 垂直对齐 文本对齐 文本缩进 空格湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块414.7.5 CSS属性详解方框方框面板主要设置对象的边界、间距、高度、宽方框面板主要设置对象的边界、间距、高度、宽度、和漂浮方式等。度、和漂浮方式等。 宽 高 浮动 清除 填充 边界湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块424.7.5 CSS属性详解边框边框

23、面板可以设置对象边框的宽度、颜色及样式边框面板可以设置对象边框的宽度、颜色及样式。 样式 宽度 颜色湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块434.7.5 CSS属性详解列表列表面板可以设置列表项样式、列表项图片、和列表面板可以设置列表项样式、列表项图片、和位置。位置。 类型 项目符号图像 位置湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块444.7.5 CSS属性详解定位定位面板中的定位面板中的CSSCSS属性用来确定与选定的属性用来确定与选定的CSSCSS样式相关样式相

24、关的内容在页面上的定位方式。这就相当于对象放在的内容在页面上的定位方式。这就相当于对象放在一个一个APAP元素里来定位，它相当于元素里来定位，它相当于HTMLHTML的的DIVDIV标记。标记。可以把定义看作为一个可以把定义看作为一个CSSCSS定义的定义的APAP元素。元素。 类型 可见性 Z 轴 溢出 位置 剪辑湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块454.7.5 CSS属性详解扩展（指针）扩展面板中的CSS属性指针选项 hand：是大家所熟悉的手型：是大家所熟悉的手型 crosshair：是十字型：是十字型 text：是平

25、时鼠标移动到文本上的样式：是平时鼠标移动到文本上的样式 wait：是等待的效果：是等待的效果 default：是默认的那种效果：是默认的那种效果 help：是带问号的鼠标样式：是带问号的鼠标样式 e-resize：是向右的箭头：是向右的箭头 ne-resize：是向右上方的箭头：是向右上方的箭头 n-resize：是向上的箭头：是向上的箭头 nw-resize：是向左上方的箭头：是向左上方的箭头 w-resize：是向左的箭关：是向左的箭关 sw-resize：是向左下的箭头：是向左下的箭头 s-resize：是向下的箭头：是向下的箭头 se-resize：是向右下方的箭头：是向右下方的箭头 auto：是系统自动的效果：是系统自动的效果湖南省中等职业学校专业教师省本级培训湖南省中等职业学校专业教师省本级培训静态网页设计模块静态网页设计模块464.7.5 CSS属性详解扩展（滤镜）扩展面板中的CSS属性滤镜选项 Alpha：设置透明度：设置透明度 Blur：建立模糊效果：建立模糊效果 Chroma：把指定的颜色设置为透明：把指定的颜色设置为透明 DropShadow：建立投射阴影：建立投射阴影 F