第一章网页设计基础

网页设计与制作合肥通用职业技术学院高传雨第一章网页设计基础了解互联网的相关概念理解网页与网站的基础知识及其关系HTML基础知识网站设计基本流程Web的起源与基本结构Web的常用术语网页制作工具项目一：Internet基础和初识任务一：WEB和浏览器：图1-1网页浏览器及其中显示的网页知识讲解：1、Web：是WorldWideWeb的简称，又称为（万维网），本质是一个将信息检索与超文本技术结合起来的全球信息系统。2、超文本：采用HTML（超文本标记语言）组成，含有指向其他文档和资源的指针（超链接）。3、网页：Web上的各个超文本文件称为网页。是客户可以在浏览器中看到的界面，是一种可以在万维网上传输，并被浏览器识别和翻译成页面显示出来的文件。4、网站：存放一群相关网页的Web服务器称为网站，相关网页一般是通过“超链接”连接在一起的。它可以放在世界上任何地方的一台与因特网相连的主机中，客户可以通过URL访问。5、主页：网站中用户浏览时首先看到的页面，也称为主页。一般名称为index或default。6、C/S：Web采用的是客户器/服务器工作模式，即客户端用户在需要浏览网页时必须通过浏览器向Web服务器发出浏览申请，服务器根据申请调用相应的页面，并向客户浏览器返回所申请的信息。7、浏览器：客户端用来定位和访问Web信息的一种工具软件，可以把各种从Web上接收的信息解释成人们容易识别和接受的屏幕显示方式呈现给用户。同时还可以进行网上会议、收发电子邮件、视频点播等。当前常用的浏览器主要有微软的IE浏览器、网景的Navigator浏览器，谷歌的Chome浏览器等。单击浏览器图标就可以直接进入浏览器界面，如上图所示。①标题栏：显示当期浏览器名称和网页的标题；②地址栏：用于输入将要浏览的文档的URL地址，③浏览窗口：显示文档的区域，同时还可以通过鼠标进行各种超链接的操作。④菜单栏：包含了浏览器中所有的命令，包括“文件”、“编辑”、“查看”、“收藏”、“工具”、“帮助”等6个菜单。⑤状态栏：界面最下面的一行，显示链接的地址、工作状态、用户所打开的网页文件等。除以上所提到的之外，浏览器还包括浏览栏、工具栏、链接栏、媒体栏、其他网络软件安装的插件等等。8、URL:统一资源定位符（uniformresourcelocation），用来寻找、定位网络中的惟一的、固定的资源。URL格式如下：协议：//主机名或IP地址：端口/路径/文件名和文件扩展名协议：在信息通信中，为了完成相互之间的信息传输，由信息发送方和信息接收方所制订的双方都需要遵守的、同一的规则。在Internet上，它表明客户与主机之间检索或信息传输时所使用的方式，它统一了人们在网上交流的方式。常用的协议有：HTTPFTPFile等。主机名或IP地址：用来寻找并定位存储Web网页的服务器在因特网上的具体位置。端口：又称端口号，即特定应用程序的广泛应用的一个协议端口，常用的默认端口有SMTP为25，POP3为110，HTTP为80，FTP为21，TELNET为23。一般情况下如果用户输入URL时省略了端口号，浏览器将使用所选协议的默认端口号。任务二：网页和网站中的常用概念、术语图1-2：网页组成图1-3网站管理后台1、首页（主页）的组成：客户打开网页时所看到的第一个网页就是首页（或主页），要求通过网站的主页可以链接到网站中所有的页面。首页是用户第一眼看到的，一个网站能否被用户所接受，首页的设计特别重要。网站的首页一般有以下几个部分组成：①导航栏：按内容的不同把网页分成不同的组，方便用户快速找到自己所需要的资源，导航栏可以是按钮、文本或图像。导航栏根据网站内容的具体情况设置，一般设置5---8个左右；②版权声明：用来声明网站的制作方，提醒其他团体和个人不要侵权，保护自己的劳动成果；③栏目：醒目的区分网站中不同类别内容网页的组别，方便用户寻找所需要的资源；④内容：具体的网页；除以上几个组成部分之外，根据网站的需要还可以在首页设置公告区、用户登录区、搜索栏、友情链接区等等。⑤LOGO图标：作为网站的标识，一般由文字和图像共同组成。好的LOGO图标可以极大的扩大网站的知名度；人教网Logo网易Logo搜狐Logo新浪Logo清华大学Logo263Logo2、静态网页和动态网页：根据网页制作所使用的语言和网页的特点和功能的不同，可以将网页划分为静态网页和动态网页（需要注意的是具有动画效果的网页并不一定是动态网页）。①静态网页：是指基本上全部用HTML语言制作，在制作好之后每次浏览内容都是固定不变的网页。其主要特点如下：A、静态网页的扩展名都是以.htm、.html、.shtml为后缀。B、网页内容发布到网站服务器之后，无论有无用户访问，每个静态网页的内容都是保存在网站服务器上的，每个网页都是一个独立存在的文件。C、静态网页一般没有数据库支持。D、静态网页交互性差，功能上有很大的限制。E、静态网页的内容相对稳定。F、静态网页在网站制作和维护工作量比较大。H、静态网页的浏览速度一般比动态网页快。图1-4静态网页的执行过程②动态网页：是指网页文件不仅具有HTML标记，而且还需要可以Web服务器执行的动态语言代码，如数据库连接、数据库读取和更新等。A、动态网页能根据不同的时间和不同的用户、不同的选择显示不同的内容B、动态网页以数据库技术为基础，大多数信息都必须从数据库中读取，即每打开一个网页都要读取一次数据库。C、动态网页必须有只能在服务器端执行的动态语言代码，常用的服务器端编程技术有CGI、ASP、PHP、JSP等。D、动态网页必须采用C/S技术，且根据不同的服务器端编程技术服务器端必须具备相应的系统坏境支持。E、动态网页功能更丰富，交互性更好。F、动态网页维护量比较少。H、动态网页的内容很难被搜索引擎收集到。I、动态网页的浏览速度比静态网页速度要慢（动态网页上的信息必须从数据库中读取，即每打开一个网页都要读取一次数据库，如果在线访问的人数太多，则会影响网站运行速度）。图1-5动态网页的执行过程3、前台和后台：在制作网站时通常可以把网站分为前台和后台两个部分，但是这两个词有两个不同的解释①在网站制作中一般把用户看到的网页称为前台，把连接数据库的动态语言和数据库部分称为后台。②在网站推广中一般把可以给普通用户看到的称为前台，可以对网站进行管理的，如添加新闻、删除栏目等等称为后台（如图1-3所示）。4、网页制作的常用软件：①网页编辑工具A、FrontPageFrontPage是Microsoft公司出品的入门级网页编辑软件。B、DreamweaverDreamweaver是Macromedia公司推出的网页制作产品，它是一个用于可视化设计与管理网页和网站的工具，它与Macromedia公司的Flash、Fireworks、Freehand配合使用，被称为“网页制作三剑客”。C、记事本、WORD等等②网页图像与动画制作工具A.FlashFlash是Macromedia公司专门为网页设计的一个交互性矢量动画设计软件。B.FireworksFireworks是Macromedia公司专门设计的Web图形工具软件，它可以用最少的步骤生成最小但质量很高的JPEG和GIF图像。C.PhotoshopPhotoshop是由Adobe公司出品的著名的图形图像处理软件。D.PhotoImpactPhotoImpact是友立（Ulead）咨讯股份有限公司推出的一款图像处理软件，它功能强大，易于使用，在商业广告和Web图像应用方面有着突出的优势。E.COOL3D：COOL3D是友立（Ulead）咨讯股份有限公司推出的一款优秀的三维立体文字特效工具，它广泛地应用于平面设计和网页制作领域。F.UleadGIFAnimatorUleadGIFAnimator是友立（Ulead）公司发布的一个动画GIF制作工具。建设一个正常的网站是一个系统工程，可以根据需要把细节划分为若干个流程。要设计一个网站，首先要详细且准确地理解客户的需求；然后注册域名与申请空间，确定网站的主题与特色，提出网站建设方案；之后根据开发者的实际情况确定网站设计工具；最后上传网站内容到服务器上，正式运营网站和对网站进行科学合理的后期维护。大致的网站建设流程如下图所示：任务三：网站设计的工作流程确定主题搜集材料规划网站网站规划推销网站维护更新后期维护网站制作制作网站正式上传测试评估图1-6网站设计的工作流程1.确定网站的主题与名称---确定网站主题应遵循以下原则：（1）主题鲜明。一个网站必须要有一个明确的主题，在主题范围内做到内容全而精。（2）明确设立网站的目的。（3）体现自己的个性。把自己的兴趣、爱好尽情地发挥出来，突出自己的个性，办出自己的特色。2.搜集材料围绕主题搜集材料，作为自己制作网页的素材。3.规划网站⑴主题栏的设置突出主题。把主题栏放在最明显的地方，让浏览者更快、更明确的知道网站所表现的内容。设计一个“最近更新”栏目，让浏览者一目了然的知道更新内容。栏目不要设置太多。⑵目录结构设计按栏目内容建立子目录。每个目录下分别为图像文件创建一个子目录image（图像较少时可不创建）。目录的层次不要太深，主要栏目最好能直接从首页到达。尽量使用意义明确的非中文目录。⑶颜色搭配网页选用的背景应和页面的色调相协调，色彩搭配要遵循和谐、均衡、重点突出的原则。4、版面布局版面布局一般应遵循的原则是：突出重点、平衡和谐，将网站标志（Logo）、主菜单等最重要的模块放在突出的位置。5、图像的运用图像是为主页内容服务的，不能让图像喧宾夺主。图像要兼顾大小和美观。图片不仅要好看，还应在保证图片质量的情况下尽量缩小图片的大小（即字节数）。图像过大将影响网页的传输速度。合理地采用JPEG和GIF图像格式。颜色较少的（256色以内）图像，可处理为GIF格式；色彩比较丰富的图像，最好处理为JPEG格式。6、上传与测试测试评估主要包括上传前的兼容性测试、链接测试和上传后的实地测试。利用FTP工具将网页发布到所申请的主页服务器上。网站上传之后，继续通过浏览器进行实地测试，发现问题，及时修改，然后再上传测试。7、后期维护A、推销网站B、维护更新为了方便网站开发人员与网站所有人更好的沟通，通常需要把客户需求分析、网站建设方案、网站维护和更新方案等等形成文字性的文档，即网站开发方案书。如图1-7所示。任务一：HTML概述与文档基本结构项目二：HTML的概念及基本语法文件头文件体HTML文件1、HTML：超文本标记语言，是制作网页的基础语言，它是一些列标记符号或希望显示在文件内的代码。这些标识能够高数浏览器应该如何显示文字和图形，是构成网页的主要工具。任何网页页面都是以HTML语言为核心和基础的。2、HTML语言的编写环境：HTML语言的编写可以通过记事本、DreamweaverCS4、写字板等等工具。3、编写好的HTML文档通过浏览器可以直接显示，也可以通过“查看-源文件”菜单命令查看已经编写好的文档的源文件。但是标记本身不再浏览器中显示。4、HTML文档的扩展名必须是.HTM或者.HTML。5、HTML的任何标记都有和括起来，一般有开始和结束两部分组成，结束的标记用“/”表示，即双标记；也有少数的单标记例如br和hr。6、HTML文档的基本结构包括文件头和文件体两个部分，如上图所示。7．HTML网页文件的命名规则A、只能使用英文字母、数字和下划线，不能包含空格与特殊符号。B、名称区分大小写。C、网站主页文件名为index.htm或index.html。Default.htm或default.html8、书写HTML源代码时，字符不区分大小写，标记之间空格的多少不影响网页的显示。任务二：头部标记和Body标记的使用1、Body标记是HTML文档的主体标记，每个网页中都必须包含。2、Body标记可以控制整个文档的显示效果，方式是通过“属性=属性值”的方式实现。3、Body标记的主要属性：（1）设置背景颜色bgcolor属性用于设置HTML网页的背景颜色。例如，