网页设计与制作项目化教程（微课版）课件 项目1-中国元素页面_第1页
网页设计与制作项目化教程（微课版）课件 项目1-中国元素页面_第2页
网页设计与制作项目化教程（微课版）课件 项目1-中国元素页面_第3页
网页设计与制作项目化教程（微课版）课件 项目1-中国元素页面_第4页
网页设计与制作项目化教程（微课版）课件 项目1-中国元素页面_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

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

文档简介

WEB中国元素页面项目1HTML5+CSS3项目化教程2个任务·9个学习小节模块1启航项目01项目1中国元素页面本章任务01创建页面（网页设计与制作技术基础）4个小节02制作图文混排页面（HTML5）5个小节模块1启航项目|项目1中国元素页面021.1创建页面（网页设计与制作技术基础）根据图1-1-1所示效果，制作中国元素页面知识点·概念了解网页的概念与组成。理解网页制作三大技术。能够安装网页开发相关工具软件。能够创建站点。语法格式<htmllang="en"><metacharset="utf-8"><p>第一个页面的效果展示。</p>任务效果图图1-1-1任务效果主要环节1揭开网页的神秘面纱2探索网页制作三大技术3准备工具4创建第一个网页模块1启航项目|项目1中国元素页面|任务1.1031.1任务实现过程任务实现过程1/1实现步骤1建立站点在操作系统中创建E:\html\chinese_elements文件…2创建网页打开站点E:\html\chinese_elements…代码实现/*代码1-1-2*/<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><p>中国元素</p></body></html>提示：完整代码见教材代码1-1-2模块1启航项目|项目1中国元素页面|任务实现过程041.1.1揭开网页的神秘面纱任务1.1创建页面（网页设计与制作技术基础）说到网页，其实大家并不陌生，上网浏览新闻、购物等都是在浏览网页。那么到底什么是网页呢？本节要点什么是网页术语探索URLHTTPWeb小技巧如何设定默认浏览器——以Windows10为例模块1启航项目|项目1中国元素页面051.1.2探索网页制作三大技术任务1.1创建页面（网页设计与制作技术基础）网页制作三大技术，即网页制作的三大标准语言，具体包括HTML、CSS与JavaScript。本节要点HTMLCSSJavaScript模块1启航项目|项目1中国元素页面061.1.3准备工具任务1.1创建页面（网页设计与制作技术基础）“工欲善其事，必先利其器”，要想进行网页制作，首先要准备网站开发的工具。本节要点获取安装使用模块1启航项目|项目1中国元素页面071.1.3准备工具本节实现过程1/1实现步骤1获取SublimeText3是一款收费软件，但在未注册的情况下也可以使用其全部功能…2安装SublimeText3的安装过程比较简单，在图1-1-6所示的页面中可以选择安装的路径…3使用SublimeText3主页面如图1-1-9所示模块1启航项目|项目1中国元素页面|本节实现过程081.1.4创建第一个网页任务1.1创建页面（网页设计与制作技术基础）站点是互联网专业术语，建立网站或建立站点，通常就是建立一个网站根文件夹…本节要点建立站点打开站点建立主页面编写页面代码保存页面语法格式<p>第一个页面的效果展示。</p>模块1启航项目|项目1中国元素页面091.1.4创建第一个网页本节实现过程1/1实现步骤1建立站点建立站点的操作，即建立文件夹的操作2打开站点如果想在站点中进行网页的设计与制作，首先要将站点打开3建立主页面在已打开站点名称处右击，选择弹出快捷菜单中的“New…4编写页面代码在<body>和</body>两个标签中间编写一行代…5保存页面选择“文件”下的“保存”命令…6预览效果在编辑区右击，选择弹出快捷菜单中的“在浏览器中打开”…代码实现/*代码1-1-1*/<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><p>第一个页面的效果展示。</p></body></html>提示：完整代码见教材代码1-1-1模块1启航项目|项目1中国元素页面|本节实现过程101.2制作图文混排页面（HTML5）根据图1-2-1所示效果，制作中国元素页面知识点·概念了解HTML5的基本结构。熟悉头标签。掌握文本控制标签的用法。掌握图像标签的用法。语法格式<标签名称/><!--注释语句--><标签名称>内容</标签名称>任务效果图图1-2-1任务效果主要环节1走近HTML52探索网页的核心元素——标签3设定头标签4设定文本标签模块1启航项目|项目1中国元素页面|任务1.2111.2任务实现过程任务实现过程1/1任务分析此任务的目标是创建一个左图右文的页面其中的文本可以使用<p>标签来实现实现步骤1任务实现（1）打开index.html文档，搭建页面基本结构；根据任务分析…代码实现/*代码1-2-13*/<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,…<title>02.html</title></head><body><h1>中国元素简介</h1><hr>（本步其余16行见教材）提示：完整代码见教材代码1-2-13模块1启航项目|项目1中国元素页面|任务实现过程121.2.1走近HTML5任务1.2制作图文混排页面（HTML5）HTML5是构建及呈现互联网内容的一种语言描述方式，被认为是互联网的核心技术之一。HTML产生于1990年…本节要点HTML5的优点HTML5的结构<!DOCTYPEhtml><html><head>模块1启航项目|项目1中国元素页面131.2.2探索网页的核心元素——标签任务1.2制作图文混排页面（HTML5）HTML标记通常被称为HTML标签（HTMLtag）。HTML标签是由尖括号包围的关键词，如<p>。本节要点单标签与双标签标签的属性语法格式<标签名称/>模块1启航项目|项目1中国元素页面141.2.2探索网页的核心元素——标签本节实现过程1/1实现步骤1单标签与双标签HTML标签分为单标签与双标签两类；单标签也被称为“空标签”…2标签的属性属性是HTML元素提供的附加信息；设置属性的语法格式如下代码实现▍单标签与双标签<标签名称/><!--注释语句--><标签名称>内容</标签名称>▍标签的属性<标签名称属性名称="属性值"……>描述内容</标签名称>提示：完整代码见教材代码1-1-2模块1启航项目|项目1中国元素页面|本节实现过程151.2.3设定头标签任务1.2制作图文混排页面（HTML5）HTML5的头标签有<title>、<base>、<link>、<style>、<meta>、<script>…本节要点<title>标签——设置页面标题<meta>标签——定义页面元信息定义字符编码定义页面描述定义关键字语法格式<htmllang="en">模块1启航项目|项目1中国元素页面161.2.3设定头标签本节实现过程1/1实现步骤1<title>标签——设置页面标题<title>标签用来定义HTML文档的标题…2<meta>标签——定义页面元信息<meta>标签用于提供有关HTML文档的元信息…代码实现▍<title>标签——设置页面标题<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>社会主义核心价值观学习</title></head><body></body></html>▍<meta>标签——定义页面元信息<metacharset="utf-8"><metaname="description"content="社会主义核心价值观,学习,思政网站,提供学习与交流,高校使用"><metaname="keywords"content="社会主义核心价值观,核心价值观,价值观,思政,学习,思政网站,提供学习…<metaname="author"content="长春职业技术大学"><metahttp-equiv="refresh"content="30">提示：完整代码见教材代码1-2-1模块1启航项目|项目1中国元素页面|本节实现过程171.2.4设定文本标签任务1.2制作图文混排页面（HTML5）文本是网页中最基本的元素，HTML5中提供了<p>标签等用于文本控制的标签。本节要点页面格式化标签文本样式标签文本格式化标签特殊字符标签标题标签语法格式<hnalign="对齐方式">标题文本</hn>模块1启航项目|项目1中国元素页面181.2.4设定文本标签本节实现过程1/2实现步骤1页面格式化标签在HTML文档中，标题很重要；标题标签的语法格式如下2文本样式标签文本样式标签的作用是控制网页中文本的字体…代码实现▍页面格式化标签<hnalign="对齐方式">标题文本</hn><!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><h1align="left">h1标签靠左——1级标题——常被用在网站的Logo部分</h1><h2align="left">h2标签靠左——2级标题</h2><h3align="center">h3标签居中——3级标题</h3>（本步其余5行见教材）▍文本样式标签<font属性="属性值">文本内容</font><!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><h2>文本样式标签</h2><p><fontsize="2"color="blue"face="微软雅黑">文本是2号、蓝色、微软雅黑字体</font></p><p><fontsize="4"color="#FF6347">文本是4号、番茄红色（Tomato）</font></p>（本步其余4行见教材）提示：完整代码见教材代码1-2-1、代码1-2-3模块1启航项目|项目1中国元素页面|本节实现过程191.2.4设定文本标签本节实现过程2/2实现步骤1文本格式化标签文本格式化标签用于设置文本的格式化样式…2特殊字符标签在网页中除了可以输入汉字、英文和其他语言，还可以输入一些特殊字符…代码实现▍文本格式化标签<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><strong>文本加粗显示</strong><b>文本加粗显示</b><br><em>文本斜体显示</em>（本步其余9行见教材）▍特殊字符标签<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"></head><body><p>这是一个不带有特殊字符的p标签</p><p>本行有一个空格 我有一个空格</p><p><本行有一个小于号和一个大于号></p><p>本行显示两个和号&&</p>（本步其余13行见教材）提示：完整代码见教材代码1-2-5、代码1-2-6模块1启航项目|项目1中国元素页面|本节实现过程201.2.5设定图像标签任务1.2制作图文混排页面（HTML5）要想使网页呈现出丰富的效果，图像是重要元素之一。本节要点图像标签图像标签的属性src属性在使用s

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

温馨提示

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

最新文档

评论

0/150

提交评论