一体化课程教案——基本型网站开发

一体化课程教案（首页）
一体化课程教案（内页）
1
2
3
4
5
7
8
9
10
11
12
13
14
15
（教学评价）
16
17
18
基本型网站开发——“七彩云南”主题旅游网站
学习任务：“七彩云南”主题旅游网站
学习目标
通过完成本次任务，学生能够
●通过多方调研明确客户需求，撰写需求确认分析说明书；
●通过组内讨论，做好网站开发详细计划，撰写项目工作计划表；
●通过小组分工合作，自主探究学习，设计有特色的网站；
●通过测试，发现存在问题并提出解决方案；
●能够展示小组作品的优势和特色，并能客观评价他人；
●通过基于工作情境的角色扮演，熟悉网站开发的工作流程，并从中获得沟通表达，解决问题的经验，
体验团队合作与信息共享的乐趣。

建议课时：24课时
资讯
【任务描述】小李刚刚通过应聘进入了一家旅游公司，公司让他负责网站的维护与更新工作。

公司为了能在金秋旅游节活动中迅速抢占商机，推出了“七彩云南”精品线路，希望通过制作专题网站达到增强宣传和服务客户的效果。

由于时间紧迫，现要求小李与策划部进行快速沟通和需求分析，完成资料的整理和素材的简单加工，设计出基本框架，再通过网页编辑工具完成网页版面的制作和内容元素的编辑，最后通过公司服务器发布网站到互联网上。

明确任务后，教师帮助学生理解任务要求、分析任务，并介绍创建站点、绘制草图、表格在页面布局中的作用，同时提供获取资讯的方法和途径等信息。

学生根据老师的提示及任务，寻找完成任务所需要的资料。

例如：
1、浏览相关产品宣传网站，参考网页布局结构
2、制作网站总体设计说明书
3.收集网页素材资源，包括景点图片的拍摄与收集，旅游线路、景点介绍文字说明等。

决策
学习准备
1.在教师协调下学生自愿分组
2.广播教学区：多媒体广播教学设备；
3.分组实操区：配备8组工作台，每组工作台有6台电脑；
4.实物资料查询区：《Dreamweaver MX2004》、导学课件
5.电子资料查询区：连接Internet提供上网搜索资料；
6.作品演示区：配备投影仪及展示板；
引导问题
为旅游公司设计旅游网站，在开始构思的时候需要充分地了解客户需求，要达到什么目的、效果？产品有什么特点？主要的客户群体是什么？以什么样的内容服务形式出现？
在教师协调下学生自愿分组，进行探究式学习，学生经过讨论以小组方式拟定工作过程，确定网页素材，网页表格的添加方式，辅助的选用，美化设计等，教师听取学生的决策意见，提出可行性方面的质疑，提供指导意见，帮助形成方案并指导学生进行方案优化，最终做出决策，形成团队实施方案。

1、用户访谈，收集需求
通过“策划部门充分沟通，了解专题网站的基本要求，浏览策划部门提供的资料，收集各种需求
2、引导需求要点
9)通过与用户沟通，引导用户提出具体需求
10)指导用户选择与网站主题相关的域名，要便于访问者使用
11)根据所能提供的条件，明确网站建设的规模
12)根据用户的实际情况确定主页要呈现的内容和方式
13)明确网站所采用的语言
14)明确页面的宽度和色彩风格
15)明确导航项目和子页内容呈现方式
16)明确开发时间和后期维护要求
3、需求说明确认
计划
在需求分析的基础上，网站建设负责人根据实际情况，明确实施目标，确定实施方案，并将其递交给客户，由其负责人签字确认
工作计划表：
实施
学生根据计划方案完成设计和模拟，做好相关资料的记录，教师监督学生的学习过程，通过【引导问题】和【学习思考】培养学生分析问题、解决问题的能力，纠正学习偏差。

教师下发学习任务，学生根据学习任务做好完成任务的计划，教师对任务重点难点进行讲解和分析，学生认真做好知识点记录，并安排好完成计划的时间和步骤，重点掌握重要知识点，使学习计划能够按时完成，根据计划方案操作完成设计任务，并做好相关记录。

由于刚开始接触网页制作，学生对软件的使用都还没有基础，因此，本任务应先由教师分模块演示并讲解一些重要操作，学生同步进行模仿训练。

而对知识掌握得相对比较熟练、操作比较快的学生，在操作过程中如果遇到问题，教师可引导学生查找相关的教材、教学参考书中的相关内容或通过网络获取相关内容，引导他们解决问题。

而那些对知识把握得较慢的学生，则可详细讲解或建议学生反复学习相关章节的内容。

鼓励小组成员在工作过程中互相帮助，解决在完成任务中所遇到的问题。

任务一：准备工作
引导问题
在建设网站的时候需要准备什么素材？有哪些素材是应该由客户提供的呢？放置素材的文件夹该如何设置？
一、任务目标
能够浏览并整理客户提供的资料和素材。

能够通过网络搜索获得素材。

二、任务实现
1.整理提供的资料和素材
客户提供的资料和素材往往随机存放，显得比较混乱。

为了便于认识需求和后续的制作，需要将其整理、归类。

在此过程中，利用资源管理器运行文件夹整理，熟悉文件夹和文件的建立、复制、移动、删除等操作，从而增强对客户业务流程的认识，拓展后续制作的思路。

练一练：
将客户提供的资料包，如图1—1所示，按预想的思路整理成整齐的资料包，如图1—2所示。

图1—1
2.认真浏览图1—3所示的主页效果图和图1—4所示的子页效果图。

图1-3
图1-4
任务二：站点建立与管理
引导问题
在建设网站的时候，为什么要建立站点？如何进行站点管理？
一、任务目标
能够建立站点与主页，规划好站点目录文件结构，并对站点文件实施管理，如图1—5所示。

图1-5
二、任务实现
1.认识网页编辑工具
Dreamweaver是Macromedia公司的一款“所见即所得”的网页编辑工具，其启动界面如图1—6所示。

Dreamweave采用的是Mac机浮动面板的设计风格，对于初学者来说可能会感到不适应。

Dreamweave对于DHTML的支持特别好，可以轻松实现炫目的页面特效。

本项目默认以Dreamweave网页编辑工具为例展开学习。

图1-6
试一试：
请打开Dreamweaver ，了解界面。

将Dreamweaver 界面的各组成部分填写在相应的标记框中：
除了这款以外，还有 、 、 等其他网页编辑工具。

2.站点创建与管理
（1）新建站点
站点不同于网页，一个站点不仅包含大量的网页文件，还包括图片、动画。

、视频、音频等文件，并且这些文件是相互关联的，需要通过创建一个站点来对网站各类元素进行集中管理。

按下面步骤新建一个站点。

在起始界面中选择“创建新项目”》“dreamweaver站点”
如图1-7示，定义站点名字，输入“七彩云南”。

图1-7
由于本项目的制作网站属于纯静态网站，如图1—8示，选择“否，我不想使用服务器技术。

”
如图1—9示，单击“浏览文件夹”按钮，选择网站所在的位置文件夹。

图1—9
因为目前网站采用本地编辑，所以“您如何连接到远程服务器？”选择“无”这一项，如图1—10所示。

图1—10
到此为止，一个站点已经创建，请观察“文件”浮动面板。

试一试：
1.尝试用dreamweaver新建一个站点。

2.创建站点是设计网站的第一步，请为我们的网站创建站点文件夹并使用Dreamweaver进行站点管
理操作并写出详细步骤。

（2）站点管理
可以通过在站点中创建、复制、删除文件夹和文件对象来构建网站文件系统。

一个网站编辑工具可
以创建许多站点，可以对它们进行统一管理，包括站点信息的修改、站点的复制与删除、站点的导出与导入等操作。

①网站目录结构规划
在所创建的站点中规划好图1-11所示的目标结构。

图1-11
选中，右击，通过快捷菜单进行文件夹、主页文件的创建操作，实现图1-11所展示的效果。

说明：站点文件将按类型存放，其中，files文件夹放置网页，images文件夹放置图片，jdxc文件夹放置网站相册、index.htm文件为主页文件。

②多站点管理
选择“站点”→“管理站点”菜单命令，打开“管理站点”对话框，复制“金秋雁荡之旅专题网站”，将其主目录设置为自定义的一个文件夹，达到图1-12所示的效果。

图1-12
将“七彩云南”站点导出，导出后的文件名后后缀为。

当系统重装或更换计算机后可以重新导入文件，减少重新工作量。

回到“文件”浮动面板，观察它的变化，尝试不同站点之间的切换。

任务三：网页版面布局
引导问题
网页布局的方法有哪些？常用的网页布局是如何的？
一、任务目标
认识常见的版面布局，能够依据用户需求，利用表格工具设计并制作出网页框架。

二、任务实现
1．常见版面布局
设计网页时，不仅要合理安排内容，也要使页面美观精致，仅仅通过对文本和图片的堆积排列是不够的。

Dreamweaver提供了表格、层和框架等工具，可以制作出复杂的页面结构，再配合文字和图片，就可以制作优秀的网页。

接下来先认识几种常见的网页布局风格。

(1)“厂”字形布局
页面顶部为标志和广告条，下方左面为主菜单，右面显示正文信息。

这是一种广泛采用的布局方式。

雨点是页面结构清晰，主次分明；缺点是规矩呆板，如果色彩搭配不当，容易令人厌烦。

（2）“国”字形布局
也称“同”字形布局，是一些大型网站所采用的类型，即最上面是网站的标题以及横幅广告条，接下来是网站的一些基本信息。

联系方式、版权声明等。

（3）“三”字形布局
者是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。

这种布局的特点是在页面上由横向两条色块将网页整个分割为三部分，色块中大多放置广告条或更新和版权提示信息。

（4）“川”字形布局
整个网页在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。

（5）Flash布局
这种布局是指整个网页就是一个Flash动画，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。

其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。

其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。

练一练：
指出下列网页所属的类型。

请分析以下网站的结构：
网站1 网站2
网站3 网站4
请写出上面4个网站各属于哪种网页设计框架结构
1、网站1是属于的网页设计框架结构
2、网站2是属于的网页设计框架结构
3、网站3是属于的网页设计框架结构
4、网站4是属于的网页设计框架结构
2.实施版面布局
（1）页面设置
根据用户需求和效果合理设置页面属性，包括网站标题、页面边距、背景等，如图1-13所示。

图1-13
方法一：单击“修改”菜单，选择“页面属性”菜单项。

方法二：在下方属性面板中单击“页面属性”。

设置页面的“外观”属性，默认字体大小为12像素，选择相应的背景图片，上边距为0像素，其他采用默认值，如图1-14所示。

图1-14
设置页面的“标题/编码”属性，将标题设置为“七彩云南——云南长风旅行社”，如图1-15所示。

图1-15
（2）使用布局表格进行布局
使用布局表格和布局单元格技术来实现网页版面定位。

步骤1单击插入栏的下拉按钮，展开插入栏，单击“布局”选项，打开布局栏，如图1-16所示。

图1-16
单击“布局视图”按钮，将文档窗口切换至布局视图。

在弹出的“从布局视图开始”对话框中，单击“确定”按钮，关闭该对话框，如图1-17所示。

图1-17
步骤2单击“绘制布局表格”按钮，绘制如图1-18所示的布局表格，表格大小为797×848像素。

步骤3单击“绘制布局表格”按钮，绘制嵌套表格，如图1-19所示。

步骤4单击“绘制布局单元格”按钮，在上述布局表格中绘制布局单元格，效果如图1-20所示。

图1-20
任务四：图片编辑与修辞
引导问题
观察淘宝网，分析一下该网站哪些位置使用了图片，这些图片进行了什么处理技巧？
—﹑任务目标
能够运用网页编辑软件插入图片对象，并对图片进行编排能够运用简单的处理，使其适合网页呈现。

二﹑任务实现
通过浏览整理后的资料包，找到合适的图片，插入网页相应的位置，如果图片大小与页要求不符，不要在网页编辑软件中对图片进行大范围，拉伸或缩小，要借助其他图像处理软件进行处理后再插入，图片插入网页后会弹出‘保存’对话框此时保存的文件名不要使用中文，浏览器对中文文件名不能很好的支持。

第一种情况：图片直接插入（七彩云南logo图）
将光标定位在要插入图像的位置上，执行“插入”→“图像”命令，在弹出的“选择图像源文件”对话框中，选择图像文件或直接输入图像路径即可，如图1-21所示
图1-21
如图1-22所示，在图像标签辅助功能属性‘对话框”替换文本，项中可以填入的标识文件，当图片不能正常显示时，可以显示此文字来增强网页的可读性此项的也忽略。

图1-22
图片插入单元格后，通过单元格属性的，水平居中对齐，选项将图片置于单元格中间。

第二种情况；图片作为单元格背景。

为了能够在图片上方输入文字等对象，有时需要将图片作背景。

选中要操作的单元格，在属性面板中寻找操作选项，如图1-23所示。

图1-23
找到“背景”选项，单机“文件夹浏览”按钮，选择合适的图片。

第三种情况，图片处理后插入。

如果图片的大小等不适合网页放置的时候，可以通过图像处理软件进行图片大小处理。

图像处理软件后很多，现在选择最简单也最常见的图片浏览工具ACDSee来完成处理。

根据上面的操作，将景区的标题图片处理后插入相应的单元格，并进行适当编排，使其错落有致。

1、如何插入图像？
2、什么是占位符？怎么通过占位符插入图像？
3、如何创建鼠标经过图像的效果？
4、创建网站相册需先安装什么软件？如何创建网站相册？
练一练：
根据前面三种图片操作方法，将“风光美景”区域的图片排列整理。

任务五:文字编辑与修辞
引导问题
在网页中如何输入空？如何进行换行、换段？在网页中如何输入特殊字符？在网页中如何输入水平线？
一．任务目标
能够运用网页编辑软件输入文字，并对文字、段落进行排版，使其适合网页呈现。

二、任务实现
1．导航和栏目标题
导航采用单元格底纹颜色渐变的方式，在每一个单元格输入单行文字内容。

选定后第一个单元格。

在单元格属性面板中找到“背景颜色”项，单击后弹出颜色板，选择合适的颜色，如图1—24所示。

图1—24
光标定位到第二个单元格，按上面的步骤弹出颜色板，通过颜色拾取器单击第一个单元格，从第一个单元格吸取颜色，再单击“系统颜色拾取器”,在弹出的“颜色”对话框的右侧有一条渐变的颜色区，将滑标
向上移动一些，第二个单元格的颜色相对第一个单元格减淡一些。

按以上的重复操作，完成后续单元格的设置。

并输入文字，做适当的排版。

2.文本区域的排版
云南概况栏目有一块文本区域，需要录入文字并排版。

录入文字或通过复制操作将文字粘贴到此区域，注意:如果要复制的文本带有大量的格式，请先通过记事本去除格式后复制。

若不做任何设置，文本区域会显得密集、混乱，不便于阅读，也不美观。

对段落的设置需要用到CSS，CSS称为＿＿＿，可以对格式进行统一设置。

定义要操作额文本区域，单击“文本”菜单，选择“段落格式”中的“段落(P)”选项。

选择“文本”→“CSS样式”→“新建”菜单项，如图1—25所示。

图1—25
定义一个类，名称为“d11”，如图1-26所示。

图1-26
在类“.d11的CSS规则定义”对话框的“类型”选项中，设置字体大小，行高，如图1-27所示。

图1-27
在“方框”选项中，设置左、右边界。

设置文字的CSS样式。

练一练:
1、观察“数码科技前线”页面，哪个位置中使用了水平线？如何插入水平线？插入水平线后，能直接设置水平线的颜色吗？在“代码”视图中怎么设置呢？
2、如何输入文本？
3、如何插入特殊字符？
4、如何输入多个连续的空格？
5、如何插入当前日期？
6、观察下图，讨论哪个位置使用了项目符号？如何进行项目符号的设置？
7、如何对文本进行换行和分段操作？这两个操作的区别是什么？
8、录入“行线程路”栏目中的文字并排版。

9、插入视频
在”雁荡山概况”栏目右侧区域，插入雁荡山介绍的视频对象。

单击”插入“菜单，选择”媒体” ”Flash视频”菜单项,如图1—28所示。