![轻松学HTML+CSS网站开发](https://wfqqreader-1252317822.image.myqcloud.com/cover/694/680694/b_680694.jpg)
PART1 概述篇
第1章 网页开发概述
网页简单来说就是使用浏览器访问某个网站时看到的页面,而网页的集合就是网站。其中,HTML是一种超文本链接语言,包括了网页构成的各种标签、主体内容等。CSS是网页样式表。将两者紧密相连,互相融合,可以使网页的内容丰富、外观生动。本章简单介绍了有关HTML和CSS的知识。
1.1 互联网
互联网由海量的各类计算机设备构成,如手机、笔记本电脑、台式机、服务器,这些设备通过各种网络媒介互相连接。人们通过互联网,可以进行网页浏览、音频/视频聊天、传送文件和发送邮件等一系列操作,其作用如图1.1所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0017_0001.jpg?sign=1739063080-rqBuyYQu2Zt6wKrbVcL2hL9hTniK4TGa-0-b993966c19dcf2d6a0d3b8e6c7d2a6d8)
图1.1 互联网的作用
1.2 网站
在互联网的诸多应用中,网站占有绝对重要的地位。通过网站平台,用户可以发布和获取各种信息。了解网站的构成,可以帮助读者更好地学习网页制作。下面将具体讲解网站的构成。
1.2.1 网站是如何工作的
在了解网站的构成之前,我们先了解一下网站是如何工作的。如图1.2所示演示了用户在访问网站的时候都发生了什么。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0018_0001.jpg?sign=1739063080-zGbF0m5OaHrWRZJDl7A5IN2WmncA3uF7-0-dd0fed08caf1768fc43c93aa8272009c)
图1.2 网站工作过程
(1)在浏览器地址栏中输入网站的域名。
(2)浏览器根据用户输入的网址,找到存放该网站的网站空间。
(3)网站空间对网站文件和资料进行处理,然后将处理结果返回浏览器。
(4)浏览器接收内容,并以网页的方式显示,供用户浏览。
1.2.2 网站域名
域名(Domain Name)是网站的名字,具有唯一性,整个互联网中没有重复的域名。域名是互联网上某台计算机或某个计算机组的名称,由一串用点分隔的字母组成。
1.域名的构成
域名由域名主体、类别域名和行政区域名三部分构成,每个部分使用点号(.)分隔,如图1.3所示。
其中,类别域名表示网站所代表的行业。常用的类别域名如表1.1所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0018_0002.jpg?sign=1739063080-1dPs5jzBtCSKHsWd2pcBKJlfbc9gMqew-0-a6e14825233b7177c086391be154971a)
图1.3 域名构成
表1.1 常用类别域名标识
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0018_0003.jpg?sign=1739063080-jn0upHBUida1W7oFz2U8BRt7YBPa3Wld-0-b499f7cb5793212523c44d4052d293e2)
行政区域名表示网站所代表的国家和地区。常用的行政区域名如表1.2所示。
表1.2 常用行政区域名标识
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0019_0001.jpg?sign=1739063080-pRwnnclc0vqyF5LxawCjPU7oujzAaEOi-0-27b962a494d61be0d60df816acd5a54e)
以一个常见的域名“baidu.com”为例说明。该网址由两部分组成,如图1.4所示,“baidu”是这个域名的主体,“com”则是该域名的后缀,代表这是一个公司域名。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0019_0002.jpg?sign=1739063080-kiAySsjvhwmGU4kDIx4m0RQsPVJi0D4V-0-9fc86bce7951375eb7094b5308cb9612)
图1.4 百度网址
2.域名的分级
根据所属地域的不同,域名可分为不同级别,包括顶级域名和二级域名等。域名的各个级别由点号分开,如图1.5所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0019_0003.jpg?sign=1739063080-PqnwHfKaXqyJSJ81TJ1AKexfYloSIJjQ-0-221b8854e3ccbd422e5869ee4995a063)
图1.5 域名的分级
● 顶级域名在开头有一个点,如“.XXX”。
● 一级域名就是在顶级域名的前面再加一级,如“XXX.XXX”。
● 二级域名就是在一级域名的前面再加一级,如“XXX.XXX.XXX”。
● 二级域名及其以上级别的域名,统称为子域名,不需要注册。
例如,在网址“baike.baidu.com”中,“.com”是顶级域名,“baidu”是一级域名,“baike”是子域名,如图1.6所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0019_0004.jpg?sign=1739063080-npXnlw9Om8hb7WPKIxIylqCYyMdGncUi-0-e5eeee90e8b39f26b55585e043b2e83f)
图1.6 baike.baidu.com域名分级
1.2.3 网站源程序
网站源程序,也就是我们说的源代码,是由编程人员编写的一系列可供计算机编译执行的计算机指令,通过浏览器翻译成我们所看到的网页,如图1.7所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0020_0001.jpg?sign=1739063080-bxxk0jJHt9CbYwas91G6HydQvMtBI6rI-0-382d1918b45fb89f8a0a26990af32dfc)
图1.7 网站源程序
1.2.4 网站空间
网站空间(Webhost)是用来存放网站文件和资料的空间,包括文字、图片、数据库、网站的页面等内容,如图1.8所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0020_0002.jpg?sign=1739063080-1MIQtvbUQxlO2VUzJXj3PxLB2ynDdn3V-0-99c9f245f1a1480b16c6cfa73fe80302)
图1.8 常见的网站空间内容
1.3 网页构成技术——HTML+CSS
网页整体上由页面内容、页面结构等部分构成。这些部分是由HTML代码编写的,而CSS则是对HTML的一种修饰。只有将两者相互结合,才能制作出完美的网页。本节就来介绍网页构成技术的相关知识。
1.3.1 什么是HTML+CSS
为了让大家更好地认识网页,这里给出一个使用Dreamweaver制作的一个简单网页。在IE浏览器中显示了“欢迎学习HTML+CSS”字样,右键单击网页空白处,在弹出的菜单中选择“查看源文件”命令,将弹出一个窗口,在该窗口中,我们可以看到一些代码,如图1.9所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0021_0001.jpg?sign=1739063080-M6ehmTW9tIUCvbJKOd5AioNEZG2br1ib-0-9a9eefcc028954e8ac3622d0cce230d4)
图1.9 HTML+CSS网页
在图1.9 中,我们可以看到网页代码包括两部分,分别是HTML代码和CSS代码。在“<style type="text/css">”和“</style>”中是CSS代码,其他均为HTML代码。
1.HTML
HTML(Hyper Text Markup Language,超文本标记语言)属于程序语言的一种,用来告诉浏览器应该怎样显示网页内容。例如,在图1.9中,HTML代码“<div align="center">”告诉浏览器将“欢迎学习HTML+CSS!!”内容居中显示,如图1.10所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0021_0002.jpg?sign=1739063080-FWSXtqxMg3RqwxBnRBVAfymUlgISYTLJ-0-1e0ed5d71b5e7e0281f7c1300bd41452)
图1.10 HTML代码的作用
2.CSS
CSS(Cascading Style Sheet,层叠样式表)用来给网页添加样式,它告诉浏览器应该以怎样的格式来显示网页内容。例如,图1.9 中的CSS代码告诉浏览器将“欢迎学习HTML+CSS!!”内容以大小为24px和颜色为红色显示,效果如图1.11所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0022_0001.jpg?sign=1739063080-bDzQCxxWwLtTmdbWCDKMYJitFev9Bxey-0-71e3f1d3b709df4760951d9f82f722a2)
图1.11 CSS代码的作用
1.3.2 认识XHTML
在图1.9中,HTML源代码的前四行有两句代码,如图1.12所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0022_0002.jpg?sign=1739063080-kE7oYk8nDcl9NplWzJs7Fhz1YsAQ1d2E-0-b79525cfc9faefa94d4f78573f2a1e5c)
图1.12 XHTML代码
这两句代码中都有“XHTML”字样,下面为大家讲解XHTML。
XHTML(eXtensible HyperText Markup Language,可扩展的超文本标记语言)是HTML的一个子集,表现方式与HTML类似,只是在语法上更加严格,是更纯净的HTML版本。但是,由于目前大家都遵循HTML的规范,所以本书的讲解以HTML为主。
1.3.3 JavaScript
我们平时在网上登录邮箱时,如果没有填写邮箱登录账号就单击“登录”按钮,通常会弹出一个对话框“请输入您的账号?”,如图1.13 所示,这就是JavaScript脚本语言的一个应用实例。JavaScript脚本用于在浏览器客户端进行交互,而不是将用户请求提交到服务器端再进行交互,缩短了响应时间。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0022_0003.jpg?sign=1739063080-tNj8uvAqlY1LmgQubAc8Ie3siAgeqHIR-0-08f21815297dde031ef670713efc7ce7)
图1.13 登录邮箱
1.4 网页开发工具——Dreamweaver
了解了网页的基本知识后,我们就可以开始学习制作网页了。“工欲善其事,必先利其器”,所以我们首先需要一款合适的网页开发工具。在众多开发工具中,最便于新手学习的是Dreamweaver CS6。下面将简单讲解该工具的使用方法。
1.4.1 Dreamweaver CS6的安装
Dreamweaver CS6是由Adobe公司开发的,经过不断地更新,它可以自动生成脚本代码,通过它提供的工具,不用动手编写代码便可实现多种效果。Dreamweaver CS6的安装过程,如图1.14至图1.16所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0023_0001.jpg?sign=1739063080-vrXwBsvbyNLCPuZCI9wptrwjKEgKbGcD-0-97a2a3fd54bac52b61023d9e5bfd6ba5)
图1.14 Dreamweaver CS6安装过程(1)
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0024_0001.jpg?sign=1739063080-ivg1x2tZVBuc8EAc2iEWpqmLBR0r4KD8-0-7251065af0c2f7652fa3d69dba9fe4de)
图1.15 Dreamweaver CS6安装过程(2)
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0025_0001.jpg?sign=1739063080-pNxVYQ1d9XUK1DVQJXZ7aRVDLS0bBSe1-0-5e821dc876444817487cef0993a2a387)
图1.16 Dreamweaver CS6安装过程(3)
1.4.2 认识Dreamweaver CS6
按照上面的步骤安装Dreamweaver CS6之后,启动Dreamweaver CS6软件,可以看到如图1.17所示的运行界面。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0026_0001.jpg?sign=1739063080-tTBYJOcV7WDQiEBVs5O8Jd6A78jTXkdh-0-a6105153745b0fc3b091d22b6f31ee8d)
图1.17 Dreamweaver CS6运行界面
界面上方为Dreamweaver CS6的标题栏和菜单栏,右侧为CSS样式面板、规则面板、属性面板等,下方是属性面板。我们将在后续内容的讲解中,逐一介绍这些面板。
1.5 制作第一个网页
有了开发工具后,我们马上开始制作第一个网页,操作过程如下。
(1)在图1.17中,单击“HTML”选项,新建一个空白网页。
(2)在标签 <body> 和 </body> 之间输入“我的第一个网页”,如图1.18所示。
单击“代码”按钮时,Dreamweaver CS6只显示“代码视图”,我们可以在此编辑代码。单击“设计”按钮时,Dreamweaver CS6只显示“设计视图”,我们可以看到编辑代码的效果。而单击“拆分”按钮时,Dreamweaver CS6可以同时显示“代码视图”和“设计视图”,如图1.19所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0027_0001.jpg?sign=1739063080-ahCD5xXxLxKgyXdGLbmIJ52DKbFnuY70-0-90e3a8c61c61ce6b652f7d1d7706874e)
图1.18 制作“我的第一个网页”
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0027_0002.jpg?sign=1739063080-hEZtm1OFdQMwQ9N7F0VGXFl3S3gAMwai-0-81fdeb19ef8cfb2237632d7204d6ce30)
图1.19 Dreamweaver CS6操作界面
(3)选择“文件”→“保存”命令,在弹出的“保存”对话框中将网页命名为“.html”或“.htm”文件。
(4)右键单击保存的文件,在弹出的菜单中选择“打开方式”命令,在弹出的子菜单中选择用浏览器(如IE浏览器)打开该文件,将看到如图1.20所示的网页。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0028_0001.jpg?sign=1739063080-GMzeOUfjO3JBvZrIyd1JD8MxtHr3t5NZ-0-149cdd179f41a7cc459d97494b6c1428)
图1.20 “我的第一个网页”效果
说明:保存文件后,按【F12】键可以直接看到网页效果。
1.6 小结
在本章我们讲解了网站和网页的基础知识,内容包括互联网和网站的构成及作用、网页的构成技术和开发工具,最后还带领读者制作了一个简单的网页。其中,读者需要重点掌握网站的构成和网页的构成技术。第2章将讲解网页设计的必备知识。
1.7 习题
【习题1-1】在计算机上安装Dreamweaver CS6软件,安装后运行Dreamweaver CS6软件,出现如图1.17所示的运行界面。
【习题1-2】制作一个简单的网页,网页内容只包含一行文字:“这是一个基础网页。”效果如图1.21所示。
![](https://epubservercos.yuewen.com/D574FF/3729615004514501/epubprivate/OEBPS/Images/figure_0028_0002.jpg?sign=1739063080-sAH2eqeAWwz8WRonT0C4xz0ueiWKpzOh-0-d4daf5f432ea0c5a7c7bbd13e87b3401)
图1.21 网页效果
【分析】在Dreamweaver CS6的“拆分视图”中,编写一段简单的代码,其中网页内容只包含“这是一个基础网页。”经过保存预览,显示其效果。
【关键代码】
<body> 这是一个基础网页。 </body>