第4章网站的开发重点.ppt

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）班加油！） ?????? 操作方法：点击这里自主学习 任务二：制作悬停按钮，并链接到信息技术教学网（） ????? 操作方法：点击这里自主学习 任务三：制作使几幅图片一幅幅的按照一定的切换效果不断播放——横幅广告管理器 ????? 素　　材：在Internet上自动获取????? 操作方法：点击这里自主学习 4.4 网页的美化与特效制作(二) 任务四：制作用鼠标单击我，我就飞了——DHTML效果 ????? 操作方法：点击这里自主学习 任务五：设置网页的过渡效果 ????? 操作方法：点击这里自主学习 * 系统功能模块 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、导入素材： 《虎门销烟启思录》网站的图片素材： 选