简单网页制作.docx

1、简单网页制作简单网页制作第一章 网页制作概论1.1 Internet与网页我们经常在网络上通过输入网址浏览各种网页，那么究竟什么是网页呢？网页实际是一个文件，它存放在世界某个角落的某一台计算机中，而这台计算机必须是与互联网相连的。网页经由网址（URL）来识别与存取，当我们在浏览器输入网址后，经过一段复杂而又快速的程序（详见“域名系统”），网页文件会被传送到你的计算机，然后再通过浏览器解释网页的内容，并最终展示到你的眼前。1.2 网页的基本要素文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容，图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等

2、。如果想了解更多的话，请参考“商业建站指南”的“网站的要素”。文字文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，因此，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可以利用浏览器中“文件”菜单下的“另存为”功能将其下载，便于以后长期阅读，也可对其进行编辑打印。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。所以，文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等等。1标题一个网页通常都有一个标题，表明本网页的主要内容。标题是醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。

3、2字号网页中的文字不能太大或太小。太大会使得一个网页信息量变，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。3字型在网页适当的位置采用不同的字体字型，也能使网页产生吸引人的效果。应该注意的是在报刊上变换字体字型非常普遍，它可以在不同的地方使用不同的字型。但在网页制作上却要慎重。因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就无法得到你预想的浏览效果，甚至适得相反。如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。当文本内容较多时

4、。可以利用表格形式来实现。 图形这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用。1菜单按钮网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。2背景图形为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。背景图可以使网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的

5、显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。链接标志链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。交互功能Internet区别其他媒体的一个重要标志就是它的交互功能。例如在商务网站的页面上，人们经过浏览，选择了某一个产品，就需要将自己的决定通过Internet告诉这个网站，网站能够自动对该产品的数据库进行检索，及时回应有还是没有，数量、规格、价格等信息。如果用户选择确定，那么网站能

6、够返回确认信息。像这种交互功能其他媒体是无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。1.3 网页设计的原则网页是网站的基本信息单位，是WWW的基本文档。网页是由文字、图片、动画和声音等多种媒体信息以链接组成的。网页即是设计者综合素质的体现，也是制作者使用网页设计软件水平高低的体现。要是网页看上去漂亮、舒适，除了有好的理念外，还离不开美术、色彩和审美等方面的基础知识，并要遵循一系列必要的原则。在网页设计制作的过程中，需要遵循的艺术原则主要有：对比原则：两事物的相对比较称为对比。通过对比

7、，双方各自得特征更加鲜明，使画面更富有效果和表现力。对于界面设计而言，通过对比可以在界面中形成趣味中心，或者使主体从背景中突显出来。常用的对比方法有以下8种：大小的对比、明暗的对比、粗细的对比、曲线与直线的对比、水平线与垂直线、质感的对比、位置的对比、多重对比。协调原则：协调原则是相对于对比原则而言的。所谓协调，就是将界面上的各种元素之间的关系进行统一处理，合理搭配，使之构成和谐统一的整体。对于艺术，协调被认为是使人愉快和舒心的要素之一。协调包括同一界面中各种元素的协调，也包括不同界面之间各种元素的协调。协调主要体现在4个方面：主与从、动与静、入与出、统一与协调。平衡原则：界面是否平衡是非常重

8、要的，例如在一个介绍电脑的界面上，将一台电脑放在界面的左边，看起来似乎要倒向右边；但在界面的右边设计这安排了粗体的标题和文字，恰好起到了支撑作用。趣味原则：在界面中注意“趣味性”可以“寓用于乐”。除了运用形象、直观、生动的图形优化界面来提高趣味性以外，还可以利用比例、强调、变化率、规律感等方法提高趣味性。静态网页的设计与制作的几点建议：1.在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。2.通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地

9、发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分。3.一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。（3）切勿以800600以上的分辨率设计网页，常用的分辨率是640480及800600。现在国内的站点基本上都是800600，但是如

10、果主要是面向国外访问者的站点，建议使用640480。（4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。（6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较多的顾虑，如果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。（7）不要把图片白色当作透明，要知道别人的系统不

11、一定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。第二章 Dreamweaver简介2.1 HTML简史HTML的英文全称是Hyper text Markup Language，直译就是超文本标记语言，它由W3C组织商讨制定。HTML是一种专门用于描述Web页文档结构的标记语言，用于描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。HTML与操作系统平台的选择无关，只要有Web浏览器就可以运行HTML文件，显示网页内容。HTML文档由文本、格式化代码和导向其他文档的超链接组成。通过浏览器看到的网站都

12、是由HTML构成的，HTML文件可以用记事本、写字板等编辑工具来编写，用HTML编写的文件的扩展名为.html或.htm，它们是能够被浏览器解释现实的文件格式。HTML由标记（Tag）组成，通过标记来确定网页的结构和内容。下面是一个典型的HTML文件，它的扩展名为 .htm（或.html）： 你好，万维网！ 你好，万维网！ 像HTML文件中的、和就是标记，它们通常写在尖括号“”内。除了标记，在HTML中还常常引用脚本语言(Scripting Language)，如JavaScript和VBScript。使用脚本语言，可以制作出网页特效和一些简单的动态效果。制作网页实际上就是编辑HTML文件。H

13、TML语法简单、功能强大，但是想要快速编写漂亮的页面往往还需要借助成熟的网页制作工具的支持。随着HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（即原始代码编辑器），两者各有千秋。所见即所得网页编辑器的优点就是直观性，使用方便，容易上手，在所见即所得网页编辑器进行网页制作和在Word中进行文本编辑不会感到有什么区别，但它同时也存在难以精确达到与浏览器完全一致的显示效果的缺点。也就是说在所见即所得网页编辑器中制作的网页放在浏览器中很难完全达到真正想要的效果，这一点在结构复杂一些的网页（如分帧图像、动态网页结构及精确

14、定位）中便可以体现出来。非所见即所得的网页编辑器的工作效率一般较低。常见的Dreamweaver、FrontPage、Go Live、HomeSite都是所见即所得的网页编辑工具，而Word、Notepad、UltraEdit等文本编辑工具都可作为非所见即所得的网页编辑器。2.2 FrontPage简介FrontPage是由Microsoft公司推出的新一代Web网页制作工具，也是当前广为流行的网页设计工具之一。它的特点是具有直观的网页制作和管理方法，简化了大量工作。FrontPage是一个所见即所得的网站编辑器，它具备用户所需要的创建和导航WWW站点的全部内容，即使没有多少编程经验，一点HT

15、ML语言都不会，也能够很容易地开发出属于自己的Web页，制作出比较出色的网页。FrontPage也有不足之处，首先是浏览器兼容性不好，做出来的网页用Netscape Navigator浏览器浏览往往不能正常显示；其次，生成的垃圾代码多，并会自动修改代码，以致在某些情况喜极为不方便；再次，对DHTML的支持也不太好。但随着这几年的版本升级，FrontPage经历了FrontPage 98、FrontPage 2000、FrontPage 2002到现在的FrontPage 2003版本，不足之处得到了不断的完善。因此，FrontPage的确是最好的入门级网页编辑工具。2.3 Dreamweave

16、r的特点和优势Dreamweaver是由Macromedia公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。另外，Dreamweaver的网页动态效果与网页排版功能都比一般的软件好用，即使是初学者也能制作出相当于专业水准的网页。Dreamweaver与Flash、Firework并称为Macromedia公司的网页制作“三剑客”，由于是同一公司的产品，因而在功能上有着非常紧密的结合。最新推出的Dreamweaver UltraDev已支持ASP、JS

17、P，因此Dreamweaver是网页设计者的首选工具，到目前为止，全世界范围超过60%的专业网页设计师都在使用Dreamweaver。Dreamweaver支持动态HTML，并采用了Roundtrip HTML技术，从而奠定了在网页高级设计功能方面的领先地位。在进行网页设计过程中，动态HTML技术能够让用户轻松设计复杂的交互式网页，产生动态效果；而Roundtrip HTML技术则可以真正支持HTML源编辑模式，不会产生冗余代码，使网页渲染速度加快。因此，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。与其他网页制作工具相比，Dreamweaver具有

18、以下优势：1)Dreamweaver新版本加强了对简体中文的支持，不会出现不兼容中文的现象。2)使用Dreamweaver，可以在可视化界面中制作出ASP、NET、JSP、PHP等站点。3)Dreamweaver自带了大量模版，大大简化了制作网站的过程。4)由于支持数量众多的第三方插件，大大增强了Dreamweaver的功能。5)通过配置Dreamweaver生成符合XHTML的代码，可以确保用最新的HTML设计标准即使更新站点。2.3.1 Dreamweaver MX 2004概述2004年Macromedia公司推出了Dreamweaver的最新版本Dreamweaver MX 2004，

19、图2-1为Dreamweaver MX 2004 的启动界面。图2-1 Dreamweaver启动界面Dreamweaver MX 2004包含有一个崭新、简洁、高效的界面，新增了许多功能，性能也得到了改进，并改善了软件的易用性。主要体现在以下几个方面：1)将世界一流水平的“设计”和“代码”编辑器合二为一在设计窗口中，涉及和开发界面更加高效、更易于使用，可使用户的工作效率和工作质量均得到提高。2)动态跨浏览器有效性检查，保存文档时自动检查当前文档的跨浏览器有效性（兼容）问题。3)运用完整的集成开发环境来开发HTML、XHTML、XML、ASP、NET、JSP和PHP等站点。通过Macromed

20、ia插件中心可以获取超过800个免费插件来订制和扩展开发环境。4)增加了FTP安全保障，是所有传输的文件完全加密，并组织越权存取信息、文件内容、用户名和口令。5)外部文档/代码的无缝结合，从Microsoft Word和Microsoft Excel直接复制、粘贴到Dreamweaver中同时保存字体、颜色和CSS样式。6)增强了与其他软件产品的结合能力，包括Flash、Firework及其他Macromedia Studio MX 2004设计开发工具。7)通过内置的Flash构建增加了页面的交互性，导入一个Flash构建就像订制标签一样轻松。8)改进了表格编辑工具，是表格编辑可视化，即在表

21、格中进行列调整操作时能看到实际效果。9)对“插入”栏进行了改进，新的外观简洁高效，占用工作区空间更少；还可以对“插入”栏进行自定义，将最常用的对象放置在该栏上。10)利用改进的用户界面可得到最大的可用工作区，更清晰的显示上下文和焦点，更易于使用和更具逻辑性，查找资源更快速。2.3.2 Dreamweaver的工作界面Dreamweaver MX 2004提供了一个将全部元素至于一个窗口中的集成布局，在集成的工作区中，全部窗口和面板都被集成到一个应用程序窗口中。第一次启动Dreamweaver MX后，系统会弹出【工作区设置】对话框，它会让用户选择工作界面的风格，如图2-2所示。1)“设计者”布

22、局：这种布局是一种使用多文档界面的集成工作区。其中，所有的“文档”窗口和面板都被集中在一个大的应用程序的窗口中，并将面板组列在右侧。2)“代码编写者”布局：这种布局也是将工作区域集成，但是它的面板组列在左边，文档窗口列在右侧。文档窗口在默认的情况下显示的是“代码”视图。建议选择“设计者”布局，如果以后想更改工作区，可以选择【编辑|首选参数】菜单项，在弹出的“首选参数”对话框中选择“常规|更改工作区”选项进行切换。图2-2 工具区设置对话框我们以设计者布局为例进行介绍，点击【确定】按钮后，Dreamweaver MX的启始页面便会出现在屏幕上，如图2-3所示。启始页面中显示了打开最近编辑过的项目

23、、创建新项目、打开范例等常用操作。图2-3 Dreamweaver启始页面在启始页面中单击相关按钮就可以进入工作界面。例如，单击“创建新项目|HTML”按钮，就进入了Dreamweaver MX 2004的工作界面，如图2-4所示。Dreamweaver MX的操作界面主要由以下几个部分组成：插入栏：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮，如图2-5所示。对每个对象都是一段HTML代码，允许在插入它是设置不同的属性。例如，可以通过单击插入栏中的“表格”按钮插入一个表格，当然也可以不使用插入栏而使用“插入”菜单插入图像。选择【窗口|插入】菜单项，可以在工作界面中显示或

24、者隐藏插入栏。图2-4 Dreamweaver MX 2004的工作界面图2-5 Dreamweaver MX 2004的插入栏文档工具栏：包含按钮和弹出式菜单，如图2-6所示。它们提供各种文档窗口视图（如“设计”视图和“代码”视图）、各种查看选项和一些常用操作（如在浏览器中预览）。图2-6 Dreamweaver MX 2004的文档工具栏 图2-7 Dreamweaver MX 2004的面板组文档窗口：显示当前创建和编辑的文档。面板组：面板组是各种页面工具的集合，如图2-7所示，用它来进行页面的编辑和控制。若要展开一个面板组，请单击面板组名称左侧的展开箭头；若要取消一个面板组，请拖动该面

25、板组标题条左边的手柄。标签面板：标签面板显示当前光标在页面中所处位置的HTML标签。属性面板：用于查看和更改所选对象或文本的各种属性，如图2-8所示。图2-8 Dreamweaver MX 2004的属性检查器文档面板：通过“文本”面板可以管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是在远程服务器上。另外，“文件”面板还可以访问本地磁盘上的全部文件，类似于Windows资源管理器，如图2-9所示。图2-9 Dreamweaver MX 2004的“文件”面板2.4 Dreamweaver MX 2004的站点管理所谓站点，可以看作是一系列文件的组合，这些文件之间通过各种链接

26、关联起来，可以拥有相似的属性，例如描述相关的主题、采用相似的设计或实现相同的目的等。利用链接，从一个文档转到另一个文档，从而实现对整个站点的管理。本章主要介绍了使用Dreamweaver创建站点的基本思路以及使用站点管理文件的优越性、创建站点的方法、编辑站点的方法、对站点内的文件进行复制、删除、创建链接等操作、利用站点地图添加、修改、删除、文件间的链接关系等知识。2.4.1 站点的创建首先在本地硬盘上建立一个文件夹，用来存放将要制作的站点，可以将文件命名为网站的名字运行Dreamweaver MX 2004，选择【站点|管理站点】，如图2-10所示。图2-10 选择“管理站点”选项在弹出的“管

27、理站点”对话框中单击“新建|站点”，如图2-11所示。在弹出的“mysite的站点定义为”对话框中输入新建站点的名称。注意不要用中文名字来命名站点，因为这样在本机调试和编辑的时候会经常出现错误，而且上传导Web服务器端的时候也会经常出现一些麻烦。这里假设命名新建站点为mysite，如图2-12所示。单击“下一步”按钮。图2-11 管理站点对话框 在弹出的对话框中选择“否，我不想使用服务器技术”单选按钮。因为初学时建立的是静态网站，还不需要用到服务器技术，如图2-13所示。单击“下一步”按钮。在弹出的对话框中选择“编辑窝的计算机上的本地副本，完成后再传到服务器端（推荐）”单选按钮。因为制作网站是

28、在本地端完成后再上传导远程的Web服务器上的。在“您将把文件存储在计算机上的什么位置？”文本框中输入本地硬盘上已经建立好的文件夹的路径，如图2-14所示。单击“下一步”按钮。图2-12 为新建站点命名图2-13 定义站点是否使用服务器技术在弹出的对话框中选择“无”选项，如图2-15所示。单击“下一步”按钮。在弹出的对话框中认真阅读设置好的信息，确认无误后单击“完成”按钮，如图2-16所示。图2-14 定义本机站点位置图2-15 定义连接服务器的方式站点创建完毕，已经创建的站点会在“文件”面板中显示出来，如图2-17所示。 图2-16 定义站点的完成信息 图2-17 文档面板中显示创建好了的站点

29、2.4.2 站点的配置在Dreamweaver MX 2004中，可以对创建的本地站点的属性进行重新配置。单击“文件”面板创建了的站点名，在下拉菜单中选择“编辑”按钮，如图2-18所示。在弹出的“管理站点”对话框中单击“编辑”按钮，如图2-19所示。在弹出的“网页设置”对话框中单击“高级”选项卡，可以对本地站点进行重新配置，如图2-20所示。 图2-18 选择“管理站点”选项 图2-19 “管理站点对话框” 图2-20 “高级”选项卡2.4.3 站点的管理通过Dreamweaver MX 2004的站点管理器可以对网站文件进行全面的检查和整理，帮助找出错误的链接、错误的代码等，以便修正，让管理

30、站点更为轻松和方便。选择站点|检查站点范围的链接，弹出“结果”对话框，如图2-21所示。图5-21 “结果”属性对话框图5-22 选择“链接检查器”选项利用“结果”对话框中菜单选项可以对站点进行全面管理，例如通过链接检查器可以找出孤立的文件，这些文件在站点里面没有被使用到，但是仍然存在于网站中，应该清除，如图5-22所示。2.4.4 网页的创建1创建一个页面创建了站点后就可以开始创建页面了，创建页面有三种方法。1)选择文件|新建菜单项，弹出“新建文档”对话框，从各种预先设计好的页面布局中选择一种。例如选择“基本页”|“HTML”选项，单击“创建”按钮即可创建一个页面，如图5-23所示2)在“文

31、件”面板中单击鼠标右键，选择“新建文件”选项，如图5-24所示，可以创建一个页面。3)在起始页中选择“创建新项目”|“HTML”选项，也可以创建一个页面，如图5-25所示。 图5-23 “新建文档”对话框 图2-24 选择“新建文件”选项图2-25 Dreamweaver MX 2004的启始界面2为页面命名新建了页面之后，需要为页面命名。如果是网站的首页，一般默认的文件名是index.htm、index.html、default.htm等，如图5-26所示。如果是其他页面则相应得命名为网页名称，以后它将出现在标题栏。图2-26 为新建页面命名作业2-1 对已有站点如何进行属性的编辑？2-2 建立一个自己的站点，并了解对站点重新配置中“高级”选项卡中可进行配置的选项。第三章