优·网页制作基础知识-习题.ppt

第一章 网页制作基础知识 网页是构成网站的基本元素，也是网站信息发布的一种最常见的表现形式。网页主要由文字、图片、动画、音频、视频等信息组成。HTML超文本标记语言是网页制作的基础，在美化网页的过程中，CSS级联样式表可以方便、快捷的控制网页总体风格。 教学目标 通过本章的学习，了解HTML在网页制作中的重要作用和意义，掌握一些主要标记的含义、用法及属性设置。能够灵活的配合CSS有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 教学重点与难点 HTML文档的组成和基本标记的作用、属性设置。 利用HTML标记创建网页中的基本元素。 CSS规则和内、外部CSS的用法。 利用CSS文件对网页的总体风格进行控制。 通过修改HTML文档中代码的方法编辑并变化网页。 1.1 案例 网页制作学习园地网页 网页主要由HTML语言中起着各种作用的标记和对网页风格起控制作用的CSS样式表编写而成，本章将介绍“网页制作学习园地”网站的制作。 “网页制作学习园地”主页“index.htm”，网页效果如下所示。 1.1案例：网页制作学习园地网页 1.1.1 功能要求1．整个网站主要以HTML代码编写的方式完成。页面风格以简单、清晰为 主，网页基本元素由文本和图像组成；2．在主页中，访问者可以获得网站中的主题信息和学习内容列表。点击链 接文本，可以打开介绍相关知识点的页面；3．在页面中设置电子邮件链接，如“联系我们”，提供一个与用户互交的平台；4．为网页设置背景音乐和欢迎字幕。打开网页，有声音传出。当鼠标指针移动到滚动的欢迎字幕上时，文字停止滚动，移下鼠标后继续；5．点击页面中的链接字，在新的浏览器窗口打开一个由上框架、左框架和主框架构成的框架网页。 1.1.2 详细设计网页设计的步骤如下：1．网页总体规划 首先考虑和设计网页的框架结构和艺术风格。可以先画出网站的草图，确定网站中各网页之间的链接关系，这样在创建每个网页时都会有清晰的思路，以免迷失方向，而且以后需要进行重组的可能性较小。 “网页制作学习园地”网站的链接结构如下图： 在本地计算机的硬盘中建一个名为“mysite”的文件夹（此文件夹为空）做为站点，即网站根目录。在制作的过程中将所有创建和编辑的文档，以及用到的网页素材都保存在该文件夹中。 本案例中共需要创建三个网页，“index.htm”为网站首页，单击页面中的超链接：“第一章 网页制作基础知识”，在新的浏览器窗口中打开一个框架网页，此框架网页的文件名为“Frameset.htm”。框架网页中包括上框架（链接网页是topframe.htm）、左框架（链接网页是leftframe.htm）和主框架（链接网页是mainframe.htm）。单击左框架中的超链接：“HTML主要标记”，在主框架中打开介绍HTML文档结构标记的网页“html_tag.htm”。 在组织站点结构时，应注意以下几个问题： ① 归类站点资源 在同一个文件夹中放置相关的网页，并在需要的时候使用子文件夹。这样的组织方式可以使网站层次清晰，更容易更新、维护。 ② 确定网页素材存放的位置 站点中通常包含图像、声音、动画等多种素材，为了更好的存储资源，一般应在站点根目录下创建多个子文件夹，将用到的网页素材分门别类地存储到相应的文件夹下。必要时，可以创建多级子文件夹。 本案例中将站点命名为“mysite”，根据网站的实际需要，其中建立了“HTML”、“image”、“sound”、“style”四个文件夹，分别用来放置网页、图像、声音和样式表文件。 ③ 网页及网页元素的命名 为页面、图像和其他外部文件设计一个简单且一致的命名系统。根据一般原则，主页命名为“index.htm”，其他页面及相关的网页元素能望名知意。很多Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的支持，故在构建的站点中，建议全部使用英文字母组成文件名。 2．网页的主题定位