W前端技术基础开发概述5_第1页
W前端技术基础开发概述5_第2页
W前端技术基础开发概述5_第3页
W前端技术基础开发概述5_第4页
W前端技术基础开发概述5_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端开发技术基础任务：

红色文化资源网欢迎页制作通关任务

使用前端开发工具开发第一个网页AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施图2-1-24红色胜迹页面结构效果任务描述Web前端开发工具有很多种，不同的工具有不同的优缺点，

比较常用的有HBuilderX、AdobeDreamweaver、SublimeText等。

本任务将运用HBuilderX软件创建“我的第一个网页”。通过该网页的制作，读者可以熟悉HBuilderX前端开发工具的使用方法，并了解与Web相关的知识等。任务描述任务目标1.了解Web前端开发的概念。2.掌握HBuilderX软件的使用方法。3.了解Web前端开发的工具及流程。4.能够使用HBuilderX软件创建简单的HTML网页。图1-1-1“我的第一个网页”效果图任务实施（

1

）安装并启动HBuilderX软件1）HBuilderX是一款国产的免费软件，用户可以在HBuilderX官网下载安装包。目前有两个版本，一个是Windows版，另一个是macOS版。用户可以根据计算机的系统选择合适的版本进行下载。HBuilderX软件下载界面如图1-1-2所示。2）HBuilderX是一款绿色软件，下载完成后无须安装，解压后双击HBuilderX应用程序即可运行，也可将图标添加到桌面快捷方式。HBuilderX应用程序界面如图1-1-3所示。图

1-1-2

HBuilder

X

软件下载界面图

1-1-3

HBuilderX

应用程序界面（

1

）安装并启动HBuilderX软件任务实施——构建HTML结构HBuilderX软件初次打开界面如图

1-1-4所示。图

1-1-4

HBuilder

X

软件初次打开界面（

2）新建项目任务实施项目可以存储网站的所有文件及文件夹，这些文件包含网页文件、样式文件、图片文件、脚本文件等。选择菜单中的“文件”→“新建”→“项目”命令，在弹出的界面中选择“普通项目”选项，将项目名称命名为“chapter01”，单击“浏览”按钮选择存放路径，勾选“基本HTML项目”，单击“创建”按钮，即可新建项目，如图1-1-5所示。图

1-1-5

新建项目（

2）新建项目任务实施项目创建后，HBuilderX界面的左侧窗口中显示了该项目的内容，包括样式文件夹（css）、图像文件夹（img）、特效文件夹（js）及网站首页（index.html），如图1-1-6所示。图

1-1-6

项目内容（

3）新建文件任务实施右击新建的“chapter01”项目，在弹出的快捷菜单中选择“新建”→“html文件”命令，在弹出的“新建html文件”对话框中将文件命名为“example01.html”，选择存放路径，选择默认的“default”模板，单击“创建”按钮，如图1-1-7所示。图1-1-7“新建html文件”对话框（

4）输入网页代码任务实施在<title></title>标签对中输入网页标题“我的第一个网页”。在<body></body>标签对中输入“使用HBbuilderX软件开发我的第一个网页”，网页具体代码如图1-1-8所示。图1-1-8网页具体代码（

5）保存网页任务实施单击HBuilderX软件工具栏中的“保存”按钮或按<Ctrl+S>组合键保存文件内容。（6）浏览网页单击HBuilderX软件工具栏中的“浏览器运行”按钮或按<Ctrl+R>组合键，选择一种浏览器浏览网页，还可以按<Alt+P>组合键选择在内置浏览器中进行预览。浏览网页效果如图1-1-9所示。图1-1-9浏览网页1.

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

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

1

）Internet

、IP地址和域名从网络通信的角度来看，Internet

是一个以

TCP/IP

连接全球各个国家、各个地区、各个机构计算机网络的数据通信网。从信息资源的角度来看，Internet

是一个集各部门、各领域、各种信息资源为一体的供网上用户共享的信息资源网。Internet

上连接了数以万计的服务器和客户机。每一台主机在

Internet

上都有一个唯一的地址，称为

IP

地址。IP

地址分为

IPv4和

IPv6。这里以

IPv4为例进行介绍。IPv4地址的格式为

XXX.XXX.XXX.XXX，其中，XXX是

0~255

的任意整数。（2

）WWW、HTTP和URLWWW是WorldWideWeb（环球信息网）的缩写，简称Web，中文名字为“万维网”。超文本传输协议（HyperQTextTransferProtocol，HTTP）是因特网上应用非常广泛的一种网络传输协议，用于WWW客户机与WWW服务器之间的请求和应答。HTTP的工作过程包括4个步骤：建立连接、发送请求信息、发送响应信息、关闭连接。统一资源定位符（UniformResourceLocator，URL）是一种统一格式的Internet信息资源地址的标识方法，是一个识别Internet中信息资源，并且将Internet提供的服务统一编址的系统。URL是Internet上的地址簿。知识宝典（3）网站、网页和主页网页是网站的组成部分。制作者可以将需要公布的信息按照一定的方式分类，放置在网页上。网页里可以有文字、表格、图像、声音及视频等。网页可以看成一个单一体，是网站的一个元素。主页也称为首页，是网站被访问的第一个页面，通常用index.html表示。3.

Web标准Web标准不是某一个标准，而是一系列标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分3部分：结构化标准，主要指HTML结构；表现标准，主要指CSS样式；行为标准，主要指用JavaScript等脚本语言实现的网页行为效果。这些标准大部分由万维网联盟（缩写为W3C）起草和发布。知识宝典4.

Web前端开发技术（1）HTMLHTML（超文本标记语言）由文字、图像、表格、表单等标签元素组成，通过使用不同的标签元素完成页面结构的搭建。HTML是前端重构的基础，所有的页面前端重构都离不开HTML。HTML发展至今，经历了多个版本，HTML5是目前广泛使用的版本。（2）CSSCSS（层叠样式表）是一种标记语言，主要用于对网页字体、颜色、背景、显示模式等进行设置。开发人员在前端重构过程中使用HTML来定义网页的结构，而页面的排版和美化则依靠CSS来实现，两者相辅相成，不可缺少。CSS3是目前广泛使用的版本。（3）JavaScript脚本语言JavaScript脚本语言（简称“JS”）是一种函数优先的轻量级、解释型或即时编译型的编程语言。它虽然是开发Web页面的脚本语言，但被用到了很多非浏览器环境中。JavaScript是基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式（如函数式）编程范式。HTML和CSS可以完成前端页面重构，但实现编写的页面具备交互功能，就需要使用JavaScript脚本语言。知识宝典5.

Web前端开发工具知识宝典表1-1-1

Web

前端开发工具及其优缺点

工具优点缺点HBuilderX可快速输入代码，

中文界面友好，

开源、快捷键多主要用于

Web前端开发，不能同时进行

Java等语言的后台编程AdobeDreamweaver有可视化编辑界面，支持多种方式创建和修改网页，适合对代码不熟悉的初学者代码输入界面不友好，软件占用内存空间大，兼容性有待加强

SublimeText

轻量级软件，插件多，可快速输入代码功能强大，快捷键众多，对于初学者需要花费较多时间去熟悉和掌握6.

Web前端开发流程知识宝典Web前端开发流程包含前期策划（需求分析）、网页美工设计、网站前端重构和后期测试发布

4个阶段。前期策划（需求分析）包括了解网站的业务背景，明确网站的设计风格，确定网站的内容等；网页美工设计主要指网页设计师与客户沟通，了解客户的基本要求后，根据网站建设方案，使用

Photoshop

等图像处理软件进行页面效果图设计；网站前端重构主要指前端开发人员将设计好的效果图进行重构并制作成页面、添加样式和功能开发等；后期测试发布主要包括检查页面效果是否美观、

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

温馨提示

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

最新文档

评论

0/150

提交评论