《网页设计与制作教程与实训》全套ppt电子课件教案第1章网页制作基本知识.ppt

网页设计与制作教程与实训 wangyeshejiyuzhizuojiaochengyushixun,第1章 网页制作基本知识,1.1 与网页制作相关的术语 1.2 HTML简介1.3 网页界面的构成要素1.4 网页开发的流程1.5 网站设计的要求,网站开发的流程网站设计的要求,本章要点,1.1 与网页制作相关的术语,1网站与网页 当我们在浏览器中输入一个已知网址后，即可打开一个页面，让我们了解有关这个网址的一些信息和内容，这个页面就是我们通常所说的网页，而打开网络由网址进入时第一个看到的页面，我们通常把它称为首页（home page）或主页，所有的信息都会清楚地整理在这个页面上，目的就是为了让用户在使用这个网页时能快速链接到需要的资料，它既是一个单独的网页，同一般网页一样可以存放各种信息,又是一个特殊的网页，是整个Web站点的起始点和汇总点，是用户开始浏览站点的“入口处”。由首页所延伸下去的页面，就是一个个网页。 网页又称Web页面，是网络文件的组成部分，是可以被浏览器访问的单个HTML超文本文件,它由文字、表格、图片、声音、视频以及各种功能按钮等组成，这些文字、图片、按钮往往又是指向别的主页的连接点。在Internet网上，这些连接点又叫超级链接。所有由首页链接出去的网页集合起来就是网站。即在设计时，将某个主题明确后，再按所需的单元、内容经过安排，化为各个不同的网页，在同一个结构及诉求下出现的集合体，就是网站（Web Site）。有主题性的网站是要经过规划和构架过的网站。在互联网上，Web站点由一组相互关联的页面组成，如果把整个WWW信息世界看作一个村子，那么一个Web站点可以理解成一个家庭。,1.1 与网页制作相关的术语,2服务器（Server）与浏览器（Browser） 服务器是局域网的核心设备,它管理着局域网中的各种资源,它的基本功能是网络通信服务、管理和提供网络共享资源，以及进行网络管理。服务器实质是一台配置较高的计算机。不同的电脑操作系统，有不同的适用服务器软件，如：微软视窗windows XP Professional操作系统适用的服务器软件IIS5.1网站上动态的数据，必须要通过网站服务器的服务才能运作。 用于查看Web站点的软件被称作浏览器。它是WWW的窗口,用户可以利用浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释HTML文档中所描述的动画、声音、文本、图形、图像，并能实现电子邮件查看、下载文件、FTD等功能。它有多种版本,如微软英特尔版本、苹果电脑版本等，大多数浏览者（目前已经超过90）使用Microsoft Internet Explorer(简称IE)浏览器.还有一些其他的浏览器，不同版本的浏览器功能大体一样，主要区别在于各功能区在版面上的排列不同。,3. 远程站点(Remote Site)和本地站点（Local Site） 远程站点是指服务器上组成的Web站点。本地站点是指与远程站点上的文件对应的本地磁盘上的文件。 在制作网页时，首先要定义一个本地站点。作为一个网站，里面有很多网页文件、图片、Flash动画等，如果不进行管理归档，分散在硬盘的各个地方,就无法方便地进行网页发布。定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。一般在设计网页之前，先要以设计的网页的名称新建一个文件夹，把它放在电脑中常用来存储文件的磁盘中，如“我的网页”、“个人网页”等的文件夹里，也可以根据自己的习惯放置文件。,1.1 与网页制作相关的术语,4. 统一资源定位器URL URL即Uniform Resource Locator（统一资源定位器）的缩写。用来指明主机或文件在Internet上的位置，一个URL就是一个资源在Internet上的具体位置，URL由Internet资源类型、服务器地址、端口及路径组成，如：http:/,1.1 与网页制作相关的术语,1.2 HTML简介,1.2.1 HTML基本格式及特点1.2.2 HTML的基本语句 1. HTML 标记符 2. “文件头”标记符 3. “文件标题”标记符 4. “文件体”标记符 5. “标题”标记符 6. 字体和段落标记符 7. 图像标记符 8. 表格标记符 9. 框架标记符 10. 层标记符 11. 表单标记符,1. 文字 文字是网页最基本的构成要素，一个网页上大部分是由文字构成的，由于文字所表达内容比较清楚、直接,而且相对占用网页版面面积较小，使网页所表达的信息量加大，所以网上用来表达内容或链接的大部分是文字。文字也称文本，网页有90左右是由文本组成。首页上的文本基本上都是用来链接用的。,1.3 网页界面的构成要素,2. 图形图像 图形和图像也是网页主要的构成要素，它有动态和静态之分，和文字的功能一样，也是基本上用来链接用的，它比文字看上去更加直观，更让人容易理解内容。图形可提高站点的访问率，但不能因此而在网页上加入过多的图片，这样会适得其反，一方面由于图形占网页空间较大，使网页信息量相对减少；另一方面由于图片较多，使网页显示的速度降低，用户浏览网页花费的时间较长。 Web图形的文件标准格式是JPG、GIF和PNG，对颜色具有平滑渐变的图像使用JPG格式，如大多数照片；对于以单一颜色为主的图像，使用GIF格式。,1.3 网页界面的构成要素,1.3 网页界面的构成要素,3. 超链接 超链接由两个端点及一个方向构成。通常开始的位置称为源端点，目标位置称作目标端点。链接就是由源端点指向目标端点的一种跳转。目标端点可以是一个页面、一幅图像、一段声音、或者是页面中的某个位置。利用超链接可以实现文档间或文档中的跳转。 根据源端点的不同，可以将超链接分为两种：超文本（Hypertext）和超链接（Hyperlink）。超文本就是源端点的文本的链接。而超链接是利用文本以外的对象作为源端点所创建的链接，如图像、表单等。,1.3 网页界面的构成要素,4. 交互功能 交互功能，即网上提供的聊天、论坛、留言本、邮件发送及接收的互动功能。这也是互连网的一大优势所在，它给人提供了一个快捷交流的平台，给人的生活带来了许多便利。,1.3 网页界面的构成要素,5. 多媒体（Multimedia） 多媒体就是指各种各样的信息载体在计算机中的应用，是一种文字、声音、图像、动画和视频影像成分的交互组合。网页中的多媒体主要指采用音频和视频功能的软硬件技术，包括数字音响、全动态图像、超媒体连接等，主要是对声音、图像具有编辑处理的功能，即网页上提供的音频和视频下载及播放功能，包括Flash动画、声音与影片文件的播放。它必须通过网络媒体播放器来实现，有多种网络媒体播放器。如常用的有Windows Media Player和 Realone Player等播放器。,1.4 网站开发的流程,设计开发一个网站要考虑很多因素，如站点的定位、确定网站的目录和链接结构、首页的设计制作及网站的测试、发布和维护等，这些因素的考虑，是一个环环相扣的过程，要想设计制作一个成功的网站，对每一个环节的把握都十分重要。,1.4.1 确定网站的目的和主题 设计一个站点，首先要确定网站主题。主题也就是网站的题材。要选择一个好的主题，就需要注意以下几点： 1) 主题要小而精。“小”即定位要小，“精”即内容要精。 2）题材最好是自己擅长或者喜爱的内容。 3）题材不要太平或者目标太高。 给网站起名时应做到以下几点： 1）名称要正。 2）名称要易记。 3）名称要有特色。 总之，定位题材和名称是设计一个网站的第一步，也是很重要的一部分。如果能想到一个满意的名称，花费一点时间也是值得的。,1.4 网站开发的流程,1.4.2 定位网站CI形象 CI形象是借用的广告术语。(CI是英文corporate identity的缩写)，意思是通过视觉来统一企业的形象。企业一般都要通过CI形象的策划来提高知名度，它是一种营销战略。如较早地成功导入CI战略的世界知名公司有可口可乐、SONY、三菱、麦当劳等。一个网站，和实体公司一样，也需要整体的形象包装和定位准确的、有创意的CI 设计，这样对网站的宣传推广有事半功倍的效果。网站主题和名称定下来之后，需要思考的就是网站的CI形象设计。网站的CI形象设计和企业的CI形象设计的内容相似，主要包括：,1.4 网站开发的流程,1.4 网站开发的流程,1.4.2 定位网站CI形象 1. 设计网站的标志(logo) 即网标。和商品的商标、企业的标志一样，网标是站点特色和内涵的集中体现，看见它就让人联想到它所代表的站点。如新浪网的 网标就体现出新浪网的快捷、准确、精华的特色。 标志图形可以只由中文、英文字母构成，也可以只由符号、图案（动物、植物、人物、几何）构成，还可以由文字和图形构成。如：soim是用soim的英文做为标志，新浪用字母sina和眼睛作为标志。标志的设计创意来自网站的名称和内容。 1）以用与网站名称相关的人物，动物，花草等作为设计的主体对象，通过抽象、概括、变形等手法，使之艺术化、标志化，如迪斯尼的米老鼠、搜狐的卡通狐狸等。 2）专业性较强的网站，可以以本专业有代表的物品作为设计的主体对象。如中国银行的古钱标志、奔驰汽车的方向盘标志等。 3) 最常用和最简单的方式，是用网站的英文名称的字体作为设计的主体对象，用不同的字体、字母的变形及字母的组合，使之艺术化、标志化。,1.4.2 定位网站CI形象 2. 设计网站的标准色彩 网站给人的第一印象来自视觉的冲击感，确定网站的标准色彩是相当重要的一步。不同的色彩搭配会产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指能体现网站形象和延伸内涵的色彩。如：IBM的深蓝色、肯德基的红色条型、Windows视窗标志上的红、蓝、黄、绿色块等，都会给我们不同的视觉感受。一般来说，一个网站的标准色彩不宜超过三种，太多会使人眼花缭乱。标准色彩要用于网站的标志、标题、主菜单和主色块，给人以整体统一的感觉。标准色之外的其它色彩也可以使用，只是作为点缀和衬托，不能大面积使用，以免影响整体感。,1.4 网站开发的流程,1.4.2 定位网站CI形象 3. 设计网站的标准字体 和标准色彩一样，标准字体是指用于标志、标题、主菜单的特有字体。网页默认的字体是宋体。为了体现站点的特有风格，可以根据需要选择一些特殊的字体。如，为了体现专业性，可以使用粗仿宋体；体现艺术性可以用广告体；体现亲切随意可以用手写体等。也可以根据网站所表达的内涵，选择更贴切的字体。目前常见的中文字体有二三十种，常见的英文字体有近百种，网络上还有许多专用的艺术字体下载，但要找到一种和网页内容相符的字体，也不是一件容易的事。严格的讲，标准字体是要经过设计加工的字体，是独一无二的字体，是不能从任何字库里直接任意选用的字体，所以，标准字体最好是根据网站的内容专门设计的字体，这种字体最好用图片的形式在网页上出现。,1.4 网站开发的流程,1.4 网站开发的流程,1.4.2 定位网站CI形象 4. 设计网站的宣传标语 网站的宣传标语，就是把网站的精神、目标用一句话或一个词来高度概括。类似生活中的广告语。如鹊巢的“味道好极了”、麦斯威尔的“好东西和好朋友一起分享”、Intel的“给你一个奔腾的心”等。 网站的标志、色彩、字体和标语，是一个网站树立CI形象的关键，也是一个网站档次高低的直接体现，所以，定位网站的CI形象，最好要有艺术设计人员参与。,1.4 网站开发的流程,1.4.3 资料收集、制作与整理 网站资料主要包括文本、图像两大类，大部分在放入网页前都需要做适当的修改和处理。另外，依据网站的主题亮点，还可能准备如声音、Flash影片、图像等需要在网页中展示的内容。搜集资料时范围要广泛，在进行网页设计时再整理与筛选。,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 站点确定后，接下来就要规划网站的结构，网站的结构分目录结构和链接结构。确定网站的结构目的是便于网站的使用和维护。 网站的目录是指在建立网站定义站点时创建的目录，如有类似“我的网页”的根目录和“我的家”的子目录。目录的结构是一个很容易忽略的问题，目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。如建立E:/我的网页我的家文字、图片、链接等较清晰的目录，就便于网站的管理和维护。 网站的链接结构是指页面之间相互链接的拓扑结构，它建立在目录结构基础之上，但可以跨越目录。形象地说：每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。确立网站的链接结构的目的是用最少的链接，使得浏览最有效率。,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 一般来说，确定网站的链接结构有两种基本方式： 1) 树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会“迷”路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。如: 校园动态-教师活动-学生活动 首页 教学园地-教师成果-学生作品,1.4 网站开发的流程,1.4.4 规划网站的目录结构和链接结构 2) 星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置、看了多少内容。如: 校园动态-教师活动-学生活动 首页 教学园地-教师成果-学生作品 这两种基本结构都只是理想方式，在实际的网站设计中，一般要将这两种结构混合起来使用。,1.4 网站开发的流程,1.4.5 首页的设计与制作 确立好了网站的结构，就可以对网站的首页进行设计了，首页的设计是一个网站成功与否的关键。用户往往看到第一页就已经对站点有一个整体的感觉，是不是能够促使他们继续点击进入或者使他们的视线留在站点上，首页设计的好坏是至关重要的,所以,首页的设计和制作是一定要重视和花费精力的,一般首页设计和制作占整个制作时间的40%左右,这样可以避免出现全部制作好以后再修改带来的麻烦。 首页，从根本上说就是全站内容的目录，是一个索引,但不是一个简单的目录的罗列，如何设计好一个首页呢？一般的步骤是：,1.4 网站开发的流程,1.4.5 首页的设计与制作 1. 确定首页的功能模块 首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块：网站名称(logo)、广告条(banner)、主菜单(menu)、新闻(whats new)、搜索(search)、 友情链接(links)、邮件列表(maillist)、计数器(count)、版权(copyright). 选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。,1.4 网站开发的流程,1.4.5 首页的设计与制作 2. 设计首页的版面 在功能模块确定后，开始设计首页的版面。就象搭积木一样，每个模块是一个单位积木，如何拼搭出一座漂亮的房子，就要看设计师的创意和想象力了。 设计版面的最好方法是先勾勒出理想中的草图，然后再用网页制作软件来实现。,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 整个站点编辑制作完成后,最终需要在服务器上发布.但在此之前必须对站点进行测试.测试以后,根据空间商所提供的资料,将本地站点发布到服务器上,并进行最后的测试. 在创建一个Web站点时,测试是绝对需要的,我们无法掌握用户的浏览器版本、类型，用尽可能多的浏览器和系统中浏览自己的页面是很关键的。在进行调整之前，必须对颜色、灰度系数、页面偏移和容量的变化进行观察。可以从Dreamweaver MX2004中进行一个比较基础、初级的测试类型，那就是代码测试。浏览器通常忽略了它们所不理解的标记和属性,但这些标记有可能产生意想不到的不好的效果,所以,要首先检查目标浏览器的兼容性，步骤如下：,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 (1) 打开【结果】面板组（单击【窗口】|【结果】命令），进入【目标浏览器检查】面板，单击面板左上角的绿色三角形按钮，在弹出的菜单中选择【设置】，系统弹出【目标浏览器】对话框，选择目标浏览器类型、版本。单击【确定】按钮。如图1-1所示。图1-1 目标浏览器类型、版本设定,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 (2) 单击面板左上角的绿色三角形按钮图标，在弹出的菜单中选择【为整个站点检查目标浏览器】或【检查目标浏览器】，随即开始运行检测报告，在面板下方出现在目标浏览器中的测试信息。如图1-2所示。图1-2 运行目标浏览器检查 单击面板左边的浏览报告按钮一个像地球形状的图标，可以打开一个窗口，先是目标浏览器检查结果，可以非常清楚地看到每个错误和警告信息，从而做相关的完善。,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 对站点进行测试，还必须从以下几个方面来完成。 1）应在尽可能多的不同的浏览器和平台上预览页面，查看布局、颜色、字体大小和默认浏览器窗口大小等方面的区别。这些区别在目标浏览器检查中是无法预见的。 2）检查站点是否有断开的链接，并修复断开的链接。由于其它站点也在重新设计、重新组织，所以所链接的页面可能已被移动或删除，可运行链接检查报告对链接进行测试。 3）监测页面的文件大小以及下载这些页面所占用的时间。由大型表格组成的页面，在某些浏览器中， 在整张表完全载入之前，访问者将什么也看不到。所以，应考虑将大型表格分为几部分，或者将少量内容放在表以外的页面顶部，这样在下栽表的同时，用户就可以查看这些内容。 4) 在完成对站点的发布以后，应继续对站点进行更新和维护。站点的发布（即激活站点）可以通过多种方式完成，而且是一个持续的过程。这一过程的一个重要部分是定义并实现一个版本控制系统，既可以使用Dreamweaver MX2004中所包含的工具，也可以使用外部的版本控制应用程序。 5）运行站点报告来测试并解决整个站点的问题，可以检查整个站点是否存在问题，例如无标题文档、空标签以及冗余的嵌套标签等。Dreamweaver MX2004提供了专业的站点测试报告，可以对当前文档、选定的文件或整个站点的工作流程或HTML属性（包括辅助功能）运行站点报告。具体步骤如下：,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 （1）打开已设计好的站点，选择【站点】|【报告】，命令系统弹出【报告】对话框。如图1-3所示。图1-3 【报告】对话框的参数设置 在【报告】面板上，可以在【报告在】下拉列表中选择测试报告的对象，即是对当前文档，还是整个当前站点，或是站点中的已选文件文件夹等等。在【选择报告】框中，有两个报告可供选择，其中工作流程报告是用于改进Web小组中各成员之间的协作。运行工作流程报告，可以显示谁取出了某个文件，哪些文件具有与之相关联是设计备注以及最近修改了哪些文件。但是，只有在定义远程站点连接的情况下，才能运行工作流程报告。若要定义远程站点，则要使用配置远程服务器。 另一个报告是HTML报告，可以对多个HTML属性编辑和生成报告。可以检查可合并的嵌套字体标签、辅助功能、遗漏的替换文本、冗余的嵌套标签、可删除的空标签和无标题文档。运行报告后，可将报告保存为XML文件，然后将其导入模板实例、数据库或电子表格中，再将其打印出来或显示在Web站点上。,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 （2）选择要报告的类别和要运行的报告类型。这里，以【整个当前本地站点】为例。在【HTML报告】处选中所有的条目。单击【运行】按钮，即出现站点报告，如图1-4所示。【站点报告】面板是组合在【结果】面板中的，单击【结果】面板右上角的【选项】按钮，可以选择将【站点报告】组合在其他面板。比如，组合在【代码检查器】面板重新运行报告，则此时站点报告会出现在【代码检查器】面板组中。如果只为站点运行辅助功能报告，可以选择【文件】|【检查页】|【检查辅助功能】命令，此时报告将出现在【代码检查器】面板组的【站点报告】面板中，如图1-5所示。图1-4 站点报告,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法图1-5 将【站点报告】组合在【代码检查器】中 （3）站点报告生成后，在报告中选择任意行。例如，单击第一行，然后单击【站点报告】面板左侧的【更多信息】按钮以了解有关问题的说明。相关信息随即出现在【代码】面板组的【参考】面板中。如图1-6所示。,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 图1-6 查看检查结果的详细信息,1.4 网站开发的流程,1.4.6 网站测试与发布 1. 网站测试项目及方法 上述信息说明标签IMG缺少有效的ALT属性。 双击报告中的任意行可以在【文档】窗口中查看相应的代码。如果正在使用【设计】视图，则Dreamweaver MX2004将更改显示来拆分视图，从而以代码的形式显示报告的问题。最后单击【保存报告】 按钮来保存该报告，保存格式可以为.Xml，这样便于日后查看。,1.4 网站开发的流程,1.4.6 网站测试与发布 2. 网站的发布 将网页设计完成并测试成功之后，接下来就是要将它正式发布到Internet上。如果没有商业用途，仅仅只是为了娱乐，最好的方法就是上网申请一个免费网页空间，这样既不花钱，又能看到自己的成果。 申请免费的个人主页空间之前，需要注意以下几点： 1）网站空间的容量。免费网站空间可能提供5MB到20MB不等容量，要先衡量一下自己的网页大小，再进行申请。 2）义务性广告。申请免费网页空间，有时不可避免要附带提供方的广告，一般来说都是当开通网站时才会自动打开广告小窗口，有些是在网站顶部自动生成广告栏，大都不会影响网站的浏览。 3）文件上传的方式。每个系统所允许的上传方式可能会不同，虽然现在大部分的网站均使用FTP方式来上传文件，也可以使用cuteftp或者是Dreamweaver MX2004来实现上传。在各大搜索引擎中输入“免费空间”，即可找到无数条相关信息，选择合适的网站，即可申请一个免费主页空间。 但是免费主页空间有很多缺点，如太多人使用，空间小，频带窄，易堵塞，而且多数需要义务性广告，随时会被取消服务。因此，在经济允许的条件下，可以申请收费空间。提供收费空间的网站很多，价格也比较合适。 申请好网页空间后，接下来就要将整个网站上传到服务器。利用Dreamweaver MX2004内置的FTP功能来上传，具体步骤如下：,1.4 网站开发的流程,1.4.6 网站测试与发布 2. 网站的发布 （1）打开【站点定义】（【站点】【管理站点】【编辑】）对话框，选择分类中的【远程信息】，如图1-7所示。将【访问】、【FTP主机】、【主机目录】等进行设定，最后单击【确定】按钮。图1-7 设定远程信息,1.4 网站开发的流程,1.4.6 网站测试与发布 2. 网站的发布 （2）准备上传作品，单击【文件】面板上的【联接到远端主机】按钮。如图1-8所示。图1-8 开始连接远程服务器 （3）当寻找到远程服务器后，便会在【文件】面板看到远程服务器的当前文件目录。 （4）打开扩展的【文件】面板，单击【站点】【上传】命令，系统弹出提示“你确定要上传整个站点吗？”，单击【确定】按钮，上传开始。,1.4 网站开发的流程,1.4.6 网站测试与发布 2. 网站的发布 通过上述操作可实现站点的发布和使用，但还需要使用同样的工具来进行日常维护工作，从而保持内容更新和页面的可用性。利用Dreamweaver MX2004的同步化功能，可以实现同步管理本地文件和远程文件，步骤入下： （1）打开扩展的【文件】面板（单击【文件】面板上的【扩展/折叠】按钮）。单击【站点】【同步】，系统弹出【同步文件】对话框。如图设定【同步】目标和【方向】，并选中【删除本地驱动器上没有的远端文件】复选框，最后单击【预览】按钮。 （2）接着出现检测的结果，【站点】对话框中显示，有哪些文件是【本地文件】内更新过的文件，而需上传至远程网站的。在此对话框中，可再次确认如果不想上传或删除某些文件，只需将文件名前的“”取消即可。单击【确定】按钮后，即开始更新操作。如图1-9所示。图1-9 【同步文件】对话框,1.4 网站开发的流程,1.4.6 网站测试与发布 2. 网站的发布 （3）当完成更新后，会在相同的对话框中显示整个更新的结果，最后单击【关闭】按钮，完成整个同步化更新的工作， 同步更新文件的【方向】，还可以选择【从远程获得较新的文件】或【获得和放置较新的文件】，做到真正的两地同步。 如果一个网站有多人协作管理，常会发生一个文件多人修改的问题，最后不知道哪个文件才是最新的，这就要利用【存回】和【取出】命令来控制文件的修改权，可以很好地解决这个问题。打开扩展的【文件】面板，单击【站点】【管理站点】，打开【站点定义】对话框，在【远程信息】分类中，启用【存回和取出】（选中该复选框）。在【取出名称】中输入airbrush，【电子邮件地址】中输入.单击【确定】按钮完成.如果要修改friends.asp文件那么选中远端站点的 friends.asp,单击【取出】按钮,接着弹出【相关文件】对话框,询问是否要包括相关的文件一同取出,在此选取【是】,可以看到选取的文件friends.asp前方出现了绿色的勾,表示已经将此文件取出,现在再将它打开、编辑就不用担心别人也打开同样的文件了。在该文件后方显示了取出者。,1.4 网站开发的流程,1.4.7 网站维护与推广 网站建好后，要推广它，首先可以利用Email通知亲朋好友，最好在Email中加入简介和网址，既简单又快速。为了增加站点的访问量，可以到搜索引擎中登记主页,但目前这是收费服务，如果要申请服务，可以直接到相关网站上查询，依照网站登记步骤一步一步进行下去即可。,1.5 网站设计的要求,1题材引人注目 只有题材引人注目，才有可能吸引更多的浏览者，并给他们留系深刻的印象，使之能继续浏览网站的内容。所以在选择题材时要根据我们前面学习的方法来选择，慎之又慎。 2栏目布局合理 设计制作网页时最容易犯的错误就是确定好题材后立刻开始制作，这样往往会出现网站结构不清晰、目录庞杂、内容放置无规律等不足，造成浏览者看不明白，扩充和维护网站也困难的后果。建立网站就如同写文章，首先要拟好提纲，文章才能主题明确、层次清晰；也类似造高楼，首先要设计好框架图纸，才能使楼房结构合理。所以，在制作网页前，一定还要确定好栏目内容及设计好版面布局。,1.5 网站设计的要求,2栏目布局合理 1) 栏目内容的确定 栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在确定栏目的时候，既要仔细考虑，又要合理安排。网站栏目确定和安排要做到以下几点： (1)确定栏目要紧扣主题 即将网站主题按一定的方法分类并将它们作为网站的主栏目。如以动画题材为主的网页可以将栏目分为动物动画、标志动画、三维动画、卡通动画等，在首页上标明最近更新的动画。要使主题栏目个数在总栏目中要占绝对优势，这样的网站显得专业、主题突出，容易给人留下深刻印象。 (2)要设一个最近更新或网站指南的栏目 首页设立一个“最近更新”的栏目，以便照顾常来的访客，使主页更具人性化。如果主页内容庞大(超过15MB)、层次较多，又没有站内的搜索引擎，就需要设置“本站指南”栏目，这样可以帮助初访者快速找到他们想要的内容。 (3)要设定一个可以双向交流的栏目 设定如论坛、留言本、邮件列表等双向交流的栏目，可以让浏览者留下他们的信息，这样可使站点更具有亲和力。 (4) 要设一个下载或常见问题回答栏目 网络的特点是信息共享。如果用户看到一个站点有大量的优秀的有价值的资料，他肯定希望能一次性下载，而不是一页一页浏览存盘。如果在主页上设置一个资料下载栏目，会给浏览者带来很大的方便；另外，如果我们的站点经常收到浏览着关于某方面问题的来信，最好在网页再设立一个常见问题回答的栏目，以便我们不断学习和更新网页。,1.5 网站设计的要求,2栏目布局合理 1) 栏目内容的确定 总结以上几点，我们得出确定栏目的原则是：尽可能删除与主题无关的栏目；尽可能将网站最有价值的内容列在栏目上；尽可能方便访问者的浏览和查询。,1.5 网站设计的要求,2栏目布局合理 2) 版面布局的设计 版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个用户的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素、800*600像素、1024*768像素等不同尺寸。 布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置，布局要符合站点整体的创意，同时它也是一个创意的问题，但要比站点整体的创意容易、更有规律。版面布局的步骤是： (1) 草案 新建页面就象一张白纸，没有任何表格、框架和约定俗成的东西，我们可以尽可能的发挥想象力，将想到的“景象”画上去，尽量多画几个方案，最后选定一个满意的作为继续创作的脚本。 (2) 粗略布局 在草案的基础上，将确定需要放置的功能模块安排到页面上。安排页面时，一定要遵循突出重点、平衡协调的原则，即将网站标志、主菜单等最重要的模块放在最显眼、最突出的位置，然后再考虑次要模块的放置。 (3) 定案 即将粗略布局精细化，具体化。,1.5 网站设计的要求,2栏目布局合理 2) 版面布局的设计 在布局过程中，常遵循的法则有： 平衡和对称。对称指上下左右对照分布的形式，主要强调秩序感，能达到安定平实、和谐的效果；平衡指上下左右虽然不完全对称，但却能达到视觉上的均衡，也能达到一种视觉稳定的效果，但比完全对称的形式显活泼。 对比。所谓对比，目的是为了强调和突出，不仅要在构成元素的性质（图形和文字）、色彩搭配上来对比表现，也要在内容上的古与今、新与旧存在对比。 凝视。所谓凝视，就是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。 空白。空白有两种作用，一方面对其它网站表示突出；另一方面也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。 图片。即尽量用图片来解说，对不能用语言说服、或用语言无法表达的情感，就要用图片来解说的内容，可以传达给浏览者的更多的信息。 上述的设计法则，如果能领会并活用到页面布局里，页面视觉效果就会更好。如：网页的白色背景太虚，则可以加些色块；版面零散，可以用线条和符号来串联；左面文字过多，右面则可以插一张图片保持平衡；表格太规矩，可以改用导角等等。,1.5 网站设计的要求,2栏目布局合理 2) 版面布局的设计 常用到的版面布局形式有： “T”字型结构布局。所谓“T”结构。就是指页面顶部为横条网站标志和广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母“T”,所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰、主次分明，是较容易学习和掌握的布局方法。缺点是规矩、呆板，如果细节色彩上再处理不好（没有对比），就会让人觉得无味。 “口”字型布局。就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型进行设计，如网易壁纸站。 “三”字型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。 对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。 POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，如ELLE.com等。优点是显而易见、漂亮、吸引人。缺点是速度慢。,1.5 网站设计的要求,2栏目布局合理2) 版面布局的设计 以上只是常见的布局形式，要想设计出别具一格的布局形式，还要经过长期的实践学习不断提高视觉感受能力后才能实现。版面在布局过程中，还应注意做到以下几点： 要加强页面的视觉效果； 要加强文案的可视度和可读性； 要统一整个页面的风格； 要具有新鲜感和个性化。,1.5 网站设计的要求,3. 网站的结构清晰 指网站的目录结构和链接结构清晰明了。要使网站的目录结构清晰，一般做法是： 1）不要将所有文件都存放在根目录下。不要为了方便，将所有文件都放在根目录下。这样做的不利影响是一方面造成文件管理混乱，使我们常常搞不清哪些文件需要编辑和更新、哪些无用的文件可以删除、哪些是相关联的文件，很影响工作效率；另一方面造成上传速度慢，服务器一般都会为根目录建立一个文件索引。当所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。这样很明显文件量越大，等待的时间也将越长。所以，要尽可能减少根目录的文件存放数。 2）要按栏目内容建立子目录。子目录的建立，首先要按主菜单栏目建立。如:网页教程类站点可以根据技术类别分别建立相应的目录，象Flash、Dhtml、Javascript等；企业站点可以按公司简介、产品介绍、价格，、在线定单、反馈联系等建立相应目录。其它的次要栏目，若友情连接内容较多、需要经常更新的可以建立独立的子目录。而一些相关性强、不需要经常更新的栏目，如：关于本站、关于站长、站点经历等可以合并放在一个统一目录下。为了便于维护和管理，所有程序一般都存放在特定的目录，如：CGI程序放在cgi-bin目录；所有需要下载的内容也最好放在一个目录下。 3）在每个主目录下都建立独立的images目录。一个站点根目录下都有一个默认的images目录,主页制作时，不要将所有图片都存放在这个目录里,如果这样,我们将某个主栏目打包供浏览者下载，或者将某个栏目删除时，图片的管理会相当麻烦。为了方便管理,为每个主栏目建立一个独立的images目录是很必要的,而根目录下的images目录只是用来放首页和一些次要栏目的图片。 4）目录的层次不要太深。为了维护管理方便,目录的层次一般不要超过3层。,1.5 网站设计的要求,3. 网站的结构清晰 其它需要注意的有： 不要使用中文目录.网络无国界，使用中文目录可能对网址的正确显示造成困难； 不要使用过长的目录.尽管服务器支持长文件名，但是太长的目录名不便于记忆； 尽量使用意义明确的目录.上面的例子中，我们可以用Flash、Dhtml、Javascript来建立目录，也可以用以上三种方法建立目录，但是更明确、更便于记忆和管理的还是应用前者。,1.5 网站设计的要求,3. 网站的结构清晰 要使网站的链接结构清晰明了，一般做法是：首页和一级页面之间用星状链接结构，一级和二级页面之间用树状链接结构。如：一个新闻站点的页面结构如下： 一级页面 二级页面 财经新闻页 - 财经新闻1，财经新闻2. / | 首页 - 娱乐新闻页 - 娱乐新闻1，娱乐新闻2. | IT新闻页 - IT新闻1，IT新闻2. 其中，首页、财经新闻页、娱乐新闻页、IT新闻页之间是星状链接，可以互相点击，直接到达。而财经新闻页和它的子页面之间是树状连接，浏览财经新闻1后，我们必须回到财经新闻页，才能浏览IT新闻2.所以,如果为了免去返回一级页面的麻烦，可将二级页面直接用新开窗口(POP up windows)打开，浏览结束后关闭即可。,1.5 网站设计的要求,3. 网站的结构清晰 以上我们都是用的三级页面举例。如果站点内容庞大、分类明细，需要超过三级页面，那么一定要在页面里显示导航条，帮助浏览者明确自己所处的位置。 另外，随着电子商务的推广，网站竞争的越