网页制作概述课件.ppt

1、第一章网站制作概述目 录上一页下一页退 出2022-12-16第八章Internet基础21网站的定义网站：存放在网络服务器上的信息的集合体，它包含一个或多个网页，这些网页按照一定的组织结构、以链接等方式连接在一起，形成一个整体，描述一组完整的信息。在建立完整的网站之前首先必须先明确此网页设计的目标，并围绕着一目标搜集素材，确定所要设计的网站的类型，以及它所具有的特点和主要内容。目 录上一页下一页退 出2022-12-16第八章Internet基础32网站的分类在建立完整的网站之前首先必须先明确此网站的类型，以便准确的定位网页的设计。1.公司或单位的信息发布 如：公司、政府部门、教育及科研机构

2、等。主要用于树立企业形象，方便各单位之间的交流合作。http:/ 即电子报刊，例如新浪网、计算机世界、计算机报、电脑报等都在网上拥有自己的站点，方便读者在线阅读或订阅电子报刊。http:/ 录上一页下一页退 出2022-12-16第八章Internet基础42网站的分类3.个人主页 个人主页这类网站在近几年非常流行，很多站点都提供免费的个人主页存放服务。可以把个人简历、兴趣爱好等个人信息组成个人主页并发布到网上。http:/ 即为目前热门的电子商务。他可以大大缩短厂家、零售商、消费者之间的距离，最大程度的取缔中间商、降低销售及库存成本，其中代表性的网站有：戴尔网站（http:/www.D）AM

3、AZON网上书店（http:/www.AMAZON.com）目 录上一页下一页退 出2022-12-16第八章Internet基础52网站的分类5.专题网站 此类网站常常为某一专题设立，只适用于一个特定时期。如：“德国世界杯”站点http:/ 此类网站常由某些组织或个人收集的一类信息组成。如：Java源程序发布、网页设计素材、免费软件下载，免费mp3下载等等。此类网站在内容上分类详细，组织结构清晰。http:/ 录上一页下一页退 出2022-12-16第八章Internet基础63网站结构的规划规划：就是组织网站的内容和设计其结构。网页制作者在明确网页制作的目的及主要的内容后，接下来就应该对网

4、站进行规划，目的是确保内容条例清楚、结构合理，这样不仅可以提高可阅读能力，也能增强网站可维护性和可扩展性。目 录上一页下一页退 出2022-12-16第八章Internet基础73网站结构的规划组织网站的内容要从两个角度来考虑：1.设计者的角度 主要依据被描述对象的组织机构、类别划分等来组织。(http:/)(http:/)(http:/ 要将各种素材依据浏览者的需要进行内容分类，以便浏览者快捷的获取他所需要的信息内容。(http:/ 录上一页下一页退 出2022-12-16第八章Internet基础83网站结构的规划 组织网站时常用的结构：1.分级结构具有很强的层次性。目 录上一页下一页退

5、出2022-12-16第八章Internet基础93网站结构的规划2.线性结构 可以引导浏览者按部就班的浏览整个文件，通常用于平行意义上的页面。目 录上一页下一页退 出2022-12-16第八章Internet基础103网站结构的规划线性和分级结构混合（通常网站文件使用的结构）网站文件既具有条理性、规范性，又可以同时满足设计者和浏览者的要求。目 录上一页下一页退 出2022-12-16第八章Internet基础113网站结构的规划3.Web结构 类似互联网的结构，用户可以随意浏览。目 录上一页下一页退 出2022-12-16第八章Internet基础124网站的设计原则及标准建议的网站设计原则

6、及标准：1.包含的内容 一个网站最吸引人的第一位永远都是内容，设计是其次。对于专业性的网站（如企业、部门等），网站的内容是由企业提出的需求所定，无需作太多考虑。如：中国工商银行网站(http:/ 录上一页下一页退 出2022-12-16第八章Internet基础134网站的设计原则及标准建议的网站设计原则及标准：2.如何构思 在制作网站之前，先拟议份详细的草稿是必不可少的。分如下三部分：1）内容：记录下希望放在网页上的内容，准备好相关的材料（文件、图片等等）。2）网站结构：好比程序设计中的E-R图，不妨在一张白纸上把你所构思的网站结构画出来，这样在制作时就能做到心中有框架、手中有实物。为了日后

7、的管理，在制作网页之前，最好把收集的文件分门别类，并存放到一个大的文件夹的不同子文件夹中，如把图像放到images目录中。但是请注意不要分的过细，避免日后工作中过于繁琐，更加不便。目 录上一页下一页退 出2022-12-16第八章Internet基础144网站的设计原则及标准 3）版面设计：不要试着用电脑来做草图，也不要认为自己的脑袋足够用。根据我个人的经验，一张白纸、一只铅笔才是最好的工具，你可以随心所欲的修改，充分发挥你的想象力。3.什么是好的设计？独特的设计理念是好的，但是需要注意，越是独特就越少有人能欣赏。此外，切忌不要在网页内狂加特效，如波纹、礼花等，除非你非常难以割舍，否则还是少用

8、为好。http:/ 录上一页下一页退 出2022-12-16第八章Internet基础154网站的设计原则及标准4.慎用图像 首先，要考虑图像的大小。背景的图像切忌不可使用太大的图像，要考虑下载速度等因素；其次不要改变图像的大小。其次，要考虑图像与文字的匹配，尤其是背景图片如果过于复杂或色彩鲜明，很容易喧宾夺主，让文字变得不清楚，背景应与文字有较强的反差，如深底白字，白底深字。如果背景图像的图案较为复杂，要使用Fireworks和PhotoShop等工具更改其明亮度和对比度。目 录上一页下一页退 出2022-12-16第八章Internet基础164网站的设计原则及标准5.主页的设计 主页（h

9、omepage）作为整个网站的首页，具有相当重要的作用。首先，主业要能够体现网站的总体概念，使浏览者对网站的总体风格和内容一目了然，并提供主要的链接以便用户快速的进入相关页面中去。其次，主页设计要力求布局合理、美观大方、有较多的内容，又不失活泼。目 录上一页下一页退 出2022-12-16第八章Internet基础175网站的外观设计 网站设计表面上看，不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。网页设计同报刊杂志等平面媒体的版式设计有很多共同之处。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。所谓网页设计，是在有限的

10、屏幕空间上将各种网页元素，主要包括：文本、图像、表格、颜色、音乐、动态影像等进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。目 录上一页下一页退 出2022-12-16第八章Internet基础185网站的外观设计 一个好的网站首先是内容的丰富，其次就是外观的设计。它要求设计者必须掌握以下三个主要原则：1.1.主题鲜明，富有特色主题鲜明，富有特色 网页设计表达的是一定的意图和要求，有明确的主题。网页设计不但要单纯、简练、清晰和精确，而且应该通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好

11、地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物。要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到。目 录上一页下一页退 出2022-12-16第八章Internet基础195网站的外观设计2.2.形式内容和谐统一形式内容和谐

12、统一 任何设计都有一定的内容和形式。内容是是设计存在的基础；形式是内容的外部表现方式。一方面，网页设计所追求的形式美，必须适合主题的需要。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。3.3.色彩和谐，重点突出，强调整体色彩和谐，重点突出，强调整体 网页设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。

13、目 录上一页下一页退 出2022-12-16第八章Internet基础206网站外观设计时要考虑的细节1.要根据网站的性质，访问者的类型来决定网页的外观；2.要充分利用网页的上部空间，这是整个网页中最显眼最有价值的部位，不要只是几个文字或一幅图片。3.考虑好分辨率的问题，通常是800*640，现在也有使用1024*800。但总体原则是充分考虑使用者的显示水平。4.使用统一风格的字体（通常使用的字体是9磅的宋体）5.不同页面尽量采用相同或相近的风格，不要每个页面都采用不同的背景壁纸，采用相同的底色还可以提高速度，增强一致性，方便建立自己的风格。目 录上一页下一页退 出2022-12-16第八章I

14、nternet基础216网站外观设计时要考虑的细节6.背景或壁纸要跟文字形成反差，但并不是要求永远用鲜亮的背景搭配深色文字，如果网页中包含大量的文字，不妨多参考一些网页的设计风格，以确定自己搭配的方式。最终目标是阅读舒适。7.少使用广告，少添加闪烁或晃动等效果。8.注意透明和白色的区别，在必要时要设“定”好颜色，以免不同操作系统的设置不同可能引起的大空底或断层，必要时要事先设置好图片的透明等效果。目 录上一页下一页退 出2022-12-16第八章Internet基础227网页制作工具概述在WWW出现初期，人们制作网页都是在文本编辑器中（如：记事本）使用HTML语言来编写，这需要有一定的编程基础

15、。近年来，出现了FrontPage、Dreamweaver等所见即所得的工具，方便快捷。如果需要制作交互方式的网站或特殊的效果，还需要使用JavaScript、Java、ASP、JSP、ASP.NET、PHP等来完成。1.ASP(Active Server Page)是由Microsoft公司开发的用于制作动态Web网页的技术。其核心是在HTML中嵌入部分代码，如VBScript，在页面运行时，服务器执行这些代码并把执行结果返回给浏览器的页面。采用微软IIS服务目 录上一页下一页退 出2022-12-16第八章Internet基础237网页制作工具概述2.JAVA 是由SUN公司开发的编程语言

16、，此语言产生的代码与工作平台无关，具有极好的移植性。在HTML中嵌入JAVA程序以实现动态效果和交互，是近年来WEB开发的主流。3.JSP(Java Servlet Page)Java Servlet是一组运行在Web服务器上的Java程序。而JSP是SUN公司近年推出的基于Java Servlet和整个Java体系的Web开发技术，具有公共、原码开放等优势。Java和JSP已经成为目前开发跨平台、大型网站的主要工具。多采用基于UNIX操作系统的Web服务器，如NISA、Apache等。目 录上一页下一页退 出2022-12-16第八章Internet基础24网页制作工具FrontPage 2000目 录上一页下一页退 出2022-12-16第八章Internet基础25网页制作工具 Dreamweaver MX目 录上一页下一页退 出2022-12-16第八章Internet基础26网页美化工具Photoshop 网页美化工具Fireworks动画制作工具Flash