《网页制作教程》PPT课件.ppt

1、网页制作教程,第1章 网站开发基础,理解：网页的本质及基本构成 了解：HTML的定义及其标准 了解：网页制作的基本工具 理解：网站的定义及其组成 理解：网站建设的一般流程 掌握：网站策划及设计方法,第一节 网站开发基础知识,1：什么是网页？网页是WWW（World Wide Web，万维网）上的基本文档，用HTML（Hyper Text Markup Language，超文本标记语言）书写。网页可以是网站的一部分，也可以独立存在 网页的本质：网页的本质是由源代码 常见网页的地址方式： 隐藏网页文件名： 静态网页文件：网页 URL的后缀是.htm、.html、.shtml、.xml等静态网页的常

2、见形式，例如： 动态网页文件：以.asp、.jsp、.php、.perl、.cgi等形式为后缀，或者在网址中有一个标志性的符号“?”。例如：,第一节 网站开发基础知识,按照在网站中位置的不同，网页可以分为： 引导页：引导页即是刚刚输入网站后所显示的页面，作为进入网站的一个入口。采用FLASH动画作为引导页引出首页的设计思路，是当前网站建设较为流行的做法。 主页：指进入网站后看到的第一个页面，也称为首页。 内页：指与主页相链接的页面，也就是网站的内部页面。经常分为多个级别，分别称为二级页面、三级页面,第一节 网站开发基础知识,Logo（标志） Logo是代表企业形象或栏目内容的标志性图片，一般在

3、网页的左上角。Logo一般使用公司已有的徽标做一些简单的处理。 Banner（横幅） Banner是用于宣传站内某个栏目或活动的广告，一般要求制作成动画形式，由于动画能够更多地吸引人的注意力，将宣传文字或广告内容简练地加在其中，起到宣传的效果。 导航栏 导航栏就是一组超级链接，用来方便地浏览站点。例如典型的导航栏包含一些指向站点的主页和二级页面的超级链接。导航栏可以用按钮、文本或小图片来实现超链接，也有可能使用下拉菜单效果。导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。 版权区 作为惯例，这一小行文字有很好加强意识，提醒浏览者，所观看的内容是受到版权保护的。正确

4、的格式应该是：Copyright 日期 by 所有者， 通常可以代替Copyright。 导航区 网站导航结构主要就是一个网站的栏目菜单，是网页中很重要的一部分内容，主要对网页的导航、布局起到很重要的作用。它一方面在帮助用户更方便的浏览网站，同时它也是用户和搜索引擎判断一个网站专业度的重要因素之一。在导航栏功能有限时，可以通过导航区更清晰地引导浏览者浏览网站。 内容区 这是网页的主要部分，是内容的表现区。,第一节 网站开发基础知识,第一节 网站开发基础知识,2：什么是网站 网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简而言之，

5、网站是由多个网页互相连接而成的整体。网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。,网站的组成 网站由域名（domain name，俗称网址）、网站源程序和网站空间三部分组成。 域名（俗称网址）经常以这样的形式出现。域名是因特网查寻信息及互相联系的地址信息。网站空间由专门的独立服务器或租用的虚拟主机承担；网站源程序则放在网站空间里面，表现为网站前台程序和网站后台程序。 例如： ,第一节 网站开发基础知识,第一节 网站开发基础知识,3.网站设计的原则 网站设计的

6、真正意图在于把适合的信息传达给适合的观众。设计者应先理解设计的基本结构，进而去掌握他们，要设计出精彩的多媒体网站，需要考虑以下三个方面的问题。,第一节 网站开发基础知识,确定内容 网站需要传输的最重要的消息是什么？ 哪一种多媒体方式能最有效地说明它？ 在信息列表中，哪个信息需要特别关注？ 哪个信息需要反复强调？ 实现这个方法的最好途径是什么？ 这个消息与其他部分怎样平衡？,第一节 网站开发基础知识,确定内容最好的表现形式和用户 什么样的访问方式将使用户的数目最多？ 他们将使用什么样的计算机？ 他们是家庭用户还是办公用户？ 他们用的是什么浏览器？ 用以选择文件格式、软件、插件和浏览器支持的最小配

7、置是什么？,第一节 网站开发基础知识,确立一个创造性、有效的设计方案 要考虑带宽的问题。 要注重色彩的搭配问题。 要考虑适应不同浏览器，不同分辨率的情况。 要让浏览者容易找到要找的东西，使网页内容便于阅读。 站点内容要精、专、及时更新。 提供交互性。 简单即为美。,第一节 网站开发基础知识,针对不同的用户群，有着不同的服务方向，但有一点是可以肯定的，需要恰当的设计“没有好的或坏的设计，只有是否合适、是否恰当的设计”，这成为了目前网站设计的根本原则。,第一节 网站开发基础知识,针对不同的用户群，有着不同的服务方向，但有一点是可以肯定的，需要恰当的设计“没有好的或坏的设计，只有是否合适、是否恰当的

8、设计”，这成为了目前网站设计的根本原则。,第二节网站开发相关技术,跟网站相关的技术性内容： HTML语言 网站相关的定制内容 网站相关的制作工具,第二节网站开发相关技术,HTML HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。其中， 超（Hyper）：是相对于线性（linear）来说的。在很久以前，那时计算机程序还是线形运行的：当计算机程序执行完一个动作以后，转向下一行，这行结束后，继续下移，依次类推。但HTML则不同，你可以在任何时候跳转到任何地方。 文本（Text）：意味着它是自解释的（self-explanatory）。 标记（Mark

9、up）：指的是如何处理文本。对文本作标记的方式，与在文本编辑程序里将文本加粗、或者将一行话设为标题或列表项目类似。 语言（Language）：HTML就是一种语言。 设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 如果要制作网站，学习HTML是不可避免的。即使用Dreamweaver、frontpage等网页编辑工具来制作网站，了解

10、基本的HTML知识也会在网站制作过程中倍感轻松，并有利于制作出更好的网站。,第二节网站开发相关技术,HTML的基本结构 一个HTML文件包含以下几个最基本的标记符。 网页标题 网页主体部分 在HTML源代码中，用标记符经常是成对出现的。每一个标记符都有特定的功用。 和标记是用来说明在它们之间的文本属于HTML文件，浏览器从标记开始执行，当遇到标记时，将会停止执行。 和标记是用来说明在它们之间的文本都属于HTML文件的文件头。它仅定义HTML文件需要特殊处理的一些预先说明，并不在浏览器中显示。 和标记是用来说明在它们之间的文本是该文件的标题，此标题显示在浏览器最上方的标题栏中。如果要把页面添加到

11、浏览器的“收藏夹”中，该文档的标题便会成为“收藏夹”中的项目名称。 和标记是用来说明在它们之间的文本是HTML文件的主体部分，也是整个HTML文件最重要的部分。它所包含的内容显示在浏览器的页面显示窗口里。 HTML语言发展很快，早期的HTML文件并没有规定如此严格的结构，为保持对早期HTML文件的兼容性，现在流行的浏览器也支持不按上述结构编写的HTML文件。,第二节网站开发相关技术,网页标准与W3C 我们可以以多种不同的方式来编写HTML，同时，浏览器也可以以多种不同的方式来理解HTML。这就是为什么某些网站会在不同的浏览器上显示出不同效果的原因。为了解决这一问题，HTML发明人Tim Ber

12、ners-Lee先生创办了万维网联盟（World Wide Web Consortium，W3C）来致力于制订通用的HTML标准。 HMTL标准目前已经发展到4.01版和XHMTL。占据市场较大份额的IE浏览器有自己特有的元素，但它也支持W3C HTML标准。同样地，其它的浏览器，比如Mozilla、Opera和Netscape等，都是既有自己特有的元素，也同时支持W3C HTML标准。 如何告诉浏览器你所编写的HTML支持的是哪种标准呢？具体做法是采用文档类型声明。文档类型声明应写在HTML文档的开头部分。,第二节网站开发相关技术, 网页标题 网页内容 ,第二节网站开发相关技术,除了要给出文

13、档类型声明以外（上例中第一行，它告诉浏览器这个文档是XHMTL），还需要在html标签中加入一些信息，也就是添加两个属性xmlns和lang。xmlns是“XML-Name-Space”（XML名称空间）的缩写，其值固定为/1999/xhtml。lang属性用于指定当前文档所使用的语言，其值采用ISO 639标准中列出的世界各国语言代码。通过HTML文档头部的文档类型声明，浏览器可以知道如何读取和显示你的HTML。 在编写网页程序时，只要遵循W3C标准来编写HTML，就能够确保网页能在所有浏览器上显示出来。因此，编写标准的HTML是非常重要的。,第二节网站开发相

14、关技术,网页制作元素 导航和LOGO 需要确定的内容包括：导航的长短、形式（横的、竖的、弧形的），是否有下拉菜单？比重各是多少？LOGO处在什么位置？各语言版面入口在哪里？登陆（后台管理/用户/MAIL）在什么位置，LOGO附近是否有点睛一般的广告词等。 banner 需要确定的内容包括：导航跟banner是分开的还是在一起的？是否采用flash制作？如不使用flash制作，那么设计的背景是否适合切片成平铺的背景？如何使背景图片体积最小等。 主体内容部分 需要确定的内容包括：主体部分采用什么结构？是采用不分割结构，还是左右结构，还是左中右结构的？颜色以怎么样的规则变化？放置什么内容？ 版权信息

15、及其他 需要确定将什么信息放置在版权区，使用什么格式等。,第二节网站开发相关技术,网站相关的制作工具 网页的制作是一个系统工程，涉及以下几个方面的工作： 版式设计与内容组织 页面制作 图像的设计与制作 动画的设计与制作 网页特效的实现 多媒体元素（音频、视频等）的表现,第二节网站开发相关技术,图像制作工具 Photoshop 平面图形工具首推Photoshop，它广泛地应用于印刷、广告设计、封面制作、网页图像制作、照片编辑等领域，其强大的功能足以完成各种平面图形的处理、加工等操作。它与ImageReady相整合，可以实现多方面的网络应用。 Fireworks Fireworks是专门为网页制作

16、人员设计的一种图形设计和处理软件，它既是一个位图编辑器，又是一个矢量绘图程序。它能够自由地导入各种图像文件，识别矢量文件中绝大部分的标记和Photoshop文件中的层，它还可以方便的制作GIF动画。,第二节网站开发相关技术,多媒体制作工具 随着网络带宽的不断提高，音频、视频等多媒体内容被更多地放到网页上来，尤其是随着一些视频分享、视频点播网站的兴起，多媒体视频制作工具也越来越多地被应用。Adobe Premiere、Ulead公司的会声会影等都是主流的多媒体视频编辑工具，用Flash制作的FLV影片目前在网上应用的也非常广泛。 Movie Maker Movie Maker作为Windows

17、XP的组件之一，已被捆绑在操作系统中。它简单易学，使用它制作视频短片充满乐趣。通过简单的拖放操作，精心的筛选画面，然后添加一些效果、音乐和旁白，视频短片就可以初具规模。 Adobe Premiere Adobe Premiere 目前已经成为主流的视频编辑工具，它为高质量的视频提供了完整的解决方案，是一款专业非线性视频编辑软件。,第二节网站开发相关技术,JavaScript网站资源 想使用JavaScript特效来提升网页的吸引力，可以自己手工编写JavaScript脚本程序，但这对于一般网页制作人员似乎难度过高。Internet上有许多免费的JavaScript特效开源代码资源，可以方便地为

18、你的网页提供“页面特效类”（例如：字符从空中掉下来）、“时间日期类”（例如：时钟加在背景上）、“图形图像类”（例如：图片翻滚导航）等多种类别的特效。 Java Applet生成工具Anfy Java最初奉献给世人的就是Applet，随即它吸引了全世界的目光，Applet运行于浏览器上，可以生成生动美丽的页面，进行友好的人机交互，同时还能处理图像、声音、动画等多媒体数据。Java Applet 是用Java 语言编写的一些小应用程序，这些程序是直接嵌入到页面中，由支持Java的浏览器解释执行能够产生特殊效果的程序。,第二节网站开发相关技术,其他小工具 网页制作人员并不每个人都是美工，有些图像处理

19、工作可以借助一些专门的网上工具来完成，如“http:/www.55.la/”上就可以在几秒钟之内免费制作出具有专业水准的banner广告条，使网页制作人员的工作更快捷、高效。,第三节 网站建站流程,虽然每个网站在内容、规模、功能等方面都各有不同，但是有一个基本设计流程可以遵循。大到门户网站（如sohu、Yahoo、sina），小到一个微不足道的个人主页，都要以基本相同的步骤来完成。首先是前期策划，然后是定义站点结构，再创建界面，接下来是技术实现和完善，最后是站点的发布和维护。这几个阶段完整地结合在一起，直到完成整个站点的工作。,第三节 网站建站流程,第三节 网站建站流程,网站策划 网站策划的主

20、要内容 要进行网站的整体设计，策划是第一步。网站策划就是通过客观的、科学的方法，借助策划学的知识，依托互联网的相关技术和行业知识，对一个网站从构思到建设再到推广运营而提出的一条龙的整体建设思路和实现方法，以保证这个网站能够顺利出生并且健康成长。,第三节 网站建站流程,网站策划书的撰写 每个网站的情况不同，网站策划书也是不同的，但是最终都不要离开主的框架，在网站建设前期，我们要进行市场分析，然后总结一下，形成书面报告，对网站建设和运营进行有计划的指导和阶段性概述。网站策划书一般可以按照下面的思路来进行整理。,第三节 网站建站流程,网站策划书的结构 建设网站前的市场分析 建设网站目的 网站技术解决

21、方案(windows Windows server2003+sql+asp Linux+mysql+php 网站内容规划 网页设计 网站维护 网站测试 网站的发布与推广 网站建设日程表 费用明细,第三节 网站建站流程,网站设计 网站设计主要是对网站前台页面进行设计。所谓前台就是浏览者能够看到的那部分，也就是网页。 对于不同类型的网站，前台设计情况可能略微不同。 门户网站 | 企业网站 | 个人网站,第三节 网站建站流程,代码实现 网站代码编程是网站安全的基础，一个好的程序可以是网站受到攻击而产生不良后果的问题大大减少，代码实现需要专业的编程技术，一般来说网站流行的编程语言有以下几种：JSP、A

22、SP、.NET、PHP等等。 网站建设编程语言是一个选择，要用所选的语言编具有什么功能的程序才是网站基本。通常情况下网站都具有这些基本系统：新闻发布系统(信息发布系统)、产品发布系统、会员管理系统、广告管理系统、流量统计分析系统等等。,第三节 网站建站流程,网站测试与完善 网站的设计和编程全部做完之后，我们要对网站进行测试和上传。首先我们应该将网站上传到网站空间，然后对网站进行测试，同时也是对网站空间进行测试。一般来说，网站测试需要进行的就是网站页面的完整程度，网站编程代码的繁简程度和完整性，网站空间的链接速度和网站空间的加压测试承受度。,第三节 网站建站流程,网站发布 网站建设完成后，需要将它发布在Internet或Intranet上供访问者访问。发布网站需要有三个必备条件。 编写好的网站（如果是动态网站，需要事先导出数据库，并确保服务器支持此数据库的导入和连接） 服务器空间（需要知道服务器的域名或IP地址） FTP客户端工具（需要知道FTP上传的用户名和密码）,第三节 网站建站流程,宣传与推广 免