网站设计与网页

1、1,第1章 网页设计与网页文件规划,学习目标 如何给网站定位 网站设计原则 网站建立步骤 域名的相关知识 网页文件如何规划 了解常用网页制作工具和网页编程语言,2,第1章 网页设计与网页文件规划,教学内容 1.1 定位网站的系统、类别和形象 1.2 网站建立步骤 1.3 网页规划和步骤 1.4 网页制作工具 本章小结,返回总目录,3,1.1 定位网站的系统、类别和形象定位网站的系统,在因特网飞速发展的今天，网络技术和与之相应的建立网站、制作网页，已经成为最吸引人的技术。 从网站功能考虑，网站系统可以划分为以下方向： 1辅助政府部门进行国家管理。 2为新闻和宣传提供平台。 3为商业活动提供交易平

2、台。 4为科研和学术交流服务。 5没有任何商业目标的公益性网站和个人爱好网 站。,返回目录,4,1.1 定位网站的系统、类别和形象定位网站的类别,网站的类别比较繁杂，从信息流转和提供服务的方式出发，可以分为以下几类： 1门户类网站 2信息发布类网站 3电子商务类网站 4资源服务类网站 5娱乐游戏类网站 6远程教育和医疗诊断类网站,返回目录,5,1.1 定位网站的系统、类别和形象定位网站的形象,衡量网站建设是否成功，一个重要指标是该站点的访问量，准确的形象定位对于提高网站的点击率至关重要。网站形象是指它主要侧重的内容和功能。 1人们感兴趣的网站内容通常有： （1）新闻（包括时事新闻、体育新闻、财

3、经新闻、娱乐新闻等）。（2）求职、招聘、交友、征婚信息。 （3）计算机软件和硬件信息。（4）科教医疗信息。 （5）金融证券信息。（6）商贸信息和各类广告。 （7）休闲、旅行、娱乐信息。 （8）电子书籍和影视。,返回目录,6,1.1 定位网站的系统、类别和形象定位网站的形象,2人们感兴趣的网站功能通常有： （1）搜索引擎和信息查询。 （2）电子邮件和免费电子信箱。 （3）免费个人主页空间。 （4）软件的上传与下载。 （5）网上聊天室、新闻组、BBS、发送短信。 （6）实时股票信息和网上股票交易服务。 （7）网上游戏娱乐。 （8）网上商务活动、网上购物、网上结算。,返回目录,7,1.1 定位网站的

4、系统、类别和形象了解网站设计原则,设计网站有下面一些基本原则： 1内容明确 2抓住用户 3点击规则对于小型网站，主页上任何一条信 息点击次数不超过3次，被称为3次点击规则。对 于大型网站，可使用导航和工具条来改善操作。 4学习HTML 5优化网站构架 6避免使用特殊字体，尽量减少图片 7避免长文本和错别字,返回目录,8,1.2 网站建立步骤了解网站费用,网站费用由建站费用和运作费用产生，包含以下几个方面： 1域名费用域名分级别，不同级别的域名收 费是不同的。 2服务器硬件设备费用一个网站的硬件至少 包括计算机和网络接入设备，这笔费用应根据网 站规模而定，不必过分铺张。 3系统软件费用和开发维护

5、费用 4网站的市场推销费用和经营费用要提高自 己的市场份额，应加强宣传并提高服务质量， 这笔费用是应该考虑的。,返回目录,9,1.2 网站建立步骤网站的结构,网站的逻辑结构由四部分组成 ： 1服务器部分包括计算机硬件、操作系统、 WWW程序、电子邮件程序等。 2网络接入部分和网络安全系统包括 路由 器、调制设备和网络安全系统 。 3数据存贮部分和中间件数据存贮存 系统要 有海量存贮能力，高速搜索能力，有效的数据采 集、制作和发布能力。中间件介于服务器系统和 数据存贮系统之间。 4研发和维护部分 此部分贯穿于网站从建立 到消亡的全过程，需要专人负责。,返回目录,10,1.2 网站建立步骤申请域名

6、,域名是网站在因特网上的门牌号码，也可看作网站在因特网上的商标，只有知道了域名才能访问网站。域名的命名基于IP地址层次化的主机命名方式，由26个英文字母、10个阿拉伯数字、减号和下划线组成，用圆点分隔成几节，字母不区分大小写。域名应选择简短、有意义、容易记的单词。域名有惟一性。域名可以进行交易，买卖或过户。 域名分级别，从右向左依次为最高级（也称顶级）、次高级等，最左边为主机名。 顶级域名有2类：机构域和地理域。机构性域名由三个字母组成，地理性域名由两个字母组成。见表1和表2。,返回目录,11,1.2 网站建立步骤申请域名,表1机构域,返回目录,12,1.2 网站建立步骤申请域名,表2地理域,

7、返回目录,13,1.2 网站建立步骤接入Internet的方式,接入因特网的方式通常有三种： 1专线接入 花费较大但优势明显， 一线多用，提供的服务内容也多。 2服务器托管将Web服务器由其他网 络公司托管，费用比第一种接入方式低 的多，但需要远程维护，技术要求高。 3虚拟主机 租用某些ISP（Internet Service Provider）的剩余磁盘空间，这些空间一般允许 个人网站免费使用，节省了购买服务器的费用， 但需要远程管理，受到的限制也比较多。,返回目录,14,1.2 网站建立步骤网站服务器设备,选择服务器要综合考虑各方面因素，如：价格、性能、安全性、可扩展性。 1单从价格出发，

8、应首先考虑PC服务器，PC服务器又分工作组级、部门级和企业级三档，价格各不相同，可根据网站规模确定使用何种级别的PC服务器。 2单从性能出发，Unix服务器占有一定优势，是高端系统的首选。 3如果选择PC服务器，操作系统一般为：Windows NT或Windows 2000或Linux。如果选择小型机为服务器设备，一般使用Unix为平台。,返回目录,15,1.3 网页规划和步骤网页文件规划,网页文件规划要遵循三个基本原则：内容、速度和页面美观，其中内容最重要。 1规划主页 严格来说，主页（Home Page）和网页（Web page）是两个不同概念，主页是指登陆到网站后看到的第一个页面。主机上

9、默认首页名称是固定的，不能随便起，要符合根据远程服务器的要求，通常为index.htm或index.html或default.htm或default.html。 主页的一个重要的功能是导航，利用超链接指引用户查询保存在网址或其他位置的信息，超链接层数不能太多，最好以关键字或词语形式查询信息。,返回目录,16,1.3 网页规划和步骤网页文件规划,2设计网站标志(logo) 网站标志就如同商品的商标一样，是站点特色和内涵的集中体现，好的标志能让人看见logo就联想到拥有该标志的网站。标志可以是汉字、英文字母、动物或人物的符号、图案等。 3设计网页的色彩 视觉冲击是网站给人的第一印象，好的色彩搭配能

10、体现网站形象，延伸网站内涵，还能直接影响访问者的情绪。通常，网站的主要色彩不要超过3种，用于网站标志、标题、主菜单和主色块，显得整体统一。其他色彩可作为点缀和衬托，不能喧宾夺主。,返回目录,17,1.3 网页规划和步骤网页文件规划,4规划页面 规划页面就是规划页面布局。包括主页在内的所有页面都应该简洁清晰，以最少的元素表达最多的信息。整体风格要与页面所表述内容一致。 5设计网页的图形和背景 图形是WWW网站的特色之一，具有醒目、吸引 人和传达信息形象的作用。适当运用图形可以为网页增色，应用不当也会带来反效果。图形的传输远没有文字传输快，要充分考虑图形文件的大小和传输速率。背景也是如此，虽能使页

11、面美观，但却耗费传输时间。,返回目录,18,1.3 网页规划和步骤网页文件规划,6网页文本 文本通常是网页的主要内容，也是网站经常更新的部分。网站成功与否，内容很关键。网页上文字的字体、颜色等属性要与页面整体风格匹配，并贯穿整个网站建设，尽量不用闪烁文字。 7联系方式 提供联系方式使访问者与自己联系或发表意见，是网页文件规划中不可缺少的，通常应提供电子信箱、电话号码、传真、通信地址等。 8.留言本 留言本可以方便自己与网页访问者交流，访问者对,返回目录,19,1.3 网页规划和步骤网页文件规划,网站的评价可以写在留言本里，回答问题也可以在留言 本里进行。 9网页文件放置 一般的小网站可以将所有

12、文件放在同一文件夹中， 大一点的网站则在网站文件夹中设置子文件夹，将本网 站所有相关文件分门别类放入子文件夹。 10计数器和聊天室 如果想知道网站的访问次数，还可以在主页上为网 站设置一个计数器。也可申请免费聊天室程序，链接 添加到主页中。,返回目录,20,1.3 网页规划和步骤网页框架,网页框架指网页文件系统的组织结构，合理的框架可以让Web页面井井有条，在实际管理中减少不必要的错误。组织站点的基本原则是一个页面一个主题，避免大主题，把大主题分成几个子主题，用主页把所有页面联起来，在主页中加入指向其他页面的链接，并附带简短描述性文字，将读者带入不同主题的领域。在每个页面加入超链接，方便读者按

13、按自己意愿阅读。,返回目录,21,1.3 网页规划和步骤网页制作步骤,网页制作一般分为如下步骤： 1将主题拆分为若干子主题，为每个子主题制作网 页。 2为子主题网页划分区域，可使文本、图形有所分 隔。此设计相对自由。 3为主页划分区域，合理安排网站名称、网站标 志、公共导航等必要内容，并在主页上为每个子主题建 立带描述性文字的超链接。,返回目录,22,1.4 网页制作工具网页制作应用软件,目前比较流行的用于Web页面制作的应用软件有以 下几种： 1FrontPage 2Dreamweaver 3Fireworks 4Flash 5Photoshop,返回目录,23,1.4 网页制作工具网页编程

14、语言,要提高网页制作技术，除了掌握网页设计软件的 使用，还应了解掌握必要的Web页面开发语言，下面介 绍几个流行的Web页面开发语言: 1HTML（Hypertext Marked Language）语言 2XML（Extensible Markup Language）语言 3VRML（Virtual Reality Modeling Language）语言 4ASP（Active Server Pages）语言 5PHP（Hypertext Preprocessor）语言 6Java语言 7JavaScript语言 8JSP（Java Server Pages）语言,返回目录,24,本 章 小 结,定位网站的系统、类别和形象 因特网是信息的