网页设计教程

7
1.2 网站基础
返回目录
2、定位网站的类别
网站的类别比较繁杂，从信息流转和提供 服务的方式出发，可以分为以下几类：
1．门户类网站
2．信息发布类网站
3．电子商务类网站
4．资源服务类网站
5．娱乐游戏类网站
6．远程教育和医疗诊断类网站
8
等等
1.2 网站基础
返回目录
3、定位网站的形象
准确的形象定位对于提高网站的点击率至关重要。 网站形象是指它主要侧重的内容和功能。
1
第1章 网页设计基础
主要内容:
– 网页设计的几个基本概念 – 网站基础 – 网站设计 – 网页规划和步骤 – 了解常用网页制作工具和网页编程语言 – 前几界学生作品的正反面案例分析
重点内容: 文件、文件夹的命名规范，文件目 录结构与链接结构，页面规划和结构布局
难点内容:页面布局格式与规范及网页修饰与创意 原则，能据网站业务背景的不同确定网站功能， 并能够根据网站内容进行页面规划和结构布局.
人们感兴趣的网站内容通常有：
（1）新闻（包括时事新闻、体育新闻、财经新闻、 娱乐新闻等）。（2）求职、招聘、交友、征婚信息。
（3）计算机软件和硬件信息。（4）科教医疗信息。 （5）金融证券信息。（6）商贸信息和各类广告。 （7）休闲、旅行、娱乐信息。 （8）电子书籍和影视。
9
——定位网站的形象
返回目录
8、网站服务器设备
选择服务器要综合考虑各方面因素，如：价格、性 能、安全性、可扩展性。
1．单从价格出发，应首先考虑PC服务器，PC服务 器又分工作组级、部门级和企业级三档，价格各不相 同，可根据网站规模确定使用何种级别的PC服务器。
2．单从性能与安全出发，Unix服务器占有一定优 势，是高端系统的首选。
11
1.2 网站基础
5、网站的基本内容
按照国内外传统制作网站的要求，一个标 准的网站应该包括以下10项内容：
站点结构图（SITE MAP） 导航栏（NAVIGATION BAR） 联系方式页面（CONTACT PAGE） 反馈表（FEEDBACK FORMS） 引人入胜的内容（COMPELLING CONTENT） 常见问题解答（FAQs） 精美的图片（GOOD GRAPHICS） 搜索工具（SEARCHING MECHANISMS） 新闻页面（NEWS PAGE） 相关站点链接（RELEVANT LINKS）
3. 用自己网站的英文名称或字母组合做标志。 我校的网站标记
21
网站标志（ Logo ）
22
1.3 网站设计——定位网站的CI形象
返回目录
（2）设计网站的标准色彩
色彩是网站给浏览者的第一印象，不同的色彩搭配 会产生不同的效果，并可能影响到访问者情绪。
标准色彩：能体现网站形象和延伸内涵的色彩。
设计网站的标准色彩的原则：
12
返回目录
返回目录
1.2 网站设计基础——申请域名
6、申请域名
域名是网站在因特网上的门牌号码，也可看作网 站在因特网上的商标。域名的命名基于IP地址层次化 的命名方式，可由26个英文字母、10个阿拉伯数字、 减号和下划线组成，用圆点分隔成几节，字母不区分 大小写。域名应选择简短、有意义、容易记的单词。 域名有惟一性。域名可以进行交易，买卖或过户。
按客户提出 的要求和资料 进行整体规划
和页面设计
签定
合同并申 请域名和网
同意
页空间
不同意 将策划书提交客户审阅
进行网站的版面 编排和页面制作
不合格
修改 设计
不满意
设计完成并为客 户在各大搜索引
擎上注册
17
网站功能 检查测试
合格
向客户提 交完成稿
满意
1.3 网站设计——定位网站的主题
返回目录
3、网站主题的选择：（按功能和结构形式）
按表现形式可分为静态网页和动态网页。
3
静态网页与动态网页
返回目录
静态网页：指网页显示后（或显示期间）， 浏览器与服务器不再发生信息的交互。无法做进 行查询、留言、聊天、电子商务等操作，并不是 不动的网页，如FLASH动画。
动态网页指浏览器端和服务器端可以进行信 息交流的网页，即服务器可以根据浏览者的请求 做出相应动作和回复。常见的动态网页类型有 ASP、ASPX、PHP和CGI等等，其中以ASP动态 网页技术较成熟且易学。
➢ 4、网站与网页的关系
网站是网页、图片等文件的集合体，是网 5 页通过超级链接的形式组成的。
返回目录
➢ 5、网站的逻辑结构
1．服务器部分——包括计算机硬件、操作系统、 WWW程序、电子邮件程序等。
2．网络接入部分和网络安全系统——包括 路由 器、调制设备和网络安全系统 。
3．数据存贮部分和中间件——数据存贮存系统要 有海量存贮能力，高速搜索能力，有效的数据采 集、制作和发布能力。中间件介于服务器系统和 数据存贮系统之间。
4
网站与网页
返回目录
➢ 3、什么是网站
网站是互联网上一块固定的面向全世界发 布消息的地方。它由域名（即网站地址）和网 站空间构成。
可以将网站喻为一个摊位或地盘。如果一 个企业上了互联网，表示进入了世界上最大的 市场，此时也只不过是一个看客；而如果企业 建立了自已的网站，它就在市场中拥有了一个 “摊位”，可以宣传和展示自已产品。
定位要小，内容要精。调查结果显示，网络上的“主题站” 比“万全站“更受人们的喜爱。
题材不要太滥或者目标太高
“太滥”是指到处可见、人人都有的题材，例如，软件下 载、免费信息。“目标太高”是指在这一题材上已经有非常 优秀、知名度很高的站点，要超越是很难的。
19
1.3 网站设计——定位网站的名称
返回目录
返回目录
4、了解网站费用
网站费用包括建站费用和运作费用： 1．域名费用——域名分级别，不同级别收费不同。 2．服务器硬件设备费用——一个网站的硬件至少
包括计算机和网络接入设备，这笔费用应根据网 站规模而定，不必过分铺张。 3．系统软件费用和开发维护费用 4．网站的市场推销费用和经营费用——要提高自 己的市场份额，应加强宣传并提高服务质量。
4．研发和维护部分 ——此部分贯穿于网站从建立 到消亡的全过程，需要专人负责。
6
1.2 网站基础
返回目录
1、定位网站系统
从网站功能考虑，网站系统可以划分为以下方 向：
1．辅助政府部门进行国家管理。 2．为新闻和宣传提供平台。 3．为商业活动提供交易平台。 4．为科研和学术交流服务。 5．没有任何商业目标的公益性网站和个人爱 好网站。
色彩本身是无任何含义，有的话也只是人赋予
它的。但色彩确实可以在不知不觉间影响人的心理， 左右人的情绪，所以就有人给各种色彩都加上特定 24 的含义。
返回目录
1.3 网站设计——定位网站的CI形象
➢ 网页色彩搭配
不同主题的网站所应用的色彩是不同的。对于网 页设计者来说，色彩的心理作用尤其重要。
例如：绿色可以使人产生优雅、舒适的气氛，黄绿色有 青春、旺盛的视觉意境，而黑色则含有幽静、阴森的意境。
4、网站名称的选择
名称要正气 指合理、合法、合情，不能用反动的、色情的、迷信的、 危害社会安全的词句。 名称要简洁、易记 对于中文网站，网站名称最好用中文，不要用英文或者 中英文混合型名称。网站的名称的字数一般控制在6个字 （最好是4个字）以内，例如，“××阁”。 名称要有特色 较好的网站名称应该是能体现一定的内涵、韵味，并给 浏览者更多的视觉冲击和空间想象力。
域名分级别，从右向左依次为最高级（也称顶 级）、次高级等，最左边为主机名。基本结构为：
计算机主机名.机构名.网络名.最高层域名
顶级域名有2类：机构域和地理域。机构性域名由 三个字母组成，地理性域名由两个字母组成。
13
1.2 网站基础
返回目录
7、接入Internet的方式 1．专线接入 —花费较大但优势明显，提供
人们感兴趣的网站功能通常有：
（1）搜索引擎和信息查询。 （2）电子邮件和免费电子信箱。 （3）免费个人主页空间。 （4）软件的上传与下载。 （5）网上聊天室、新闻组、BBS、发送短信。 （6）实时股票信息和网上股票交易服务。 （7）网上游戏娱乐。 （8）网上商务活动、网上购物、网上结算。
等等
10
1.2 网站基础
20
1.3 网站设计——定位网站的CI形象
返回目录
5、CI（Corporate Identity）形象
指通过视觉来统一企业或个人的形象
（1）网站标志（logo）的设计
1. 网站有代表性的人物、动画、花草，可以用它 们作为设计的蓝本，加以卡通化和艺术化。 2. 网站是关于专业性的内容，可以以本专业有 代表的物品作为标志。例如：中国银行的铜板 标志、奔驰汽车的方向盘标志。
通常的选择是：重要内容的文字用非彩色（黑 色），边框、背 景、图片用彩色。
网页色彩搭配的原理： 注意色彩的鲜明性（引人注目） 注意色彩的独特性（使印象深刻） 注意色彩的合适性（色彩与内容气氛协调） 注意色彩的联想性。（色彩与网页内涵关联）
25
返回目录
1.3 网站设计——定位网站的CI形象
网页色彩搭配技巧 1.用一种色彩 指先选定一种色彩，然后调整透明度或者饱 和度，产生新的色彩。这样的页面色彩统一， 有层次感。
1. 一般不宜超过3种色彩。 2. 可以运用到网站的标志、标题、主菜单、图片
和主色块上。
23
返回目录
1.3 网站设计——定位网站的CI形象
色彩的选择与含义：（基本色）
•红色：代表热情、奔放、喜悦、庆典 •黑色：代表严肃、夜晚、沉着、恐怖； •黄色：代表高贵、富有 •白色：代表纯洁、简单 •蓝色：代表天空、清爽 •绿色：代表植物、生命、生机 •灰色：代表阴暗、消极 •紫色：代表浪漫、爱情 •棕色：代表土地
2 计划学时: 4学时
返回目录
1.1 网页设计的几个基本概念
1、什么是网页？ 一个网页是存储在某与互联网相连计算机中
的一个文件，通过网址（URL）来识别和存取。 在浏览器中输入网页网址，通过浏览器解释网页 文件，用户就可以浏览该网页。 ➢ 2、网页的分类
通常网页文件以htm 、html、asp、aspx 、 PHP、JSP等为扩展名。不同的扩展名分别代表不 同类型的网页文件。
以浏览器为客户端的Web应用程序开发
系统测试
网站发布
2、网站设计的主要阶段：
用户需求分析及变更（前期调研）
网站业务流程分析
系统分析及总体设计（撰写网站设计策划书）
界面设计、交互设计和程序开发
系统测试和文档编写
16
客户培训、技术支持和售后服务
1.3 网站设计—网站设计工作流程
客户提出要求
同客户讨论设计细节
新华网（http://www.xinhua.org）等 普及型网站 企业网站、大学网站、政府网站以及数量众多的个人网站 电子商务类网站 媒体信息服务类网站 办公事务管理网站（办公内部） 商务管理网站（企业内部）
18
返回目录
1.3 网站设计——定位网站的主题
网站主题的选择：（按内容形式） 主题要小而精
3．如果选择PC服务器，操作系统一般为：Windows NT或Windows 2000或Linux。如果选择小型机为服务器 设备，一般使用Unix为平台。
大网络一般使用Unix，小网络使用Windows
15
返回目录
1.3 网站设计——设计任务和开ห้องสมุดไป่ตู้过程
1、网站设计的主要任务：
网站平面构建设计（服务器端）
2.用两种色彩 选定一种色彩，然后选择它的对比色。
3.用一个色系
就是用一个感觉的色彩，例如，淡蓝、淡黄、 淡绿或黄、淡黄、棕黄等。
的服务内容多。
2．服务器托管——将Web服务器由其他网 络公司托管，费用比第一种接入方式低得多，但 需要远程维护，技术要求高。
3．虚拟主机 ——租用某些ISP的剩余磁盘空 间，这些空间一般允许个人网站免费使用，节省 了购买服务器的费用，但需要远程管理，受到的 限制也比较多。
14
1.2 网站基础
返回目录
第1章 网页设计基础
教学目的和要求: 掌握Web站点的有关概念、术语及其基本工作 原理，掌握网站的命名规则和文件、文件夹的 命名规范、网站页面布局格式与规范及网页修 饰与创意原则，了解网站建设的基本流程和常 用工具和编程语言，能够进行网站需求分析， 了解网站的业务背景，能根据网站业务背景的 不同确定网站功能，并能够根据网站内容进行 页面规划和结构布局。
门户网站 国内网络公司经营的网站：新浪（http://www.sina.com.cn）搜
狐（http://www.sohu.com.cn）、网易（http://www.163.com）等 国外投资的网站：如：中文雅虎、香港的TOM、中华网等 国内传统媒体办的网站：人民网（http://www.people.com.cn）