网页制作与设计第一章

网页设计与制作,主讲人：杨森,QQ:475919749,mail:sam-235,tel课程知识与就业分析,在互联网发展的今天，网页已经成为人们日常生活中不可缺少的一部分，而几乎所有的企业都想要建立一个网站。网页设计与网站建设也已成为当今社会上一种非常热门的技术。,课程知识与就业分析,在最近两年我们对IT市场进行调查后发现，随着整个社会进入信息化高速发展的时期，各行各业的企事业单位提供了大量的相关岗位，针对有网页设计师、网络维护员、网络管理员、软件工程师、网站运营经理等岗位群。,课程介绍,网页设计与网站建设是我院计算机专业的一门核心课程，也是一门集理论与实践为一体的综合应用课程，主要培养学生的网页设计与网站建设的综合技能与素质，提高学生的职业行为能力。,课程现状,传统网页设计教学往往将80的教学时间都放在工具软件的使用方法上，结果是虽然学生都会操作设计工具，而且用得很熟练，但是就是不能独立地进行网站规划和页面设计。即使是完成的作品也达不到应有的功能效果和视觉效果。课程内容上重“技术”轻“设计”，这样导致学生不会从全局的角度开发设计，创新意识得不到培养。,课程目标,通过本课程的学习，使学生了解网页设计的基本概念和基础知识，了解网页设计与网站建设流程，熟练应用网页制作常用软件，掌握网页设计与制作技术，全面掌握网站建设、管理和维护技术。,课程目标,学生通过本课程的学习，培养两个意识，提高两种能力，即培养了创新意识和职业意识，提高学生的分析问题和解决问题的能力及团队精神和合作能力；并了解网站技术和其他学科领域的相互联系和相互促进的关系，为后续课程的学习和工作奠定理论和实践基础。,课程内容,课程内容,考核方式,网页设计与制作这门课面向培养学生实践动手能力，因此我们的考核是面向培养学生能力的考核方式，期末综合成绩由以下几个部分组成：最终成绩=平时成绩+实验成绩+课程设计成绩+课程报告成绩,考核方式,有时仅靠综合作品并不能完全体现学生在这们课程中的学习情况与学习态度，因此，还可以在平时的实训中设立奖励机制。总之，网页设计与制作课程的考核方式应该本着注重综合项目完成情况、综合技能掌握情况等实践操作为中心的考核原则进行评定。,按时上课，注意课堂纪律独立完成作业和实验报告上机课不得做聊天、看电影、上网、打游戏等与学习无关的事情,课程要求,第一章网页与网站基础知识,网页与网站的概念网页的设计网站的规划网站的开发流程,1.1网页与网站的概念,Internet的概述WWW网页与网站域名与IP地址,1.1.1Internet的概述,Internet是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。,Internet最初并不是为商业性和广泛使用而设计的。它起源于1969年美国国防部高级研究计划署协助开发的ARPANET。最初是只允许国防部人员进入的封闭式网络。到1987年，在美国国家科学基金会的推动下，将之主要从军事用途转向科学研究和民事用途，形成了今天的Internet主干网雏形NSFNET。全球网络的发展是空前且出人意料的。今天，检查电子邮件、访问喜爱的网站这些活动已融入我们的日常生活。,Internet所提供的服务主要是WWW、E-mail、FTP、网上传呼、在线聊天、网上购物、旅行预订等等，而其中WWW和E-mail是最常用的服务。,从国内Internet的发展现状来看，1994年4月，中科院计算机网络信息中心正式接入Internet，在10多年的时间里，中国Internet发生了飞速的发展，截至2011年07月20日，我国网民人数达到了4.85亿。据新华社电,国家互联网信息办公室日前披露的数据表明，2012年，中国将正式迈入“5亿网民”时代。,据国家互联网信息办公室统计数据，中国手机上网用户约3.5亿人，微博注册用户已超3亿人。而行业机构易观国际的分析报告则指出，去年中国移动互联网用户规模已达4.3亿，环比增长近50%；今年，移动互联网用户数将有可能突破6亿，超过互联网用户数量;网购用户近2亿。,1.1.2WWW,WWW(WorldWideWeb)简称为Web或万维网，客户端只要通过“浏览器”（Browser）就可以非常方便地访问Internet上的服务器端，迅速地获得所需的信息。如图所示。,用户通过浏览器访问WEB服务器的网页，那么如何查找这些网页呢？通过在浏览器的地址栏中输入网址，即URL，统一资源定位器。URL的一般格式如下：通信协议：/主机域名/路径/文件名其中，通信协议指提供该文件的服务器所使用的通信协议；主机域名指上述服务器所在主机的域名；路径指该文件在主机上的路径；文件名指文件的名称。例如,万维网之父,伯纳斯-李于1989年在欧洲粒子物理研究所提出了建立一个全球超文本项目万维网，以此使人们都能顺利地从网上获取并共享信息。,1.1.3网页与网站,构建WWW的基本单位是网页。网页中包含所谓的“超链接”，通过已经定义好的关键字和图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了WWW的纵横交织的网状结构。通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。,浏览器是如何访问某个网页或网站的呢？,1.1.4域名与IP地址,在Internet上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是IP地址。IP地址是由32bits的二进制数值构成，分成4组，转化为十进制用点分隔。比如：00,IP地址知识,为了识别通信系统上的计算机，需要建立一种普通接受的标识方法。这就如同通过邮局寄信，信封上必须有收件人的地址，包括国家、城市、街道、门牌号以及邮政编码。在Internet上定义了两种方法来标识网上的计算机，分别是Internet的IP地址和域名。,Internet上的数据能够发送到目的端的原因是：任何一个连接到Internet上的计算机都有一个惟一的网络地址。为了确保Internet上的每一个网络地址始终是惟一的，国际网络信息中心组织（InterNIC）根据公司网络的大小给他们分配了一系列IP地址（又称为Internet地址）。,IPv6简介,当前在Internet上使用的IP地址是在1978年确定的协议，它由4段8位二进制数构成。由于Internet协议的当时版本号为4，因而称为“IPv4”。IPv4的地址长度是32位（bit），理论上可以支持多达1600万个网络，容纳四十多亿台主机（232=4,294,967,296），但由于IP对地址进行了分类，分成A、B、C等类地址，实际可用的网络数和主机数远小于上述数目。,IPv6的格式：地址长度是128位（bit），8段的16位十六进制数表示，中间用“：”来隔开。,比如：60A7:9BA5:FFF0:87B5:FFFF:FFF3:BAFF:88A2,山西大学商务学院的IP地址是30，表示成IPv6地址格式是怎样的呢？,0：0：0：0：0：0：30,006530,为了方便大家记住这些IP地址，就出现了DNS.,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的一部分,为了适应Internet的迅速发展，我国成立了“中国互联网络信息中心”，并颁布了中国互联网络域名规定。,中国互联网的域名规定,我国二级域名分配（组织模式）,二级域名分配情况,com商业机构,edu教育机构,gov政府内容,net网络支持中心,org各种非赢利性组织,net网络支持中心,ac科研机构,我国二级域名分配（地理模式）,二级域名分配情况,bj北京,sh上海,tj天津,jx江西,gd广东,sx山西,tw台湾,.,视觉元素文字色彩图形图像动画音乐视频装饰物,网页设计网页认知,网页设计网页认知,架构元素（功能模块）网站名称（Logo）广告条（Banner)导航条(Menu)新闻(News)搜索(Search)友情链接(Links)邮件列表(Maillist)计数器(Count)版权(Copyright),1.2网页的设计,网页主题网页的文字网页的色彩网页版式和布局网页导航设计,1.2.1网页主题,网页的主题指网页所要表现的最主要的思想内涵，可以说是网页的灵魂。主题的概念是很模糊的，它是一种约束，是同一站点中各个页面于五彩缤纷中体现出统一风格的约束；它也是一种力量，是将各个设计者的作品有机结合起来的力量。主题必须与Web页面主要推销或展示的产品或服务紧密相关，同时它又必须有相当的吸引力。,1.2.2网页的文字,文字是网页最主要的表达形式，尽管图形使得网页变得五彩缤纷，但大多数浏览者大部分时间仍将注意力集中在页面中的文字上面，他们总是首先浏览文字内容，而甚少关心其他页面元素，甚至对导航系统也是如此。所以，给浏览者一个亲和的文字界面是必要的。,文字艺术与文字应用同一页面采用三种字体以内字型大小变化在3-6个层次以内大标题小内文粗标题细内文应用闪烁字效应控制得当特殊字体应用时应使用图片格式色彩与背景应拉开层次,文字艺术与文字应用同一页面采用三种字体以内字型大小变化在3-6个层次以内大标题小内文粗标题细内文应用闪烁字效应控制得当特殊字体应用时应使用图片格式色彩与背景应拉开层次,案例,案例,如何来评价一个网页的好坏？,视觉效果,色彩搭配整体布局,色彩搭配,1.2.网页的色彩,在制作网站的时候，色彩的选择和搭配十分重要，因为一个网站格调的确定，往往取决于色彩的选择与搭配是否适当，一般的情况下，从以下几个方面来考虑色彩的选择：色彩的鲜明性网站色彩的选择与搭配要鲜艳，这样比较容易吸引访问者的注意，而且在访问者的记忆中驻留的时间也比较长。色彩的独特性网站色彩的选择与搭配要与众不同，这样就可以使得访问者留下深刻的印象。,色彩的合适性网站色彩的选择与搭配要与网站的内容气氛相适合。色彩的联想性不同的色彩会产生不同的联想，在网站的设计中多运用具有美好联想的色彩，可以使你的网站流露出另外一种气息。页面中各处用色的选择首先确定主色。主色是指页面中相对来说较大面积使用的色彩。主色可以反映出整个网页的风格，亦可使页面内容以色彩语言表达出来。接下来是确定辅助色。辅助色可以有多种，其应用范围包括输入框的颜色，表格边框颜色、表格的底色、小图标用色、文字颜色以及链接色等等。,网页色彩策划策划网站色彩，必须处理好两种不同色彩来源之间的色彩关系。设计时应把握住不同色彩对页面和网站产生的效果，以及它们之间的色彩冲突。,网页设计网页色彩设计,强调色彩详析,网页设计网页色彩设计,强调色彩详析只要能产生色彩落差，视觉冲击起了作用，强调色彩就起了作用。,网页设计网页色彩设计,单一页面色彩布局色彩平衡（色彩在页面的布局）如何保持色彩的页面平衡是一个复杂的实际操作问题。每组色彩遇到不同的信息内容要做细微的页面调整。这些调整主要表现在色彩的面积、色彩的位置、文字信息的排版和页面其它元素的协调等诸多细节上。,网页设计网页色彩设计,单一页面色彩布局色彩平衡详析：-,网页设计网页色彩设计,单一页面色彩布局色彩平衡详析：,网页设计网页色彩设计,单一页面色彩布局色彩面积对比：,网页设计网页色彩设计,单一页面色彩布局色彩面积对比：,网页设计网页色彩设计,色彩设计既要有理性的一面，还要有感性的一面。不仅要了解色彩的科学性知识和合理的配色方法，还要了解色彩表现情感的力量。色彩设计不仅仅是为了传递某种信息，更重要的是以它特有的魅力激发起人们的情感反应，达到影响人感染人使人容易接受的目的。,网页设计网页色彩设计,色彩设计与网站风格由色彩形成的特殊风格,网页设计网页色彩设计,色彩设计与网站风格由色彩形成的特殊风格,网页设计网页色彩设计,色彩设计与网站风格由色彩形成的特殊风格,网页设计网页色彩设计,色彩设计与网站风格由色彩形成的特殊风格,网页设计网页色彩设计,如何来评价一个网页的好坏？,视觉效果,色彩搭配整体布局,整体布局,一、布局设计理念,页面尺寸,显示器分辨率的高低决定页面的显示尺寸。,1.2.4网页版面与布局设计,一、布局设计理念,页面尺寸,显示器分辨率的高低决定页面的显示尺寸。,一般分辨率在800 x600的情况下，页面的显示尺寸为：780 x428个像素；分辨率在1024x768的情况下，页面的显示尺寸为：1007x600个像素。,宽度：760px左右,宽度：960px左右,一、布局设计理念,页面尺寸,页面版式,显示器分辨率的高低决定显示页面的尺寸。,T型结构、同字型结构、川字型结构、三字型结构、封面型结构、Flash型结构。,T型结构,同字结构,川字结构,三字结构,单一结构,单一结构,二、布局设计的方法,纸上布局,在纸上画出页面的布局草图。,软件布局,手绘布局草图,手绘布局草图,手绘布局草图,手绘布局草图,二、布局设计的方法,纸上布局,软件布局,在纸上画出页面的布局草图。,利用软件来完成页面的布局。,软件布局图,Word,PhotoshopCS,常用软件,三、布局设计的技术,表格布局,CSS布局,框架布局,表格布局技术,它能对不同对象加以处理，而又不用担心各对象之间的影响。,优点,表格布局技术,页面结构与表现混杂在一起，不利于后期的维护。,缺点,源代码存在大量的冗余代码,页面下载速度受到影响。,CSS布局技术,CSS布局技术,表现形式和内容结构相分离，网页结构清晰，便于更好的控制页面布局。,优点,大大缩减页面代码，提高页面浏览速度,缩减了带宽成本。,易于修改和维护。,框架布局技术,优点,访问者的浏览器不需为每个页面重新加载导航条；每个框架都具有自己的滚动条，因此访问者可以独立滚动这些框架进行浏览。,框架布局技术,缺点,并不是所有浏览器都提供良好的框架支持。难以实现在不同框架中精确的对齐各个页面元素。,网页版面设计的步骤,（1）画出页面的结构草图：只需画出页面的大体结构，注意分辨率，设定页面显示尺寸。（2）布局细化和调整：将需要放置的功能模块安排在页面上，注意突出重点和平衡协调。（3）定格：确定出完美的布局方案，定格为最后的版式。,导航种类：图形导航文字导航按钮导航图形+文字导航动画导航设计原则：引导性明了性视觉性趣味性位置性应用原则：通过页面设计处理主从导航关系。导航与网站风格统一。动态导航链接关系流畅。,1.2.5网页导航设计,文字导航,网页设计导航设计,图形导航,网页设计导航设计,动态导航（Flash),网页设计导航设计,多重导航,网页设计导航设计,通过页面设计处理主从导航关系,网页设计导航设计,导航与网站风格统一,网页设计导航设计,导航与网站风格统一,网页设计导航设计,1.3网站的规划,定位网站主题和名称网站的风格网站的CI形象确定网站的栏目和版块确定网站的目录结构和链接结构,1.3.1定位网站主题和名称,网站名称的选择也是非常重要的。和现实生活中一样，网站名称是否正气，响亮，易记，对网站的形象和宣传推广也有很大影响。,一般的建议是：（1）名称要正。也就是要合法，和理，和情。不能用反动的，色情的，迷信的，危害社会安全的名词语句。（2）名称要易记。根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。（3）名称要有特色。名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品。这里举几个例子：音乐前卫，网页陶吧，天籁绝音。在体现出网站主题的同时，能点出特色之处。,1.3.2网站的风格,风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。这个“整体形象”包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，语气，内容价值，存在意义，站点荣誉等等诸多因素。,风格创意（艺），不仅仅是依靠色彩，图片，架构和文字等视觉元素自身的独具创新。重点是视觉元素在页面中达到协调统一，保持一致的识别体系。网站的特有风格还包括信息内容的规划管理，互动程序的建构和使用方法等其他非视觉方面。风格类型：金属风格像素风格报纸风格三维风格大字报风格,网页设计网站风格创意(艺),金属风格,网页设计网站风格创意(艺),像素风格,网页设计网站风格创意(艺),报纸风格,网页设计网站风格创意(艺),三维风格,网页设计网站风格创意(艺),大字报风格,网页设计网站风格创意(艺),风格是独特的，是站点不同与其他网站的地方。或者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的。如何树立网站风格呢？我们可以分这样几个步骤：第一，确信风格是建立在有价值内容之上的。一个网站有风格而没有内容，就好比绣花枕头一包草，好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的，无须置疑。第二，你需要彻底搞清楚自己希望站点给人的印象是什么。第三，在明确自己的网站印象后，开始努力建立和加强这种印象。,对于确定风格，这里提供一些参考：1.将你的标志logo,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。2.突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。4.想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色。5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用.。等等。虽然很简单的一个变化，却给人与众不同的感觉。8.用自己设计的花边，线条，点。,1.3.3网站的CI形象,所谓CI，是借用的广告术语。(CI是英文corporateidentity的缩写)，意思是通过视觉来统一企业的形象。标志，色彩，字体，标语是一个网站树立CI形象的关键，确切的说是网站的表面文章，设计并完成这几步，你的网站将脱胎换骨，整体形象就会有一个提高。,在您的网站主题和名称定下来之后，需要思考的就是网站的CI形象。设计网站的标志(logo)如同商标一样，logo是你站点特色和内涵的集中体现，看见logo就让大家联想起你的站点。标志可以是中文，英文字母，可以是符号，图案，可以是动物或者人物等等。比如：新浪用字母sina+眼睛作为标志。标志的设计创意来自你网站的名称和内容。比如：(1).网站有代表性的人物，动物，花草，可以用它们作为设计的蓝本，加以卡通化和艺术化，例如迪斯尼的米老鼠，搜狐的卡通狐狸，鲨威体坛的篮球鲨鱼。(2).网站有专业性的，可以以本专业有代表的物品作为标志。比如中国银行的铜板标志，奔驰汽车的方向盘标志。,新浪用字母sina+眼睛作为标志。,北京亿恒伟业房地产开发有限公司的标志是以“亿恒伟业”四个汉字的变形为主体。“亿”字左半部变形为数字“1”，预示着公司将成为行业的龙头老大，也预示者公司全体员工永争第一的拼搏精神和“信誉第一、质量第一”的经营理念，同时也寓意着公司的发展一帆风顺。,北京爱永恒影楼的标志是以英文字母“LOVE和一颗红心为主体，红心中间是抽象的一男一女携手前进的图形，寓意着两个人一颗心，从而寓意着爱永恒。,北京市昌平区第一届机关运动会的会徽是以“昌平”的汉拼“CHANGPING”的第一个字母“C”和“机关”的汉拼“JIGUAN”的第一个字母“J”变形组合的绿色跑道和运动员为主题。整个标志充满活力和激情，寓意着昌平区各机关人员在区政府的正确领导下，各项事业蓬勃发展，充满生机！,设计网站的宣传标语网站的宣传标语可以说是网站的精神，网站的目标。用一句话甚至一个词来高度概括。类似实际生活中的广告金句。例如：鹊巢的“味道好极了”；麦斯威尔的“好东西和好朋友一起分享”；Intel的“给你一个奔腾的心”。,1.3.4确定网站的栏目和版块,在动手制作网页前，一定要考虑好以下三方面：(1)确定栏目和版块(2)确定网站的目录结构和链接结构(3)确定网站的整体风格创意设计,(1)确定栏目和版块,栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。一般的网站栏目安排要注意以下几方面：一定记住要紧扣你的主题！一般的做法是：将你的主题按一定的方法分类并将它们作为网站的主栏目。主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。设一个最近更新或网站指南栏目如果你的首页没有安排版面放置最近更新内容信息，就有必要设立一个“最近更新”的栏目。这样做是为了照顾常来的访客，让你的主页更有人性化。,设定一个可以双向交流的栏目不需要很多，但一定要有。比如论坛，留言本，邮件列表等，可以让浏览者留下他们的信息。有调查表明，提供双向交流的站点比简单的留一个“Emailme”的站点更具有亲和力。设定一个下载或常见问题回答栏目网络的特点是信息共享。如果你看到一个站点有大量的优秀的有价值的资料，你肯定希望能一次性下载，而不是一页一页浏览存盘。“将心比心”在你自己的主页上设置一个资料下载栏目，会得到大家的喜欢。另外，如果您的站点经常收到网友关于某方面的问题来信，你最好设立一个常见问题回答的栏目，既方便了网友，也可以节约自己更多时间用以学习。,总结以上几点，我们得出划分栏目需要注意的是：尽可能删除与主题无关的栏目尽可能将网站最有价值的内容列在栏目上尽可能方便访问者的浏览和查询,上面说的是栏目，我们再看看版块设置。版块比栏目的概念要大一些，每个版块都有自己的栏目。举个例子：网易的站点分新闻，体育，财经，娱乐，教育等版块，每个版块下面有各有自己的主栏目。一般的个人站点内容少，只有主栏目(主菜单)就够了，不需要设置版块。,在网站根目录中开设images、common、temp三个子目录，根据需要再开设media子目录.images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志logo、banner条、菜单、按钮等等；common子目录中放css、include等公共文件；temp子目录放客户提供的各种文字图片等等原始资料；media子目录中放flash,avi,quicktime等多媒体文件。,(2)网站的目录结构,在根目录中按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images和media的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。,按栏目内容建立子目录。目录的层次不要太深。,目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，不到万不得已不要以拼音作为目录名称.,关于链接结构的设计，在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置，是否每页都需要放置，是