§2单元2制作文本网页(424KB).ppt

网页设计与制作 任务驱动式教程 单元2　制作文本网页 教学环节 【教学导航 】 1 【操作准备 】 2 【引导训练/引导训练考核评价】 3 【同步训练 /同步训练考核评价】 4 【拓展训练 /拓展训练考核评价】 5 【教学导航】 教学目标 （1）学会建立站点目录结构 （2）熟悉创建和保存网页文档等基本操作 （3）学会设置网页的首选参数 （4）掌握设置网页的整体属性 （5）掌握在网页中输入文字、编辑文本、设置文本属性的操作方法 （6）掌握在网页中设置项目列表、输入空格和文本换行的操作方法 （7）掌握在网页中插入特殊字符、水平线和日期的操作方法 （8）熟悉HTML的基本结构 本单元重点 （1）对网页文档的基本操作 （2）在网页中输入文字、编辑文本和设置文本属性 （3）在网页中设置项目列表、输入空格和文本换行 本单元难点 （1）设置项目列表、输入多个连续空格 （2）网页中插入特殊字符、插入水平线 教学方法 任务驱动法、分组讨论法、四步训练法（操作准备－引导训练－同步训练－拓展训练） 课时建议 4课时（含考核评价） 【操作准备】 1．创建所需的文件夹，拷贝所需的资源 2．创建站点 创建一个名称为“单元2”的本地站点，站点文件夹为“Unit02”。 3．熟悉新建网页文档的方法 新建网页文档的方法主要有以下几种。 方法一：启动Dreamweaver CS6时，会出现一个如图2-1所示的界面，它包括“打开最近项目”、“新建”、“主要功能”等多个可选项，在该界面单击【HTML】便可以直接创建一个HTML网页文档。 【操作准备】 方法二：在Dreamweaver CS6主窗口中，选择命令【文件】→【新建】或者直接单击【标准】工具栏中的【新建】按钮，弹出【新建文档】对话框，在最左侧默认选中了“空白页”，在“页面类型”列表框默认选中了“HTML”，在“布局”列默认选中了“无”，如图2-2所示。直接单击【创建】按钮，此时在Dreamweaver CS6的文档窗口区域创建了一个名称为“Untitled-1”的网页文档。 方法三：在【文件】面板中，右键单击文件夹，在弹出的快捷菜单中选择命令【新建文件】，如图2-3所示。此时在文件夹中会新建一个默认名称为“untitled.html”网页文档，将网页文档的名称重命名为所需要的名称（例如0201.html）即可。 【引导训练】 【任务2-1】制作总览旅游景点的文本网页 本单元“引导训练”的任务卡如表2-1所示。 【引导训练】 （1）在站点“单元2”中建立文件夹“task02-1”。 （2）在文件夹“task02-1”中建立子文件夹“text”。 【任务描述】 【任务2-1-1】建立站点目录结构 【任务实施】 （1）建立子文件夹“task02-1” （2）建立子文件夹“text” 【引导训练】 （1）新建一个网页文档。 （2）将新建的网页文档保存在文件夹“task02-1”中，命名为“0201.html”。 【任务描述】 【任务2-1-2】创建与保存网页文档0201.html 【任务实施】 1．创建网页文档 2．保存网页文档 【引导训练】 （1）设置启动Dreamweaver CS6时不再显示欢迎屏幕。 （2）设置新建网页文档的默认扩展名为“.html”，默认编码为“Unicode (UTF-8)”。 （3）设置复制文本时的参数为“带结构的文本以及全部格式（粗体、斜体、样式）”。 【任务描述】 【任务2-1-3】设置网页的首选参数 【任务实施】 （1）打开“首选参数”对话框 在Dreamweaver CS6主界面中，选择命令【编辑】→【首选参数】或者使用快捷键“Ctrl+U”，即可打开【首选参数】对话框，如图2-11所示。 （2）设置启动Dreamweaver CS6时不再显示欢迎屏幕 （3）设置新建网页文档的默认扩展名为“.html”，默认编码为“Unicode (UTF-8)” （4）设置“复制/粘贴”参数 【引导训练】 （1）网页的“外观”属性设置要求如下所示 网页的“页面字体”设置为“宋体”，“大小”设置为“14px”；“背景颜色”设置为“#DDF4FC”；“左边距”和“右边距”设置为“30px”，“上边距”和“下过距”设置为“10px” （2）网页的“链接”属性设置要求如下所示 网页的链接字体设置为“仿宋_GB2312”，大小为“14px”链接颜色为“blue”，变换图像链接的颜色为“aqua”，已访问链接的颜色为“olive”，活动链接的颜色为“red”，下划线样式为“仅在变换图像时显示下划线” （3）网页的“标题”属性设置要求如下所示 将网页的标题字体设置为“黑体”。标题1的大小为“24px”，颜色为“#0000FF”；