《2022年网页制作技巧 .pdf》由会员分享，可在线阅读，更多相关《2022年网页制作技巧 .pdf（4页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第十三课网页制作技巧教学目标知识与技能1、掌握表格的创建、合并、拆分的方法，以达到布局合理；2、掌握对表格整体与单元格背景与边框的颜色设置，能初步制作具有独特风格的表格；3、掌握超级链接的含义与使用4、掌握网站的发布过程与方法演示法、理论联系实践、比较法情感与态度培养学生信息技术的素养与团结合作的能力教学重点掌握表格制作的基本操作、超级链接的使用和网站的发布教学难点掌握表格制作的基本操作、超级链接的使用和网站的发布教学准备老师方面上网查询优秀的网站设计、收集学生的优秀网页获奖作品学生方面通过网络、报刊、图书等途径收集网页制作时所需的文字、图片等信息教师活动学生活动说明、反馈一、通过展示几个学生
2、自己制作的优秀网站和网页，复习网站首页设计的几个模块，同时体会表格在网页设计的独特作用。1 引入：很多同学都希望能制作一些精美的个人网页发布在网上，上节课我们已经用Dreamweaver 制作了一个简单的网页，但觉得和自己在网上所见的网页相比相差太远，如何才能制作好具有个性特色的网页呢？今天我们就要充分利用表格工具来制作一个精美的网页。激发学生学习的积极参与2 首先我们还得先回想一下网页首页的四个共有的模块：教师总结：1) 徽标（ logo）和网站的名称：一般位于左上角，是一个形象化的标志，其作用类似于商品的商标。2)首页大标题（ banner） ：一般放网站主题词或图片，商业性的网站放置广告
3、条。3)导航栏：就像一本书或杂志的目录一样，但比书籍或杂志的目录更为重要，因为书籍我们可以一页一页的从头向后翻，而我们的网页却不可以，只有有了清楚、明晰的导航，才能让浏览者知道自己身处网站的什么位置。4)版权和联系方式： 一般放在网页的底部，主要功能是版权声明和听取浏览者的意见或建议。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 4 页 - - - - - - - - - 学生思考回答3 黑板上给出了几个在全国获奖的中学生网页作品，4 个同学一组合作学习，快速浏览其中
4、2 3个，网站地址如下：http:/ 10 分钟二、表格制作技巧：l 创建表格我们在， 在 Dreamweaver 中创建表格的方法与在Word 中表格的插入方法有相似的地方，请大家看屏幕： 创建表格有两种常用的方法，第一种是首先把插入点调整到要插入表格的位置，单击 “ 对象面板 ” 中的 “ 插入表格 ” 按钮，在弹出的“ 插入表格 ” 对话框中设置所需的行数和列数，表格线宽度为0，注意 “ 单元格边距 ” 表示表格内文本与表格线的距离，“ 单元格间距 ” 表示表格内单元格之间的距离，这两个在这里不作设置，单击“ 确定 ” ，表格插入进来了。第二种方法就是上节课所讲的选择菜单栏的“ 插入 ”
5、 选项，在弹出的下拉菜单中选择“ 表格 ” ，设置方法与第一种是一样的。在 word 和 excel 中我们都已讲过对单元格的合并与拆分操作，在这我就不讲了，现在请大家任意选择一种创建表格的方法，根据自己的需要创建一个表格。注意：对表格的单元格进行合理的合并与拆分学生听课上机操作教师巡视表现问题及时纠正（5 分钟）l 设置单元格背景色和边框颜色好，大家已经完成了，现在我们就来给框架添加背景色和边框色，请看屏幕 （通过多媒体教学网教师演示操作）选中需要设置背景色的单元格，单击 “ 属性面板 ” 上的 “ 背景颜色 ” 下拉按钮， 在下拉的颜色列表中选择自己喜欢的颜色并单击，即可将所选的单元格背景
6、色改为自己设置的颜色。要设置边框的颜色，单击“ 边框 ” 颜色更改下拉按钮，选择相应颜色即可修改。请大家按老师的操作把自己的表格修饰一下吧。学生听讲上机操作鼓励学生在设置颜色时注意色彩搭配，可通过图形搭配来形成具有一定特色的表格，鼓励学生创新（5 分钟）三、根据学生自己准备的素材，学生将文字输入到相应的单元格内，并插入相应的图片，要求学生至少制作2 3 张网页，提醒学生注意以较为好记的英文名字保存。学生独立名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 4 页 - - -
7、 - - - - - - 上机完成教师巡视，及时处理发现的问题（20 30 分钟）四、超级链接的使用上节课我们的同学已经把网页做好了，有许多同学做的相当好，甚至比我所演示给大家看的还有特色。怎样把我们所做好的网页相互联系起来呢？也就是说我们在网上所看到的我要看某条新闻或某个图片时，一点就能进入，这就是我们今天所要讲的超级链接，与“ 超级女生 ”或“ 超级男生 ” 可一点关系也没有喔。首先什么叫超级链接呢？超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置
8、，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。在网页中， 一般文字上的超链接都是蓝色（当然，用户也可以自己设置成其他颜色），文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变。只有图像的超链接访问后颜色不会发生变化。请同学们回想一下自己在上网时是不是
9、到处都有超链接，也很频繁地在使用超链接？教师讲授学生听讲后思考并体验超级链接的作用书本介绍超级链接过于简单，从形象思维角度来看，学生不易理解， 对超级链接进行一定程度的详细讲解，有利于加深学生对超级链接的印象与理解。（58 分钟）上节课同学们已经制作了2 至 3 个网页，现在我们就来看看怎样通过超级链接把它们链接在一起。请大家看屏幕：l 首先在 Dreamweaver 中打开已经制作好的主页myblog00.htm ，选中 “ 个人简介 ” ，单击 “ 属性面板 ” 中“ 链接 ” 列表框中左侧的文件夹图标，在弹出的“ 选择文件 ” 对话框中，在自己的文件夹中找到要链接的文件名，我现在要链接的
10、文件是myblog01.htm ，选中点 “ 选择 ” ，这样只要在 “ 个人简介 ” 文字上单击就可以进入到个人简介的具体介绍网页当中了。请大家看“ 个人简介 ” 这几个字在进行完超级链接后，字的颜色是不是发生了改变，同时加了下划线。请大家注意， 如果在进行超级链接时，字体颜色没有发生任何变化，很可能是在操作过程中出现了错误。好，现在请大家按照老师的操作，把自己的网页相互联系起来。教师讲授演示学生听讲后上机练习操作教师巡视辅导（15 分钟）五、网站的发布网页制作、 测试好后保存在本地计算机上，只能在本机的浏览器中浏览，要让更多的人看到自己制作的网页， 就需要把网页放到互联网上的主页空间里，怎
11、样才能将网页送到远端的服务器或网站上呢？我们制作网页所使用的Dreamweaver 本身就有FTP 的上传、下载功能，可以很方便地进行网站管理。下面就来看看发布自己的作品：l 申请个人主页空间：互联网上有许多提供个人主页空间的网站，而且都是免费的，只要注册申请一个空间，就可以把制作好的网页上传上去。请大家看屏幕，我以 “ 中国学生网 ”免费个人主页空间的申请为例，给大家演示一下：打开 IE 浏览器， 在地址栏中输入“ 中国学名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共
12、4 页 - - - - - - - - - 生网 ” 的网址 “”，点击 “ 注册 ” 按钮，在经过第一步阅读条款并同意，进入第二步完整填写资料， 提示空间申请成功，激活空间后得到最后的个人免费主页空间激活成功的信息，这样就行了。l 在 Dreamweaver 中配置个人主页空间信息：打开Dreamweaver 的“ 站点 ” 菜单中的 “ 定义站点 ” 命令，在弹出的对话框中单击“ 编辑 ” 按钮，在弹出的编辑站点对话框的“ 分类 ” 栏中选择 “ 远程信息 ” 选项，在右边出现的“ 远程信息 ” 中填入相应的内容。“FTP 主机 ” 中填入所申请的主页空间的FTP 地址，登录和密码。单击“
13、 确定 ” ，再单击 “ 定义站点 ” 的“ 完成 ” 按钮，即可完成对站点的定义。设置完成后，出现“ 站点 ” 窗口，左栏是远端服务器的文件列表，右栏是本地文件列表，单击工具栏的“ 连接 ” 按钮， 就可以使本地计算机连接到远端的空间服务器上，选中本地的文件和文件夹，单击工具栏的“ 上传 “ 按钮就可以将本地计算机上的文件和文件夹上传到远端的主页空间服务器上，请大家仔细观察“ 站点 ” 窗口各部分的变化。l 浏览个人主页：我们的设置完成了，现在我们就可以通过浏览器上网看看自己的杰作了。在浏览器的地址栏输入相应的地址即可浏览。教师讲授演示学生听讲后上机练习操作教师巡视进行辅导同时对优秀作品及时提出肯定与表扬，对未完成的同学继续利用课余时间完成。（1020 分钟）名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 4 页 - - - - - - - - -