网站界面设计文档_网站界面设计规范有哪些

1、网页设计类似百度搜索页面是怎么做出来的

网页设计这个一般都是要求会前端代码，html css js flash 还有些其他的脚本插件什么的。

如果代码写的熟练可以不用DW。写网页的工具很多，用txt文本文档也可以。

好了，贴上搜索框代码，使用需要后台程序支持，直接点了可是什么都没有哦。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜索框</title>
<style type="text/css" media="screen">
      body {
        background-color: #f1f1f1;
        margin: 0;
      }
      body,
      input,
      button {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      .container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

      a { color: #4183c4; text-decoration: none; font-weight: bold; }
      a:hover { text-decoration: underline; }

      h3 { color: #666; }
      ul { list-style: none; padding: 25px 0; }
      li {
        display: inline;
        margin: 10px 50px 10px 0px;
      }
      input[type=text],
      input[type=password] {
        font-size: 13px;
        min-height: 32px;
        margin: 0;
        padding: 7px 8px;
        outline: none;
        color: #333;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: right center;
        border: 1px solid #ccc;
        border-radius: 3px;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.075);
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all 0.15s ease-in;
        -webkit-transition: all 0.15s ease-in 0;
        vertical-align: middle;
      }
      .button {
        position: relative;
        display: inline-block;
        margin: 0;
        padding: 8px 15px;
        font-size: 13px;
        font-weight: bold;
        color: #333;
        text-shadow: 0 1px 0 rgba(255,255,255,0.9);
        white-space: nowrap;
        background-color: #eaeaea;
        background-image: -moz-linear-gradient(#fafafa, #eaeaea);
        background-image: -webkit-linear-gradient(#fafafa, #eaeaea);
        background-image: linear-gradient(#fafafa, #eaeaea);
        background-repeat: repeat-x;
        border-radius: 3px;
        border: 1px solid #ddd;
        border-bottom-color: #c5c5c5;
        box-shadow: 0 1px 3px rgba(0,0,0,.05);
        vertical-align: middle;
        cursor: pointer;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
      }
      .button:hover,
      .button:active {
        background-position: 0 -15px;
        border-color: #ccc #ccc #b5b5b5;
      }
      .button:active {
        background-color: #dadada;
        border-color: #b5b5b5;
        background-image: none;
        box-shadow: inset 0 3px 5px rgba(0,0,0,.15);
      }
      .button:focus,
      input[type=text]:focus,
      input[type=password]:focus {
        outline: none;
        border-color: #51a7e8;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5);
      }

      label[for=search] {
        display: block;
        text-align: left;
      }
      #search label {
        font-weight: 200;
        padding: 5px 0;
      }
      #search input[type=text] {
        font-size: 18px;
        width: 705px;
      }
      #search .button {
        padding: 10px;
        width: 90px;
      }

    </style>
</head>
<body>
<div class="container">
  <div id="search">
    <label for="search"></label>
    <input type="text" name="q">
    <input class="button" type="submit" value="Search">
  </div>
</div>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

2、ui设计规范文档怎么写

ui设计规范；ui设计规范有哪些？这个问题对于ui设计师来说应该是比较关心的吧，因为作为ui设计师，ui整理设计规范也是设计能力的一种体现。所以，无论是自己设计创作还是推动产品开发，你的设计规范是否完善，对产品的质量起着决定性的关键作用。那么我们今天就来聊聊这个问题吧！

ui设计规范有几大分类组成：

1、Logo

品牌印象的直接感受，根据页面不同背景所使用的Logo图也不同。将产品中所使用到的Logo统一分类，以下引用Moby’s Petshop UI Style Guide的Logo资源例举说明。

Moby’s Petshop UI 的Logo由图形和文字组合而成，而品牌色为蓝色，Logo的使用也需要考虑到Footer黑色背景下的Logo。所以用Logo的横竖向排版和单个Logo图形来分类更好。

分类里面则展现品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。

2、标准色

颜色是设计最重要的部分，没有之一。细节决定品质，所以对颜色的运用格外细致，颜色的搭配直接决定产品的品质感。颜色大致可分为品牌色、文本颜色、背景色、线框色等。给颜色添加关键词，明确用于什么界面。

以下引用real-pixels UI Style Guide的颜色规范，可以借鉴的是每个颜色不仅标注了颜色值，而且右侧给出了颜色使用的场景，值得借鉴的是按钮Normal状态和Hover状态的颜色值放在一起，这样，对不同状态显示的颜色感受更直观。

对颜色值统一规范命名变量，提高开发效率的同时更好的维护设计规范。

在前端开发中，对颜色值进行编号，这样对代码也有着极大的优化。定义一个设计规范的CSS样式库，开发过程中就不用重复修改CSS参数值，直接引用定义好的变量名就可以，这样修改设计规范的成本大大降低。

3、字体

字体是设计中必不可少的考虑因素，不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。

以下引用的是Retail Banking Service UI Style Guide中的字体规范，在定义字体名称的同时也定义了字体的风格，并且添加了不同字体风格的预览效果，常见的字体风格有：Light、Regular、Italic、Semibold、Bold。

4、段落设置

在实际的产品设计中，段落有很多种样式，不同场景下的段落要求也不一样。比如：阅读内容的段落要求文本可阅读性强，所以对字体、字号、颜色、行间距等要求简单易读。而带有装饰性的段落文本则不需要那么严谨，装饰性强就可以。

需要注意的是：在定义段落默认字体的时候还需要定义一个后备字体，即默认字体不能正常显示情况下显示的字体。设计的水平层次就在于对细节的打磨，这也就是段落规范在设计中存在的意义。

5、图标

图标是重要的软件标识，在设计资源中是最重要的模块之一。在软件产品中甚至可能每个页面都存在图标，图标除了美化的作用以外，还有着明确指代含义的计算机图形。

具体分为以下三个作用：

图标是与其它网站链接以及让其它网站链接的标志和门户。图标是网站形象的重要体现。图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范，这样才更清晰明了。

6、图片

图片也是属于设计规范最重要的部分之一，按照用途分类整理图片资源，设计风格系统化。

7、度量

在设计的过程中，我们经常会使用一套规范的度量标准，来保持产品的一致性，分别为圆角值、间距、大小。

对度量解释最好的是设计中经常使用到的栅格系统（Grid Systems），运用固定的格子设计版面布局，其风格工整简洁。这就是我们在网页和APP设计的过程中经常使用到栅格系统的原因。

8、阴影

阴影风格及参数也是设计规范中的一部分，在整理设计规范的时候，需要注意的是阴影的参数值是网页中控制阴影的参数值，而不是设计软件中的参数值。

举个例子：网页中阴影对应的参数值为：box-shadow: type:Outset offset X:0px offset Y:4px Blur:8px Spread:0px color:#000000 ，不透明度：10%，这才是程序员需要的阴影参数值，否则最终开发出来的阴影会出现不一致的情况，无法达到规范的目的。

9、组件

常用的UI组件（Component）：Button控件、下拉框、选择框（单选复选框）、时间选择器、输入框、搜索框、进度条、分页器、提示框、警告框、表格、弹出面板、数字步进器、选项卡等。

Button控件

按钮是最常见的组件之一，按钮有5个状态：Normal、Hover、Active、Disabled 、Loading。

需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。如果是图标按钮的话，除了上述参数值以外还需要标注icon和按钮文本之间的间距和icon图标的大小。

10、下拉框

下拉框是为用户提供多个选择的单选组件，优点是用最简单的界面布局方式收纳了很多的选项，需要注意定义下拉选择框弹出的时候，鼠标移动上去的Normal、Hover、Active状态。

11、选择框（单选复选框）

顾名思义，单选框是众多选择里面选一个，而复选框是众多选择里面可以无限制选择。单选框和复选框都需要三个状态，即未选中状态、选中状态和不可点击状态。

时间选择器：

时间选择器是选择年月日的组件，分别对应年月日星期的信息，在设计的时候需要考虑到4个状态，分别是：Select、Not_Select、Hover和Disable，并且写进设计规范。

输入框：

输入文本框是我们软件产品设计必不可少的组件，文本输入框有4个状态：Normal、Active、Disable和Error。

搜索框：

和输入框相同的地方是都需要聚焦然后输入内容完成操作，应该有为Normal、Active、搜索下拉状态、Error状态。

进度条：

这个需要在规范中注明上传进度条的整个交互操作流程，对Normal状态、点击上传/拖拽上传状态、上传中、上传成功、上传失败，整个流程状态的整理。在上传过程中，任何用户操作都应该有及时响应的动作，这样用户在使用的过程中才不会迷茫。

分页器：

分页器是用于切换内容页面的复合组件，常规的分页器有上下页操作按钮、分页页码按钮、输入页码手动查找的搜索框，以及分页器的4个状态：Normal、Hover 、Active、Disabled。

提示框：

提示框是一个事件触发弹出面板显示的组件，经常使用提示框的地方是，删除按钮、疑难问题点、提示类弹出信息等。这个风格设计就比较多了，设计风格各不相同，定义底板样式、文字样式和阴影参数。

警告框：

页面报错时的显示样式，常用的警告类信息是：操作成功、提醒用户注意、警告用户注意等。

表格：

表格类信息居多，应重点整理表格样式以及文本颜色大小。

弹出面板：

弹出面板主要由4个部分组成，分别是面板内的文本信息、按钮、面板大小样式、蒙版颜色和透明度。

数字步进器：

数字步进器属于复合类型的组件，可以理解为按钮和输入框联动的组件，所以输入框和按钮拥有的属性状态，步进器都有。

选项卡：

切换选项卡即切换内容，和下拉选择框不同的是，选项卡是将多个选项都排列出来的单选组件，需要考虑4个状态：Normal 、Hover 、Active 、Disabled 。

ui设计规范，ui设计规范有哪些？这个问题介绍到这里就介绍完了，现在你清楚ui设计了吗？设计规范对整个项目的规范性推动很强大，但是需要花时间和耐心细心打磨，所以需要花费很多时间和精力去整理资料、编辑素材、分类整合，最后还要在设计软件中将整个规范重新排列设计。如果你还有其他关于ui设计的问题欢迎持续关注易夏岚或者与我进行交流~

3、求几个简单的网页设计作品

用Dreamweaver拖一下，很快的，就和word排版一样简答。

4、网页开发与设计的基本流程是什么?

网页制作流程

--------------------------------------------------------------------------------

主要内容介绍：

一、构成网页的基本要素
二、制作及美化的基本工具
三、网页制作的基本步骤
四、界面设计及交互研究探讨
五、实例制作演示

一.构成网页的基本要素

1.文字（标题、字号、字型...）
2 图形（网页上经常使用的图片格式：jpg、jpeg、Gif、Swf...）
3.交互功能（菜单按钮、链接、表单、数据交换...）
...

超文本标识语言（HTML）

HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。

在HTML中，所有的标记符都用尖括号括起来。
例如，<HTML>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。
如：<HTML>…<／HTML> .

HTML文档的基本结构

一个典型的HTML文本的基本结构形式如下：

<HTML>
<HEAD>
<TITLE>网站制作流程及界面交互设计研究探讨<／TITLE>
<／HEAD>
<BODY>文本内容：<／BODY>
<／HTML>

二.制作及美化的基本工具

1．超文本标识语言（HTML）
编辑工具：editplus、dreamweaver、记事本、FrontPage、

2．页面设计及美化工具
使用工具：所有可制作平面的软件
推荐使用Photoshop、FireWorks、Flash

三、网页制作的基本步骤

1、整体规划
需要完成的规划：网站主题、风格、页面元素、逻辑结构等

2、资料收集
收集内容：
a、跟主题相关的文字图片资料
b、一些优秀的页面风格
c、下载一些你喜欢的交互页面
d、开放的源代码

3、伪界面设计
根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素

4、代码转换及交互添加
把平面的伪界面转化为HTML代码，添加相应的交互功能Js、按纽、表单，以及一些与数据库相连接的代码。

5、测试网页兼容性
你可以不必严格按照W3C标准来制作页面，但是你必须保证让所有现有的浏览器能比较好的展示你的作品。

6、发布站点
测试完毕，符合你的要求，当然就可以开始发布你的网站了，发布的服务器可以是远程，也可以是本地，各个语言有各自的相应的服务器，比如ASP，就应该对应的是ASP服务器，上传可利用远程FTP工具。

四.界面设计及交互研究探讨

a、导航栏设计
导航要素设计的好坏决定着用户是否能方便使用网站导航要素要设计的直接而明确，并最大限度为用户的方便考虑。

b、网页布局
网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是你研究的重点。

PS:布局之前要紧密连接你网站的主题，要注意把握整体风格，你可以事先在纸上勾画草图，利用你习惯的元素来表现你想要的效果

网页布局--主要构成原则
醒目性：指用户把注意力集中到你诱导起浏览的部分和内容
可读性：指网站的内容让人容易读懂
明快性：指准确、快速转达网站的构成内容
造型性：维持整体外型上的稳定感和均衡性
创造性：有鲜明个性，创意是必不可少的
布局的构成原则上是:统一、协调、流动、强调、均衡

c、交互研究
我这边的交互主要集中在人机操作方面，研究用户浏览网站心理我个人认为一个成功的个人主页，单纯的美观是不够的，重要的是宜人性方面应该注重，喜欢Google、Douban就居于这。

五、实例制作演示(略）

1、页面制作整体规划

对象：一个打印商业宣传主页
格调:活泼，色彩，简单，大方

2、资料收集

a 、商标、网址、公司宣传册、了解企业文化，了解负责人的品位、他们的案例、跟负责人沟通掌握信息
b 、网上下载相似印刷行业的公司主页，了解现有行业的的一些设计特点
c、下载一些色彩比较华丽的图片，或跟印刷相关连的图片
d、如果你自己不会动态语言，下载一个满足你功能的新闻发布系统和留言源码

3、伪界面设计

a、在PS设计伪界面

b、切片工具对整体进行合理的分割
注意点：隐藏你要通过输入的文字，分割时要保持他的整体意义，尽量让每一部分是完整的，注意一些交互上操作。

c、导成WEB格式-直接导成HTML格式—步骤:
1、.点击文件存储为WEB文件格式
2、在界面里面调整理想参数
3、导出保存PS能自动生成一些HTML代码，但是他不是很标准，你必须在Dreamweave里面进行加工

d、在Dreamweave里面进行代码加工
具体步骤：
1、先修改标题
2、修改页面属性：背景颜色、背景图片.....
3、把页面调整为布局格式（这个可以按照自己习惯来设置，有标准的表格方式，也有布局类型）
4、把要添加文字的图片转化为背景形式
a、找到对应图片路径
b、拷贝路径后删除图片
c、转化为标准形式
d、把路径粘贴到背景属性上
e、回到布局界面
5、添加具体文字连接设置等操作
6、CSS设置
7、修整代码，发布预览按F12即可预览效果

4、测试网页兼容性

按照你设计时的对象,根据IE版本以及浏览器的不同，调整理想的效果，但是大部分出现问题的是JS\VB等代码，如果只是单纯静态图片，基本不会有很大的差别，推选大家尽量往W3C标准靠

5、发布站点

购买自己的空间域名，其实事先就应该购买的，利用FTP上传软件，把你的页面上传到你的网上服务器上推荐一款FTP上传工具LeadFTP

5、网站界面设计规范有哪些？

易用性规范

2.001 常用按钮要支持快捷方式。

2.002 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。

2.003 界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。

2.004 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

2.005 分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab

2.006 默认按钮要支持Enter和选操作，即按Enter后自动执行默认按钮对应操作。

2.007 可写控件检测到非法输入后应给出说明并能自动获得焦点。

2.008 Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。

2.009 复选框和选项框，按选择几率的高底而先后排列。

2.010 复选框和选项框要有默认选项，并支持Tab选择。

2.011 界面空间较小时使用下拉框而不用选项框。

2.012 选项数较少时使用选项框，相反使用下拉列表框。

2.013 根据用户不同采用相应的词语语气语调，如专用软件，可以出现很多专业词汇;用户为儿童：这可以语气亲切和蔼;老年用户则应该成熟稳重。

2.014 鼠标为不可点击状态时显示箭头，可点击状态显示手型;系统忙时显示沙漏形状
规范性规范

2.015 菜单前的图标能直观的代表要完成的操作。

2.016 工具栏要求可以根据用户的要求自己选择定制。

2.017 系统常用的工具栏设置默认放置位置。

2.018 工具箱要具有可增减性，由用户自己根据需求定制。

2.019 状态条要能显示用户切实需要的信息，常用的有、目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。

2.020 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。

2.021 状态条的高度以放置五号字为宜，滚动条的宽度比状态条的略窄。

2.022 菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。

2.023 工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。

帮助规范

2.024 帮助文档中的性能介绍与说明要与系统性能配套一致。

2.025 打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。

2.026 在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。

2.027 用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。

2.028 如果没有提供书面的帮助文档的话，最好有打印帮助的功能。

2.029 在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。

合理性规范

2.030 与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)。

2.031 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。

2.032 非法的输入或操作应有足够的提示说明。

2.033 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。

2.034 提示、警告、或错误说明应该清楚、明了、恰当。

2.035 提交失败后必须保存用户已经输入的内容，以便修改后再次提交。

美观与协调规范

2.036 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。

2.037 布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。

2.038 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。

2.039 按钮的大小要与界面的大小和空间要协调。

2.040 避免空旷的界面上放置很大的按钮。

2.041 放置完控件后界面不应有很大的空缺位置。

2.042 字体的大小要与界面的大小比例协调。

2.043 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。如：安全软件，根据工业标准，可以选取黄色，绿色体现环保，蓝色表现时尚、紫色表现浪漫等等，淡色可以使人舒适，暗色做背景使人不觉得累等。

2.044 如果使用其他颜色，主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。

2.045 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。

2.046 如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。

2.047 色盲、色弱用户，即使使用了特殊颜色表示重点或者特别的东西，也应该使用特殊指示符。

2.048 颜色方案也需要测试，常常由于显示器、显卡的问题，色彩表现每台机器都不一样，应该经过严格测试，不同机器进行颜色测试。

2.049 使用统一的语言描述，例如一个关闭功能按钮，可以描述为退出、返回、关闭，则应该统一规定。

菜单设计规范

2.050 菜单通常采用"常用--主要--次要--工具--帮助"的位置排列，符合流行的Windows风格。

2.051 常用的有"文件"、"编辑"，"查看"等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。

2.052 下拉菜单要根据菜单选项的含义进行分组，并按照一定的规则进行排列，用横线隔开。

2.053 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。

2.054 没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置;重要的放在开头，次要的放在后边。

2.055 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。

2.056 菜单深度一般要求最多控制在三层以内。

2.057 对与进行的操作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式——即只有需要的菜单才显示——最好。

2.058 菜单前的图标不宜太大，与字高保持一直最好。

2.059 主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。

2.060 主菜单数目不应太多，最好为单排布置。

独特性规范

2.061 安装界面上应有单位介绍或产品介绍，并有自己的图标。

2.062 主界面，最好是大多数界面上要有公司图标。

2.063 登录界面上要有本产品的标志，同时包含公司图标。

2.064 帮助菜单的"关于"中应有版权和产品信息。

2.065 公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

安全性规范

2.066 应当注意尽可能避免用户无意录入无效的数据。

2.067 采用相关控件限制用户输入值的种类。

2.068 当用户作出选择的可能性只有两个时,可以采用单选框。

2.069 当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。

2.070 当选项特别多时，可以采用列表框，下拉式列表框。

2.071 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。

2.072 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。

2.073 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。

2.074 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

2.075 对错误操作最好支持可逆性处理，如取消系列操作。

2.076 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。

2.077 对可能造成等待时间较长的操作应该提供取消功能。

2.078 特殊字符常有;;'"><,`'、"["{、\|｝]+=)-(_*&&^%$ #@!~,.。?/还有空格。

2. 079 与系统采用的保留字符冲突的要加以限制。

2.080 读入用户所输入的信息时，根据需要选择是否去掉前后空格。

2.081 有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。

输入项规范

2.082 必输项中不可为空，不可输入空格

2.083 必输项给出必输项标识(*)。

2.084 非必输项字段，Null插入数据库时不会出错，在数据库中设置默认值

2.085 日期显示格式一致;或提供固定格式的选择。

2.086 输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。

2.087 英文输入不区分大小写，不可输入汉字、数字及特殊字符

2.088 数值字段只能输入+ ，— ，0~9及功能键(BackSpace 光标) 。数值不能为负数。

2.089 单行文本框/多行文本框;长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效;对于多行文本框给出最大字符数标识

2.090 附件;可正常添加符合格式的附件; 附件可正常打开和保存，附件名较长时可正常操作;直接输入错误的附件地址，保存时应给出提示信息;附件打开和保存到本地时，文件名要显示原文件的文件名。

2.091 密码输入;在需求中定义密码是否允许为空或空格;密码是否允许特殊字符;是否区分大小写，密码的可输入长度;程序中应给出文字说明密码的可输入长度。

6、网页设计的规划书

一、实验目的和要求
综合应用Dreamweaver 8的基础知识创建和编辑网页。
二、实验内容及步骤
（1）在“文件”中新建一个网页，在“插入面板”的“布局”中，新建“左侧和嵌套的顶部框架”框架，并使框架网页符合下列要求。
① “文件”中的“框架集”另存为，保存框架集时，把框架集文件名改为index.htm。
② 在“框架浮动面板”中选中左框架，在“文件”中选择“保存框架页”，同时给左框架文件命名为left.htm，在框架浮动面板中选中左框架，在“修改”中将“页面属性”中设置背景图像为bg0035.jpg以及左框架的列宽度为320像素。
③在框架浮动面板中选中顶框架，在“文件”中选择“保存框架页”，顶框架文件名为top.htm，选中顶框架，“属性面板”中设置行高度为65像素。
④ 选中主框架，在“属性面板”中设置主框架页面的“滚动”方式为自动，[源文件]为本地站点中的网页文件main.htm。
⑤ 分别选中3个框架,在“属性面板”,“页面属性”中将三个框架网页的页面属性“左边界”、“顶部边界”、“边界宽度”、“边界高度”设为0，在“文件”中选择“保存全部”,将全部框架文件保存在本地站点中。

（2）用photo子文件夹中的图像创建网站图像册，其要求如下。
①新建一个网页,在“命令”中“创建网站相册”,在弹出的窗口中设置标题为“名画——人类的精神粮食”，省略副标题。
②在①弹出的窗口中继续设置页面图像的缩略图尺寸为100*100像素；每行列数我为6列；缩略图像文件格式为.jpg。
③在①弹出的窗口中继续设置“源图像文件”为本地站点根文件夹中的photo子文件夹，“目标文件夹”为本地站点根文件夹，其他参数默认。
④在“页面属性”中用img文件夹中的文件bg0029.jpg设置网页背景图像。
⑤插入“库”项目:在页面中插入层,点击“文件浮动面板”，“资源”中选择“库”,选中库项目return,按下”插入”按钮。
⑥在“文件”中选择“另存为”,保存网页文件,以index1.htm为名保存在本地站点的根文件夹中。

（3）新建一个网页,命名为 fg1.htm，并将此文件保存本地站点根文件夹中。打开文件fangao.dwt.
①将 “梵高的故事.doc”中的文字内容复制粘贴到网页文字可编辑区域的蓝色框中，并在模板左侧2个图像可编辑区域中，单击可编辑区域,在“插入”中选择“图像”,选择img文件夹中的tu1_3.jpg和tu2_3.jpg，模板顶部标题可编辑区域输入文字“梵高的故事”。
②在“属性面板”中选择“样式”，“附加样式表”,附加本地站点根文件夹中的外部层叠样式表文件format.css，选中网页标题,在“属性面板”样式中选择title作用于网页标题，同样方法将样式format作用于网页中的其他文字，样式filter作用于图像文件tu1_3.jpg和tu2_3.jpg。
③把光标放在要插入的位置,在“插入”中选择“命名锚记”,输入名称”aa”,在网页中最后一段的文字“镶板画”中间插入用于超链接的名为“aa”的站点。
④在页面左下角插入层, 在“文件浮动面板”的“资源”中选择“库”,选中库项目return,按下”插入”按钮。

（4）新建网页文件，并将此文件以fg2.htm为名保存在本地站点的文件夹中。
①在“属性面板”的“页面属性”中设置页面背景图像为bg0029.jpg，在“插入”中选中“表单”中的“表单”。在“属性面板”中设置表单的名称为：“调查”，动作为：答题学生本人的邮件地址，方式为：POST。
②输入文字“问卷调查”，选中文字在“属性面板“中设定”居中”,并设置文字格式。
③在“插入”中选择“表单”，“文本域”,在表单的第2行，插入文本域。设置标签文字为“姓名”,确定.选中文本域,在“属性面板”中设置“字符宽度”为20，“类型”为单行，“最多字符数”为20。
④在“插入”中选择“表单”，“单选按钮组”,在同一行中再插入单选按钮组，单选按钮组的名称为“性别”。将标签改为”男\女”,在属性面板中设置标识是“男”的单选按钮的“初始状态”为已勾选，“选定值”为“男”。标识为“女”的单选按钮的“初始状态”为未勾选，“选定值”为“女”。
⑤在“插入”中选择“表单”，“文本区域”,在表单的第3行中插入多行文本域,在弹出的窗口中设置标签文字为“谈谈你对本网站的观感：”。换行后，插入多行文本域，选中该文本域,在属性面板中设置其“字符宽度”为50，“类型”为多行，“行数”为10，“换行”为默认，“初始值”为“请发表您的浏览观感”。
⑥在“插入”中选择“表单”，“按钮”,在表单的第5行居中插入2个按钮，在“属性面板”中并分别将它们的“标签”和“动作”设为：递交表单和重设表单。
⑦在页面左下角插入层, 在“文件浮动面板”中选择“资源”，“库”,选中库项目return,按下”插入”按钮。

（5）打开网页首页文件index.htm。
①点击顶部框架,在“插入”中选择“媒体”中的flash,在顶部框架中插入Flash文件fgl.swf。
②在“插入面板”的“布局”中选择“绘制布局表格”,在左框架的上半部分画布局表格,在其中画5个布局单元格分别选中,在“属性面板”中设置大小为93*63像素，在“插入”中选择“鼠标经过图像”,在其中分别插入“鼠标经过图像”，在弹出的窗口中设置其“原始图像”文件分别为tu1_2.gif、tu2_2.gif、tu3_2.gif、tu4_2.gif、tu5_2.gif，“鼠标经过图像”文件分别为tu1_1.gif、tu2_1.gif、tu3_1.gif、tu4_1.gif、tu5_1.gif。
③在左框架的下半部分按样张画三个层,属性设置为210*150大小，在这个3层中插入3幅图像分别是tu1_3.gif、tu2_3.gif、tu3_3.gif,选中3个层,在“修改”中选择“排列顺序”中设置3个层重叠,分别将3个层选中,在右键菜单中选择添加到时间轴,在3幅图像的动画条中插入适当的关键帧,在“属性”中更改关键帧处的可见性,制作时间轴控制3幅图像轮流显示的时间轴动画，每幅图像显示的时间为1s,并钩选自动播放和循环
④在“文件浮动面板”的“资源”中选择“库”中,选中库项目return，点击面板右下角的”编辑”按钮,选中它,在“属性面板”中设置其与首页index.htm建立链接，并使首页index.htm在复框架中显示,目标_parent，然后“修改”中选择“库”的“更新页面站点”。
⑤在首页文件index.htm被浏览时播放声音文件Applause.wav。
⑥将文件保存
.

（6）按下列要求为左框架中的5个图像按钮添加行为和超链接。
①选中图像，在“行为面板”中选择行为“Ondblclick”.然后“添加行为”，“控制shockwave或flash”,操作:停止，在“行为面板”中选择行为Onclick，“添加行为”“控制shockwave或flash”,操作:播放,可达到以下效果：双击该图像，停止播放顶部框架中的Flash文件fg1.swf，单击该图像，开始播放顶部框架中的Flash文件fg1.swf。
②选中第2个鼠标经过图像在“属性面板”添加超链接,链接至index1.htm,选择“目标”为“mainframe”可达到以下效果:单击此图像是链接网站相册文件index1.htm，并使该文件在主框架中显示。
③选中图片在“属性面板”中设置链接为fg1.htm#aa,目标为_mainframe,即可单击此图像时链接到文件fg1.htm的锚点“aa”上，并使该文件在主框架中显示。
④给网页左框架第4个鼠标经过图像添加超链接，选中图片,在“属性面板”中设置链接至fg2.htm, 目标为_mainframe,即可单击此图像时链接到文件fg2.htm上，并使该文件在主框架中显示。
⑤选中图像,在行为面板中选择行为“Ondblclick”, “添加行为”“控制”shockwave或flash,操作：停止；选择行为“Onclick”, “添加行为”“控制”shockwave或flash,操作：播放。使双击该图像，停止播放左框架底部的时间轴动画，单击该图像，开始播放左框架底部的时间轴动画。

三、实验中遇到的问题及解决方法
1．起初插入的flash动画始终无法显示，插入的main.htm中有个别图象无法显示，通过改变绝对路径,完成显示效果.
2．做超链接时，链接的无效果，通过改变链接途径达到链接效果。
3.在做最后一步的六个图片的超链接时，添加行为和控制shockwave或flash，多次操作和调试都无法成功，后来经过请教同学，知道是在“行为面板”中选择行为“Ondblclick”.然后“添加行为”，“控制shockwave或flash”,操作:停止，再在“行为面板”中选择行为Onclick，“添加行为”“控制shockwave或flash”,操作:播放,即可达到要求的效果。
4．在做3副图象轮流显示的时间轴动画时，开始不会做，后来知道是在右键菜单中选择“添加到时间轴”,在3幅图像的动画条中插入适当的关键帧,在“属性”中更改关键帧处的可见性,制作时间轴控制3幅图像轮流显示的时间轴动画，每幅图像显示的时间为1s,并钩选自动播放和循环。

7、用word设计网页

用WORD先做出网页的样式，不同子页要保存为不同文档，保存时用文件菜单中的“另存为”命令保存，保存前要选择“保存类型”为“单个网页文件”然后按保存。即做好了各个子网页，用WORD打开刚做好的网页文件，用WORD的“超链接”功能设置好各页面之间的链接再次保存就好了（注：链接对象为网页格式文档而非WORD文档）。直接开主页就可以浏览你做好的网页的

8、短文档的页面布局通常采用什么方法规划页面

方法/步骤
打开一个新的word文档

点击”页面布局“下的”页边距“

点击”自定义页边距“

页边距

纸张设计

板式布局

文档网格设计

分栏设计

导航:首页 > 万维百科 > 网站界面设计文档

网站界面设计文档

与网站界面设计文档相关的知识