网页制作及网络媒体策划教案

《网页制作及网络媒体策划教案》由会员分享，可在线阅读，更多相关《网页制作及网络媒体策划教案（30页珍藏版）》请在金锄头文库上搜索。

1、 网页制作与网络媒体策划 课程 教 案课程编号：012704总学时：34 周学时：2适用年级专业（学科类）：08广电开课时间： 2010-2011学年第一学期使用教材：巧学巧用DW8、FW8、FL8制作网页 （前沿电脑图像工作室，人民邮电出版社，2007）授课教师姓名：熊 瑜 第31页课题一 Dreamweaver（一）站点与网页的创建1、教学目的: 1了解网站的构成,及如何保存别人的网页,及网页中的元素2熟悉Dreamweaver界面3掌握站点的创建和网页的创建2、教学重难点：站点的创建和网页的创建3、教学方法：讲授、演示4、教学工具：计算机，Dreamweaver 8 5、教学学时：26、

2、教学过程：6.1引入 网站的构成，网页的构成，网页制作工具，网页三剑客各个软件在制作网站中的作用。6.2教学内容(一) 网站的构成,如何保存别人的网页及网页中的元素(二) 熟悉Dreamweaver界面(三) 站点的创建(四) 网页的创建6.3小结： 本次课主要介绍了：网站的构成；如何保存别人的网页及网页中的元素；创建网站和网页，输入文本和插入图片。6.4作业：制作一个简单的网页7、后记：8、讲义：1.网页三剑客各个软件在制作网站中的作用 2.静态网站的制作流程 站点策划准备所需的素材确定整站风格和首页建立站点Dreamweaver 制作整站Dreamweaver 整站测试及改进上传发布3.网

3、站的构成,及如何保存别人的网页,及网页中的元素（flash的保存） 网页的构成文字 图片(jpg、gif、png)动画(Flashswf、)声音(midi、wav、mp3)视频 (mpg、rm、wmv)链接保存网页、或元素文字保存保存网页 文件另存为保存图片 右键图片另存为保存gif动画图片 右键图片另存为保存Flash动画 IE临时文件夹FLASH下载工具4.熟悉一下DREAMWEAVER界面F4隐藏所有面板 5.创建一个站点,及建立站点文件夹和文件站点内文件及文件夹的命名注意事项及重命名首页的命名规则(index.htm)标题，页面设置设置背景色四边归零6.内容输入 .字体的导入 .硬回车

4、（Enter）和软回车（Shift+Enter）的区别，空格的输入.图片的插入课题二 Dreamweaver（二）表格的使用1、教学目的: 1掌握应用表格进行网页定位。2掌握在表格中插入图片。3制作运用到表格及图片的网页2、教学重难点：站点的创建和网页的创建3、教学方法：讲授、演示4、教学工具：计算机，Dreamweaver 8 5、教学学时：26、教学过程：6.1引入 上次课程我们介绍了简单网页的制作，这次课程我们将详细介绍应用表格来进行网页的定位。6.2教学内容(一) 表格的使用(二) 表格中对象的设置6.3小结： 本次课主要介绍了应用表格来定位网页，以及单元格内容的相应设置。6.4作业：

5、制作运用到表格及图片的网页7、后记：8、讲义：一、表格的插入，及相关属性设置 表格的作用，定位，排版表格的插入，及相关属性设置 百分比和象素的区别 规格：最外层表格象素的大小(1024 x 768 小于10000，800 x 600 小于780) 填充，间距，边框 其它属性设置 添加删除行，列 二、单元格属性设置合并：将选中的连续单元格合并成为一个单元格。分割：将一个单元格分割成若干单元格。水平对齐方式：分为（左）（中）（右）三种。垂直对齐方式：分为（顶）（居中）（居底）（基线对齐）三、细表格边框的制作利用表格背景色和所有单元格背景色之间的不同来制作。1、插入表格，设置表格间距为”1”。2、选

6、中表格，在属性面板中设置表格的背景颜色。3、光标定位到第一个单元格里，按住Shift键单击最后一个单元格全选所有单元格，然后在属性面板中设置所有单元格的颜色。4、保存，预览。课题三 Dreamweaver（三）超链接的使用1、教学目的: 1掌握基本超链接2掌握图片热区超链接3掌握锚点超链接4了解其他类型超链接 2、教学重难点：图片热区超链接3、教学方法：讲授、演示4、教学工具：计算机，Dreamweaver 8 5、教学学时：26、教学过程：6.1引入 上次课我们介绍了应用表格来制作网页，这次课我们将介绍超链接的设置。6.2教学内容(一) 基本超链接(二) 图片链接(三) 描点链接(四) 其他

7、类型超链接6.3小结： 本次课主要介绍了各种类型的链接的设置方法。6.4作业：制作一个站点(最少二至三个页面,加上链接)7、后记：8、讲义：一、页面之间的超级连接 在网页中，单击了某些图片、有下划线或有明示链接的文字就会跳转到相应的网页中去。 1、在网页中选中要做超级链接的文字或者图片。2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了.做好超级链接属性面板出现链接文件显示.。3、按F12预览网页，在浏览器里光标移到超级链接的地方就会变成手型。二、制作图片上的超级链接我们这里所说的图片上的级链接是指在一张图片上实现多个局部区域指向不同的网页链接。比如一张中国地图的图

8、片，单击了不同省跳转到不同网页，点的区域就是热区。.1、首先插入图片，单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。2、属性面板改换为热点面板如图：链接输入框：填入相应的链接替代框：填入提示文字说明。.3、保存页面，按F12预览，用鼠标在设置的热区检验效果。三、邮件地址的超级连接在网页制作中,还经常看到这样的一些超级链接，单击了以后，会弹出邮件发送程序，,联系人的地址也已经填写好了，这也是一种超级链接。制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），点插入菜单选“电子邮件链接”弹出对话框，填入E-Mail地址即可。四、超级链接属性面板中的目标选项 “目标

9、”我们称它们为目标区，也就是超级链接指向的页面出现在什么目标区域，默认的情况下域中总有四个选项。1、blank ：单击链接以后，指向页面出现在新窗口中。2、parent：用指向页面替换他们外面所在的框架结构。3、self：将连接页面显示在当前框架中。4、top： 跳出所有框架,页面直接出现在浏览器中。课题四 Dreamweaver（四）表格嵌套1、教学目的: 1掌握表格中图片的两种插入方法2掌握表格的嵌套使用2、教学重难点：表格的嵌套使用3、教学方法：讲授、演示4、教学工具：计算机，Dreamweaver 8 5、教学学时：26、教学过程：6.1引入 之前我们介绍了应用表格来制作网页，这次课我

10、们将介绍表格的嵌套使用。6.2教学内容(一) 表格中图片的两种插入方法(二) 表格的嵌套6.3小结： 本次课主要介绍了表格的嵌套使用。6.4作业：制作一个站点(运用表格嵌套)7、后记：8、讲义：一、表格中图片的两种插入方法1正常方式插入如图片大于容纳图片单元格则把单元格撑开，该单元格的属性值不变。如果小于，则原样显示。2背景方式插入如图片大于容纳图片的对象(单元格)则该图片不能完整显示出来，只显示该对象大小的图片。如图片小于容纳图片的对象(单元格/表格)则以该图片填充该对象。3何时用以背景方式插入当要在图片上能输入文字时，以背景方式插入(如想使该图片完整显示，一定要把容纳该图片的对象的长宽设置

11、和图片的长宽一样)。当要把图片用来填充单元格或是表格时，采用背景方式插入。二、表格的嵌套1为什么要使用表格嵌套因为当一行里的单元格操作高度时会影响到同一行的另一些单元格的高度，为了不互相影响，故采用表格嵌套。2什么时候用到表格的嵌套当发现页面被分成N栏，一般就必须用到嵌套表格。分成N栏，就插入一个一行N列的表格。然后设置这个表格里面单元格的垂直对齐方式为：”顶端对齐”，及设置每个单元格的宽度,确定好布局。然后在每一列中插入表格，表格的单位一般是“百分比”，把每一列中的内容当成一个独立页面来做即可。3标签选择器 Table 表格 TR 行 TD 单元格注意嵌套的层次关系课题五 Dreamweav

12、er（五）表单的使用1、教学目的: 1掌握表单的创建及使用2运用表单制作一个简单的留言本前台页面（或类似页面）2、教学重难点：表单的创建及使用3、教学方法：讲授、演示4、教学工具：计算机，Dreamweaver 8 5、教学学时：26、教学过程：6.1引入 这次课我们将介绍表单的使用。6.2教学内容(一) 什么是表单(二) 表单对象(三) 运用表单制作一个简单的留言本前台页面（或类似页面）6.3小结： 本次课主要介绍了表单的使用。6.4作业：运用表单制作一个简单的留言本前台页面（或类似页面）7、后记：8、讲义：一、关于表单 使用表单，可以帮助Internet服务器从用户那里收集信息，例如收集用

13、户资料、获取用户订单，在Internet上统也同样存在大量的表单，让用户输入文字进行选择。 1、通常表单的工作过程如下： （1）访问者在浏览有表单的页面时，可填写必要的信息，然后单击“提交”按钮。 （2）这些信息通过Internet传送到服务器上。 （3）服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。 （4）当数据完整无误后，服务器反馈一个输入完成信息。 2、一个完整的表单包含两个部分： （1）一个是在网页中进行描述的表单对象。 （2）二是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。 二、认识表单对象 在 Dreamweaver

14、 中，表单输入类型称为表单对象。可以通过选择“插入”“表单对象”来插入表单对象，或者通过从下图显示的“插入”栏的“表单”面板访问表单对象来插入表单对象。 1、表单 “表单”在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表单之中，这样所有浏览器才能正确处理这些数据。 2、文本域 “文本域”在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号（用于保护密码）。 3、复选框 “复选框”在表单中插入复选框。复选框允许在一组选项中选择多项，用户可以选择任意多个适用的选项。 4、单选按钮 “单选按钮”在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。