项目一网站制作基础知识课件-《电子商务网页设计与制作》

资源简介

(共95张PPT)
01网站制作基础知识任务 1 创建“hello world”网页任务 2 制作宋词《清平乐》网页任务 3 制作家用电器排行榜网页创建“hello world”网页任务 1● 1. 了解网页的本质和网页中的常见元素。● 2. 了解 IP 地址、域名和网址等基本概念。谈到网页，大家并不陌生，人们平时使用浏览器阅读新闻、查询信息、查看图片等都是在使用网页。但是，大家知道网页是怎么制作出来的吗？我们可以通过在记事本中使用 html 语言对网页进行标记来完成一个简单网页的制作。本任务将针对网页相关概念以及网页文件结构来对网页进行详细介绍，并完成图所示的网页效果。“hello world”网页效果步骤一：新建一个文本文档，在文档中使用 html 语言写出网页文件的结构，如图所示。网页文件的结构步骤二：在 <title></title> 中输入“这是我的第一个网页”，如图所示。输入标题内容步骤三：保存文档。选择记事本菜单栏中的“文件”→“保存”命令，弹出“另存为”对话框。保存文件步骤四：操作完成后单击“保存”按钮，文本文件就已保存为 html 文件，此时可以观察到文本文件的图标变成了网页文件的图标，如图所示。文件保存完成后，可以使用浏览器打开，打开后的效果如图所示。保存后的 html 文件网页标题步骤五：继续向 h1.html 文件中添加内容，定位到 <body></body>，在其中添加“ hello world”，如图所示。在网页文件中添加内容步骤六：保存文件后使用浏览器打开网页文件，网页效果如图所示。“hello world”网页效果一、网页的本质网页是人们上网时在浏览器中看到的一个个画面，网站则是一组相关网页的集合。图所示为京东商城网站主页及其组成文件，从中可以看出，网页由图像、html 文件、CSS 文件、JS 文件等组成。在浏览器中单击鼠标右键选择“另存为”命令，可将网页存入本地计算机的硬盘中。京东商城网站主页及其组成文件二、网页中的常见元素从浏览者的角度看，网页中好像只有一些文字、图像、动画等。但从专业人员的角度来看，网页中通常包含站标、导航条、广告条、文字链接和按钮等元素，如图所示。构成网页的常用元素1. 文本文本一直是最重要的信息载体与交流工具，网页中的信息一般以文本为主。在网页中可以通过字体、大小、颜色、底纹、边框等设置文本的属性。网页设计者还可以在网页中设计各种各样的文字列表，清晰地表达一系列项目。2. 图像我们现在看到的网页之所以丰富多彩，都是因为有了图像，可见图像在网页中的重要性。3. 超链接超链接是从一个网页指向另一个目的端的链接。这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件、一个程序，或者是本页中的其他位置。4. 表单表单是用来收集站点访问者信息的域集。站点访问者填写表单的方式是输入文本、单击单选框与复选框，以及从下拉菜单中选择选项。5. 表格使用表格排版是现在网页的主要制作形式。通过表格可以精确地控制网页元素在网页中的位置。6. 动画动画是网页上最活跃的元素，通常制作优秀、创意出众的动画是吸引浏览者的最有效方法。网页中的广告条一般都是动画的形式。网页中除了这些最基本的元素外，还包括横幅广告、字幕、悬停按钮、计数器、音频、视频等。三、IP 地址、域名和网址1. IP 地址互联网虽然连接了不计其数的服务器与客户机，但并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，这个地址称为 IP 地址（internet protocol address）。IP 地址由4 组 0 ～ 255 之间的整数组成，数字之间用点间隔。例如，“61.135.150.126”就是一个 IP地址。2. 域名由于 IP 地址在使用过程中难于记忆和书写，人们又用一种与 IP 地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，只需在浏览器地址栏中输入“www..cn”，就可以访问新浪网站。3. 网址网址又称为 URL，英文全称是“ uniform resource locator”，即统一资源定位器。它是一种网络上通用的地址格式，用于标识网页文件在网络中的位置。一个完整的网址由通信协议名称、域名或 IP 地址、网页在服务器中的路径和文件名四部分组成。四、html 文件的结构在前面的 html 文件里用到了多个 html 标签，下面依次介绍它们的作用。实际上，它们构成了最简单的完整 html 文件结构。1. html 标签html 标签放在 html 文件的开头，并没有实质性的功能，只是一个形式上的标记，但在编写 html 文件时仍要形成一个良好的习惯，在 html 文件开头使用 html 标签开始。2. head 标签head 称为头标签，一般放在 html 标签里，其作用是放置关于此 html 文件的信息，如提供索引、定义 CSS 样式等。3. title 标签title 称为标题标签，包含在 head 标签内，其作用是设定网页标题，在浏览器左上方的标题栏中将显示这个标题。此外，在 Windows 任务栏中显示的也是这个标题。4. body 标签body 称为主体标签，网页上所要显示的内容都放在这个标签内，它是 html 文件的重点所在。在后面的项目中所介绍的 html 标签都将放在这个标签内。然而它并不仅仅是一个形式上的标签，其本身也可以控制网页的背景颜色或背景图像，这将在后续项目中介绍。另外，在构建 html 结构的时候要注意一个问题：标签是不可以交错的，否则将会造成结构错误。例如，在图所示的代码中就存在标签交错的情况。标签交错制作宋词《清平乐》网页任务2● 1. 了解常用的网站制作工具。● 2. 熟悉 HBuilder X 软件的安装与启动方法。● 3. 认识 HBuilder X 软件的界面。● 4. 掌握在 HBuilder X 软件中新建 web 项目和运行 web 项目的方法。● 5. 掌握 html 基础标签的用法。本任务计划使用现在流行的网页编辑工具 HBuilder X 和 html 基础标签来完成图所示《清平乐》网页效果。本任务主要利用 HBuilder X 新建 web 项目，打开及保存 html 文件，使用 p 段落标签、hr 分隔线标签等功能，将《清平乐》诗词展示在网页上。《清平乐》网页效果步骤一：在 HBuilder X 中新建一个 web 项目，在项目下新建一个 html 文件，在 body 标签中加入<h2></h2>，在 h2 标题标签中加入文字信息“清平乐”，网页效果如图所示。加入标题标签步骤二：在 h2 标题标签下方加入 hr 水平线标签。加入水平线标签步骤三：在 hr 水平线标签的下方加入 p 段落标签，并在 p 段落标签中间加入宋词《清平乐》的内容，网页效果如图所示。加入段落标签加入段落标签步骤四：此时，诗词文字在 html 代码中是换行的，但是在网页的效果中是不换行的。为了让其在网页效果中达到换行的效果，需要添加若干个 br 换行标签，如图所示。加入换行标签步骤五：保存文件后使用浏览器打开网页文件，网页效果如图所示。《清平乐》网页效果一、网站制作工具1. Adobe Dreamweaver图所示为 Adobe Dreamweaver 软件的界面，Adobe Dreamweaver 简称“ DW”，中文名称为“梦想编织者”，最初为美国 Macromedia 公司开发，2005 年被 Adobe 公司收购。DW 是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用其对 html、CSS、JavaScript 等内容的支持，设计师和程序员可以在几乎任何地方快速制作网站和进行网站建设。Adobe Dreamweaver 软件的界面2. Visual Studio Code美国 Microsoft 公司在 2015 年 4 月 30 日 Build 开发者大会上正式宣布了 Visual Studio Code 项目，这是一个运行于 Mac OS X、Windows 和 Linux 中，针对编写现代 web 和云应用的跨平台源代码编辑器。其优点是智能提示功能强大，可以很方便地进行插件安装，具有强大的调试功能，可以跨平台支持源代码编辑，现在已经成为很多前端开发者的必备工具。图所示为 Visual Studio Code 软件界面。Visual Studio Code 软件界面3. WebStormWebStorm 是捷克 JetBrains 公司推出的一款 JavaScript 开发工具，被广大中国 JS（JavaScript，简称 JS）开发者誉为 web 前端开发神器、最强大的 html5 编辑器、最智能的JavaScript IDE 等。它与 IntelliJ IDEA 同源，继承了 IntelliJ IDEA 强大的 JS 部分的功能。图所示为 WebStorm 软件界面。其优点是能进行智能代码补全、代码格式化、代码检查和快速修复等。WebStorm 软件界面4. HBuilder XHBuilder X 是 DCloud 公司 [ 数字天堂（北京）网络技术有限公司 ] 推出的一款支持html5 的 web 开发 IDE。HBuilder X 的编写用到了 Java、C、Web 和 Ruby。HBuilder X 本身主体由 Java 编写。它基于 Eclipse，所以顺其自然地兼容了 Eclipse 的插件。快是 HBuilder X 的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升了 html、JS、CSS的开发效率。二、HBuilder X 的安装与启动Windows 操作系统和 Mac 操作系统上都可以安装 HBuilder X。其安装步骤如下。1. 直接从 DCloud-HBuilder 官方网站上下载最新版本的安装文件。DCloud-HBuilder 官方网站2. 对下载的文件夹进行解压缩，HBuilder X 不用安装，解压完成后即可使用。HBuilder X 压缩包3. 打开解压后的文件夹，找到图所示的“ HBuilderX.exe”可执行文件，这个可执行文件就是 HBuilder X 的启动文件，双击该文件即可打开 HBuilder X 编辑器。4. 可以将 HBuilderX.exe 这个可执行文件发送到桌面快捷方式，这样每次使用时直接在桌面就可以打开。HBuilder X 文件目录三、HBuilder X 界面图所示为 HBuilder X 界面布局，HBuilder X 的开发界面主要由菜单栏、项目管理器、编辑窗口、视图模式和控制台五部分构成。HBuilder X 界面布局1. 菜单栏菜单栏位于界面的左上方，是所有界面功能的集合和导航。其中常用的选项有“文件”和“运行”。2. 项目管理器项目管理器位于界面左侧，是管理项目的工具，可以添加、删除、修改、查看项目文件。关闭项目管理器后，按 F9 键可重新打开。3. 编辑窗口在项目管理器中双击某个文件，该文件可在编辑窗口中打开。在编辑窗口中可以同时打开并编辑多个文件。4. 视图模式视图模式位于界面右侧，单击“预览”按钮将出现 web 浏览器，可以在 web 浏览器中看到代码生成的网页效果。5. 控制台调试代码时，控制台显示代码运行状态和报告信息。运行代码时，控制台会自动弹出。当控制台被关闭后，可以通过菜单栏中的“视图”找到控制台并打开控制台。四、新建项目和运行项目HBuilder X 可以创建两种项目，即 web 项目和移动 App 项目。web 项目开发主要指传统的 PC 端网页开发，页面主要运行在 PC 端浏览器中；移动 App 项目开发主要指针对移动设备的页面开发，页面主要在移动设备上运行。1. 新建 web 项目在菜单栏中选择“文件”→“新建”→“项目”命令，在出现的“新建项目”对话框中选择“普通项目”，设置项目所在的位置和模板，这里选择第二个模板“基本 HTML 项目”，单击“创建”按钮即可，之后新创建的 web 项目会在左侧的项目管理器中出现。创建 web 项目2. 新建 App 项目在菜单栏中选择“文件”→“新建”→“项目”命令，在出现的“新建项目”对话框中选择 uni-app，设置项目所在的位置和模板，这里选择第一个默认模板，单击“创建”按钮即可，之后新创建的 App 项目会在左侧的项目管理器中出现。这里创建的项目名称为Demo，如图所示。创建 App 项目五、html 基础标签1. 标题标签html 提供了 6 个等级的标题标签，即 h1、h2、h3、h4、h5 和 h6，从 h1 至 h6，标题的重要性递减。标题标签的基本语法格式如下。该语法中n的取值为 1 至 6，align 属性为可选属性，用于指定标题的对齐方式。下面通过图所示案例来演示标题标签的应用。标题标签的应用在上图中，使用 h1 至 h6 标题标签设置 6 种级别的标题。运行上图中的代码，效果如图所示。标题标签效果2. 段落标签在 html 中通过 p 段落标签来定义段落，其基本语法格式如下。该语法中 align 属性为 p 段落标签的可选属性，和标题标签 h1 至 h6 一样，同样可以使用 align 属性设置段落文本的对齐方式。p 段落标签是 html 文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。下面通过一个图所示案例来演示 p 段落标签的应用。段落标签的应用在上图中，通过 h1 标题标签和 p 段落标签定义了一个标题和两个段落。运行上图所示代码，效果如图所示。从图中可以看出，通过使用 p 段落标签，每个段落都会单独显示，并且段落与段落之间有一定的间隔距离。段落标签效果3. 水平线标签在网页中，常常会看到一些水平线将段落与段落之间隔开，使得文档层次分明。这些水平线可以通过插入图片实现，也可以通过标签来定义。hr 就是创建水平线的标签，其基本语法格式如下。hr 是单标签，在网页中输入一个 <hr>，就添加了一条默认样式的水平线。hr 水平线标签的属性、含义及属性值见表。hr 水平线标签的属性、含义及属性值4. 换行标签在 html 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。换行标签的应用在上图中使用了 br 换行标签。运行图所示代码，效果如图所示。换行标签的应用5. 文本格式化标签在网页中，有时需要为文字设置粗体、斜体或下画线效果，为此，html 准备了专门的文本格式化标签，使文字以特殊的方式显示。常用的文本格式化标签及显示效果见表。常用的文本格式化标签及显示效果下面通过图所示案例来演示文本格式化标签的应用。文本格式化标签的应用运行上图所示代码，效果如图所示。文本格式化标签效果6. 特殊字符标签浏览网页时，常常会看到一些包含特殊字符的文本，如数学公式、版权信息等。常用特殊字符的表示下面通过图所示案例来演示常用特殊字符的应用。常用特殊字符的应用运行上图所示代码，效果如图所示。特殊字符效果制作家用电器排行榜网页任务3● 1. 掌握超链接标签的用法。● 2. 掌握图像标签的用法。本任务主要通过使用超链接标签去嵌套文字标签和图像标签，来完成家用电器排行榜网页的制作，最终网页效果如图所示。家用电器排行榜网页效果步骤一：使用 HBuilder X 软件创建一个 web 项目，在项目目录下新建一个 html 网页文件，在新建的 html 网页文件中的 body 标签里面分别写入 h2 标签和 a 标签，将 a 标签的 href 属性设置为百度网页地址“ https://www.”，然后在 a 标签里面插入一些文字信息，代码和网页效果如图所示。当在浏览器中单击这些文字信息时，网页就会跳转到百度网站。添加 h2 标签和 a 标签步骤二：在 a 标签里面的文字信息的上方插入 img 标签，同时将创维电视机图片复制、粘贴到项目下的 img 目录中去，代码和网页效果如图所示。添加 img 标签添加 img 标签步骤三：在 a 标签下方加入 hr 水平线标签，代码和网页效果如图所示添加 hr 水平线标签步骤四：将其他四种电视机图片素材也都复制、粘贴到项目目录下的 img 目录中，在 hr 标签的下方依照步骤一至步骤三，分别再写 4 组 a 标签和 hr 标签，设置每组 a 标签中的相关文字信息和其中 img 标签的 src 属性内容，代码如图所示。添加其他四种电视机信息添加其他四种电视机信息步骤五：保存文件后使用浏览器打开网页文件，网页效果如图所示。家用电器排行榜网页效果一、超链接在 html 中添加超链接时，只需要将 a 标签环绕到需要添加超链接功能的其他网页标签上即可。a 标签的基本语法格式如下。在 a 标签的语法中，a 标签是一个行内标签，用于实现超链接。href 和 target 为其常用属性，具体含义如下。1. hrefhref 用于指定链接目标的 URL 地址，当为 a 标签应用 href 属性时，它就具有了超链接的功能。通常用 URL 来表示链接地址的意思（形式）。链接地址有绝对地址和相对地址的区别，绝对地址指通过该地址就可以“直达”该页面。相对地址是指相对于当前 a 标签所在的网页所在位置（文件夹）的一个相对位置。2. targettarget 用于指定链接页面的打开方式，其取值有 _self 和 _blank 两种。其中 _self 为默认值，意为在原窗口中打开；_blank 意为在新窗口中打开。下面通过创建一个带有超链接功能的简单网页，来演示超链接标签的应用，代码如图所示。超链接标签的应用在上图中，创建了两个超链接，通过 href 属性将它们的链接目标分别指定为淘宝网站和百度网站，同时通过 target 属性定义第一个链接网站在原窗口打开，第二个链接网站在新窗口打开。运行上图所示代码，效果如图所示。带有超链接的网页当用鼠标单击文本时，将会在新窗口中打开链接网页，如图所示。在原窗口中打开链接网页在新窗口中打开链接网页二、锚点链接浏览网页时，为了提高信息的检索效率，常需要用到 html 语言中一种特殊的链接ii锚点链接，它属于超链接的一种。通过创建锚点链接，用户能够快速定位到目标内容。下面通过一个案例对创建锚点链接的方法做具体演示，如图所示。创建锚点链接创建锚点链接下运行图中的代码，效果如图所示。使用锚点链接的网页如上图所示，当用鼠标单击新用户注册或登录的链接时，页面会自动跳转到本网页的目标位置。通过上图可以总结出，创建锚点链接分为定义锚点和链接到锚点两步，具体如下。1. 使用 id 名标注目标的位置。2. 使用 <a href="#id 名 "> 链接文本 </a> 创建能链接到目标的文本。三、图像标签在 html 中使用 img 图像标签来定义图像，其基本语法格式如图所示。其中，src 属性用于指定图像文件的路径和文件名，它是 img 图像标签能正常显示图像的必需属性。img 图像标签的基本语法格式要想在网页中灵活应用图像，仅仅靠 src 属性是不够的。html 还为 img 图像标签设计了很多其他属性，具体见表。img 图像标签的属性、属性值及描述由于某些原因，图像可能无法正常显示。因此，为页面上的图像加上文本是一个很好的编程习惯，当图像无法正常显示时，可以通过文本告知用户该图像的内容。alt 属性用于定义图像无法显示时的文本，下面通过一个案例来演示 alt 属性的应用，如图所示。img 图像标签 alt 属性的应用运行上图中的代码，正常情况下效果如图所示。如果图像不能正常显示，则出现图所示效果。在过去网速比较慢的年代，alt 属性主要用于使看不到图像的用户能够了解图像的内容。图片正常显示图片不能正常显示图像标签 img 有一个和 alt 属性十分相似的属性 title，title 属性用于设置光标悬停于图像上时的提示文字。下面通过一个案例来演示 title 属性的应用，如图所示。img 图像标签 title 属性的应用运行上图中的代码，当网页中鼠标光标移动到图像上时，会出现提示文本，如图所示。img 图像标签的 title 属性应用

展开更多......

收起↑

请用微信扫码

项目一 网站制作基础知识 课件-《电子商务网页设计与制作》

项目一 网站制作基础知识 课件-《电子商务网页设计与制作》

项目一网站制作基础知识课件-《电子商务网页设计与制作》

项目一网站制作基础知识课件-《电子商务网页设计与制作》