1、（一）理论知识方面主要达到： 1了解互联网、网页、网站、超级连接、HTML语言、FTP、HTTP等基础网络知识； 2了解网站设计制作的常用工具与基本流程 3了解html语言的一般规律 4了解不同网站类型不同的设计与制作要求 5了解网站的整体结构规划 （二）能力方面主要达到： 熟练掌握Macromedia Dreamweaver的基本操作； 掌握网页图像的优化技巧； 了解网站的测试、发布、推广与维护；,第一章。网页设计基础第二章。H.T.M.L.第三章。制作工具 Dreamweaver第四章。CSS层叠样式表第五章。界面设计第六章。把网站放到网上第七章。网站的组织与策划,第一章 网页设计基础知识
2、,学习重点难点：,INTERNET. inter的含义是“交互的”；net是指“网络”，简单的说，Internet是一个计算机交互网络，中文称“国际互联网（因特网）。,一、Internet的功能 1.信息的获取与分布 2.电子邮件（E-mail） 3.网上交际 4.电子商务 5.网络电话 6.网上事务处理 7.Internet的其他应用,二、Internet起源与发展 第一阶段（雏形）： Inernet起源于1969年，当时美国国防部为了能在爆发核战争时保障军队内部的通信联络，由其下属的高级研究计划署（Advanced Research Projects Agency,ARPA）建立了一个由4
3、台计算机互联而成的试验性的分组交换网络ARPAnet。 第二阶段（发展）ARPAnet网络和TCP/IP技术的成功，使美国国家科学基金会（Natioinal Science Fundation,NSF）认识到网络将成为科学研究的重要手段。为了使科研人员可以共享以前军方只为少数人提供的超级计算设施，1985年，NSF出资在全美建立了五大超级计算中心，并于1986年建立了一个成为NSFnet的高速信息网络。该网络互联了NSF的所有的超级计算机，并连入了ARPAnet。这样NSFnet取代了ARPAnet成为了INTERNET的主干网。NSFnet同样采用TCP/IP协议，并且NSFnet面向全社会
4、开放，使INTERNET进入了以资源共享为中心的实用服务阶段。从此，INTERNET开始迅速发展，很快走向了整个世界。 第三阶段（商业化） 90年代初，商业机构开始进入Internet,开始了新的进程。,网页技术基础 1.图形、图像的处理、制作 2.动画制作 3.文本编写 4.框架设计 5.应用表格,1.静态网页设计 初期的网页设计都是静态的。只有文字、图形、图像等。用户只能接受信息。 WEB页面的核心是HTML.2.动态网页设计 动态网页是与静态网页相对应的，也就是说，网页 URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见形式，而是以.asp、.jsp、.php、
5、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号“?”，如有这样一个动态网页的地址为: http:/ 这就是一个典型的动态网页URL形式。,ASP 即Active Server Pages（动态网页），它是微软开发的一种类似HTML(超文本标识语言)、Script(脚本)与CGI(公用网关接口)的结合体，它没有提供自己专门的编程语言，而是允许用户使用许多已有的脚本语言编写ASP的应用程序 。JSP 即Java Server Pages，它是由Sun Microsystem公司于1999年6月推出的新技术，是基于Java Servlet以及整个Java体系的Web开发技术
6、。 PHP 即Hypertext Preprocessor(超文本预处理器)，它是当今Internet上最为火热的脚本语言，其语法借鉴了C、Java、PERL等语言，但只需要很少的编程知识你就能使用PHP建立一个真正交互的Web站点。 JSP和ASP在技术方面有许多相似之处，不过两者来源于不同的技术规范组织，以至 ASP一般只应用于Windows NT/2000平台，而JSP则可以在85以上的服务器上运行，而且基于JSP技术的应用程序比基于ASP的应用程序易于维护和管理，所以被许多人认为是未来最有发展前途的动态网站技术。,动态网页语言,什么是网站？什么是网页？,网页和网站的本质区别与之间的相互
7、联系 好多人不解网页设计与网站建设究竟有哪些区别，做一个网站与做一个网页，两者究竟什么意思，建一个网站是不是就是制作一个网页，二者有何区别？网站之所以称之为“站”，就代表是互联网上的一个站点，建好了一个网站，就相当于在互联网上“安了一个家”，要实现这个目的，就需要注册一个域名，申请租用一个空间（即虚拟主机），也可以注册个企业邮箱，然后就是网站里面的内容了，网站里面的内容，我们称之为一个个的网页，整个内容就是一个个的网页相互链接而成，因而可以这样说，网站建设内部包括一个个的网页设计与制作，也就是光制作网页出来，还不能在互联网上建设一个网站。我们对网站的建设与开发，实际上就是对网页的设计与制作，网
8、页设计软件常见的就是网页三剑客，通常网页的扩展名有htm,也有html，还有asp、、jsp、php等等，制作与设计出来的网页仅仅是一个个的文件，只有把一个个的文件互相链接，才能形成一个整体，在这当中，一般来说，是以index文件作为默认的访问页。平时所说的网站建设，其本质的意思实际上就是对网站的制作与设计，俗称建网站、建站的意思，也就是做网站的代名词，一般包括域名空间与设计三部分。从本质上讲，网站是由域名、空间、网页组成，仅是把网页制作出来是不够的，还需要注册域名，申请服务器空间才行。如果用一个公式来形容的话，就是网站建设=网页设计+域名注册+空间申请+企业邮局申请。另外，网站除了一般的网页
9、之外，往往还有一些其他的东西：比如数据库，就拿“编程爱好者”来说，网站需要保存你的用户名，还有密码，以及这许许多多的帖子，这都需要数据库！好的网站往往还有独立的程序文件！因为要通过程序判断你输的密码对不对等等！,网页 + 网站 = Internet,+ =,网站种类 1.根据网站提供的服务分类（1）、资讯门户类网站（2）、企业品牌类网站（3）、交易类网站（4）、社区网站（5）、办公及政府机构网站（6）、互动游戏网站（7）、有偿资讯类网站（8）、功能性网站（9）、综合类网站,1、资讯门户类网站本类网站以提供信息资讯为主要目的，是目前最普遍的网站形式之一。这类网站虽然涵盖的工作类型多，信息量大，访
10、问群体广，但所包含的功能却比较简单。其基本功能通常包含检索、论坛、留言，也有一些提供简单的浏览权限控制，例如许多企业网站中就有只对代理商开放的栏目或频道。这类网站开发的技术含量主要涉及到三个因素： 1、承载的信息类型。例如是否承载多媒体信息，是否承载结构化信息等。 2、信息发布的方式和流程。 3、信息量的数量级。目前大部分的政府和企业的综合门户网站都属于这类网站。 比如新浪、搜狐、新华网,2、企业品牌类网站企业品牌网站建设要求展示企业综合实力，体现企业 CIS 和品牌理念。企业品牌网站非常强调创意，对于美工设计要求较高，精美的FLASH 动画是常用的表现形式。网站内容组织策划，产品展示体验方面
11、也有较高要求。网站利用多媒体交互技术，动态网页技术，针对目标客户进行内容建设，以达到品牌营销传播的目的。企业品牌网站可细分为三类： 1、企业形象网站：塑造企业形象，传播企业文化，推介企业业务，报道企业活动，展示企业实力。 2、品牌形象网站：当企业拥有众多品牌，且不同品牌之间市场定位和营销策略各不相同，企业可根据不同品牌建立其品牌网站，以针对不同的消费群体。 3、产品形象网站：针对某一产品的网站，重点在于产品的体验，例如：汽车厂商每上市一款新车就建立一个新车形象网站；手机厂商推出新款手机形象网站；房地产发展商的新楼盘形象网站。 比如：MOTOROLA IBM 还有APPLE,当然这类网站还有他的
12、实用性！,3、交易类网站 这类网站是以实现交易为目的，以订单为中心。交易的对象可以是企业（B2B），也可以是消费者（B2C）。这类网站有三项基本内容：1、商品如何展示；2、订单如何生成；3、订单如何执行。 因此，该类网站一般需要有产品管理、订购管理、订单管理、产品推荐、支付管理、收费管理、送发货管理、会员管理等基本系统功能。功能复杂一点的可能还需要积分管理系统、VIP管理系统、CRM系统、MIS系统、ERP系统、商品销售分析系统等。交易类网站成功与否的关键在于业务模型的优劣。企业为配合自己的营销计划搭建的电子商务平台，也属于这类网站。交易类网站可细分为三类： 1、B TO C网站： 即(BUS
13、INESS TO CONSUMER),商家消费者。主要是购物网站，等同传统的百货商店，购物广场等。 2、B TO B： 即(BUSINESS TO BUSINESS),商家商家，主要是-商务网站，等同传统的原材料市场，如电子元件市场、建材市场等。 3、C TO C：即(CONSUMER TO CONSUMER),消费者消费者，主要是拍卖网站，等同传统的旧货市场，跳蚤市场，废品收购站，一元拍卖，销售废、旧用品。 比如：淘宝、易趣、拍拍,4、社区网站社区网站指的是就是大型的分了很多类的 有很多注册用户的网站,和BBS是差不多的 ！比如猫扑、天涯等，当然大的门户站都有自己的论坛那也是,5、办公及政府
14、机构网站1、企业办公事务类网站 这类网站主要包括企业办公事务管理系统、人力资源管理系统、办公成本管理系统和网站管理系统。2、政府办公类网站 这类网站利用外部政务网与内部局域办公网络而运行。其基本功能有：提供多数据源接口，实现业务系统的数据整合；统一用户管理，提供方便有效的访问权限和管理权限体系；可以灵活设立下位子网站；实现复杂的信息发布管理流程。 网站面向社会公众，既可提供办事指南、政策法规、动态信息等，也可提供网上行政业务申报、办理，相关数据查询等。目前很多单位的内联网网站还只算得上简单的资讯类网站，应该为其加上一个多级的权限控制功能，采用b/s结构构建OA系统，即Web OA系统，就会变成
15、这种办公类网站。比如：首都之窗、北京税务局网站,6、互动游戏网站这是近年来国内逐渐风靡起来的一种网站。这类网站的投入是根据所承载游戏的复杂程度来定，其展趋势是向超巨型方向发展，有的已经形成了独立的网络世界，让玩家乐不思蜀，欲罢不能忍。,7、有偿资讯类网站这类网站与资讯类网站有点相似，也是以提供资讯为主。所不同者在于其提供的资讯要求直接有偿回报。这类网站的业务模型一般要求访问者或按次，或按时间，或按量付费。例如付费的色情网站即为这类网站的典型代表。,8、功能性网站这是近年来兴起的一种新型网站，google即其典型代表。这类网站的主要特征是将一个具有广泛需求的功能扩展开来，开发一套强大的支撑体系，
16、将该功能的实现推向极致。看似简单的页面实现，却往往投入惊人，效益可观。比如：百度、Google,9、综合类网站这类网站的共同特点是提供两个以上典型的服务，例如新浪搜狐。这类网站可以把它看成一个网站服务的大卖场，不同的服务由不同的服务商去提供。其首页在设计时都尽可能把所能提供的服务都包含进来。,2.根据网站的性质分类：（1）企业网站；（2）政府网站；（3）专业网站；（4）个人网站；（5）教育科研机构网站（6）非盈利机构网站（7）其它类型等,网页设计的流程？,网页制作工具 Frontpage 易学易用，入门级软件。 Dreamweaver 专业网页设计师的首选工具。辅助美化软件 Photoshop
17、 应用广泛的图形图像软件。 CorelDRAW 应用广泛的矢量图形软件。 Fireworks网页三剑客之一，以处理网页图片为特长，并可以轻松制作GIF动画，它也是第一款专为Web制作设计的软件。 Flash网页三剑客之一，以处理网上动画为特长。,网页设计步骤,选择主题 网站形象设计 规划网站（栏目和结构） 组织素材 设计有效的版面布局 制作具体网页 分布网站消息,一、主题和名称主题要小而精 内容要新颖 题材是自己擅长或喜爱的内容 题材不要太滥，目标不要太高名称要正确 名称要有特色 名称要易记,二、网站的形象设计 对网站进行整体的形象包装和设计，通过视觉统一网站的外观。 所谓CIS(Corpor
18、ate Identity System )，是借用的广告界术语，意思是“企业的统一化系统 ”。 网站的LOGO 网站的标准色彩 网站的标准字体 网站的广告词,（1）设计网站的标志（logo）,logo是你网站特色和内涵的集中体现,标志可以是中文、英文字母，可以是符号、图案，还可以是动物或者人物等等。,标志的设计创意来自你网站的名称和内容,（2）设计网站的标准色彩,“标准色彩”是指能体现网站形象和延伸内涵的色彩。 例如：IBM的深蓝色，肯德基的红色条形，Windows 视窗标志上的红蓝黄绿色块，都使我们觉得很贴切， 很和谐。,标准色彩要用于网站的标志、标题、主菜单和主色 块，给人以整体统一的感觉
19、。一般来说，一个网站的 标准色彩不超过3种 ，太多则让人眼花缭乱,通常适于网页标准色的颜色有： 蓝色，黄/橙色， 黑/灰/白色三大系列色,（3）设计网站的标准字体,标准字体是指用于标志、标题、主菜单的特有字体。一般我们网页默认的字体是宋体。 为了体现网站的“与众不同”和特有风格，可以根据自己网站所表达的内涵，选择更贴切的字体。 需要说明的是：使用非默认字体只能用图片的形式，因为很可能浏览者的PC机里没有安装你的特别字体，那么你的辛苦设计制作便会付之东流。,设计网站的标准字体 宋体,（4）设计网站的宣传标语,网站的宣传标语也可以说是网站的精神、网站的目标，可用一句话甚至一个词来高度概括，它类似于
20、现实生活中的广告金句 。,三.网站的栏目版块及网站结构,你是否能将最好的、最吸引人的内容放在最突出的 位置以吸引更多的网友浏览网站？,在制定栏目的时候，要仔细考虑，合理安排,网站的栏目,网站和版块,网站的目录结构,其他,1网站的栏目,栏目的实质是一个网站的大纲索引，索引应该 将网站的主体明确显示出来,一般的网站栏目安排要注意以下几方面：,（1）记住一定要紧扣你的主题即将你的主题按一定的方法分类并将它们作为网站的主题栏目,（2）设立一个最近更新或网站指南栏目,（3）设立一个可以双向交流的栏目,（4）设立一个下载或常见问题回答栏目,2网站和版块,版块比栏目的概念要大一些，每个版块都有自己的栏目。
21、关于版块方面，主要是门户网站等较大ICP需要考虑的问题。设计时应注意： （1）各版块要有相对独立性。 （2）各版块要相互关联。 （3）版块的内容要围绕网站主题。,3网站的目录结构,网站的目录是指你建立网站时创建的目录。 目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于网站本身的上传维护、内容及未来的扩充和移植有着重要的影响。 组织好网站的结构会便于以后的管理和维护工作。,常用的方法在本地计算机上创建一个专门放置网站所有文件的文件夹，然后在该文件夹中制作和编辑Web页。当发布网站时，你就可以复制该文件夹到Web服务器上，以便让更多的人可以访问到你的网站。将你的网站内容以目录结构组织起来
22、以方便维护和导航，将相关的文件放置在同一个文件夹里。,需要注意的是：,（1）不要将所有文件都存放在根目录下。 所有文件都存放在根目录下，会造成文件管理混乱 从而影响工作效率，另外还会影响上传速度。,（2）按栏目内容建立子目录。 子目录首先按主菜单栏目建立。 对于次要栏目，需要经常更新的栏目可以建立独立的子目录。而不需要经常更新的栏目，可以合并放在一个统一目录下。 所有程序一般都存放在特定目录下。 所有需要下载的内容也最好放在一个目录下。,（3）在每个主目录下都建立独立的images目录 为每个主目录建立一个独立的images目录是最利于管理的。 根目录下的images目录放首页和一些次要栏目的
23、图片。 目录的层次不要太深，为了维护方便，建议不要超过3层。,（4）其他注意方面,不要使用中文目录名，使用中文目录名可能对网址的正确显示造成困难。 不要使用过长的目录名，太长的目录名不便于记忆。 尽量使用意义明确的目录名，你可以用Flash、Dhtml、Javascript来建立目录名，也可以用1，2，3来建立目录名，但是哪一个更明确，更便于记忆和管理呢?显然是前者。,四.网站草图与网页布局,：一般是在纸上绘制出网站的布局和大致外观，也可在特定的软件中（如Photoshop、Freehand和Fireworks）精确地绘制草图。当具体制作网站内容时，将一切参考网站草图进行。,：Dreamwea
24、ver 提供了重复使用页面布局的简便方法，即制作网站时使用模板。使用模板技术不但可以提高网页制作的效率，而且当我们决定修改整个网页布局时，仅需更改模板即可。,网站草图,网页布局,五.设计导航结构及链接结构,Web网站设计中，导航结构的设计一直是 网页设计者比较关心的问题。导航栏对整个网站内容有提纲的作用，同时，一些广告和网站更新通知也经常放置在导航栏中，导航栏往往需要随时改变。,1导航结构的设计,导航栏一定要清晰、醒目。通常导航栏要在“第一屏”能显示出来，横向放置的导航栏要优于纵向的导航栏。 下面这些方法会非常有用： （1）“当前位置”：在每一页的顶部提示当前所在页所处的位置，以便让浏览者知道
25、身在何处，并可轻松地返回到上一层页面。 （2）“搜索和索引”：在网站中添加搜索和索引功能，可以让浏览者快速查找到所需要的内容。 （3）“反馈信息”：提供电子邮件地址或电话等信息，以便让浏览者能联系到网站的网管人员。遇到任何问题都可以快速得到反映并解决。,2链接结构,网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录。 每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点链接，也可以和多个点链接。这些点并不是分布在一个平面上，而是存在于一个立体的空间中。 我们研究网站的链接结构的目的在于用最少的链接，使得浏览最有效率 。,链接结构的两种基
26、本方式,树状链接结构（一对一） 首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就像蒲公英。浏览时，一级级进入，一级级退出。 优点是条理清晰，访问者明确知道自己在什么位置，不会迷路。 缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。,星状链接结构（一对多） 每个页面相互之间都建立有链接。立体结构像东方明珠电视塔上的钢球。优点是浏览方便，随时可以到达自己喜欢的页面。缺点是链接太多，容易使浏览者迷路，搞不清自己在什么位置，看了多少内容。,六.收集网站所需资料,网站最忌讳多而杂，在搜集资料时不要追求内容多而全，而应追求精、专、新，包括图像、文本及多媒体（Fla
27、sh、Shockwave或其他），在某一领域中应做到全面、专业和深入。 在开始制作网站内容之前，你应该确认已经收集了所有需要的资料。否则，你将有可能为了找到一个图像来创建按钮而中断了制作过程。,七.创建高浏览器兼容的站点,现实状况： 1.访问者会使用不同的浏览器和不同的浏览器版本 2.站点使用的技术越前卫（如使用Flash动画、CSS、Layer定位），在不同的平台、不同的浏览器中出现问题的机会就越多 方法 1.设置一些限制因素是不错的选择 2.在设计最好效果与最大浏览器兼容性之间取得平衡。 3.为站点的重要Web页提供不同的版本,八.网站测试,由于网站刚开始不是满负荷运转，早期的测试并不能全面测试出网站的性能。一般情况下，网站测试需用六个月左右的时间，在这段时间里要统计网站访问量以及满负荷的运行速度、数据库的出错概率等，以便对网站及时做出调整。,THE END,
