《网页设计与制作应用教程》课件-项目一 网页设计与制作基础_第1页
《网页设计与制作应用教程》课件-项目一 网页设计与制作基础_第2页
《网页设计与制作应用教程》课件-项目一 网页设计与制作基础_第3页
《网页设计与制作应用教程》课件-项目一 网页设计与制作基础_第4页
《网页设计与制作应用教程》课件-项目一 网页设计与制作基础_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

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

文档简介

第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC网页设计与制作应用教程第一部分网页设计与制作基础网页设计与制作第1章Internet与网页设计概述本章重点Web网页的基本概念网站规划的基本内容网页布局的类型一、Internet与网页设计概述网页设计与制作——Internet与网页设计概述1.1Internet概述1.2网站规划设计概述1.3网页设计基础1.4网页设计工具1.1Internet概述Internet与TCP/IP协议

Internet即国际计算机互联网，在中国也称“因特网”或“万维网”，是由符合TCP/IP等网络协议的网络组成的互联网。OSI参考模型TCP/IP模型应用层应用层TELNET、SMTP、FTP、DNS表示层会话层传输层传输层TCP、UDP协议网络层网际层IP协议数据链路层网络接口层物理层表1-1TCP/IP模型和OSI参考模型对照关系网页设计与制作——Internet与网页设计概述IP地址和域名

IP地址由网络地址（netid）和主机地址（hostid）两部分组成。网络地址标识了主机所在的逻辑网络，主机地址则用来标识网络中的一台主机。IP地址是一个32位的二进制数,为了便于记忆，分成四组，每组八位二进制数。但通常采用十进制表示，即每个字节的二进制数转换成十进制数，每个十进制数之间用圆点“.”隔开，这叫做“点分法十进制”。

例如：11001010110011101100000001000010表示成：

202.206.192.661.1Internet概述网页设计与制作——Internet与网页设计概述1.1Internet概述IP地址的类型IP地址中的网络地址是由Internet网络中心来统一分配的。为了根据不同的网络规模来合理分配IP地址，IP地址分为ABC三个基本类。网页设计与制作——Internet与网页设计概述1.1Internet概述网页设计与制作——Internet与网页设计概述域名

IP地址能唯一标识网上的主机地址，但为了便于记忆，为此提供了一种域名系统DNS，域名和IP地址之间存在一一对应的关系，域名由四部分组成。格式为：计算机名.组织机构名.二级域名.顶级域名例如：公安大学域名：wwwppsuceducn三级域名公安大学二级域名教育机构顶级域名中国主机名1.1Internet概述网页设计与制作——Internet与网页设计概述Internet提供的主要服务Internet为我们提供了信息获取、发布和交流的渠道，其服务功能包括：WWW服务

电子邮件

文件的下载和上传

FTP（文件传输）服务

UsenetNews（新闻组）和BBS（电子公告牌）服务

Telnet（远程登录）服务

网上游戏

个人主页空间电子商务

1.1Internet概述网页设计与制作——Internet与网页设计概述WWW简介浏览器与网页

统一资源定位器（URL）

超文本

超文本置标语言HTML

HTTP

主页

1.2网站规划设计概述网页设计与制作——Internet与网页设计概述

网站规划设计是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。网站设计流程编写网站设计的计划书确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点确定网站提供的内容网站交互设计，如信息反馈、意见调查等对网站的内容进行分类设计网页必有的内容，如公司标志、联系方法和导航条等制作网页的模板检查网页的链接根据需要修改不合适的地方正式发布网站网页设计与制作——Internet与网页设计概述WWW简介浏览器与网页

统一资源定位器（URL）

超文本

超文本置标语言HTML

HTTP

主页

1.2网站规划设计概述网页设计与制作——Internet与网页设计概述

确定网站的类型门户网站搜索引擎电子商务网站数据中心主题信息网站团体网站个人网站网站的建设技术静态网页技术动态网页技术

1.2网站规划设计概述网页设计与制作——Internet与网页设计概述1.3网页设计基础网页设计规划1.确定网页的整体风格2.设计网页框架首页个人简介本人视频联系本人文学作品图1-2个人网页框架草图

网页设计与制作——Internet与网页设计概述1.3网页设计基础网页的基本元素文本图片和动画

声音和视频

超链接

表格

表单

导航栏

其它常见元素

网页的构成LogoBanner导航条内容版块版尾版块网页设计与制作——Internet与网页设计概述1.3网页设计基础网页布局的常用技术:

CSS（层叠样式表）布局表格布局框架布局网页布局类型“国”字型布局拐角型布局标题正文型布局框架型布局封面型布局Flash型布局网页设计与制作——Internet与网页设计概述1.3网页设计基础网页设计工具简介1.网页制作工具文本编辑器

DreamweaverVisualStudioCodeWebstorm

2.网页图形图像处理工具

PhotoshopFireworksCorelDraw3.网页动画制作与特效工具FlashUleadGifAnimator

网页设计与制作——Internet与网页设计概述本章小结

本章介绍了网页设计的入门知识，主要包括：了解Internet与网页设计的基本概念的内容，如Internet的概念、网络提供的服务；了解网站设计的基础内容，如设计网站的类型、网站的规划及相关技术；掌握网站制作的基础知识，如构成网页的基本要素、网页的布局；以及网页设计与制作的工具软件等环节的知识。网页设计与制作——Internet与网页设计概述思考与练习简述你所了解的网站就功能实现所涉及的类型有哪些？网站主页的布局有哪些风格？简述网页设计软件中，Dreamweaver、Photoshop和Flash软件各自的功能特点。网页设计与制作第2章HTML5本章重点代码规范语法结构标签与属性二、HTML5基础网页设计与制作——HTML5基础2.1XHTML简介2.3HTML5语法2.4HTML5常用标签2.2创建简单的网页文件2.5HTML5新标签2.1XHTML简介HTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面，表示Web页面的符号标记语言。1993年6月正式推出HTML1.0版，2014年10月，W3C发布了HTML5，从而，HTML5取代了HTML4.0和XHTML1.0标准，实现了桌面系统和移动平台的完美衔接。可以说HTML5是HTML的升级完善，它将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。XHTML的新特点功能兼容性增加了新特性内容与表现的分离简化HTML5新增了内容元素，HTML5新增了表单控件，HTML5新增了用于绘画的canvas元素。HTML5新增了用于媒体播放的video、audio元素。HTML5更好地支持了地理位置、拖曳、摄像头等API。XHTML的新特性网页设计与制作——HTML5基础2.2创建简单网页文件网页设计与制作——HTML5基础

创建一个简单的网页，可以通过网页编辑器来编辑网页、并保存，生成XHTML文件。打开记事本。单击Windows的“开始”按钮，在“程序”菜单的“附件”子菜单中单击“记事本”命令。创建新文件，并按XHTML语言规则编辑。在“记事本”窗口中输入XHTML代码，代码内容。保存网页。打开“记事本”的“文件”菜单，选择“保存”命令。此时将出现“另存为”对话框，在“保存在”下拉列表框中选择文件要存放的路径，在“文件名”文本框输入以“html（或htm）”为后缀的文件名，最后单击“保存”按钮，生成网页文档。在资源管理器窗口找到网页文档，双击文档图标，随即在打开的IE浏览器窗口中可以浏览到网页内容。2.3

HTML5语法网页设计与制作——HTML5基础XHTML代码规范所有的标记都必须有一个相应的结束标记

所有标签的元素和属性的名字都必须使用小写

所有的标记都必须合理嵌套

所有的属性必须用引号括起来

特殊符号“<”、“>”和“＆”用编码表示

每个属性必须赋值

2.4

HTML5常用标签网页设计与制作——HTML5基础2.4.1文档结构标签HTML5文档是一种纯文本格式的文件，HTML5文档的基本结构为文件头和文件主体部分。我们先看下面的源代码，方便理解文档结构中的标签作用。XHTML的基本结构XHTML文档是一种纯文本格式的文件，XHTML文档的基本结构为：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"><htmlxmlns=><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>我的网页标题</title></head><body>网页内容</body></html>2.4

HTML5常用标签网页设计与制作——HTML5基础2．XHTML文档标记<html>…</html>

3．XHTML文档头标记<head>…</head>4．XHTML文档标题标记<title＞标题内容…</title>6．XHTML文档主体标记<body>网页内容…</…</body>

5．XHTML文档元信息标签<metacharset="utf-8"/>1.<!DOCTYPE><!DOCTYPE>位于文档的最前面，用于说明当前文档使用哪种HTML标准规范。<head>标签用于定义文档的头部，它是所有头部元素的容器用于提供有关页面的元信息用于定义文档的标题说明自身是一个HTML文档(1)主体位于头部之后，以<body>为开始标签，</body>为结束标签。它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体中，如文本、超链接、图像、表格和列表等等。(2)<body>标签有很多“呈现属性”，用于呈现页面外观，如bgcolor、text、link、alink、vlink、background、leftmargin、topmargin等。2.4.1文档结构标签2.4

HTML5常用标签网页设计与制作——HTML5基础2.4.2文本格式标签1．<！--…-->注释标签注释并不局限于一行，长度不受限制。2．<h#>标题标签语法：<h#align="对齐方式">标题文字</h#>

说明：（1）“#”用来指定标题文字的大小，取1～6的整数值，取1时文字最大，6时最小。（2）属性align用来设置标题在页面中的对齐方式，取值为：left（左对齐）、center（居中）、right（右对齐），默认为left。（3）<h#>…</h#>标记默认显示宋体，在一个标题行中无法使用不同大小的字体。（4）与用<title>…</title>定义的网页标题不同，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。网页设计与制作——HTML5基础3.段落标记<p>…</p>格式为：<palign=＂对齐方式＂>文字</p>

2.4

HTML5常用标签4.强制换行<br/>格式为：文字<br/>5.水平线标记<hr/>格式为：＜hralign=“left|center|right”

size=“横线粗细”

width=＂横线长度＂color=＂横线色彩＂noshade＝＂noshade＂>说明：size：设定线条粗细，以像素为单位，默认值为2。width：设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。所谓相对值，是指线段的长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终填满当前窗口。noshade：设定线条为平面显示（没有三维效果），若省略则有阴影或立体效果。网页设计与制作——HTML5基础色彩色彩英文名称十六进制代码黑色block#000000蓝色blue#0000ff棕色brown#a52a2a青色cyan#00ffff灰色gray#808080绿色green#008000乳白色Ivory#fffff0橘黄色orange#ffa500粉红色pink#ffc0cb红色red#ff0000白色white#ffffff黄色yellow#ffff00深红色crimson#cd061f淡紫色lavender#dbdbf8color：设定线条色彩，默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示，见表。2.4

HTML5常用标签网页设计与制作——HTML5基础2.4

HTML5常用标签<html><head><metacharset="utf-8"/><title>文本格式标签应用</title></head><body><h1align="center">春有百花秋有月</h1><palign="right">无门慧开禅师</p><hralign="center"slze="8"width="80%"color="blue"/><palign="center">春有百花秋有月，<br/>夏有凉风冬有雪，<br/>若无闲事挂心头，<br/>便是人间好时节。</p></body></html>例1：使用<p>、<h>、<br>和<hr>标签标识文本演示结果如下：网页设计与制作——HTML5基础2.4.3字符格式标签1.<em>和<strong>强调标签<em>和<strong>标签都是短语元素。<em>把文本定义为强调的内容，<strong>把文本定义为语气更强的强调的内容。2．<i>斜体标签标签是短语元素，将包含其中的文本以斜体字（italic）显示。3.<sup>和<sub>上下标标签标签中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

4.特殊字符标签HTML中有些字符无法直接表示出来，如“<”、“>”符号，使用特殊符号标签就可以将它们在网页中表示出来，常见的特殊符号表示如表所示。2.4

HTML5常用标签网页设计与制作——HTML5基础2.4.4超链接标签超链接（HyperLink）是HTML的一个最强大的和最有价值的功能，起到网页互联的桥梁作用。超链接可以看作是一个“热点”，它可以从当前网页定义的位置跳转到其他位置，包括当前页的某个位置、Internet、本地硬盘或其他文件，甚至跳转到声音、图像等多媒体文件。1.<a>超链接标签<a>标签定义超链接，用于从一张页面链接到另一张页面。它在网页上建立超文本链接。通过单击文本或图像，可以从此处转到另一个链接资源（目标资源），这个目标资源有惟一的地址（URL）。语法：<ahref="地址"target="打开窗口方式">链接对象</a>说明：(1)href属性非常重要，它的值为一个URL，即目标资源的有效地址。如果要创建一个不链接到其他位置的空链接，可用“#”代替URL，即<ahref＝"#"＞链接对象</a>(2)target属性设定超级链接被单击后所打开窗口的方式，可选值为：_blank,_parent,_self和_top。2.4

HTML5常用标签网页设计与制作——HTML5基础2.4

HTML5常用标签4．锚点链接锚点可以实现当前页面内部文字的超链接，需要先建立锚点，通过建立锚点对页面内的文字进行引导和跳转。锚点定义就是建立一个书签，对该文本做一个记号。（1）锚点定义语法：<aname=＂锚点名＂>目标文字</a>（2）锚点链接语法：<ahref＝＂＃锚点名＂>热点文本</a>这里，name的赋值和href的赋值之间只差一个“#”号，是链接对应的关键。即单击热点文本，将跳转到锚点名开始的位置。

5．指向下载文件的链接如果链接到的文件不是HTML文件，则该文件将作为可下载文件。语法：<ahref=＂可下载文件名＂>热点文本</a>

6．指向电子邮件的链接单击指向电子邮件的链接，将打开默认的电子邮件程序，如Foxmail、OutlookExpress等，并自动填写邮件地址。语法：<ahref＝＂mailto：E-mail地址＂>热点文本</a>网页设计与制作——HTML5基础超链接实例，HTML代码如下2.4

HTML5常用标签编辑并保存以上代码文档，然后按F12键，在浏览器中浏览页面效果，如图2-8所示。可以测试各种超链接功能。网页设计与制作——HTML5基础2.4.5多媒体标签2.4

HTML5常用标签1．<img>图像标签在HTML中，使用img标签可以把一幅图像加入到网页中。语法：<imgsrc=＂图像文件名＂alt=＂简单说明＂width=＂图像宽度＂height=＂图像高度＂/>说明：img是单标签。src：指出要加入图像的文件名，规定显示图像的URL。如，src="/i/eg_tulip.jpg"。alt：规定图像的替代文本。如，alt="郁金香"。width：设定图像的宽度（像素数或百分数），通常应设为图像的真实大小以免失真。若需要改变图像大小，最好事先使用图像编辑工具。height：设定图像的高度（像素数或百分数）。img标签的应用除了在网页中插入图像功能，还可以用图像作为网页的背景，即使用<body>标签的background属性，为网页加上背景图像。例如：<bodybackground=＂i/bg.jpg＂>background取值为一个图像文件名，并且要指出文件存放的路径，可以是相对路径，也可以是绝对路径。图像文件可以是gif格式或jpg格式的文件,如果图像小于页面，图像会进行重复。

网页设计与制作——HTML5基础2.<audio>标签<audio>标签是HTML5的新标签，用于定义声音，能够支持ogg、mp3、wav等三种音频格式。语法：<audio>…</audio>例如：<audiosrc="i/2-music.ogg"controls="true"autoplay="true">您浏览器不支持audio标签。</audio>其中，autoplay属性控制是否网页加载自动播放；controls是否显示播放控件，默认不显示；loop属性用于控制循环次数，如果值为正整数，则播放指定的次数，默认是无线循环播放。

3.<video>标签<video>标签是HTML5的新标签，用于定义视频，比如电影片段或其他视频流。语法：<video>…</video>例如：<videosrc="somevideo.wmv">您的浏览器不支持video标签。</video>

4.<embed>标签<embed>标签是HTML5中的新标签，用于插入多媒体插件。它可以用来插入各种多媒体，能支持mid、wav、swf、mp3等格式。语法：<embed/>例如：<embedsrc=＂i/2-music.wav＂/>，自动播放一段音频。<embedsrc=＂i/2-fl.swf＂/>，播放一段flash动画。2.4

HTML5常用标签网页设计与制作——HTML5基础2.4

HTML5常用标签2.4.6其他标签1.列表标签列表分为无序列表和有序列表两类。带序号标志（如数字、字母等）的表项就组成有序列表，否则为无序列表。(1)<ul>无序列表标签<ul><li>HTML5音频</li><li>HTML5视频</li><li>HTML5画布</li><li>HTML5拖放</li></ul>

代码示例如下：说明：<ul>用来定义一个无序列表，<li>用来定义列表项，Type=#设置无序列表的符号样式，其取值有以下3种，默认为实心圆。type=disc实心圆type=circle空心圆type=square方框网页设计与制作——HTML5基础2.4

HTML5常用标签（2）<ol>列表使用<ol>标签建立有序列表，通过带序号的列表可以更清楚地表达信息的顺序。<ol><li>HTML5音频</li><li>HTML5视频</li><li>HTML5画布</li><li>HTML5拖放</li></ol>

代码示例如下：说明：<ol>用来定义一个有序列表，<li>用来定义有序列表项，Type=#设置序列表的符号样式，取值有以下几种，默认为“1.2.3.”序列。Type=1Type=aType=AType=IType=i网页设计与制作——HTML5基础2.4

HTML5常用标签2.表格标签表格将文本和图像按行、列排列，它和列表一样，有利于表达信息。表格在主页中常用来建立网页的框架，使整个页面中的图像和空白分布更规则，并使条目更清晰。代码示例如下：

说明：表格标签通常包括有：<table>（表格）、<th>（表头）、<tr>（行）、<td>（单元格）。还包括一些可选标签，如：<tbody>、<thead>、<tfoot>、<caption>等。<thead>用于定义表格中的表头内容，<tbody>用于定义表格中的主体内容，<tfoot>用于定义表格中的注脚内容，<caption>用于定义表格标题。网页设计与制作——HTML5基础2.4

HTML5常用标签

3.表单标签<form>标签用于为用户输入创建HTML表单，并向服务器传输数据。表单能够包含<input>标签，比如文本字段、复选框、单选框、提交按钮等等。4.框架标签<frame>标签定义frameset中的一个特定的窗口（框架）。frameset中的每个框架都可以设置不同的属性，比如border、scrolling、noresize等等。不能与<frameset></frameset>标签一起使用<body></body>标签。5.样式/节标签<style>标签用于为HTML文档定义样式信息。在style中，type属性是必需的，定义style元素的内容。唯一可能的值是"text/css"。style元素位于head部分中。<div>可定义文档中的分区或节（division/section）。div标签是用来定义网页面的内容中的逻辑区域的标签，通过插入div标签，并应用CSS定位样式来创建页面布局。可以把文档分割为独立的、不同的部分。常采用id或class来标记<div>，标签的作用会变得更加有效。网页设计与制作——HTML5基础2.5

HTML5新标签

2.5.1<canvas>标签<canvas>标签定义图形，比如图表和其他图像。标签通过脚本（通常是JavaScript）来绘制图形（比如图表和其他

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

温馨提示

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

最新文档

评论

0/150

提交评论