HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第1章 认识网站开发.ppt

《HTML+CSS+DIV网页设计与布局 教学课件 作者 聂斌 1_ 第1章 认识网站开发.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第1章认识网站开发相信上过网、浏览过网页的人有很多，但并不是所有人都知道什么是网络、网页、网站。从现在开始，将步入这个网络世界，了解什么是Internet、Web、URL、HTML，以及如何开发网站。本章我们先来认识什么是网站开发。1.1认识网站开发网站是按照一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。而网页是指在浏览器上登录一个网站后，看到的浏览器上的页面。网页是由文字、图片、声音等多媒体通过超链接的方式有机的组合起来的。因此，学习网站开发的基础就是学习网页制作。1.1.1网页设计概述网页是用HTML语言编写的一种文件，将这种文

2、件放在Web服务器上可以让在互联网上的其他用户浏览。比如说访问百度网站，看到的就是百度网站所编写的网页。网页也是通过HTTP协议来传递给浏览者的。网站是网页的集合，多个网页可以共同组成一个网站。网站的第一个网页称为首页。1.1.2网页构成元素网页的构成元素很丰富，可以是文字，也可以是图片，甚至可以将一些多媒体文件如音频、视频等插入到网页里。网页构成元素如下所示。1.文本2.图像3.链接4.表格5.表单6.导航条7.其他元素1.1.3网站建设流程在创建网站之前首先要了解一下网站建设的额基本流程，这样可以明确网站的目标和方向，从而提高效率。1.网站需求分析2.

3、网站整体规划3.收集资料与素材4.制作网页5.域名和服务器空间的申请6.测试与发布网站7.后期维护与网站推广1.1.4网站开发软件用于网页设计的工具软件很多，本书将以Adobe公司的DreamweaverCS6为开发工具来进行讲解，它也是最便于新手学习的软件。1.2HTML基本概念通过浏览器访问的网站，通常是基于HTML形成的。因此要想学习网站的开发，首先我们需要了解什么是HTML以及HTML的基本结构。1.2.1HTML简介HTML英文是HypertextMarkedLanguage，即超文本标记语言，是一种用来制作超文本文件的简单标记语言。用HTML编

4、写的超文本文件称为HTML文件，它能独立于各种操作系统平台。自1990年以来，HTML就被全球广域网用作其信息表示语言。1.2.2HTML基本结构HTML文件包括文件头和文件体两部分。在文件头里，主要是对这个HTML文件进行一些必要的定义，在文件体中的内容才是真正要显示的各种文件信息。一般情况下，HTML文件的结构如下所示。头部信息文件主体，正文部分1.3一个简单的HTML实例前面简单介绍了HTML文件的简介和基本结构，下面通过一个简单的HTML实例来引导读者学习HTML标记，了

5、解HTML文件的创建和运行方式。1.3.1编写HTML代码HTML文件对其编写工具的要求并不高，可以在Dreamweaver中实现，也可以在最简单的文本编辑工具中实现。1.3.2运行HTML文件查看效果编写好文件的源代码并保存后，就可以通过IE浏览器来查看HTML文件的页面效果了。1.4HTML基本标记学习HTML的标记要从最基本的标记开始，一个HTML文件所包含的基本标记主要包括文件类型标记（也称为HTML标记）、HTML头标记、页面标题以及HTML主体标记。14.1文件类型标记文件类型标记是，是双标记。它用来标示该文件是HTML类型的文件，

6、位于HTML文件代码的最外层，也就是说这一对标记必须放置在代码的开头和结尾。其语法是：1.4.2HTML头标记HTML头标记是以为开始标记，以为结束标记的双标记。它用于包含当前文件的相关信息，一般包括标题、基底信息、元信息等。一般情况下，CSS样式也是定义在头元素中的。在文件的头部通常包含如下标所示的部分或全部标记。1.4.3HTML主体标记HTML主体标记是以为开始标记，以为结束标记的双标记。它用于包含当前文件的页面内容。也就是说，在该标记之间的内容是页面中真正要显示的内容，包

7、括文字、图片、表格等。1.4.4页面标题页面标题标记是一个特殊的标记，它设置的内容并不显示在页面中，而是显示在浏览器的标题栏，用来说明文件的用途。因此，在设置该标记的时候，要使其能够体现整个页面的主题。一般情况下，每个HTML页面都应该有标题。在HTML文件中，标题信息设置在页面的头部，也就是位于与标记之间。标题标记以结束，是一个双标记，成对出现。其语法是：1.5小结本章主要认识了一下网站开发以及HTML的基本概念，让读者能够对网站开发有一个总体的了解。然

8、后通过一个实例给读者展现了一个HTML所包含的基本内容，以及不同标