[精选]精品课程建设流程说明会.pptx

精品课程建设流程说明会,主讲人：杨一,1,网站建设与维护兴趣组培训,一、网页和网站的关系,2,二、网站制作的流程,三、如何发布网站,1、什么是网页,2、网页的定义,3、网页的构成,4、网页的分类,5、网站制作的相关工具,一、网页和网站的关系,一、网页和网站的关系,一、网页和网站的关系,1、确定网站的主题,2、确定网站的配色方案,3、整理网站素材和内容,4、制定网站栏目和布局,5、策划网站并制作网页及调试,二、网站制作的流程,2.1 确定网站的主题,确定网站的主题,一般来说是确定网站的类型，如个人网站、新闻网站、游戏网站、房产网站、教育网站等，不同的网站，其确定的主题都有一定的归属，网页制作者设计网页创建网站时，都应该根据网站的类型来制作主题是目标、内容是根本，一个成功的网站在内容方面必须紧扣在主题的范围之内，才能不脱离网页设计和制作的技术轨道所以，确定网站的主题是制作网页、创建网站的第一步，也是网站制作的关键 确定网站的主题可以从以下几方面来定位： （1）主题定位要准确 （2）主题要小而精 （3）题材最好是自己擅长或者喜爱的内容 （4）题材不要太滥或者目标太高,2.2 确定网站的配色方案,色彩搭配既是一项技术性工作，同时也是一项艺术性很强的工作，因此，设计者在设计网页时除了考虑网站本身的特点外，还要遵循一定的艺术规律，从而设计出色彩鲜明、风格独特的网站。

以下是一些色彩搭配的方法和技巧： 2.2.1网页色彩搭配的原理 2.2.2网页色彩搭配的技巧 2.2.3网页色彩如何分配,2.2.1 网页色彩的搭配原理,色彩选用，是展现网站的风格的重要手段之一要学习色彩的选用，首先要了解黑白灰色彩的应用，因为黑白灰是万能色，可以跟任意一种色彩搭配当使用者为某种色彩的搭配苦恼的时候，不防试试用黑白灰或者当使用者觉得两种色彩的搭配不协调时，试试加入黑色或者灰色，或许会收到意想不到的效果 对一些明度较高的网站配以黑色，可以适当地降低其明度 白色是网站用的最普通的一种颜色很多网站甚至留出大块的白色空间，作为网站的一个组成部分 这就是留白艺术很多设计类网站会较多的运用此种方式留白，给人一个遐想的空间，让人觉得心情舒畅恰当的留白对于协调页面的均衡起到相当大的作用对于色彩搭配要注意以下几点： 色彩鲜明：网页的色彩要鲜明，容易引人注目 色彩独特：要有与众不同的色彩，或是点睛之笔，使得大家对网页的印象强烈 色彩合适：色彩和想表达的内容气氛相适合、协调 色彩联想：不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，庄重，红色想到喜事等，选择色彩要和网页的内涵相关联 总之一切色彩调和, 都离不开色轮，色轮 是搭配色彩的基本工具。

2.2.1 网页色彩的搭配原理,色 环,色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色，就可以得到一个色彩环色环通常包括12种不同的颜色十二色相环每一色相间距为30度 原色：也叫三原色即红、黄、蓝三种基本颜色自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的除白色外，把三原色相互混合，可以调和出其他种颜色根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果 间色：又叫二次色它是由三原色调配出来的颜色，是由2种原色调配出来的红与黄调配出橙色；黄与蓝调配出绿色；红与蓝调配出紫色，橙、绿、紫三种颜色又叫间色在调配时，由于原色在份量多少上有所不同，所以能产生丰富的间色变化 复色：也叫“复合色”复色是由原色与间色相调而成的“三次色”，复色是纯度最低，含灰色成份复色包括了除原色和间色以外的所有颜色 将一种原色和一种二次色组合， 可得到一种三次色 红+橙朱红 橙+黄琥珀 黄+绿黄绿 绿+蓝碧绿 蓝+紫靛青 紫+红紫红,2.2.1 网页色彩的搭配原理, 补色：是广义上的对比色在色环上划直径，正好相对（即距离最远）的两种色彩互为补色。

如：红色是绿色的补色；橙色是蓝色的补色；黄色是紫色的补色补色的运用可以造成最强烈的对比 邻近色：是在色环上任一颜色同其毗邻之色邻近色也是类似色关系，只是范围缩小了一点例如红色和黄色，绿色和蓝色，互为邻近色 同类色：比邻近色更加接近的颜色，它主要指在同一色相中不同的颜色变化例如，红颜色中有紫红、深红、玫瑰红、大红、朱红、桔红等等种类，黄颜色中又有深黄、土黄、中黄、桔黄、淡黄、柠檬黄等等区别它起到色彩调和统一，又有微妙变化的作用 暖色：指的是红、橙、黄、这类颜色暖色系的饱和度越高，其温暖特性越明显可以刺激人的兴奋性，使体温有所升高 冷色：指的是绿、青、蓝、紫等颜色，冷色系亮度越高，其特性越明显能够使人的心情平静，清爽，恬雅,2.2.1 网页色彩的搭配原理, 间色：,间色是由三原色中的两原色调配而成的，因此在视觉刺激的强度相对三原色来说缓和不少属于较易搭配之色间色尽管是二次色，但仍有很强的视觉冲击力，容易带来轻松、明快、愉悦的气氛2.2.1 网页色彩的搭配原理, 复色：,复色是由两种间色或原色与间色混合而成，因此色相倾向较微妙、不明显，视觉刺激度缓和，如果搭配不当，页面便呈现易脏或易灰朦朦的效果，沉闷、压抑之感，属于不好搭配之色。

但有时复色加深色搭配能很好的表达神秘感、纵深感空间感；明度高的多复色（参看明度的网页例图）多用来表示宁静柔和、细腻的情感，易于长时间的浏览2.2.1 网页色彩的搭配原理, 补色：,补色最能传达强烈、个性的情感纯度稍低的绿色为背景的大面积使用，对比并突出了前景纯度明度较高的、面积较小的红色图形，形成了视觉中心重点突出，达到主次分明的主题效果红绿、橙蓝、黄紫这三组补色中，前两种使用得最频繁这三组补色搭配出的最终效果和目的，可以用两个字来概括强烈！,2.2.1 网页色彩的搭配原理, 邻近色：,由于是相邻色系，视觉反差不大，统一、调和，形成协调的视觉韵律美，相较显得安定、稳重的同时不失活力，是一种恰到好处的配色类型 同类色：,第一眼看上去给人温柔、雅致、安宁的心理感受，便可知该组同类色系非常调和统一只运用同类色系配色，是十分谨慎稳妥的做法，但是有时会有单调感添加少许相邻或对比色系，可以体现出页面的活跃感和强度2.2.1 网页色彩的搭配原理,2.2.1 网页色彩的搭配原理, 暖色：,高明度高纯度的色彩搭配，把页面表达得鲜艳炫目，有非常强烈刺激的视觉表现力充分体现了暖色系的饱和度越高，其温暖特性越明显的性格。

2.2.1 网页色彩的搭配原理, 冷色：,冷色系的亮度越高，其特性越明显单纯冷色系搭配视觉感比暖色系舒适，不易造成视觉疲劳蓝色、绿色是冷色系的主要系，是设计中较常用的颜色，也是大自然之色，带来一股清新、祥和安宁的空气2.2.2 网页色彩的搭配技巧,首先，一个网站如果只使用一种颜色，会让人感觉单调、乏味；但是如果将所有的颜色都运用到网站中，也会适得其反，让人感觉轻浮、花哨一个网站必须有一种或者两种主题色，所以确定网站的主题色是设计者必须考虑的问题之一 在网页设计上，一个页面尽量不要超过4种颜色，用太多的颜色会让人觉得没有侧重当主题色确定以后，考虑其他配色时，一定要考虑其他配色与主题色的关系，要体现什么样的效果另外要考虑哪种因素占主要的地位，是明度、纯度还是色相 以下是几种快速找到网页色彩搭配的最佳方案： 使用同一色系 这里是指选定一种色彩，然后调整透明度或者饱和度，产生新的色彩，用于网页的不同位置，这样的页面看起来色彩统一，又有层次感 巧用对比色 先选定一种色彩，然后选择它的对比色，并调整一下饱和度找一款和谐的对比色，使整个页面色彩丰富但不花哨 使用相近色 简单的说就是用一个感觉的色彩，例如淡蓝、淡黄、淡绿；或者土黄、土灰、土蓝。

用黑、白或灰搭配一种色彩 黑、白或灰色基本可以和任何一种色彩相搭配，不会让人觉得突兀，让人感觉比较和谐有时候又可以配出很“跳”的感觉，如黑色背景配红色的文字 在网页中，有以下忌讳：网页中的色彩要控制在四种以内；背景和前文的对比尽量要大，绝对不要用花纹繁复的图案作背景2.2.2 网页色彩的搭配技巧,同一色系,色环上45度以内的2个颜色就是同类色 取任何一种颜色加黑加白或加灰，而形成 的色彩，所构成的一系列色系称为同色系 它们色相的性质相同但色度有深浅之分 （同色系在配色上是一种稳定，温和的组 合，其特点是主调柔和含蓄、有亲和力、 有层次感2.2.2 网页色彩的搭配技巧,巧用对比色,在色相环中处于120度到150度之间的任何 两个原色，它们对比强烈，对比色在运用中 给人以活泼、明快的感觉能使色彩达到最鲜 明的程度，并产生强烈的刺激感2.2.2 网页色彩的搭配技巧,使用相近色,色环上90度以内的2个颜色就是相近色 通常色与色之间是你中有我，我中有你 虽然在色相上差别很大，但在视觉上却比较 接近，色与色之间可以很好的相互融合，展现 和谐的效果 黑、白或灰搭配一种色彩,2.2.2 网页色彩的搭配技巧,黑色：深沉，庄重，具有神秘之感， 灰色：高雅，简朴，使人有现实感， 白色：明快，无瑕，表纯洁之感,2.2.3 网页色彩如何分配,背景和文字 LOGO和BANNER 导航、小标题 链接颜色的设置 (如果是企业网站，而且该企业又有自己的视觉识别系统， 一般会要求用本企业的VI系统颜色来定义网站的主、辅色调。

),2.3 整理网站的素材和内容,网站内容的电子文档 网站所需的图片 网站栏目的大体规划 企业的LOGO（企业标志） (如果是企业网站，上述材料客户都会事先准备好，交给相关业务人员，再由业务员转交给网站设计师),2.4 制定网站栏目和布局,根据网站要求确定网站栏目( 一般情况下业务人员会提前和客户制定好) 常用的几种网页布局形式 上下布局结构 左右布局结构 左中右布局结构 半包围布局结构,网站拓扑图,2.4 制定网站栏目和布局,上下布局结构,2.4 制定网站栏目和布局,左右布局结构,2.4 制定网站栏目和布局,左中右布局结构,2.4 制定网站栏目和布局,半包围布局结构,2.5 策划网站并制作网页及调试,确定主题决定网页风格 网页布局制作的技巧 向布局完成的表格中添加内容 网页的制作过程中的调试,草图,实际效果,3.1、申请域名、空间,3.2、上传网站内容,3.3、输入网址，浏览网站内容,三、如何发布网站,3.1 申请域名、空间,如果网页制作完了，就去互联网域名空间服务商的网站上申请你自己的域名和空间，当然这是要付费的如果是个人网站的话，也可以申请免费的空间和免费的二级域名 申请完后空间服务商会给你一个IP地址，就是你自己的服务器IP，还有你自己为该网站申请的用户名和密码。

收费空间：中国万网 新网 数据中国 等 免费空间：3v.cm 等,3.2 上传网站内容,3.3 输入网址浏览网站,输入网址，浏览我们发布的网站幻灯片结束！ 谢谢大家！,。