网站与网页的基本知识要点

(二）网页设计与制作
1．静态网页的设计与制作
一个好的网站首先是内容丰富，其次就是网页设计美观。对于 网页的外观设计，提供以下建议：
（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据 网站的访问者对象、要提供的信息以及制作目标得出一个最适合 的网页架构。 （2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网 页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接 解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个 粗大的字或图片。 （3）切勿以800×600以上的分辨率设计网页，常用的分辨率是 640×480及800×600。现在国内的站点基本上都是800×600，但 是如果主要是面向国外访问者的站点，建议使用640×480。 （4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢 浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太 多，只会令人烦厌。 （5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多 的时间去下载，采用相同的底色或墙纸还可以增强网页一致性， 以树立自己的风格。

设计网站的标准字体。 设计网站的宣传标语。

确定栏目和版块；

一定记住要紧扣你的主题 设定一个可以双向交流的栏目 不要将所有文件都存放在根目录下。 按栏目内容建立子目录。 每个主目录下都建立独立的images目录。 目录的层次不要太深。
Leabharlann Baidu
确定网站的目录结构和链接结构


其它需要注意的还有： 1.不要使用中文目录；网络无国界，使用中文目录可 能对网址的正确显示造成困难。 2.不要使用过长的目录；尽管服务器支持长文件名， 但是太长的目录名不便于记忆。 3.尽量使用意义明确的目录； 4.网站的首页应该提供整个站点各页面的导航。 5.二级页面应一一对应首页的各栏目，而且应该包含 到
网页制作的基本步骤
(一）网站的整体规划和设计
进行网站的整体规划也就是组织网站的内容和 设计其结构。网页制作者在明确网页制作的目的 及要包括的内容之后，接下来就应该对网站进行 规划，以确保文件内容条理清楚、结构合理，这 样不仅可以很好地体现设计者的意图，也将使网 站可维护性与可扩展性增强。

主题和名称的确定


HTTP：超文本传输协议，它是一种常用的网络通讯协议。 若想链接到某一特定的网页时，就必须通过HTTP协议。 FTP：文件传输协议。与HTTP协议相同，它也是URL地 址使用的一种协议名称，以指定传输某一种互联网资源。


HTTP协议用于链接到某一网页，而FTP协议则是用于上传或是 下载文件的情况。
（四） 网页上传发布
网页设计好，必须把它发布到互连网上，否则网站形象仍然 不能展现出去。发布的服务器可以是远程，也可以是本地，但必 须支持ASP，因为动态程序是建立在ASP基础上的。
网页制作的优秀网站
建站资源网：http://www.jzzy.com/ 织梦乱弹：http://www.bihu.net
6.同级页面、下一级页面和首页的链接。
7.网站中还应有一定的交互信息，如留言簿、Email链 接、信息反馈表。
网站的目录结构
① 层状结构
层状结构（如图1.8所示）类似于目录系统的树型结构，由网站 文件的主页开始，依次划分为一级标题、二级标题等等，逐级细 化，直至提供给浏览者具体信息。
主页
页面1
页面2

HTML语言简介
页面标记 文字标记 图象标记


网页美化工具
为了使制作的网页更为美观，用户在利用网页制作工具制作网 页时，还需利用网页美化 工具对网页进行美化。
1．Photoshop
Photoshop是由Adobe公司开发的图形处理软件，它是目前公认 的PC机上最好的通用平面美术设计软件，它功能完善、性能稳定、 使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop 都是首选的平面制作工具。
（6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要 求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主 题配合，有较多的顾虑，如果网页是文章式或是包含大量文字， 不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地 阅读网页。 （7）不要把图片白色当作透明，要知道别人的系统不一定把内定 底色设为白色，解决的办法除了真的把该网页的底色设为白色之 外，最好还是用图片编辑工具将图片设为透明颜色。
3．Flash
Flash是美国Macromedia公司开发的矢量图形编辑和动画创作的 专业软件，它是一种交互式动画设计工具，用它可以将音乐、声 效、动画以及富有新意的界面融合在一起，以制作出高品质的网 页动态效果。它主要应用于网页设计和多媒体创作等领域，功能 十分强大和独特，已成为交互式矢量动画的标准，在网上非常流 行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、 在线游戏等的制作中。

Dreamweaver与FrontPage比较，有几下几点 优势： 1. 产生的垃圾代码少，网页可读性好，可以提 高网页浏览速度； 2. 通过层功能，可以快速制作出复杂的页 面，图片定位更容易； 3. 可基本解决IE与Netscape的兼容性； 4. 设计思路广，内涵丰富，创作随意性强， 可充分展现你的创意。

Internet Internet起源于美国国防部的ARPANET网。目 前Internet已成为一个巨大信息资源，1990年， 我国正式向Internet管理中心注册了区域名CN， 并于1994年开通了Internet的全功能服务。
基本术语
网页(WebPage)：由文字、图片、动画、超链接等组 成的，通常以html或htm作为文件的扩展名,可以在 www网上传输，并被浏览器认识和翻译成页面显示出 来的文件。 网站(WebSite)：网站就是网页的集合其中包括一个首 页和若干个分页。网站设计者先把整个网站结构规划 好，然后在分别制作各个网页。 首页(Home Page) URL(Uniform resource locator) Html(Hypertext Markup Language )：超文本标记语言 是描述性解释语言，需要在浏览器解释执行，主要用 于创建WEB文档。由于它编写制作非常简单，在 Internet领域中被广泛应用，成为WWW的核心技术之 一。
2．为网页的添加动态效果
静态网页制作完成后，接下来的工作就是为网页添加动态效果， 包括一些脚本语言程序和数据库程序的设计，以及加入动画效果 等。
（三） 测试网页
当网页设计人员制作完所有网站页面之后，需要对所设计的 网页进行审查和测试，测试内容包括功能性测试和完整性测试两 个方面。 所谓功能性测试就是要保证网页的可用性，达到最初的内容组 织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的 内容。完整性测试就是保证页面内容显示正确，链接准确，无差错 无遗漏。 如果在测试过程中发现了错误，就要及时修改，在准确无误后, 方可正式在 Internet 上发布。在进行功能性测试和完整性测试后， 有的还需要掌握整个站点的结构以备日后的修改。
第一讲
——网站与网页的基本知识
课程介绍
教学计划 参考书目
《Dreamweaver MX Flash MX Fireworks MX 网页设 计培训教程》 西安电子科技大学出版社 乘方工作室 《 Dreamweaver MX 2004完美网页设计与制作》 中国青年出版社 姜楠 《Photoshop CS Dreamweaver MX 2004 Flash MX 2004 网页设计黄金搭档》中国青年出版社 邹婷等
页面3
一级标题
页面4
页面5
页面6
页面7
二级标题
图1.8 层状结构
② 线性结构
线性结构（如图1.9所示）类似于数据结构中的线性表，用于 组织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地 浏览整个网站文件。这种结构一般都用在意义是平行的页面上。 通常情况下，网站文件的结构是层状结构和线性结构相结合的 。这样可以充分利用两种结构各自的特点，使网站文件既具有条理 性、规范性，又可同时满足设计者和浏览者的要求。
2．Fireworks
Fireworks是由Macromedia公司开发的图形处理工具，它的出 现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为 制作网页图形而设计的软件，同时也是专业的网页图形设计及制作 的解决方案。 作为一款为网络设计而开发的图像处理软件，Fireworks还能 够自动切割图像、生成光 标动态感应的JavaScript程序等等，而 且Fireworks具有强大的动画功能和一个相当完美的 网络图像生 成器。 用户可以从http://www. macromedia.com／站点下载该软件。
网页制作工具


Frontpage Dreamweaver 系Macromedia公司的集网页制作和网 站管理的所见即所得的网页制作工具。 两者的区别 FrontPage占领的是中级市场，比较重视网页的开发效 率、易学易用。而Dreamweaver主攻的是网页高级设计 市场，所强调的是更强大的网页控制、设计能力及创 意的完全发挥。 Dreamweaver在功能的完善，使用的便捷上比 FrontPage要强些。它囊括了FrontPage的所有基本操 作，并开发了许多独具特色的设计新概念，诸如行为 （Behaviors）、时间线（Timeline）、资源库 （Library）等，支持层叠式样表（CSS）。
主 页
页 面 1
页 面 2
页 面 3
图1.9 线性结构
③ Web结构
Web 结构（如图 1.10 所示）类似于 Internet的组成结构，各 网页之间形成网状连接，允许用户随意浏览。
主页
页面1
页面2
页面3
一级标题
页面4
页面5
页面6
页面7
页面8
二级标题
图1.10 Web结构
1．收集整理资料 2．准备素材 3．内容规划

主题要小而精。定位要小，内容要精。 题材最好是你自己擅长或者喜爱的内容。 题材不要太滥或者目标太高。

定位你的网站CI形象


网站标志logo 设计网站的标准色彩


一般来说，一个网站的标准色彩不超过3种，太多则让人 眼花缭乱。 一般来说，适合于网页标准色的颜色有：蓝色，黄/橙色， 黑/灰/白色三大系列色。