网页设计_计算机科学

1

编委会

主　任：袁恩培副主任：张　雄　唐湘晖(https://www.daowen.com) 成　员：杨仁敏　胡　虹　　　　曾　敏　王　越

阅读

3

教学进程安排

(https://www.daowen.com)

阅读

4

课程概况

网页设计是艺术设计（视觉传达设计）专业的主干课程之一，也是一门重要的应用技术类实践课程。网页设计课程设置满足市场对设计领域高级技术型人才的需求，培养适合从事网页

阅读

5

教学目的

本课程主要结合Photoshop和Dreamweaver等网页设计工具，全面介绍网页设计的视觉表现手段。通过对HTML网页制作代码工具、Web基本工作机制学习，

阅读

6

序

PREFACE 人工智能、万物联网时代的来临，对传统行业的触动与重组方兴未艾。各学科高度融合，各领域细致分工，改变着人们固有的思维模式和工作方式。设计，是社会走

阅读

7

前言

FOREWORD 网页设计是一门综合了网页界面设计、用户体验、程序设计等各方面知识技能的综合实践性课程。目前，网页设计课程主要有两种形式：一种是以计算机专业为主

阅读

8

第一单元　“一览了然”——网页设计基础

课时：14课时单元知识点：本单元首先介绍了关于互联网的常识和常用术语；然后分类讲授了在网页设计时要注意的尺寸规范、色彩规范、版式设计等方面的知识；最后对当

阅读

9

第一课　网页设计规范

课时：8课时要点：系统地讲述网页设计的基本要素，主要从网页设计的尺寸规范、色彩规范、版式编排等方面进行具体讲解，要求学生在实际操作过程中严格按照规范进行设计。

阅读

10

1.网页的尺寸

一般情况下，在进行网站设计之前需要预先设定好网页显示的大致比例。十多年前，网页最适合的宽度是960px，因为960px在原来常见型号1024×768的显示器分辨

阅读

11

2.网页的色彩

网页上显示的颜色是以HTML文本格式标识的，可以用英文单词或者十六进制颜色代码的表示方法（如“#000000”表示为黑色）获取，也可以在一些网页设计软件中直接选

阅读

12

（1）单色网页

单色网页是指网站通过调整某一种颜色的饱和度和透明度等方法来增加网页色彩的变化，也被称为同类色网页。例如，一个以蓝色为基调的网站，在做色彩方案预定时就可以用同一色

阅读

13

（2）类似色网页

顾名思义，类似色是指网页中的组合颜色相似或者拥有共同的感情倾向和冷暖调颜色。例如，红—红橙—橙、黄—黄绿—绿、青—青紫—紫等，均为类似色。由类似的色彩构成的网站

阅读

14

（3）对比色网页

这是最广泛的网页色彩搭配类型，很多初学设计的人会以为色彩对比主要是红绿、橙蓝、黄紫色的色相对比，实际上色彩对比范畴不仅仅局限于这些。虽然这里的对比色不是严格意义

阅读

15

3.网页的文字

图1-13(https://www.daowen.com) 网页设计最重要的诀窍就在于便于阅读。这就意味着，网页内容与背景色之间要和谐共处，既不能闹独立，也不能

阅读

16

4.网页的导航条

其实，有关网页的导航条设计问题在网上或者许多教材中都谈得很多，多聚焦于如何设计精彩的、经典的导航条。笔者在学习网页设计之初也对这个问题非常着迷，总认为导航条就是

阅读

17

5.网页的“统一”设计

网站设计越来越受到人们的关注，一个精彩的网站要么精致夺目，要么高端大气，要么可爱甜美，要么艺术气质十足……无论哪种风格的网站，同一个网站里面所有的网页都应当风格

阅读

18

第二课　网页设计趋势

课时：3课时要点：扩展学生的眼界，对现阶段网页设计大致的趋势和风格进行归纳、总结。引导学生对最前沿的网页设计发展方向进行探索和思考，培养敏锐的设计嗅觉，提高学

阅读

19

1.网页布局设计

目前常见的网页布局设计（Web Layout）方式有以下几种。(https://www.daowen.com)

阅读

20

（1）静态布局（StaticLayout）

静态布局又称为传统Web设计，在页面设计之初，设计者都是按照预先设定的计算机尺寸来设置的。在遇到显示终端屏幕大小不同时，能通过横向或纵向的滚动条拖动实现完整浏览

阅读

21

（2）自适应布局（AdaptiveLayout）

自适应布局是一种分别为不同分辨率的屏幕设置的布局。其特点是我们看到的页面在不同的屏幕下显示出来的元素位置是不同的，它们会自动适应屏幕显示比例，但元素大小保持不变

阅读

22

（3）响应式布局（ResponsiveLayout）

响应式布局是指页面元素可以随着不同尺寸和分辨率的显示器自动适配。响应式网页布局所具备的良好的适应性和可塑性是如今大量新设备作为显示终端的必然发展趋势，这种设计趋

阅读

23

2.视差滚动设计

视差滚动设计（Parallax Scrolling Design）是指让网站上的页面用多层背景以不同的速度移动，从而形成一种视觉上的3D空间运动效果，引导用户完

阅读

24

3.无限滚动加载

无限滚动加载（Infinite Rolling Load）又被形象地称为瀑布流分页模式。这种无限图片滚动加载的效果靠插件jQuery实现，整个网页内容再多也无须

阅读

25

4.全屏大图设计

随着网速的不断提升，网站里面的全屏大图设计（Design of Full Screen）越来越普遍，大图的视觉冲击比零散的小元素组合在吸引用户的效果上占有绝对优

阅读

26

5.扁平化模式

扁平化模式（Flattening Mode）并不是把立体效果压扁，而是在设计时反其道而行之，丢弃复杂的装饰性的设计，削弱厚重的图片阴影效果，使用细微的纹理、纯色

阅读

27

6.三维动态效果

三维动态效果（3D Dynamic Effect）在视觉上对网页设计提出了更高的要求。随着以介绍产品为主题的网站的爆炸式增长，在产品介绍时通过三维技术进行效果演

阅读

28

第三课　网站类型

课时：3课时要点：列举当下网络站点的几大类型，分别对其特点和功能进行阐述，并要求学生在将来的设计中能合理应用。(https://www.daowen.com)

阅读

29

1.门户网站

门户网站是访问量非常大的公众平台网站，每天点击量在上亿条。这类网站信息量非常大，包含实时新闻和查询内容，且分类明确，如经济、军事、民生、健康、文化等各个方面的内

阅读

30

2.交易类网站

交易类网站是利用网络这种便捷的媒介展示商品，以此达成购买意愿的一类网站，其中也包括发布各类信息以实现成交意愿的行业网站，如B2B、B2C、C2C等。国内知名的交

阅读

《网页设计》简介

目录

编委会