1、网站建设与网页设计任课教师：颜君彪课程类别：院选课2011年6月课程基本要求n了解网站建设的基本内容n掌握网站建设的步骤n掌握网页设计工具的使用n掌握HTML基本标记的使用方法n了解CSS和表单的用法第第1章章 网页设计与制作基础网页设计与制作基础 1.1 Internet基础知识什么是Internet Internet的基本概念Internet是一个具体的网络实体，泛指全球计算机网络的集合，是一个全球性的信息通信网络，我们称之为因特网。n（1）电子邮件服务（E-mail）“电子邮件”专指在Internet中的电子邮件E-mail就是Electronic Mail的英文缩写，是计算机用户交换信
2、息的一种途径。邮件地址由用户名和主机名组成，中间由连接，如，bjlgo是用户名，是主机名。n（ 2）登录服务（Telnet）远程登录就是用户通过计算机网络进入和使用远程的计算机系统。 1.1.1 Internet所提供的服务所提供的服务 n（3）文件传输服务（FTP）文件传输服务（File Transfer Protocol）指是的把文件从一台计算机传送到另一台计算机。n（4）Gopher服务Gopher是一种基于菜单的信息检索工具，用户只要在成树形结构排列的多层菜单中逐级深入，就可以检索到所需要的信息，而不必考虑它们的存储方式和位置。n（5）电子公告板服务（Internet BBS电子公告扳
3、（BBS）即公告板系统（Bullet in Board System）是一个信息和文件的陈列室，常常集中于一个特定主题，像发告示一样，将要公布的信息粘帖到公告栏上，其他人可以随时看到信息。 n（6）网络会议（Net Meeting）服务Net Meeting 为用户通过Internet与其他人进行交谈，并举行各种实时通信会议提供了极大的方便。n（7）WWW （World Wide Web）WWW也叫万维网，是Internet网络的多媒体信息查询工具。由三部分组成，即：客户机、服务器和HTTP协议。n（8）游戏、聊天服务1.1.2 协议（协议（Protocol）是关于信息格式及信息交换规则的描述
4、。1.1.3TCP/IP协议簇协议簇 TCP/IP是Internet上通用的标准协议簇。TCP（Transmission Control Protocol）传输控制协议，提供面向连接的服务IP（Internet Protocol）互联网协议，将数据从一个地址传送到另一个地址，也就是说IP的工作就是传送和接收数据包。1.1.4 IP 地址地址 P地址是一个32位的二进制数组成的号码，该号码分为四段，每段8位，每段取值范围在0255之间。1.1.5 域名、域名系统域名、域名系统 Internet域名是Internet网络上一个服务器或一个网络系统的名字，在全世界没有重复的域名。 DNS用分层命名的
5、方法：即计算机域名组织结构名网络名最高层域名。 最高层域名又称顶级域名。顶级域名代表建立网络的部门、机构或网络所隶属的国家和地区。分类：大体可分为两类。一类是组织性顶级域名，由三个字母缩写代表机构，如 .com代表商业，.edu代表教育，.net代表网络等。另一类是地理性顶级域名，由两个字母缩写代表国家或地区，如.CN代表中国，.JP代表日本等，.HK代表中国香港。1. 2 WWW及客户机服务器工作方式1.2.1 概念概念 客户机/服务器是一种网络的工作模式，也是一些操作系统软件采用的系统模型。1.2.2 URLURL（英文全名是Uniform Resource Locator，中文称是“统一
6、资源定位器”），Internet上的所有资源都可用URL来表示。URL好比Internet上的门牌号码，它可以帮助用户在Internet的信息海洋中定位到所需要的资料。1.2.3 HTTP协议协议HTTP协议（英文全名为Hypertext Transfer Protocol，中文称“超文本传输协议”）它是用来在Internet上传送超文本的传送协议。1.2.4 超文本超文本超文本（Hypertext）是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。 1.2.5 浏览器浏览器网络浏览器是在Internet网络上使用的特殊软件，在上网登录成功的前提下，
7、要用”网络浏览器”软件才能进行Internet网络的各种操作。1.2.6 Web服务器 Web服务器是在网络中为实现信息发布、资料查询、数据处理等诸多应用搭建基本平台的服务器。1. 3 网站与网页 网站是指建立在互联网上的Web站点，存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。它面向公众提供互联网内容服务。1.3.1 1 网页与网站网页与网站 网页也叫 Web页，网页就是在显示器屏幕上的内容。网页实际是一个文件，它存放在世界某个角落的某一个计算机中。网站与网页的关系类似于一本书与一页书 1.3.2 1.3.2 静态
8、网页与动态网页静态网页与动态网页网页按其表现形式来划分可分为动态页和静态页。静态网页只能浏览，不能实现客户端和服务器端的交流互动，在静态网页中，也可以出现各种动态的效果，如GIF格式的动画、FLASH影片、滚动字幕等，这些“动态效果”只是视觉上的，并不能实现客户端和服务器端的交互。 动态网页的页面内容随用户的输入而变化，能与客户端交流互动，它们会随不同客户、不同时间，返回不同的网页，动态网页使用ASP、PHP、JSP、ASP.NET等技术生成。 静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。1.4 网页制作常用工具网页制作常用工具 1利用Ph
9、otoshop CS3设计网页图像2. 利用Fireworks CS3设计网页图像3. 利用网页编辑软件Dreamweaver CS3制 作网页4. 利用网页动画软件Flash CS3制作动画 色彩的魅力是无限的，它是网站重要的表现形式之一。1.5.1 1.5.1 网页色彩的基础知识网页色彩的基础知识 从物理学上，色光可分解为红、橙、黄、绿、青、蓝、紫等，其中，红、绿、蓝是三原色，在计算机科学中我们称之为RGB三原色，三原色通过不同比例的混合可以得到自然界中五颜六色、千变万化的各种颜色。 现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其他的色彩都属于彩色。任何一种彩色具备3个
10、特征：色相、明度和纯度。其中非彩色只有明度属性。1.5 网页中色彩的应用网页中色彩的应用1.5.2 1.5.2 网页色彩的搭配网页色彩的搭配 色彩搭配既是一项技术性工作，搭配协调可以设计出色彩鲜明、性格独特的网站。1）网页色彩搭配技巧 单色 、邻近色 、对比色 、黑色、背景色、色彩的数量的使用。 网站用色一般控制在3种色彩以内，通过调整色彩的各种属性来产生变化。2 2）常见的网页配色方案）常见的网页配色方案 红色代表热情、活泼、热闹、温暖、幸福和吉祥。易引起人的注意，使人兴奋、激动、紧张和冲动，还易造成人视觉疲劳的颜色。 黄色代表明朗、愉快、高贵和希望。只要在纯黄色中混入少量的其他色，其色相感
11、和色性格均会发生较大程度的变化。 白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。在白色中加入其他任何色，都会影响其纯洁性，使其性格变的含蓄。 紫色代表优雅、高贵、魅力、自傲和神秘的感觉。在紫色中加入白色，可使变得优雅、娇气，并充满女性的魅力。 蓝色代表深远、永恒、沉静、理智、诚实、公正权威。蓝色是一种在淡化后仍然能保持较强个性的颜色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。 绿色代表新鲜、充满希望、和平、柔和、安逸和青春。绿色是具有黄色和蓝色两种成份的颜色。一般农林业、教育类网站常使用绿色代表希望、充满活力。 灰色在商业设计中，
12、具有柔和、高雅的意象，而且属于中间性格，易接受，所以也是永远流行的主要颜色。在许多的高科技产品，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。 1.6 网页布局网页布局 1.6.1 1.6.1 网页设计的原则网页设计的原则l主次分明，中心突出l大小搭配，相互呼应l图文并茂，相得益彰l简洁一致l网页布局时的元素：格式美观的正文、和谐的色彩搭配、较好的对比度、使得文字具有较强的可读性、生动的背景图案、页面元素大小适中、布局匀称、不同元素之间留有足够空白、各元素之间保持平衡、文字准确无误、无错别字、无拼写错误。l文本和背景的色彩：一个页面显示的颜色不宜过多，应控制在256色以内。主题
13、颜色通常只需要23种，并采用一种标准色。 1.6.2 1.6.2 网页布局的基本要素网页布局的基本要素 学习网页设计首先需要了解构成网页的基本元素，这样才能在页面设计中得心应手，根据需要合理地组织和布局网页内容。一般网页的基本内容包括：页面标题、网站标志、页眉、导航栏、主内容区和页脚。1）页面标题 网站中的每一个页面都有标题，用来提示该页面的主要内容。标题出现在浏览器的标题栏中，而不是出现在页面布局中。它还有一个比较重要的作用就是引导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。2）网站标志 网站标志在互联网上是一个站点的象征，是网站形象的重要体现。另外，还在站点之间的互相链接中扮演着重
14、要的角色，一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角，访问者一眼就能看到它，可见标志的重要性。网站标志通常有3种尺寸：8831像素、12060像素和12090像素。3）页面尺寸 由于页面尺寸和显示器大小及分辨率有关系，一般分辨率在800600像素的情况下，页面的显示尺寸为780428像素；分辨率在640480像素的情况下，页面的显示尺寸为620311像素；分辨率在1024768像素的情况下，页面的显示尺寸为1000600像素。从以上数据可以看出，分辨率越高页面尺寸越大。浏览器的工具栏也是影响页面尺寸的原因。一般浏览器的工具栏都可以取消或者增加，那么当显示全部工具栏和关闭全
15、部工具栏时，页面的尺寸是不一样的。在网页设计过程中，虽然页面可以设计很长的网页，最好不要让访问者拖动页面超过3屏，如果确实需要在同一页面显示超过3屏的内容，那么最好能在网页顶部加上锚点链接，以方便访问者浏览。4）导航栏导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。导航的位置一般有4种常见的显示位置：在页面的左侧、右侧、顶部和底部。有的在同一个页面中运用了多种导航，如有的在顶部设置了主菜单，而在页面的左侧又设置了折叠式的折叠菜单，同
16、时又在页面的底部设置了多种链接，这样便增强了网站的可访问性。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用页面达到总体的协调一致。如果网页的页面比较长，最后在页面底部也设置一个导航，这样如果浏览者正在阅读页面底部的内容，就不用再拖动浏览器滚动条来选择页面顶部的导航条，而直接使用页面底部的导航。5）页眉和页脚页眉指的是页面上端的部分。有的页面划分的比较明显，有的页面则没有明确的区分或者没有页眉。页眉的风格一般要求和页面的整体风格保持一致。页眉的位置吸引注意力较高。页眉的作用是定义页面的主题。如站点的名字多数都显示在页眉里。这样访问者能很快知道这个站点是什么内容。页眉是整个页面设计的关
17、键，它将牵涉到下面的更多设计和整个页面的协调性。页眉常放置站点的图片、公司标志、公司名称、宣传口号和广告语等，甚至有些网站将此设置为广告席位来出租。页脚和页眉相呼应。页眉是放置站点主题的地方，而页脚是放置公司联系信息的地方。许多信息都是放置在页脚的。1.6.3 1.6.3 网页布局方法网页布局方法 在制作网页前，可以先布局出网页的草图。网页布局的方法有两种，下面分别加以介绍。1）纸上布局新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，尽可能地发挥想像力，将想到的“景象”画上去。这属于创造阶段，不必讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽可能地多画几张草图
18、，最后选定一个满意的来创作。2）软件布局如果不喜欢用纸来画出布局意图，那么还可以利用Photoshop、Fireworks等软件来完成这些工作。不像用纸来设计布局，利用软件可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。 1.6.4 4 常见的版面布局形式常见的版面布局形式网页设计要讲究编排和布局，虽然网页设计不同于平面设计，但它们有许多相近之处，应加以利用和借鉴。网页的版面布局主要指网站主页的版面布局，其他网页的版面与主页风格基本一致。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。设计版面布局前先画出版面的布局草图，接着对
19、版面布局进行细划和调整，反复细划和调整后确定最终的布局方案。常见的网页布局形式大致有“国”字型、“厂”字型、“框架”型、“封面”型和Flash型布局。1） “国”字型布局 也称为“同”字型，布局如图1-1所示。最上面是网站的标志、广告以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下部是网站的一些基本信息、联系方式和版权声明等。这种结构是国内一些大中型网站常见的布局方式。这种布局的优点是充分利用版面、信息量大，缺点是页面拥挤、不够灵活。 图1-1 “国”字型布局 图1-2 “厂”字型布局2）“厂”字型布局 结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题
20、及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。这种布局的优点是页面结构清晰、主次分明，是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人看之无味。如图1-2所示为网站采用“厂”字型布局。3）“框架”型布局 “框架”型布局一般有左右框架型、上下框架型、综合框架型布局，一栏是导航栏目，一栏是正文信息。复杂的框架结构可以将页面分成许多部分，常见的是三栏布局，如图1-3所示。上部一栏放置图片广告，左边一栏显示导航栏，右边显示正文信息内容。图1-3 框架型布局网页 图1-4 封面型主页4）“封面”型布局 这种类型基本上是出现在一些网站的
21、首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。如图1-4所示为封面型主页。5）Flash型布局其实这与封面型结构是类似的，只是这种类型采用了目前非常游戏行的Flash，与封面型不同的是，由于Flash强大的功能，页面所表达的信息更丰富，其视觉效果及听觉效果如果处理得当，绝不差于传统的多媒体。如图1-5所示为采用的Flash型网页布局。图1-5 Flash型网页布局 1.6.5 网页中的文字设计网页中的文字设计 在确定网页的
22、版面布局后，还需要确定文本的样式，如字体、字号和颜色等，还可以将文字图形化。文本是人类重要的信息载体和交流工具，网页中的信息也是以文本为主。1）文字的字体、字号、行距 网页中默认的标准字体是中文“宋体”和英文“The New Roman”。如果在网页中没有设置任何字体，在浏览器中将以这两种字体显示。字号大小可以用不同的方式来计算，如磅（point）或像素（pixel）。最适合于网页正文显示的字体大小为12磅左右，现在很多的综合性站点，由于在一个页面中需要安排的内容较多，通常采用9磅的字号。较大的字体可用于标题或其他需要强调的地方，小一些的字体可以用于页脚和辅助信息。注意：小字号容易产生整体感和
23、精致感，但可读性较差。字体选择是一种感性、直观的行为。但是，无论选择什么字体，都要依据网页的总体设想和浏览者的需要。在同一页面中，字体种类少，版面雅致，有稳定感；字体种类多，则版面活跃，丰富多彩。关键是如何根据页面内容来掌握这个比例关系。行距的变化也会对文本的可读性产生很大影响。一般情况下，接近字体尺寸的行距设置比较适合正文。行距的常规比例为10:12，即用字10点，则行距12点。行距可以用行高（line-height）属性来设置，建议以磅或默认行高的百分数为单位。例如：line-height：20pt、line-height：150%。2）文字的颜色在网页设计中可以为文字、文字链接、已访问链
24、接和当前活动链接选用各种颜色。如正常字体颜色为黑色，默认的链接颜色为蓝色，鼠标点击之后又变为紫红色。使用不同颜色的文字可以使想要强调的部分更加引人注目，但应注意，对于文字的颜色，只可少量运用，如果什么都想强调，其实是什么都没有强调。况且，在一个页面上运用过多的颜色，会影响浏览者阅读页面内容，除非你有特殊的设计目的。 另外需要注意的是文字颜色的对比度，它包括明度上的对比、纯度上的对比以及冷暖的对比。这些不仅对文字的可读性发生作用，更重要的是，可以通过对颜色的运用实现想要的设计效果、设计情感和设计思想。3）文字的图形化所谓文字的图形化，即把文字作为图形元素来表现，同时又强化了原有的功能。作为网页设
25、计者，既可以按照常规的方式来设置字体，也可以对字体进行艺术化的设计。无论怎样，一切都应围绕如何更出色地实现自己的设计目标。将文字图形化、意象化，以更富创意的形式表达出深层的设计思想，能够克服网页的单调与平淡，从而打动人心。1.7 网站建设的基本流程网站建设的基本流程 1.7.1 1.7.1 网站的需求分析网站的需求分析不论是简单的个人主页，还是复杂的、几千个页面的大型网站，对网站的需求分析都要放到第一步，因为它直接关系到网站的功能是否完善，是否够层次，是否达到预期的目的等。1）确定主题对于主题的选择要注意以下三条原则。a)主题要小而精。b)主题不要太滥，目标不要太高。c)对于个人网站来说题材最
26、好是自己擅长或者喜爱的内容。也就是说要找准一个自己最感兴趣的内容，做深、做透，办出自己的特色。2）确定浏览对象1.7.2 1.7.2 规划站点结构规划站点结构 网站规划就是根据网站的需求分析，明确建设网站的目的，确定网站要实现的功能，由此对网站的内容进行设计，网站应包含哪些栏目，哪些页面等，同时还要对网站的目录结构进行规划。 1）网站的规划基本原则： 明确建设网站的目的、进行可行性分析、网站的内容设计、网站的表现形式设计。2）确定网站的目录结构 目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对站点本身的上传维护，以及以后内容的扩充和移植有着重要的影响。 网站的目录是指建立网站时创建的目
27、录。如在建立网站时都默认建立了根目录和images子目录，下面是建立目录结构的建议：不要将所有文件都存放在根目录下；按栏目内容建立子目录；在每个主目录下都建立独立的images目录；目录的层次不要太深。1.7.3 1.7.3 收集素材收集素材网站规划好之后，就要创建和收集需要的资源了，包括图片、文字、声音、视频、动画等，网站的资料来源主要有以下4个途径。（1）客户提供的资料。这是主要的资料来源。（2）书籍、报刊杂志。（3）另外一个好的方法是从网络上收集，只要到雅虎、百度等搜索引擎上查找相应的关键字，就可以找到很多的资料。（4）自己动手设计制作。1.7.4 1.7.4 设计制作网站网页设计制作网
28、站网页网站需求分析和素材收集完了以后，下面就开始正式设计和制作网页了。设计网页就是对页面进行布局的设计、色彩的搭配，协调文字、图片、音乐、动画、视频等页面内容。制作网页就比较简单，利用Dreamweaver，在网页上插入文本段落、图像、Flash动画、表、动态HTML效果、声音以及超级链接，这些都可以在很短的时间内完成，当然在制作过程中需要利用Photoshop等工具对一些素材进行必要的处理。 1.7.5 1.7.5 开发动态网站功能模块开发动态网站功能模块页面设计制作完成后，如果还需要动态功能的话，就需要开发动态功能模块，网站中常用的功能模块有搜索功能、留言板、新闻信息发布系统等。1）搜索功
29、能2）留言板3) 新闻信息发布系统4) 在线购物1.7.6 1.7.6 域名和服务器空间申请域名和服务器空间申请要建立网站，自然要为它取一个域名。域名在整个世界范围内都是唯一的。怎样知道一个域名是否被注册？方法一是在Internet Explorer浏览器中输入这个网址，如果能够打开这个网站的页面，就可以用了。更好的方法是到国际互联网络中心查询顶级域名是否被注册，或者到中国互联网络信息中心去查询国内域名是否被注册，也可以去国内的域名代理机构申请。1）申请空间时注意的问题a)在选择虚拟空间提供商之前，必须对网站有全面的认识。首先应该从内容和定位来考虑未来的访问量，访问量应该预计在一定的范围内，然
30、后从访问量来选择需要的带宽和服务商提供的主机配置。其次，是空间和服务的选择，如果不是使用数据库技术访问的网站，空间在30M之内应该是够用的，实际上如果网站不包含数据库或者大型的图库。最后考虑的是服务商，从收费和域名上选择，尽量注册国际域名，如果是国际域名已经被人注册了就用国内的，但最好不要注册中文或者是.biz、.cc之类，在普及和域名解释上会部分问题。b)不少人在确定了自己的需要之后，在寻找提供满足自己需要的服务商方面往往不知所措。网站首先要保证连接速度和稳定性，在比较完服务商的价格后，最好去他们的一些客户的网站上看看，通过他们的客户的连接速度来观察服务质量，如果服务商服务质量较差，不仅会在
31、连接上比较慢，有时候还会经常出现域名解释上的错误。在最后确定了一两家服务商后，要做的事情就是如何和他们联系了，可以直接打电话或者写信来联系，咨询他们的服务条款、服务内容，还可以在价格上讨价还价，不推荐使用代理，因为通过代理来服务，毕竟中间多了一个环节，如果以后出了问题，解决起来更麻烦。c)在交钱签定协议时，一定要注意一些细节问题，如仔细研究收到的服务条款，自己书写好注册信息，确保信息是正确的。在付款之后一定要保存单据，在收到密码后要尽量更改密码。d)如果是一个较大的企业，可以建立自己的机房，配备技术人员、服务器、路由器和网络管理软件等，再向邮电局申请专线，从而建立一个属于自己的独立的网站。但这
32、样做需要较大的投资，而且日常费用也比较高。2）中小型企业的觖决之道a)虚拟主机：将网站放在ISP的Web服务器上，这种方法对于一般中小型企业来说将是一个经济的方案。虚拟主机与真实主机在运作上毫无区别，特别适合那些信息量和数据量不大的网站。b)主机托管：如果企业的Web有较大的信息量和数据量，需要很大空间时，可以采用这种方案。将已经制作好的服务器主机放在ISP网络中心的机房里，借用ISP的网络通信系统接入Internet。1.7.7 1.7.7 网站的发布与维护网站的发布与维护网站的域名和空间申请完后就可上传网站了，可以采用Dreamweaver自带的站点管理上传文件，也可以采用专门的FTP软件上传。注意在申请空间时一定要记下你所申请空间的FTP主机地址、你的用户名、密码等信息，这些都是上传时必须要设置的内容。一个好的网站，不是一次性制作完美就可以的了，由于世界在不断的变化，网站的内容也需要随之调整，给人常新的感觉，这就要求我们对站点进行长期的不间断的维护和更新。1.7.8 1.7.8 网站的推广网站的推广网站建设完成后，如果没有宣传，设计得再好，也不会有多少人访问，网站也就没有什么意义。网站的宣传有很多种方式，下面介绍一些主要的方法。1） 注册到搜索引擎2） 交换广告条3） 专业论坛宣传4） 直接向客户宣传 此外还可通过网络广告、在报纸上做广告、户外广告等方法推广网站。
