网页设计第1章

网页设计与制作课程知识与就业分析在互联网发展的今天，网页已经成为人们日常生活中不可缺少的一部分，而几乎所有的企业都想要建立一个网站。网页设计与网站建设也已成为当今社会上一种非常热门的技术。课程知识与就业分析在最近两年我们对IT市场进行调查后发现，随着整个社会进入信息化高速发展的时期，各行各业的企事业单位提供了大量的相关岗位，针对有网页设计师、网络维护员、网络管理员、软件工程师、网站运营经理等岗位群。课程介绍《网页设计与网站建设》是我院计算机专业的一门核心课程，也是一门集理论与实践为一体的综合应用课程，主要培养学生的网页设计与网站建设的综合技能与素质，提高学生的职业行为能力。课程目标通过本课程的学习，使学生了解网页设计的基本概念和基础知识，了解网页设计与网站建设流程，熟练应用网页制作常用软件，掌握网页设计与制作技术，全面掌握网站建设、管理和维护技术。了解网站技术和其他学科领域的相互联系和相互促进的关系，为后续课程的学习和工作奠定理论和实践基础。课程内容考核方式《网页设计与制作》这门课面向培养学生实践动手能力，因此我们的考核是面向培养学生能力的考核方式，期末综合成绩由以下几个部分组成：最终成绩=平时成绩+实验成绩+实验报告成绩（+课程设计成绩）

按时上课，注意课堂纪律独立完成作业和实验报告上机课不得做聊天、看电影、上网、打游戏等与学习无关的事情课程要求第一章网页与网站基础知识网页与网站的概念网页制件工具网页的设计网站的规划1.1网页与网站的概念Internet的概述WWW网页与网站域名与IP地址1.1.1Internet的概述Internet是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。

Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、在线聊天、网上购物、旅行预订等等，而其中WWW和E-mail是最常用的服务。1.1.2WWWWWW(WorldWideWeb)简称为Web或万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问Internet上的服务器端，迅速地获得所需的信息。如图所示。Internet浏览器WEB服务器HTTP网络协议●用户通过浏览器访问WEB服务器的网页，那么如何查找这些网页呢？通过在浏览器的地址栏中输入网址，即URL，统一资源定位器。●URL的一般格式如下：〈通信协议〉：//〈主机域名〉/〈路径〉/〈文件名〉其中，〈通信协议〉指提供该文件的服务器所使用的通信协议；〈主机域名〉指上述服务器所在主机的域名；〈路径〉指该文件在主机上的路径；〈文件名〉指文件的名称。

例如/nyist_new/frame.html其中，http是WWW服务器与WWW客户之间遵循的通信协议。www.用来标识该文件存储在南阳理工的WWW服务器上，nyist_new是文件所在主机上的存储路径，frame.html这个文件的名称。1.1.3网页与网站◆构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。◆通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。浏览器是如何访问某个网页或网站的呢？1.1.4域名与IP地址在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔。比如：00

为了使互联网上的电脑主机在通信时能够相互识别，每台主机都分配一个能表示其位置的IP（InternetProtocol）地址，这如同公用电话网中电话的号码一样。

IP地址是由专门的互联网机构来分配。IP地址具有惟一性。Internet的域名管理

DNS域名系统是一种帮助人们在Internet上用字符来惟一识别自己的计算机，并保证主机名（域名）和IP地址一一对应的网络服务。DNS简介域名空间

Internet域名具有层次结构。整个Internet网被划分成几个顶级域。InterNIC采用两种方法进行分类：一种方法是按组织模式进行划分；另一种方法是按地理模式进行划分。按组织模式进行划分顶级域名域名类型com商业机构edu教育机构gov政府内容int国际组织mil军事部门net网络支持中心org各种非赢利性组织/国家代码各个国家比如：cn代表中国,us代表美国，ca代表加拿大，jp代表日本按地理模式进行划分主机域名的一般格式为：四级域名.三级域名.二级域名.顶级域名比如：这个域名代表我们学校的一台www服务器，它和惟一的IP地址对应30；www是一台主机名，由sdsy域管理，Sdsy表示我们学院属于山西大学sxu中国教育领域edu中国cn的一部分1.2网页制作工具1.2.1网页编辑工具1、FrontPage2、Dreamweaver1.2.2网页图像与动画制作工具1、Flash2、Fireworks3、PhotoShop4、PhotoImpact5、COOL3D6、UleadGIFAnimator视觉元素

文字色彩图形图像动画音乐视频装饰物

网页设计——网页认知网页设计——网页认知架构元素（功能模块）

网站名称（Logo）广告条（Banner)导航条(Menu)新闻(News)搜索(Search)友情链接(Links)邮件列表(Maillist)计数器(Count)版权(Copyright)

1.3网页的设计网页主题网页的文字网页的色彩网页版式和布局网页导航设计1.3.1网页主题

网页的主题指网页所要表现的最主要的思想内涵，可以说是网页的灵魂。主题的概念是很模糊的，它是一种约束，是同一站点中各个页面于五彩缤纷中体现出统一风格的约束；它也是一种力量，是将各个设计者的作品有机结合起来的力量。主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。1.3.2网页的文字

文字是网页最主要的表达形式，尽管图形使得网页变得五彩缤纷，但大多数浏览者大部分时间仍将注意力集中在页面中的文字上面，他们总是首先浏览文字内容，而甚少关心其他页面元素，甚至对导航系统也是如此。所以，给浏览者一个亲和的文字界面是必要的。文字艺术与文字应用

同一页面采用三种字体以内字型大小变化在3-6个层次以内大标题﹑小内文﹑粗标题﹑细内文应用闪烁字效应控制得当特殊字体应用时应使用图片格式色彩与背景应拉开层次

文字艺术与文字应用

同一页面采用三种字体以内字型大小变化在3-6个层次以内大标题﹑小内文﹑粗标题﹑细内文应用闪烁字效应控制得当特殊字体应用时应使用图片格式色彩与背景应拉开层次

案例案例如何来评价一个网页的好坏？视觉效果色彩搭配整体布局1.3.３网页的色彩

在制作网站的时候，色彩的选择和搭配十分重要，因为一个网站格调的确定，往往取决于色彩的选择与搭配是否适当，一般的情况下，从以下几个方面来考虑色彩的选择：色彩的鲜明性

网站色彩的选择与搭配要鲜艳，这样比较容易吸引访问者的注意，而且在访问者的记忆中驻留的时间也比较长。色彩的独特性

网站色彩的选择与搭配要与众不同，这样就可以使得访问者留下深刻的印象。色彩的合适性

网站色彩的选择与搭配要与网站的内容气氛相适合。色彩的联想性

不同的色彩会产生不同的联想，在网站的设计中多运用具有美好联想的色彩，可以使你的网站流露出另外一种气息。页面中各处用色的选择

首先确定主色。主色是指页面中相对来说较大面积使用的色彩。主色可以反映出整个网页的风格，亦可使页面内容以色彩语言表达出来。接下来是确定辅助色。辅助色可以有多种，其应用范围包括输入框的颜色，表格边框颜色、表格的底色、小图标用色、文字颜色以及链接色等等。网页色彩策划

策划网站色彩，必须处理好两种不同色彩来源之间的色彩关系。设计时应把握住不同色彩对页面和网站产生的效果，以及它们之间的色彩冲突。

网页设计——网页色彩设计强调色彩详析

网页设计——网页色彩设计强调色彩详析

只要能产生色彩落差，视觉冲击起了作用，强调色彩就起了作用。

网页设计——网页色彩设计单一页面色彩布局色彩平衡（色彩在页面的布局）如何保持色彩的页面平衡是一个复杂的实际操作问题。每组色彩遇到不同的信息内容要做细微的页面调整。这些调整主要表现在色彩的面积、色彩的位置、文字信息的排版和页面其它元素的协调等诸多细节上。

网页设计——网页色彩设计单一页面色彩布局

网页设计——网页色彩设计单一页面色彩布局

网页设计——网页色彩设计单一页面色彩布局色彩面积对比：

网页设计——网页色彩设计色彩设计既要有理性的一面，还要有感性的一面。不仅要了解色彩的科学性知识和合理的配色方法，还要了解色彩表现情感的力量。色彩设计不仅仅是为了传递某种信息，更重要的是以它特有的魅力激发起人们的情感反应，达到影响人﹑感染人使人容易接受的目的。

网页设计——网页色彩设计色彩设计与网站风格由色彩形成的特殊风格

网页设计——网页色彩设计色彩设计与网站风格由色彩形成的特殊风格

网页设计——网页色彩设计色彩设计与网站风格由色彩形成的特殊风格

网页设计——网页色彩设计色彩设计与网站风格由色彩形成的特殊风格

网页设计——网页色彩设计一、布局设计理念页面尺寸显示器分辨率的高低决定页面的显示尺寸。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个像素；分辨率在1024x768的情况下，页面的显示尺寸为：1007x600个像素。宽度：760px左右宽度：960px左右一、布局设计理念页面尺寸页面版式显示器分辨率的高低决定显示页面的尺寸。T型结构、同字型结构、川字型结构、三字型结构、封面型结构、Flash型结构。T型结构同字结构川字结构三字结构单一结构单一结构二、布局设计的方法纸上布局在纸上画出页面的布局草图。

软件布局手

绘

布

局

草

图手

绘

布

局

草

图手

绘

布

局

草

图手

绘

布

局

草

图二、布局设计的方法纸上布局软件布局在纸上画出页面的布局草图。

利用软件来完成页面的布局。软

件

布

局

图WordPhotoshopCS常用软件三、布局设计的技术表格布局CSS布局框架布局网页版面设计的步骤

（1）画出页面的结构草图：只需画出页面的大体结构，注意分辨率，设定页面显示尺寸。

（2）布局细化和调整：将需要放置的功能模块安排在