第4章网站的开发ppt课件.ppt

网络技术应用,信息技术（选修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-22、网站运行环境的确定学校的校园网提供了高带宽、平稳的网站运行环境，为同学们提供存放网站的磁盘空间。,4.1 网站的规划,四、网页制作工具的选择每种网页制作工具均有优缺点，我们采用Microsoft Office FrontPage 2003 来作为网页设计制作工具。我们可以配合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、启动FrontPage 2003开始 程序 Microsoft Office Microsoft Office FrontPage 20032、建立空白站点： （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控件。在这里查询并选中我们所需要的“Shockwave Flash Object”控件（如图2）。单击“确定”按钮，回到“插入ActiveX控件”列表框，你会发现控件“Shockwave Flash Object”已被添加到其中。,4.3 网页的制作(三),3、选中它后单击“确定”按钮。这时网页中会出现一块白色矩形区域。用鼠标双击它，在弹出的“ActiveX控件属性”窗口中有三个选项卡（如图3、4），其中我们主要用到的是“Flash Properties”（Flash属性），下面介绍各项的含义。,4.3 网页的制作(三),3、选中它后单击“确定”按钮。这时网页中会出现一块白色矩形区域。用鼠标双击它，在弹出的“ActiveX控件属性”窗口中有三个选项卡（如图3、4），其中我们主要用到的是“Flash Properties”（Flash属性），下面介绍各项的含义。,4.3 网页的制作(三),任务一：在首页（index.htm）插入Flash动画（Flashmovie.swf）,4.3 网页的制作(三),三、使用模板生成网页 生成模板：“文件”菜单“另存为”模板文件取名为“虎门销烟”。,4.3 网页的制作(三),使用模板：“文件”菜单“新建”“网页”在“我的模板”选项选择“虎门销烟”。,4.3 网页的制作(三),任务二：制作其它页面（23个页面，有能力的同学可以做更多的网页）,4.3 网页的制作(三),四、建立超链接选择相应的栏目鼠标右击选择“超链接”，选择目标页面,4.3 网页的制作(三),任务三：将所有页面进行超链接，并浏览测试你的超链接是否正确（按F12键可以实现浏览）。,4.4 网页的美化与特效制作(一),学习目标：1、学习网页制作软件FORNTPAGE的基本操作；2、熟练应用标签，简单样式表。重点难点：制作和应用样式表。学习方式：自主学习学习任务：模仿制作“虎门销烟启思录”网页,4.4 网页的美化与特效制作(一),一、超链接的应用之“书签”。假如在同一个页面中，内容较多，长度较长，有很多小标题时，浏览时需要不停地上下拖动滚动条，极不方便，这时候，我们可以按照段落或小标题建立超链接书签，以方便浏览。书签是网页中北标记地位置或标记的文本。建立书签的方法分两步：第一步：定义书签；选定位置或文字“插入”“书签”命名书签确定。第二步：建立书签的超链接。选定超链接文字“插入”“超链接”“书签”选择书签标记。,4.4 网页的美化与特效制作(一),任务一：完成“英勇之师战沙场”（YingYongZhiShiZhanShaChang.htm）的书签设置,4.4 网页的美化与特效制作(一),二、简单样式表分类及应用。（1）内部样式表： 样式定义放在 之间，所定义的样式将影响到页面上相应标记。图中红色方框中的就是内部样式表。它是对 标记 之间的内容起作用。,4.4 网页的美化与特效制作(一),（2）内嵌式样式表样式定义直接放在html标记中，仅对该标记所包含的内容所起的作用。请看上图所示的绿色方框部分。（3）外部样式表把样式的编码单独存放在一个文本文件中，文件的扩展名是 .css 然后在实际网页文件中通过链接样式表引用的方法来应用。如图红色框部分：,4.4 网页的美化与特效制作(一),技巧：在同一个页面中，可以同时使用三种样式表，不过，我们也应该知道它们起作用的优先次序：如图3最高级：内嵌式样式表 中间级：内部样式表 最低级：外部样式表,4.4 网页的美化与特效制作(一),任务二：对“背景介绍（QinZhengFuFuBai.htm）”页面应用“内部样式表”操作方法：参考教材P119任务（1）（2）两个步骤 任务三：对所有页面应用“外部样式表”操作方法：参考教材P119-120任务（3）（4）两个步骤 实践：定义样式表，简化网站中网页美化设计和制作工作。比较一下三种样式定义（内嵌样式、内部样式和外部样式）的影响范围与应用场合。,4.4 网页的美化与特效制作(二),学习目标：1、学习网页制作软件FORNTPAGE的基本操作；2、熟练组件的使用。重点难点：组件的使用。学习方式：自主学习,4.4 网页的美化与特效制作(二),任务一：制作水平滚动字幕（如：连滩中学高二（X）班加油！） 操作方法：点击这里自主学习任务二：制作悬停按钮，并链接到信息技术教学网（http:/） 操作方法：点击这里自主学习任务三：制作使几幅图片一幅幅的按照一定的切换效果不断播放横幅广告管理器 素材：在Internet上自动获取 操作方法：点击这里自主学习,4.4 网页的美化与特效制作(二),任务四：制作用鼠标单击我，我就飞了DHTML效果 操作方法：点击这里自主学习任务五：设置网页的过渡效果 操作方法：点击这里自主学习,