1 / 60

1. 网页设计的基本方式 2. 网页中常见元素 3. 网页元素的创作与编辑工具 4.HTML 基础 5. 动态网页的支持技术

网页设计与制作概述. 1. 网页设计的基本方式 2. 网页中常见元素 3. 网页元素的创作与编辑工具 4.HTML 基础 5. 动态网页的支持技术. 1.1 网页设计的基本方式. 1.1.1 手工编码方式 1.1.2 利用可视化工具 1.1.3 手工编码与可视化工具结合. 1.2 网页中的常见元素. 1.2.1 文本 1.2.2 图象与动画 1.2.3 音频与视频 1.2.4 超级链接 1.2.5 表格 1.2.6 表单 1.2.7 导航栏 1.2.8 其他元素. 1.3 网页元素的创作与编辑工具.

addison-morse
Download Presentation

1. 网页设计的基本方式 2. 网页中常见元素 3. 网页元素的创作与编辑工具 4.HTML 基础 5. 动态网页的支持技术

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页设计与制作概述 • 1.网页设计的基本方式 • 2.网页中常见元素 • 3.网页元素的创作与编辑工具 • 4.HTML基础 • 5.动态网页的支持技术

  2. 1.1 网页设计的基本方式 1.1.1 手工编码方式 1.1.2 利用可视化工具 1.1.3 手工编码与可视化工具结合

  3. 1.2 网页中的常见元素 1.2.1 文本 1.2.2 图象与动画 1.2.3 音频与视频 1.2.4 超级链接 1.2.5 表格 1.2.6 表单 1.2.7 导航栏 1.2.8 其他元素

  4. 1.3 网页元素的创作与编辑工具 1.3.1 网页图像制作工具 1.3.2 动画制作工具 1.3.3 网页编辑工具

  5. 1.1.1 手工编码方式 网页是由HTML（HYPER TEXT MARKUP LANGUAGE）超文本标记语言编码的文本文档，设计制作网页的过程就是生成HTML代码的过程。在WWW（World Wide Web ）发展的初期人们制作网页是通过直接编写HTML代码来实现的。 手工编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂，因此，对大多数网页设计人员来说采用这个方式比较困难。但手工编码可以灵活地制作出丰富的网页效果。

  6. 1.1.2 可视化工具方式 随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网页效果上有一定的局限性。

  7. 1.1.3 编码和可视化工具结合方式 编码和可视化工具结合是一种比较成熟的网页制作方式。具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。这种方式效率高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉Html语言又能运用可视化工具。除了上面三种基本的网页设计制作方式外，我们还可以通过修改已有的网页代码生成自己的网页。在网页编辑制作过程中具体采用何种方式要根据个人的具体情况而定，每必要拘泥于某种固定的模式。

  8. 1.2.1文本 文本一直是人类最重要的信息载体与交流工具，网页中的信息也以文本为主。文本能准确地表达信息的内容和含义。为了克服文字固有的缺点，人们赋予了网页中文本更多的属性，如字体，字号，颜色，底纹和边框等，通过不同格式的区别，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的文字列表，来清晰表达一系列项目。这些功能都给网页中的文本赋予了新的生命力。

  9. 1.2.2图像和动画 图像在网页中具有提供信息，展示作品，装饰网页，表达个人情调和风格的作用。用户可以在网页中使用GIF, JPEG(JPG), PNG三种图象格式，其中使用最 广泛的是GIF和JPEG两种格式。 在网页中为了更有效地吸引浏览者的注意，许多网站的广告都做成了动画形式。

  10. 1.2.3 声音和视频 声音是多媒体网页的一个重要组成部分。当前存在着一些不同类型的声音文件和格式，也有不同的方法将这些声音添加到Web页中。在决定添加声音之前，需要考虑的因素包括其用途，格式，文件大小，声音品质和浏览器差别等。 用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。设计者在使用这些格式的文件时，需要加以区别。很多浏览器不要插件也可以支持MIDI,WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。 一般来说，不要使用声音文件作为背景音乐，那样会影响网页下载的速度。可以在网页中添加一个打开声音文件的链接，让音乐播放变得可以控制。 视频文件的格式也非常多，常见的有Realplay, MPEG, AVI和DivX等。视频文件的采用让网页变得精彩而有动感。

  11. 1.2.4 超级链接 超级链接技术可以说是万维网流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地址，一个文件，一个程序或者是本网页中的其他位置。其热点通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。 当浏览者单击超级链接热点时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式打开。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击的是指向一个网页的超级链接，则该网页将显示在Web浏览器上。

  12. 1.2.5 表格 在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。

  13. 1.2.6 表单 使用超级链接，浏览者和Web站点便建立起了一种简单的交互关系。网页中的表单通常用来接受用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端。这个目标可以是文本文件，Web页，电子邮件，也可以是服务器端的应用程序。

  14. 1.2.7 导航栏 导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的诸网页时，可以在站点的每个网页上显示一个导航栏，这样，浏览者就可以既快又容易的转向站点的其他网页。 一般情况下，导航栏应放在网页中较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图形按钮。

  15. 1.2.8 其他常见元素 网页中除了以上几种最基本的元素之外，还有一些其它的常用元素，包括悬停按钮，Java特效，ActiveX等各种特效。它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐，电子商务等方面也有着不可忽视的作用。

  16. 1.3.1 网页图像制作工具 1. Fireworks MX Firework MX是Macromedia公司的产品，是目前最流行的网页图像制作软件。只要将Dreamweaver的默认图像编辑器设为Fireworks ，那么在Fireworks 中制作完成网页图像后将其输出就会立即在Dreamweaver中更新。Fireworks还可以安装使用所有的Photoshop滤镜，并且可以直接导入PSD格式图像。其最方便之处是，它可以将图像切割，图像映射，悬停按钮，图像翻转等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。

  17. 1.3.2 动画制作工具 1. Flash MX 2004 Flash MX也是Macromedia公司的产品，是目前最流行的矢量动画制作软件。与其它的动和软件相比，它具有一些优点： 制作的是矢量图像。只有用少量矢量数据就可以描述一个复杂的对象，而占有的存储空间只是位图的几千分之一，非常适合在网络上使用。同时，矢量图像不会随浏览器窗口大小的改变而改变画面质量。

  18. 使用插件方式工作。 提供了一些增强功能。例如，支持位图，声音，渐变色和Alpha透明等。拥有了这些功能，用户就完全可以建立一个全部由Flash制作的站点。 Flash影片也是一种流式文件。这就是说，浏览者在观看一个大动画时，可以不必等到影片全部下做到本地在观看，而是可以随时观看，即使后面的内容还没有完全下载，也可以开始欣赏动画。

  19. 1.3.3 网页编辑工具 Dreamweaver MX和Fireworks MX、Flash MX一起，被人们喻为“网页制作三剑客”。同FrontPage一样，Dreamweaver也是“所见即所得”的网页编辑软件。它能够很好的支持ActiveX, JavaScript, Java, Flash和Shockwave等，而且还能通过鼠标拖动的方式从头到尾制作动态的HTML效果。可以在Dreamweaver和HTML代码编辑器之间进行自由转化，而HTML语法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到“所见即所得”带来的方便。

  20. HTML教程

  21. HTML概况 • HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台。 • html文件扩展名是.html或.htm，它们是可供浏览器解释浏览的文件格式。Html语言使用标签对的方法编写文件，它通常使用<标签名></标签名>来表示标志的开始和结束。在Html文档中这样的标志对一般是成对使用的。

  22. HTML脚本的结构 • 超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 • <HTML> • <HEAD>　　　　　　头 部 信 息</HEAD> • <BODY>　　　　　文 档 主 体， 正 文 部 分</BODY> • </HTML>

  23. 标签的说明 • 用“<”和“>”括起来的符号，我们称它为标签 • 1. 单标签只需单独使用就能完整地表达意思，这类标记的语法是：　　　　　　　　　　< 标签名称> • 　　 最常用的单标签是<BR>, 它表示换行。

  24. 标签的说明 • 2.双标签它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是： <标签> 内 容</ 标签>

  25. 标签的说明 • 3.标签属性 • 　　许多单标记和双标记的始标记内可以包含一些属性， 其语法是： • < 标签名字 属性1 属性2 属性3 … >

  26. 常用的标签 1、<html></html> <html>标志用于Html文档的最前边，用来标识Html文档的开始。而</html>标志恰恰相反，它放在Html文档的最后边，用来标识Html文档的结束，两个标志必须一块使用。

  27. 常用的标签 2、<head></head> <head>和</head>构成Html文档的开头部分，在此标志对之间可以使用<title></title>、<script></script>等等标志对，这些标志对都是描述Html文档相关信息的标志对，<head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。

  28. 常用的标签 3、标题 • 　　一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签<Hn>,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题： • 〈H1>…</H1>　　　　　第一级标题 • 〈H2>…</H2>　　　　　第二级标题 • 〈H3>…</H3>　　　　　第三级标题

  29. 常用的标签 4、<title></title>使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将您的网页的主题显示到浏览器的顶部其实很简单，只要在<title></title>标志对之间加入您要显示的文本即可。注意：<title></title>标志对只能放在<head></head>标志对之间。

  30. 常用的标签 5、<body></body> <body></body>是Html文档的主体部分，在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志，它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性：

  31. 属性 用途 示例 <body bgcolor="#rrggbb"> 设置背景颜色。 <body bgcolor="red">红色背景 <body text="#rrggbb"> 设置文本颜色。 <body text="#0000ff">蓝色文本 <body link="#rrggbb"> 设置链接颜色。 <body link="blue">链接为蓝色 <body vlink="#rrggbb"> 设置已使用的链接的颜色。 <body vlink="#ff0000"> <body alink="#rrggbb"> 设置正在被击中的链接的颜色。 <body alink="yellow">

  32. 常用的标签 6、<p></p> <p></p>标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外，<p>标志还可以使用align属性，它用来说明对齐方式，语法是：<p align=""></p>。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。

  33. 常用的标签 7、<br> <br>是一个很简单的标志，它没有结束标志，因为它用来创建一个回车换行

  34. 常用的标签 8、<font></font> <font></font>是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。用face属性来设置字体.

  35. 常用的标签 9、img 指明一个图像在网络的位置。不是把图像的所有信息包含进来，浏览器根据路径到指定的地方去取图像。 <IMG SRC="图形文件地址"> src属性在<img>标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，<img>标志还有alt、align、border、width和height属性。

  36. 常用的标签 10、<hr> <这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。<HR>有三个属性：size　水平线的宽度width水平线的长，用占屏幕宽度的百分比或象素值来表示align水平线的对齐方式，有LEFT RIGHT CENTER三种noshade线段无阴影属性，为实心线段

  37. 常用的标签 11、<a> </a>链接标签 　　　基本格式　　<A HREF="资源地址">链接文字</A> ·标签<A>表示一个链接的开始，</A>表示链接的结束；·属性“HREF”定义了这个链接所指的地方；·通过点击“链接文字”可以到达指定的文件。

  38. <a> </a>链接 • 链接分为本地链接、URL链接和目录链接。 • 本地链接：　　对同一台机器上的不同文件进行的连接称为本地链接。采用绝对路径或相对路径来指示一个文件。URL链接　　如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。

  39. URL链接的形式是：　　协议名：//主机.域名／路径／文件名例如：URL链接的形式是：　　协议名：//主机.域名／路径／文件名例如： • <A HREF="http://www.sjstc.edu.cn/default.htm">中国山西之窗</A><A HREF="telnet://bbs.xanet.edu.cn">西北网络中心兵马俑站</A>

  40. 常用的标签 12、<table><tr><td></td></tr></table>表格标签,<table></table>表示一个表格, <tr></tr>表示表格的一行 <td></td>表示表格的一行中的一列.

  41. 表格的属性

  42. 常用的标签 • 表单标签<form></form> • 一般格式： • <form name=“” method=“” action=“”> <input type=“” name=“”> …… </form> • <form></form>标志对用来创建一个表单，也即定义表单的开始和结束位置，在标志对之间的一切都属于表单的内容。<form>标志具有action、method和target属性。

  43. action的值是处理程序的程序名(包括网络路径:网址或相对路径)，如：<form action=“http://xld.home.chinaren.net/counter.cgi”>，当用户提交表单时，服务器将执行网址http://xld.home.chinaren.net/上的名为counter.cgi的CGI程序。 • method属性用来定义处理程序从表单中获得信息的方式，可取值为GET和POST的其中一个。GET方式是处理程序从当前Html文档中获取数据。POST方式与GET方式相反，它是当前的Html文档把数据传送给处理程序，传送的数据量要比使用GET方式的大的多。 • target属性用来指定目标窗口或目标帧。

  44. <input type=“”> <input type=“”>标志用来定义一个用户输入区，用户可在其中输入信息。此标志必须放在<form></form>标志对之间。<input type=“”>标志中共提供了八种类型的输入区域，具体是哪一种类型由type属性来决定。 • 八种类型的输入区域有一个公共的属性name，此属性给每一个输入区域一个名字。

  45. <sub></sub> 设置为下标 • <sup></sup> 设置为上标 • <small></small> 把文字缩小一号 • <big></big> 把文字放大一号 • <em></em> 同<i></i> • <strong></strong> 同<b></b>

  46. <pre> </pre>预格式化文本标签,用来控制换行和空格. • <bdo dir=“rtl”> </bdo>将文字倒置 • 块引用(Blockquote) <blockquote>...</blockquote> 处理大段引用和小块引用 • <del> </del> 标记删除文字 • <ins> </ins> 标记插入文字

  47. HTML实体 • 有些字符，比如说“<”字符，在HTML中有特殊的含义，因此不能在文本中使用。想要在HTML中显示一个小于号“<”，需要用到字符实体。一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）使用名字相对于使用数字的优点是容易记忆，缺点是并非所有的浏览器都支持最新的实体名，但是几乎所有的浏览器都能很好地支持实体号。注意：实体名是大小写敏感的。

  48. HTML链接 • 文字基本语法 <a href=“URL”> 要链接的文字 </a> • 图片链接:<a href=“URL”> <img src=“要链接的图片”> </a> • 属性target :_blank _self _top parsant

More Related