| 第一章 从零起步 | ||||
| 本章首先将对一些与网络相关的概念做一些浅显的解释，使读者对Internet传递信息的基本原理有所了解，然后对HTML（超文本标签语言）的基本知识进行阐述，并对Dreamweaver的操作环境做一些介绍，最后对网页设计的页一些原则和方法作一个简单的概述，从而为后面的章节的学习打下基础。 1.1 网页制作基础知识 1.1.1 理解网页 当运行打开浏览器程序以后，在地址栏中输入一个网站的地址，就会展示出相应的网页内容了。 网页中可以包含很多种类型的内容作为网页的元素，最基本的是文字，此外还可以使用静态的图形以及动画，以及声音和视频等多媒体文件。网页的最终目的就给访问者深刻的印象，展示有价值的信息。 1.1.2 网页制作中的基本概念 服务器与浏览器 互联网就是全世界数百万台计算机互相连接而成的一个计算机网络。我们坐在家中查看各种网站上的内容，实际上就是从远程的计算机中读取了一些内容，然后在本地的计算机上显示出来的过程。 因此，内容信息的提供者的计算机就称为“服务器”，用户使用“浏览器”程序，例如Internet Explorer，就可以通过网络取得上面的文件以及其他信息。服务器可以同时供许多不同的人（“浏览器”）访问。 访问的具体的过程简单来说，就是当访问网页的人的计算机连入Internet后，通过浏览器发出访问某个站点的请求，然后这个站点的服务器就把信息传送到用户的浏览器上，即将文件下载到本地的计算机，浏览器再显示出文件内容，这样用户就可以坐在家中查询万里之外的信息了。 超链接 对超链接其实并不陌生，例如我们可能会经常访问新浪网去看新闻，在它的首页中有很多新闻的标题，当我们用鼠标点击一个新闻标题以后，就会显示出新闻的内容。这就是超链接的作用。 超链接是一种可以指向其他文件的文字或图片，这种作用称为超链接。浏览器可以使用户利用超链接方便地取得超链接所指向的另一份文件。在超链接文件中，想要更多地了解关于该文件中所提到的一些主题的信息，可以通过对目标用“按下鼠标”的方式来取得更详细的资料。事实上该文件也可以被链接到其他不同作者所编写的文件上。在Internet上，一方面数千万台计算机相互连接，另一方面，世界范围的大量信息通过超本文的方式相互链接。 URL URL我们也不陌生，每当我们要访问一个网站的时候，都要在浏览器的地址栏中输入网站的地址，它的学名就是URL。 URL为“Uniform Resource Locator”的缩写，通常翻译为“统一资源定位器”，也就是人们通常说的“网址”。它是一个指定Internet上资源位置的标准，也就是人们常说的网址。URL常见的有以下几种形式： ftp://www.artech.cn http://www.artech.org/index.htm HTML 实际上，网页文件是用一种被称为 HTML（Hyper Text Markup Language）的标签语言书写的。有两种方式来产生HTML文件：一种是自己写HTML文件，事实上这并不非常困难，也不需要特别的技巧；另一种是使用HTML编辑器，它可以辅助使用者来做编写的工作。本书在后面着重讲述HTML。 如果读者想先看一下HTML语言是什么样子，可以用浏览器打开任意一个网页，然后选择浏览器的菜单“查看///源文件”命令，这时会自动打开记事本程序，里面显示的就是这个网页的HTML源文件。也许会感觉非常复杂，实际上它并不难掌握，本书后面的任务就是交给读者如何编写HTML网页。 上传与下载 前面已经提到，为了让全世界的人都可以浏览我们制作的网页，就必须把网页放到服务器上，当然如果我们有条件也可以把自己的计算设置成服务器，日夜不停地运行并连接在互联网上。 当时这样做很麻烦，因此大多数情况，我们回去花一点钱租用一个服务器，这样我们就必须把作好的网站传送到服务器上，这个过程就称为“上传”，而大家通过浏览器访问网页的时候，所经历的过程就是下载的过程，并网页下载到自己的计算机中，这样才能看到它。 域名 一个公司如果希望在网络上建立自己的主页，就必须取得一个域名，域名也是由若干部分组成，包括数字和字母。例如， www.artech.cn 就是本书作者的域名，通过该地址，访问者可以找到我们出版过的图书的信息，还有讨论区可以讨论各种技术话题等等。 域名是上网单位和个人在网络上的重要标识，起着识别作用，便于他人识别和检索某一企业、组织或个人的信息资源，从而更好地实现网络上的资源共享。除了识别功能外，在虚拟环境下，域名还可以起到引导、宣传、代表等作用。 域名可分为不同级别，包括顶级域名、二级域名等。顶级域名又分为两类。 一是国家顶级域名，目前200多个国家都按照ISO3166国家代码分配了顶级域名，例如中国是“cn”，美国是“us”，日本是“jp”等。 二是国际顶级域名，例如表示工商企业的“.Com”，表示网络提供商的“.net”，表示非盈利组织的“.org”，表示教育机构的“.edu”等。 二级域名是指顶级域名之下的域名，在国际顶级域名下，它是指域名注册人的网上名称，例如“ibm”，“yahoo”，“Microsoft”等；在国家顶级域名下，它是表示注册企业类别的符号，例如“com”，“edu”，“gov”，“net”等等。 例如“artech.com.cn”这个域名中，“cn”是顶级域名，“com”二级域名，“Artech”是三级域名。原来中国的域名管理机构（CNNIC）没有开放二级域名的注册，因此二级域名只有“com”，“edu”，“gov”，“net”等这几个。几年前，CNNIC开放了二级域名的注册，因此就可以注册“artech.cn”这样的域名了。 网站 网站就是在互联网上一块固定的面向全世界发布消息的地方。它由域名（也就是网站地址）和网站空间构成。网站空间里面存放的就是各种网页。小的网站可能只包含一个网页，大的网站可能需要很多计算机来存储数据，例如著名的Google网站，就依靠数万台计算机来为全世界的网民提供服务。我们也可以把一个网站类比为一栋房屋，域名就是他的门牌，网页里面的所有网页构成了房屋里的内容。 衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站提供服务等几方面考虑。 当一个的公司在互联网上建立一个网站，访问者可以进入他的网站查询相关的信息。有时候，网站也被称作站点。 1.2 HTML入门 我们常常讲起网页，事实上每一个网页都是一个文件，这个文件里面包含了HTML指令，所以这些文件就被称为HTML文件。HTML语言不是一种编程语言，而是一种描述性的标签语言，这些标签符用来定义HTML文件中信息的格式和功能。当浏览器接收到HTML文件后，就解释HTML文件内的标签符，根据标签符去执行相应的显示功能或实现某些功能。注意这些标签符必须用小于号“<”和大于号“>”括起来。 HTML标签符最基本的格式是：<标签符>内容</标签符>。标签符通常成对使用，前面的“<标签符>”表示某种格式的开始，后面的“</标签符>”表示这种格式的结束。 例如，HTML文件中的<b></b>标签符用来定义HTML文件中的文字为粗体字。就是说，在这一对标签中的内容都以粗体的格式在浏览器中显示。例如在文件中有“<b>Hello，World ! </b>”，那么在浏览器中将显示出粗体字“Hello，World !”。 HTML的概念很简单，就是写入什么样的标签符，浏览器就会相应执行该标签符所能实现的功能。不过有一点要注意，我们最常用的Netscape和Internet Explorer浏览器并不完全兼容，即有的标签只能被其中一种浏览器识别。就目前的情形来看，Internet Explorer已经取得了很大的优势，但在制作网页时最好还是二者兼顾。另外Dreamweaver已经充分考虑到了兼容性的问题，尽可能地使制作出的网页在两个浏览器上都能正确显示。 此外HTML文件只是一个纯文本文件，可以用任何文本编辑器来编辑它，最简单就是用Windows系统里的“记事本”来建立或编辑。HTML文件的扩展名是.htm或.html。 现在已经对HTML有了一些最基本、最简单的认识，那么就开始学习一些HTML的基本语句。完整的HTML规则完全可以写成一本几百页的书，在这里仅能讲述HTML中最重要的几个标签。 下面是一个最简单的HTML文件。 <html> <head> <title>这是测试文件</title> </head> <body> HTML 文件的内容就写在这里... ... </body> </html> 用任何文本编辑器都可以把上面这个文件输入并存成普通的文本文件，注意文件的扩展名必须是“.htm”或“.html”，例如“test.htm”，然后就可以用浏览器来浏览这个页面了。另外，HTML文件中的空格都是无效的，也就是说它最终的显示效果完全由标签来决定，因此在书写HTML文件时最好能使每对标签上下对齐，并缩进排版，这样很容易看出各标签是如何配对的。 在Windows的“记事本”中输入这个源文件文档，并保存文件。注意，在保存这个文件的时候，要在把保存文件对话框中，将“保存类型”设置为“所有文件”，然后再文件名输入框中给文件名的后缀设置为“htm”，然后再按“保存”按钮。 然后就可以用浏览器，例如最常用是Windows中的Internet Explorer来打开这个网页了，在Windows的“我的电脑”中，双击这个保存好的文件，就会打开浏览器的窗口。 注意这个文件中有以下4对标签。 HTML标签: <html>标签放在HTML文件的开头，告诉浏览器，这个文件是HTML文件。而在文件的结尾，是</html>结束标签。虽然这对标签可以省略不用，但希望读者能养成使用该标签的习惯。 “文件头”标签: 文件头标签是 <head>和</head>，一般放在<html>标签的后面，用来标明文件的题目或定义部分。 “文件标题”标签: 标题标签为 <title>和</title>。这对标签用来设定文件的标题，注释这个文件的内容。浏览器通常都会将文件标题显示在浏览器窗口的左上角，所以这个标题就显得很有用。 “文件体”标签: 文件体标签为 <body>和 </body>。这对标签一般都被用来指明HTML文档的内容，例如文字、标题、段落和列表等，也可以用来定义主页背景颜色。 下面再介绍几个标签，使这个网页更复杂一些。 “标题”标签: 标题标签的格式为 <h?>和</h?>（?代表从1～6的数字）。这个标签被用来设置标题字体的大小。HTML准许有<h1>至<h6>这6级标题，例如“<h1>这是H1标题字</h1>”，“<h6>这是H6标题字</h6>”。如果在上面最基本的HTML文件中增加如下面源文件所示的6行文字。 <html> <head> <title>这是测试文件</title> </head> <body> HTML 文件的内容就写在这里... ... <h1>这是H1标题字</h1> <h2>这是H2标题字</h2> <h3>这是H3标题字</h3> <h4>这是H4标题字</h4> <h5>这是H5标题字</h5> <h6>这是H6标题字</h6> </body> </html> 对齐标签: 平时人们用Word排版，可以将文字随意移动，而Word又可以自动调整字间距，以使段落左右对齐。在HTML中，没有字间距这个标签，不能像Word那样对文字进行随心所欲的编排，一个字符占一个字符空间，绝不能多出或减少。 需要说明的是，HTML语言本身是不能调整字间距的，但是通过使用层叠样式表示可以的，这与层叠样式表的概念，在下一章中介绍。 这里我们又要引入一个新的概念——“属性”，HTML语言的标签还可以带有一些属性，例如 前面介绍的H1到H6标签都有一个 “align”的属性，用来设置“对齐方式”。每个属性都可以设置一个“属性值”，例如align属性可以有三种属性值： left（左对齐）、Center（居中对齐）或者Right（右对齐）。 现在把前面的源文件修改为下面的样子。 <html> <head> <title>这是测试文件</title> </head> <body> HTML 文件的内容就写在这里... ... <h3 align=left>文本左对齐</h3> <h3 align=center>文本居中对齐</h3> <h3 align=right>文本右对齐</h3> </body> </html> 1.3 Dreamweaver的操作环境 Dreamweaver 8的用户界面非常友好，为设计是带来了很大的方便。下面就来把几个主要部分介绍一下。 Dreamweaver 8的整体界面如图1.1所示。  图1.1 Dreamweaver 8 的操作界面 文档窗口 在界面的中部，是文档窗口，它是用来编排网页的区域，与在浏览器中的结果近似，但仍有一些差异。 “插入”面板 选择菜单“窗口→插入”命令，可以打开或关闭“插入”面板，它位于界面的上侧。它的作用是在光标位置插入各种对象。单击面板左端的的卡片可切换不同页，每页中有不同类型的对象。使用“插入”菜单中的命令也可以实现插入各种对象的目的，与使用“插入”面板是一致的。使用菜单还是使用“插入”面板，可完全根据用户的习惯来决定。 “插入”面板默认打开的是 “常用”页，它包括了最常用的一些对象，例如在文档中的光标位置插入一段超级链接文本、一个表格或者一个图像等等。其他7页并不像基本对象那样常用，因此这里仅进行简单介绍，后面还会详细介绍。 ·“布局”页的作用是为了方便使用Dreamweaver的布局功能。 ·“表单”页中的对象都用来制作表单，例如在文档中插入表单、文字输入框和按钮等。 ·“文本”页可以方便用户在文档中插入一些已经设定好的带有HTML格式的文本。 ·“HTML”页可以方便用户在文档中插入水平线、文件头、脚本编制、框架和脚本对象。 ·“应用程序”页中可以方便用户插入服务器端的动态元素，本书不作介绍。 ·“Flash 元素”页可以方便用户在文档中插入格式为.swf的Flash元素。 ·“收藏夹”页可以方便用户在收藏夹中自定义常用的插入对象。 “属性”面板 依次选择菜单“窗口→属性”，就可以打开或关闭“属性”面板。当鼠标选中一些文字或某个对象时，“属性”面板就会显示相关信息和参数，并可对其进行修改和设定。 “属性”面板几乎是最常用的一个面板，因为无论要编辑哪个对象的属性，都要用到它，其内容也随着选择对象的不同而改变。 其他面板和工具条 除了上面介绍的两种面板之外，这里还有必要对一些重要的界面元素做简单介绍。 在文档窗口的上方有文档和标准两个工具条。 文档工具条的功能是对文档进行控制。最左面的3个按钮十分常用，它们可以切换文档窗口的显示方式。 按下  按钮，文档窗口中只显示HTML代码；按下 按钮，文档窗口分为上下两个部分，上面显示HTML代码，下面显示页面效果；按下 按钮，文档窗口中只显示页面效果。除此之外，针对不同的控制对象，还有其他若干面板，如“行为”面板、“框架”面板和“层”面板等，它们都针对不同的对象起作用。 我们在后面的章节中再进行介绍。 在制作过程中，用户需要关闭或者打开这些面板和工具条时，具体的方法如下。 选择菜单“查看→工具栏→文档”可以打开或者关闭文档工具条（当“文档”菜单项前面有一个对勾的时候，工具条被打开，反之则关闭）。 按键盘的“F4”键可以隐藏所有面板，再按“F4”键又可以打开所有面板。如果要打开一个面板，可以在“窗口”菜单中找到相应的菜单项。比如选择菜单“窗口→文件”就可以打开“文件”面板。随着Dreamweaver版本的不断升高，面板数量越来越多，因此在Dreamweaver 8中，出现了面板组的概念，也就是几个功能相关的面板放在一起，组成一组，成为一个面板组，比如选择菜单“窗口→文件”打开“站点”面板的同时，在它的旁边也打开了“资源”和“代码片断”面板，二者共同组成了“文件”面板组。 1.4 网站开发的流程 在本节中，将介绍一下网站设计和开发的整个工作流程。前面最开始的时候，曾经简单介绍过一下网站开发的基本流程。在本节将这个流程再细化一下，这样可以更深入地作讲解。 经过近10年的发展，互联网已经深入到社会的各个领域，伴随着这个发展的过程，网站开发已经成为了一个拥有大量从业人员的行业，从而整个的工作流程也日趋成熟和完善。 明确网站定位 首先在做网站之前给要做的网站一个准确的定位，明确建站目地是什么。谁能决定网站的定位呢？如果网站是做给自己的，比如一个个人网站，那么自己说了算；而如果是为客户建立网站，那么一定要与客户的决策层人士共同讨论，要理解他们的想法，这是十分重要的。 在理解了客户的想法后，就要站在客户的立场上，探讨网站的定位。根据经验，如果设计师能够从客户的立场出发，给客户提出一些中肯的建议，结合到策划中去，那么设计已经成功了一半，也可以大大避免在日后与客户的沟通中发生不愉快的可能性。 收集信息和素材 在明确建站目的和网站定位以后，开始收集相关的意见，结合公司其他部门的实际情况，这样可以发挥网站的最大作用。 这一步是前期策划中最为关键的一步，因为做网站一定是为公司服务的，所以全面地收集相关的意见和想法是最为必要的。这一步需要整理成文档，可以让相关部门配合提交一份本部门需要在网上开辟的栏目计划书。这份计划书一定要考虑充分，因为如果要把网站作为一个正式的站点来运营的话，所做的每一项栏目的设置都应该是有规划的。如果考虑不充分，会导致以后突如其来的新加内容破坏网站的整体规划和风格。当然，这也并不意味着网站成形后是不许添加栏目的，只是在添加的过程中需要结合网站的具体情况，最好是当初策划时考虑全面！ 策划栏目内容 收集完所有的相关信息以后，对其进行整理，整理以后找出重点，根据重点以及公司业务的侧重点，结合网站定位来确定网站的栏目需要有哪几项。可能开始时会因为栏目较多而难以确定最终需要哪几项，这又是一个讨论的过程，需要所有设计和开发人员在一起阐述自己的意见，一起反复比较，将定下来的内容进行归类，形成网站栏目的树状列表用以清晰表达站点结构。 对于比较大的网站，可能还需要讨论和确定二级栏目以下的子栏目，对它进行归类，并逐一确定每个二级栏目的主页面需要放哪些具体的东西，二级栏目下面的每个小栏目需要放哪些内容，让栏目负责人能够很清楚地了解本栏目的每个细节和每个栏目，讨论完以后，就应由栏目负责人来按照讨论过的结果写栏目规划书。栏目规划书要求写得详细具体，并有统一的格式，以备网站留档。这次的策划书只是第一版本，以后在制作的过程当中如果出现问题应及时修改该策划书，并且也需要留档。 设计页面方案 再接下来，需要做的就是让美术设计师（也称为美工）根据每个栏目的策划书来设计页面。这里需要再次指出，在设计之前，应该让栏目负责人把需要特殊处理的地方跟设计人员讲明。在设计页面时实际是要根据策划书把每个栏目的具体位置和网站的整体风格确定下来。为了让网站有整体感，应该在网页中放置一些贯穿性的元素，最终要拿出至少3种不同风格的方案。每种方案应该考虑到公司的整体形象，与公司的精神相结合。设计方案拿出以后，经讨论后定稿。最后挑选出两种方法交给客户选择，由客户确定最终的方案。 制作页面 方案设计完成以后，下一步是实现静态页面，由制作人员负责根据设计师给出的设计方案，制作出网页，并制作成模版。在这个过程中需要十分注意网站的页面之间的逻辑，并区分静态页面和需要服务器端实现的动态页面。 在这个过程实现的同时，栏目负责人应该开始收集每个栏目的具体内容并整理。模版制作完成后，由栏目负责人往每个栏目里面添加具体内容。对于静态页面，将内容添加到页面中即可，对于需要服务器端编程实现的页面交由编程人员继续完成。 为了便于读者理解，在这里举一个例子，以区分动态和静态页面的含义。例如某个公司的网站，需要展示1000种商品，如果只用静态页面来制作，那么如果在一个页面中展示10个商品，则一共需要100个静态页面，而且日后如果需要修改某商品的信息，就需要重新制作相应的页面，这样工作量就会非常大。而如果借助于服务器端的程序，制作为动态页面，例如使用ASP技术，只需要制作一个页面，然后把1000种商品的信息存储在数据库中。页面根据浏览者的需求动态地显示这些商品，则只需要制作一个页面以及编制若干程序就可了，而且便于修改。这就是动态页面的作用。 实现后台功能 在前一步中，将动态页页面设计好后，只剩下程序部分需要完成了。在这一步中，由程序员来根据功能需求，编写程序，完成动态页面。 需要说明的是，网站的建设过程中，“如何统筹”是一个比较重要的问题。在上面所讲述的过程进行的同时，网站的程序人员正处于开发程序的阶段，如果实现的过程中出现什么问题，编程人员应和制作人员及时沟通，以免程序开发完成后发现问题再进行大规模的返工。 整合与测试网站 接下来，当两边的工作都完成以后，就是整合。把程序和页面进行整合。整合完成以后，需要内部测试，测试完成，即可上传到服务器上，交由客户检验。通常客户会提出一些修改意见，这时根据客户要求完成修改即可。 如果这时客户发现了一些问题，由于客户并不了解工作的原理，可能他们会觉得很容易修改，而实际上有可能是结构型的调整，工作量会很大，这时就很容易产生不愉快的情况。因此最好在开发的前期准备阶段就充分理解用户的想法和需求，同时对于一些可能发生的情况提前告诉客户，这样就容易与客户报纸愉快的合作关系。 1.5 网页布局概述 现在把焦点集中在页面方案的设计上。传统的媒体如报刊和杂志，只有文字和图片而没有声音；广播只有声音却没有文字和图像；电视是拥有声音、图像和文字的媒体，但观者只能被动地接受，而不能自由而有选择地观看，也不能进一步查看详细资料。 只有网页可以做到两者兼容。观众的自由度像报纸一样，可自由选择喜爱的内容，同时又可以听和看更多的声音和视频信息，更全面了解事物。这种利用图像、音效和动画的版面构成形式，必将使媒体视觉传播策略更加深入。因此有必要根据网页的特点，来介绍一下页面设计中的一些基本知识。其中“网页布局”就是首要的一个方面。 网页的布局千变万化，很难寻到几条固定的规则，这里只是就比较常见的几种类型作一说明，并举一些例子，使读者能有一个基本的认识。实际上各种类型之间并没有严格的界限。 “厂”字型布局 所谓“厂”型结构，就是指页面顶部为横条网站标识和广告条，下方左面（也可放在右边）为主菜单，右面显示内容的布局。菜单条与背景，整体效果类似“厂”字。这是目前最常见的一种网页布局方式。这种布局的优点是页面结构清晰，主次分明。缺点是由于被使用得过多，显得缺乏创意，略显呆板。 “国”字型布局 这种页面通常上下各有一个广告条或者其他栏目条，左面是主菜单，右面放友情连接或者其他栏目等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面显得比较拥挤和局促，不够灵活。 “三”字型布局 这种布局多用于国外站点，通常页面上方横向几条色块，将页面整体分割为若干部分，色块中大多放广告图片或者Flash动画。 宣传单型布局 这类页面布局就像一张宣传海报，以一张精美图片作为页面的设计中心，常用于个性类站点。优点是漂亮吸引人，缺点就是页面中大面积使用图片，导致浏览速度相对较慢。同时可以作为宣传单使用。 门户型网页布局 这类网页通常内容多，信息量大，通常没有明显的线条作为边界，图片用得也比较少，一般通过文字的排列产生视觉上的分区效果。 区块型布局 这类网页现在出现得越来越多，在网页上各个区域具有封闭的边界，经过合理放置显得清晰美观。缺点是由于版面固定，各区域很难根据其中内容的多少而调整大小，因此不适宜用于区域内容的长度经常变化的网页。 |
||||