网站设计教程第1章网站设计基础ppt课件

.,网站设计教程,第一章网站建设基础,.,中文类网页,网页欣赏,.,该网页具有中国古风，古色古香，韵味淡雅，古典的边框，文雅的颜色构成了如此的页面风格，此多见在复古的站点中,.,该网页动感十足，主要得益于网页结构和文字特效。此类页面设计通常是天马星空，随意发挥，当然也是创意所在了，所用于个人站点。,.,该网页结构严谨，庄重大气，有板有眼，方方正正，这也是中国常见的网站，内敛而不张扬。多见在机构、单位类网站。,.,该网页页面清爽，客户一目了然，结构简介大气，具有国际化风格，其颜色也多半与产品类型相关，多见于公司企业类网站。,.,欧美类网页,网页欣赏,.,在网页中运用具有动感的弧形图形，金属质感的图标，以及其他商业化，科技化的图片使得整个网页风格的科技感跃然而出。,.,网页使用前卫，时尚的图片，在以相关颜色陪衬，页面想不时尚都难了。,.,欧美网页的颜色方面，科技色多，色调偏冷，页面结构硬朗，没有花哨的边角。,.,日韩类网页,网页欣赏,.,日韩风格网页，喜欢使用渐变颜色，并使用高分辨率的图片作为亮点。,.,页面色彩搭配调和，使用多种色彩但不觉花哨，色彩丰富，饱和而恰到好处。,.,.,.,重点内容：网页的基础网站的基础网站建设的关键技术,第一章网站建设基础,.,一、网页是什么？平常我们所说的“新浪”、“搜狐”、“网易”等，即是俗称的网站。而当我们访问这些站点的时候，最直接访问的就是“网页”了，许许多多个网页构成了网站。网页是一种网络信息传递的载体，英文名称为WebPage。这种媒介的性质和我们日常的“报纸”、“广播”、“电视”等传统媒体是可以相提并论的。在网络上传递的信息，比如文字、图片等等都是存在网页中的，浏览者只需要网页，就可以了解到相关信息。网页其实就是一个文件，可以称它为网页文件，其正如一个音乐文件，需要通过播放器收听一样，而网页的显示也需要浏览器支持。目前的主流浏览器有IE，Firefox，Opera，Maxthon等。,1.1网页的基础,.,二、看看网页的源代码？网页的代码就是由HTML标签和除标签外的内容组成的整合体。,1.1网页的基础,.,三、网页是由什么组成的？文本和图像：是构成网页的最基本主要元素，网页可以只由文本或只由图像构成；如果为文本设置了文本的颜色、大小、字体和样式再与图像相结合，制作出来的网页就更精彩。超级链接：简称链接，通过鼠标单击可以直接转向目标链接，包括文本链接和图像链接。动画：在网页中使用动画元素可以使网页更生动，常见的网页动画包括两种：一种是GIF动画，另一种是Flash动画。视频和音频：都是通过在网页中插入音、视频插件来实现的，最流行的音、视频格式是avi和Rm，两种格式都使用了压缩算法和流媒体进行传送。表单：互动特性是互联网的最大特点，表单是实现互动特性的最常见元素，应用表单可以收集浏览者信息并与其进行交互。,1.1网页的基础,.,四、网页的类型有哪些？第一种是动感十足的多媒体类型，这一般要采用Flash技术，也就是说，一个网页就是一个Flash，所有的设计都在Flash中完成。第二种是采用文字、图片、动画等各类网页元素进行有机整合，从而形成的普通网页，更多的时候我们采用这种方式。,1.1网页的基础,.,我们从刚才的网页欣赏我们看到，不同的文化背景，有着不同的文化差异和不同的审美观点；要做出迎合所有浏览者口味的网页，是不现实也不可能的。但在设计制作网页之前，必须自己心中有数。那么，我们如何设计和布局一个网页呢？,1.1网页的基础,.,1.1网页的基础,五、几个网页设计中出现的名词1.网页主题是网页所要表现的最主要的思想内涵，是网页的灵魂。如果网页没有一个确定的主题，会给人一种不知所云的感觉。常见的主题包括新闻(新华网)、教育(清华大学)、科技(中科院)、娱乐(环球娱乐网)、体育(搜狐体育)、旅游(携程旅行网)、文学(榕树下)、财经(财经网)和计算机技术(CSDN)等，几乎涉及了社会生活的方方面面。,.,1.1网页的基础,五、几个网页设计中出现的名词2.网页命名和标志(LOGO)网页名称是网页主题最凝练的概括，一个好的网页名称会给浏览者留下深刻的印象。网站标志是站点特色和内涵的集中体现。一般放在网站的首页上，和商标类似可以是中文文字、英文字母、符号、图案等。,.,1.1网页的基础,五、几个网页设计中出现的名词3.网页中的表格如果在网页中使用表格不合理，则会减慢网页的下载速度。因此在网页中使用表格，应该遵循以下几点要求。整个页面不要都套在一个表格中，尽量拆分成多个表格。单一表格的结构尽量整齐。表格嵌套层次要尽量少。4.网页的文字默认标准字体是中文宋体和英文TimesNewRoman字体。在设计网页时，还可以自由使用Windows操作系统自带的所有英文字体和中文字体。如果想用特殊的字体来体现某种风格，可以用图像来代替。,.,六、如何设计网页的色彩？1.认识网页色彩色彩是人的视觉最敏感的东西。网页的色彩处理得好，可以道道事半功倍的效果。色彩总的应用原则是“总体协调，局部对比”，也就是网页的整体色彩效果是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。,1.1网页的基础,.,1.1网页的基础,2.网页色彩搭配技巧色彩搭配是一项艺术性很强的工作，因此在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律。一个页面尽量不要超过4种色彩，用过多的色彩让人没有方向，没有侧重点。（1）非彩色的搭配：黑白是最基本和最简单的搭配。（2）色彩搭配：在搭配色彩时，要注意不同的色彩、不同的色彩饱和度和透明度都会给浏览者不同的感觉。例如绿色可以使人产生优雅、舒适的气氛，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽宁、阴森。下面我们分别欣赏一下红色、黑色、蓝色、绿色、白色、紫色、黄色、灰色色彩为主的网站。,.,.,.,.,.,.,.,.,.,1.1网页的基础,七、网页的布局设计网页的版面布局主要网站主页的版面布局，其他网页应该与主页风格一致。为了达到最佳的视觉效果，应考虑布局的合理性，使浏览者有一个流畅的视觉体验。常见的布局形式有“国”字型、“厂”字型、“同”字型“框架”字型和“封面”字型等。,.,1.“国”字型,标题,广告,右内容,左内容,基本信息,.,优点：页面结构清晰、主次分明，是初学者最容易上手的布局；缺点：规矩呆板，色彩搭配不当和容易让人厌烦。,2.“厂”字型,标志+广告,菜单,.,3.“同”字型,主导航,二级导航,登录区,搜索区,主内容区,.,整个页面分为3列，最大限度的提出主页的索引功能。,4.“川”字型,.,左右框架型,5.“框架”型,.,网页上有几个简单的链接或者仅有一个“进入”的链接。,6.“封面”型,.,一个网页所表达的信息比较有限，所以往往需要很多网页，来进行多角度、有重点的介绍某方面的内容。这许多的网页，无形间构成了网站。因此，网站是网页的有机整体。关于这“有机整合”，则表明了网站中各网页之间的错综复杂的关系。那么，如何来设计和建设一个网站呢？,.,1.2网站的基础,一、网站的选题定位一般来说，每个网站都是介绍特定某方面的内容，所以这些站点就具有专业性，比如，“百度”是搜索引擎站点，“阿里巴巴是”电子商务站点等，当然除了这些专业性站点外，还有像“新浪”、“搜狐”、“网易”之类的门户站点，它们大而全，综合性比较高。这就像现实生活中的专卖店和百货商店一样。网站的目标定位可以从以下3方面考虑。题材和内容：题材就是主题，要求主题小内容精。网站域名：申请一个好记且具有一定含义的域名。网站名称：取一个响亮而且容易记忆的网名可有利于网站推广。,.,1.2网站的基础,二、网站的策划与设计过程1.网站的风格建立在有价值的内容之上。明确希望站点留给浏览者的印象。着手建立和加强站点印象。2.网站的CI形象【CI是英文corporateidentity的缩写),意思是通过视觉来统一企业的形象。现实生活中的CI策划比比皆是，例如：可口可乐公司，全球统一的标志，色彩和产品包装，给我们的印象极为深刻。更多的例子如SONY,三菱，麦当劳等等。】设计网站的标志。设计网站的标准色彩。设计网站的标准字体。设计网站的宣传标语。,.,1.2网站的基础,二、网站的策划与设计过程3.网站的栏目和版块紧扣网站的主题。设计一个最近更新或网站指南栏目。设定一个可以双向交流的栏目。4.网站的目录结构不要将所有的文件都存放在根目录下。按栏目内容建立子目录。在每个主目录下都建立独立的Images目录。目录的层次不要太深。,.,1.2网站的基础,二、网站的策划与设计过程5.网站信息的收集和准备收集及处理文字:为了可以丰富网站的内容，除了收集可以表现主题的文字内容外，有些内容还需要网站设计或制作者自己润色。收集及处理图像:使用图像可以充实网页，让网页更添生机。超级链接:是网站的主线，应设置正确的连接目标。动画：为了使网页可以更富有活力，动画是网页必不可少的元素。视频和音频:如果要在网页中加入视频文件或是音频文件，一定要选择适合自己网站的视频或音频。表单:是网站设计者与浏览者之间进行交流的窗口，在制作时也应一并想好要与浏览者进行什么样的交流，交流时需要浏览者填写什么样的信息等。,.,三、网站实体建立过程1.定义站点及配制服务器开发网站的首要工作就是要定义该站点，即明确建立网站的目的，确定网站提供的内容，以及网站资料的搜集。明确建立网站的目的之后，需与参与网站设计的各个单位与成员一起构思、讨论，最后取得共识。确定网站的内容以后，应该进行资料的搜集工作，主要搜集文字、图像、动画，以及背景音乐等。在设计企业网站时，一般都是由企业提供大部分的文字和图像资料。然后对资料进行整理和筛选，选出网站所需要的资料。,1.2网站的基础,.,三、网站实体建立过程2.搭建网站首页的好坏，可以直接影响浏览者的情绪。首页的制作也需要先绘制一张草图，草图应包括网站的标志、广告条、菜单栏和友情链接等一些基本的部件。其他页面的设计和制作不如首页复杂，但设计与制作的方法和首页设计一样，需要注意以下几点。(1)要和首页保持相同的风格。(2)要有返回首页的超级链接。(3)目录结构最好不要超过3层。,1.2网站的基础,.,三、网站实体建立过程3.测试与调试兼容性测试：Dreamweaver虽然考虑到网页在不同版本、不同类型的网页浏览器中的兼容性，但是也有一些元素必须是更新版本的浏览器才能得以支持。超级链接测试：在Dreamweaver中可以选择“文件”|“检查页”|“检查链接”命令检查超级链接的正确性，以保证没有孤立的链接。实地测试：把网页上传到Internet服务器，测试超级链接及下载速度等问题。,1.2网站的基础,.,三、网站实体建立过程4.发布和维护当一个网站制作完成，并且验证与调试正确后，即可将该网站发布到Internet服务器上，也就是我们通常所说的上传网站。在服务器上发布网站以后，还需要对网站做定期维护，以吸引更多的浏览者，例如网站内容的更新和版面的扩展等。,1.2网站的基础,.,（1）申请域名域名是联系企业和互联网网址的纽带，它像品牌、商标一样具有重要的识别作用，是企业在网络上存在的标志，担负这标示站点和形象展示的重要作用。选取域名两个基本原则：域名应该简单易记，便于输入。这是判断域名好坏的重要因素。域名要有一定的内涵和意义。如企业的名称，产品名称等。,1.2网站的基础,.,（2）申请空间申请空间遵循以下原则：大型企业：建立机房、申请专线、建立网站、自行管理、成本较高。中小企业：（1）虚拟主机：将网站放到ISP的Web服务器上，特别适合数据量不大的网站。（2）主机托管：如果企业的Web有较大的信息和数据量，需要很大空间时，可以将制作好的服务器主机放到ISP的网络中心的机房中，然后通过ISP的网络接入Internet。,1.2网站的基础,.,1.2网站的基础,四、网站的一些思考1.网站的主题：其中关于“做个什么样的网站，以及主要介绍的内容是什么”这点，其实就是网站的主题定位，一般推荐如下：自己擅长的或喜欢的内容。比如，擅长黑客技术建立一个黑客站点，擅长听歌建立一个音乐站点。主题定位小而精悍。不要既做这又做那的网站，主题要明确，及时多个主题也要据有互补性。不盲目不滥造：宁缺毋滥，目前的网站太多了，“泛滥成灾”形容毫不过分，要切合实际有需要有目的地建立站点。,.,1.2网站的基础,四、网站的一些思考2.网站的内容：网站的主题决定了网站的内容，也决定了网站的访问对象。有广度的内容表示了站点的内容丰富，同时保持站点的经常更新，能吸引不少的回访者；有深度的站点表示了专业性，很能吸引忠实浏览者，甚至为网站出谋划策，为站点做些友好的宣传。所以，站点要有人气，就必须注重网站内容的深度和广度。,.,1.2网站的基础,四、网站的一些思考3.网站的名称：一个网站的人气也需要大家的宣传，其中在宣传时，大都会使用到网站的名称和域名。所以，为网站起一个好名字，以及配一个易记的域名是十分重要的。在未来到网站之前，只能“以声夺人”。比如：为歌星“刘若英”站点命名就已她的一首歌“很爱很爱你刘若英”，同时域名采用汉语拼音来定，这样的名称和域名对星迷来说太容易记了。,.,在了解了网站的策划与设计的过程之后，我们即将着手开发一个属于自己的网站。那么，在动态网站开发领域，有那些常用软件和技术呢？,.,1.3网站建设的关键技术,一、网页制作软件Dreamweaver8是优秀网页制作工具，它将可视布局工具、应用程序开发功能和代码编辑支持结合在一起，功能强大，使得各个层次的开发人员和设计人员都能够快速的创建界面吸引人的、基于标准的网站和应用程序。,.,1.3网站建设的关键技术,网页图像设计软件Photoshop、Fireworks等都是图像处理软件。在网页制作过程中，首先要用它来设计网页的整体效果图、处理网页中的图像、背景图处理、网页图标和按钮的设计等。,.,1.3网站建设的关键技术,动画制作软件一个优秀的网站是离不开Flash动画的，无论是Banner、按钮、网站宣传动画，还是整个网站的首页等，都需要动画制作软件Flash，美观的动画能为网页增色不少，从而吸引更多的浏览者。,.,二网页标记语言HTMLHTML(HyperTextMarkupLanguage超文本标记语言)是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立与各种操作系统平台。所谓超文本，因为它可以加入图片、声音、动画和影视。HTML的任何标记都由“”围起来，如.在起始标记的标记名前加上符号“/”便是其终止标记，如，夹在起始标记和终止标记之间的内容受标记的控制，如一路顺风。HTML的基本结构：头部信息文档主体，正文部分,1.3网站建设的关键技术,.,动手创建第一个网页动态网页程序设计这是我设计的第一个网页，太太太简单了！,1.3网站建设的关键技术,.,三网页脚本语言JavaScript和VBScript脚本语言介于HTML和C，Java等编程语言之间。脚本是使用一种特定的描述性语言，根据一定的格式编写的可执行文件，又称宏文件。各种脚本目前被广泛地应用于网页设计中，因为脚本不仅可以减少网页的规模和提高网页的浏览速度，还可以丰富网页的表现，如动画、声音。脚本同VB、C语言的区别：语法简单，容易掌握；与应用程序密切相关；一般不具备通用性，处理问题有限；多为解释执行；,1.3网站建设的关键技术,.,四动态网页技术动态网页是与静态