甘肃少年儿童版小学信息技术第三册第七章网站制作入门教案.docx

第七章 网站制作入门第1课 小小网页设计师教学目的：观赏网站，并尝试规划、设计自己的网站。教学重点：确定网站主题，搜集加工素材。教学时间：1课时教学过程：一、名站观赏：访问下面的网站，说一说你最宠爱哪一个，为什么？红泥巴村： hongniba 甘肃少年儿童出版社： gsshaoer 北京动物园： beijingzoo CCTV纯真年头：edu.cctv 站点一般简写为“Web，事实上就是把一些信息通过Web网页的方式互相链接起来，存放在一台被称为“效劳器的计算机中，别人可以通过Web阅读器查看网页信息。站点一般以国际通用的Internet地址来表示，例如： :/ 21cn 或 :/ 等，进入某个站点所见到的第一页一般称为“HomePage，中文的意思是“主页。一般认为某个站点的第一个网页叫做主页，也就是在Web阅读器“地址栏内输入一个网址后，用户阅读到的第一个网页。用户再通过该主页的链接可以阅读到其他网页信息。二、确定网站主题：如何设计制作自己的网站呢？在动手制作之前我们首先要确定这个网站的主题，以及网站的主要内容，最终还要给网站起一个醒目的名字。三、搜集、加工素材：建立一个网站须要的素材是多样的，一个仅仅版面美观但缺少内容的网站是无法留住网友的。文字、图片和声音往往是网站中不行缺少的素材，我们可以利用相机、扫描仪、麦克风等，从报纸、书刊、电视、网络等渠道搜集素材。在创立、发布网站时肯定要留意不要侵扰了别人的著作权。四、课后练习：练习P5练习内容。第2课 相识FrontPage 2003教学目的：1、相识FrontPage 2003。2、学会利用向导创立网站。教学重难点：创立站点。教学时间：2课时教学过程：第一课时一、网页制作工作FrontPage 2003二、启动FrontPage 20031、启动FrontPage 2003单击任务栏上的“开始按钮,从“程序 菜单中选择“Microsoft FrontPage单击。2、FrontPage 2003的界面说明 FrontPage 2003的界面可以分成菜单栏、工具栏、视图栏和主编辑窗口4大部分。、菜单栏包括【文件】、【编辑】、【查看】、【插入】、【格式】、【工具】、【表格】、【框架】、【窗口】、【扶植】等10个菜单。、工具栏单击【查看】菜单，选择【工具栏】， 在出现的下拉菜单中列出了几种不同的工具栏，假如菜单项前面有一个对钧号“，说明在界在上已显示此菜单项。假如再单击一下，将取消这一项的显示。、视图栏中摆列着各种管理器的图标，这些管理器包括网页管理器、文件夹管理器、报表管理器、导航管理器、超链接收理器和任务管理器等。单击管理器图标以切换到相应的管理器。、主编辑窗口在编辑网页时，在FrontPage编辑窗口的左下角有四个视图标签：设计、折分、代码、预览，可以便利我们在不菲同的页面之间进展切换。三、练一练1、翻开FrontPage 2003，熟识FrontPage 2003的界面。2、练习P8练一练中的内容。第二课时一、新建站点任务1：新建一个个人网站。操作步骤：1翻开【文件】菜单，选择【新建】菜单项，在子菜单中选择【站点】菜单项，出现一个【新建】对话框，在对话框的【指定新站点的位置】项中输入新站点的存放位置。2单击【确定】按钮。此时FrontPage会自动以新站点名建立一个站点，并显示一个正在创立站点的提示对话框，之后该站点很快便创立好了。新建的站点只有一个主页index.htm文件，该主页还是空的，须要对它进展编辑添加内容。同时也可以添加一些网页到该站点中去。此外，我们发觉该站点中包含有两个子文件夹。一个是_private文件夹，一般用来存放一些私人的文件，这些文件不会被别人看到。另一个是images文件夹，是FrontPage特地创立用来存放图像文件的文件夹，因为FrontPage扩展效劳器的图像文件的默认书目为images。任务2:翻开导航视图，视察个人网站的构造，并预览。二、规划调整网站构造任务1:更改网站主页标题：单击编辑栏中的“网站，选择“导航视图，选择导航视图中须要变更标题的网页，“重命名主页标题。任务2:删除网页“反响阅读教材P11删除网页“反响内容，依据“跟我学中的步骤自主学习。三、练习1、翻开FrontPage2003窗口，切换网页、文件夹等不同视图方式，视察屏幕的变更。2、依据自己的网站设计，绘制出一个网站导航构造图。第3课 设置网页格式教学目的：1、学会应用主题模板设计网页。2、尝试用表格布置网页版面，并编辑表格内容。教学重点：用表格布置网页版面，并编辑表格内容。教学时间：1课时教学过程：第一课时一、翻开网页当 我们建立好网站后，每个网页都会对应一个网页文件，要对网页进展编辑，可以翻开文件夹列表中的网页文件，也可以双击导航视图中的网页名称。二、用主题模板设计网页在用FrontPage 2003创立网站的过程中，我们可以像在PowerPoint中一样，通过应用主题模板来为站点中的网页制作统一风格。任务：在网站中应用“常青树主题模板。1、双击翻开“西西家园中的网页。2、选择“格式菜单“主题。3、在右边任务窗格中选择主题“常青树。4、单击编辑栏下方视图标签“预览，视察网站效果。5、选择其他主题模板应用到网页中。三、用表格组织网页版面在FrontPage 2003中为了更好地支配网页布局，定位文字和图形，人们常常运用表格进展版面布置，这样做出的网页更加规整有序富于变更。四、编辑表格任务：在网页中插入2行1列的表格，比照及Word中插入表格的异同。如何设计由一个表格所组织的网页，其操作步骤如下：1在空白网页中插入一个2×1的表格，将表格的边界大小设置为0；2在表格第一行的单元格中输入内容；3在表格中第二行的单元格中插入图片；4将表格框线的粗细设为0,得最终的效果。五、设置表格属性1选定要设置属性的单元格假如只须设置某个单元格的属性，只需将光标移到该单元格内，无需选定该单元格；2单击【表格】菜单，选择【属性】，然后单击【单元格】选项，或单击鼠标右键，选择【单元格属性】选项，将会出现一个对话框。3在单元格属性对话框中，我们可以设置单元格的多种属性。4设置完毕后，单击【应用】按钮，可以预览一下设置效果。5单击【确定】按钮，设置完毕。在这个对话框中，我们可以设置单元格的属性有：单元格布局、边框、背景等。六、练习：第4课 网页中的文字处理教学目的：1、可以在网页中输入文字、设置合理的字体格式。2、可以在网页中插入、删除表格，并进展保存。教学重点：文字的设置, 在网页中插入、删除表格。教学时间：1课时教学过程：²一、输入文字任务：在首页中输入文字，并设置文字格式。在设计视图中，翻开首页文件，在编辑区单元格中输入文字内容。选中文字，单击“格式菜单“字体，设置字体格式。1、修饰文字：是指文字的字体、字型、大小字号、颜色、效果的设置。单击【格式】菜单项，选择【字体】后出现字体对话框；或单击鼠标右键，在弹出的对话框中单击【字体】选项，也将出现字体对话框。这时在对话框中的字体设为“隶书，字型为“加粗，大小为“6 24磅，颜色为“红色，效果为默认。单击【确定】按钮即可完成文字修饰。例中其他字体修饰的操作也类似进展。二、保存网页单击常规工具栏上的保存按钮或单击【文件】菜单再选择【保存文件】，就可以把正在编辑的网页保存起来。或干脆按Ctrl+S键也可以保存网页。假如你是在修改已经保存过的网页，修改正的网页将被重新保存。但假如是新建的网页，单击“保存后会出现对话框。在对话框中的【文件名】栏内输入网页的文件名如“First，单击【保存】按钮，该网页就会保存到当前的站点上。FrontPage 2000保存文件的类型主要有网页文件.htm、FrontPage模板.tem、文本文件.txt、超文本模板文件.htt等。三、阅读网页网页编辑完成后，可以用阅读器预览一下网页的效果。有两种预览网页的方式：一种是单击FrontPage 2000主编辑窗口下面的【预览】标签，就翻开一个FrontPage编辑器自带的阅读器，看完之后，单击【一般】标签，又切换到编辑状态。另一种是单击【常规】工具栏的“ 图标按钮或干脆按Ctrl+Shift+B键，或单击【文件】菜单并选择【在阅读器中预览】菜单项，将启动已安装好的阅读器并翻开该网页。假如在预览之前没有把修改后的或新建的网页保存起来，那么将弹出一个对话框提示你应当首先保存该网页。留意：在预览窗口中看到的是网页在发布后的大致款式。要看到网页在WWW阅读器中的真实情形，必需运用【在阅读器预览】菜单项查看。而且，即使是在WWWW阅读器中阅读通过，不同的阅读器产生的效果不一样。在发布到Internet上的前后，最好运用不同的阅读器多阅读几次。四、练习第5课 网页图片编辑教学目的：1、可以在网页中插入图片。2、可以对网页中插入的图片进展调整大小、环绕款式等设置。教学重点：图片属性的设置。教学时间：1课时教学过程：²一、插入图片1新建一个空白网页，把光标定位到要插入图片的地方。2单击【插入】菜单，选择【图片】菜单项，在子菜单中单击【来自文件】选项，在出现一个【图片】对话框的同时，还弹出一个【选择文件】对话框。3在【选择文件】对话框的“搜寻栏内选定图片的存放位置，然后从文件列表中双击某个图片文件或选定图片文件，单击【确定】按钮，那么图片插入到网页中。任务：在首页中插入图片二、编辑图片在网页中插入图片后，我们还要对图片的某些属性进展设置。1在某个图片上单击鼠标右键后，弹出一个快捷菜单，选择图片属性。2单击【图片属性】菜单项，出现图片属性对话框。在图片属性对话框中，我们可以设置图片的各种属性：1、常规属性【图片源】：指图片的存放位置。假如要重新选择其他一幅图片时，单击【阅读】按钮。假如要修改这幅图片，可以单击【编辑】按钮，启动自带的Image Composer软件，修改完图片后，只要退出该软件，网页图片就会自动更新。【类型】：我们可以选择图片的类型，GIF或者是JPEG。 在“质量栏内一般设定为70-80就行了。2、图像的外观单击【图片属性】对话框中的【外观】选项卡。在这个对话框中，我们可以设置图片及文本之间的对齐方式、图片的边框粗细以及图片的大小等。布局栏：单击【对齐方式】下拉箭头，出现一个下拉菜单，有多种对齐方式，在图文混排时特别有用，大家可以试试看。利用【边框粗细】可以在图片四周加上一个指定宽度的边框。值为0时，边框不显示。设置【程度间距】和【垂直间距】的值，可以变更图片及相邻内容如文字之间的间隔 。默认状况下，阅读器中显示的网页图片是实际大小的图片。假如要变更图片的大小，那么在对话框的【大小】栏中调整“宽度、“高度的值单位为像素或百分比。选择“保持纵横比选项是防止尺寸修改后的图片出现太扁或太长的“变形现象。图片的定位，可以单击图片工具栏的图片定位按钮。图片可以随意挪动，但在预览时常会及实际不一样。三、练习：在网页中插入相宜的图片，并进展编辑。第6课 为网页锦上添花教学目的：1、学会为网页添加字幕，使网页更美观、生动。2、给网站添加背景音乐。教学重点：网页设置。教学时间：2课时教学过程：²第一课时一、创立字幕在阅读网页时，我们常常会看到一些滚动发布的通知和提示信息，这种滚动的文字我们称为“字幕。任务：在网页中插入滚动字幕1、单击“插入菜单“Web组件吩咐。2、在弹出的“插入Web组件对话框中选择“动态效果“字幕“完成。3、在“字幕属性窗口“文本中输入滚动文字。4、设置字幕的滚动方向、速度、背景等。5、假如还须要变更字幕文本的格式，单击“字幕属性窗口左下角的“款式按钮，进展设置。6、单击“确定并预览字幕效果。二、给网页添加背景音乐修改背景音乐。单击【背景音乐】区域的【阅读】按钮，出现对话框，在硬盘书目下选择一个Wav声音文件。本例运用“C:windowsMedia书目下的“Start.wav文件，大家也可以自己选择其他的声音文件作为背景音乐。缺省状态下背景声音的设置为始终有声音。三、练习第二课时在网页中单击鼠标右键，从弹出的菜单中单击【网页属性】选项，出现网页属性对话框。在这个对话框中我们除了强以添加背景音乐外，还可以修改网页的多种属性。一、网页属性的设置：1、常规属性设置。在这个对话框中共有5个选项卡。其中，在【常规】选项卡中我们可以修改网页的标题、背景音乐等。2、背风光设置。单击网页属性对话框的【背景】选项卡，就可以设置网页的背风光和图片等。修改网页的背风光。单击对话框中【颜色】区域内的“背景项下拉选择箭头，并从颜色框中选择一种颜色，然后单击【确定】按钮，这时网页的背景颜色就变成了刚刚选择的颜色。设置背景图片。1重新单击鼠标右键，选择【网页属性】进入对话框并单击【背景】选项卡。2然后单击在【格式】区域内的“背景图片选择框，选中后下面的“水印选择项、文本框都不再变灰。3这时再单击【阅读】按钮进入网页背景图片选择对话框。4单击对话框右下角的【剪贴画】按钮，就会弹出【剪贴画库】。单击【Web背景】选项从中选择一种图案作为背景，选中后单击“ 插入剪辑按钮。5然后单击网页属性对话框的【确定】按钮。这时网页背景已变成了刚刚选择的图案。二、练习第7课 穿梭网际的超链接教学目的：1、学习超链接的制作方法。驾驭超链接的设置技巧。2、学会创立发送电子邮件的超链接。教学重点：超链接的制作方法，超链接的设置技巧。教学时间：2课时教学过程：²第一课时每当我们在阅读网页时，都会发觉当鼠标指针挪动到某些文字或图片时，就会变成一只手掌“ 的样子，这时只需单击鼠标左键就可以翻开另一网页了。这就是我们将要讲解并描述的网页“超链接方式。正是由于有了“超链接，因特网才会如此奇妙和流行！网页上的超链接主要有三种：一种是相对网址的超链接；第二种是及肯定网址如 :/ 的超链接；第三种是指在同一网页内的超链接。一、创立发送电子邮件的超链接：任务：在首页下文创立电子邮箱的超链接。在首页下方输入邮箱名称，选定文字“E-mail:xixi163 ，单击超链接按钮，出现“编辑超链接对话框。然后单击“ 插入超链接按钮在对话框“URL栏右边，出现“创立电子邮件超链接对话框。在文字框内输入邮箱地址如E-mail:xixi163 ，连续单击【确定】按钮，就可以创立一个超链接到邮箱地址。二、练习第二课时一、网页间的超链接其操作步骤如下：1创立一个新网站，并在网站内新建几个网页文件：主页“index.htm、爱好“interest.htm、相册“photo.htm、宠爱站点“myfav.htm等文件。2翻开主页文件“index.htm，输入文字内容，并单击插入图片按钮，从“剪贴画库学院中插入图片。3选定网页内的文字“爱好，单击“ 超链接工具按钮，出现【编辑超链接】对话框。在对话框的文件列表中选择“interest.htm网页文件。4及3操作类似，对文字“相册、“宠爱站点分别设置超链接到文件“photo.htm、“myfav.htm。二、肯定网址的超链接其操作步骤如下：1在上例所创立的网站中，翻开宠爱站点“myfav.htm网页文件。2输入标题“我宠爱的站点，“文字链接：，按回车键。3单击“ 工具按钮，建立工程符号列表。4文字上的超链接：输入“中文搜狐，选定这段文字，然后单击超链接工具按钮，在所出现的对话框“URL栏内输入“ :/ sohu ，最终单击【确定】按钮。就可以创立了文字上的超链接；5图片上的超链接： 选定刚插入的图片 ，单击“ 超链接工具按钮，在出现的对话框中的“URL栏内输入网址“ :/ 三、练习