高中信息技术 第1章网页制作初识课件 粤教版选修3 课件.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,通过本章学习，应该掌握以下内容：,认识网页,构成网页的基本要素,制作网页的基本工具,美化网页的基本工具,网页制作的基本步骤,第,1,章 网页制作初识,1.1,一个校园网的制作示例,1.1.1,主要网页画面,1.1.2,网页的基本功能,1.2,网页的基本要素,1.2.1,文字,文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。,1,标题,一个网页通常都有一个标题，表明本网页的主要内容。标题是,醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是,很重要的。,2,字号,网页中的文字不能太大或太小。太大会使得一个网页信息量变，,太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹,规划，大小搭配适当，给人以生动活泼之感觉。,3,字型,在网页适当的位置采用不同的字体字型，也能使网页产生吸引,人的效果。应该注意的是在报刊上变换字体字型非常普遍，它可,以在不同的地方使用不同的字型。但在网页制作上却要慎重。因,为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你,的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就,无法得到你预想的浏览效果，甚至适得相反。,如果只是标题或少量的文字，可以将采用的特殊字体制作成图,形方式，就可避免其他浏览者看不到的尴尬局面了。,当文本内容较多时。可以利用表格形式来实现。,1.2.2,图形,这里的图形概念是广义的，它可以是普通的绘制图形，可以是,各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者,的文字形式和内容外，图形的表现功能是不能低估的。网页上的,图形格式一般使用,JPEG,和,GIF,，,这两种格式具有跨平台的特性，可,以在不同操作系统支持的浏览器上显示。图形在网页中通常有如,下应用。,1,菜单按钮,网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两,种形式，由此可以转入不同的页面。,2,背景图形,为了加强视觉效果，有些网页在整个网页的底层放置了图形，称,作背景图。背景图可以使网页更加华丽，使人感到界面友好。但,由于这是一个比较大的图形，需要占据较大的空间，致使网页的,显示速度明显变慢，所以，近期的网页以及比较著名的访问量比,较大网站一般都不设置背景图形。,1.2.3,链接标志,链接是网页中一种非常重要的功能，是网页中最重要、最根,本的元素之一。通过链接可以从一个网页转到另一个网页，也可,以从一个网站转到另一个网站。链接的标志有文字和图形两种。,制作一些精美的图形作为链接按钮，使它和整个网页融为一体。,1.2.4,交互功能,Internet,区别其他媒体的一个重要标志就是它的交互功能。,例如在商务网站的页面上，人们经过浏览，选择了某一个产品，,就需要将自己的决定通过,Internet,告诉这个网站，网站能够自动,对该产品的数据库进行检索，及时回应有还是没有，数量、规格、,价格等信息。如果用户选择确定，那么网站能够返回确认信息。,像这种交互功能其他媒体是无法比拟的。,通常网页的交互功能都是利用表单来实现的。表单是网页中,站点服务器处理的一组数据输入域，当访问者单击按钮或图形来,提交表单后，数据就会传送到服务器上。,1.3,网页制作和美化工具,1.3.1,网页制作工具,1,超文本标识语言（,HTML,）,HTML,（,Hypertext Markup Language,）,是一种专门用于,Web,页制,作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何,显示文本，怎样生成与别的文本或图像的链接点。,HTML,文档由文本、格式化代码和导向其他文档的超链接组成。,2,FrontPage,FrontPage,是由,Microsoft,公司推出的新一代,Web,网页制作工具。,FrontPage,使网页制作者能够更加方便、快捷地创建和发布网页，具,有直观的网页制作和管理方法，简化了大量工作。,FrontPage,界面与,Word,、,PowerPoint,等软件的界面极为相似，,为使用者带来了极大的方便，,Microsoft,公司将,FrontPage,封装入,Office,之中，成为,Office,家族的一员，使之功能更为强大。,3,Dreamweaver,Dreamweaver,是由,Macromedia,公司推出的一款在网页制作方面大,众化的软件，它具有可视化编辑界面，用户不必编写复杂的,HTML,源代,码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人,员的需要，同时也容易被业余网友们所掌握。另外，,Dreamweaver,的,网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也,能制作出相当于专业水准的网页，所以,Dreamweaver,是网页设计者的,首选工具。,Dreamweaver,支持动态,HTML,，,并采用了,Roundtrip HTML,技术，从,而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程,中，动态,HTML,技术能够让用户轻松设计复杂的交互式网页，产生动态,效果；而,Roundtrip HTML,技术则可以真正支持,HTML,源编辑模式，不,会产生冗余代码，使网页渲染速度加快。因此,，,Dreamweaver,是一种,可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。,1.3.2,网页美化工具,为了使制作的网页更为美观，用户在利用网页制作工具制作网,页时，还需利用网页美化 工具对网页进行美化。,1,Photoshop,Photoshop,是由,Adobe,公司开发的图形处理软件，它是目前公认,的,PC,机上最好的通用平面美术设计软件，它功能完善、性能稳定、,使用方便，所以在几乎所有的广告、出版、软件公司，,Photoshop,都是首选的平面制作工具。,2,Fireworks,Fireworks,是由,Macromedia,公司开发的图形处理工具，它的出,现使,Web,作图发生了革命性的变化。因为,Fireworks,是第一套专门为,制作网页图形而设计的软件，同时也是专业的网页图形设计及制作,的解决方案。,作为一款为网络设计而开发的图像处理软件，,Fireworks,还能,够自动切割图像、生成光 标动态感应的,JavaScript,程序等等，而,且,Fireworks,具有强大的动画功能和一个相当完美的 网络图像生,成器。,用户可以从,www.,站点下载该软件,。,3,Flash,Flash,是美国,Macromedia,公司开发的矢量图形编辑和动画创作的,专业软件，它是一种交互式动画设计工具，用它可以将音乐、声,效、动画以及富有新意的界面融合在一起，以制作出高品质的网,页动态效果。它主要应用于网页设计和多媒体创作等领域，功能,十分强大和独特，已成为交互式矢量动画的标准，在网上非常流,行。,Flash,广泛应用于网页动画制作、教学动画演示、网上购物、,在线游戏等的制作中。,1.4,网页制作的基本步骤,1.4.1,整体规划,进行网站的整体规划也就是组织网站的内容和设计其结构。网,页制作者在明确网页制作的目的及要包括的内容之后，接下来就,应该对网站进行规划，以确保文件内容条理清楚、结构合理，这,样不仅可以很好地体现设计者的意图，也将使网站可维护性与可,扩展性增强。,层状结构,层状结构（如图,1.8,所示）类似于目录系统的树型结构，由网站,文件的主页开始，依次划分为一级标题、二级标题等等，逐级细,化，直至提供给浏览者具体信息。,主 页,页面,1,页面,2,页面,3,页面,4,页面,5,页面,6,页面,7,一级标题,二级标题,图,1.8,层状结构,线性结构,线性结构（如图,1.9,所示）类似于数据结构中的线性表，用于,组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地,浏览整个网站文件。这种结构一般都用在意义是平行的页面上。,通常情况下，网站文件的结构是层状结构和线性结构相结合的,。这样可以充分利用两种结构各自的特点，使网站文件既具有条理,性、规范性，又可同时满足设计者和浏览者的要求。,主 页,页,面,1,页,面,2,页,面,3,图,1.9,线性结构,Web,结构,Web,结构（如图,1.10,所示）类似于,Internet,的组成结构，各网页,之间形成网状连接，允许用户随意浏览。,主 页,页面,1,页面,2,页面,3,页面,4,页面,5,页面,7,页面,8,一级标题,二级标题,图,1.10 Web,结构,页面,6,1,收集整理资料,2,准备素材,3,内容规划,1.4.2,网页设计与制作,1,静态网页的设计与制作,在开始制作网页之前，建议应用少量时间对自己要制作的主页,进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息,，其他网页如何设计，分几层来处理等等。,通常在进行网页开发时，首先都进行静态网页的制作，然后再,在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息,，而不具有任何交互功能的网页，它是,Web,网页的重要组成部分。,一个好的网站首先是内容丰富，其次就是网页设计美观。对于,网页的外观设计，提供以下建议：,（,1,）不要先决定网页的外观，然后迫使自己去适应它，应该根据,网站的访问者对象、要提供的信息以及制作目标得出一个最适合,的网页架构。,（,2,）每页排版不要太松散或用太大的字，尽量避免访问者浏览网,页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接,解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个,粗大的字或图片。,（,3,）切勿以,800600,以上的分辨率设计网页，常用的分辨率是,640480,及,800600,。现在国内的站点基本上都是,800600,，但,是如果主要是面向国外访问者的站点，建议使用,640480,。,（,4,）不应在每页中插入太多的广告。相信任何访问者都不会喜欢,浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太,多，只会令人烦厌。,（,5,）不要每页都采用不同的墙纸，以免每次转页时都要花费过多,的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，,以树立自己的风格。,（,6,）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要,求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主,题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，,不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地,阅读网页。,（,7,）不要把图片白色当作透明，要知道别人的系统不一定把内定,底色设为白色，解决的办法除了真的把该网页的底色设为白色之,外，最好还是用图片编辑工具将图片设为透明颜色。,2,为网页的添加动态效果,静态网页制作完成后，接下来的工作就是为网页添加动态效果，,包括一些脚本语言程序和数据库程序的设计，以及加入动画效果,等。,1.4.3,测试网页,当网页设计人员制作完所有网站页面之后，需要对所设计的网,页进行审查和测试，测试内容包括功能性测试和完整性测试两个方,面。,所谓功能性测试就是要保证网页的可用性，达到最初的内容组,织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的,内容。完整性测试就是保证页面内容显示正确，链接准确，无差错,无遗漏。,如果在测试过程中发现了错误，就要及时修改，在准确无误后,方可正式在,Internet,上发布。在进行功能性测试和完整性测试后，,有的还需要掌握整个站点的结构以备日后的修改。,1.4.4,网页上传发布,网页设计好，必须把它发布到互连网上，否则网站形象仍然不,能展现出去。发布的服务器可以是远程，也可以是本地，但必须支,持,ASP,，,因为动态程序是建立在,ASP,基础上的。,