DW基本操作与CSS应用.ppt

第4章 网页基本操作与CSS应用,4.1 网页的基本操作,4.2 CSS的应用,技能目标,技能目标,掌握在网页中输入文本、插入图片的方法 了解超级链接的类型，为文本或图片创建超级链接 掌握CSS样式在网页制作中的应用,4.1 网页基本操作,一个网站的主要任务是为人们提供信息， 而信息需要借助文字、图片、声音等媒体传 播。如何将这些信息添加到网页中，如何通过 超级链接实现页面的跳转，是一个网页设计者 首先要掌握的基本操作内容。,案例4-1 网页基本操作练习 创建网页，练习网页的基本操作 。 【案例分析】首先建立一个站点，然后制作三个页 面，分别插入常用的网页信息元素，再对部分文字和 图片建立超级链接。,4.1 网页基本操作,案例4-1 网页基本操作练习 【操作步骤】（演示操作） 1建立站点 2新建页面，输入文本，设置文本格式 3插入图像，设置图像属性 4建立超级链接 课堂小练习：建立一个名为“我的一家”的站点，制作 三到四个页面，并创建页面之间的超级链接。,4.1 网页基本操作,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应用,利用创建的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.2 CSS应用,案例小结： 网页制作初学者经常会遇到一些棘手的情况：精心设计好的页面在不同的浏览器中打开，编排好的页面文字、超链接等已经不是原先预想的情况；随着时间的推移，要对网站原有的几百个网页统一更改背景颜色或是标题的样式。如果能熟练的地掌握CSS的使用方法，那么这些问题将迎刃而解。要想使自己的网站更加美观、制作效率更高，还要对创建、应用CSS多加练习。,课堂小练习： 建立一个名为“最新电影推荐”的站点，制作五到六个页面，并创建CSS统一它们的风格。,实 训,第4章 DW基本操作与CSS应用,围绕某个主题构思一系列网页，应用基本操作为其添加文字、图片、超链接等，然后分别通过三种CSS的应用方式设计合理设计网站的风格。 实训目的 1学会网页的基本操作 2掌握CSS的创建、应用和编辑等方法 实训内容与步骤 确定网站内容。 网站页面设计 使用外部文件方式，利用创建好