搜索
通过本章学习，应该掌握以下内容：1.Web基础知识2.构成网页的基本要素3.制作网页的基本工具4.美化网页的基本工具5.网页制作的基本步骤第1章网页制作初识1.1Web概述1.1.1Web的起源和发展Web是（WorldWideWeb）的简称，中文译名为“万维网”。它是建立在客户机/服务器模式之上，以HTML语言和HTTP协议为基础，能够提供面向各种Internet服务的用户界面的信息浏览系统。1.1.2Web的特点Web是建立在Internet上的交互的、动态的、多平台的信息服务系统。它具有以下几个主要特点：1．WEb是一种超文本信息系统2．Web能提供图形界面，且易于操作3．Web不受操作平台的限制4．Web昏分布式的5．Web是交互式的6．Web是动态的1.1.3URL统一资源定位器（URL，UniformResourceLocator）是用来确定各种信息资源为置的，它是Internet上信息所在位置的地址，俗称“网址”。一个完整的URL包括网络信息资源类型/协议、服务器地址、端口号、路径及文件名。其格式为：协议://主机.域名:端口/路径/文件名如：ttp://；URL被“://”分隔成两部分。左边表示检索信息的方法，即协议，如超文本传输协议http、文件传输协议ftp等。右边的“主机.域名”为服务器网址，1.1.4IE6简介通常可以通过以下几种方式：（1）双击Windows桌面上的InternetExplorer图标。（2）单击操作系统任务栏中的“开始”按钮，将鼠标移至开始“菜单”中的“程序”选项，然后单击出现在下一级菜单中的“InternetExplorer”项。（3）单击Windows操作系统任务栏中“启动InternetExplorer浏览器”的快捷按钮。（4）打开“Windows资源管理器”，然后在“Windows资源管理器”中双击“InternetExplorer”图标。1．IE浏览器的启动标题栏菜单栏工具栏地址栏链接栏页面显示区状态栏图1-2IE6浏览器窗口（1）标题栏最上面一栏是标题栏，显示软件包名和当前访问的地址的相关信息（2）菜单栏显示第一级菜单命令，包括文件、编辑、查看、收藏、工具和帮助，利用这些命令，可以完成InternetExplorer中几乎所有的操作。（3）InternetExplorer图标位于菜单行的右侧，显示当前的连接状态，若浏览器正在连接某个站点，则图标处于活动状态，旋转显示；若连接完毕或连接失败，则图标处于停止状态，静止显示。2．IE6浏览器窗口简介（4）工具栏工具栏位于菜单栏下方，是为了加快操作而设置的。工具栏包含一系列命令按钮，每个命令按钮代表一个命令。（5）URL地址栏显示当前访问Web页的URL地址，可以在此输入要访问的Web页的URL地址，单击回车确定。也可单击URL栏右侧的小箭头，在弹出的列表中选择需要的URL地址。（6）链接栏位于地址栏右侧，用来快速访问Microsoft推荐的站点。（7）页面显示区“URL”栏下面的显示区，它显示所访问的Web页的内容。（8）状态栏位于窗口的底部，显示了Internet出Explorer当前的活动状态。左面的部分显示软件的工作状态，如命令提示、连机下载、主页中带有连接特性对象的链接地址等工作状态。与之相邻的部分显示传输进程。（1）输入网址直接在地址栏中输入欲浏览网页（网站）的地址，然后按回车键，即可开始Internet之旅。此外，也可以通过执行“文件”菜单中的“打开”命令来输入网址。单击地址栏右侧的三角形按钮，浏览以前曾经访问过的网址列表，可以从中选择欲浏览的网站。具体方法是，单击三角形按钮，将鼠标移动到欲访问网址，单击之。3．InternetExplorer基本操作（2）前进和后退单击工具栏中的“后退”按钮，可以退到上一个网页；单击“后退”右侧的三角形按钮，将出现一个下拉列表，其中罗列了曾经访问过的网页，可以从列表中直接选择一个，将网页调入浏览器。单击工具栏的“前进”按钮可以前进一个网页；单击“前进”右侧的三角形按钮，将出现一个下拉列表，其中列出了浏览历史中位于当前网页之后的网页，可以从列表中直接选择一个，将网页调入浏览器。（3）停止和刷新网页单击工具栏中的“停止”按钮，可以停止当前正在进行的操作，切断本地计算机与网站服务器之间的连接。由于某些原因，使得网页不能正常显示，此时可以单击工具栏中的“刷新”按钮，使浏览器重新载入并显示当前网页。（4）全屏浏览网页IE提供了全屏幕显示方式。选择“查看”|“全屏显示”命令，或按功能键F11，即可切换到全屏幕页面显示状态。再次按F11键，关闭全屏幕显示，恢复原来的浏览器窗口。（5）开启多个浏览窗口在已经启动了浏览器并正在下载一个网页时，选择“文件”|“新建”|“窗口”命令，即可打开一个新的浏览器窗口，该窗口的地址栏将被自动填入先前存在于浏览器地址栏中的网页地址。（6）使用历史纪录IE将用户最近访问过的网页地址保存在“历史纪录”中，当用户想再次访问这些网页时，只需从历史纪录中选取该网页即可。单击工具栏中的“历史”按钮，网页显示区将显示两个窗口，左窗口列出按日期组织的指定天数内访问过的网页地址，右窗口显示当前网页。（7）使用收藏夹当看到一个喜欢的网页时，可以把它的地址保存在IE的收藏夹中，以后只需在收藏夹列表中选择该网页地址就可以再次访问它。（8）保存网页或网页内容如果浏览到有价值的网页，或是包含漂亮的插图、背景、动画的网页，可以及时将这些内容保存到自己计算机的硬盘上，以便以后能脱机浏览，或是将图像用于自己的网页。1.2网页的基本要素1.2.1文字文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等。1．标题一个网页通常都有一个标题，表明本网页的主要内容。标题是否醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。网页中的文字不能太大或太小。太大会使得一个网页信息量变小，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。2．字号在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果。应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不同的字型。但在网页制作上却要慎重。因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就无法得到你预想的浏览效果，甚至适得相反。如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。3．字型1.2.2图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用：1．菜单按钮网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。2．背景图形为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。背景图可以使网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。1.2.3链接标志网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。1.2.4交互功能Internet区别其他媒体的一个重要标志就是它的交互功能。网页的交互功能其他媒体是无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。1.2.5声音和视频声音是多媒体网页的一个重要组成部分。目前存在一些不同类型的声音文件，也有不同的方法将这些声音添加到网页中。在决定添加声音之前，需要考虑声音的用途、文件大小、声音品质和浏览器差别等因素。不同浏览器对于声音文件的处理方法不同，彼此之间很可能不兼容。采用视频文件可以使网页变得精彩而又生动。1.3网页制作和美化工具HTML（HypertextMarkupLanguage）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML文档由文本、格式化代码和导向其他文档的超链接组成。1.3.1网页制作工具1．超文本标识语言（HTML）FrontPage是由Microsoft公司推出的新一代Web网页制作工具。FrontPage使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量工作。FrontPage界面与Word、PowerPoint等软件的界面极为相似，为使用者带来了极大的方便，Microsoft公司将FrontPage封装入Office之中，成为Office家族的一员，使之功能更为强大。2．FrontPageDreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。Dreamweaver支持动态HTML，并采用了RoundtripHTML技术，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。3．DreamweaverPhotoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面制作工具。1.3.2网页美化工具1．PhotoshopFireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一个图像处理软件，Fireworks能够自由地导入多种格式的图像进行处理。Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。2．FireworksFlash是美国Macromedia公司开发的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。3．Flash1.4网页制作的基本步骤网站定位要小，内容要精。如果要制作一个包罗万象的站点，把所有精彩的东西都放在上面，结果往往会事与愿违，给人的感觉是没有主题，没有特色，样样有，却样样都很肤浅。网站的题材最好选自己擅长或者喜爱的内容。兴趣是制作网站的动力，没有热情，很难设计制作出优秀的网站。1.4.1网站定位进行网站的整体规划也就是