Web前端技术项目式教程课件 任务一 初探Web前端技术_第1页
Web前端技术项目式教程课件 任务一 初探Web前端技术_第2页
Web前端技术项目式教程课件 任务一 初探Web前端技术_第3页
Web前端技术项目式教程课件 任务一 初探Web前端技术_第4页
Web前端技术项目式教程课件 任务一 初探Web前端技术_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

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

文档简介

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）任务一

初探Web前端技术知识目标1熟悉HTML常用标签及其属性。2熟悉Web标准三要素。3熟悉标准化网页的基本结构。能力目标1掌握使用工具软件创建网页。素质目标1培养学生标准化开发Web前端代码的意识。2培养学生严谨规范的习惯。思维导图任务描述某校宣传部需要制作一个介绍中华传统文化的网站，接到网站制作任务的是宣传部部长李明。宣传部干事张华想借此机会跟着李明学习。因为张华在网页制作方面没有基础，李明打算从网页制作基础知识开始，逐步教会张华制作网页的技能。本任务的具体要求如下。

安装与使用网页开发工具。

制作并预览网页。知识引入1.网站、网页和主页2.什么是Web和Web标准3.Web前端技术的发展4.搭建Web前端开发环境5.安装常用扩展插件6.

Web页面的基本结构7.浏览器兼容性1.网站、网页和主页（1）网站网站是由多个网页组成的，但网站不是网页的简单罗列组合，而是由超链接方式组成的具有统一风格的有机整体。

1.网站、网页和主页（2）网页网页指网站中的一个页面，其主要由文本、图像、超链接、表格、表单、动画、声音和视频等构成。1.网站、网页和主页（3）主页主页也称首页，是在浏览器打开某个网站后用户首先看到的页面，它承载着网站中所有指向二级页面或其他网站的链接信息。2.什么是Web和Web标准

全球广域网（WorldWideWeb，Web），也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统，是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。2.什么是Web和Web标准

Web标准是由W3C和其他标准化组共同制定的一套规范集合，目的在于创建统一的用于Web表现层的技术标准，以便通过不同的浏览器或终端设备向最终用户展示信息内容。2.什么是Web和Web标准

目前的Web标准主要由3大部分组成：结构（Structure）、表现（Presentation）、行为（Behavior）。真正符合Web标准的网页设计是指能够灵活使用Web标准对Web内容进行结构、表现与行为的分离。3.Web前端技术的发展

2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再称其为网页制作，而是叫Web前端开发。4.搭建Web前端开发环境网页开发工具种类众多，比如VisualStudioCode（简称VSCode）、HBuilder、SublimeText等。本书案例使用VSCode开发，这是目前最流行的前端开发工具之一，由微软开发，支持多种编程语言，具有丰富的插件生态系统，界面简洁且功能强大，适合各种前端开发需求。下面介绍VSCode的安装步骤。4.搭建Web前端开发环境读者可在VSCode官网自行下载编辑器。然后按照步骤安装软件。①首先，双击软件安装包启动安装程序，在下图所示的界面中，选择“我同意此协议”，单击“下一步”按钮，进入选择附加任务界面。4.搭建Web前端开发环境4.搭建Web前端开发环境②可根据需要选择相应选项，也可直接单击“下一步”按钮进入准备安装界面。4.搭建Web前端开发环境③单击“安装”按钮，等待安装完成。4.搭建Web前端开发环境④在图1-8所示的界面中，单击“完成”按钮，即可启动VSCode编辑器。5.安装常用扩展插件①Chinese插件VSCode编辑器的默认语言是英文，如果想要切换为中文，可以单击VSCode左边栏中第5个图标按钮(Extensions扩展按钮），然后在搜索框中输入关键词“Chinese”即可找到中文语言扩展，最后单击“Install”按钮进行安装，安装界面如下图所示。安装成功后，需要重新启动VSCode编辑器，Chinese扩展才可以生效。5.安装常用扩展插件①Chinese插件5.安装常用扩展插件②LiveServer扩展LiveServer扩展插件提供了一个带有实时重载功能的本地开发服务器。在VSCode编辑器中使用LiveServer插件进行实时预览和调试Web应用程序将大大提高前端开发效率，使网页设计和开发变得更为流畅。安装LiveServer扩展的方法同上，界面如下图所示。5.安装常用扩展插件②LiveServer扩展6.Web页面基本结构例1-1HTML5文档基本结构1<!DOCTYPEhtml>2<html>3<head>4<metacharset="utf-8">5<title>文档标题</title>6 </head>7<body>8文档内容......9</body>10</html>7.浏览器兼容性

制作好的网页需要在浏览器中预览调试。目前主流的浏览器有：IE浏览器、Opera浏览器、Safari浏览器、Firefox浏览器、Chrome浏览器等。这些浏览器都支持HTML5（IE浏览器需为IE9及其更高版本）。不用用户在不同设备上使用的浏览器各不相同。网页的浏览器兼容性是指网页在各种浏览器上的显示效果尽量保持一致的状态。因此，前端开发人员在调试网页时务必要重视浏览器兼容性问题。任务实现：动手编写第一个前端页面①新建一个文件夹，将素材文件夹中的＂head_bg.jpg＂拷贝到该文件夹下。②单击VSCode左边栏中第1个图标按钮(资源管理器按钮），打开资源管理器面板，点击其中的“打开文件夹”按钮，打开第①步新建的文件夹，点击资源管理器面板中的“新建文件”按钮，在文本框中输入首页的文件名“index.html”创建首页。③在“index.html”的代码编辑窗口输入“html:5”，按下回车键，即可调出HTML5文档的基本结构。任务实现：动手编写第一个前端页面④在HTML5文档的“body”标签中通过输入下述代码编辑网页内容。<body> <h1align="center">冬天</h1>/*h1标签定义页面中的一级标题*/ <hr>

/*br标签用于插入水平分隔线*/ <imgsrc="head_bg.jpg"/>/*img标签用于插入图片*/>任务实现：动手编写第一个前端页面 <p>说起冬天，忽然想到豆腐。是一“小洋锅”（铝锅）白煮豆腐，热腾腾的。水滚着，像好些鱼眼睛，一小块一小块豆腐养在里面，嫩而滑，仿佛反穿的白狐大衣。锅在“洋炉子”（煤油不打气炉）上，和炉子都熏得乌黑乌黑，越显出豆腐的白。这是晚上，屋子老了，虽点着“洋灯”，也还是阴暗。围着桌子坐的是父亲跟我们哥儿三个。“洋炉子”太高了，父亲得常常站起来，微微地仰着脸，觑着眼睛，从氤氲的热气里伸进筷子，夹起豆腐，一一地放在我们的酱油碟里。我们有时也自己动手，但炉子实在太高了，总还是坐享其成的多。这并不是吃饭，只是玩儿。父亲说晚上冷，吃了大家暖和些。我们都喜欢这种白水豆腐；一上桌就眼巴巴望着那锅，等着那热气，等着热气里从父亲筷子上掉下来的豆腐。</p>/*p标签用于插入段落文字*/</body>任务实现：动手编写第一个前端页面⑤通过LiveServer扩展运行index.html预览网页。在资源管理器中“inde

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

温馨提示

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

最新文档

评论

0/150

提交评论