网页设计教学教案课程
2、教学手段:(1)实例讲解过程穿插与网页布局相关的基础知识,实例结束后进行总结和疑难提问;(2)对于重点操作可以着重演示,并加强举例说明。
3、教学资料及要求:除教材中的实例外,可以再找一些包含各种布局的网页进行展示,便于学员理解。
教学内容
知识回顾:在前面讲解了DreamweaverCS5中使用表格、AP Div和框架布局的操作,在实例制作过程中也接触了在表格和AP Div中插入内容的操作。
4.2.1创建AP Div
4.2.2选择AP Div
4.2.3设置AP Div尺寸
4.2.4移动AP Div
4.2.5对齐AP Div
4.2.6更改AP Div堆叠顺序
4.2.7在AP Div插入各种元素
4.3使用框架制作“公司公告”网页
4.3.1创建框架集与框架
4.3.2保存框架集与框架
4.3.3删除框架
讨论问题:1、除了介绍的3种布局方式,还有其他什么布局方式?
2、不同的布局方式常用在哪种类型的网页中?
内容大纲:具体可结合本章的PPT课件进行配合讲解。
4.1使用表格布局“产品展示”网页
4.1.1创建表格
4.1.2调整表格结构
4.1.3设置表格和单元格属性
4.1.4在表格中插入内容
4.2利用AP Div制作千履千寻网站首页
2、教学手段:(1)实例讲解过程穿插输入和设置的相关基础知识,实例结束后进行总结和疑难提问;(2)对于重点操作可以着重演示,并加强举例说明。
3、教学资料及要求:除教材中的实例外,可以再找一些文字类网页进行展示,与学员互动,讨论文字添加了何种格式,便于学员理解。
教学内容
知识回顾:在前面讲解了DreamweaverCS5中文本的输入和格式的设置,以及其他对象的添加操作,在实例制作过程中还涉及了滚动字幕的设置操作。
(4)规划并构思一个美食站点,创建一个导航草图,其中必须包含“菜谱”和“食材”两大板块,要求整个站点结构能满足一般的浏览和查询美食资源的要求。
(5)在上一题的基础上,启动Dreamweaver CS5,创建该美食站点并在其中添加相应的文件夹和文件。
第2讲
课时内容
输入与格式化文本
授课时间
120分钟
课时
3.2.3插入SWF动画
3.2.4插入FLV视频
3.3实训——制作“旅游导航”网页
3.3.1实训目标
3.3.2专业背景
3.3.3操作思路
3.4疑难解析
3.5习题
拓展知识
课堂案例1——“关于我们”页面课堂案例2——“新品展台”网页上机实训——“旅游导航”网页
小结
1、掌握在网页中插入和编辑图像的操作。
2、掌握设置鼠标经过图像、插入多媒体插件、插入页面背景音乐、插入SWF动画和插入FLV视频等操作。
思考及作业
想一想:
随着网络的发展,程序语言也在发展,网页布局的方式方法也在改变,如今常用的网页布局方式有哪些?常用的与设计网页相关的编程语言有哪些?
练一练:
(1)创建“top.html”网页,在其中输入并设置“我的心情客栈”文本,并绘制4个AP Div对象,在其中插入提供的4张图片。
(2)创建“bottom.html”网页,插入13×2表格,合并最后一行单元格,并在其中插入1×4嵌套表格,设置表格背景颜色并在各单元格中输入文本。
(2)在“我的动态”图像下插入“04.jpg”图像,设置对齐方式为“左对齐”,缩小图像尺寸,增加水平边距,然后适当降低图像品质。
(3)分别在“最新留言”图像和“动感相册”图像下插入多媒体插件和SWF动画,其中插件的尺寸为“538×45”。
第4讲
课时内容
布局网页版面
授课时间
150分钟
课时
4
教学目标
掌握在网页中插入与编辑表格的方法。
思考及作业
想一想:
站点的作用是什么?站点有何意义?举例日常浏览网页时遇到的站点,并分析其分为几大板块?
练一练:
(1)查看Dreamweaver CS5中“表单”插入栏包含的内容。
(2)在浮动面板组中将“资源”、“行为”和“组件”3个面板排列到同一个面板中(首先需要利用“窗口”菜单显示出这些面板)。
(3)创建名为“wodewangzhan”的站点,将位置设置在D盘的“OK”文件夹中,然后通过编辑站点的方法将其重命名为“mynet”,最后删除站点并取消操作。
1.5.3操作思路
1.6疑难解析
1.7习题
拓展知识
课堂案例1——创建站点课堂案例2——管理站点上机实训——创建“快乐旅游”站点
小结
1、掌握如何确定网站风格和布局、分析网站需求。
2、掌握如何规划网站内容、认识Dreamweaver CS5的工作界面、创建与管理站点等。
3、本章内容虽然尚未涉及到网页设计和制作,但却是网页设计制作的基础。学员应认真理解和掌握,为后面制作网页打下基础。
3、本章内容同样是网页制作的基础,只有掌握了这些对象的插入与使用方法,才能制作出内容丰富的网页。
思考及作业
想一想:
图像的使用在网页中通常起什么作用?怎样才能快速在网页中添加多媒体文件?
练一练:
(1)打开“zhuye-me.html”网页,将提供的“01.jpg”、“02.jpg”和“03.jpg”图像插入到网页中,设置边框为“1”。
讨论问题:1、设置网页文字的字体时应注意些什么?
2、网页的制作一般将就图文结合,在什么情况下需要使用纯文字的网页?
内容大纲:具体可结合本章的PPT课件进行配合讲解。
2.1ห้องสมุดไป่ตู้作“公司简介”页面
2.1.1输入文本
2.1.2设置文本字体格式
2.1.3设置段落格式
2.2制作“企业文化”页面
2.2.1插入特殊文本对象
90分钟
课时
2
教学目标
掌握在网页中插入与编辑图像的各种操作。
熟悉美化与优化图像的方法。
掌握插入多媒体插件、SWF动画和FLV视频的方法。
了解添加网页背景音乐的方法。
教学重点
图像的插入、编辑、美化与优化等操作。
多媒体插件的使用。
教学难点
如何在网页中设计图像与多媒体。
教学设计
1、教学思路:(1)演示“关于我们”页面的具体步骤,让学员了解如何在网页中使用图片;(2)演示“新品展台”网页的具体步骤,让学员了解如何添加多媒体插件,如何在网页中使用多媒体;(3)安排上机实训。
讨论问题:1、为什么需要在网页中添加图像?
2、在设置鼠标经过图像时应注意些什么?
内容大纲:具体可结合本章的PPT课件进行配合讲解。
3.1制作“关于我们”页面
3.1.1插入与编辑图像
3.1.2美化与优化图像
3.1.3创建鼠标经过图像
3.2制作“新品展台”网页
3.2.1添加多媒体插件
3.2.2添加背景音乐
4.3.4设置框架集与框架属性
4.3.5制作框架网页
4.4实训——制作“景点介绍”网页
4.4.1实训目标
4.4.2专业背景
4.4.3操作思路
4.5疑难解析
4.6习题
拓展知识
课堂案例1——使用表格布局“产品展示”网页课堂案例2——利用AP Div制作首页
课堂案例3——使用框架制作“公司公告”网页上机实训——制作“景点介绍”网页
3
教学目标
掌握文本段落的输入与换行分段的操作。
掌握设置文本格式的方法。
熟悉项目列表的设置和水平线的创建方法。
了解添加滚动字幕的方法。
教学重点
文本的输入、字体格式的设置、段落的设置等操作。
插入特殊文本对象、创建列表、设置水平线和添加滚动字幕等操作。
教学难点
如何设计文字版式,使页面舒适美观。
教学设计
1、教学思路:(1)演示“公司简介”网页的具体制作步骤,让学员学习如何在Dreamweaver中输入文本并设置相应的格式;(2)演示“企业文化”网页的具体制作步骤,让学员了解如何在网页中插入其他对象;(3)安排上机实训。
3、教学资料及要求:除教材中的实例外,可以再找一些已建立和制作完成的站点进行演示,便于学员理解。
教学内容
知识回顾:在前面讲解了DreamweaverCS5的工作界面,以及站点的创建和管理,在实例制作过程中也涉及了站点中文件和文件夹的创建和管理操作。
讨论问题:1、为什么要首先建立站点?
2、一个网站最基本的功能有哪些?
2、掌握水平线的插入以及滚动字幕的创建等操作。
3、本章是网页制作的基础内容,只有熟练掌握文本的各种设置方法后,才能创建出多姿多彩的网页效果。
思考及作业
想一想:
为什么在制作网页时常使用默认的字体?在使用一些特殊字体的文字时,为何需要将其制作为图片?
练一练:
(1)打开提供的“shouye-me.html”网页,通过分段、换行和插入连续空格等操作输入网页中的文本内容。
2.2.2创建列表
2.2.3设置水平线
2.2.4添加滚动字幕
2.3实训——制作“快乐旅游”网站首页
2.3.1实训目标
2.3.2专业背景
2.3.3操作思路
2.4疑难解析
2.5习题
拓展知识
课堂案例1——“公司简介”页面课堂案例2——“企业文化”页面上机实训——制作“快乐旅游”网站首页
小结
1、掌握输入和编辑文本的操作。
(2)利用CSS格式为各段文本设置不同的格式。
(3)在第一段文本后插入水平线。
(4)在倒数第二段文本后分段,输入“最近更新:”文本并设置格式,然后插入日期,要求保存时自动更新。
(5)将更新日期的上一段文本设置为滚动字幕,滚动方式为“scroll”,速度为“15”。
第3讲
课时内容
插入图像和多媒体对象
授课时间
《Dreamweaver CS5网页设计教程》