DW基本操作和CSS应用(第4章).pptVIP

技能目标 掌握在网页中输入文本、插入图片的方法 了解超级链接的类型，为文本或图片创建超级链接 掌握CSS样式在网页制作中的应用? 4.1 网页基本操作 一个网站的主要任务是为人们提供信息， 而信息需要借助文字、图片、声音等媒体传 播。如何将这些信息添加到网页中，如何通过 超级链接实现页面的跳转，是一个网页设计者 首先要掌握的基本操作内容。 4.1 网页基本操作 案例4-1 网页基本操作练习 创建网页，练习网页的基本操作 。 【案例分析】首先建立一个站点，然后制作三个页 面，分别插入常用的网页信息元素，再对部分文字和 图片建立超级链接。 4.1 网页基本操作 案例4-1 网页基本操作练习 【操作步骤】（演示操作） 1．建立站点 2．新建页面，输入文本，设置文本格式 3．插入图像，设置图像属性 4．建立超级链接 课堂小练习：建立一个名为“我的一家”的站点，制作 三到四个页面，并创建页面之间的超级链接。 4.2 CSS应用 层叠样式表CSS（Cascading Stylesheets，层叠样式表） 是一系列格式设置规则，允许用户在HTML文档中加入样式（如背景、文字字体、颜色等），控制 Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容(HTML 代码)位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。 4.2 CSS应用 CSS把网页上的内容结构和格式控制相分离，使得网页可以光由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。这样一来一方面简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）；另一方面可以通过CSS样式表文件统一整个站点的风格特色，而且当你面要对有数百个网页的站点进行修改的时候，避免了一个一个网页的修改，大大减少了重复劳动的工作量！ 4.2 CSS应用 案例4-2 使用CSS统一“上古世界七大奇迹”系列网页 4.2 CSS应用 案例4-2 使用CSS统一“上古世界七大奇迹”系列网页 【案例分析】 观察素材库中该系列的8个页面，它们的结构布局一致，但是标题和正文的字体、大小、颜色以及超链接的样式还不太令人满意，需要利用CSS样式表进行修改并统一风格。 4.2 CSS应用 案例4-2 使用CSS统一“上古世界七大奇迹”系列网页 【操作步骤】 （1）创建文件夹，将相关素材拷至文件夹内，并在其下创建子文件夹“CSS”用来存放创建的CSS样式表。 （2）新建CSS规则，分别利用“选择器类型”选项列表中的“类”、“标签”、“高级”属性对网页中的标题、文字、超链接的样式进行修改。 （3）对所有的网页应用该CSS。 （4）对超级链接的属性进行修改，观察应用了CSS的所有的网页的变化，体会CSS的作用 。 （演示操作） 4.2 CSS应用 案例4-2 使用CSS统一“上古世界七大奇迹”系列网页 第4章 DW基本操作与CSS应用 实 训 * * *／12 第4章 网页基本操作与CSS应用 4.1 网页的基本操作 4.2 CSS的应用 技能目标 利用创建的CSS样式表统一“上古世界七大奇迹”系列网页的风格，如图所示。 案例小结： 网页制作初学者经常会遇到一些棘手的情况：精心设计好的页面在不同的浏览器中打开，编排好的页面文字、超链接等已经不是原先预想的情况；随着时间的推移，要对网站原有的几百个网页统一更改背景颜色或是标题的样式。如果能熟练的地掌握CSS的使用方法，那么这些问题将迎刃而解。要想使自己的网站更加美观、制作效率更高，还要对创建、应用CSS多加练习。 课堂小练习： 建立一个名为“最新电影推荐”的站点，制作五到六个页面，并创建CSS统一它们的风格。 围绕某个主题构思一系列网页，应用基本操作为其添加文字、图片、超链接等，然后分别通过三种CSS的应用方式设计合理设计网站的风格。 实训目的 1．学会网页的基本操作 2．掌握CSS的创建、应用和编辑等方法 实训内容与步骤 确定网站内容。 网站页面设计 使用外部文件方式，利用创建好的CSS文件统一网站所有页面风格 使用内部文档头方式和直接插入式对个别页面需要特殊设定样式的地方进行局部修改 修改创建好的CSS样式文件，观察所有应用该CSS样式文件的页面是否随之改变 * * *／12