HTML5网页制作完整版课件全套电子教案.pptx

HTML5网页制作367页完整版课件正版可修改PPT网页的相关概念主要内容CONTENTS静态网页与动态网页网站开发流程Web技术简介网站、网页与主页PART 03PART 02PART 04PART 01网站、网页与主页　网站是用于展示特定内容的相关网页的集合。网站、网页与主页　根据网站文件存放的位置，网站可以分为远程站点和本地站点。远程站点存储于网络服务器上，本地站点存放在本地计算机的硬盘上。网站、网页与主页　网页是构成网站的基本元素。网页主要由文字、图像、超链接等元素构成，除此之外，网页的元素还可以包括动画、音频和视频等等。网站、网页与主页主页是一个网站的入口网页，也称为首页。大多数作为首页的文件名是index或default。静态网页与动态网页　　静态网页是标准的HTML文件，不包含在服务器端运行的程序，浏览器就可以运行。静态网页一般用来存放无需用户参与，更新较少的信息。静态网页与动态网页　动态网页是跟静态网页相对的一种网页形式，其显示的内容可以随着时间、环境或者用户的操作而发生改变。　以数据库技术为基础，需要服务器和客户端的共同参与运行。张三************web技术简介　网页开发技术，也称为Web开发技术，可以分为前端技术和后端技术两大类。web技术简介HTML（Hyper Text Markup Language）经历了多次版本升级，目前HTML5是最新的HTML标准。CSS（Cascading Style Sheets）可以有效地对网页元素进行美化、对页面的布局进行精确的控制。JavaScript是目前最流行的脚本语言，用来为网页添加各式各样的动态功能效果。web技术简介HTML定义网页的结构，CSS描述网页的样子，JavaScript定义网页的行为。焦点轮播图网页效果web技术简介未加CSS样式的焦点轮播图添加CSS样式的静态的焦点轮播图焦点轮播图HTML结构web技术简介添加了JavaScrip脚本的焦点轮播图web技术简介　主流的后端技术有PHP、JAVA 、Python等技术。后端技术需要实现与数据库的交互，以处理相应的业务逻辑。web技术简介020301第三步：第二步：第一步：根据用户需求，对网站图片资料收集整理并画出网站的内容板块草图。根据网站草图，由美工设计师通过Photoshop等设计软件绘制网页效果图。进行需求分析、网站策划。分析网站功能、网站的风格、网站栏目分类以及费用预算等。web技术简介04第四步：正式制作网页，前端和后端网站程序员可以同时进行开发。前端程序员根据美工效果图，使用前端技术制作静态页面。后端程序员根据网站结构和功能，设计数据库并开发网站后台。web技术简介0506第五步：第六步：网站正式发布，对网站进行备案、备份、后期维护等。网站开发完成后，在本地搭建服务器进行测试，如果发现问题，及时解决问题。网页的编辑与运行前端开发工具选择一款便捷的网页开发工具，学习该工具的使用方法及便捷功能，以提高网页开发效率。前端开发工具对于前端开发只需要一个可以编辑HTML文件的编辑器和一个可浏览HTML文件的浏览器就可以完成。浏览器文件名.html编辑器文件名.htmSublimeVisual Studio CodeHBuilder前端开发工具有代码提示和语法提示等便捷功能的开发工具Dreamweaver这些工具各有各的优势，但基本功能都差不多，只要学会了其中一种工具，对于其他的工具使用也很容易上手。前端开发工具对于初学者，推荐大家使用HBuilder，因为HBuilder是免费软件，下载方便、无需安装、上手最简单。HBuilder的下载地址为http://www.dcloud.io使用 HBuilderX 新建 HTML 页面1.新建项目使用 HBuilderX 新建 HTML 页面在HBuilderX左侧的项目管理器中，右键单击项目文件夹，新建html文件并给文件命名。对于网站项目中所有的文件和文件夹命名最好只包含英文字母、数字和下划线字符。注意：2.新建HTML文件使用 HBuilderX 新建 HTML 页面3 编写代码使用 HBuilderX 新建 HTML 页面在HBuilderX菜单栏点击“运行”→“运行到浏览器”或者在工具栏找到“预览按钮”，选择一种浏览器就可以运行网页，查看网页效果了。4 运行网页HbuilderX常用快捷键HbuilderX常用快捷键功能快捷键删除当前行Ctrl+D选中当前行Ctrl+L在选中对象的首尾添加包围标签Ctrl+]注释代码或取消注释Ctrl+/撤销Ctrl+Z复制Ctrl+C剪切Ctrl+X格式化代码Ctrl+K保存所有文件Ctrl+Alt+S运行代码Ctrl+RHbuilderX智能选中操作（3）（2）（1）双击标签开头或结尾，选择该标签