Web前端开发技术项目教程课件 项目一 Web前端开发基础

项目一Web前端开发基础WEB前端开发技术项目教程目录1认识WEB前端熟悉开发流程与规范32认识并安装IDECONTENTS认识WEB前端1前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。1Internet与Web服务Internet（因特网）是全球信息网络的汇总，可以简单的认为，因特网是基于许多小型网络（子网）互联而成的一个更大的逻辑网络，并且每个子网中都连接着多台计算机（主机），这些主机遵循同一协议，通过因特网中的多台路由器实现信息的交流与传递，是一个信息资源和资源共享的集合。因特网为用户提供多种服务：WorldWideWeb（万维网）E-mail（电子邮件）Telnet（文件传输和远程登录）2B/S与C/S结构B/S结构是指Browser/Server（浏览器/服务器模式），也就是我们常说的Web应用，其特点是：可以实现跨平台的交互；低成本的客户端维护；但是也存在个性化能力较低的问题、响应速度较慢等问题。B/S结构的微信程序2B/S与C/S结构C/S结构是指Client/Server（客户端/服务器模式），又称为桌面级应用，这类应用的主要特点是：响应速度快；安全性较强；响应数据速度快。如图1-3所示，我们在电脑上使用的微信是一个C/S结构的程序。C/S结构的微信程序2B/S与C/S结构对象硬件环境客户端要求软件安装升级和维护B/S要有操作系统和浏览器，与操作系统平台无关。客户端的计算机电脑配置要求较低。可以在任何地方进行操作而不用安装任何专门的软件。不必安装及维护C/S用户固定，并且处于相同区域，要求拥有相同的操作系统。客户端的计算机电脑配置要求较高。每一个客户端都必须安装和配置软件.C/S每一个客户端都要升级程序。可以采用自动升级。B/S结构与C/S结构的主要区别3URL路径在因特网中，每一个信息资源在网页中都有统一的网址，这个地址就是UniformResourceLocator（URL，统一资源定位器），它是因特网中的统一资源定位标志。URL一般由资源类型、存放资源的主机域名、资源文件名三部分组成，但有的时候也可以认为是协议、主机、端口、路径四部分组成。URL的一般语法格式为（带方括号[]的为可选项）：protocol://hostname[:port]/path/[;parameters][?query]#fragmentHTTP是Web中使用最广泛的协议hostname为主机名[:port]为端口path为路径[;parameters]为参数[?query]为查询#fragment为碎片，是指访问网页中的某个部分4互联网数据中心互联网数据中心（InternetDataCenter，IDC）为企业、媒体以及各类网站提供专业化的网络服务管理、网络宽带等服务，是因特网基础资源的重要组成部分。IDC一般配有较为专用的设施，并且配备较为安全的、高速的内外部网络环境、系统化的监控技术和设备维护能力。在此基础上，面向因特网用户提供了整机租用、服务器托管、机房租用、专线接入和网络管理服务等不同层次的服务。企业可以通过租赁IDC的方式，利用IDC的资源优势，实现低成本的开展网络业务运营服务，降低购买网络硬件服务器和对网络服务器管理的投入，减少前期的资金投入，降低企业运行风险。典型的IDC体系包括4个主要部分：服务器系统电力保障系统数据传输保障系统环境控制系统认识并安装IDE2集成开发环境（IDE，IntegratedDevelopmentEnvironment）一般包括代码编辑器、编译器、调试器和图形用户界面等工具，是帮助程序开发人员进行程序开发的应用程序，主要集成了代码编写功能、分析功能、编译功能、调试功能。1认识IDE集成开发环境（IDE，IntegratedDevelopmentEnvironment）一般包括代码编辑器、编译器、调试器和图形用户界面等工具，是帮助程序开发人员进行程序开发的应用程序，主要集成了代码编写功能、分析功能、编译功能、调试功能。但是IDE指的是一类开发软件或者软件组（集成开发环境），并不是特指某一个软件，如Dreamweaver、SublimeText3以及Hbuilder，都可以称之为IDE。IDE的优点有很多：1.节省时间和精力。IDE的使用目的是为了简化开发的流程，能供通过各种工具和资源来帮助开发者进行开发，减少开发中出现的失误，提供捷径。2.建立统一标准。程序开发人员可以使用各种软件进行开发，但是如果程序开发人员使用的是同一个开发环境的时候，就建立了统一的工作标准，并且IDE提供了预设的模板，当不同团队分享代码资源的时候，统一的标准就显得额外重要。2IDE的安装SublimeText3安装SublimeText3支持多种编程语言的语法高亮，拥有代码自动完成功能，并且还有代码片段（Snippet）的功能，方便程序开发人员将常用的代码进行保存，在需要使用的时候直接调用。进入下载软件2IDE的安装SublimeText3安装在下载成功后，运行安装程序，界面显示安装界面，并单击“Browse”按钮选择安装目录。点击“Browse”按钮选择安装目录

2IDE的安装SublimeText3安装选中“Addtoexplorercontextmenu”复选框，单击“Next”按钮。选择“Addtoexplorercontextmenu”并进行下一步

2IDE的安装SublimeText3安装点击“Install”按钮，开始安装。单击“Install”按钮进行安装

2IDE的安装SublimeText3安装等进度条完成后，单击“Finish”按钮完成安装。单击“Finish”按钮完成安装

2IDE的安装HBuilder使用如果想要使用HBuilder，就不需要这么复杂，因为Hbuilder无需安装就能够直接使用。双击“HBuilder.exe”文件，即可打开使用。双击“HBuilder”打开软件

2IDE的安装HBuilder使用HBuilder界面HBuilder软件界面

3Chrome浏览器调试入门打开Chrome浏览器，在键盘上按下“F12”进入调试界面。调试界面

3可以使用“Console”标签来观察调试结果，具体“Console”标签的使用方法，我们会在后面的任务中进行讲解。使用“Console”标签观察调试结果

Chrome浏览器调试入门熟悉开发流程与规范3网站的制作已经逐步系统化、流程化，逐渐变成了一个由网页界面设计、网页制作、数据库开发和动态应用程序编写格和外观等一系列工作构成的系统工程。1熟悉开发流程与规范网站的制作已经逐步系统化、流程化，逐渐变成了一个由网页界面设计、网页制作、数据库开发和动态应用程序编写格和外观等一系列工作构成的系统工程。网站的开发流程

1熟悉开发流程与规范前期准备工作市场调研与分析01收集和整理资料02网站定位03实施方案

1网站规划