网站建设流程全书全套教学教程电子教案电子讲义.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,网页设计与网站建设,第,1,章 网站建设流程,1.3,1.4,1.5,1.1,1.2,域名申请,WEB,服务器选择,网页设计原则,网站测试,网站规划,1.,6,1.,7,1.,8,网站的上传与发布,网站的维护与更新,网站推广,本章主要介绍了网站建设的整体流程，主要包括：域名申请、,WEB,服务器的选择、网站规划、网站设计原则、网站测试、网站上传与发布、网站维护与更新、网站推广，由浅入深地对网站建设整体流程进行了剖析。,【本章学习目的】,通过本章的学习，读者能够掌握：,1.,了解网站域名申请流程、,WEB,服务器如何选择；,2.,了解网站规划与网页设计原则；,3.,了解网站测试、网站上传与发布；,4.,掌握网站建设完成后的推广方式。,切换的大幅广告位,栏目设置,秦宝新闻,秦宝文化,秦宝荣誉,秦宝牧场,秦宝牛,名师品鉴,秦宝产品,秦宝市场,在线订购,典型教育类的网站：新东方,1.1,域名申请,所谓域名，即企业在互联网上的名称。一个企业的域名在互联网中是唯一的。通过在浏览器的地址栏中输入网址来访问企业的网站。,域名与企业商标、企业标识物具有异曲同工的效果，因此又把域名称为,“,网络商标,”,。,域名申请步骤：,（,1,）域名命名,（,2,）准备申请资料,（,3,）寻找域名注册商,（,4,）查询域名,（,5,）正式申请,（,6,）申请成功,1.2 WEB,服务器的选择,为什么要选择,WEB,服务器？,WEB,服务器是企业信息资料的存放处。通过,HTTP,（超文本传输协议）协议来访问企业的网站。,如何构架服务器呢？有以下几种选择：,（,1,）企业自己架构服务器,（,2,）租用,ICP,（网络内容服务商）服务商的服务器,1,）虚拟主机服务,2,）租用独立服务器,1.3,网站规划,什么是网站规划？网站规划是指在网站建设前对市场进行分析、确定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试、维护等做出规划。,网站规划对网站建设起到计划和指导的作用，对网站的内容和维护起到定位作用。网站规划是网站建设的基础和指导纲领，决定了一个网站的发展方向，同时对网站推广也具有指导意义。网站规划内容通常包括以下内容：,市场分析、网站目的及功能定位、目标客户及潜在客户的需求、域名申请、,Web,服务器的选择、考虑网络的技术问题、,确定网站风格等。,1.4,网页设计原则,网页要设计好，需要看设计者的功力与用心程度。在这里应当考虑主要因素有：,内容丰富主题突出、栏目导航清晰等。,只有吸引大量的用户来关注，网站才会产生生命力。所以，设计者应当注意右侧的原则：,用户优先,“,8,秒钟原则,”,考虑用户软硬件配置,内容丰富,着手,规划、确定特色、锁定目标,首页的重要性,栏目的归类,互动性,图像应用技巧,背景底色,HTML,格式,避免滥用技术,常见网站风格,信息式,画廊式,页面干净、主题突出、栏目导航清晰,淘宝商城：服饰店装修,注重细节,1.5,网站的测试,在将所有的网站制作完毕后，就可以将网站发布到,Internet,上，但是在发布之前必须在本地搭建,WEB,服务器，对网站进行测试。,对所有影响页面显示的细节因素进行一次测试测试页面中的超链接是否能够正常跳转。,（,1,）在,Windows XP,中设置,IIS,组件,（,2,）测试,Web,服务器,1,）在浏览器中输入,http,：,/localhost,2,）在浏览器中输入,http,：,/127.0.0.1,1.6,网站的上传与发布,如果网站在测试中没有什么问题，那么就可以着手进行发布网站的工作，在之前首先要申请域名和,WEB,服务器，然后将网站上传到服务器上，就可以实现全球范围内的,www,浏览。,上传网页的方法有很多种，这里介绍比较常用的,CuteFTP,上传软件。,CuteFTP,是一个基于文件传输协议（,FTP,）的客户端应用软件，通过它，用户无需知道协议本身的细节，就可以充分利用,FTP,强大的功能，轻松地在全球范围内的远程,FTP,服务器间上传、下载文件。,1.7,网站的维护与更新,随着网站的发布，应根据访问者的建议，不断修改和更新网站中的信息，并从浏览者的角度出发，进一步完善网站，另外网站经过一段时间的运转，还需要不断的求新变化，丰富网站的实用性和美观性。,（,1,）站点的维护,1,）保证服务的安全,2,）及时回复用户反馈,（,2,）站点的更新,网页浏览者的随意性决定了网站要能够持久地吸引用户，必须要不断地更新内容，使用户保持足够的新鲜度。,1.8,网站的推广,企业在网上建立了自己的网站，如何让更多的用户和合作伙伴知道，这就是网站推广的意义所在。在网络经济与电子商务迅猛发展的今天，很多企业都认识到了建立企业站点的必要性。但是企业网站建好以后，如果不进行推广，那么企业的产品与服务在网上就仍然会不为人所知，起不到建立站点的作用，因此企业在建立网站后即应着手利用各种手段推广自己的网站。,要持续推广站点，保持公众的新鲜感。可以考虑如下建议。,（,1,）在各大搜索引擎上登记自己的网站，让别人可以搜索到网站。,（,2,）用,QQ,、,MSN,、微博、微信等，把网站地址传给其他潜在访问者。,（,3,）撰写软文，在,BBS,、博客、微博上作宣传，并将网站地址写在签名里。,（,4,）与其它网站做友情链接。,本章小结,本章主要介绍了网站建设的整体流程，包括：域名申请，,WEB,服务器的选择，网站规划与网页设计原则，网站测试、上传与发布，以及后期的维护和更新与推广。,练习题,（,1,）域名命名的规则是什么？中小型企业应选择哪种,WEB,服务器？,（,2,）什么是网站规划？网站规划的内容主要包括哪些方面？,（,3,）你认为网页设计应遵循的主要原则是什么？,上 机 实 验,1,背景知识,根据已经掌握的网站建设流程，虚拟一个名为,“,美林电子有限公司,”,的企业，进行域名的申请和,WEB,服务器的选择。,2,实训准备工作,保证,Internet,连接畅通，浏览器能够正常运行。,3,实训要求,（,1,）连接,Internet,，打开浏览器，访问某个互联网信息服务提供商的网站。,（,2,）自拟,“,美林电子有限公司,”,企业的域名，在该网站上查找，尝试是否可注册。,（,3,）如可注册，填写该企业模拟的相关信息。,（,4,）选择适合该公司的,WEB,服务器。,4,课时安排,上机实训安排,1,课时。,网页设计与网站建设,第,2,章 网络与网页设计基础知识,Internet,基础,2.1,2.2,网页设计与,制作工具,2.3,HTML,语言,2.4,使用,UltraEdit,软件编写网页,2.5,网页设计中的色彩应用,本章主要介绍了在开始网页设计之前需要了解的网络知识，如：网络基本理论、网页色彩的应用、网页设计与制作工具、,HTML,语言等。,【本章学习目的】,通过学习，读者能够：,1.,了解,Internet,发展历程和,Internet,所提供的网络服务,2.,了解网站访问的基本原理，以及域名和,IP,的关系,3.,赏析设计精美的网页，掌握网页的色彩应用,4.,初步了解网页设计与制作工具,5.,掌握,HTML,语言,2.1 Internet,基础,2.1.1,Internet,的概述,Internet,是相互连接的网络集合。是由成千上万个网络、上亿台计算机通过特定的网络协议相互连接而成的全球计算机网络，是提供信息资源查询和信息资源共享的全球最大的信息资源平台。,网络协议是网络中的设备进行通信时共同遵循的一套规则，即以何种方法获得所需的信息国内,internet,发展现状：据中国互联网络信息中心（,CNNIC,）发布的第,33,次,中国互联网络发展状况统计报告,显示：截至,2013,年,12,月，中国网民规模达,6.18,亿，互联网普及率为,45.8%,。其中，手机网民规模达,5,亿，继续保持稳定增长。,2.1.2,WWW,WWW(World Wide Web),简称为,Web,或万维网，客户端只要通过,“,浏览器,”,（,Browser,）就可以非常方便地访问,internet,上的服务器端，迅速地获得所需的信息。如图所示：,internet,浏览器,WEB,服务器,客户端,HTTP,网络协议,2.1.3,网页与网站,构建WWW,的基本单位是网页。网页中包含所谓的,“,超链接,”,，通过已经定义好的关键字或图形，只要用鼠标轻轻一点，就可以自动跳转到相应的其它文件，获得相应的信息，从而实现网页之间的链接，从而构成了,WWW,的纵横交织的网状结构。,通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。,网站的概念是相对的，大的如新浪、搜狐等大的门户网站，页面非常多，可能分布于多台服务器上；小的如一些个人网站，可能只有几个页面，仅在某台,WEB,服务器的占据很小的空间。,一个站点的起始页面通常被称为,“,主页,”,，主页是一个网站的开始，因此主页的好坏决定了这个网站的访问情况，一般主页的名称是固定的index.htm,、,index.html,或是,default.htm,等。,2.1.4,域名与,IP,地址,在,Internet,上的每台网络设备都要有一个唯一的地址才能被访问到，这个地址就是,IP,地址。目前,IP,协议有：,IPV4,和,IPV6,下面以,IPV4,为例。,IP,地址是由,32bits,的二进制数值构成，分成,4,组，转化为十进制用点分隔，比如：,202.100.4.11,。,IP,地址的结构是：,“,网络地址,+,主机地址,”,A,类地址的范围为：,1.0.0.0126.255.255.255B,类地址的范围,为,：,128.0.0.0-191.255.255.255,C,类地址的范围,为,：,12.0.0.0-223.255.255.255,0 1 2 3 8 16 24 31,0 1 2 3 8 16 24 31,0 1 2 3 8 16 24 31,1 0,网络号 主机号,0,网络号 主机号,1 1 0,网络号 主机号,A,B,C,（,1,）特殊的,IP,地址：,127.0.0.1-,回路测试地址,;,127.0.0.1-,测试本机中配置的,Web,服务器,（,2,）公有,IP,地址和私有,IP,地址,:,私有,IP,地址是留用的内部私用,IP,地址：,A,类：,10.0.0.0-10.255.255.255,B,类：,172.16.0.0-172.31.255.255,C,类：,192.168.0.0-192.168.255.255,IPV6,的相关知识请查阅有关网络技术方面的参考书籍,IP,地址跟域名的关系,域名的分类,根域,Com net org jp cn tw,Sina ebay alibaba,域名结构图,Ibm hp yahoo,Com edu net,按组织机构划分,按国家和地区划分,域名,域名机构,附注：全称,Com,商业机构,Commercial organization,Edu,教育机构,Educational institution,Gov,政府部门,government,Int,国际性机构,International organization,Mil,军队,military,Net,网络机构,Networking organization,Org,非盈利机构,Non-profit organization,表,1.1,按组织分类的顶级域名,表,1.2,按地理区域分类的项级域名,域名,国家,附注：全称,cn,中国,China,ca,加拿大,Canada,jp,日本,Japan,kr,韩国,Korea,ru,俄罗斯,Russia,tw,台湾,Taiwan,hk,香港,Hong Kong,域名的书写格式为：叶节点名,.,二级域名,.,顶级域名,例如：www,：,web,服务器名，,sohu,：企业名称，com,：顶级域名。,布置思考题：请查阅,ICP,服务商网站，还有哪些常用的域名？,2.2,网页设计中的色彩应用,2.2.1,色彩的应用,色彩使宇宙万物充满情感，生机勃勃。色彩作为一种最普遍的审美形式，存在于人们日常生活的各个方面，人们的衣、食、住、行、用均与色彩发生着密切的关系。,（,1,）色彩的冷暖,红、橙、黄等颜色使人联想到阳光、烈火，故称为,“,暖色,”,；绿、青、蓝等颜色与黑夜、寒冷相连，故称为,“,冷色,”,。,（,2,）色彩的轻重,各种色彩给人的轻重感不同，从色彩得到的重量感，是质感与色感的复合感觉。浅色密度小，给人质量轻的感觉；深色密度大，给人分量重的感觉。,（,3,）色彩的前进与后退,如果等距离地观察两种颜色，可以给人不同的远近感。暖色比冷色更富有前进的特性。两色之间，亮度偏高的色彩呈前进性，饱和度偏高的色彩也呈前进性。,（,4,）色彩的艳丽与素雅,如果是单色，饱和度越高，则色彩越艳丽。饱和度越低，则色彩越素雅。除了饱和度，亮度也有一定的关系。不论什么颜色，亮度高时，即使饱和度低也给人艳丽的感觉。,2.2,网页设计中的色彩应用,2.2.2,配色方案的应用实例,红色让人联想到玫瑰、喜庆、兴奋；白色联想到纯洁、干净、简洁；紫色象征着女性化、高雅、浪漫；蓝色象征高科技、稳重、理智；橙色代表了欢快、甜美、收获；绿色代表了充满青春的活力、舒适、希望等。当然不是说某种色彩一定代表了什么含义。在特定的场合下，同种色彩可以代表不同的含义。,红色色系,蓝色色系,2.3,网页制作工具,大多数网页的制作都是通过,“,所见即所得,”,的编辑工具完成的,“,所见即所得,”,，素材的创作和加工需要通过图形和动画设计工具来完成。,2.3.1,网页编辑工具,网页编辑工具主要分为标记型和所见即所得型。标记型工具常用的是,notepad(,记事本,),、,Ultraedit,等。,所见即所得型的编辑软件主要有：微软的,Frontpage,和,Dreamweaver,。其中,Frontpage,继承了,OFFICE,系列软件的界面通用、操作简单的特点，十分适合初学者使用。但与,Adobe公司的,Dreamweaver,相比，在,HTML,源代码的精确性、实用性以及对各种新技术的支持上都略逊一筹，因此我们这里主要介绍的网页编辑工具是,Dreamweaver,。,2.3.2,图形和图像处理工具,目前常用的图形和图像处理工具主要：,Photoshop,及,Fireworks,。,Photoshop,的功能十分强大，是目前最为广泛的专业图形图像处理软件之一，它捆绑了,Image Ready,，能够实现各种专业化的图像处理、动画的制作等。,Fireworks,是由,MacorMedia,公司出品的首选,WEB,图形图像处理软件。它的独特之处在于其能够优化处理大图片、切割图片、为图片加入特殊效果、制作网页的动态行为等，可以生成,Fireworks HTML,，直接导入到网页中，使用非常方便。,2.3.3,动画制作工具,Flash,是目前网页制作中最为出色的动画制作软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。,Flash,所使用的图形是压缩的矢量图形，采用了网络流式媒体技术，突破了网络带宽的限制，可以边下载边播放，这样避免用户长时间的等待，设计者可以随心所欲地设计出高品质的动画，,Flash,已经慢慢成为网页动画的标准，成为一种新兴的技术发展方向。,Photoshop CS5,的工作界面,2.4,HTML,语言,网页的本质是 超文本标记语言,HTML,，超文本使网页之间具有跳转能力，使浏览者可以选择阅读路径。,使用,HTML,编写的,WEB,页面称之为,HTML,文件，这种文件一般以,“,.html,”,或者,“,.htm,”,为扩展名，可以使用记事本、,Altraedit,标记型软件编辑，也可使用,Dreamweaver,、,Frontpage,等所见即所得类网页制作工具来快速创建,HTML,文件。,HTML,文件通常分为头部和主体两部分，头部（,HEAD,）包含了编写页面的说明信息，如页面的类型、使用的字符集以及页面的标题等，这部分内容不会显示在网页中；主体（,BODY,）则包含希望表达的信息，可以是正文、图像、指向另一个,WEB,页面的超链接等。,2.4.1HTML,语法格式,HTML,文件的所有控制语句称为标签，标签在一对尖括号之间，格式如下：,HTML,语言元素,1,）标签分为成对标签和非成对标签，比如：,、,、,等属于成对标签，而,、,等属于非成对标签，标签忽略大小写，书写格式非常灵活。,2,）可使用标签的属性来进一步限定标签，一个标签可以有多个属性项，各属性项的次序不限定，各属性项间用空格来进行分隔。,例如：,3,）,HTML,中使用的注释语句为,，注释内容可插入文本中任何位置，注释内容不会显示在网页中。,2.4.2,常见的,HTML,标签,1,）,标识,HTML文件的开始与结束。中间是一些,HTML,语言的元素。它允许网络浏览器把文件内容确认为,HTML,文件。,2,）,头部标签，其中的信息不会出现在网页中。但其中包含了许多网页的属性信息，例如网页的题目、关键词、说明、网页类型和语言内码等。,（,1,）,标题标签，网页的标题将会显示在浏览器的标题栏上。,（,2,）,meta,标签，包括了,MIME,字符集信息、网页关键字、网页说明信息等，这些信息有助于网站的推广。,3,）,和,主体标签，它是文档的主干，包含了文档的内容。可以通过多种途径来表现这些内容。例如，对于可视浏览器，可以把主体想象成一张画布，在画布上出现文字、图像、颜色和图案等。,（,1,）段落标签，中间是一段文字的内容，可以设置其属性来对文字进行排版。,（,2,）,字体标签，可通过设置其属性来美化字体。,（,3,）,标题标签，设置一段文本为标题，有特定的格式，标题分为,1-6,级。,（,4,）,图像标签，设置网页中图像的来源、尺寸、对齐方式和说明等。,（,5,）,超链接标签，设置超链接的链接目标和名字等。,（,6,）,表格标签，通过表格可以对网页中的其它元素进行排版。构成表格标签的基本标签有：,表格标题标签，定义表格的标题,表格的行标签，定义表格中的一行,定义表格行中的一个单元格,.,表头的单元格标签，定义表格内的表头单元格,2.5,使用,UltraEdit,软件编写网页,任何文本编辑器都可以编写,HTML,。比如,Notepad,（记事本）、,Ultraedit,等，但保存的时候必须保存为,.html,或,.htm,格式。有一些文本编辑器专门提供网页制作及程序设计等许多有用的功能，支持,HTML,、,CSS,、,PHP,、,ASP,、,Perl,、,C/C+,、,Java,、,JavaScript,、,VBScript,等多种语法的着色显示。,例如：,EmEditor,、,EditPlus,、,UltraEdit,。,UltraEdit,如图所示。,本章小结,本章主要介绍了网页设计基础知识：,1,网络基础知识,（,1,）,internet,的起源与发展、国内,internet,的发展现状,（,2,）,WWW,的概念，,WWW,的访问方式及网络协议,（,3,）域名和,IP,地址之间的关系,2,网页设计中色彩的应用,3,网页制作工具：网页编辑工具、图像及动画制作工具,4,HTML,语言的简介,5,利用文本编辑器,UltraEdit,编写网页,练习题,（,1,）什么是,Internet,？叙述,Internet,的产生与发展。,（,2,）什么是,WWW,？如何访问,WWW,？,（,3,）,IP,地址与域名之间的关系如何？,（,4,）,HTML,文件中的标签是否区分大小写？格式有无严格要求？,上机实验,1,背景知识,根据已经掌握的网络知识和本章学习的,HTML,语言的知识，编写简单网页的源代码；浏览网站，分析网站的特点。,2,实训准备工作,保证,Internet,连接畅通，学生主机安装相应的网页设计与制作软件：,Ultraedit,、,Dreamweaver,、,Fireworks,、,Flash,和,Photoshop,等。,3,实训要求,（,1,）连接,internet,，打开浏览器，浏览某个网页，查看其源代码，了解,HTML,代码的含义。,（,2,）打开,Ultraedit,，试用,HTML,语言编写一个简单的网页，网页中要包含以下内容：网页标题、文本、图像、超链接等。,（,3,）上网浏览不同的电子商务网站，比如：淘宝、联想、新浪等，分析站点结构、站点风格及网页配色等，写出分析报告。,4,课时安排,上机实训安排,1,课时。,网页设计与网站建设,第,3,章 利用,fireworks CS5,设计网页界面,3.1,3.2,3.3,3.4,3.5,网站首页的界面,设计,制作精美,Banner,3.4,3.6,3.7,网页图像的切片和导出,图像基础知识,fireworks CS5,简介,LOGO,的设计,设计网站按钮和导航栏,本章详细介绍了如何利用,Fireworks,软件进行图像处理和网页界面的设计。,本章学习目的,通过学习，读者能够：,1.,掌握,Fireworks,软件基本操作,2.,掌握使用,fireworks,软件设计,logo,、导航栏、,banner,、网站平面效果图,3.,掌握将图像切割、导出为网页的方法,案例导入：,本章将带你亲身体验,Fireworks,在网页创作中的强大功能，通过一个网站界面的设计过程，详细介绍,Fireworks,在网页设计的不同阶段是如何处理各种不同任务的。,天星电子元件公司网站,3.1,图像类型,（,1,）矢量图,矢量图形是用线条和填充色等数学信息来描述图形的，一般矢量格式的文件通常比较小，对矢量图进行操作，改变图形尺寸、形状等，不会改变图形的显示品质。制作矢量格式图形的软件有,Freehand,、,CorelDraw,、,AutoCAD,等。,（,2,）位图,位图图像是用像素点描述图像的。在位图中，图像的细节由每一个像素点的位置和色彩来决定。位图图像的品质与图像生成时采用的分辨率有关，即在一定面积的图像上包含有固定数量的像素。当图像放大显示时，图像变成马赛克状，因此放大图像的尺寸，会降低图像的显示品质，如图所示。制作位图图像的软件常有,Photoshop,、,Fireworks,、,ImageReady,等。,3.1,图像基础知识,3.1.2,图像分辨率,分辨率确定了一幅图像的品质和能够打印或显示的细节含量。分辨率的单位为像素,/,英寸（英文缩写为,dpi,），表示图像上每一线性英寸的像素数。线性是指在直线上计算像素数，如果图像的分辨率是,72dpi,，即每英寸,72个像素，则每平方英寸上有,5184,个像素。假设图像中的像素数是固定的，增加图像的尺寸将降低其分辨率，反之亦然。,分辨率的大小直接影响图像的品质。分辨率越高，图像越清晰，文件也就越大，计算机运行就越慢。,所以在制作图像时，不同品质的图像设置适当的分辨率即可。例如打印输出的图像分辨率就需要高一些，一般设置为,300dpi,，如果只是网页图像,72dpi,就足够了。,3.1.3,图像文件格式,在计算机绘图中，有较多的图形和图像处理软件，而不同的软件所保存的图像格式则是不相同的。,例如：,Photoshop,软件所支持位图文件格式有：,PSD,、,TIF,、,BMP,、,JPG,、,GIF,和,PNG,等,20,余种格式的文件。,PSD,是,Photoshop,软件的源文件格式，可保留图层等图像文件的全部信息。,3.2 fireworks CS5,简介,Fireworks,是一款专为网络图形设计的图形编辑软件，这就大大简化了网络图形设计的工作难度。使用,Fireworks,即可以设计静态图像，也可以轻松地制作出十分动感的,GIF,动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。借助于,Fireworks CS5,，您可以在直观、可定制的环境中创建和优化用于网页的图像并进行精确控制。,Fireworks,的优化工具可帮助您在最佳图像品质和最小压缩大小之间达到平衡。它与,Dreamweaver,和,Flash,共同构成的集成工作流程可以让您创建并优化图像。利用可视化工具，无需学习代码即可创建具有专业品质的网页图形和动画，如变换图像和弹出菜单等。,Fireworks,可创建和编辑矢量图像与位图图像，并可导入和编辑,Photoshop,和,Illustrator,文件。,fireworks,源文件格式为,png,，可以保存图层、图像特效、图像切片等相应的信息。,在图像插入到网页之前，一般需要将图像进行处理。在,Fireworks,中处理网页图像一般遵循以下步骤：创建图形和图像,创建,Web,对象,优化图像,导出图像。,3.2.1 Fireworks,中图像处理的流程,Fireworks CS5,是一个强大的网页图形设计工具，使用它可以创建和编辑位图、矢量图形，还可非常轻松地做出各种网页设计中常见的效果，例如动画、翻转图像、导航条、下拉菜单等。设计完成以后，如果要在网页设计中使用，可将它输出为,HTML,文件，还能输出在,Photoshop,，,Illustrator,和,Flash,等软件中编辑的格式。,Fireworks CS5,的工作界面由,5,个部分组成：,“,菜单,”,栏、,“,文档,”,窗口、,“,工具箱,”,面板、,“,属性,”,面板、集成工作面板，如图所示。,3.2.2 Fireworks CS5,工作界面,3.3 logo,的设计,本实例主要涉及的知识点：文本输入、滤镜效果的应用、渐变效果的设置以及矢量工具的使用等。操作步骤如下：,（,1,）新建文档：,400*140,像素,（,2,）输入文本：,“,天星,”,（,3,）,“,滤镜效果,”,使用：阴影和光晕中的光晕,（,4,）,“,渐变,”,工具的使用：浅绿色到鹅黄色再到白色,（,5,）克隆图像：克隆文本后，修改文字为,“,电子元件,”,，修改字体大小。,（,6,）,“,矢量,”,工具的使用：绘制五角星，并复制多个。,在市场竞争日逾激烈的今天，严格管理和正确使用统一标准的公司的徽标，将为我们提供一个更有效、更清晰和更亲切的市场形象。,LOGO,是人们在长期的生活和实践中形成的一种视觉化的信息表达方式，具有一定含义并能够使人理解的视觉图形，具有简洁、明确、一目了然的视觉传递效果。本节讲述天星电子元件公司网站的,LOGO,设计。,3,.,4,设计网站按钮和导航栏,导航栏是指位于页眉区域的横幅图片上方或下方的水平或垂直的导航按钮，它起着链接网站各个页面的作用。网站使用导航栏是为了让访问者方便地找到所需要的资源。,本实例主要涉及的知识点：渐变效果的设置、文本输入、按钮的制作、对齐工具的使用、导航栏设计等。,操作步骤如下：,（,1,）新建文档：,1000*50,像素,（,2,）背景颜色设置：绘制和画布大小一致的矩形，填充为轮廓渐变：由,#293036,到,#181D21,（,3,）输入文本：首页,（,4,）按钮的制作：选中文本，单击,F8,快捷键，将文本转换为按钮元件，命名为首页，双击,“,首页,”,按钮元件，进入到按钮的编辑中，编辑弹起、滑过、按下三个状态。,（,5,）多次复制,“,首页,”,按钮，并分别修改,“,首页,”,按钮文本为,“,公司简介,”,、,“,新闻动态,”,等。,（,6,）单击,“,直线,”,工具，设置颜色为灰色,#A1ACB2,，绘制多段垂直线段作为按钮的分割线。利用对齐面板将分割线对齐。,3,.,5,制作精美,Banner,Banner,可以是网站页面的横幅广告，也可以是游行活动时用的旗帜，还可以是报纸杂志上的大标题。,Banner,主要体现中心意旨，形象鲜明表达最主要的情感思想或宣传中心。放置在广告商的页面上，是互联网广告中最基本的广告形式。,本实例主要涉及的知识点：渐变效果的设置、文本输入、素材导入、图层混合模式的使用、图层不透明度的设置、以及图层位置的设置等。,操作步骤如下：,（,1,）新建文档：,1000*222,像素,（,2,）背景颜色设置：绘制一个与画布大小一致的矩形，填充为线性渐变，由,#003C58,到,#0176AB,再到,#00C4EC,。,（,3,）输入文本：十年品质 创造一流服务理念。,（,4,）单击,“,文件,”,菜单,“,导入,”,命令，将素材文件夹中的素材导入到画布中，设置图层的混合模式，图层的不透明度，并调整图像的位置和图层的上下顺序。,3.6,网站首页的界面设计,一般而言，首页设计几乎等同于整个网站设计，因此网站首页设计非常重要。首页设计要考虑的问题涉及配色方案的确定、版面布局、网站内容的填充等。,要制作首页，首先要对主页有一个规划，即首页的版面布局，这样才能合理安排网页的内容。,在,3.3,至,3.5,节中已经把公司的,logo,、导航栏、,banner,设计完成。本节延续前面的内容。,新建一个文档，画布大小为,1024*1070,，然后根据页面的版面布局，导入公司的,logo,、导航栏、,banner,等。,继续网页界面中主体内容的设计。用线段将页面分成三栏，左栏：产品分类树和联系方式，右栏是广告区域，中间栏内容较多，为公司新闻、产品展示以及公司简介等，分别填充相应的图像和文本。,作为设计者来说，一般采用,Fireworks,或,Photoshop,之类的设计软件来设计网页界面的效果图，图像切片后，导出到网页编辑软件，如,Dreamweaver,中进行编辑，这种方法可以使页面控制更加得心应手。,3.7,网页图像的切片和导出,使用,Fireworks,进行网页界面设计的过程中，经常会使用,“,切片,”,工具将一幅大图像分割为一些小的图像切片，然后在网页中通过没有间距和填充的表格重新将这些小的图像无缝地拼接起来，成为一幅完整的图像。这样做可以降低图像的大小，减少网页的下载时间，并且能创造交互的效果，如翻转图像等，还能将图像的一些区域用,html,来代替。,Fireworks,在网页切片制作方面有很强的优势。,切片区域的创建有两种不同的方法，第一种是单击工具栏的,“,切片,”,工具，进行指定区域大小的切割；第二种是直接选中某个对象，在右键弹出菜单上选择,“,插入矩形切片,”,或,“,插入多边形切片,”,，为添加切片后的网页文件效果。,在完成切片分割后，单击,“,文件,”,“,导出,”,，选择导出类型为,“,HTML,和图像,”,，切片类型为,“,导出切片,”,，选择导出路径后，便可以完成切片区域的导出，得到众多小的网页分割图和网页，用于网站建设。,本章小结,本章主要介绍了,Fireworks,使用方法和技巧，创建图形图像。,1.,利用,Fireworks,设计,LOGO,2.,利用,Fireworks,设计导航条,3.,利用,Fireworks,设计,banner,4.,利用,Fireworks,设计整幅,Web,页面,本章练习题,（,1,）简述位图和矢量图的区别。,（,2,）对待文本可以像对待矢量对象一样处理吗？,（,3,）将大图分隔成小图有什么优点？如何使用切片工具？,（,4,）按钮有几种状态，哪种状态可不用编辑？,上机实验,1,背景知识,根据前面所学的色彩应用的知识，再结合本章所学的,Fireworks,软件操作的知识，制作静态图像及动态图像的效果图，能够独立设计出网页平面图。,2,实验准备工作,将实验的样图及相应的图像及文本素材发送到学生主机，供学生参考使用。,3,实验要求,（,1,）制作,LOGO,。要求：,1,）使用钢笔工具，绘制一个盾形路径的一半，并拷贝翻转合成一个完整的盾形，盾形是对称的；,2,）合成盾形后填充色彩，并添加文本，生成企业,LOGO,。,（,2,）制作,Banner,。要求：,1,）导入图片作为背景；,2,）输入企业文本，并适当调整文本大小，完成企业,Banner,。,（,3,）制作按钮和导航栏。要求：,1,）绘制一个矩形，渐变填充，添加文本，转换为按钮元件。,2,）按钮克隆后，修改文本和样式显示效果，水平排列，添加不同的链接路径，即为导航栏。,（,4,）设计,Web,页面。要求：,1,）布局页面，规划网页内容。,2,）绘制页面分区，填充网页内容，切割图片，导出网页。,4,课时安排,上机实验安排,4,课时，前两项实验要求为,2,课时，后两项要求为,2,课时。,网页设计与网站建设,第,4,章 利用,Photoshop CS5,进行网页设计,4.1,4.2,4.3,4.4,4.5,设计网站首页,界面,设计网站,Banner,3.4,4.6,4.7,网页草图的切片和导出,Photoshop CS5,简介,设计网站,LOGO,设计网站导航栏,设计网站,子页界面,第,4,章 利用,Photoshop CS5,进行网页设计,本章首先介绍了,Photoshop cs5,软件操作，通过多个图像和网页界面的设计过程，讲解如何利用,Photoshop,进行网页设计。,【本章学习目的】,通过本章的学习，读者能够：,1.,掌握,Photoshop cs5,软件基本操作,2.,掌握利用,Photoshop cs5,软件进行,logo,、导航栏、,banner,设计,3.,掌握利用,Photoshop cs5,软件进行网站首页和内容页界面的设计,案例导入：,本章通过使用,Photoshop CS5,设计西京食府网站（名称为虚拟）的,banner,、,logo,、导航栏、网站首页界面和子页界面等，详细介绍,Photoshop CS5,在网页设计的不同阶段是如何处理各种不同类型图像的。,4.1 Photoshop CS5,简介,Adobe Photoshop,是一款功能强大的图像处理软件，由美国,Adobe,公司在,1990,年首次推出，在图像处理和电脑绘图领域中占据了重大地位。经过多次更新换代，功能不断增强与完善，最新推出的,Photoshop CS5,，新增加了许多功能，如：流体画布旋转的功能，调整面板的改进，创新的,3D,与绘图合成等功能，使原有功能更加完善。,Photoshop,的应用领域很广泛，在图像、网页设计、视频、,WEB,出版各方面都有涉及。,Photoshop,的专长在于图像处理，而不是图形创作主要用于平面设计、网页设计、绘画、标志设计、数码照片处理及一些后期处理等方面。,Photo,shop,CS5,的工作界面由“菜单”栏、“属性”栏、“图像编辑”窗口、状态栏、工具箱、控制面板,等,组成,。,4.2,设计网站,LOGO,本节以西京食府,logo,设计实例入手，讲述如何利用,Photoshop CS5,进行网站,logo,设计，逐一向读者展示,Photoshop,在网页设计的强大功能。,主要涉及以下知识点：新建文件、选取框工具的使用、填充选取框、选取框的羽化效果和调整边缘的设置、输入文本等。,操作步骤如下：,1,新建文件：尺寸为,1080*425,像素,2,绘制,logo,（,1,新建图层：选择“矩形选择”工具，设置羽化值为,15px,，画一个合适大小的,logo,矩形外框。,（,2,）填充底色。设置前景色为,#561801,，右击选择框，在弹出菜单中选择“填充”命令，在弹出的对话框中，内容选择前景色，单击“确定”按钮，如图,4.5,（,a,）所示。单击画布上方处属性栏的“调整边缘”按钮，将对比度调整为,100%,，选择输出到“新建图层”。,（,3,）继续单击“矩形选择”工具，参数不变，单击,logo,中心点，创建一个和刚才大小一样的矩形外框，单击“矩形选择”工具，将羽化值从原来,15px,调整为,0px,。按下,alt,键，光标变为一个“,+-”,形状，在左侧最上方