第4章网站的开发

峨山一中课件制作：李义进网络技术应用信息技术（选修3）峨山县第一中学李义进第四章网站的开发峨山一中课件制作：李义进网络技术应用网站设计与评价因特网应用网络技术基础组网建网用网峨山一中课件制作：李义进第四章网站的开发•1、通过观摩他人网站的制作方法，了解网站开发的基本过程；•2、学会规划、设计、制作、发布与管理简单网站的基本方法；•3、懂得对常见网站的建设质量与运行状况进行评价；•4、学会建立一个自己的网站。峨山一中课件制作：李义进第四章网站的开发•4.1网站的规划•4.2网站的设计•4.3网页的制作（一）•4.3网页的制作（二）•4.3网页的制作（三）•4.4网页的美化与特效（一）•4.4网页的美化与特效（二）•4.5网站的发布与管理•4.6网站的评价峨山一中课件制作：李义进4.1网站的规划•学习目的：了解网站开发的基本过程、网站规划的基本内容•重点难点：网站规划的基本内容•学习方式：情景设置法任务驱动法•学习任务：欣赏优秀网站，学习本节课的教学内容峨山一中课件制作：李义进4.1网站的规划•一、优秀作品欣赏(历年获奖作品精选)峨山一中课件制作：李义进4.1网站的规划•二、开发网站的基本过程峨山一中课件制作：李义进4.1网站的规划•三、网站的规划•1、网站主题的确定•以小组(4人/小组）确定主题，创建一个专题网站。每位同学负责一个子题的若干网页建设。•小组讨论确定主题网站的名称，参考课本95页，表4-2•2、网站运行环境的确定•学校的校园网提供了高带宽、平稳的网站运行环境，为同学们提供存放网站的磁盘空间。峨山一中课件制作：李义进4.1网站的规划•四、网页制作工具的选择•每种网页制作工具均有优缺点，我们采用MicrosoftOfficeFrontPage2003来作为网页设计制作工具。我们可以配合Photoshop等图像处理软件，制作出精美的网页。峨山一中课件制作：李义进4.1网站的规划•五、网站开发任务的管理•1、任务分工•2、时间安排峨山一中课件制作：李义进4.2网站的设计•学习目的：了解网站设计的基本内容、对自己的主题网站进行结构、栏目设计•重点难点：网站设计的基本内容•学习方式：实例分析•学习任务：欣赏优秀网站，学习本节课的教学内容峨山一中课件制作：李义进4.2网站的设计•一、网站设计的主要内容•网站设计一般包括：网站栏目设计、网页版面设计、网页的链接设计(导航设计)等。峨山一中课件制作：李义进4.2网站的设计•二、欣赏优秀作品，思考有关问题•1、这些网站是怎样围绕主题展现内容的？•2、这些网站提供了哪些栏目及功能？•3、网站的链接有哪些特色，是否便捷？•4、网站主页有布局、色彩运用有哪些特点？•优秀网站参考：峨山一中课件制作：李义进4.2网站的设计•三、网站的结构设计•制作网站前要设计好网站的栏目。网站的栏目可以有多层，但并不是越多越好，以能够恰当地体现网站主题为好。此外，每个栏目本身应有一个大致的内容描述，以表达该栏目的设计思路，充实整个网站的总体结构设计。峨山一中课件制作：李义进4.2网站的设计峨山一中课件制作：李义进4.2网站的设计•四、网页的版面设计•网页的版面设计包括如下两方面：1、风格设计风格是指网站的整体形象给浏览者的综合感受。有的严肃，有的清爽温馨，有的深沉厚重等。风格的设计与主题密不可分，是为突出主题服务的。一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等。同一网站内的各网页之间应保持风格的一致、在每个页面的相同位置放置图标、文本块等元素，这样有利于提高浏览速度、并给人以整体感。峨山一中课件制作：李义进4.2网站的设计峨山一中课件制作：李义进4.2网站的设计•2、版面布局设计网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，要进行合理的放置，让人看起来井井有条，主次分明。下图是版面布置的一个例子。峨山一中课件制作：李义进4.2网站的设计峨山一中课件制作：李义进4.2网站的设计•五、网页的交互设计用户如何访问网站？怎样从一个位置到另一个位置？怎样防止用户在网站中“迷路”？链接点设计就是要考虑人们在浏览网站时通常有哪些需求，并帮助他快捷地路到所需的页面，实现轻松自如的浏览。峨山一中课件制作：李义进4.2网站的设计•六、给自己的主题网站设计栏目和作版面设计•“网页色彩的选择、造型及其代表意义”参考课本第105页。峨山一中课件制作：李义进4.3网页的制作(一)•学习目的：•1、了解网页素材的种类与管理•2、认识FrontPage的界面，学会建立站点，编辑简单的网页页面。•学习重点：建立站点，新建网页文件。•学习难点：在站点中保存图片。峨山一中课件制作：李义进4.3网页的制作(一)•网页制作过程：峨山一中课件制作：李义进4.3网页的制作(一)•一、准备网页素材•网页素材的准备工作主要包括网页素材的获取加工与管理1、网页素材的获取加工方法：•（1）网上搜索获取•（2）使用工具获取（如：数码相机、数码摄影机、扫描仪、录音笔等）•（3）各媒体素材光盘中获取•（4）利用工具软件制作或加工素材（如Photoshop、CorelDRAW等软件）•2、网页素材的管理•通常，我们对准备好的素材按网页进行分类，同一个网页的素材用一个文件夹来进行管理，如果需要的话还可以采用多级子文件夹详细分类。•文件夹的名字就是该页面的名称。•用最能反映文件内容或特征的英文或拼音字母作为文件名。峨山一中课件制作：李义进4.3网页的制作(一)峨山一中课件制作：李义进4.3网页的制作(一)•二、新建站点•1、启动FrontPage2003•开始→程序→MicrosoftOffice→MicrosoftOfficeFrontPage2003•2、建立空白站点：•（1）单击“文件”菜单——“新建”——“站点”——“空白站点”•（2）改变保存站点路径：在“指定新站点的位置”提示框中，输入“D:\mysite+登录号”创建一个基于磁盘的网站。峨山一中课件制作：李义进4.3网页的制作(一)峨山一中课件制作：李义进4.3网页的制作(一)•三、新建网页•1、建立网页：•单击“文件”菜单——“新建”——“空白网页”•2、导入素材：•《虎门销烟启思录》网站的图片素材：•选定站点的Images文件夹，单击“文件”菜单——“导入”——“添加文件”峨山一中课件制作：李义进4.3网页的制作(一)•3、设置网页的背景：•单击“文件”菜单——“属性”——“格式”，单击“浏览”——选择marble.gif文件•或：单击“格式”菜单——“背景”——“格式”峨山一中课件制作：李义进4.3网页的制作(一)•4、设置网页的标题：•单击“文件”菜单——“属性”——“常规”，在标题栏输入“虎门销烟启思录”。•或：单击“格式”菜单——“背景”——“常规”峨山一中课件制作：李义进4.3网页的制作(一)•5、使用表格进行页面布局•单击“表格”菜单——“插入”——“表格”，弹出表格属性对话框：峨山一中课件制作：李义进4.3网页的制作峨山一中课件制作：李义进4.3网页的制作(一)•对于《虎门销烟启思录》网站的主页的结构来看，它的表格布局为：•调整表格结构：•（1）合并单元格：选定需要合并的单元格→鼠标右击→选择“合并单元格”•（2）拆分单元格：指定需要拆分的单元格→鼠标右击→选择“拆分单元格”→拆分成行（或列）峨山一中课件制作：李义进4.3网页的制作(一)•6、插入图片•单击“插入”菜单——“图片”——“来自文件”，选择相应的图片文件峨山一中课件制作：李义进4.3网页的制作(一)•四、保存、预览网页文件•保存：单击“文件”菜单——“保存”——输入文件，首页取名为“index.htm”•预览：单击“预览”按钮或F12峨山一中课件制作：李义进4.3网页的制作(二)•学习目的：•1、了解网页素材的种类与管理•2、认识FrontPage的界面，学会建立站点，编辑简单的网页页面。•学习重点：建立站点，新建网页文件。•学习难点：在站点中保存图片。峨山一中课件制作：李义进4.3网页的制作(二)•一、打开站点•单击“文件”菜单——“打开网站”，选择网站mysite峨山一中课件制作：李义进4.3网页的制作(二)•二、网页的制作•1、使用表格进行页面布局•对于《虎门销烟启思录》网站的主页的结构来看，它的表格布局为：峨山一中课件制作：李义进4.3网页的制作(二)•调整表格结构：•（1）合并单元格：选定需要合并的单元格→鼠标右击→选择“合并单元格”•（2）拆分单元格：指定需要拆分的单元格→鼠标右击→选择“拆分单元格”→拆分成行（或列）•☆设置单元格背景：•选择相应的单元格→鼠标右击→选择“单元格属性”，对背景进行设置•☆在单元格中插入表格：•指定相应的单元格→单击“表格”菜单→插入→表格峨山一中课件制作：李义进4.3网页的制作(二)•任务一：善于运用合并单元格、拆分单元格，进一步完成版面布局工作。峨山一中课件制作：李义进4.3网页的制作(二)•2、导入素材：•《虎门销烟启思录》网站的图片素材：•选定站点的Images文件夹，单击“文件”菜单——“导入”——“添加文件”峨山一中课件制作：李义进4.3网页的制作(二)•3、设置网页的背景：•单击“文件”菜单——“属性”——“格式”，单击“浏览”——选择marble.gif文件•或：单击“格式”菜单——“背景”——“格式”峨山一中课件制作：李义进4.3网页的制作(三)•学习目的：•1、了解网页素材的种类与管理•2、认识FrontPage的界面，学会建立站点，编辑简单的网页页面。•学习重点：建立站点，新建网页文件。•学习难点：在站点中保存图片。峨山一中课件制作：李义进4.3网页的制作(三)•一、打开站点•单击“文件”菜单——“打开网站”，选择网站mysite峨山一中课件制作：李义进4.3网页的制作(三)•二、插入Flash动画•1、单击“插入”菜单，再点“高级→ActiveX控件”选项（如图1）。峨山一中课件制作：李义进4.3网页的制作(三)•2、在弹出的“插入ActiveX控件”窗口中显示了安装在电脑上的一部分ActiveX控件。点击“自定义”按钮，打开“自定义ActiveX控件列表”列表框，其中显示着电脑上所有安装的ActiveX控件。在这里查询并选中我们所需要的“ShockwaveFlashObject”控件（如图2）。单击“确定”按钮，回到“插入ActiveX控件”列表框，你会发现控件“ShockwaveFlashObject”已被添加到其中。峨山一中课件制作：李义进4.3网页的制作(三)•3、选中它后单击“确定”按钮。这时网页中会出现一块白色矩形区域。用鼠标双击它，在弹出的“ActiveX控件属性”窗口中有三个选项卡（如图3、4），其中我们主要用到的是“FlashProperties”（Flash属性），下面介绍各项的含义。峨山一中课件制作：李义进4.3网页的制作(三)•3、选中它后单击“确定”按钮。这时网页中会出现一块白色矩形区域。用鼠标双击它，在弹出的“ActiveX控件属性”窗口中有三个选项卡（如图3、4），其中我们主要用到的是“FlashProperties”（Flash属性），下面介绍各项的含义。峨山一中课件制作：李义进4.3网页的制作(三)•任务一：在首页（index.htm）插入Flash动画（Flashmovie.swf）峨山一中课件制作：李义进4.3网页的制作(三)•三、使用模板生成网页•生成模板：“文件”菜单——“另存为”模板文件——取名为“虎门销烟”。峨山一中课件制作：李义进4.3网页的制作(三)•使用模板：“文件”菜单——“新建”——“网页”——在“我的模板”选项选择“虎门销烟”。峨山一中课件制作：李义进4.3网页的制作(三)•任务二：制作其它页面（2—3个页面，有能力的同学可以做更多的网页）峨山一中课件制作：李义进4.3网页的制作(三)•四、建立超链接选择相应的栏目→鼠标右击→选择“超链接”，选择目标页面峨山一中课件制作：李义进4.3网页的制作(三