tp6-网站设计和网页布局技术(一).doc

第六章 网站设计和页面布局技术（一） 一、网站的开发流程 需求分析――网站制作――测试网页――发布网站 1、需求分析：需求分析之所以重要，是因为他具有目的性、方向性、决策性。他的任务就是解决“做什么”，就是要全面地理解客户的各项需求，并且能够准确、清晰地表达给参与项目开发的所有成员，保证开发过程按照客户的需求去做，而不是为技术而迁就需求。 客 户 需 求 业务背景 (网站功能) 网上求职类 选择原则： *主体要小而精炼 *题材最好是自己熟悉的 *题材不要太滥 注意： *建设的网站不要“面面俱到” *建设专业性要强 *主体要鲜明 网上聊天/即时信息/ICQ类 网上社区/讨论/邮件列表类 信息技术类 网页/网站开发类 娱乐类 旅行类 参考/资讯类 家庭/教育类 生活/时尚类 设计风格 合理的网页布局，让网站logo尽可能地出现在每个页面的页眉中。 将文字、链接、图片、背景、边框等尽量与主色调一致 突出字体特色：在关键的标题、菜单、图片里使用统一字体和颜色。 使用特效，让网页看起来生动活泼。 网站主体鲜明，整体实用性强、内容切合度好等。 网站内容 (例：淘宝网） 公司简介、商品分类、商品展示、价格信息、商品有哪些信誉好的足球投注网站、网上订单、会员注册、客户服务等。 确 认 需 求 制作网站之前，最好让美工人员或UI（user interface用户界面）设计人员将需求捕获活动结果加以适当的分析，然后设计一个用户可以直接感知的静态的网站样板，也就是要做网站的静态图片版。方便用户与开发人员就网站系统的业务背景、设计风格、网站内容达成共识，并建立需求变更制度与流程，方便后期的制作与完善。 2、网站制作：主要包括创建站点、制作首页、制作模板、制作样式。 3、测试网页： 第一，页面的效果是否美观：整体视觉效果、美工设计、页面布局、内容实力、亲和力； 第二，页面中的链接（Dreamweaver 中的“检查链接”命令）是否完好； 第三，是否兼容不同的浏览器。 4、发布网站： 本地发布 通过IIS来构建本地web 发布平台，这种发布只能让局域网中的用户访问站点。 远程发布 即登录到Internet 上，然后利用有些Internet 服务商提供的个人网站控件来真是地发布网站：首先要申请一个域名和虚拟主机，申请成功后Internet服务商就会给你一个IP地址、用户名和密码，使用此IP地址、用户名和密码就可以把网站上传到Internet 上，Internet 上的用户才能访问到你的站点。 二、创建站点 1、步骤： 本地站点（静态网站）： 第一步： 在本地磁盘创建一个文件文件夹：用于存放站点，可以空，也可以非空。 第二步： 站点——管理站点——新建——站点——输入站点名称（就上上一步在磁盘中创建的文件夹的名称）——下一步——选择“否，我不想使用服务器技术”——下一步——选择“编辑我的计算机上的本地副本，完成后在上传到服务器（推荐）”单选按钮——单击“您把文件存放在计算机的什么位置？”右边的文件夹图标——选择第一步创建的文件夹——下一步——在“您如何链接到远程服务器？”下拉列表框中选择“无”——完成——确定（窗体右边就会出现一个“文件”视图） 第三步： 在站点中创建文件夹：右击上一步创建的站点——新建文件夹（用来保存素材和各种网页） 2、关于站点 本地站点 本地站点是指存储web文件夹和文档的文件夹。定义站点是设计网站的第一步，包含的文件存储在本地磁盘中。当需要更新网站的文件时，就可以编辑本地站点中相应的页面，然后上传到远程服务器进行更新。 *必须为每个网站定义一个本地站点。 远程站点 也就是常说的网站（Web）服务器。在建立远程站点之前，必须先创建一个本地站点（该本地站点将与远程站点关联）。建立远程站点之后，即可上传文件或下载文件到本地站点中。 根文件夹 是指存储所有网站文件爱你的本地文件夹，站点的本地根文件夹应该是专门为该站点创建的。 三、页面布局技术 框架布局、表格布局、DIV层布局、最佳布局 框架布局 优点 *在框架窗口中支持滚动条，从而能显示更多内容。 *能有效的实现页面导航，方便用户浏览网页。 *由于框架集中相同的内容只用下载一次，不同的内容才需要重新下载，所以框架布局的网页能减少页面下载时间。 缺点 *浏览器兼容性差 *保存框架集网页麻烦（不但要保存框架集本身页面，还要半寸每个框架窗口中的网页文件 适用 论坛、小型商业网站、各种网页形式的教学课程 表格布局 优点 *规划页面：可以很方便的排列有规律、结构均匀的内容和数据。 缺点 *表格过多，会产生很多垃圾代码，影响下载速度。 *灵活性差