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