01网页设计概要.pptVIP

模块一 网页制作概要 项目一 了解网页制作基础知识 步骤1 了解网页的定义 网页是WWW中的基本文档，它是用HTML或者其他语言编写的。 步骤2 了解网页的分类 1、根据网页的执行过程分：静态网页，动态网页，含数据库的动态网页 2、根据网页的功能和内容分：门户网站，个人网站，专业网站，职能网站 步骤3 我们网站的定位 1、服务对象 2、设置目的 3、开发目标 4、应用领域 5、规格描述 6、实现要求 任务1 了解网页的定义和分类 任务2 了解网页的相关术语 1．WWW 2．WWW服务器 3．WWW浏览器 4．网页 5．网站（站点？） 6．主页 7．超文本 8、URL 项目一 了解网页制作基础知识 9、域名 10、Logo 11、Banner 12、导航条 13、超链接 14、HTML 15、脚本 16、发布 1．Logo 2．导航条 3．文本元素 4．图像 5．表格 6．表单 7．超链接 8．多媒体元素 项目一 了解网页制作基础知识 任务3 了解页面元素 任务4 了解页面各区域的构成 （1）页眉区包括：网站标志（Logo）、横幅广告（Banner条）、顶部标签（英文导航条）等 （2）导航区：除了页眉区有起导航作用的顶部标签外，在页眉和主内容之间有上导航栏（主导航条），主内容区左侧有左导航栏，形成复合导航区 （3）主内容区：是页面设计的主体元素所占区域。一般是二级页面内容链接的标题、内容提要、部分摘录，有图像、文字、小动画等多种网页元素。 （4）友情链接区：主要分为三类，包括校内站点、校外站点、常用站点。 （5）页脚区：标注站点所属单位的名称、地址、网站版权、电子邮箱的超链接等 项目一 了解网页制作基础知识 1．常见网页布局形式 （1）“厂”字型 （2）“口”字型 （3） 对称布局 （4）“同”(或“国”)字型 （5）POP布局 （6）“三”字型 任务4 了解页面布局 项目一 了解网页制作基础知识 2．页面布局原则 整个网站页面的布局应该相对保持一致，不应该有大的跳跃感。做到：主次分明，突出重点；导航清晰，浏览便利；布局合理，逻辑性强。 一个页面，尤其主页，左右不宜拖动，最好计算为刚好一屏的宽度，上下可以拖动，但不易过长，三到四屏即可，否则用户会忽略后面的内容。 页面布局类型对同一网站不宜过多 借鉴成功相似网站的页面布局 项目一 了解网页制作基础知识 3．页面布局技术 CSS+DIV 表格 框架 网页设计与制作实用教程（第3版） * 项目一 了解网页制作基础知识 1．配色原则 （1） 整个网站的色系要保持一致。 （2）网站应该使用企业原有CI（CI，也称CIS，是英文Corporate Identity System的缩写，目前一般译为“企业视觉形象识别系统”。）颜色，需要简洁、新颖、舒服、大方，充分体现企业的文化形象。 （3）尽量使用浏览器支持的216个Web 安全颜色。 （4）遵循三色原则：除了黑色和白色以外，主要颜色不要超过3种。 （5）网页元素应该选择与网站主体相一致的色调。 （6）图像的颜色应该尽可能少，减小图片尺寸。 计算机工程学院　计算机基础教研室 项目一 了解网页制作基础知识 任务5 了解网站的颜色搭配 2．配色方案 配色方案即是色彩搭配，可根据网站的设计目标、主题、使用人群设计不同的配色方案，配色方案的选择往往是决定网站成败的一个关键因素。网页设计师通常通过不同颜色来呈现网站风格定位，表达情感和意图。 任务5 了解网站的颜色搭配 项目一 了解网页制作基础知识 常见颜色的含义如下： (1)红色：是非常容易吸引人注意力的颜色，能够给人以温暖热情的感觉。 (2)黄色：象征希望、权力和功名，还带有神秘的宗教色彩。有时候，黄色还能给人明亮、充满甜蜜和幸福感的感觉，很多设计师通常在作品中运用黄色来表现喜庆和华丽的感觉。 (3)蓝色：给人以冷漠，性格朴实而内向的感觉，可以为活跃、具有较强扩张力的色彩提供深远、平静的空间。 (4)绿色：是最平和、安稳、柔顺、恬静、优美的色彩，代表希望。 (5)紫色：是低明度的颜色，还可给人沉闷和神秘的感觉。 (6)白色：色感光明，代表实、纯洁、快乐，还可给人圣洁的不容侵犯的感觉。 网页色彩是把握网页制作的一个重点和难点，可以使用一些专门的网页配色软件来帮助创建网页配色方案，如Adobe Kuler，ColorImpact等。 项目一 了解网页制作基础知识 可口可乐公司的网站采用了代表着热情和活力的红色色调。让人看过后很难忘记。 深圳慧衡科技公司的网站采用灰蓝色做为标准色彩，呈现的是企业的稳健、深远、平静和谐。配有一些橙色使稳健增添了活力。 项目一 了解网页制作基础知识 配色实例： 任务6：了解网站的字体原则 （1）正文英文字体：