《网页设计与制作》教材电子稿

1访问互联网网站互联网是人类社会有史以来第一个世界性的图书馆和第一个全球性论坛。任何人，无论来自世界的任何地方，在任何时候都可以参加。世界各地数以万计的人们都可以利用互联网，进行信息交流和资源共享。本项目通过实施“浏览新闻网页”工作任务，熟悉互联网的最基本应用之一：万维网知识，加深对互联网网页和网站的知识了解。任务一：访问新浪网络任务描述把分布在全世界的计算机连接在一起，就可以形成可以共享的全球网络系统，这种网络也叫做互联网（Internet），通过互联网，可以共享全世界各大大小小网络中资源。其中万维网是互联网中一种应用，使用浏览器软件，通过网页方式，把网络中文字、图片、影像等多媒体信息呈现在电脑窗口中。本项目主要访问全球最大的中文网站新浪（Sina），熟悉万维网的应用，享受网络冲浪。知识准备1、什么是互联网互联网是一个由各种不同类型和规模、独立运行和管理的计算机网络，组成的世界范围的巨大计算机网络：全球性计算机网络，它的英文名字叫Internet。组成互联网的计算机网络包括小规模的局域网（LAN）、城市规模的区域网（MAN）以及大规模的广域网（WAN）等等。这些网络通过普通电话线、高速率专用线路、卫星、微波和光缆等线路，把不同国家的大学、公司、科研部门以及军事和政府等组织的网络连接起来，发展为一个全球性的计算机互联网络。通俗地说，成千上万台计算机连接到一起，组成一个全球性网络系统就是Internet。从通讯角度来看，Internet是一个理想信息交流媒介：利用Internet的E-mail能够快捷、安全、高效地传递文字、声音、图象以及各种各样的信息；通过Internet可以打国际长途电话，甚至传送国际可视电话，召开在线视频会议；从获得信息的角度来看，Internet是一个庞大的信息资源库：遍布全球的几万家图书馆，近万种杂志2和期刊，还有政府、学校和公司企业等机构的详细信息。2、浏览器IEInternetExplorer是使用最广泛的网页浏览工具，InternetExplorer，简称IE，是微软公司推出的一款网页浏览器。IE是计算机网络使用时重要工具之一。互联网上网浏览网页内容离不开浏览器，现在大多数用户使用的是微软公司提供的IE浏览器（InternetExplorer），当然还有其他一些浏览器如NetscapeNavigator、Mosaic等，国内厂商开发的浏览器有腾讯浏览器、360浏览器等。浏览器是一个软件程序，用于与万维网（WWW）建立连接，并与之进行通信。它可以在WWW系统中根据链接确定信息资源的位置，并将用户感兴趣的信息资源取回来，对HTML文件进行解释，然后将文字图像或者将多媒体信息还原出来。3、万维网WWWWWW是WorldWideWeb（环球信息网）缩写，也可简称为Web，中文名字为“万维网”。1989年CERN(欧洲粒子物理实验室)的研究人员为了研究的需要，希望能开发出一种共享资源的远程访问系统，这种系统能够提供统一的接口来访问各种不同类型的信息，包括文字、图像、音频、视频信息。1990年开发人员完成了最早期的浏览器产品，1991年开始在内部发行WWW，这就是万维网的开始。环球信息网之所以称之为信息网，完全是因为它的资源可以互相连接的缘故，全世界目前大概有数亿个Web站。每个Web站都可以通过超链结与其它Web站连接，任何人都可以设计自己网页，放上WWW网站上，然后通过上面超级链接，与其他人网页连接。整个信息网就这样编织起来，形成一个巨大环球信息网。4、网页超级链接浏览万维网（WWW）网页时，通过点击网页内的某段文字或图片，在另一个页面看到相关的详细内容。这就是超级链接，它由网页上的文字、图片、动画等元素，赋予了可以连接到其它网页的URL地址而形成，让网页之间形成一种互相关联的关系。万维网网站正是因为有大量的超级链接，才形成一个内容详实丰富的立体结构。任务实施访问新浪网络1、任务目标3使用微软的IE浏览器，访问新浪网络(www.sina.com.cn)中新闻。2、任务准备准备一间可以接入互联网的多媒体机房。3、实施过程步骤一：在桌面上打开微软的IE浏览器图标，打开浏览器窗口，如图1-1所示。图1-1步骤二：在打开IE浏览器地址栏中，输入新浪网络的网络地址：www.sina.com.cn，按回车键后，显示如图1-2所示新浪网络的主界面，即可浏览新浪网络提供的新闻信息。6-2-2访问新浪网络步骤三：在打开的新浪页上，选择感兴趣的内容，打开超级链接，阅读新闻信息。4网页设计之前，开始了解网页什么是网页？“上网”是怎么一回事？简单地说，上网就是浏览网页。那么网页在哪里里？答案：网页位于Web服务器上。一个网页就是一个扩展名为html(或htm)的文件。这些文件存放在Web服务器上，用户通过浏览器软件向Web服务器发出网页请求，Web服务器收到请求后，就将所请求的网页发送给用户，并通过本地电脑上的浏览器软件将网页呈现给用户。一个网站可能包含几十甚至几百个HTML文件，上网的过程，其实就是打开不同HTML文档的过程。一个典型的网页文件的内容如图所示：制作网页难不难？我能学会吗？人们常常以为制作一个网站很难，但其实并非如此！人人都能学会如何制作网站。而且，假如你继续阅读本教程的话，你将能在一小时内制成一个网站。5有些人觉得制作网站需要昂贵的、高级的工具——当然这是错误的。的确有许多软件声称它们可以为你创建网站，它们有的比较好用，有的就差些。但如果你要制作符合W3C规范并令你满意的网页的话，你必须自己动手做。好在这不难，而且你已具备所需的全部软件了。本教程的目的就是：通过简单、全面和正确的介绍，教会你如何创建网站。本教程将从基础讲起，不要求你具备任何编程知识。当然，本教程无法遍及所有知识，所以你要自己多做实验。不过别担心，学习制作网站是件充满乐趣的事，而且一旦掌握它，你便会感到无比满足。你可以自由选择如何使用本教程，但我们建议你每天学习2到3课，然后花点时间来实验你所学到的新知识。好的，不多说，我们现在就开始吧！第1课：开始学习在这第一课中，我们简要介绍制作网站所需的工具。6需要哪些工具？十之八九，你已经拥有所需的全部工具了。“浏览器（Browser）”你有了，它是用于浏览网站的软件，现在所有的Windows版本都包含有IE（InternerExplorer）软件，当然你也可以用其它的浏览器，如：Firefox、Opera、Chrome等。S也许你听说过、甚至用过一些网页制作工具，比如MicrosoftFrontPage、MacromediaDreamweaver、MicrosoftWord等。那么，请你暂时忘掉这些工具，它们对你理解网页制作并没有什么帮助。相反，你需要的是一个简易的文本编辑器，如：用Windows中的记事本（Notepad）程序。使用“记事本”程序足以完成网页制作。你可以依次点击“开始菜单→程序→附件”找到该程序。使用FrontPage、Dreamweaver等网页制作软件，可以使你在短时间内制作出比较像样的网页，但你只是“知其然而不知其所以然”。只有了解并熟悉了网页制作相关的很多基本概念之后，你才能更好地使用像Dreamweaver这样一些专业的网页制作软件。使用“记事本”来编写网页，是熟悉网页制作基本概念的一个最好的途径。记事本是一个非常简单的文本编辑程序，用它编写程序非常好，因为它不会干涉你所输入的任何内容，给予你完全的控制权。而许多网页制作工具的问题在于，它们提供了许多标准功能供你选择。这样的缺点是，你只能按照这些标准功能来制作网页。所以，这类工具常常不能创建正合你意的网页。或者，更令人讨厌的是，它们会修改你手工编写的代码。而使用记事本（Notepad）或其他简易文本编辑器的话，全部代码均由你自己编写。浏览器和记事本程序（或类似的简易文本编辑器）便是你所需的全部工具，有了它们，你就可以完成本教程，并制作自己的网站了。我需要连上因特网么？你无需连上因特网（Internet），制作网站可以离线完成，待网站制作完毕后再上传到Web服务器。接下来学习什么？7下一课将介绍HTML是什么，然后从第三课开始学习有趣的HTML。第2课：HTML是什么？这一课将为你简要介绍你的新朋友——HTML。HTML是什么？HTML是一种语言，所有浏览器都能识别这种语言长话短说。HTML（HypertextMarkupLanguage）是由一名叫TimBerners-Lee的科学家发明的。他发明HTML的目的，是为了方便不同大学的科学家们可以更容易地获取彼此的研究文档。今天，HTML取得了的巨大成功，大大超出了TimBerners-Lee原本的预计。通过发明HTML，他为我们今天所认识的万维网奠定了基础。HTML是一门语言，它令我们可以在因特网上展示信息（例如科学研究信息）。你所看到的网页，是浏览器对HTML进行解释的结果。要查看一个网页的HTML代码，只需在浏览器菜单栏上点击“查看”，然后选择“源文件”即可。8对于新手来说，HTML代码看似很复杂，不过本教程将帮助你弄清楚它们的含义。HTML能用来做什么？如果你要制作网站的话，学习HTML是不可避免的。即使你用Dreamweaver等工具来制作网站，了解基本的HTML知识也会令你在网站制作过程中倍感轻松，并有利于制作出更好的网站。好在HTML容易被学会和使用。通过下面两课的学习，你将学会如何制作自己的第一个网站。HTML是用来制作网站的一种语言。就这么简单！第3课：标签与标签现在你要学习的是HTML的重要成分——标签（tag）。“标签”是什么？9标签（tag）指示标签的起始与结束。标签由首标签（starttag）、内容（content）和尾标签（endtag）构成。所有标签都具有相同的格式：以小于号“”开头，以大于号“”结尾。一般说来，有两种标签——首标签（starttag）和尾标签（endtag）,它们唯一的区别在于，尾标签多一条斜杠“/。如：html与/html、body与/body首标签和尾标签一般总是成对出现，标签之间的是所要呈现在浏览器中的内容。标签的作用是告诉浏览器如何呈现内容，它本身并不会显示在浏览器中。标签可以嵌套，而且多数情况下是嵌套的。一个网页会用到很多各种各样的标签，所以，学习HTML，其实就是学习如何使用这些标签。可以再举些例子么？没问题。比如，b标签的作用是，告诉浏览器介于标签b和/b之间的文本应以粗体显示。（这里的“b”是“粗体（bold）”的意思。）10例1：b这句话应显示为粗体。/b该例在浏览器中将显示如下：这句话应显示为粗体。h1、h2、h3、h4、h5及h6标签的作用是显示标题（这里的h是“标题（heading）”的意思）。其中h1是一级标题，字体最大；h2是二级标题，字体比一级标题略小；而h6是六级标题，它是最后一级标题，字体也最小。例2：h1这是标题/h1h2这是子标题/h2该例在浏览器中将显示如下：11首标签和尾标签总是必须的吗？常言道，凡事均有例外。在HTML中，也有例外的情况，即有些标签没有尾标签。这些没有尾标签的标签被称作空标签（emptyelement），它们与具体文本内容无关，比如像下面这个换行标签：br/。标签中的字母应该大写还是小写？大多数浏览器不介意标签是大写还是小写，或者混合大小写。所以HTML、html或HtMl在浏览器上的显示效果都一样。但是，正确的写法是采用小写字母来书写标签。所以，要养成用小写字母书写标签的习惯。这一课就到这里。如果花10分钟时间继续学习下一课的话，你将能够制作自己的第一个网站。第4课：制作自己的第一个网站有了从前面几课的基础，现在只需再花几分钟时间，你就能学会如何制作自己的第一个网站了。如何做呢？通过第一课，我们知道制作一个网页需要有浏览器和记事本程序（或者类似的文本编辑器）。既然你现在已经在用浏览器阅读本教程了，那么请再打开一个窗口——这样你就可以一边阅读本教程，一边欣赏你的新网页了。另外，请打开记事本