网页设计原理PPT课件.ppt

1、web设计原则，1，2020/7/7，了解网站开发流程了解web设计原则查看优秀的web页面设计规范，学习他人的长时间，激发对web设计学习的兴趣，本章的目标，2，2020/7/7，第一步：规划和准备阶段。现阶段要做的是：(1)市场调查、市场分析，(2)制定网站技术方案；(3)网站内容规划；第二阶段：网页设计，制作阶段。在此阶段，您需要：(1)站点范围的设计(样式、布局、颜色)。(2)设计界面，创建网站的各种网页。(3)通过超链接合并各个网页。(4)背景设计。第三阶段：网站发布、宣传和维护阶段。此阶段需要执行的任务是：(1)测试、调试和改进网站。(二)网站发布和宣传；(3)维护和更新网站。1.

2、1网站开发流程，3，2020/7/7，1.2.1网页设计的基本原则(1)用户优先原则(2)易用原则网页浏览必须清晰，结构明确，操作简单。网站经过适当的组织，使访问者可以在不同的网页之间快速方便地导航。(3)实用性原则，1.2网页的设计原则，4，2020/7/7，1。网页大小标准显示器的屏幕分辨率为1024*768，IE浏览器的屏幕大小为ie 6.0: 1003 * 600pxie 8.0(隐藏菜单栏):1003*626 IE8.0(不隐藏菜单栏):1003*598原则：网站设计中标志的设计是不可缺少的重要部分。标志是网站的特点和意义的集中表达，在传达网站位置和经营理念的同时，会直接影响客户对网

3、站的判断，使人们容易识别。特别是网站今后要在世界范围内宣传，优秀的商标设计会吸引更多的访问者。标志可以是中文、英文字母、符号、图案、动物或角色。标志的设计创意来源是网站的名称和内容。2 .主页留言板网站徽标，6，2020/7/7，2。主页留言板网站徽标，7，2020/7，2。主页留言板导航条，8，2020/7/7，网站导航主要表现为菜单，区内搜索引擎，当前浏览位置等。(1)菜单。菜单是浏览网站最常用的方法，良好的菜单系统的核心是可以根据网站的层次要求进行调整，使访问者更容易理解网站的结构。(2)工作站搜索引擎。站点内的搜索引擎提供了一种人性化的方法，只要查询者在搜索引擎中输入他们需要查找的内容

4、的关键字，站点就会自动查找出站内的合格页面。(3)当前导航位置。“当前导航位置”是在站点的每个页面上添加当前位置的字符说明，并逐步联接链接。2 .主页留言板导航条，9，2020/7/7，2。主页留言板导航条(常用导航条)，10，2020/7/7，通常是广告横幅图片，或为了吸引用户的视线而用JavaScript或flash技术制作的动画，2。主页留言板横幅，11，2020/7/7，12，2020/7/7，主页正文文本图像动画超链接，2 .主页留言板内容布告栏，13，2020/7/7，版权信息布告栏制作单位，制作人，时间等，2。主页留言板瓣膜板，14，2020/7/7，主页设计不将所有内容放在网页

5、上，而是将网页内容放在合理的排版上，使浏览者的眼睛愉快，提高网站的魅力。设计版面时，必须在web空间中均匀分布文本和图片，并对不同形状和颜色的web元素进行对比，以产生清晰的视觉效果。典型的版面结构包括“相同”字形版面、“国家”字形版面、“选择”字形版面、“3”字形版面和“布”字形版面、上下框架、封面样式、1 . 2 . 3 web版面设计、15，2020/7有些网页看起来优雅、品位、愉快，但页面结构简单，图像也不复杂，主要适合使用色彩。颜色是人的视觉最敏感的因素，网页颜色处理得好，可以锦上添花。web 3印刷色：red、green和blue颜色的属性：色相、饱和度和亮度颜色模式：RGB、cm

6、yk web 216安全；1 . 2 . 4 web颜色设计原理；23，2020/7/7；表1.1颜色中文字体通常使用宋体，大小通常为9磅或12像素。2图像网页上的图像主要有用于装饰标题的小图、介绍的照片、表示企业图像或热内容的象征性图(徽标)、宣传用的广告(Banner)等多种形式。3超链接超链接是网页的主要特征，是从一个网页到另一个目标的链接。此“目标”通常是网页，也可以是同一网页的其他位置、下载的文件、图片、E_Mail地址等情况之一。超链接可以是文本、按钮或图片，当鼠标指向超链接位置时，超链接会变成小手形状。1.2.5网页元素设计，25，2020/7/7，4导航栏是一组便于您浏览站点的

7、超链接。导航栏通常包含多个按钮或多个文本超链接。5动画动画是网页上最活跃的元素，独创的精致的动画是浏览器引人注目的有效方法之一。6表格表格主要用于网页内容的布局，是HTML语言的元素，使您可以组织整个网页的外观，并通过表格精确控制网页中各个网页元素的位置。1 . 2 . 5 web页元素设计、26，2020/7/7、7帧框架是web页的组织格式，用于将多个互相连接的web页的内容配置为在一个浏览器窗口中显示。例如，将导航栏放在一个框架内，其他框架的内容可能会随着导航栏的链接而变化。8表单表单是收集访问者信息或实现某些交互的网页，访问者输入文本，选择单选按钮或复选框，然后从下拉菜单中选择选项等来

8、填写表单。除了上述最基本的组件外，网页还包含横幅广告、字幕、悬停按钮、每日图章、计算器、音频、视频、Java Appplet等元素。1.2.5网页元素设计，27，2020/7/7，前台技术XHTML(网页的结构技术)web页面的表示技术(CSS)ECMAScript(以前称为JavaScript，脚本语言)Ajax()NET技术是ASP的后续技术JSP技术基于JAVA的多平台动态页面技术PHP技术多平台的网页后台技术，免费web脚本语言，1.3 web设计与开发技术，28，2020/7/7，他的山石攻击玉，欣赏优秀的网页，学习他人的长度，学习web设计1.4优秀网站审计，29，2020/7/7

9、，网站案例分析，1网站说明：航空公司的主页。2布局web布局使用更通用的列结构三色网页选择蓝色系列(象征天空)与网站主题相匹配。此页面主要使用两个蓝色、#14397D和1E95BD，如图所示。另外，网页文字的配色主要以白色和蓝色为主。2020/7/7，30，1.4海外优秀网站审计，图1-6利顿茶商，图1-7中国陶瓷，31，2020/7/7，1.4国外优秀网站审计，图1 熟悉Dreamweaver CS5的界面布局和工作环境了解如何创建和管理站点，包括本地和远程站点，本章中的目标，2020/7，37，2020/7/7，38，2020/7/7 1设置常规参数2设置新文档参数，2020/7/7，40

10、，设置参数3站点参数，2020/7/7，41，2.1.4 Dreamweaver cs4的帮助系统，以及要创建普通人可以查看的网站，首先必须在本地磁盘上创建此网站，然后将此网站上传到web服务器。放置在本地磁盘上的web站点文件夹称为本地站点，internet上web服务器的web站点文件夹称为远程站点。Dreamweaver CS4为本地和远程站点管理提供了强大的功能；创建2.2站点；创建2020/7/7；创建43，2.2本地站点；创建2020/7/7；创建44；创建2.2本地站点；图2-图2填写站点名称，图2-19站点创建向导之一：确定是否使用服务器技术，创建2020/7/7，45，2.2

11、本地站点，图2-20站点创建向导3:设置编辑方法，图2-21站点创建向导4:设置编辑方法受管理站点是指设置的本地或远程站点，在Dreamweaver CS4中，可以通过“管理站点”对话框管理受管理站点，在“管理站点”对话框中，可以创建新站点、编辑站点、复制站点、删除站点、导入或导出站点。2.3网站管理，2020/7/7，48，2.3网站管理，图2-30站点管理对话框，2020/7/7，49，2.3.1文件面板管理网站的资源，图2-32文件和文件夹网页顶部或侧面的表格：控制网页各种元素的布局表单：接收用户输入，反馈服务器上的网页效果：弹出窗口，与鼠标一起移动文本等，JaVaScript，VBSc

12、ript web交互元素：聊天，购物，搜索，将ADO与ASPJSP，以及(1)新的web文档；(2)保存和保存web文档。(3)打开web文档；(4)关闭web文档。4 web文档的基本操作、2020/7/7、53，2.5.1新建和保存web页Dreamweaver CS4提供了多个选项，用于创建可以创建以下文档之一的新文档：新建空白文档或模板；基于Dreamweaver附带的预设计页面布局文档。基于现有模板的文档。1创建新文档2保存新文档、2.5创建简单网页、2020/7/7、设置54，2.5.2页面属性页面属性的设置包括页面的布局和格式。1设置网页标题，2.5创建简单网页，2020/7/7

13、，55，2.5.2设置页面属性2设置网页外观，2.5创建简单网页，2020/7/7，56，2.5.2设置页面属性3设置网页链接1网页基本元素2页的简单排版(1)设置文本的大小(2)设置文本的字体(3)设置文本的颜色(4)设置文本对齐，创建2.5简单网页，2020/7/7，59，2.5.4图像插入web常用的图像格式在Dreamweaver中，您可以使用GIF、JPEG或PNG格式打开或预览任何图像。使用Dreamweaver在网页中插入图像的方法有三种：在“插入”面板的“常规”分类中，选择“图像”按钮。运行插入图像命令。使用Ctrl Alt I组合键。2.5创建简单的网页，2020/7/7，6

14、0，案例1:创建学校配置文件页面案例回顾创建学校配置文件页面，简单的页面制作说明了学校的基本情况。本示例中的材质包括图3-42所示的4个校园图。2.5制作简单的主页，2020/7/7，61，练习：制作爱人美食家网站“美食家推荐”页面展示，此培训资料包含2幅画，制作像画一样的爱人美食家网站“美食家推荐”页面。2.5简单网页制作，2020/7/7，62，2.6 web制作规范，在网页制作过程中命名目录和文件时必须符合相应规范，并且名称必须能够表示文件的含义以便查找和修改。以下从三个方面描述了网页制作规范：网站目录创建规范、文件命名规范和文件头代码规范。2020/7/7，63，2.6.1站点目录构建规范，站点目录构建原则