网站制作流程及界面交互设计研究探讨
作者的blog: http://www.onling.net/blog/
很多朋友希望，我能把我做网站的一些流程及经验跟大家分享一下，最近刚好做一次内部培训，所以稍微整理了一下，这些只是针对网页初学者，具有一定平面设计水平的人，对HTML不是很了解，他们可能只是想做一个个人主页而已，所以整体还是趋向于传统的表格布局，这里有很多都是一些我个人刚开学时自己摸索的经验，所以可能不是很专业，但是绝对是比较容易入门的，我一直有这种思想，你只有塌进来了，你才可能往更高的地方爬，我想当初如果没有这段的学习，现在我也不会明白什么W3C，什么CSS，什么ASP，什么XML，一切都是有一个起点，希望能对大家有点小帮助。整体的PPT比较大，没有放这，我把主要内容用文字大致整理了一份，如果需要PPT，可以跟我联系。有不合理的地方，希望大家能指出，可以共同探讨一下。
主要内容介绍：
一、构成网页的基本要素
二、制作及美化的基本工具
三、网页制作的基本步骤
四、界面设计及交互研究探讨
五、实例制作演示
一.构成网页的基本要素
1.文字（标题、字号、字型...）
2 图形（网页上经常使用的图片格式：jpg、jpeg、Gif、Swf...）
3.交互功能（菜单按钮、链接、表单、数据交换...）
...
超文本标识语言（HTML）
HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。
在HTML中，所有的标记符都用尖括号括起来。
例如，<HTML>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。
如：<HTML>…<／HTML> .
HTML文档的基本结构
一个典型的HTML文本的基本结构形式如下：
<HTML>
<HEAD>
<TITLE>OnLing网站制作流程及界面交互设计研究探讨<／TITLE>
<／HEAD>
<BODY>文本内容：OnLing.net<／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工具。
更多内容请看网站服务器的选型、网站解决方案、网站建设专题，或进入讨论组讨论。
【深 度 阅 读】 相 关 文 章
相关专题
- CSS 标签属性 (394次浏览)
- Web的未来：XHTML2.0(1) (234次浏览)
- CSS样式表详解 (108次浏览)
- Adobe CS3网站首页设计—第1讲 制作首页的主 (106次浏览)
- CSS2.0手册(苏沈小雨版) (60次浏览)
- 木子李教程之CSS全攻略 (44次浏览)
- Adobe CS3网站首页设计—第2讲制作首页的内容 (35次浏览)
- 网站设计的思考-定位你的网站主题和名称 (27次浏览)
- 一些左右你网页水平的教程 (26次浏览)
- 防止他人非法链接本站图片 (25次浏览)
