网页设计原理

网页设计原理1网页设计原理全文共67页，当前为第1页。掌握网站的开发流程掌握网页设计原理

掌握网页设计规范欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣本章目标2网页设计原理全文共67页，当前为第2页。第一个阶段：规划和准备阶段。这个阶段要做的工作包括：（1）市场调查、市场分析；（2）制定网站技术方案；（3）规划网站内容；第二阶段：网页设计、制作阶段。这个阶段要做的工作包括：（1）网站总体设计（风格、布局、色彩）；（2）设计界面、制作网站中的各个网页；（3）将各个网页通过超级链接进行整合；（4）后台设计。第三阶段：网站的发布、推广和维护阶段。这个阶段要做的工作包括：（1）测试、调试与完善网站；（2）发布与推广网站；（3）维护和更新网站。1.1网站开发流程3网页设计原理全文共67页，当前为第3页。1.2.1网页设计的基本原则（1）用户至上原则（2）易用性原则

网页中的导航应放置明显、结构清晰、操作简单。网站的链接结构合理，方便浏览者在不同网页之间跳转快捷、方便。（3）实用性原则1.2网页的设计原理4网页设计原理全文共67页，当前为第4页。1.网页页面大小标准显示器的屏幕分辨率为1024*768，则不同版本的IE浏览器的屏幕大小为：IE6.0：1003*600pxIE8.0（隐藏菜单栏）：1003*626IE8.0（不隐藏菜单栏）：1003*598原则：不出现水平滚动栏1.2.2网页页面与版块5网页设计原理全文共67页，当前为第5页。LOGO是网站的标志、名片，如同商标一样。在网站设计中logo的设计是不可缺少的一个重要环节。Logo是网站特色和内涵的集中体现,它作用于传递网站的定位和经营理念、同时便于人们识别，会直接影响到客户对网站的判断，特别是网站日后需要进行全球性推广，优秀的商标设计会吸引来更多的访问者。

LOGO可以是中文、英文字母，也可以是符号、图案，还可以是动物或者人物。LOGO的设计创意来源是网站的名称和内容。2.网页版块

网站LOGO6网页设计原理全文共67页，当前为第6页。2.网页版块

网站LOGO7网页设计原理全文共67页，当前为第7页。2.网页版块

导航条8网页设计原理全文共67页，当前为第8页。网站导航的表现形式主要有：菜单、站内搜索引擎、当前浏览位置等。

（1）菜单。菜单是网站最常见的导航方法，一个好的菜单系统关键在于能适应网站的层次需要，并且容易让浏览者理解网站的结构。

（2）站内搜索引擎。站内搜索引擎提供了一种主动查询方式，浏览者只要把自己需要寻找的内容的关键字输入到搜索引擎中，网站将自动地查找出站内符合条件的页面，这是一种人性化的做法。

（3）当前浏览位置。所谓“当前浏览位置”就是在网站的每个页面中加入当前位置的文字说明并逐级加入链接。2.网页版块

导航条9网页设计原理全文共67页，当前为第9页。

2.网页版块

导航条（常用导航栏）10网页设计原理全文共67页，当前为第10页。一般为广告横幅图片、或者使用JavaScript或Flash技术制作的动画，用于吸引用户观看2.网页版块

Banner条（网页广告栏）11网页设计原理全文共67页，当前为第11页。12网页设计原理全文共67页，当前为第12页。网页的主体文本图像动画超链接2.网页版块

内容版块13网页设计原理全文共67页，当前为第13页。版权信息版块制作单位、制作人、时间等2.网页版块

版尾版块14网页设计原理全文共67页，当前为第14页。网站设计不是把所有内容放置到网页中就行了，还需要我们把网页内容进行合理的排版布局，以给浏览者赏心悦目的感觉，增强网站的吸引力。在设计布局的时候要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。常见的布局结构有“同”字形布局、“国”字形布局、“匡”字形布局、“三”字形布局和“川”字形布局、上下框架型、封面型1.2.3网页版面布局设计15网页设计原理全文共67页，当前为第15页。16网页设计原理全文共67页，当前为第16页。17网页设计原理全文共67页，当前为第17页。18网页设计原理全文共67页，当前为第18页。19网页设计原理全文共67页，当前为第19页。20网页设计原理全文共67页，当前为第20页。21网页设计原理全文共67页，当前为第21页。版面典型风格对称型偏置型标题型网页设计原理全文共67页，当前为第22页。色彩的运用在网页中的作用真是太重要了，有些网页看上去十分典雅、有品位，令人赏心悦目，但是页面结构却很简单、图像也不复杂，这主要是色彩运用得当。色彩是人的视觉最敏感的元素，网页色彩处理得好，可以锦上添花。网页三原色：red、green、blue色彩的属性：色相、饱和度、明度色彩模式：RGB、CMYKWeb216安全色1.2.4网页色彩设计原理23网页设计原理全文共67页，当前为第23页。颜色心理反应应用情况红色热情、活力、温暖、喜庆极易吸引人们的眼球，在网页中广泛使用橙色时尚、轻快、温馨、热烈常常用于某些时尚新潮的网站中，如时装网站、化妆品网站等黄色快乐、希望、明亮、乐观营造出愉快的氛围，能够得到大部分浏览者的认可绿色宁静、希望、清爽、自然浅绿、黄绿等颜色既有绿色的特点，又能表现出黄色的温暖，用在网站中常常能够得到青年人和儿童的喜爱蓝色凉爽、清新、理智、平静在商业设计中，强调科技、效率的商品或企业形象，大多选用蓝色作为标准色灰色柔和、高雅、可靠、成熟与红色、橙色等比较有视觉冲击力的颜色相比，灰色比较低调。许多高科技产品，都采用灰色作为高科技形象白色洁白、纯真、明快、简洁通常需要和其他色彩搭配使用，多用于网站背景色黑色深沉、高贵、庄严、优雅适合于与许多颜色搭配紫色高贵、神秘、启发由于具有强烈的女性化性格，所以在网页设计中，除了和女性有关的商品或企业形象之外，其他类的网站一般不采用紫色作为主色表1.1色彩与心理反应24网页设计原理全文共67页，当前为第24页。网页是由文本、图像、动画、超级链接等基本元素构成1．文本建议用于网页正文的文字一般不要太大，也不要使用过多的字体，中文字体一般使用宋体，大小一般使用9磅或12像素即可。2．图像网页中的图像主要有用于点缀标题的小图片，介绍性的照片，代表企业形象或栏目内容的标志性图片（即LOGO），用于宣传的广告（即Banner）等多种形式。3．超级链接

超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。这个“目的端”通常是一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、一个E_Mail地址等。超级链接可以是文本、按钮或图片，鼠标指向超级链接位置时，会变成小手形状。1.2.5网页页面元素设计25网页设计原理全文共67页，当前为第25页。4．导航栏

导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文本超级链接组成。5．动画

动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的有效方法之一。6．表格

表格是HTML语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网页中的位置。1.2.5网页页面元素设计26网页设计原理全文共67页，当前为第26页。7．框架

框架是网页的一种组织形式，将互相关联的多个网页的内容组织在一个浏览器窗口中显示。例如在一个框架内放置导航栏，另一个框架中的内容可以随着导航栏中的链接而改变。8．表单

表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是输入文本，选中单选按钮或复选框，从下拉菜单中选择选项等。

网页中除了上述这些最基本的构成元素外，还包括横幅广告、字幕、悬停按钮、日戳、计算器、音频、视频、JavaAppplet等元素。1.2.5网页页面元素设计27网页设计原理全文共67页，当前为第27页。前台技术

XHTML（网页的结构技术）CSS（网页的表现技术）ECMAScript（前身为JavaScript，脚本语言）Ajax（由JavaScript脚本语言扩展而来）E4X（

是ECMAScript的扩展，实现更快的访问XML数据

）切片（网页图形处理）后台技术ASP技术

动态网页技术，基于VBScript或JAVAScriptASP.NET技术是ASP的后续技术JSP技术基于JAVA的多平台动态页技术PHP技术多平台的网页后台技术，免费的网页脚本语言1.3网页设计与开发技术28网页设计原理全文共67页，当前为第28页。他山之石可以攻玉，欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣，分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习网页奠定基础。1.4优秀网站赏析29网页设计原理全文共67页，当前为第29页。网站实例分析1．网站描述：这是一家航空公司的网站首页。2．布局网页布局采用的是比较常见的分栏式结构3．配色网页选用蓝色系，象征天空，与网站主题一致。网页主要运用了两种蓝色，分别是“#14397D”和“1E95BD”，如图所示。此外，网页文字的配色主要以白色和蓝色为主。网页设计原理全文共67页，当前为第30页。1.4国外优秀网站赏析图1-6利顿茶商图1-7中国瓷器31网页设计原理全文共67页，当前为第31页。1.4国外优秀网站赏析图1-8中国古董网图1-9北美工艺品展32网页设计原理全文共67页，当前为第32页。1.4优秀个人网站图1-11花蝶谷网

图1-12艾艾在线33网页设计原理全文共67页，当前为第33页。1.4优秀个人网站图1-13云水茶人坊

图1-14苹果树下34网页设计原理全文共67页，当前为第34页。本节结束35网页设计原理全文共67页，当前为第35页。DreamweaverCS5工作界面网站的创建网站的管理主要内容网页设计原理全文共67页，当前为第36页。熟悉DreamweaverCS5的界面布局和工作环境掌握站点的创建和管理方法会创建本地站点和远程站点本章目标网页设计原理全文共67页，当前为第37页。网页设计原理全文共67页，当前为第38页。网页设计原理全文共67页，当前为第39页。参数设置一般设置的参数有常规参数、新建文档参数和站点参数，这些都是开始创建站点、设计网页前需要考虑的因素。1．常规参数设置2．新建文档参数设置网页设计原理全文共67页，当前为第40页。参数设置3．站点参数设置网页设计原理全文共67页，当前为第41页。2.1.4Dreamweaver

CS4的帮助系统网页设计原理全文共67页，当前为第42页。DreamweaverCS4有一套专业的创建和管理站点的工具，实现站点的创建和管理非常方便。要制作一个能够被公众浏览的网站，首先要在本地磁盘上制作这个网站，然后把这个网站上传到WEB服务器上。放在本地磁盘上的网站文件夹称为本地站点，处于Internet中WEB服务器上的网站文件夹称为远程站点。DreamweaverCS4提供了管理本地站点和远程站点的强大的功能2.2网站的创建网页设计原理全文共67页，当前为第43页。2.2创建本地站点网页设计原理全文共67页，当前为第44页。2.2创建本地站点图2-18创建站点向导之一：填写网站名称图2-19创建站点向导之一：确定是否使用服务器技术网页设计原理全文共67页，当前为第45页。2.2创建本地站点图2-20创建站点向导之三：设置编辑方式图2-21创建站点向导之四：设置如何连接远程服务器网页设计原理全文共67页，当前为第46页。2.2创建本地站点图2-22创建站点向导之五：完成设置，显示设置信息图2-23新创建的站点网页设计原理全文共67页，当前为第47页。建立站点后，DreamweaverCS4可以对站点及站点文件进行管理。管理站点是对已经建立的本地站点或远程站点进行管理，在DreamweaverCS4中，管理站点可以通过“管理站点”对话框进行管理，在“管理站点”对话框中，可以创建新站点、编辑站点、复制站点、删除站点以及导入或导出站点。2.3网站的管理网页设计原理全文共67页，当前为第48页。2.3网站的管理图2-30“管理站点”对话框网页设计原理全文共67页，当前为第49页。2.3.1使用文件面板管理网站中的资源图2-32创建文件和文件夹网页设计原理全文共67页，当前为第50页。2.3.2使用资源面板管理网站中的资源网页设计原理全文共67页，当前为第51页。Page

52文本图片：Gif、JPEG、PNG、矢量格式超链接：链接的对象是文本、图片、图片的某个区域、脚本程序动画：Gif动画、Flash动画声音和视频：MIDI、WAV、MP3、RM导航栏：一组超链接，在网页的顶部或一侧表格：控制网页各元素的布局表单：接收用户输入，反馈给服务器网页特效：弹出窗口、文字随鼠标移动等，JaVaScript、VBScript网页交互元素：聊天、购物、搜索，ADO结合ASP\JSP网页的基本元素网页设计原理全文共67页，当前为第52页。网页文档的基本操作包括：（1）新建网页文档；（2）保存与另存网页文档；（3）打开网页文档；（4）关闭网页文档。２.4网页文档的基本操作网页设计原理全文共67页，当前为第53页。2.5.1新建与保存网页DreamweaverCS4为创建新文档提供了若干选项，用户可以创建以下任意文档。新的空白文档或模板；基于Dreamweaver附带的预设计页面布局文档；基于现有模板的文档。1．创建新文档2．保存新文档2.5制作简单网页网页设计原理全文共67页，当前为第54页。2.5.2页面属性设置页面属性的设置包括页面的布局和格式设置。1．设置网页标题2.5制作简单网页网页设计原理全文共67页，当前为第55页。2.5.2页面属性设置2．设置网页外观2.5制作简单网页网页设计原理全文共67页，当前为第56页。2.5.2页面属性设置3．设置网页链接2.5制作简单网页网页设计原理全文共67页，当前为第57页。2.5.2页面属性设置4．设置网页跟踪图像2.5制作简单网页网页设计原理全文共67页，当前为第58页。2.5.3网页的基本排版在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。1．网页基本元素2．页面的简单排版（1）设置文本的大小（2）设置文本的字体（3）设置文本的颜色（4）设置文本对齐方式2.5制作简单网页网页设计原理全文共67页，当前为第59页。2.5.4插入图像

Web上常用的图像格式包括以下3种：GIF、JPEG和PNG。Dreamweaver能够使用GIF、JPEG或PNG格式打开或预览任何图像。使用Dreamweaver将一个图像插入到网页中有3种方法：在插入面板的“常用”分类中选择“图像”按钮；执行“插入”→“图像”命令；使用〈Ctrl〉+〈Alt〉+〈I〉组合键。2.5制作简单网页网页设计原理全文共67页，当前为第60页。案例一：创建学校概况页面【案例综述】制作学校概况页面，通过简单的页面制作展示学校的基本情况。【案例展示】本例中的素材包括4幅校园图片，实例效果如图3-42所示。2.5制作简单网页网页设计原理全文共67页，当前为第61页。练习：制作爱家美食网站“美食推荐”页面【展示】本实训中的素材包括2幅图片，制作如图所示的爱家美食网站“美食推荐”页面。2.5制作简单网页网页设计原理全文共67页，当前为第62页。2.6网页制作规范在网页制作过程中，要求为目录和文件命名时都应遵循相应的规范，名称应能代表文件的意义，以便进行查找、修改。下面从网站目录建立规范、文件命名规范、文件头代码规范三个方面，具体介绍网页制作的规范。网页设计原理全文共67页，当前为第63页。2.6.1网站目录建立规范网站目录建立的原则是以最少的层次提供最清晰简便的访问结构。网站目录建立规范如图所示。网页设计原理全文共67页，当前为第64页。2.6.2文件命名规范基本原则：以最少的字母达到最容易理解的意义。所有文件名、文件夹使用小写英文字母、数字、下划线的组合，比如：news.html，unit1_1.html等。不要使用汉字、空格和特殊字符。有些服务器无法识别这些字符，会导致文件链接出错。尽量使用英文，最好有一定的意义，这样以后便于别人或自己修改。例如：名为“Login.html”的文件，一看名称，就知道是登录页面。对于图像文件，在命名时要遵循以下几点：名称分为头部和尾部两部分，用下划线分开，尽量用英文。头部表示图片的大类性质，比如：广告（banner）、标