第1章 网页设计与制作基础——(网页设计与制作共11章).ppt

网页设计与制作案例教程 第1章 网页设计与制作基础 1.1 学习任务：网页和网站基本知识 1.2 学习任务：网站开发的基本流程 1.3 学习任务：全面认识Dreamweaver CS4 1.4 学习任务：创建和管理本地站点 1.5 学习任务：HTML标识语言基础 1.6 应用实例——制作一个简单的网页 1.7 实训 1.1学习任务：网页和网站基本知识 1.1.1网页和网站概述 1.1.2 网页的主要元素 1.1.3 网页类型 1.1.4静态网页编辑软件 1.1.5网页图像与网页动画制作软件 1.1.1 网页和网站概述 互联网是一个蕴藏着无穷资源的宝库，在资源共享和信息交换方面具有得天独厚的优势，网页正是这些资源和信息重要的传递载体。 1．网页 浏览Web时所看到的文件称为Web页，又称为网页。网页可以将不同类型的多媒体信息（包括文字、图像、动画、声音、视频等）组合在一个文档中。由于这些文档是用超文本标记语言表示的，其文件名一般是以.html或.htm结尾，因此又称为HTML文档或超文本。 超文本可以给浏览者带来视觉和听觉的享受，所以Web技术又称为超媒体技术。 网页比报纸、广播、电视等传统媒介在信息传递上更加迅速、 多样化，交互能力更强。在浏览器的地址栏中输入一个网址，例如，即可在浏览器中打开网页，如图1-1所示，该网页往往是一个网站的主页（即Home Page），具有呈现整个网站主题以及页面导航的门户功能。 在网页上点击鼠标右键，选择“查看源文件”，就能很清楚地看到网页的代码结构。用户可以使用记事本对网页中的文字、图片、表格、多媒体等页面内容进行编辑，并通过标记语言HTML对这些元素进行描述和控制，最后由浏览器对这些标记进行解释并生成最终呈现在用户眼前丰富多彩的网页。 2．网站 根据提供服务的不同，通常把提供网页服务的服务器称为Web服务器，相关网站称为Web站点。一个Web站点由一个或多个Web页组成，这些Web页相互连接在一起，存放在Web服务器上，以供浏览者访问。 网站是提供各种信息和服务的基地，如用户熟悉的搜狐、新浪、雅虎等。网站是由很多网页链接在一起组成的。用户浏览到一个网站时看到的第一个页面叫做主页。从主页出发，可以访问到本网站的每一个页面，也可以链接到其他网站，方便地共享网站资源。 Web所包含的是双向信息。一方面浏览者可以通过浏览器浏览他人的信息；另一方面，浏览者也可以通过Web服务器建立自己的网站和发布自己的信息。 ?提示：在Dreamweaver中，网页设计都是以一个完整的web站点为基本对象的，所有的资源和网页的编辑都在此站点中进行，不建议脱离站点环境，初学者要养成良好的习惯。 1.1.2 网页的主要元素 网页包括的主要元素有：文本、图像、动画、导航栏、超链接、表格、表单等。 1．文本 文本是人类最重要的信息载体和交流工具，网页的主体一般以文本为主。制作网页时，可以根据需要设置文本的字体、字号、颜色、样式等属性，风格独特的网页文本设置会给浏览者赏心悦目的感觉。 ?提示：在网页中应用了某种字体样式后，如果浏览者的计算机中没有安装该种样式的字体，字体就以计算机系统默认的字体显示出来，此时就无法显示出网页的效果了。 2．图像 图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等功效。图像可以用作网页的标题、网站Logo、网页背景、链接按钮、导航栏、网页主图等。图像给人的视觉效果要比文字强烈得多，在网页中灵活应用图像可以起到点缀的效果。虽然图像在网页中不可或缺，但也不能太多，因为图像的下载速度较慢，而且网页上如果放置了过多的图片，会显得很乱，有喧宾夺主之势。 网页上的图像文件大部分都是使用JPG和GIF格式，因为，它们除了具有压缩比例高外，还具有跨平台特性。 3．动画 动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效的方法。如果网页中存有太多的动画，会使浏览者眼花缭乱，无心细看。所以，对动画制作的要求越来越高。在网页中加入的动画一般是GIF格式的动画和Flash动画等。 4．导航栏 导航栏是网站设计者在规划网站结构时必须考虑的一个问题，站点的每个网页上均应设置导航栏，并且应将其放置在网页中比较明显的位置。设置导航栏的目的是使浏览者能够顺利地浏览网页，方便地返回主页或继续下一页的访问。导航栏可以是文本、按钮或图像的样式。 5．超链接 超链接是网页中最为有用的功能之一。超链接是从一个网页指向另一个网页的链接，该链接既可以指向本地网站的另一个网页，也可以指向世界各地的其他网页。 无论是文本还是图像都可以加上超链接标记，当鼠标指上超链接对象时会变成小手形状，单击鼠标左键即可链接到相应地址（URL）的网页。超链接包括站内链接和站外链接。 站内