课程平台制作流程

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,标题文本样式：微软雅黑/28号 Arial/28pt,第一级内容文本样式：微软雅黑/20号 Arial/20pt,第二级内容文本样式：微软雅黑/18号 Arial/18pt,第三级内容文本样式：微软雅黑/16号 Arial/16pt,第四级内容文本样式：微软雅黑/14号 Arial/14pt,第五级内容文本样式：微软雅黑/12号 Arial/12pt,标题文本样式：微软雅黑/28号 Arial/28pt,第一级内容文本样式：微软雅黑/20号 Arial/20pt,第二级内容文本样式：微软雅黑/18号 Arial/18pt,第三级内容文本样式：微软雅黑/16号 Arial/16pt,第四级内容文本样式：微软雅黑/14号 Arial/14pt,第五级内容文本样式：微软雅黑/12号 Arial/12pt,精品课程建设流程说明会,1,1,网站建设与维护兴趣组培训,一、,网页和网站的关系,2,二、,网站制作的流程,三、,如何发布网站,2,1,、,什么是网页,2,、,网页的定义,3,、,网页的构成,4,、,网页的分类,5,、,网站制作的相关工具,目录,3,一、网页和网站的关系,3,什么是网页？,网页,(web page),，是网站中的一页，通常是,HTML,格式（文件扩展名为,.html,或,.htm,或,.asp,或,.aspx,或,.php,或,.jsp,等）。,网页的定义,网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，您的网站就是由网页组成的。如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。,网页的构成,文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为：文字，就是网页的内容。图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、视频、程序等等。,文字资料图像档案,Applet,（在页面内执行的副程式）超链结网页的合成体为网站。,目录,4,一、网页和网站的关系,4,网站的分类？,编程语言分类：,asp,网站、,php,网站、,jsp,网站、,Asp. net,网站等；,用途分类：,门户网站（综合网站）、行业网站、娱乐网站等；,功能分类：,单一网站（企业网站）、多功能网站（网络商城）等。,持有者分类,：个人网站、商业网站、政府网站、教育网站等。,商业目的分类：,营利型网站（行业网站、论坛）、非营利性型网站（企业网站、政府网站、教育网站）,目录,5,制作,网站的相关工具？,Dreamweaver,：,用与编辑,HTML,、,ASP,、,JSP,、,PHP,、,javascript,时的辅助工具。,FLASH,：,网页需要画面流动时的首选择。,Photoshop,：,图象处理软件，一般网页都需要有图片相搭配，,Adobe Photoshop,是款很强大的工具。,Aspmao,：,用于快速调试,ASP,网站程序的应用工具。,Flashfxp,：,发布网站的主要工具之一。,一、网页和网站的关系,5,1,、,确定网站的主题,2,、,确定网站的配色方案,3,、,整理网站素材和内容,4,、,制定网站栏目和布局,5,、,策划网站并制作网页及调试,目录,6,二、网站制作的流程,6,目录,6,2.1,确定网站的主题,确定网站的主题,一般来说是确定网站的类型，如个人网站、新闻网站、游戏网站、房产网站、教育网站等，不同的网站，其确定的主题都有一定的归属，网页制作者设计网页创建网站时，都应该根据网站的类型来制作。主题是目标、内容是根本，一个成功的网站在内容方面必须紧扣在主题的范围之内，才能不脱离网页设计和制作的技术轨道。所以，确定网站的主题是制作网页、创建网站的第一步，也是网站制作的关键。,确定网站的主题可以从以下几方面来定位：,（,1,）主题定位要准确,（,2,）主题要小而精,（,3,）题材最好是自己擅长或者喜爱的内容,（,4,）题材不要太滥或者目标太高,7,目录,6,2.2,确定网站的配色方案,色彩搭配既是一项技术性工作，同时也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、风格独特的网站。以下是一些色彩搭配的方法和技巧：,2.2.1,网页色彩搭配的原理,2.2.2,网页色彩搭配的技巧,2.2.3,网页色彩如何分配,8,目录,6,2.2.1,网页色彩的搭配原理,色彩选用，是展现网站的风格的重要手段之一。要学习色彩的选用，首先要了解黑白灰色彩的应用，因为黑白灰是万能色，可以跟任意一种色彩搭配。当使用者为某种色彩的搭配苦恼的时候，不防试试用黑白灰。或者当使用者觉得两种色彩的搭配不协调时，试试加入黑色或者灰色，或许会收到意想不到的效果。,对一些明度较高的网站配以黑色，可以适当地降低其明度。,白色是网站用的最普通的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成部分。 这就是留白艺术。很多设计类网站会较多的运用此种方式。留白，给人一个遐想的空间，让人觉得心情舒畅。恰当的留白对于协调页面的均衡起到相当大的作用。对于色彩搭配要,注意以下几点,：,色彩鲜明：,网页的色彩要鲜明，容易引人注目。,色彩独特：,要有与众不同的色彩，或是点睛之笔，使得大家对网页的印象强烈。,色彩合适：,色彩和想表达的内容气氛相适合、协调。,色彩联想：,不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，庄重，红色想到喜事等，选择色彩要和网页的内涵相关联。,总之一切,色彩调和,都离不开,色轮，,色轮,是搭配色彩的基本工具。,9,目录,6,2.2.1,网页色彩的搭配原理,色 环,色环,是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色，就可以得到一个色彩环。色环通常包括,12,种不同的颜色。十二色相环每一色相间距为,30,度,。, 原色：,也叫,三原色,。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。除白色外，把三原色相互混合，可以调和出其他种颜色。根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果。,间色,：,又叫,二次色,。它是由三原色调配出来的颜色，是由,2,种原色调配出来的。红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫,间色,。在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化。,复色,：,也叫,“,复合色,”,。复色是由原色与间色相调而成的,“,三次色,”,，复色是纯度最低，含灰色成份。复色包括了除原色和间色以外的所有颜色。,将一种原色和一种二次色组合， 可得到一种三次色,红,+,橙朱红 橙,+,黄琥珀 黄,+,绿黄绿,绿,+,蓝碧绿 蓝,+,紫靛青 紫,+,红紫红,10,目录,6,2.2.1,网页色彩的搭配原理,补色,：,是广义上的对比色。在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。如：红色是绿色的补色；橙色是蓝色的补色；黄色是紫色的补色。补色的运用可以造成最强烈的对比。,邻近色,：,是在色环上任一颜色同其毗邻之色。邻近色也是类似色关系，只是范围缩小了一点。例如红色和黄色，绿色和蓝色，互为邻近色。,同类色,：,比邻近色更加接近的颜色，它主要指在同一色相中不同的颜色变化。例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别。它起到色彩调和统一，又有微妙变化的作用。,暖色,：,指的是红、橙、黄、这类颜色。暖色系的饱和度越高，其温暖特性越明显。可以刺激人的兴奋性，使体温有所升高。,冷色,：,指的是绿、青、蓝、紫等颜色，冷色系亮度越高，其特性越明显。能够使人的心情平静，清爽，恬雅,11,目录,6,2.2.1,网页色彩的搭配原理, 间色：,间色是由三原色中的两原色调配而成的，因此在视觉刺激的强度相对三原色来说缓和不少。属于较易搭配之色。间色尽管是二次色，但仍有很强的视觉冲击力，容易带来轻松、明快、愉悦的气氛。,12,目录,6,2.2.1,网页色彩的搭配原理, 复色：,复色是由两种间色或原色与间色混合而成，因此色相倾向较微妙、不明显，视觉刺激度缓和，如果搭配不当，页面便呈现易脏或易灰朦朦的效果，沉闷、压抑之感，属于不好搭配之色。但有时复色加深色搭配能很好的表达神秘感、纵深感空间感；明度高的多复色（参看明度的网页例图）多用来表示宁静柔和、细腻的情感，易于长时间的浏览。,13,目录,6,2.2.1,网页色彩的搭配原理, 补色：,补色最能传达强烈、个性的情感。纯度稍低的绿色为背景的大面积使用，对比并突出了前景纯度明度较高的、面积较小的红色图形，形成了视觉中心重点突出，达到主次分明的主题效果。红绿、橙蓝、黄紫这三组补色中，前两种使用得最频繁。这三组补色搭配出的最终效果和目的，可以用两个字来概括,强烈！,14,目录,6,2.2.1,网页色彩的搭配原理, 邻近色：,由于是相邻色系，视觉反差不大，统一、调和，形成协调的视觉韵律美，相较显得安定、稳重的同时不失活力，是一种恰到好处的配色类型。,15,目录,6, 同类色：,第一眼看上去给人温柔、雅致、安宁的心理感受，便可知该组同类色系非常调和统一。只运用同类色系配色，是十分谨慎稳妥的做法，但是有时会有单调感。添加少许相邻或对比色系，可以体现出页面的活跃感和强度。,2.2.1,网页色彩的搭配原理,16,目录,6,2.2.1,网页色彩的搭配原理, 暖色：,高明度高纯度的色彩搭配，把页面表达得鲜艳炫目，有非常强烈刺激的视觉表现力。充分体现了暖色系的饱和度越高，其温暖特性越明显的性格。,17,目录,6,2.2.1,网页色彩的搭配原理, 冷色：,冷色系的亮度越高，其特性越明显。单纯冷色系搭配视觉感比暖色系舒适，不易造成视觉疲劳。蓝色、绿色是冷色系的主要系，是设计中较常用的颜色，也是大自然之色，带来一股清新、祥和安宁的空气。,18,目录,6,2.2.2,网页色彩的搭配技巧,首先，一个网站如果只使用一种颜色，会让人感觉单调、乏味；但是如果将所有的颜色都运用到网站中，也会适得其反，让人感觉轻浮、花哨。一个网站必须有一种或者两种主题色，所以确定网站的主题色是设计者必须考虑的问题之一。,在网页设计上，一个页面尽量不要超过,4,种颜色，用太多的颜色会让人觉得没有侧重。当主题色确定以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果。另外要考虑哪种因素占主要的地位，是明度、纯度还是色相。,以下是几种快速找到网页色彩搭配的最佳方案：,使用同一色系,这里是指选定一种色彩，然后调整透明度或者饱和度，产生新的色彩，用于网页的不同位置，这样的页面看起来色彩统一，又有层次感。,巧用对比色,先选定一种色彩，然后选择它的对比色，并调整一下饱和度找一款和谐的对比色，使整个页面色彩丰富但不花哨。,使用相近色,简单的说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。,用黑、白或灰搭配一种色彩,黑、白或灰色基本可以和任何一种色彩相搭配，不会让人觉得突兀，让人感觉比较和谐。有时候又可以配出很“跳”的感觉，如黑色背景配红色的文字。,在网页中，有以下忌讳：网页中的色彩要控制在四种以内；背景和前文的对比尽量要大，绝对不要用花纹繁复的图案作背景。,19,目录,6,2.2.2,网页色彩的搭配技巧,同一色系,色环上,45,度以内的,2,个颜色就是,同类色,取任何一种颜色加黑加白或加灰，而形成,的色彩，所构成的一系列色系称为,同色系,。,它们色相的性质相同。但色度有深浅之分。,（,同色系,在配色上是一种稳定，温和的组,合，其,特点,是主调柔和含蓄、有亲和力、,有层次感。,20,目录,6,2.2.2,网页色彩的搭配技巧,巧用对比色,在色相环中处于,120,度到,150,度之间的任何,两个原色，它们对比强烈，对比色在运用中,给人以活泼、明快的感觉。能使色彩达到最鲜,明的程度，并产生强烈的刺激感。,21,目录,6,2.2.2,网页色彩的搭配技巧,使用相近色,色环上,90,度以内的,2,个颜色就是,相近色,通常色与色之间是你中有我，我中有你。,虽然在色相上差别很大，但在视觉上却比较,接近，色与色之间可以很好的相互融合，展现,和谐的效果 。,22,目录,6,黑、白或灰搭配一种色彩,2.2.2,网页色彩的搭配技巧,黑色：深沉，庄重，具有神秘之感，,灰色：高雅，简朴，使人有现实感，,白色：明快，无瑕，表纯洁之感,23,目录,6,2.2.3,网页色彩如何分配,背景和文字,LOGO,和,BANNER,导航、小标题,链接颜色的设置,(,如果是企业网站，而且该企业又有自己的视觉识别系统，,一般会要求用本企业的,VI,系统颜色来定义网站的主、辅色调。,),24,目录,6,2.3,整理网站的素材和内容,网站内容的电子文档,网站所需的图片,网站栏目的大体规划,企业的,LOGO,（企业标志）,(,如果是企业网站，上述材料客户都会事先准备好，交给相关业务人员，再由业务员转交给网站设计师。,),25,目录,6,2.4,制定网站栏目和布局,根据网站要求确定网站栏目,(,一般情况下业务人员会提前和客户制定好,),常用的几种网页布局形式,上下布局结构,左右布局结构,左中右布局结构,半包围布局结构,网站拓扑图,26,目录,6,2.4,制定网站栏目和布局,上下布局结构,27,目录,6,2.4,制定网站栏目和布局,左右布局结构,28,目录,6,2.4,制定网站栏目和布局,左中右布局结构,29,目录,6,2.4,制定网站栏目和布局,半包围布局结构,30,目录,6,2.5,策划网站并制作网页及调试,确定主题决定网页风格,网页布局制作的技巧,向布局完成的表格中添加内容,网页的制作过程中的调试,草图,实际效果,31,3.1,、,申请域名、空间,3.2,、,上传网站内容,3.3,、,输入网址，浏览网站内容,目录,6,三、如何发布网站,32,目录,6,3.1,申请域名、空间,如果网页制作完了，就去互联网域名空间服务商的网站上申请你自己的域名和空间，当然这是要付费的。如果是个人网站的话，也可以申请免费的空间和免费的二级域名。,申请完后空间服务商会给你一个,IP,地址，就是你自己的服务器,IP,，还有你自己为该网站申请的用户名和密码。,收费空间：,中国万网,新网,数据中国,等,免费空间：,3v.cm,等,33,目录,6,3.2,上传网站内容,需要,Ftp,软件，这里我们用,flashfxp,工具，这是一款功能强大的,FXP/FTP,软件，集成了其它优秀的,FTP,软件的优点，支持目录（和子目录）的文件传输，删除；支持上传，下载，以及文件续传；可以跳过指定的文件类型，只传送需要的本件；可自定义不同文件类型的显示颜色；暂存远程目录列表，有避免闲置断线功能，防止被,FTP,平台踢出；可显示或隐藏具有“隐藏”属性的文档和目录；支持每个平台使用被动模式等。,打开,ftp,软件，把空间的连接地址，用户名，密码输入进去。,连接，连上以后左侧是空间，右侧是本地电脑，把本地电脑的文件选中，上传到左侧空间上。,(,有的空间没有默认目录，有的默认目录是,www,或是其他的，具体情况遵循空间提供商的说明,),34,目录,6,3.3,输入网址浏览网站,输入网址，浏览我们发布的网站。,35,幻灯片结束！,谢谢大家！,36,