2.1 创建本地站点——我的足球网（课件）-《网页设计与制作（DreamweaverCC)》（电子工业出版社）同步精品课堂

2.1 创建本地站点——我的足球网 网页设计与制作（Dreamweaver CC) 同步精品课堂 电子工业出版社 目录 02 01 案例综述 案例分析 03 实现步骤 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 知识目标 1. 理解网站开发流程。 2. 掌握Dreamweaver CC站点管理。 1.站点规划能力。 2.网页设计与布局能力。 3.掌握内容添加与超链接设置。 能力目标 培养学生的团队协作能力，学会分工合作，共同完成任务。 情感目标 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学重难点 1. 站点规划的逻辑性与合理性 2. 超链接设置的准确性 1.Dreamweaver CC站点管理。 2. 网页布局与内容添加。 难点 重点 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 导入新课 学校“校园足球文化节”的活动 需要建立一个“校园足球网” 索如何使用Dreamweaver CC来创建并管理这个网站 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 辩一辩 小组讨论根据第一章我们学习的网站开发流程“你认为完成这个足球网网站开发中最重要的是哪个环节？” 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.1 案例综述 网站开发始于规划 本地站点是网页存储的核心。 本例将创建一个简单的站点，从中介绍本地站点的创建及站点中的文件管理 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.2 案例分析 在我的足球网站开发之前，首先要进行网站的策划，写出策划书： 网站的结构 栏目的设置 网站的风格 颜色搭配 版面布局 文字图片的运用等 然后开始用Dreamweaver 进行站点的创建，以及文件的管理。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.2 案例分析 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (1)规划站点 1)项目概述 ① 项目名称：我的足球网。 ② 项目定位：通过对足球明星的介绍、足球的实事新闻、我生活中的足球趣事等，表达 对足球爱好的个人网站。 ③ 子栏目设置：网站名为“我的足球网”,包括3个栏目，即“我与足球”、“足球新闻” “足球明星”。 ④ 分页内容：我与足球——写我对足球的感悟，我生活中的足球；足球新闻——按世界 各大联赛介绍赛事和相关新闻；足球明星——介绍足球明星(分当今的和过去的)。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (1)规划站点 2)站点文件的组织与管理 ① 在 D 盘新建文件夹myfootball,作为存放整个站点内容的文件夹，也是网站的根目录。 ② 3个栏目内容分别存放在网站根目录下的aboutme、news、photo 文件夹里。 ③ 网站所有素材图像存放于根目录下的文件夹images中。 3)网站风格 将网页背景定为绿色，以突出绿荫足球的主题。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (2)创建站点(本地站点) 1)创建本地站点文件夹： 在本地计算机上选择一个磁盘位置（如D盘），新建一个文件夹（如命名为“myfootball”），作为存放整个站点内容的文件夹，即网站的根目录。 2)存放网站文件及资料： 将设计的网页文件（如HTML、CSS、JavaScript等）以及搜集的图片、声音、文字等素材资料，存放在之前创建的根文件夹（如“myfootball”）下，以便统一管理和控制站点结构。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (2)创建站点(本地站点) 3)使用Dreamweaver CC管理站点： 打开Dreamweaver CC，选择“站点”>“新建站点”或“站点”>“管理站点”来新建一个站点。 在站点设置对话框中，为站点命名（如“myfootball”），并指定站点根文件夹的路径（如E:\Dw\ch2\）。 利用Dreamweaver CC的文件面板进行本地站点和远程站点的编辑、管理任务，包括新建文件、文件夹，设置默认图像文件夹等，以便全面系统地管理站点中的每个文件。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 部分步骤示例图 输入站点名称及本地站点文件夹 设置默认图像文件夹   掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (3)组织和管理站点文件 1)本地站点中应包含网站中的所有网页、图片、动画等资源，通过文件面板可以对这些资源进行组织和管理。 ① 右击“文件”面板中的“站点-myfootball”, 在弹出的快捷菜单中选择“新建文件”选项。 ② 系统将自动创建新文件 untitled.html。 ③ 将默认文件名untitled.html 改为index.html, 该文件为网站的主页文件，这也是本案例 要重点编辑的网页。 ④ 右击“文件”面板中的“站点-myfootball”,在弹出的快捷菜单中选择“新建文件夹” 选项。 ⑤ 系统自动创建新文件夹 untitled,图标□表示这是一个文件夹。 ⑥ 将默认文件夹名称untitled 改为 aboutme, 如图2-9所示。 ⑦ 用同样的方法创建另两个文件夹photo、news,用 aboutme、 photo 、news 文件夹存放事先设计的3个栏目内容。 ⑧ 在3个文件夹aboutme 、photo]news页文件——me.htnt photo html 、news hml 超链接指向。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 部分步骤示例图 新建文件 新建文件 untitled.html 分别在各文件夹中创建网页文件 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (4)编辑主页文件 1)设置页面风格及标题 ① 首先为要编辑的网页设置页面的统一风格，如背景色、文本样式、超链接等，在编辑区域 下方的“属性”面板中，单击 页面属性按钮，弹出“页面属性”对话框。 ② 设置左边距、上边距为0。单击“背景颜色”右侧的按钮，选择绿色作为背景色，单击“确定”按钮完成页面属性的设置。 ③ 在文档工具栏的标题文本框中输入该页面的标题文字“我的足球网” 此标题将在用户浏览网页时，显示在标题栏中。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (4)编辑主页文件 2)页面布局 ① 将光标定位于页面中，在“插入”面板的“常用”类别口 中选择“表格”选项，在弹出的“表格”对话框中设置“行” 为3,“列”为2,*表格宽度”为550,“边框粗细”为0,单 元格边距”为0,“单元格间距”为0,单击“确定”按钮，在页面中插入3行2列表格。 ② 在“属性”面板中设置表格的“Align” 为“居中对齐”。 ③ 插入表格后，需对单元格的宽度、高度加以设定，从而固定单元格中内容的位置。拖 动鼠标选中表格第一行，在其“属性”面板中单击“合并选定单元格”按钮。宽度因为是一整 行，故可省略不设，高度设置为50。 ④ 第二行的第一单元格内由于要放置图片，因此根据图片的大小设置单元格的宽为364, 高为417,在第二行中因为只有两个单元格，所以设置一个宽度后，另一个可省略，同理，高 度也可省略。 ⑤ 第三行用于放置版权信息，合并两行单元格，设置高度为90。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (4)编辑主页文件 3)向页面添加内容 ① 在表格第一行的单元格内输入文字“我的足球网”。设置单元格的“水平”、“垂直” 为“居中对齐”。选中文字“我的足球网”,在“属性”面板中设置其“格式”为“标题1”。 ② 将光标定位在第二行第一列单元格内，选择“插入”|“图像”选项，在“选择图像源 文件”对话框中，选择要插入的图像 man.jpg,单击“确定”按钮，将素材库 里的图像ch2\man.jpg 添加到页面中。 ③ 在表格的第二行第二列中，输入文字“足球明星”、“我与足球”、“足球新闻”,在文字 之间按Enter 键换行，并在下一行处插入另一张图像素材FOLDER.jpg。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (4)编辑主页文件 3)向页面添加内容 ④ 在表格的第王行中输入版权信息内容，如版权所有、建议使用的分辨率、联系方式等。 换行时按住Shif 键使行问无空行。 ⑤ 输入“本网站最后更新时间”,选择“插入”| “日期” 选项，在弹出的“插入日期”对话框中设置好显示的日期与 时间格式，一定要选中“储存时自动更新”复选框，单击“确 定”按钮，如图2-21所示。 ⑥ 选中该单元格，在“属性”面板中设置“水平”为“居 中对齐”。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 (4)编辑主页文件 4)制作栏目超链接 ① 选中文本“足球明星”后，单击“属性”面板中的超链接文本框后的浏览按钮，在弹 出的“选择源文件”对话框中，选择本地站点根文件夹中的网页文件 photo.html, 或在属性栏中的链接项处单击并拖动图标到右边“文件”面板的photo.atml-文件处。 ② 用同样的方法制作文本“我与足球”和“足球新闻”的超链接，其中“我与足球”的超链接指向文件me.html“足球新闻”的超链接指向文件“news.html” ③ 按Ctrl+S组合键保存文件，按F12键打开浏览器并预览实际效果。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 部分步骤示例图 在表格第一列内插入图像 创建超链接到目标文件 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 2.1 创建本地站点——我的足球网 2.1.3 实现步骤 部分步骤示例图 输入版权内容信息 在表格第二列输入文字及图像 页面中插入表格 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 做一做 看完教师的操作演示流程，请根据书本上的实践步骤以，使用Dreamweaver CC创建本地站点，并自己独立完成我的足球网页面的制作。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 知识拓展 在创建“我的足球网”这样的本地站点时，虽然Dreamweaver以其便捷的拖拽式编辑和强大的模板库功能能够加速开发过程，但深入理解和掌握HTML（超文本标记语言）的代码编写是不可或缺的。 HTML作为网页内容的基石，其代码的精确编写能够让我们精确控制网页的结构与布局。在利用Dreamweaver进行设计时，结合HTML代码的学习与应用，不仅能够提升技术深度，还能更有效地利用CSS和JavaScript来美化网页外观和增强功能性。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 课堂小结 2.1.2 案例分析 2.1.1 案例综述 1．网站开发始于规划 2．本地站点是网页存储的核心 创建本地站点——我的足球网 2.1.3 实现步骤 1. 规划站点。 2. 创建站点(本地站点)。 3. 组织和管理站点文件。 4. 设计网页布局。 5. 向页面添加内容，制作简单主页 略 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 谢谢 $$