《第1章 网页设计与制作基础要点》由会员分享，可在线阅读，更多相关《第1章 网页设计与制作基础要点（52页珍藏版）》请在金锄头文库上搜索。
1、网站建设与网页设计,任课教师：颜君彪 课程类别：院选课 2011年6月,课程基本要求,了解网站建设的基本内容 掌握网站建设的步骤 掌握网页设计工具的使用 掌握HTML基本标记的使用方法 了解CSS和表单的用法,第1章 网页设计与制作基础,1.1 Internet基础知识,什么是Internet Internet的基本概念 Internet是一个具体的网络实体，泛指全球计算机网络的集合，是一个全球性的信息通信网络，我们称之为因特网。,（1）电子邮件服务（E-mail）“电子邮件”专指在Internet中的电子邮件E-mail就是Electronic Mail的英文缩写，是计算机用户交换信息的一种
2、途径。邮件地址由用户名和主机名组成，中间由连接，如，bjlgo是用户名，是主机名。 （ 2）登录服务（Telnet）远程登录就是用户通过计算机网络进入和使用远程的计算机系统。,1.1.1 Internet所提供的服务,（3）文件传输服务（FTP）文件传输服务（File Transfer Protocol）指是的把文件从一台计算机传送到另一台计算机。 （4）Gopher服务Gopher是一种基于菜单的信息检索工具，用户只要在成树形结构排列的多层菜单中逐级深入，就可以检索到所需要的信息，而不必考虑它们的存储方式和位置。,（5）电子公告板服务（Internet BBS电子公告扳（BBS）即公告板系统
3、（Bullet in Board System）是一个信息和文件的陈列室，常常集中于一个特定主题，像发告示一样，将要公布的信息粘帖到公告栏上，其他人可以随时看到信息。,（6）网络会议（Net Meeting）服务Net Meeting 为用户通过Internet与其他人进行交谈，并举行各种实时通信会议提供了极大的方便。 （7）WWW （World Wide Web）WWW也叫万维网，是Internet网络的多媒体信息查询工具。由三部分组成，即：客户机、服务器和HTTP协议。 （8）游戏、聊天服务,1.1.2 协议（Protocol）,是关于信息格式及信 息交换规则的描述。,1.1.3TCP/I
4、P协议簇,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 URL,URL（英文全名是Uniform Resource Locator，中文称是“统一资源定位器”），Interne
6、t上的所有资源都可用URL来表示。URL好比Internet上的门牌号码，它可以帮助用户在Internet的信息海洋中定位到所需要的资料。,1.2.3 HTTP协议,HTTP协议（英文全名为Hypertext Transfer Protocol，中文称“超文本传输协议”）它是用来在Internet上传送超文本的传送协议。,1.2.4 超文本,超文本（Hypertext）是把一些信息根据需要连接起来的信息管理技术，人们可以通过一个文本的链指针打开另一个相关的文本。,1.2.5 浏览器,网络浏览器是在Internet网络上使用的特殊软件，在上网登录成功的前提下，要用”网络浏览器”软件才能进行Int
7、ernet网络的各种操作。,1.2.6 Web服务器,Web服务器是在网络中为实现信息发布、资料查询、数据处理等诸多应用搭建基本平台的服务器。,1. 3 网站与网页,网站是指建立在互联网上的Web站点，存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，这些页以超链接方式连接在一起，形成一个整体，描述一组完整的信息。它面向公众提供互联网内容服务。,1.3.1 网页与网站 网页也叫 Web页，网页就是在显示器屏幕上的内容。网页实际是一个文件，它存放在世界某个角落的某一个计算机中。网站与网页的关系类似于一本书与一页书,1.3.2 静态网页与动态网页 网页按其表现形式来划分可分为动态页和静态
8、页。 静态网页只能浏览，不能实现客户端和服务器端的交流互动，在静态网页中，也可以出现各种动态的效果，如GIF格式的动画、FLASH影片、滚动字幕等，这些“动态效果”只是视觉上的，并不能实现客户端和服务器端的交互。,动态网页的页面内容随用户的输入而变化，能与客户端交流互动，它们会随不同客户、不同时间，返回不同的网页，动态网页使用ASP、PHP、JSP、ASP.NET等技术生成。 静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少。,1.4 网页制作常用工具,1利用Photoshop CS3设计网页图像 2. 利用Fireworks CS3设计网页图像
9、 3. 利用网页编辑软件Dreamweaver CS3制 作网页 4. 利用网页动画软件Flash CS3制作动画,色彩的魅力是无限的，它是网站重要的表现形式之一。 1.5.1 网页色彩的基础知识 从物理学上，色光可分解为红、橙、黄、绿、青、蓝、紫等，其中，红、绿、蓝是三原色，在计算机科学中我们称之为RGB三原色，三原色通过不同比例的混合可以得到自然界中五颜六色、千变万化的各种颜色。 现实生活中的色彩可以分为彩色和非彩色。其中黑白灰属于非彩色系列。其他的色彩都属于彩色。任何一种彩色具备3个特征：色相、明度和纯度。其中非彩色只有明度属性。,1.5 网页中色彩的应用,1.5.2 网页色彩的搭配 色
10、彩搭配既是一项技术性工作，搭配协调可以设计出色彩鲜明、性格独特的网站。 1）网页色彩搭配技巧 单色 、邻近色 、对比色 、黑色、背景色、色彩的数量的使用。 网站用色一般控制在3种色彩以内，通过调整色彩的各种属性来产生变化。,2）常见的网页配色方案 红色代表热情、活泼、热闹、温暖、幸福和吉祥。易引起人的注意，使人兴奋、激动、紧张和冲动，还易造成人视觉疲劳的颜色。 黄色代表明朗、愉快、高贵和希望。只要在纯黄色中混入少量的其他色，其色相感和色性格均会发生较大程度的变化。 白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。在白色中加入其他任何色，都会影响其纯洁性，使其性格变的含蓄。 紫色
11、代表优雅、高贵、魅力、自傲和神秘的感觉。在紫色中加入白色，可使变得优雅、娇气，并充满女性的魅力。,蓝色代表深远、永恒、沉静、理智、诚实、公正权威。蓝色是一种在淡化后仍然能保持较强个性的颜色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。 绿色代表新鲜、充满希望、和平、柔和、安逸和青春。绿色是具有黄色和蓝色两种成份的颜色。一般农林业、教育类网站常使用绿色代表希望、充满活力。 灰色在商业设计中，具有柔和、高雅的意象，而且属于中间性格，易接受，所以也是永远流行的主要颜色。在许多的高科技产品，尤其是和金属材料有关的，几乎都采用灰色来传达高级、科技的形象。,1.
12、6 网页布局,1.6.1 网页设计的原则 主次分明，中心突出 大小搭配，相互呼应 图文并茂，相得益彰 简洁一致 网页布局时的元素：格式美观的正文、和谐的色彩搭配、较好的对比度、使得文字具有较强的可读性、生动的背景图案、页面元素大小适中、布局匀称、不同元素之间留有足够空白、各元素之间保持平衡、文字准确无误、无错别字、无拼写错误。 文本和背景的色彩：一个页面显示的颜色不宜过多，应控制在256色以内。主题颜色通常只需要23种，并采用一种标准色。,1.6.2 网页布局的基本要素 学习网页设计首先需要了解构成网页的基本元素，这样才能在页面设计中得心应手，根据需要合理地组织和布局网页内容。一般网页的基本内
13、容包括：页面标题、网站标志、页眉、导航栏、主内容区和页脚。 1）页面标题 网站中的每一个页面都有标题，用来提示该页面的主要内容。标题出现在浏览器的标题栏中，而不是出现在页面布局中。它还有一个比较重要的作用就是引导访问者清楚地知道所要浏览网站的内容，不至于迷失方向。 2）网站标志 网站标志在互联网上是一个站点的象征，是网站形象的重要体现。另外，还在站点之间的互相链接中扮演着重要的角色，一个好的标志可以很好地树立公司形象。网站标志一般放在网站的左上角，访问者一眼就能看到它，可见标志的重要性。网站标志通常有3种尺寸：8831像素、12060像素和12090像素。,3）页面尺寸 由于页面尺寸和显示器大
14、小及分辨率有关系，一般分辨率在800600像素的情况下，页面的显示尺寸为780428像素；分辨率在640480像素的情况下，页面的显示尺寸为620311像素；分辨率在1024768像素的情况下，页面的显示尺寸为1000600像素。从以上数据可以看出，分辨率越高页面尺寸越大。 浏览器的工具栏也是影响页面尺寸的原因。一般浏览器的工具栏都可以取消或者增加，那么当显示全部工具栏和关闭全部工具栏时，页面的尺寸是不一样的。 在网页设计过程中，虽然页面可以设计很长的网页，最好不要让访问者拖动页面超过3屏，如果确实需要在同一页面显示超过3屏的内容，那么最好能在网页顶部加上锚点链接，以方便访问者浏览。,4）导航
15、栏 导航栏既是网页设计中的重要部分，又是整个网站设计中的一个较独立的部分。一般来说网站中的导航位置在各个页面中出现的位置是比较固定的，而且风格也较为一致。导航的位置对网站的结构与各个页面的整体布局起到举足轻重的作用。 导航的位置一般有4种常见的显示位置：在页面的左侧、右侧、顶部和底部。有的在同一个页面中运用了多种导航，如有的在顶部设置了主菜单，而在页面的左侧又设置了折叠式的折叠菜单，同时又在页面的底部设置了多种链接，这样便增强了网站的可访问性。当然并不是导航在页面中出现的次数越多越好，而是要合理地运用页面达到总体的协调一致。 如果网页的页面比较长，最后在页面底部也设置一个导航，这样如果浏览者正
16、在阅读页面底部的内容，就不用再拖动浏览器滚动条来选择页面顶部的导航条，而直接使用页面底部的导航。,5）页眉和页脚 页眉指的是页面上端的部分。有的页面划分的比较明显，有的页面则没有明确的区分或者没有页眉。 页眉的风格一般要求和页面的整体风格保持一致。页眉的位置吸引注意力较高。页眉的作用是定义页面的主题。如站点的名字多数都显示在页眉里。这样访问者能很快知道这个站点是什么内容。页眉是整个页面设计的关键，它将牵涉到下面的更多设计和整个页面的协调性。页眉常放置站点的图片、公司标志、公司名称、宣传口号和广告语等，甚至有些网站将此设置为广告席位来出租。 页脚和页眉相呼应。页眉是放置站点主题的地方，而页脚是放置公司联系信息的地方。许多信息都是放置在页脚的。,1.6.3 网页布局方法 在制作网页前，可以先布局出网页的草图。网页布局的方法有两种，下面分别加以介绍。 1）纸上布局 新建页面就像一张白纸，没有任何表格、框架和约定俗成的东西，尽可能地发挥想像力，将想到的“景象”画上去。这属于创造阶段，不必讲究细腻工整，不必考虑细节功能，只以粗陋
