教师：李金双 Email：sy_lijsh@126.com 网页制作 教师：李金双 Email：sy_lijsh@126.com.

Presentation on theme: "教师：李金双 Email：sy_lijsh@126.com 网页制作 教师：李金双 Email：sy_lijsh@126.com."— Presentation transcript:

1 教师：李金双 Email：sy_lijsh@126.com
网页制作 教师：李金双

2 网页制作 第一讲 网站及网站概述

3 网页中的基本概念——什么是网页 网页是Internet的基本信息单位，一般网页上都会有文本和图片等信息，而复杂一些的网页上还会有声音、视频、动画等多媒体内容。进入网站看到的是网站的主页，主页集成了指向二级页面以及其他网站的链接，浏览者进入主页后可以浏览最近更新的消息，找到感兴趣的主题，通过单击超链接跳转到其他网页或其他网站。

4 网页中的基本概念——什么是网站 网站是有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间，哪怕只有一个页面也可以称为网站。 网站是由域名和网站空间构成。衡量一个网站的性能通常从网站空间大小、网站位置、网站速度、网站软件配置和网站提供的服务等几个方面考虑。

5 网页中的基本概念——域名和空间 从技术角度来看，域名是在Internet上用于解决IP地址对应的一种方法。一个完整的域名由二个或二个以上部分组成，各部分之间用英文的句号“.”来分隔，最后一个“.”的右边部分称为顶级域名，然后是二级域名、三级域名，每一级的域名控制它下一级域名的分配。 necweb.neu.edu.cn 从商业角度来看，域名是“企业的网上商标”。企业都非常重视自己的商标，而作为网上商标的域名，其重要性和其价值也已被全世界的企业所认识。从树立企业形象的角度看，域名和商标有着潜移默化的联系。许多企业在选择域名时，往往希望用和自己企业商标一致的域名。 空间就是放置网站文件的计算机的硬盘空间，不是在本地计算机上面，而是在网络服务供应商提供的服务器上，浏览者可以在网络上访问这台计算机上放置的网页文件。

6 网页的基本构成元素 网页是构成网站的基本元素。不同性质的网站，其页面元素是不同的。一般网页的基本元素包括LOGO、Banner(网幅图像广告)、导航栏目、文本、图像、Flash动画和多媒体。 网站LOGO 网站banner 导航栏 文本 图像 Flash动画 多媒体

7 网站LOGO 网站LOGO，也叫网站标志，它是一个站点的象征，也是一个站点是否正规的标志之一。一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角，访问者一眼就能看到它。 成功的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。网站标志应体现该网站的特色、内容以及其内在的文化内涵和理念。

8 网站banner Banner是一种网络广告形式，是一种以GIF、JPG等格式建立的图像文件，定位在网页中，大多用来表现网络广告内容。Banner广告一般是放在网页的顶部位置，在用户浏览网页信息时，吸引用户关注广告信息。 Banner广告有多种规格，其中最常用的是486×60像素的标准广告。Banner广告有多种不同的形式，如横幅广告、全幅广告、条幅广告、旗帜广告等，通常是以GIF、JPG等格式建立的图像文件或Flash文件。

9 导航栏 导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航栏的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。 导航栏的位置一般有4种常见的显示位置：在页面的左侧、右侧、顶部和底部。有的在同一个页面中运用了多种导航，如有的在顶部设置了主菜单，而在页面的左侧有设置了折叠式菜单，同时又在页面的底部设置了多种超链接，这样便增强了网站的可访问性。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用页面达到总体的协调一致。

10 文本 文字一直是人类最重要的信息载体与交流工具，网页中的文字(除网页图像中的文字)也称为文本，网页中的信息也以文本为主。与图像相比，文字虽然不如图像那样易于吸引浏览者的注意，但却能准确地表达信息的内容和含义。 为了克服文字固有的缺点，人们赋予了网页中文本更多的属性，如字体、字号和颜色等，通过不同格式的区别，突出显示重要的内容。

11 图像 图像在网页中具有提供信息、展示形象、美化网页、表达个人情趣和风格的作用。可以在网页中使用GIF、JPEG和PNG等多种图像格式，其中使用最广泛的是GIF和JPEG两种格式。

12 Flash动画 随着Internet技术的发展，网页上出现了越来越多的Flash动画。Flash动画已经成为当今网站不可缺少的部分，美观的动画能够为网页增色需要具有，从而吸引更多的浏览者。Flash动画不仅需要对动画制作软件非常熟悉，更重要的是设计者独特的创意。

13 多媒体 多媒体网页元素中，除了文本、图像和Flash动画外，还有声音、视频等其他媒体。
声音是多媒体网页中的一个重要组成部分，可以将某些声音添加到网页中。在添加声音前，需要考虑的因素包括其用途、格式、文件大小、声音品质及浏览器差别等。不同浏览器对声音文件的处理方法有所不同。 用于网络的声音文件格式非常多，常见的有MIDI、WAV、MP3和AIF等。在使用不同格式文件时，需要加以区别。很多浏览器不用插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要用专门的浏览器插件播放。 视频文件的采用使网页变得精彩而富有动感。视频文件的格式也非常多，常见的有RM、MPEG和AVI等。

14 网页制作 第二讲 网站设计技术及流程

15 网页设计的常用工具 设计网页时，首先要选择网页设计软件。虽然用记事本手工编写源代码也能做出网页，但这需要对编程语言相当了解，并不适合广大的网页设计人员。由于目前所见即所得类型的网页设计工具越来越多，使用也越来越方便，所以设计网页已经变成了一件轻松的工作。 Flash、Dreamweaver、Photoshop、Fireworks这4个软件相辅相成，是设计网页的首选工具，其中Dreamweaver用来排版并布局网页，Flash用来设计精美的网页动画，Photoshop和Fireworks用来处理网页中的图形图像。

16 网页编辑排版软件Dreamweaver Dreamweaver是一种所见即所得的网页编辑工具，能够使网页和数据库关联起来，支持最新的HTML编程语言和CSS技术，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。Dreamweaver 是专业人员制作网页的首选工具。

17 网页动画制作软件Flash Flash是一款功能非常强大的交互式矢量多媒体网页制作工具，能够轻松输出各种各样的动画网页，它不需要特别繁杂的操作，而且它的动画效果、多媒体效果十分出色。

18 网页图像制作软件Fireworks Fireworks能快速地创建网页图像，随着版本的不断升级，功能的不断加强，Fireworks受到越来越多网页图像设计者的欢迎。Fireworks 以它方便快捷的操作模式，以及在位图编辑、矢量图形处理与GIF动画制作功能上的优秀整合，赢得诸多好评。 使用Fireworks 设计网页图像，除了对相应的页面插入图像进行调整处理外，还可以使用图像进行页面的总体布局，然后使用切片导出。

19 网站建设的基本流程 网站建设是一个系统工程，有一定的基本流程，只有遵循该设计步骤，才能设计出满意的网站。因此在建设网站前，先要了解网站建设的基本流程，这样才能制作出更好、更合理的网站。 网站整体规划 收集资料与素材 设计网页图像 网页排版布局 测试与发布上传 后期更新与维护 网站的推广

20 网站整体规划 在网络世界里，充斥着大量的垃圾站点，这些站点缺乏灵魂、主旨松散混乱，原因就在于缺乏网站的整体规划。因此要使网站脱颖而出，就必须对整个站点作好统筹和规划。网站规划主要包括以下方面。 1. 市场调查阶段 2. 确定网站规模 3. 确定网站的类别和特色 4. 确定网站的目标对象 5. 确定整个网站的整体风格 6. 准备投入多少资金、如何经营网站 7. 根据目标框架整理出站点的内容框架以及逻辑结构图

21 收集资料与素材 首先新建一个新的总目录（文件夹），如e：\网站素材，来放置建立网站的所有文件，然后再在这个目录下建立两个子目录：“文字资料”和“图片资料”。 1. 文本内容素材的收集 2. 艺术内容素材的收集 从Internet上获取。 从CD-ROM中获取。 利用现成图片或自己拍摄。 自己动手制作一些特殊效果的图片，特别是动态图像。

22 设计网页图像 首先需要使用Fireworks或Photoshop设计好网页的整体效果图，再制作精美图像、处理网页中的图像和背景图处理，以及设计好网页中的图标和按钮等。设计网页图像应注意以下原则。 网页设计美术设计要求。网页美术设计一般要与企业整体形象一致，要符合CI规范。要注意网页色彩、图片的应用及版面规划，保持网页的整体一致性。 在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。 制定网页改版计划。如半年到一年时间进行较大规模的改版等。

23 网页排版布局 网页是通过浏览器所看到的页面，在Dreamweaver中，用户可以方便地、可视化地输入文本和插入其他网页元素，如图像、声音、动画以及媒体对象，以便使网页内容更加充实。 在制作网页前，可以先布局出网页的草图。网页布局的方法有两种 。 1. 纸上布局法 2. 软件布局法

24 网页排版布局

25 测试与发布上传 网页制作完毕，最后要发布到Web服务器上，才能够让全世界的人浏览，现在上传网页的工具有很多，可以采用Dreamweaver自带的站点管理器上传文件，也可以采用专门的FTP软件上传。利用这些FTP工具，可以很方便地把网站发布到服务器上。网站上传以后，要在浏览器中打开自己的网站，逐页逐个链接进行测试，发现问题及时修改后再上传进行再测试。 网站发布前要进行细致周密的测试，以保证正常浏览和使用，主要测试内容如下。 服务器稳定性、安全性。 程序及数据库测试。 网页兼容性测试，如浏览器、显示器。 根据需要的其他测试。

26 后期更新与维护 如何让自己的网站信息在成千上万的信息中被目标人群检索到，并获得良好的反馈效果，已经成为众多开展网上服务或网上宣传的商家的殷切期待。 网站能否吸引更多目标浏览者的注意力，除了与网站本身的知名度、服务器的速度有关外，另外一个非常重要的因素在于网站的及时更新与维护。 网站维护包括网页内容的更新，通过软件进行网页内容的上传、目录的管理、计数器文件的管理；网站的定期推广服务等。更新是指在不改变网站结构和页面形式的情况下，为网站的固定栏目增加或修改内容。

27 网站的推广 网站做好后必须推广才能为更多的浏览者所知道，推广网站的目的是提高网站访问量并达到利用网络进行营销的目的。因此在做好网站以后，后期的推广宣传工作也不可忽略，可以从以下几个方面来宣传。 1. 搜索引擎 2. 电子邮件宣传 3. 与网站合作 4. 讨论组BBS宣传 5. 传统推广方式

28 网页制作 第三讲 HTML标记概念

29 HTML简介 HTML是Hyper Text Markup Language (超文本标记语言)的缩写。用HTML语言编制的文档为HTML文档，其文档扩展名通常是.htm或.html。 HTML的优点： 每一个HTML文档占用空间小，易于传送。 HTML文档是多平台兼容，只需有HTML浏览器就可在任何平台上阅读网页文件。 HTML是标记性语言，易学易懂。 HTML文档的建立只要有一个文本编辑软件即可完成书写。

30 HTML的未来发展 模块分离 DHTML、XML和XHTML等的出现和应用
通过将Web页面的各组成部分分开，更新复杂的内容变得十分容易，这种分离的做法称为模块化设计 DHTML、XML和XHTML等的出现和应用 DHTML：可以看作HTML、CSS、Javascript和DOM模型的综合。 XML：eXtensible Markup Language，可扩展标记语言允许设计者定义他们自己的元素。 XHTML：它把HTML语言分成各个模块，并把所有的XML规则应用于HTML元素。

31 查看和编辑HTML HTML编辑器 可以使用任一款文字编辑软件来充当HTML编辑器，例如Windows操作系统自带的记事本，Microsoft Office Word等文字编辑工具，也有专门的HTML编辑器，例如Macromedia公司的Dreamweaver，Microsoft公司的Frontpage。专门的HTML编辑器比文字编辑工具更专业，可以用来完成复杂的任务，并且使用更加方便。一般在专门工具上修改HTML代码后可以通过它们直接看到显示效果的变化，这称为“所见即所得”（即WYSIWYG, What You See Is What You Get）。

32 查看和编辑HTML Web浏览器 用于浏览、显示HTM网页效果的软件称为浏览器。随着万维网的发展，出现了多种浏览器。当今使用得最广泛的两种浏览器是微软公司开发的Internet Explorer和Netscape公司的Netscape浏览器。

33 Internet Explore (IE) 7.0

34 Netscape 7.0

35 Mozilla Firefox

36 HTML基本术语 HTML标记（Tag） HTML元素（Element） HTML属性（Attribute）
标记都括在一对尖括号“<”和“>”中，标记一般成对出现，中间加入受标记控制的信息内容。例如 <b>和</b> HTML元素（Element） 用于指示浏览器如何组织和显示文档。元素一般由一个起始标记和其对应的结束标记、标记之间的内容构成。例如： <title>这是一个HTML文件</title> HTML属性（Attribute） 属性是元素具有的，用来告诉浏览器如何控制或显示元素内容的。例如： <a href=" target="_blank">sohu网站</a>

37 HTML数据类型 长度值 颜色值 URI(Universal Resource Identifier)地址规范
绝对值：绝对值普遍用像素定义。 相对值：相对某一HTML对象或元素的尺寸而定义的长度值。 颜色值 十六进制值：红（R）、绿（G）、蓝（B）三原色的三个数值的连写来定义各种颜色，格式为： 颜色="#RRGGBB" 颜色名称值：使用颜色的英语名称，如： black（黑色）、white（白色） URI(Universal Resource Identifier)地址规范 最前面是网络应用层的协议种类，后面跟Web服务器地址和网页文件路径，最后可能会有具体文件的锚定位。如：

38 使用记事本新建一个HTML文件

39 HTML的组织规范 HTML的语法定义非常明确，所有的HTML文档都遵循由W3C规定的HTML规范。下面展示一个基本的HTML文档模板：

40 HTML基本标记——结构标记<html>
<html>标记用来鉴别一个文件是否为HTML文件，<html>……</html>元素标识了一个HTML文档的开始和结束。所有其它的标记都包含在<html>和</html>之间。加上<!DOCTYPE>标记声明，编写HTML文件代码的第一步如图所示：

41 HTML基本标记——头标记<head>
在标记<head>和</head>之间的部分被称为文件头。<head>称为头标记，含有关于网页文件相关的信息，所以它们中的大部分不会出现在浏览器中。网页文件信息包括网页文件的标题、脚本以及其它关于文件的描述。对应的标记包括<title>、<meta>、<link>、<script>、<style>等。

42 HTML基本标记——文档标题标记<title>
在HTML规范中<title>是不可或缺的一部分。一个页面的标题出现在标记<title></title>中，并且每个页面只允许有一个<title>标记。设置标题后，当浏览该页面时标题内容会出现在浏览器窗口标题栏区域。

43 HTML基本标记——内容标记<body>
主体（body）区由内容标记<body>引出，主体部分包括了所有要在浏览器中显示出来的信息，也就是包括了所有的其它标记和元素。该标记具有一些用于定义整个网页特点的属性，如网页的背景颜色、背景图案和文字的颜色等。

44 HTML基本标记——综合示例 例子中的head区设置了网页字符编码采用“gb2312”，网页标题是“使用所有基本标记”。<body>标记中设定了属性style的内容：font-size:20pt，将网页内出现的字体大小统一设为20pt。在head区和body区之间插入了两行注释

45 网页制作 第四讲 常用HTML标记

46 文字格式化——改变文字属性 给HTML网页添加标准文字后，还要指定文档中的文字属性，如字体类型、颜色和文字的相对大小。HTML4.0标准中有一个字体标记<font>，该标记包含控制文字特性的属性。

47 <font>标记示例

48 物理的字符格式化

49 逻辑格式化标记

50 文字格式化——特殊字符

51 超链接示例

52 命名锚站示例

53 段落格式化——标题 标题是一段文本的主题，标题可以按照所包含信息内容的逻辑层次进行组织。
HTML提供六个级别的标题：从最大的<h1>到最小的<h6>。 在标题标记内的文本根据级别自动格式化，并且通常都为粗体字。

54 段落格式化——标题对齐 适用于段落标记的align属性同样也可以用在标题标记中。

55 段落格式化——换行与空行 <br>标记，它是一个换行标记，即在某一行的特定位置断开这一行。

56 使用图像——在Web页中添加图像 要向一个HTML文件中添加图片，只需在其中加入<img>标记，并使它指向所需的图片。<img>标记不是一个成对标记，不需要结束标志。最基本的使用<img>标记的语法如下： <img src=“图像文件url” alt=“替换文本”> src属性设置为要插入图像文件的URI URI既可以是绝对地址，也可以是相对地址。

57 在Web页中添加图像示例 <img>标记引入了height和width属性，分别指定图片的高度和宽度。这两个属性的值既可以用像素值，也可用百分比值。

58 设置表格格式

59 HTML标记 <HTML> <HEAD> <TITLE> <BODY>
<FRAMESET> <frameset rows="90,*" frameborder="0" border=0 framespacing="2" bordercolor="#008000"> <FRAME> <frame name="top" src="a.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF">

60 HTML标记 <IFRAME> <STRONG> <B> <I> <EM>
<iframe src="iframe.html" name="test" align="MIDDLE" width="300" height="100" marginwidth="1" marginheight="1" frameborder="1" scrolling="Yes"> <STRONG> <B> <I> <EM> <H1> <H2> <H3> <H4> <H5> <H6> <FONT> <BASEFONT> <font face="Arial" size="+2" color="#008000">Creation of Webpage</font>

61 HTML标记 <P> <BR> <HR> <CENTER> <PRE>
<p align="center"> <BR> <HR> <CENTER> <PRE> 预设格式标记 <DIV> 区隔标记

62 HTML标记 <A> <IMG>
<a href="index.html" name="hello" target="_top"> <a name="test"></a> <a href="#test">本页的内部连结</a> <a href="faq.html#14">跳到 PenPal Garden 的 FAQ 部分</a> <IMG> <img src=“sun.gif" width=100 height=112 border=0 alt=“sun">

63 HTML标记 <TABLE> <TR> <TD> <TH>
<TABLE BORDER=? WIDTH=?></TABLE> <TR> <TD> <TD COLSPAN=?> <TD ROWSPAN=?> <TH>

64 HTML标记 <FORM > <FORM ACTION="URL" METHOD=GET|POST></FORM> <FORM ENCTYPE="multipart/form-data> <INPUT TYPE="TEXT|PASSWORD|CHECKBOX| RADIO|IMAGE|HIDDEN|SUBMIT|RESET"> <INPUT NAME="***"> <INPUT VALUE="***"> <INPUT CHECKED> <SELECT> <OPTION SELECTED> <TEXTAREA ROWS=? COLS=?></textarea>

65 HTML标记 <style> <span> <!--***--> <OL>
<UL> <LI> < >