web标准页面布局应用(二)
- 格式:ppt
- 大小:404.00 KB
- 文档页数:24
web的标准随着Web技术的不断发展,标准已经成为了设计和开发优质网站的基础。
Web标准主要包括三个方面:结构标准、表现标准和行为标准。
它们是Web技术发展的重要标志,为网站开发提供了规范和方向。
下面来一步步详细阐述这三个方面的内容,以及它们之间的联系。
一、结构标准结构标准主要规定Web页面的结构和组织方式,它们通常使用HTML或XML来实现。
HTML是一种用于创建Web页面的标记语言,它定义了页面中各个部分的语义和功能。
在结构标准中,设计人员需要遵循一些基本准则,包括:1.避免混合使用不同的标记语言,如HTML和CSS。
2.使用正确的标记元素来组织页面内容,例如标头、段落、列表等。
3.避免使用表格来布局页面,应该使用CSS来控制页面的样式和布局。
4.确保HTML文档结构的正确性,以确保浏览器可以正确地解析网站内容。
二、表现标准表现标准主要规定Web页面的外观和风格,通常使用CSS来实现。
CSS是一种样式表语言,它与HTML结合使用,可以实现页面的外观、样式和布局。
在表现标准中,设计人员需要遵循一些基本准则,包括:1.使用CSS集中控制页面的外观和布局,避免在HTML标记中使用样式属性。
2.避免使用表格来布局,使用CSS来控制页面的布局,可以实现更灵活的布局效果。
3.使用语义化的标签来定义页面的内容,可以更好地支持搜索引擎优化和无障碍访问。
三、行为标准行为标准主要规定Web页面的交互行为,通常使用JavaScript 来实现。
JavaScript是一种基于对象的脚本语言,可以实现页面动态效果、表单验证和交互等功能。
在行为标准中,设计人员需要遵循一些基本准则,包括:1.使用JavaScript来实现页面的交互和动态效果。
2.避免在HTML标记中使用JavaScript脚本,应该将JavaScript 代码单独存放在一个外部JS文件中。
3.遵循JavaScript开发的最佳实践,如为变量和函数使用有意义的名称,注重代码的结构和可读性,以及避免使用全局变量等。
Web标准详解不是某⼀个标准,⽽是⼀系列标准的集合。
⽹页主要由三部分组成:结构(Structure)、表现(Presentation)和⾏为(Behavior)。
结构标准:相当于⼈的⾝体。
html就是⽤来制作⽹页的。
表现标准:相当于⼈的⾐服。
css就是对⽹页进⾏美化的。
⾏为标准:相当于⼈的动作。
JS就是让⽹页动起来,具有⽣命⼒的。
1、Web标准的三个规范(1)结构(Structure)①HTMLHTML英语意思是:Hypertext Marked Language,即超⽂本标记语⾔,使⽤HTML语⾔描述的⽂件,需要通过WWW浏览器显⽰出效果。
是⼀种最为基础的语⾔。
所谓超⽂本,因为它可以加⼊图⽚、声⾳、动画、影视等内容,因为它可以从⼀个⽂件跳转到另⼀个⽂件,与世界各地主机的⽂件连接。
所谓标记,就是它采⽤了⼀系列的指令符号来控制输出的效果,这些指令符号⽤“<标签名字属性>”来表⽰。
②XHTMLXHTML是HTML向XML的过渡语⾔,删除了部分表现层的标签,标准要求提⾼,有严谨的结构,所有标签必须关闭。
如果是单独不成对的标签,在标签最后加⼀个"/"来关闭它。
③XMLXML(eXtensible Markup Language)即可扩展标记语⾔,最初设计的⽬的是弥补HTML的不⾜,以强⼤的扩展性满⾜⽹络信息发布的需要,后来逐渐⽤于⽹络数据的转换和描述。
XML是⼀种简单的数据存储语⾔,使⽤⼀系列简单的标记描述数据,⽽这些标记可以⽤⽅便的⽅式建⽴,虽然XML占⽤的空间⽐⼆进制数据要占⽤更多的空间,但XML极其简单易于掌握和使⽤。
(2)表现(Behaivor)表现标准语⾔主要包括CSS(Cascading Style Sheets)层叠式样式表,通过CSS样式表,W3C创建CSS标准的⽬的是以CSS取代HTML表格式布局、帧和其他表现的语⾔,通过CSS样式可以使页⾯的结构标签更具美感、⽹页外观更加美观。
基于Web标准的网页设计与制作(第2版)习题解答习题11.1 作业题1. 对于采用虚拟主机方式的多个网站,域名和IP地址是(C)的关系。
A. 一对多B. 一对一C. 多对一D. 多对多2. 网页的本质是( B )文件。
A. 图像B. 纯文本C. 可执行程序D. 图像和文本的压缩3. 请解释/business/moe/115078.html的含义。
答:http是协议名;是域名(或称主机头),business和moe是网站目录中子目录名,115078.html是文件名。
4. 简述WWW和Internet的区别。
答:Internet可提供很多种服务,WWW只是Internet提供的一种信息浏览服务。
5. 简述URL的含义和作用。
URL是(Universal Resource Locator,统一资源定位器)的缩写,URL是Internet上任何资源的标准地址,每个网站上的每个网页(或资源文件)在Internet上都有一个唯一的URL地址,通过URL,浏览器就能定位到目标网页或资源文件。
6. 简述网站的本质和特点。
网站就是由许多网页及资源文件(如图片)组成的一个集合,通常把网站内的所有文件都放在一个文件夹中,所以网站从形式上看就是一个文件夹。
特点:①拥有众多的网页。
②拥有一个主题与统一的风格。
③有便捷的导航系统。
④分层的栏目组织。
1.2 上机实践题1. 使用DW新建一个名称叫“wgzx”的网站目录,该网站目录对应硬盘上的“D:\wgzx”文件夹。
2. 在电脑上安装Firefox浏览器,并分别使用IE浏览器和Firefox浏览器查看网页的源代码。
习题21. HTML中最大的标题元素是: ( C )A.<head> B.<title> C.<h1> D.<h6>2. 下列哪种元素不能够相互嵌套使用。
( B )A.表格B.表单form C.列表D.div3. 下述元素中都是表格中的元素。
div+css网页标准布局实例教程(二)五、布局页面——头部和导航有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了。
先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面就需要填砖分割空间了。
先分析下头部:分为两部分,一个是logo靠左侧显示,一个是搜索靠右侧显示,那么布局时插入两个div,一个向左浮动,一个向右浮动的方式来完成。
另外还有很多种实现方法,比如logo用h1标签,搜索用span,或者把log o做为背景图片也是可以的,不管采用哪种方法,要根据页面的需求选用一种最合理的方法。
如果要在logo加上链接的话,那么就不能用背景图片的方法了。
<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。
然后分别插入相应的内容,在logo里插入我们事先切割好的logo图片,在search里插入一个表单,一个文本框和一个按钮,插入后如下:<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧,在ps里测量,头部的高度是71px,logo距顶部18px,搜索产品距顶部30px,下面在css里把这些参数都给定义上,看显示的效果和效果图中的效果是不是一样呢?#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。
引言随着 Web 技术的快速发展和不断演进,网页设计和开发变得越来越复杂。
CSS (层叠样式表)是前端开发中的重要组成部分,它决定了网页的外观和样式。
在本文中,我们将深入研究 CSS 的高级用法和 Web 标准解决方案,帮助读者精通 CSS 的使用。
目录1.CSS 布局:弹性盒子和网格布局2.响应式设计和媒体查询3.CSS 动画和过渡效果4.CSS 高级选择器和伪类5.利用 CSS 绘制图形和图标6.使用 CSS 模块化和预处理器7.Web 标准解决方案的最佳实践1. CSS 布局:弹性盒子和网格布局CSS 布局是网页设计的基础,传统的盒模型和浮动布局已经不再适用于复杂的页面结构。
使用弹性盒子(Flexbox)和网格布局(Grid Layout)可以更灵活地控制元素的排列和尺寸。
我们将深入研究这两种布局方式的语法和用法,并通过实例演示其灵活性和效果。
2. 响应式设计和媒体查询在移动设备的普及和多种屏幕尺寸的存在下,响应式设计已成为现代网页设计的必备技能。
通过使用媒体查询(Media Queries),我们可以根据设备的屏幕尺寸和特性,动态地调整元素的样式和布局。
本章将介绍响应式设计的原理和常用的媒体查询技巧,帮助读者制作适应不同设备的网页。
3. CSS 动画和过渡效果CSS 提供了丰富的动画和过渡效果的功能,通过使用关键帧动画(Keyframe Animation)、过渡(Transition)和变换(Transform),我们可以为网页添加生动和吸引人的效果。
本章将深入探讨这些特性的使用方法和参数调整,帮助读者制作出令人印象深刻的动画效果。
4. CSS 高级选择器和伪类CSS 的选择器是控制元素样式的重要手段,通过组合选择器和伪类,可以更精确地选择页面中的元素,并对其应用样式。
本章将介绍一些常见的高级选择器和伪类的使用方法,包括子选择器、相邻选择器、属性选择器和伪元素等,帮助读者在复杂的页面结构中准确地选择元素。
web界面设计规范Web界面设计规范是一系列规定和约束,旨在确保网站或应用程序的用户界面设计符合统一的标准,以提供用户友好的体验和一致性的外观。
以下是一些常见的Web界面设计规范:1. 界面布局规范:- 使用网格系统来实现页面布局,确保页面的各个元素对齐和排列整齐。
- 确定主要内容的位置,如导航栏、辅助功能和主要内容区域。
- 使用一致的字体、颜色和图标来传达信息层次结构和用户导航。
2. 导航规范:- 使用清晰的导航栏,以帮助用户快速找到所需的功能和信息。
- 提供可见的面包屑导航,以显示用户当前所在位置和可点击的路径。
- 使用显眼的按钮和链接,以便用户点击并进行导航。
3. 内容呈现规范:- 使用有吸引力的图像和多媒体内容来吸引用户的注意力。
- 调整字体大小和行距,以确保易读性和可访问性。
- 使用合适的排版和格式,以将信息呈现清晰、易理解。
4. 表单规范:- 使用标签来描述每个输入字段,并对输入字段进行合适的格式控制。
- 提供明确的错误消息和验证规则,帮助用户填写表单。
- 为用户提供方便的方式来提交表单,如按钮或提交链接。
5. 响应式设计规范:- 确保网站或应用程序在不同设备上具有一致的外观和功能。
- 使用可自适应的布局和元素,以适应不同的屏幕尺寸和方向。
- 优化页面加载速度,减少数据传输和图像大小。
6. 可访问性规范:- 使用无障碍标准和技术,以确保残障用户能够方便地访问和使用网站。
- 提供有意义的文本替代品和注释,以帮助使用辅助技术的用户理解图像和多媒体内容。
- 使用明确和简洁的语言,避免使用模糊、不明确的术语和词语。
7. 交互规范:- 使用明确和一致的图标和按钮,以指示用户可执行的操作。
- 提供实时反馈和状态更新,以使用户意识到其操作的结果。
- 使用动画和过渡效果来增强用户体验,但不要过度使用,以免分散用户注意力。
以上是一些常见的Web界面设计规范,可以根据具体的项目需求和目标来制定和调整。
设计规范的核心目标是提供用户友好的体验和一致性的外观,为用户提供无障碍的操作和导航。
web ui标准一、概述Web UI标准是指一套规范和标准,用于设计、开发、测试和评估Web用户界面(UI)的元素和行为。
它为Web开发者提供了一套统一的、可重复使用的、高效的界面设计模式,旨在提高用户体验、降低维护成本、提高网站性能和安全性。
二、设计原则1. 易用性:UI设计应该以用户需求为导向,确保界面元素易于理解、操作简单、反馈清晰。
2. 直观性:界面元素应清晰、简洁,避免使用过于复杂的设计和视觉效果,使用户能够快速理解界面功能。
3. 响应性:UI应能够适应不同尺寸的设备,并根据用户行为进行动态调整,以提高用户体验。
4. 可访问性:确保UI对所有用户(包括视障、听觉障碍等不同能力水平的用户)都是可访问的。
5. 用户体验:始终关注用户需求,关注界面设计的细节,以提高用户体验。
三、元素分类1. 文本元素:包括标题、段落、链接、文本输入框等,用于传达信息和与用户进行交互。
2. 图像元素:用于增强视觉效果、展示复杂信息或作为导航标识等。
3. 颜色元素:包括背景色、边框色、文字颜色等,用于强调重要信息、创造情感联系或影响用户情绪。
4. 布局元素:包括页面结构、表单布局、响应式布局等,用于组织界面元素和提供良好的用户体验。
5. 交互元素:包括按钮、下拉菜单、动画效果等,用于触发操作、提供反馈和增强用户体验。
四、标准规范1. 尺寸规范:制定不同设备(如电脑、平板、手机)的UI元素尺寸标准,以确保界面在不同设备上的良好显示效果。
2. 字体规范:指定可重复使用的字体类型、大小和样式,以提高可读性和用户体验。
3. 颜色规范:制定颜色选择标准,包括背景色、文本颜色、边框颜色等,以增强视觉效果和传达信息。
4. 图标规范:使用统一的标准图标,以提高品牌一致性和用户体验。
5. 交互规范:制定按钮、下拉菜单等交互元素的点击反馈、响应时间等标准,以提高用户体验和可用性。
6. 响应式设计规范:制定适应不同设备的界面布局标准,以确保界面在各种设备上的良好显示效果。
Web应用界面设计规范(Design Spe cification for Web UI)主讲人:ARay目录:一、软件界面规范的重要性及其目的二、用户体验为何如此重要三、Web规范体系介绍四、界面设计开发流程五、应该遵循的基本原则六、界面设计规范一、软件界面规范的重要性及其目的①使最终设计出来的界面风格一致化,开发编码人员相互之间开发更轻松,遵循统一的操作规范,以标准化的方式设计界面,提高工作效率。
减少和改变责任不明,任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
②产品设计通过规范的方式来达到以用户为中心的目的。
二、用户体验为何如此重要①日常生活中的遭遇X员工悲惨的一天:早晨起来,发现闹钟没有按原先设定响起来。
一边烧水,一边穿衣服,临走前去喝水却发现水还没有烧开。
到了地铁站,发现公交卡没有钱了。
无奈之下只能去排队买票。
排了3趟地铁,终于到公司了,但是你却迟到了。
结果:尽管你已经非常努力,但是你还是迟到了。
那么,让我们看看这一连串的倒霉事,是什么让我们如此狼狈?②什么是用户体验用户体验(user experience)是以用户为中心的设计中最重要的一个部分,强调的是过程,是软件对用户行为产生的反应与用户期待值要尽可能的一致。
糟糕的用户界面表现:表现一:过分使用各种奇形怪状、五颜六色的控件。
表现二:界面元素比例失调。
比如按钮巨大无比,其尺寸甚至超过显示重要内容的文本框的界面。
表现三:界面元素凌乱。
比如说,按钮和文本框摆放地点随意,该对齐的控件对不齐。
表现四:违背使用习惯。
你按F1,它没有弹出帮助,却执行了一件绝对出乎你意料的动作。
表现五:消息框信息含糊、混乱。
比如软件弹出一个消息框。
把原本“确定”和“取消”写成为“是”和“否”,让用户不知道什么意思。
表现六:还有一种糟糕的用户界面,乍一看很厉害,实际上完全是缺乏规划的结果。
这种软件本身的确提供了比较复杂的功能,但对于哪些是常用功能,哪些是很少用到的高级功能,缺乏评估。
心之所向,所向披靡我总是对每一个想学CSS 的朋友说: “学CSS 真的很简单,一个星期就搞定。
” 但真的这么简单吗?魔方也很简单,拿到手里就知道怎么玩了,但最高境界却不是几天或几个月就能修成的,甚至根本就不可能达到,永远需要提高,看似痛苦,同时也享受升华的乐趣,CSS 也一样,痛并快乐指的就是这些东西吧。
本文里面收集一些有关CSS 的技巧、教程、工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过。
不管是新手还是高手,大家都继续学习吧。
一,Web 标准要玩游戏,就得先了解规则。
要学CSS ,就应该先了解一下Web 标准。
尽管看上去不是必须的(我在学CSS 之前,根本不知道也不想知道Web 标准是个啥玩意儿)。
应该说,你是否学Web 标准,跟你是否能学会CSS 没有什么关系,但跟你能写出什么样的CSS ,以及X html 或其它代码,跟你能做出什么质量的网页有很大的关系。
其实我自己对Web 标准也不甚了解,尽管我看过不少关于Web 标准的文章和书。
(我总是这样,对学术性的概念名词永远都似懂非懂的),所以每次谈到Web 标准,我头里就会有一堆问号:• Web 标准真的有利于seo 吗? Web 标准的动机难道就是SEO? 出于SEO 动机的Web标准是否会失去一些Web 标准真正的本质?•如何才算符合Web标准? 仅仅是通过W3C的代码验证,你就觉得自己符合Web 标准了?•Web标准是为了提升用户体验,而一个对用户友好的网站其代码应该写得非常简洁实用,而一个使用简洁实用代码的网站是有利于SEO的。
这个逻辑似乎合情合理,但在实际运用中却又总有这样那样的冲突…•…我们应该把Web标准看成一份”道德约束”还是”法律强制”呢?我个人比较乐意看成前者,努力靠拢就好了,但没必要为了标准而标准,自己为难自己。
•你已经花了50%的时间完成了一个项目的90%,如果余下的10%又需要你花50%的时间去弄,是否值得? 尤其是这种情况发生在: 你的90%已可以让用户在各个浏览器下正可常浏览,而那10%仅仅是为了通过W3C代码验证。
web 设计规范Web 设计规范是指网站设计过程中需要遵循的一些标准和规则。
一个良好的设计规范可以提高网站的用户体验,使用户能够更好地理解和操作网站。
下面是一些值得关注的 web 设计规范:1. 布局规范:- 采用响应式设计,以适应不同尺寸的屏幕。
- 使用一致的页面布局,包括标题栏、侧边栏、内容区等。
- 确保页面元素的对齐和间距合理,保证页面整体美观。
- 使用网格系统进行页面设计,以保持一致性和可扩展性。
2. 导航规范:- 设计易于导航的菜单,确保用户能够轻松找到他们需要的信息。
- 使用面包屑导航和站内搜索功能,帮助用户在大型网站中迅速定位目标页面。
- 标记当前页面,以便用户清晰地知道他们所处的位置。
3. 内容规范:- 使用清晰、简洁的文字,避免使用太长或复杂的句子。
- 对页面内容进行分类和分组,以便用户更好地理解页面结构。
- 使用合适的字体、字号和颜色,确保文字易于阅读。
4. 图片和多媒体规范:- 使用高质量的图像和多媒体,避免使用模糊或拉伸的图片。
- 优化图像和多媒体文件的大小,以提高页面加载速度。
- 为图像添加替代文本,以便无法加载图像的用户了解图像内容。
5. 颜色和视觉规范:- 使用品牌颜色,确保网站的一致性和识别性。
- 考虑色盲用户和视力受损者,确保页面颜色对他们来说也是可辨认的。
- 使用适当的对比度,确保文字和背景之间的对比度足够高,以提高可读性。
6. 表单规范:- 使用简洁、明确的表单字段,以降低用户错误和困惑的可能性。
- 提供即时的错误提示和验证,以帮助用户在提交表单之前检查错误。
- 使用自动填充和下拉列表等功能,提高用户填写表单的效率。
7. 错误处理规范:- 为用户提供清晰、简洁的错误提示信息,帮助他们理解错误的原因和解决方法。
- 提供返回功能,让用户可以回到上一页或返回首页。
- 避免过多的弹出窗口和不必要的重定向,以减少用户的困惑和不安全感。
8. 页面加载规范:- 优化页面加载速度,减少不必要的文件和请求。
中国移动通信企业标准XX-X-XXX-2009中国移动福建公司网管系统WEB界面标准化开发规范CMFJ Network Management SystemApplication Integrate Technology Specification版本号: 1.0.0目录1前言 (3)1.1范围 (3)1.2引用文件 (3)1.3缩略语 (3)2参考标准 (4)3主要内容及约束范围 (5)4页面设计总体原则 (6)5页面编码规范 (8)6窗体基本布局描述 (9)6.1基本的页面布局 (9)6.1.1基本的页面布局:上、左、右。
(9)6.2布局要求 (9)6.3布局样例 (12)7界面最小元素定义 (15)7.1字体 (15)7.2按钮 (15)7.3列表 (15)7.4表格 (16)7.5文本框 (16)7.6图片 (16)8通用界面开发要求 (17)8.1登录界面 (17)8.1.1界面风格要求 (17)8.1.2界面操作要求 (17)8.1.3登录界面标准样例 (17)8.2基于IFrame方式集成界面 (18)8.3其他要求 (19)9编制历史 (20)附录1. 图标集 (21)附录2 界面模板样例 (21)附录3 CSS样例 (21)附录4 IFrame整合页面框架 (21)附录5 颜色表 (21)1前言1.1 范围本规范是中国移动福建公司网络运营支撑系统WEB界面标准化开发规范,根据中国移动福建公司各专业网管系统的实施,将会根据建设步骤对本规范进行修改、完善和扩充。
本规范由中国移动通信集团福建有限公司网管中心提出并归口。
本规范由规范提出并归口部门负责解释。
本规范起草单位:中国移动通信集团福建有限公司。
本规范主要起草人:黄海辉、倪志刚、陈成钦、陈锡清、邱琰琛、陈庆、陈美娟、鲁仁华、林晓起、吴祥炜、史振煊。
本规范解释单位:中国移动通信集团福建有限公司网管中心1.2 引用文件1.3 缩略语2参考标准《中国移动网管系统监控界面标准化规范》3主要内容及约束范围本规范描述了中国移动福建公司网管系统WEB界面的设计目标、建设原则。
Web前端代码规范与页⾯布局⼀、规范⽬的:为提⾼⼯作效率,便于后台⼈员添加功能及前端后期优化维护,输出⾼质量的⽂档,在⽹站建设中,使结构更加清晰,代码简明有序,有⼀个更好的前端架构,有利于SEO优化。
⼆、规范基本准则:符合web标准,使⽤具有语义的标签,使结构、表现、⾏为分离,兼容性优良,页⾯性能优化,代码简洁、明了、有序,尽可能的减少服务器的负载,保证最快的解析速度。
三、⽂件规范:html、css、js、images⽂件均归档⾄约定的⽬录中。
1. html(1)编码:所有编码均采⽤xhtml,标签必须闭合,属性值⽤双引号包括,编码统⼀为utf-8。
(2)语义化:语义化html,正确使⽤标签,充分利⽤⽆兼容性问题的html⾃⾝标签。
(3)⽂件命名:命名以中⽂命名,依实际模块命名,如同⼀模块以_&title&_来组合命名,以⽅便添加功能时查找对应页⾯。
(4)⽂件头部head的内容title,需要添加标题编码charset=UTF-8缓存:<metahttp-equiv="Pragma" content="no-cache"><metahttp-equiv="Cache-Control" content="no-cache"><metahttp-equiv="Expires" content="-1">Content=’-1’,由于银⾏业务每天都有更新,所以需要在此设置为-1,表⽰⽴即过期添加description、keywords内容l Robots content部分有四个指令选项:index、noindex、follow、nofollow,⽤‘,’分隔,如:<meta name="robots"content="index,follow" />l 在head标签内引⼊css⽂件,有助于页⾯渲染l 引⼊样式⽂件或JavaScript⽂件时,须略去默认类型声明.l 页脚引⼊javascript⽂件(5)连接地址标签:书写链接地址时,避免重定向,如href=””,需在地址后⾯加‘/’(6)尽可能减少div嵌套,如:根据重要性使⽤h1-6标签,段落使⽤p,列表使⽤ul,内联元素中不可嵌套块级元素,为含有描述性表单元素(input,tetarea)添加label(7)图⽚l 能以背景形式呈现的图⽚,尽量写⼊css样式中l 区分作为内容的图⽚和作为背景的图⽚,作为背景的图⽚采⽤Css sprite技术,放在⼀张⼤图⾥l 重要图⽚必须加上alt属性,给重要的元素和截断的元素加上title(8)注释:给区块代码及重要功能加上注释,⽅便后台添加功能(9)转义字符:特殊符号使⽤转义字符(10)页⾯架构时考虑扩展性2. Css(1)页⾯内部尽量避免使⽤style属性(2)css放在head标签中,由link标签引⼊,使页⾯的结构与表现分离。
Web页面设计标准编号:版本号:受控状态:作者:分发号:文档修改历史记录文档修改记录目录1引言61.1 目的 61.2 范围 61.3 缩略术语 61.4 参考资料 62WEB页面框架内容6 2.1 页面框架 62.2 页面布局 6布局原那么 6布局要求72.2.2.1 页面分割72.2.2.2 页面构造82.2.2.3 页面展现92.2.2.4 页面美化102.3 页面字体112.4 边距112.5 表格122.6 段落排版132.7 Frame 132.8 其他页面元素143页面风格153.1 风格分类153.2 页面风格应用154WEB页面交互15 4.1 页面元素焦点切换16信息填写16鼠标交互响应164.2 页面信息交互18操作结果确认18其他规那么184.3 页面信息提示194.4 键盘响应支持215WEB页面通用标准22 5.1 一般页面功能22新增22修改22删除22查询23取消23保存23重置23返回23分页24全选245.2 一般页面规那么24默认值 24必填值 24界面传递25窗口嵌套25输入框操作25在线帮助功能25菜单功能要求26快捷键功能27快捷键的限制27页面的标准性28系统易用性29输入平安性要求30独特性要求31多窗口的应用与系统资源31 6页面编程技术使用标准32 6.1 页面元素命名326.2 DHTMLx控件356.3 Flex控件357页面资源规格说明357.1 图标357.2 图片367.3 多媒体 368附录378.1 基于DHX的CSS规格例如37表格CSS例如 378.2 典型应用的页面例如37引言目的本文用于标准我公司所开发的商业软件中对于web页面的设计工作,明确在设计中所要遵循的准那么和方法,web页面中各个元素的规格要求,确保所实现的web页面在风格、构造和功能上的统一,提升商业软件的外在品质。
范围本标准适用于公司所有的商业软件产品。
缩略术语DHMLX:web页面的UI控件参考资料WEB页面框架内容页面框架WEB的页面框架是指构成完好页面的组织构造。