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

《tp6-网站设计和网页布局技术(一)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第六章网站设计和页面布局技术（一）一、网站的开发流程需求分析――>网站制作――>测试网页――>发布网站1、需求分析：需求分析之所以重要，是因为他具有目的性、方向性、决策性。他的任务就是解决“做什么”，就是要全面地理解客户的各项需求，并且能够准确、清晰地表达给参与项目开发的所有成员，保证开发过程按照客户的需求去做，而不是为技术而迁就需求。客户需求业务背景(网站功能)网上求职类选择原则：*主体要小而精炼*题材最好是自己熟悉的*题材不要太滥注意：*建设的网站不要“面面俱到”*建设专业性要强*主体要鲜明网上聊天/即时信息/

2、ICQ类网上社区/讨论/邮件列表类信息技术类网页/网站开发类娱乐类旅行类参考/资讯类家庭/教育类生活/时尚类设计风格合理的网页布局，让网站logo尽可能地出现在每个页面的页眉中。将文字、链接、图片、背景、边框等尽量与主色调一致突出字体特色：在关键的标题、菜单、图片里使用统一字体和颜色。使用特效，让网页看起来生动活泼。网站主体鲜明，整体实用性强、内容切合度好等。网站内容(例：淘宝网）公司简介、商品分类、商品展示、价格信息、商品搜索、网上订单、会员注册、客户服务等。确认需求制作网站之前，最好让美工人员或UI（useri

3、nterface用户界面）设计人员将需求捕获活动结果加以适当的分析，然后设计一个用户可以直接感知的静态的网站样板，也就是要做网站的静态图片版。方便用户与开发人员就网站系统的业务背景、设计风格、网站内容达成共识，并建立需求变更制度与流程，方便后期的制作与完善。2、网站制作：主要包括创建站点、制作首页、制作模板、制作样式。3、测试网页：第一，页面的效果是否美观：整体视觉效果、美工设计、页面布局、内容实力、亲和力；第二，页面中的链接（Dreamweaver中的“检查链接”命令）是否完好；第三，是否兼容不同的浏览器。4、发

4、布网站：本地发布通过IIS来构建本地web发布平台，这种发布只能让局域网中的用户访问站点。远程发布即登录到Internet上，然后利用有些Internet服务商提供的个人网站控件来真是地发布网站：首先要申请一个域名和虚拟主机，申请成功后Internet服务商就会给你一个IP地址、用户名和密码，使用此IP地址、用户名和密码就可以把网站上传到Internet上，Internet上的用户才能访问到你的站点。3二、创建站点1、步骤：本地站点（静态网站）：第一步：在本地磁盘创建一个文件文件夹：用于存放站点，可以空，也可以非空

5、。第二步：站点——>管理站点——>新建——>站点——>输入站点名称（就上上一步在磁盘中创建的文件夹的名称）——>下一步——>选择“否，我不想使用服务器技术”——>下一步——>选择“编辑我的计算机上的本地副本，完成后在上传到服务器（推荐）”单选按钮——>单击“您把文件存放在计算机的什么位置？”右边的文件夹图标——>选择第一步创建的文件夹——>下一步——>在“您如何链接到远程服务器？”下拉列表框中选择“无”——>完成——>确定（窗体右边就会出现一个“文件”视图）第三步：在站点中创建文件夹：右击上一步创建的站点——>新建

6、文件夹（用来保存素材和各种网页）2、关于站点本地站点本地站点是指存储web文件夹和文档的文件夹。定义站点是设计网站的第一步，包含的文件存储在本地磁盘中。当需要更新网站的文件时，就可以编辑本地站点中相应的页面，然后上传到远程服务器进行更新。*必须为每个网站定义一个本地站点。远程站点也就是常说的网站（Web）服务器。在建立远程站点之前，必须先创建一个本地站点（该本地站点将与远程站点关联）。建立远程站点之后，即可上传文件或下载文件到本地站点中。根文件夹是指存储所有网站文件爱你的本地文件夹，站点的本地根文件夹应该是专门为该

7、站点创建的。三、页面布局技术3框架布局、表格布局、DIV层布局、最佳布局框架布局优点*在框架窗口中支持滚动条，从而能显示更多内容。*能有效的实现页面导航，方便用户浏览网页。*由于框架集中相同的内容只用下载一次，不同的内容才需要重新下载，所以框架布局的网页能减少页面下载时间。缺点*浏览器兼容性差*保存框架集网页麻烦（不但要保存框架集本身页面，还要半寸每个框架窗口中的网页文件适用论坛、小型商业网站、各种网页形式的教学课程表格布局优点*规划页面：可以很方便的排列有规律、结构均匀的内容和数据。缺点*表格过多，会产生很多垃圾

8、代码，影响下载速度。*灵活性差，不易修改和扩展：当页面布局需要调整时，往往都要重新制作表格。适用适合用来布局很规整的内容或数据DIV层布局优点*减少页面代码，提高页面显示速度和下载速度。*结构清晰，容易被搜索引擎搜索到。*改版方便，而且缩短改版时间。*强大的字体控制和排版能力。*表现和内容向分离，方便美工与程序员分工协作。*更能体现样式和结构向分离，结构的重