周(前言、1快速入门)

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,*,实践教学部,网页设计与制作,Dreamweaver 标准教程,内容要点：,Dreamweaver,的课程定位,网页设计理念,2.1,网页中的平衡、对比和连贯,2.2,网页中的色彩搭配,2.3,韩国商业网站分析,第,1,周 前言,1,.,Dreamweaver的课程定位,什么是网页？,网页就是以html语言为基础编写的，能够通过网络传输，并被浏览器翻译成可以显示出来的包含文字、图片、声音、动画等媒体形式的页面文件。,什么是网站？,若干网页通过超级链接的形式组织在一起的一个逻辑上的整体，网页包含一网站中。,一个网站中的网页数=1,根据网页能否在服务器端运行，把网页分为静态和动态两种。,静态网页：,纯粹用html语言编写的网页，不能在服务器端运行。,其特点有：,1、每个网页都有一个固定的url，且以htm、html、shtml、xml等常见形式为后缀。,2、发布在服务器上的静态网页是保存在服务器上的文件，每个网页都是一个独立的文件。内容相对稳定，容易被搜索引擎检索。,3、没有数据库支持，制作和维护需要的工作量较大。,4、交互性相对较差。,静态网页是网站建设的基础。,动态网页：,即采用动态网站技术动态生成的网页，能在服务器端运行，其特点有：,1、以数据库为基础,2、可以实现的功能较多，如用户注册、登陆、在线调查、用户管理、订单管理、站内搜索、歌曲下载、软件下载、即时更新新闻、可以留言或书写评论等。,3、不是独立存于服务器上的网页文件，只有当用户请求服务器时才返回一个完整的网页。,Dream weaver,可以做什么？做静态网页。,若要完成一个带有数据库的动态网站的制作，需要具备以下知识,ASP.Net,Access,Dreamweaver,2,.,网页设计理念2.1网页中的平衡、对比和连贯,平衡,如果你的页面是平衡的，当用户浏览这个页面的时候就会感觉它们是一个整体，浏览时候目光的跳转也会很自然。,对称平衡,非对称平衡,辐射平衡,实战平衡,通过一个LOGO设计实例观察平衡的多种变化,这是初稿,判断其是否平衡的方法 用色块代替LOGO中的元素,对比,如果说平衡搭起了一个稳定的页面框架，那么对比就是这个框架中的动态点缀。动态的因素包括：大小、颜色、字体、重心、形状、纹理等等,底版 字体、大小、颜色都一样，单调枯燥,通过变化字体的大小来形成对比,将字体大小对比和颜色对比结合起来使用,连贯,对比会给页面带来活力，然而如果对比太多，页面就会显得零乱，因此在一个成功的页面设计中，有很多要素是必须保持一致的，这就是“连贯”。这些要素通常包括：,布局 页面的上下、左右，页面与页面中间要保持布局一致,字体 字体的大小、颜色应当基本保持一致,导航栏 导航栏应当保持完全一样，通常应单独为导航栏建立一个框架页，这样就可以保证更新导航栏的时候，所有网页都会被自动更新。,显然，连贯和上面说的对比是彼此矛盾，因此在进行网页设计时必须把握好度,这是一个名片设计,字体风格相似、颜色不繁杂,2,.,2,网页中的色彩搭配,网页颜色原理和象征意义,不同的颜色有着不同的含义，给人各种丰富的感觉和联想。,红色,：热情、奔放、喜悦、庄严,黄色,：高贵、富有、灿烂、活泼,黑色,：严肃、夜晚、沉着,灰色,：庄重、沉稳白色：纯洁、简单、洁净,紫色,：浪漫、富贵,蓝色,：天空、清爽、科技,棕色,：大地、厚朴,绿色,：植物、生命、生机,设计用色举例,大型,NBA,网站,此网站用灰黑色,RGB,（,48,，,48,，,48,）为背景色，文章标题用色为,RGB,（,203,，,201,，,153,），菜单使用的,RGB,为（,112,，,119,，,112,）,这样的配色可以显示独特的个性，又不失大型网站的风采,娱乐类综合网站,此网站背景色为黑色RGB（0，0，0）中嵌套RGB（0，0，82），字体白色RGB（255,255,255）,菜单RGB（77,114,159）,这样的虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息,微软公司网站,微软不仅软件做的好，连网页制作也是世界一流。从网页可以看出微软公司的风格、作风，以及雄厚的实力。,背景颜色使用蓝色RGB为（0，151，254），菜单为黑色RGB（0，0，11），菜单为灰色RGB（200，200，200），字体为黑色RGB（0，0，0）,个人网站,此网站相对简单，但是用色也别具匠心。虽然简单，但颜色搭配非常的科学合理,整体上使用的是白色RGB（255，255，255），辅助色RGB（79，88，95），菜单色RGB（48，64，64）和RGB（0，81，111）字体使用的是RGB（83，86，91）,公司网站1,网站采用黄色调为主，很体现公司的个性。中间再配以抽象的图片，显得个性十足但又不单调,主色调为黄色RGB（255，199，48/#FFC730），辅助色调为RGB（49，102，46）字体为棕色RGB（153，103，0）,公司网站2,橘红色如果运用得当的话是一种非常使用于网页上的颜色。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。,主色调为RGB（255，151，0）辅助色调为RGB（255，103，4），菜单RGB（252，200，0），字体使用黑色RGB（0，0，0）,综述,：网页设计的颜色搭配需要在实践中不断的摸索和不断的创新，认真学习别人的先进方法和经验，可以快速地提高自己的制作水平,2,.,3,韩国商业网站分析,页面结构,韩国网站的页面结构相对来说比较简单，有其统一的风格：顶部的左边是网站的logo，右边是导航栏。它很少采用下拉菜单的样式，而是把各级栏目的下级内容放在导航栏的下面。下面是个大大的flash条，再往下就是各个小栏目的主要内容，如图所示：,色彩运用,圣诞主题的网站,颜色运用对比强烈，在我们看来红色和绿色搭配就是“红配绿，死牛肉”，但是合理搭配后使得网页很生动活波，红显得更红，极符合网站的主题。,相反色系两色相配，即所谓红 配绿、蓝配黄、橙配紫，这种搭配如果处理得好，出来的效果会很抢眼,卡巴斯基官方主页,旅游休闲网站,该网站采用了灰色做为底色，然后用色彩明快的橙色、绿色、粉红色的色块来划分栏目，显得整洁清晰而不呆板。,女性网站,运用渐变色很出色，看颜色就知道是个女性的时尚站点，几个栏目做成晶莹剔透的泡泡球放在顶部的大flash条里，非常醒目。整个站点显得异常优雅迷人。,常见的几种渐变色彩,手绘风格网站,大量插入手绘插图体现了复古风,个性网站,立体感,许多韩国网站很有立体感，一个平面的网页为什么会有空间感呢？,多用类似ps中的投影效果或者很小的渐变，只要用得到位效果立刻就能出来,自己动手设计,渐变、投影的巧妙结合,