《HTML5+CSS3任务驱动教程(第2版)（微课版）》课件 模块1 网页设计基础知识 .pptx

模块一网页设计基础知识

目录任务一任务二任务三HBuilderX的安装网站的建立网页的基本知识

1.1HBuilderX的新增功能1．全新的代码编辑器2．开发人员工作区3．CSS预处理器支持4．实时浏览器预览5．HTML文档中的快速CSS编辑任务1HBuilderX的安装

1.1HBuilderX的新增功能6．无鼠标操作7．用于重复任务的多个光标8．新式UI（UserInterface，用户界面）9．UI颜色主题任务1HBuilderX的安装

任务实现（1）进入官网：https://dcloud.io/，单击“HBuilderX极客开发工具”图标，进入下载界面。根据自己的计算机系统选择合适的版本，单击“Download”下载，如图所示。（2）HBuilderX安装好后，解压安装包，双击HBuilderX.exe文件，如图所示。任务1HBuilderX的安装

任务实现（3）HBuilderX启动成功，如图所示。任务1HBuilderX的安装

任务实现任务1HBuilderX的安装（4）双击打开HBuilderX.exe文件或者桌面上HBuilderX快捷方式，从菜单栏中选择“文件”|“新建”|“项目”|选项，出现“新建项目”对话框，输入项目名称chapter01，项目存放位置为“D:/Web前端源码”，如图所示。在“选择模板”中选择“基本HTML项目”，单击“创建”按钮。

任务实现任务1HBuilderX的安装（5）此时，在选择的路径中创建了一个项目名称命名的文件夹chapter01,并在该文件夹中自动创建了css、img、js文件夹和index.html文件。这就建立了一个完整的静态网站所必需的文件结构。在HBuilderX左侧的项目管理器中，单击chapter01项目，可以看到该项目中的所有文件，如图所示。css文件夹用于存放网站中的样式文件；img文件夹用于存放网站中的图片文件等；js文件夹用于存放网站中的脚本文件；index.html文件为网站的首页文件。

引入知识点任务2网站的建立1.2网页、网站、首页1.3静态网页和动态网页1.4IP地址、域名和URL

任务2网站的建立1.2网页、网站、首页1．网页网页（WebPage）是一种网络信息传递的载体，是构成网站的基本元素，同时是承载各种网站应用的平台，可以简单地认为：网站就是由网页组成的。用户需要通过浏览器来浏览网页，从网页中获得相关信息。网页本身就是一个文件，网页中可以有文字、图像、音频及视频等信息，它存放在世界某个角落的某台计算机中，如果想访问或者浏览它，这台计算机必须与互联网相连。

任务2网站的建立1.2网页、网站、首页2．网站网站（WebSite）由网页组成，因此，网站就是一个存放网络服务器上的完整信息的集合体。它是由单个或者多个网页组成的集合，如Google、新浪，以及一些政府机关、企事业单位和个人网站等。

任务2网站的建立1.2网页、网站、首页3．首页首页（HomePage）是一个特殊的网页，它作为一个单独的网页时，和一般网页一样，可以存放一些相关信息，同时，它也可以作为整个网站的起始点和汇总点。首页和主页的区别在于：在建立网站时，通常会将信息分类并建立一个网页，放置网站相关信息的目录，也就是主页。但是，不是所有的网站都会将主页设置为首页，一些网站还会将动画放在首页上，并将主页链接放在首页上，用户需要单击链接进而进入主页。

任务2网站的建立1.3静态网页和动态网页1．静态网页静态网页也称平面页，其文件名通常以.htm、.html、.shtml、.xml（可扩展标记语言）等为后缀。用户只能被动地浏览网页设计者提供的网页内容，网页内容不会发生变化（除非网页设计者修改了网页的内容）。静态网页不能实现和浏览网页的用户之间的交互，其信息流向是单向的。

任务2网站的建立1.3静态网页和动态网页静态网页的特点如下：（1）静态网页的每个页面都有一个固定的URL（UniformResourceLocator，统一资源定位符），且网页的URL以.htm、.html、.shtml等常见的形式为后缀；（2）静态网页内容一经发布到网站服务器上，无论是否有用户访问，都是保存在网站服务器上的，也就是说，静态网页是保存在服务器上的文件，每个静态网页都是一个独立的文件；（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；

任务2网站的建立1.3静态网页和动态网页（4）静态网页没有数据库的支持，在网站维护方面比较麻烦，因此当网站信息量很大时，完全依靠静态网页的网站制作方式比较困难；（5）静态网页的交互性较差，在功能方面有很大的限制；（6）静态网页页面浏览速度很快，整个