网页设计综合应用技术_教学课件_苏智 张新华 模块一

在线教务辅导网： 教材其余课件及动画素材请查阅在线教务辅导网 QQ:349134187 或者直接输入下面地址： 模块一 网站规划设计 网页设计综合应用技术 学习目标 了解网站的有关基本概念 了解规划与建设一个小型网站的基本步骤和基本 的技术实现方法 了解网页设计所需的美学原理 掌握网页色彩设计的一般原则 掌握版式设计的基础知识 学习内容 工作任务一 网站整体规划 工作任务二 网页的艺术设计 工作任务一 网站整体规划 建设网站前的市场分析 建设网站目的及功能定位 网站技术解决方案 网站内容及实现方式 网页设计 申请域名和网站备案 申请域名和网站备案 网站测试 网站发布与推广 网站维护 网站建设日程表 费用明细 建设网站前的市场分析 对于中小型企业网站的建设， 可以事先掌握企业自身条件、公司概况，收集整理、 更新如公司徽标等公司VI系统资料，公司简介、形象图片、 联系电话和地址等公司介绍性资料；主营业务或产品的相 关文字描述及图片、包装样品等公司业务资料等。 还要了解相关行业的市场情况及特点、分析市场主要 竞争者及其网络情况，了解其展示的内容、针对的访问对 象等，进一步明确企业在产品方面的突出优点、客户服务 等的竞争优势和目标市场，更加清楚自身的优点和不足， 从而做到扬长避短。 网站技术解决方案 随着互联网技术的飞速发展，目前中小型企业网站的类型 有很多种。可以根据企业的产品、销售渠道和销售对象、 企业内部网（Intranet)的建设等情况，明确网站是产品宣 传型、网上营销型、客户服务型、电子商务型还是综合型 。 对于个人网站的建设，不可能像综合网站那样做得内容大 而全，包罗万象。所以个人网站的建设目标不要太高，题 材勿滥，必须要找准一个自己最感兴趣的内容，选择的题 材应结合本身的特点和优势，定位要小，内容要精，做深 、做透，办出自己的特色。常见的个人网站有信息文章、 网络教程、博客日记、下载、个人宣传介绍等形式，没有 其他类型网站的诸多限制和要求，可以充分展示个性空间 。 建设网站目的及功能定位 前台技术是用于显示层的技术，或者是面向浏览者的技术 ，主要进行web前端架构及静态页面制作。其中静态网页 不包含任何服务器端脚本，代码都是在放置到Web服务器 前由网页设计人员编写的，文件扩展名是.htm或.html。 从技术角度讲，网站的内容可以模糊地分为通过前台 技术和后台技术来呈现。 建设网站目的及功能定位 HTML：HTML（Hyper Text Markup Language 超文本标记语言）是利用标记(tag)来 描述网页的字体、大小、颜色及页面布局的语言，使用任何的文本剪辑器都可以对它 进行编辑。 ECMAScript：ECMAScript技术由ECMA（European Computer Manufactures Association Internation 欧洲计算机制造商协会）制定的标准化脚本语言，它往往被称 为JavaScript或JScript，但实际上后两者是ECMA-262标准的扩展。 JavaScript：JavaScript是一种脚本语言，通过潜入或整合在标准HTML中实现，也就 是说JavaScript的程序是直接加入在HTML文档里，当浏览器读取到HTML文件中的 JavaScript程序，就立即解释并执行有关的操作，无须编译器。利用JavaScript技术可 以制作动态按钮、滚动字幕等网页特效。 XHTML：XHTML（Extensible Hyper Text Markup Language 可扩展的超文本标记语 言） 是由HTML语言发展起来的一种标记语言。XHTML实际上是HTML 4的后续版本 ，在W3C网页标准化体系中，XHTML属于网页的结构技术。 CSS：CSS（Cascading Style Sheets 层叠样式表）是一种数据表文件，在该数据表 中存储了网页结构语言的各种样式，以及显示方式等内容，并通过表的ID、标签以及 类等选择器供XHTML调用。利用CSS技术，可以有效地对页面的布局、字体、颜色、 背景和其他效果实现更加精密的控制。要对相应的代码做一些简单的修改，就可以改 变统一页面的不同部分，或者页数不同的网页的外观和格式。在W3C网页标准化体系 中，CSS属于网页的表现技术。 切片技术：切片技术是应用于网页图形处理的一种技术，可将整张图片切割为几张小 图片，并输出一个网页，图片会作为网页表格或层中的内容。切片技术的出现，提高 了平面设计转换为网页设计的效率。目前，可以使用切片技术的图像处理软件有 Photoshop、Fireworks、Illustrator、Coreldraw。 目前应用于前台的技术主要包括以下几种。 建设网站目的及功能定位 ASP：ASP是Active Server Page（动态服务器页面）的缩写，是Microsoft开发的动态 网页技术标准，它类似于HTML、Script与CGI的结合体，但是其运行效率却比CGI更 高、程序编制也比HTML更方便、灵活，程序安全及保密性也比Script好。 PHP：PHP（Personal Homc Page）是一种跨平台服务器解释执行的脚本语言，与 ASP类似，它也是基于服务器端用于产生动态网页而且可嵌入HTML中的脚本程序语 言。ASP虽然功能强大，但是只能在微软的服务器软件平台上运行，而大量使用UNIX LinUx的用户要制作动态网站则首选PHP技术。PHP用C语言编写，可运行于Unix Linux和Windows9xNT2000下。 JSP：JSP是Java Server Pages技术的缩写，是由Java语言的创造者Sun公司提出、 多家公司参与制订的动态网页技术标准。它通过在传统的HTML网页“.htm”、 “.html”中 加入Java代码和JSP标记，最后生成后缀名为“.jsp”的JSP网页文件。 ASP.Net：ASP.Net是建立在微软新一代.Net平台架构上，利用普通语言运行时（ Common Language Runtime）在服务器后端为用户提供建立强大的企业级Web应用 服务的编程框架。ASP.Net拥有更好的语言支持，一整套新的控件，基于 XML 的组件 ，以及更好的用户身份验证。ASP.Net代码不完全向后兼容ASP。目前ASP.Net的开发 语言有C#、Visual Basic.Net等。 目前交互式动态网页实现技术主要有ASP、PHP、JSP、ASP.Net等。 网站内容及实现方式 1、根据网站的目的确定网站的结构导航。 2、根据网站的目的及内容确定网站整合功能。 3、确定网站的结构导航中的每个频道的子栏目。 4、确定网站内容的实现方式。 网站内容及实现方式 不要将所有文件都存放在根目录下，会造成文件管理混乱。 按栏目内容建立子目录。 在每个主栏目目录下都建立独立的images目录。 目录的层次不要太深，一般在3层以内。 不要使用中文目录。 不要使用过长的目录名。 尽量使用意义明确的目录名。 网页设计 编辑工具，这其中的优秀者当然是Dreamweaver了， 还有图片编辑工具，如Photoshop、Fireworks； 动画制作工具，如Flash、Cool 3d、Gif Animator等； 还有网页特效工具，如有声有色等， 这些软件可以根据需要灵活运用。 申请域名和网站备案 域名可分为不同级别，包括顶级域名、二级域名等。顶级域名又分为两类： 一是国家顶级域名，目前200多个国家都按照ISO3166国家代码分配了顶级 域名，例如中国是cn，美国是us，日本是jp等；二是国际顶级域名，例如表 示工商企业的 .Com，表示网络提供商的.net，表示非盈利组织的.org等。二 级域名是指顶级域名之下的域名。 我国在国际互联网络信息中心（Inter NIC） 正式注册并运行的顶级域名 是CN。在顶级域名之下，我国的二级域名又分为类别域名和行政区域名 两类。类别域名共6个， 包括用于科研机构的ac；用于工商金融企业的 com；用于教育机构的edu；用于政府部门的 gov；用于互联网络信息中 心和运行中心的net；用于非盈利组织的org。而行政区域名有34个，分别 对应于我国各省、自治区和直辖市。 网站备案号通常会放在页面的页脚区。 网站测试 1、文字、图片是否有错误。 2、程序及数据库测试。 3、链接是否有错误。 4、服务器稳定性、安全性。 5、程序及数据库测试。 6、网页兼容性测试，如浏览器、显示器。 7、根据需要的其他测试。 网站发布与推广 搜索引擎上注册、 与别的网站交换链接、 加入广告链、 被大型信息平台收录等。 网站维护 网站建设日程表 1.费用明细 工作任务二 网页的艺术设计 网页版式设计的艺术原则 网页版式的基本类型： 骨骼型、 满版型、 分割型、 中轴型、 曲线型、 倾斜型、 对称型、 焦点型、 三角型 自由型十种 网页版式的基本类型 骨骼型 满版型 网页版式的基本类型 分割型 网页版式的基本类型 中轴型 网页版式的基本类型 曲线型 网页版式的基本类型 倾斜型 网页版式的基本类型 对称型 网页版式的基本类型 焦点型 网页版式的基本类型 工作任务二 网页的艺术设计 网页版式设计的艺术原则 网页版式的设计原则： 1. 反差原则、 2. 重复原则、 3. 排列原则 4. 分类原则 反差原则-图片反差 网页版式的设计原则 反差原则-颜色反差 网页版式的设计原则 反差原则-字体反差 网页版式的设计原则 重复原则 网页版式的设计原则 排列原则 网页版式的设计原则 分类原则 网页版式的设计原则 工作任务二 网页的艺术设计 网页版式设计的艺术原则 网页页面的尺寸，使网页一定要在不同分辨率下都能正常的显示 IE浏览器版本 屏幕 宽 度 屏幕 高 度 IE 7.0（菜单 栏显示状 态） 1003p x 569p x IE 7.0（菜单 栏隐藏状 态） 1003p x 620p x IE 8.0（菜单 栏显示状 态） 1003p x 626p x IE 8.0（菜单 栏隐藏状 态） 1003p x 598p x 色彩基础 色彩可分为非彩色和彩色两大类， 非彩色指白色、黑色和各种深浅不同的灰色， 彩色是指黑白系列以外的各种颜色， 彩色有三种特性，即色相、饱和度、明度 网页色彩的运用 色相：是颜色的基本特征，反映颜色的基本面貌 ，用于区别颜色的种类。比如说紫色、绿色、黄 色等等都代表了不同的色相。 饱和度：也叫纯度，指颜色的鲜浊程度。鲜艳的 色彩其饱和度一般都比较高，这样的颜色比较刺 眼，所以饱和度高的色彩一般都不会用在网页的 背景上。 明度：色彩的明暗程度，也称“亮度”。明度对饱 和度会产生影响。明度降低，饱和度也随之降低 ，反之亦然。 如白色明度高，黑色明度低；黄色 是明度最高的色彩，紫色是明度最低的色彩。 网页色彩的运用 一般来说，一个网站的标准色彩不超过3种。标准色彩要 用于网站的标志、标题、主菜单和主色块，给人以整体统 一的感觉。适合于网页标准色的颜色有：蓝色、黄/橙色 、黑/灰/白色三大系列色。通常有以下几种固定搭配。 蓝白橙蓝为主调。白底，蓝标题栏，橙色按钮或图标 做点缀。 绿白兰绿为主调。白底，绿标题栏，兰色或橙色按钮 或图标做点缀。 橙白红橙为主调。白底，橙标题栏，暗红或桔红色按 钮或图标做点缀。 暗红黑暗红主调。黑或灰底，暗红标题栏，文字内容 背景为浅灰色。 网页色彩的运用 在实践中可以用以下几种方法搭配网页色彩。 （1）用一种色彩。这里是指先选定一种色彩，然 后调整透明度或者饱和度，这样的页面看起来色 彩统一，有层次感。 （2）用两种色彩。先选定一种色彩，然后选择它 的对比色。 （3）用一个色系。例如淡蓝，淡黄，淡绿；或者 土黄，土灰，土蓝。 （4）用一种彩色和消色相搭配，黑、白、灰、金 、银是消色，可以放心的与各种色彩进行搭配。 网页色彩的运用 在网页配色中，还要切记一些误区： 不要将所有颜色都用到，尽量控制在三至五种色 彩以内。要有一种主色贯穿其中，主色可能不是 面积最大的颜色，而是最重要，最能揭示和反映 主题的颜色。 背景和前文的对比尽量要大（绝对不要用花纹繁 复的图案作背景），以便突出主要文字内容。 网页色彩的运用 网站的文字 在每一个网站中，如导航、标题、内文、广告等很多部分都不能缺少 文字，它既是信息传递的载体，又是页面艺术设计的重要元素 中文网页中一般信息内容性的正文文字都使用宋体，字号普遍使用 12px和14px，保证浏览者最好的阅读感受 为了突出个性，体现站点的特有风格和加强艺术效果，可以根据网站 所表达的内涵，在不同的位置选择更加贴切的字体，还可将字体稍作 变化来制作标志等 网站logo设计基础 网站logo设计的美学原则 网站logo的表现形式 网站logo的设计手法 网站logo的设计技巧 将多样性提炼为一个主要表现体 强调统一的原则 注重对事物张力的把握 特示图案、特示文