网络编程
位置:首页>> 网络编程>> 网页设计>> 网站制作流程及界面交互设计(3)

网站制作流程及界面交互设计(3)

作者:onling 来源:OnLing.net 发布时间:2007-10-26 12:00:00 

标签:网站,设计,流程,html

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

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

0
投稿

猜你喜欢

  • 前后端分离的开发模式,原本觉得没什么稀奇的玩艺,在最近参与的一个大型项目中,让我有了更深的理解。前后端分离的开发模式:系统分析阶段,系分和前
  • 提叻一个代码段,要人帮助解释一下。代码如下:declare type t_indexby is ta
  • asp抓取网页。偶要实现实实更新天气预报。利用了XMLHTTP组件,抓取网页的指定部分。很多小偷查询都是使用这个方法来实现的。需要分件htm
  • 我在初学时查阅过大量相关资料,发现其中提供的很多方法实际操作起来并不是那么回事。对于简单的应用,这些资料也许是有帮助的,但仅限于此,因为它们
  • 在使用Ajax过程中,有时候总会遇到一些难题,浏览器兼容、编码、IE下的特殊处理等等,偶尔会搞的人头昏脑胀哭笑不得,这里列一些小贴士,或许有
  • 前几天有个人退群了。起因很简单,他问了一个问题,没人回答,于是说要退群,后来我看到了,给了个链接,说这个问题已经说过好多遍了,于是他就退了。
  • opendir – 打开一个目录句柄,可用于之后的 closedir(),readdir() 和 rewinddir()
  • 先看看:css中class与id的区别及应用表单的name与id其实是同一个意思,都是为了标记对象名称。它们所不同的是:name是Netsc
  • kelon 问:格式如下:s="地,在要,大,奇功,不知,但是,不示"我想把它split分出來,变成数组來循环,但是不知
  • 1、Dreamweaver中的复制我在网页中复制的文字,粘贴到Dreamweaver中时,它总是带有原来网页的格式,请问如何只复制其中的文本
  • SQL触发器实例1 定义: 何为触发器?在SQL Server里面也就是对某一个表的一定的操作,触发某种条件,从而执行的一段程序。触发器是一
  • 有两张表a表id val 1 a 2 b 3 c 4 d 5 e b表 a_id val 1 null 2 null 3 null 4 nu
  • ASP中判断字符串中是否包含字母和数字的两个函数function   isnaw(str) for 
  • 下面这些命令可以在命令行下用isql执行,isql -E -Q "命令",isql.exe
  • 你是一位交互设计师吗?告诉我,你具体做些什么?我是做网站设计的?听起来不够专业。我是做网页设计的,听起来……你们是做界面的……恩,好吧,我勉
  • GetRepeatTimes(TheChar,TheString) 得到一个字符串在另一个字符串当中出现几次的函数(新)如:response
  • 好久没有写ASP代码了,今天在做一个简单的留言本时,出现了一下错误: Microsoft Office Access Database En
  • 本文详细解说了MySQL Order By Rand()效率优化的方案,并给出了优化的思路过程,是篇不可多得的MySQL Order By
  • 前端代码要做到简洁易读、高效,还要考虑后端嵌套的方便性。前段时间做了一个导航,把整个制作过程重现,希望对大家有帮助。看到这样的导航,你会怎么
  • 1,SELECT 语句 在SQL的世界里,最最基础的操作就是SELECT 语句了。在数据库工具下直接采用SQL
手机版 网络编程 asp之家 www.aspxhome.com