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

《网页制作基础知识-习题.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第一章网页制作基础知识网页是构成网站的基本元素，也是网站信息发布的一种最常见的表现形式。网页主要由文字、图片、动画、音频、视频等信息组成。HTML超文本标记语言是网页制作的基础，在美化网页的过程中，CSS级联样式表可以方便、快捷的控制网页总体风格。教学目标通过本章的学习，了解HTML在网页制作中的重要作用和意义，掌握一些主要标记的含义、用法及属性设置。能够灵活的配合CSS有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。教学重点与难点HTML文档的组成和基本标记的作用、属性设置。利用HTML标记创建网页中的基本元素。CSS规则和内、外部CSS的用法。利

2、用CSS文件对网页的总体风格进行控制。通过修改HTML文档中代码的方法编辑并变化网页。1.1案例网页制作学习园地网页网页主要由HTML语言中起着各种作用的标记和对网页风格起控制作用的CSS样式表编写而成，本章将介绍“网页制作学习园地”网站的制作。“网页制作学习园地”主页“index.htm”，网页效果如下所示。1.1案例：网页制作学习园地网页点击网页中的超链接“第一章网页制作基础知识”字样，在新窗口中打开一个框架网页“Frameset.htm”，点击“HTML主要标记”，在主框架中打开相关网页。网页效果如下所示。1.1.1功能要求1．整个网站主要以HTML代码编写的方

3、式完成。页面风格以简单、清晰为主，网页基本元素由文本和图像组成；2．在主页中，访问者可以获得网站中的主题信息和学习内容列表。点击链接文本，可以打开介绍相关知识点的页面；3．在页面中设置电子邮件链接，如“联系我们”，提供一个与用户互交的平台；4．为网页设置背景音乐和欢迎字幕。打开网页，有声音传出。当鼠标指针移动到滚动的欢迎字幕上时，文字停止滚动，移下鼠标后继续；5．点击页面中的链接字，在新的浏览器窗口打开一个由上框架、左框架和主框架构成的框架网页。1.1.2详细设计网页设计的步骤如下：1．网页总体规划首先考虑和设计网页的框架结构和艺术风格。可以先画出网站的草图，确定网

4、站中各网页之间的链接关系，这样在创建每个网页时都会有清晰的思路，以免迷失方向，而且以后需要进行重组的可能性较小。“网页制作学习园地”网站的链接结构如下图：在本地计算机的硬盘中建一个名为“mysite”的文件夹（此文件夹为空）做为站点，即网站根目录。在制作的过程中将所有创建和编辑的文档，以及用到的网页素材都保存在该文件夹中。本案例中共需要创建三个网页，“index.htm”为网站首页，单击页面中的超链接：“第一章网页制作基础知识”，在新的浏览器窗口中打开一个框架网页，此框架网页的文件名为“Frameset.htm”。框架网页中包括上框架（链接网页是topframe.ht

5、m）、左框架（链接网页是leftframe.htm）和主框架（链接网页是mainframe.htm）。单击左框架中的超链接：“HTML主要标记”，在主框架中打开介绍HTML文档结构标记的网页“html_tag.htm”。index.htmFrameset.htmtopframe.htmleftframe.htmmainframe.htmhtml_tag.htmm在组织站点结构时，应注意以下几个问题：①归类站点资源在同一个文件夹中放置相关的网页，并在需要的时候使用子文件夹。这样的组织方式可以使网站层次清晰，更容易更新、维护。②确定网页素材存放的位置站点中通常包含图像、声

6、音、动画等多种素材，为了更好的存储资源，一般应在站点根目录下创建多个子文件夹，将用到的网页素材分门别类地存储到相应的文件夹下。必要时，可以创建多级子文件夹。本案例中将站点命名为“mysite”，根据网站的实际需要，其中建立了“HTML”、“image”、“sound”、“style”四个文件夹，分别用来放置网页、图像、声音和样式表文件。③网页及网页元素的命名为页面、图像和其他外部文件设计一个简单且一致的命名系统。根据一般原则，主页命名为“index.htm”，其他页面及相关的网页元素能望名知意。很多Internet服务器使用的是英文操作系统，不能对中文文件名提供很好的

7、支持，故在构建的站点中，建议全部使用英文字母组成文件名。2．网页的主题定位确定为什么要创建这个网页及希望展示的内容。创建此页面的目的是让访问者一打开网页就能发掘学习的内容，同时显示友好的标语欢迎访问者。3．图片、声音等媒体文件的使用要让网页更加美观，更具人性化，可在网页中适当添加图片、动画、音/视频等多媒体文件。为了保证网页的传输速度，选择网络上常见的媒体格式，并将它们放置在相应的文件夹中。4．制作工具的选择可使用FrontPage、DreamWeaver等网页制作软件。在本案例中，将使用DreamWeaverMX进行“网页制作学习园地”网站的创建。