《网站设计与评价.ppt》由会员分享，可在线阅读，更多相关《网站设计与评价.ppt（40页珍藏版）》请在三一办公上搜索。
1、网站设计与评价,基本概念,网站就是因特网上具有相似性质、共同内容的一组信息资源。网页是用HTML语言写成的文件，它存放在某一台计算机中，而这台计算机必须是与因特网相连。网页文件最好以英文命名，并通常以“.htm”或者“.html”为扩展名，以保证在浏览器中的正常解析。,构成一个网站的基本元素是各种各样的文件以及存放这些文件的文件夹。,网页文件，用来描述资结构、位置，引导浏览者访问该网站，通常以“.htm”或者“.html”为扩展名。,网页文件所连接到的图像、音频与视频等资源文件,Web数据库和程序文件,基本概念,主页（Home Page）主页是通常用来表示访问某个网站时出现的第一个页面，用来对
2、整个网站进行概括性的介绍，描述其他各个页面的内容的。主页文件常以index或default命名，并通常用的扩展名有.htm.html.jsp.asp等。IE的主页表示IE浏览器启动时，即访问的网页地址。可以是一个网站的主页，也可以是一个普通的网页文件。,基本概念,网站的结构 网站是由网页组成的，网站是网页的集合体，网页是网站的元素。网站的结构就是指某一网站的信息组合的基本框架，它显示该网站中各个网页之间的逻辑关系。层次适当：一般以3到4层为佳 拓展性广：能够容纳信息的多变性和扩展性,基本概念,网站的结构主要有三种类型：,树状结构,线性结构,网状结构,树状结构：整个网站以主页作为中心，向外分散出
3、多个分支。树状结构是目前网站所采用的主要形式之一，它结构清晰，访问者可以根据路径清楚的知道所在位置。但在建立枝干的层次时，最多不应超过四个。,线性结构：线状结构是网站最简单的结构方式，网页一层层链接起来，逻辑清晰。单向线状只提供往下一层网页的链接；双向环状除了像单向线状那样链接外，还可以倒着从网页3回到网页2，从网页2回到网页1。无论是单向线状还是双向环状都不能在网页之间自由跳跃链接。,网状结构：在网络结构中有一个主页，所有的网页都可以和主页进行链接，同时，各个网页之间也随意链接。网页之间没有明显的结构，像一张网一样，可相互链接，随意跳转。如果网页信息内容不能科学分类，访问者容易在网页跳转过程
4、中迷失方向，很难快速找到所需要的信息。,网页制作工具,第一类是源代码型编辑工具 代表产品有HotDog、HomeSite、EditPlus等。第二类是“所见即所得”编辑工具 代表产品有FrontPage、Dreamweaver等。,网页制作工具,网页制作工具,HTML文档本身是文本格式的文件，可由任何一种文本编辑软件如写字板、记事本和Word等进行编辑，保存后，把文件扩展名改为.htm或.html，就可用浏览器浏览到相应的网页。HTML语言就是通过一系列特定的标签（Tag），来标识出相应的意义和作用，再通过浏览器把这些标签所代表的意义表示出来。,确定网点主题 设计网站风格（标志，主色调，文字效
5、果，版面布局）规划网站结构 了解网站运行环境 选择网站开发工具 分配网站开发任务,第二节 网站建设,一、建立站点,建立自己的主题网站，首先需要创建一个Web站点，用于保存和调试创建的网页。新建的网站首先要保存在本地硬盘上，待整个网站建好之后再发布。方法：执行“文件”“新建”“站点”，打开“新建站点对话框”,注意：不需要去D盘建立“080701”文件夹。,1、表格、框架布局网页,表格在网页中的作用 有条理地组织数据 控制网页布局插入表格以及表格基本操作“表格-插入”可以用表格工具栏手动绘制表格。表格、单元格的属性设置 给表格、单元格添加颜色 使用嵌套表格等,所谓框架是将一个浏览器的窗口分割成两个
6、或两个以上的窗格，每个显示区域叫做一个框架。每个框架可以显示一个独立的网页，一般情况下，可以用框架来保持网页中固定的几个部分，如网页大标题、链接按钮等，剩下的框架用来展现所选择的网页内容。框架网页的创建与其基本操作“文件-新建-框架网页”,2、添加网页元素编辑文字,1.菜单栏：“格式”“字体”，打开字体对话框，如右图。2.选中需要编辑的文字，右击，选择“字体”菜单命令，打开字体对话框，如右图。3.“格式”工具栏,3、添加网页元素插入图片,在网页中最常用的是GIF和JPG格式的图片，因为这两种图片的文件比较小，有利于提高网页的浏览速度。（“插入”-“图片”-“来自文件”）,插入其他格式的图片后，
7、在进行页面存储时，系统会自动将图片格式转换成GIF或JPF格式。,注意“图片”工具条的使用,4、添加网页元素插入动画（GIF格式）,提示：在“普通”模式中插入动画之后，默认只显示动画的第一帧图像，是静止的，进入“预览”模式后，就可以看见其动态效果了。“插入”-“图片”-“来自文件”,5、添加网页元素插入动画（Flash）,“插入”“高级”“插件”，打开“插件属性”对话框。通过“数据源”中的“浏览”找到所用的Flash动画文件,6、添加网页元素插入视频,“插入”“图片”“视频”，打开“视频”对话框。,右击视频，选择“图片属性”命令，并切换到“视频”选项卡，可以对视频做进一步的设置。,支持的视频格
8、式：.avi.asf.ram.ra,7、添加网页元素插入背景音乐,方法：在网页的空白处右击，选择“网页属性”“常规”选项卡“背景音乐。,8、建立超链接,超链接源文本、图片（整张图片、图片热点）超链接目标网站内部超链接 网页文件 图片、音频、视频等多媒体文件 一些压缩文件 网站外部超链接URL（统一资源定位器）超链接E-mail地址超链接（单击该连接向对方发送电子邮件，不需要输入对方的E-mail地址）,设置文本超链接的方法,1、选定要加入超链接的文本2、按下工具栏上的“超链接”按钮 或者选择“插入”菜单下“超链接”再或者右击所选文本，选择“超链接”，打开“创建超链接”对话框。3、选择或输入超链
9、接目标,超链接目标地址,设置整张图片超链接的方法,1、选定要加入超链接的图片 2、按下工具栏上的“超链接”按钮 或者选择“插入”菜单下“超链接”再或者右击所选图片3、选择或输入超链接目标,超链接的颜色,在网页中有三种不同状态的超链接（颜色不同）：未访问过的超链接正在访问的超链接已经访问过的超链接设置方法：在“网页属性”的“背景”选项卡中进行设置。,9、保存及预览网页文件,保存文件时，文件以英文命名。（Windows网络操作系统对英文大小写不敏感。）保存主页时，通常以“Index.html”命名。在保存文件过程中，将网页所使用到的图片文件，存于“images”文件夹中。文件保存后，单击网页编辑窗
10、口下方的“预览”标签，观察效果。,1、网页中的内容的检查：拼写错误、内容与栏目的一致性等2、网站中页面链接状态检查：要保证每一个网页有入口，有出口（可结合“报表与超链接”视图检查）3、网站中所用到的多媒体元素检查：格式恰当、大小合适4、外观测试 版面布局、文字效果、动态效果等 要在不同的浏览器中进行测试,第三节 网站的发布、管理与评价,网站的发布,1、局域网内本机发布（11）利用IIS（因特网信息服务器）在局域网内可实现网站的发布。发布为默认WEB站点，在本机可通过 或 访问。其他用户通过IP地址直接访问网站。,确定IP地址及端口号（一般采用如图设置）,确定网站所在的文件夹位置（一般采用英文命名）,确定网站主页文件名，并将其升到顶端,1、局域网内本机发布（12）利用IIS的虚拟目录在局域网内可实现一个IP地址发布多个网站。用户通过“IP地址/（虚拟目录）别名”访问网站。,网站的发布,2、在因特网上发布 使用因特网上的WEB服务器，选择合适的网站空间，实现网站在因特网上发布。购买自己的服务器（自管、托管）租用专用服务器租用虚拟主机（以上三种需向ISP申请IP，向CNNIC注册域名）申请个人主页空间（免费、收费）,网站的维护与管理,1、上传网页文件：一般使用FTP方式2、定期维护：网页维护、网页更新、网站升级3、宣传网站：到搜索引擎上注册、与别人交换友情链接、通过BBS宣传等,
