网页制作教程课件_1

《网页制作教程课件_1》由会员分享，可在线阅读，更多相关《网页制作教程课件_1（38页珍藏版）》请在金锄头文库上搜索。

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

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

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

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

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

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

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

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

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

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

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

12、为了解决这一问题，HTML发明人Tim Berners-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名称空间）的缩写，其值固定为http:/www.w3.org/1999/xhtml。lang属性用于指定当前文档所使用的语言，其值采用ISO 639标准中列出的世界各国语言代码。通过HTML文档头部的文档类型声明，浏览器可以知道如何读取和显示你的HTML。 在编写网页程序时，只要遵循W3C标准来编写HTML，就能够确保网页能在所有浏览器上显示出来。因此，编写标准的

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

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

16、ks Fireworks是专门为网页制作人员设计的一种图形设计和处理软件，它既是一个位图编辑器，又是一个矢量绘图程序。它能够自由地导入各种图像文件，识别矢量文件中绝大部分的标记和Photoshop文件中的层，它还可以方便的制作GIF动画。,第二节网站开发相关技术,多媒体制作工具 随着网络带宽的不断提高，音频、视频等多媒体内容被更多地放到网页上来，尤其是随着一些视频分享、视频点播网站的兴起，多媒体视频制作工具也越来越多地被应用。Adobe Premiere、Ulead公司的会声会影等都是主流的多媒体视频编辑工具，用Flash制作的FLV影片目前在网上应用的也非常广泛。 Movie Maker Movie Maker作为Windows XP的组件之一，已被捆绑在操作系统中。它简单易学，使用它制作视频短片充满乐趣。通过简单的拖放操作，精心的筛选画面，然后添加一些效果、音乐和旁白，视频短片就可以初具规模。 Adobe Premiere Adobe Premiere 目前已经成为主流的视频编辑工具，它为高质量的视频提供了完整的解决方案，是一款专业非线性视频编辑软件。,