项目1 初识Web前端技术_第1页
项目1 初识Web前端技术_第2页
项目1 初识Web前端技术_第3页
项目1 初识Web前端技术_第4页
项目1 初识Web前端技术_第5页
已阅读5页，还剩25页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

任务1初识Web前端技术Web前端开发项目式教程HTML5+CSS3Web前端开发准备任务1-1任务描述在正式开始学习网页设计与开发之前，我们首先要学习Web前端开发相关的基本概念，了解Web前端开发的核心技术，熟悉常用的开发工具，知道浏览的网页对应的HTML代码如何查看。学习目标知识目标了解Web前端技术和相关行业信息了解Web前端开发工具理解HTML基本原理技能目标学会网站目录的规划学会在浏览器中查看网站的结构素质目标树立标准意识，遵守项目开发流程规范提高专业学习兴趣，培养独立思考和创新意识知识点Web前端概述01

Web前端开发工具02

搭建Web前端开发环境03查看页面源代码任务1-1一、

Web前端概述Web前端开发是创建Web页面或App界面等前端界面并将其呈现给用户的过程，通过超文本标记语言（Hyper-TextMarkupLanguage，HTML）、层叠样式表（CascadingStyleSheets，CSS）、JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。一、

Web前端概述前端开发从网页设计演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页设计是Web1.0时代的产物，早期网站的主要内容都是静态的，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用，现在的网页更加美观，交互效果显著，功能更加强大。一、

Web前端概述与前端开发对应的是后端开发。后端开发通过编写程序代码与后台服务器交互，来动态更新网站的内容。页面超文本预处理器（PageHypertextPreprocessor，PHP）、Java服务器页面（JavaServerPages，JSP）和活动服务器页面（ActiveServerPages，ASP）.NET等后台开发技术，结合后台数据库技术，可以使网站具有后台存储和处理数据等功能。浏览器是网页的运行平台，可以把HTML文件展示在网页中，可供用户上网进行浏览的一种软件。目前主流的浏览器有IE、Chrome、Firefox、Safari、Opera等。浏览器二、

Web前端开发工具网页编辑器是书写HTML、CSS等代码的工具软件。一般常用的网页编辑器有Dream‐weaver、SublimeText、WebStorm、HBuilder等。网页编辑器二、

Web前端开发工具微软公司产品国产软件（本书使用）Adobe公司产品由程序员JonSkinner开发切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中涉及的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种切图软件二、

Web前端开发工具任务

查看页面源代码任务实现任务效果图1-1在Firefox浏览器中显示页面源代码在Firefox浏览器中，在地址栏输入辽宁轻工职业学院的网址（），打开网站首页，在页面空白位置单击鼠标右键，选择“检查”，进入源代码查看模式，可以查看页面源代码，如图1.1所示。创建第一个HTML5网页任务1-2任务描述前面我们已经对网页、HTML、CSS、JavaScript及常用的网页制作工具HBuilder有一定的了解，接下来，我们将通过HBuilder网页编辑器完成一个简单的前端页面制作，掌握网页设计的基本流程，学会简单的HTML标记，最终在浏览器中显示出一个基本网页。学习目标知识目标掌握HTML5文档的基本格式l掌握HTML5的常见标签技能目标学会使用HBuilder创建简单的网页素质目标树立正确的价值观和人生观培养学生具备主动学习的能力和习惯，能够不断学习和适应新的知识和技术知识点什么是HTML01

HTML基本结构02一、

什么是HTMLHTML（HypertextMarkupLanguage）即超文本标记语言，是一种用来制作超文本文档的简单标记语言。接下来，我们将从语言、超文本、标记三部分理解HTML。二、

HTML基本结构HTML文档由一系列的元素和标签组成。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置。HTML文档分为“头”和“主体”两部分，文档“头”部分对文档进行一些必要的定义，“主体”部分是文档要显示的信息任务

编写第一个HTML程序任务实现1、启动HBuilderX双击HBuilderX.exe文件或桌面上的HBuilderX快捷方式，启动HBuilderX，如图所示。2、新建项目从菜单栏中选择“文件”|“新建”｜“项目”选项，出现“新建项目”对话框，输入项目名称chapter01，项目存放位置为“E:/Web前端开发/源码”，选择模板类型为“空项目”，单击“创建”按钮，如图所示。项目用来存储一个网站的所有文件，这些文件包括网页文件、图像及音视频文件、脚本文件、样式表文件等3、

在项目中创建网页文件在左侧视图中右击项目名称，在弹出的快捷菜单中选择“新建”｜“html文件”选项，出现“新建html文件”对话框，输入文件名demo1-1.html，单击“创建”按钮，如图所示。4输入网页代码在网页文件代码的<title>与</title>之间输入HTML文档的标题，这里输入“hello”，然后在<body>与</body>标记之间添加网页的主体内容，如图所示。在菜单栏中选择“文件”｜“保存”选项，或按“Ctrl+S”组合键，即可保存文件内容。单击【运行】→【浏览器运行】选项，选择【Firefox】浏览器进行预览，或者通过双击保存路径下的.html文件进行预览。5保存并浏览网页浏览网页时，也可在“此电脑”或“计算机”中双击文件名来浏览。小提示任务效果图1-1在Firefox浏览器中显示页面源代码在浏览器中运行demo1-1.html（或者双击demo1-1.html文件），效果如下图所示任务

初识Web前端技术任务1任务小结

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论