干货：网页设计 ppt课件_其它_高等教育_教育专区(2)

PPT课件52活动三：Spry构件的应用教学目标：掌握Spry构件的插入及属性设定的方 法。知识技巧：Spry构件。PPT课件53活动三： Spry构件的应用准备知识：（1）Spry 菜单栏 （2）Spry选项卡式面板菜单栏选项卡式面板PPT课件54活动三： Spry构件的应用准备知识：（3）Spry折叠式 （4）Spry 可折叠面板折叠式可折叠面板PPT课件55活动三： Spry构件的应用活动引导：一、完成首页布局页面的制作。 二、插入Spry 菜单栏。 三、插入Spry选项卡式面板。 四、插入Spry折叠式。 五、插入Spry 可折叠面板。PPT课件56活动三： Spry构件的应用网站PPT效课件果57活动三： Spry构件的应用制作链接PPT课件58活动三： Spry构件的应用活动总结:在本活动中我们主要练习了四种Spry构 件插入及相关属性的设定，这些元素的加入 进一步丰富了我们的页面内容。PPT课件59第九章实验：制作“彩虹部落购物商场”实验要求：一、建立站点目录mysitelx，并将站点指定到站点目录。 二、完成首页的发力设计。 三、在首页中分别制作Spry 菜单栏、Spry选项卡式面板和Spry折叠式。

四、完成表单的制作并使用Spry验证输入结果。 五、插入Spry 可折叠面板，完成帮助内容的制作。注意：本实验提供的示例仅供参考，也许你可设计出别具一格的网页PPT课件60第九章实验：制作“彩虹部落购物商场”网页效果PPT课件61第十章使用模板和库PPT课件62概要：为了让网站的风格统一，网站中的网页通常带有相 同的标题栏、导航栏以及版权栏。为了提升网站的制作 及维护效率，库跟模板功能受到了广泛的应用。制作人 员在升级库跟模板时，能使所有应用该库和模版的页面 同时自动升级。二者在商业站点中应用以及广泛。本章主要借助两个活动的展开，介绍了模板的建立、 指定能编辑范围、利用模版建立新页面、模板的更新方 法。同时也介绍了库项目的构建、引用或者升级的方式。 通过本章的活动掌握模板及库项目在网站中的应用。PPT课件63活动一：网页模板的应用教学目标：掌握在网站中建立模板的方式，指定能编辑 范围，并运用模板构建新页面，更新模板的方式。知识技巧：创建模板、指定能编辑范围、利用模版建立 新页面、更新模板PPT课件64活动一：网页模板的应用准备知识：模板概述:一个成功的网站在网页设计上需要表现其样式，以至于访问者能够在茫 茫网海中对其留下或深或浅的印象，要做到这一点，不是只靠一两个设计非 常优秀的页面就可以表现的，而是应该网站中所有的页面都应来完成的，也 就是所有的页面都需要表现同一风格。

但当我们必须修改网页页面中共有的 内容时，如链接、页面布局等，就必须我们一页页的修改，这样做费时费力。如果将多个页面中用到许多相似的个别（例如每页的导航区等）做成一 个网页网页课件模板，并保存为模版，Dreamweaver会自动创建/Templates子目录，模板 文件名以".dwt"为扩展名。利用该模板就可以创建网页中的相应页面。当应 修改某些页面中的共有部分时，我们只应该设置模板中的内容，应用该模板 的页面将会自动升级，大大提高了网站的维护效率。PPT课件65活动一：网页模板的应用准备知识：（1）创建模板①直接创建模板切换到模板子面板 切换至模板子面板PPT课件修改模板名称66活动一：网页模板的应用准备知识：（1）创建模板②从文件菜单新建模板 ③将普通网页另存为模板另存模板更改模板名称PPT课件警告信息67活动一：网页模板的应用准备知识：（2）设置能编辑区域②从文件菜单新建模板 ③将普通网页另存为模板“新建可编辑区域”对话框单击“可编辑区域”按钮能编辑区域效果PPT课件68活动一：网页模板的应用准备知识：（3）利用模板建立新页面①在“新建文档”中建立 ②利用菜单命令在空白页面中创建 ③利用资源面板在空白页面中创建“选择模板”对话框“资源”面板PPT课件“新建文档”对话框69活动一：网页模板的应用准备知识：（4）更新模板“更新模板文件”对话框“更新页面”对话框PPT课件70活动一：网页模板的应用活动鼓励： 一、建立网站模板。

二、利用模版建立新网页，完成站点中所有页面的制作。三、修改模板并升级相关页面PPT课件71活动一：网页模板的应用更新PP后T课的件页面72活动一：网页模板的应用活动总结:在本活动中，我们构建了网页模板， 并借助该模板完成了站点的首页及分页的 制作。PPT课件73活动二：库工程的应用教学目标：掌握创建库项目的方式，掌握库项目在网站 中的引用，以及设置库项目跟更新页面的方式。知识技巧：创建库项目、库项目在网站中的引用、库项 目的设置并且升级页面。PPT课件74活动二：库工程的应用准备知识：（1）创建库项目 （2）库项目在网站中的引用 （3）修改库工程及升级页面PPT课件新建库工程75活动二：库工程的应用活动鼓励：一、修改模板，增加能编辑区域。 二、创建库工程，并引用到各个页面。 三、修改库工程，并完成网站的升级PPT课件76活动二：库项目的应用插入库项PP目T课后件 效果77活动二：库项目的应用“更新库项目”对话框“更新页面”提示框PPT课件78活动二：库项目的应用活动总结:在本活动中，我们练习了在网站中成立 库项目，并将库项目引用到各个页面。同时， 利用库项目，完成页面的更改。PPT课件79第十章实验：制作“驴友俱乐部”网站实验要求：一创建站点目录mysitelx，并将站点指定到站点目录。

二确立网站模板。 三将模版应用至页面。 四利用模版完成分页间的链接。 五建立链接到首页的库项目文字。 六将库项目插入至各个分页，完成本站点的制作。注意：本实验提供的示例仅供参考，也许你可设计出别具一格的网页PPT课件80第十章实验：制作“驴友俱乐部”网 站首页效果PPT课件81第十章实验：制作“驴友俱乐部”网 站分页效果PPT课件82第十一章CSS样式表PPT课件83概要：将样式表与网站相关联，关联的网页将手动套用风格表中 的格式。使所有网页中都可以应用同样的风格，这样又保证了 站点风格的一次性，又增加了工作强度。本章节主要介绍了在 网页中添加样式表的方式和样式表文件的导入及链接外部形状 表的方式。同时还具体体现了CSS样式的涵义及CSS样式定义中 各选项的意义。此外，简单介绍使用CSS布局页面的方式。本章节主要借助三个活动，分别介绍了CSS样式的概念以及 作用，在网页中添加三种颜色的方式；详细论述了CSS 样式定义 的各选项的意思及其使用；样式表文件的导入及链接外部形状 表的方式；使用Div标签跟CSS的来布局网页。PPT课件84活动一：初识样式表教学目标：了解CSS样式的概念以及作用，熟练掌握 在网页中添加CSS样式的方式。

知识技巧：CSS样式、自定义CSS样式、重新定义特定标 签样式、CSS选择器。PPT课件85活动一：初识样式表准备知识：（1）了解CSS样式定义 （2）CSS样式分类CSS样式CSS样式包括3种：可应用于任何标签、重新定义的特定标签风格和选择器样式①可应用于任何标签必须指定应用对象，然后进行应用。使用自定义CSS样式可以控制各类网 页元素的外观，其中包含文本的图标变化、字宽度和行长度差异或者边框效果等多重属性。②重新定义的特定标签不需要应用，所有网站中的该类标签都将自动生效。重定义HTML标签 可以改变标签的默认颜色。用户可以借助修改特定标签的风格来颠覆网页特定标签的属性。③选择器样式也不需要应用，直接生效。CSS选择器可以控制超级链接的风格。在设置CSS选 择器样式时，a：link控制网站中链接文本的普通状态外观。a:visited控制即将访问的超级链接 文本的外观。a:hover控制的是鼠标悬停状态下超级链接文本的外观。PPT课件86活动一：初识样式表活动引导：一、新建站点及网页。 二、制作标题栏，建立选择器样式。 三、利用再次定义特定标签的外观，设置网页文字格式。 四、完成主要内容区域的制作，建立能应用于任何标签样式。

五、完成网页的制作。PPT课件87活动一：初识样式表网页效果PPT课件88活动一：初识样式表活动总结:在本活动中我们借助修改3种CSS样式： 自定义类别风格、重新定义的特定标签风格跟 选择器样式，对网站中的文字、链接文字及边 框设置相应的属性。掌握这3种样式设定的基 本办法。PPT课件89活动二： CSS 样式的应用教学目标：掌握CSS 样式定义的选项含义以及应用方式。知识技巧：类型”分类、“背景”分类、“区块”分类、 “方框”分类、“边框”分类、“列表”分类、“定 位”分类、“扩展”分类及样式表文件的导出。PPT课件90活动二：CSS 样式的应用准备知识：（1）“类型”分类 （2）“背景”分类“类型”选项“背景”选项PPT课件91活动二：CSS 样式的应用准备知识：（3）“区块”分类 （4）“方框”分类“区块”选项PPT课件“方框”选项92活动二：CSS 样式的应用准备知识：（5）“边框”分类 （6）“列表”分类“边框”选项PPT课件“列表”选项93活动二：CSS 样式的应用准备知识：（7）“定位”分类 （8）“扩展”分类“扩展”选项“定位”选项PPT课件94活动二：CSS 样式的应用活动鼓励：一、设置“类型”及“背景”分类选项。

二、设置“区块”、“列表”、“方框”分类 选项。 三、设置“扩展”分类选项。 四、设置“边框”分类选项。PPT课件95活动二：CSS 样式的应用网站效果PPT课件96活动二：CSS 样式的应用活动总结:在本活动中，我们对网页应用了不同 的CSS样式。在应用CSS样式后，我们需要 保存网站，在预览状态下，才能见到其效 果。PPT课件97活动三：使用CSS布局页面及风格表的载入教学目标：了解CSS布局页面的方式，掌握链接 外部形状表的方式。知识技巧：样式表文件。PPT课件98活动三：使用CSS布局页面及颜色表的载入准备知识：（1）链接外部样式表 （2）使用CSS布局页面我们曾经面两个活动中的页面为例，如图11.61 所示。我们可以将页面分为三个别：1、顶部部分，其中既包含了LOGO、MENU和 一幅Banner图片；2、内容部分既能分为侧边栏、主体内容； 3、底部，包括一些版权信息。PPT课件网页布局99活动三：使用CSS布局页面及风格表的载入活动鼓励：一、编写CSS样式。 二、新建页面，导入CSS样式表文件。 三、完成HTML代码。 四、链接到各网页，完成网站的制作。PPT课件100活动三：使用CSS布局页面及风格表的载入网页P效PT课果件101活动三：使用CSS布局页面及风格表的载入设定链接PPT课件102活动三：使用CSS布局页面及颜色表的载入活动总结:在本活动中我们主要认识了运用CSS布局 页面的方式，同时掌握了样式表文件的载入。

使用这些方式可以便捷地使多个网页应用同一 种颜色。PPT课件103第十一章实验：制作“爱美特电子技术”实验要求：一、建立站点目录mysitelx，并将站点指定到站点目录。 二、完成首页制作，为首页设定文字、背景图像、边形状。 三、完成分页制作，为分页设置项目列表、边框颜色。 四、完成各网页间的链接，并修改链接文字的风格。注意：本实验提供的示例仅供参考，也许你可设计出别具一格的网页PPT课件104第十一章实验：制作“爱美特电子技术”网页PP效T课果件105