网页制作基础任务教程（HTML5+CSS3）（上篇，共上下2篇）.pptxVIP

网页的相关概念

PART01网站、网页与主页主要内容CONTENTSPART02静态网页与动态网页PART03Web技术简介PART04网站开发流程

网站、网页与主页网站是用于展示特定内容的相关网页的集合。

网站、网页与主页根据网站文件存放的位置，网站可以分为远程站点和本地站点。远程站点存储于网络服务器上，本地站点存放在本地计算机的硬盘上。

网站、网页与主页网页是构成网站的基本元素。网页主要由文字、图像、超链接等元素构成，除此之外，网页的元素还可以包括动画、音频和视频等等。

网站、网页与主页主页是一个网站的入口网页，也称为首页。大多数作为首页的文件名是index或default。

静态网页与动态网页静态网页是标准的HTML文件，不包含在服务器端运行的程序，浏览器就可以运行。静态网页一般用来存放无需用户参与，更新较少的信息。

静态网页与动态网页动态网页是跟静态网页相对的一种网页形式，其显示的内容可以随着时间、环境或者用户的操作而发生改变。张三************以数据库技术为基础，需要服务器和客户端的共同参与运行。

web技术简介网页开发技术，也称为Web开发技术，可以分为前端技术和后端技术两大类。

web技术简介HTML（HyperTextMarkupLanguage）经历了多次版本升级，目前HTML5是最新的HTML标准。CSS（CascadingStyleSheets）可以有效地对网页元素进行美化、对页面的布局进行精确的控制。JavaScript是目前最流行的脚本语言，用来为网页添加各式各样的动态功能效果。

web技术简介焦点轮播图网页效果HTML定义网页的结构，CSS描述网页的样子，JavaScript定义网页的行为。

web技术简介焦点轮播图HTML结构未加CSS样式的焦点轮播图添加CSS样式的静态的焦点轮播图

添加了JavaScrip脚本的焦点轮播图web技术简介

主流的后端技术有PHP、JAVA、Python等技术。后端技术需要实现与数据库的交互，以处理相应的业务逻辑。web技术简介

第一步：进行需求分析、网站策划。分析网站功能、网站的风格、网站栏目分类以及费用预算等。01第二步：根据用户需求，对网站图片资料收集整理并画出网站的内容板块草图。02第三步：根据网站草图，由美工设计师通过Photoshop等设计软件绘制网页效果图。03web技术简介

第四步：正式制作网页，前端和后端网站程序员可以同时进行开发。前端程序员根据美工效果图，使用前端技术制作静态页面。后端程序员根据网站结构和功能，设计数据库并开发网站后台。04web技术简介

第五步：网站开发完成后，在本地搭建服务器进行测试，如果发现问题，及时解决问题。05第六步：网站正式发布，对网站进行备案、备份、后期维护等。06web技术简介

网页的编辑与运行

前端开发工具选择一款便捷的网页开发工具，学习该工具的使用方法及便捷功能，以提高网页开发效率。

前端开发工具编辑器浏览器文件名.htm文件名.html对于前端开发只需要一个可以编辑HTML文件的编辑器和一个可浏览HTML文件的浏览器就可以完成。

前端开发工具DreamweaverHBuilderSublimeVisualStudioCode有代码提示和语法提示等便捷功能的开发工具这些工具各有各的优势，但基本功能都差不多，只要学会了其中一种工具，对于其他的工具使用也很容易上手。

前端开发工具HBuilder的下载地址为http://www.dcloud.io对于初学者，推荐大家使用HBuilder，因为HBuilder是免费软件，下载方便、无需安装、上手最简单。

使用HBuilderX新建HTML页面1.新建项目

使用HBuilderX新建HTML页面在HBuilderX左侧的项目管理器中，右键单击项目文件夹，新建html文件并给文件命名。注意：对于网站项目中所有的文件和文件夹命名最好只包含英文字母、数字和下划线字符。2.新建HTML文件

使用HBuilderX新建HTML页面3编写代码

使用HBuilderX新建HTML页面4运行网页在HBuilderX菜单栏点击“运行”→“运行到浏览器”或者在工具栏找到“预览按钮”，选择一种浏览器就可以运行网页，查看网页效果了。

HbuilderX常用快捷键功能快捷键删除当前行Ctrl+D选中当前行Ctrl+L在选中对象的首尾添加包围标签Ctrl+]注释代码或取消注释Ctrl+/撤销Ctrl+Z复制Ctrl+C剪切Ctrl+X格式化代码Ctrl+K保存所有文件Ctrl+Alt+S运行代码Ctrl+RHbuilderX常用快捷键

HbuilderX智能选中操作（1）双击标签开头或结尾，选择该