周(前言、1快速入门).ppt

《周(前言、1快速入门).ppt》由会员分享，可在线阅读，更多相关《周(前言、1快速入门).ppt（36页珍藏版）》请在三一办公上搜索。

1、实践教学部,网页设计与制作,Dreamweaver 标准教程,内容要点：,Dreamweaver的课程定位网页设计理念 2.1 网页中的平衡、对比和连贯 2.2 网页中的色彩搭配 2.3 韩国商业网站分析,第 1 周 前言,1.Dreamweaver的课程定位,什么是网页？网页就是以html语言为基础编写的，能够通过网络传输，并被浏览器翻译成可以显示出来的包含文字、图片、声音、动画等媒体形式的页面文件。什么是网站？若干网页通过超级链接的形式组织在一起的一个逻辑上的整体，网页包含一网站中。一个网站中的网页数=1 根据网页能否在服务器端运行，把网页分为静态和动态两种。,静态网页：纯粹用html语言

2、编写的网页，不能在服务器端运行。其特点有：1、每个网页都有一个固定的url，且以htm、html、shtml、xml等常见形式为后缀。2、发布在服务器上的静态网页是保存在服务器上的文件，每个网页都是一个独立的文件。内容相对稳定，容易被搜索引擎检索。3、没有数据库支持，制作和维护需要的工作量较大。4、交互性相对较差。静态网页是网站建设的基础。动态网页：即采用动态网站技术动态生成的网页，能在服务器端运行，其特点有：1、以数据库为基础 2、可以实现的功能较多，如用户注册、登陆、在线调查、用户管理、订单管理、站内搜索、歌曲下载、软件下载、即时更新新闻、可以留言或书写评论等。3、不是独立存于服务器上的网

3、页文件，只有当用户请求服务器时才返回一个完整的网页。,Dream weaver 可以做什么？做静态网页。若要完成一个带有数据库的动态网站的制作，需要具备以下知识ASP.NetAccessDreamweaver,2.网页设计理念2.1网页中的平衡、对比和连贯,平衡 如果你的页面是平衡的，当用户浏览这个页面的时候就会感觉它们是一个整体，浏览时候目光的跳转也会很自然。对称平衡,非对称平衡,辐射平衡,实战平衡 通过一个LOGO设计实例观察平衡的多种变化 这是初稿判断其是否平衡的方法 用色块代替LOGO中的元素,对比 如果说平衡搭起了一个稳定的页面框架，那么对比就是这个框架中的动态点缀。动态的因素包括：

4、大小、颜色、字体、重心、形状、纹理等等 底版 字体、大小、颜色都一样，单调枯燥,通过变化字体的大小来形成对比将字体大小对比和颜色对比结合起来使用,连贯 对比会给页面带来活力，然而如果对比太多，页面就会显得零乱，因此在一个成功的页面设计中，有很多要素是必须保持一致的，这就是“连贯”。这些要素通常包括：布局 页面的上下、左右，页面与页面中间要保持布局一致字体 字体的大小、颜色应当基本保持一致导航栏 导航栏应当保持完全一样，通常应单独为导航栏建立一个框架页，这样就可以保证更新导航栏的时候，所有网页都会被自动更新。,显然，连贯和上面说的对比是彼此矛盾，因此在进行网页设计时必须把握好度 这是一个名片设计

5、字体风格相似、颜色不繁杂,2.2 网页中的色彩搭配,网页颜色原理和象征意义不同的颜色有着不同的含义，给人各种丰富的感觉和联想。红色：热情、奔放、喜悦、庄严黄色：高贵、富有、灿烂、活泼黑色：严肃、夜晚、沉着 灰色：庄重、沉稳白色：纯洁、简单、洁净 紫色：浪漫、富贵蓝色：天空、清爽、科技 棕色：大地、厚朴绿色：植物、生命、生机,设计用色举例大型NBA网站 此网站用灰黑色RGB（48，48，48）为背景色，文章标题用色为RGB（203，201，153），菜单使用的RGB为（112，119，112）这样的配色可以显示独特的个性，又不失大型网站的风采,娱乐类综合网站 此网站背景色为黑色RGB（0，0，0

6、）中嵌套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），辅

7、助色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），字体使用黑色

8、RGB（0，0，0）,综述：网页设计的颜色搭配需要在实践中不断的摸索和不断的创新，认真学习别人的先进方法和经验，可以快速地提高自己的制作水平,2.3 韩国商业网站分析,页面结构韩国网站的页面结构相对来说比较简单，有其统一的风格：顶部的左边是网站的logo，右边是导航栏。它很少采用下拉菜单的样式，而是把各级栏目的下级内容放在导航栏的下面。下面是个大大的flash条，再往下就是各个小栏目的主要内容，如图所示：,色彩运用圣诞主题的网站 颜色运用对比强烈，在我们看来红色和绿色搭配就是“红配绿，死牛肉”，但是合理搭配后使得网页很生动活波，红显得更红，极符合网站的主题。相反色系两色相配，即所谓红 配绿、蓝配黄、橙配紫，这种搭配如果处理得好，出来的效果会很抢眼,卡巴斯基官方主页,旅游休闲网站 该网站采用了灰色做为底色，然后用色彩明快的橙色、绿色、粉红色的色块来划分栏目，显得整洁清晰而不呆板。,女性网站运用渐变色很出色，看颜色就知道是个女性的时尚站点，几个栏目做成晶莹剔透的泡泡球放在顶部的大flash条里，非常醒目。整个站点显得异常优雅迷人。,常见的几种渐变色彩,手绘风格网站大量插入手绘插图体现了复古风,个性网站,立体感 许多韩国网站很有立体感，一个平面的网页为什么会有空间感呢？多用类似ps中的投影效果或者很小的渐变，只要用得到位效果立刻就能出来,自己动手设计,渐变、投影的巧妙结合,