43_网页的制作_学案

1、4.3网页的制作教学设计 吴玲玲一、学习目标1.了解网站开发的过程。2.依据网站的开发规划与设计方案，运用网页制作工具实施设计过程。3.在设计制作的过程中，提高审美与评价的能力。二、学习重难点依据网站的开发规划与设计方案，运用网页制作工具实施设计过程。三、学习方法建议认真聆听并观察老师的演示与讲解，然后亲自动手实践。实践过程中遇到疑难先自己寻求方法解决，解决不了时积极地与同学讨论或请教老师。四、学习过程和难点提示学习流程难点点拨1.了解网站开发的过程在开始动手制作网站之前，我们先来了解一下开发一个网站的过程。第一步是“网站的规划”，是指：开发网站前要对网站进行需求分析或市场分析，确定网站的目的

2、和功能，并根据需要对网站开发中的技术、内容、费用、测试、维护等工作做好充分的考虑。网站的规划一般包括网站主题的确定，就是你的网站的主要内容是什么。第二是工具的选择，就是你打算用FrontPage还是Dreamweaver来设计页面？对网页图片的处理你又打算使用哪种图像处理工具？等等。最后还要明确分工和时间的安排。第二步是“网站的设计”。主要包括网站的结构设计，就是你打算设置几个大栏目，大栏目里又有几个小栏目，这时最好用一张纸把栏目的名称以及关系列出来。第二是网页的版面设计，就是网页的标题、导航栏、正文等的位置如何摆放？文字与配图的位置又如何协调？网站采用什么色调？等等。最后是交互设计，就是各页

3、面间的跳转关系。你必须保证浏览者从网站的任意位置可直接跳转到各栏目的首页或网站主页。第三步是“网页的制作”。就是依据网站开发的规划与设计方案，运用网页制作工具实施设计过程。第四步是“网站的发布与管理”，就是通过网站发布管理软件把网页文件传送到WEB服务器，并开始进行对网站的维护与更新管理。第五步是“网站的评价”，网站制作完毕后，要及时了解网站的优势与不足，进而完善网站的设计与制作，提高网站的质量。我们对网站进行评价，可以参考这四个指标，就是“科学性、创造性、艺术性和技术性”。开发网站时，最好能依据这五个步骤的顺序进行，不要只注重于第三步。因为规划和设计的过程做得越详细，真正动手制作的时候会越轻

4、松。2.分析示范网站的开发规划与设计方案我这里要做的示范网站主题叫做“畅游书海”，是一个介绍书籍的网站。我们先来看看“畅游书海”这个网站的栏目设置。其中一级栏目有四个，分别是“文学”、“生活”、“人文社科”和“科普”，每个一级栏目里还细分有二级栏目。接着，来看看首页的最终效果。我们看到整个页面的色调接近海洋的颜色，是为了配合主题“畅游书海”。页面最上方是网站主题，主题的背景是一幅图。主题下面是栏目导航。再往下，左边是“特别推荐”，右边是图书展示区。最下面是制作者及版权信息。我们下面来用表格来划分首页的版面。现在我们来看看首页的表格情况。我们看到一个四行的大表格，其中第三行被分成了两列。跟随老师

5、的讲解，认真分析示范网站的开发规划与设计方案，以后自己实践时可以参考。3.运用网页制作工具实施设计过程好，了解了首页的布局之后，我们一起来动手制作这个首页。先打开FrontPage。新建“空白网站”（设置网站的保存位置）。新建“index.htm”。打开“index.htm”。设置页面“属性”（格式菜单/右键，设置标题、背景色c0dcdb、文字色、超级链接颜色）。插入表格（4行1列，宽度980像素，单元格边距、边框粗细、填充间距全设为0）。第一行插入一张图片。第二行插入表格（1行7列，宽度100%，单元格边距、边框粗细、填充间距全设为0）。选中所有七个单元格，设置高度为30像素，宽度为140像

6、素，背景色为7cbcc7。然后输入栏目名称：首页、文学、生活、人文社科、科普。把第三行拆成两列，一边200像素，一边780像素，高度都是345像素。在左边插入表格（11行1列，宽度100%，单元格边距、边框粗细、填充间距全设为0 ，单元格高度30像素，背景白色），在第一行插入图片，剩下10行输入文字：红楼梦（曹雪芹） 平凡的世界（路遥）在右边插入大图片。最后一行高度50像素，背景色66B0BD，输入作者、版权之类的说明文字。保存文件，注意图片的保存位置，然后F12预览效果。制作其他页面：“index.htm”“另存为”“wenxue.htm”，删去不要的内容，添加新的内容即可。插入“超级链接”，并预览效果。其他的页面请同学们自己设计完成。跟随老师的演示与讲解，动手把示范网站的首页做出来，然后继续完成其他页面。熟悉了技术之后，再重新设计制作一个属于自己的网站。4.上传网站、评价网站网站全部做好之后，我们可以利用FTP工具软件把网站传到WEB服务器中