表格布局--目录.doc

网站的目录结构网站的目录是指你建立网站时创建的目录。例如：在用frontpage建立网站时都默认建立了根目录和images子目录。目录的结构是一个容易忽略的问题，大多数站长都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护，内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议：1、不要将所有文件都存放在根目录下。有网友为了方便，将所有文件都放在根目录下。这样做造成的不利影响在于：1）、文件管理混乱。你常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，影响工作效率。2）、上传速度慢。服务器一般都会为根目录建立一个文件索引。当您将所有文件都放在根目录下，那么即使你只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长。所以，给您的建议是：尽可能减少根目录的文件存放数。2、按栏目内容建立子目录。子目录的建立，首先按主菜单栏目建立。例如：网页教程类站点可以根据技术类别分别建立相应的目录，象Flash,Dhtml,javascript等；企业站点可以按公司简介，产品介绍，价格，在线定单，反馈联系等建立相应目录。其他的次要栏目，类似最新消息，友情连接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，例如：关于本站，关于站长，站点经历等可以合并放在一个统一目录下。所有程序一般都存放在特定目录。例如：CGI程序放在cgi-bin目录。便于维护管理。所有需要下载的内容也最好放在一个目录下。3、在每个主目录下都建立独立的images目录。默认的，一个站点根目录下都有一个images目录。刚开始学习主页制作时，一般习惯将所有图片都存放在这个目录里。可是后来发现很不方便，当我需要将某个主栏目打包供网友下载，或者将某个栏目删除时，图片的管理相当麻烦。经过实践发现：为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。4、目录的层次不要太深。目录的层次建议不要超过3层。原因很简单，维护管理方便。|其它需要注意的还有：1）、不要使用中文目录；网络无国界，使用中文目录可能对网址的正确显示造成困难。2）、不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆。3）、尽量使用意义明确的目录；上面的例子中，你可以用Flash,Dhtml,javascript来建立目录，也可以用1，2，3建立目录，但是哪一个更明确，更便于记忆和管理呢？显然是前者！随着网页技术的不断发展，利用数据库或者其他后台程序自动生成网页越来越普遍，网站的目录结构也必将飞跃到一个新的结构层次。二、网站的链接结构网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。形象的说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。一般的，建立网站的链接结构有两种基本方式：1、树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会迷路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。2、星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。这两种基本结构都只是理想方式，在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置。所以，最好的办法是：1、首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。有站点为了免去返回一级页面的麻烦，将二级页面直接用新开窗口(POP up windows)打开，浏览结束后关闭即可。注意：以上我们都是用的三级页面举例。如果您的站点内容庞大，分类明细，需要超过三级页面，那么建议你在页面里显示导航条，可以帮助浏览者明确自己所处的位置。就是您经常看到许多网站页面顶部的，类似这样：“您现在的位置是：首页-财经新闻-股市信息-深圳股-深发展”关于链接结构的设计，在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置，是否每页都需要放置，是否需要用分帧框架，是否需要加入返回首页的链接。在连接结构确定后，再开始考虑链接的效果和形式，是采用下拉表单，还是用DHTML动态菜单等等。随着电子商务的推广，网站竞争的越来越激烈，对链接结构设计的要求已经不仅仅局限于可以方便快速的浏览，更加注重个性化和相关性。例如，一个爱婴主题网站里，在8个月婴儿的营养问题页面上，你需要加入8个月婴儿的健康问题链接，智力培养链接，或者是有关奶粉宣传的链接，一本图书，一个玩具的链接。因为父母不可能到每个栏目下去寻找关于8个月婴儿的信息，他们可能在找到需要的问题后就离开网站了。如何尽可能留住访问者，是网站设计者未来必须考虑的问题。第3课：使用表格对网页进行布局网页可以说是网站构成的基本元素。网页中的主要元素有文字、图片、超级链接、表格、导航条和表单以及框架等等。当我们轻点鼠标，在网海中遨游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然是不可忽略的因素，除了这些，还有一个非常重要的因素网页的布局。另外，设计一个漂亮的网站首页也是吸引浏览者眼球的重要因素。今天，我们主要学习以下两个方面的内容：网页布局的类型使用表格进行网页布局网页布局类型网页布局类型大致可分为“同”字型、拐角型、标题正文型、左右分栏型、上下框架型、综合框架型、封面型、Flash型等，下面将为同学们分别举例介绍以上者几种网页布局的类型。1、“同”字型：也可以称为“国”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。下面是“中国人才热线网站（上海站）”的首页。2、“厂”字型：这种结构与上一种只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧（或者右侧）是一窄列链接等，右列（或者左列）是很宽的正文，下面可以有一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧（或者右侧）是导航链接。下面是“上海交通大学网络教育学院”的首页。3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面、公告页面或注册页面等就是这种类型。下面是交大网络教育学院的一个公告页面。4、左右分栏型：这是一种两页内容分为左右两列的布局结构，有一些企业网站也喜欢采用这种类型结构作为网站的首页安排布局，因为它非常清晰，一目了然。下面是我们同学平时可以登录的学习平台网站的首页。5、上下框架型：与上面类似，区别仅仅在于是一种上下分为两页的框架。6、综合框架型：上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类似于“厂”字型的结构，只是采用了框架结构。下面是我们学习平台中关于算法和程序设计网上课堂的一个页面。7、封面型：这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果处理的好，会给人带来赏心悦目的感觉。下面是一个国外的网站“EYE4U”的首页。8、Flash型：其实这与封面型结构是类似的，只是这种类型采用了目前非常流行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。下面是“可口可乐（中国站）”的首页。使用表格进行网页布局表格在网页布局方面起到了举足轻重的作用，使用表格设计网页布局，可以使网页看上去更加整齐，适用于一般比较正规的网页。网页中的表格是由若干行和列组成，每一行（或者列）又由多个单元格组成，每个单元格中又可以反复的插入插入表格，以满足网页设计人员的布局需要。表格在网页布局阶段就像是一个“幽灵”，它无处不在，充分的利用表格能够使同学们设计出来的网页更具美观性。例如下面的这个网页中，就包含了多个表格。上图中，为了方便同学们分辨网页中表格，故意将表格的边框线颜色显示出来，在实际使用表格进行网页布局时，我们是将表格边框线进行一些属性值的设置，使其能够隐藏。下面，我们以对“探索埃及”主题网站首页（如下图所示）设计为例，学习如何使用表格对网页进行布局设计。从上图中，我们不难发现，这是一个“同”字型的网页布局风格，最上面的是一个大幅的横幅图片和主题网站的名称，紧接着是一个横向的带有弹出式菜单的导航条，然后是主页的两侧各设计了若干张小幅的图片和相应的超级链接点，网页的正中间安置了一张大幅的图片（或者也可以是一个Flash流文件）。下面，我们分别使用两种方法，对以上分析的网页布局使用表格来实现。方法一：使用单张表格完成网页布局1、在DreamweaverMX中打开我们已经创建好的站点文件夹，单击选中站点文件夹“myweb”；2、在站点资源管理器中打开“文件”按钮下拉列表，选用“创建文件”命令项，如下图所示；3、将新创建的文件重命名为“index.htm”，一般网站的首页均以“index.htm”或“default.htm”为文件名保存，如下图所示；4、选用“插入”面板中的“插入表格”按钮，如下图所示；5、在弹出的“插入表格”对话框中，输入行数为“8”行，列数为“3”列，然后将“单元格填充”、“单元格间距”和“边框”属性值均设置为0，如下图所示；支 招单元格填充属性值：决定单元格中的文字或图片离开单元格边框线的距离。单元格间距属性值：决定了每单元格相互之间的距离是多少。边框属性值：决定了设计的表格是否显示边框线，如果属性值设置为0，就说明表格的边框线在浏览器中是看不到的。宽度属性值：决定了设计的表格在网页编辑器中显示的比例，有两种单位可以选用“%”和“像素”。6、使用鼠标指针选中表格的第1行中的3个单元格，并右击选中区域，在弹出的快捷菜单中选用“表格/合并单元格”命令，将第1行中的3个单元格完成合并，如下图所示；支 招在选中需要合并的单元格后，单击单元格属性面中的“合并单元格”按钮（），同样可以完成合并单元格的工作。7、使用类似的方法，依次完成（1）合并表格中第2行的3个单元格；（2）合并第2列中的垂直方向的6个单元格，此时“探索埃及”网站的主页已经跃然而出了，这样的布局是不是非常的清晰？方法二：使用表格嵌套完成网页的布局有时为了能够更加方便的对网页中的文字、图像进行处理，而相互之间在布局上不受影响，我们也可以使用表格嵌套的方式对网页进行布局。1、单击“插入”面板中的“插入表格”按钮，在弹出的“插入表格”对话框中，输入行数为“4”行，列数为“3”列，宽度属性值为“100%”，其余的属性值均设置为“0”，如下图所示；2、在完成对“index.htm”网页插入一张“4*3”的表格后，如下图所示，分别将第1、2、4的单元格完成合并；3、将光标插入点置于第2行中，再次插入一个“1*6”的表格，如下图所示，此处的表格线边框和颜色是为了便于同学们看清楚，实际插入时应将表格的边框属性值设置为“0”；4、依次在表格第3行的第1、3两个单元格中分别插入一个“6*1”的表格，如下图所示；5、此时，我们可以看到主题网站首页中的内容也能够按照如下图所示的布局，非常清晰的展现在浏览者眼前。网页的布局是否合理，直接关系到网站的美观性和点击率，充分的利用表格，合理的使用表格嵌套，就能设计出赏心悦目的网页布局。在这里，我们只是介绍了诸多布局类型中的一种，希望同学们能够自己动手，在不同内容的网页中尝试不同的布局风格。支 招使用表格进行网页布局时，可以充分的使用“表格属性面板”和“单元格属性面板”，下面简单的将这两个属性面板中的属性设置要点分析一下：1、“表格属性面板”（1）“行”和“列”的属性：显示了当前选中的表格中的行数和列数；（2）“宽”和“高”的属性：决定了当前选中的表格在网页编辑器中的大小；（3）“填充”属性：决定了当前选中的表格中单元格内部的文字、图片等距离单元格边线的值；（4）“间距”属性：决定了表格中各个单元格之间的间距；（5）“对齐”属性：决定了当前选中的表格在网页编辑器中的水平位