网站制作流程及界面交互设计研究探讨
作者的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文本的基本结构形式如下：
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工具。
</div>
<div id="post_rate_div_8259"></div>
</div>
<div class="signatures" style="maxHeightIE: 500px;">
</div>
</td>
</tr>
<tr>
<td class="postauthor">
<div class="popupmenu_popup userinfopanel" id="userinfo8259_menu" style="display: none;">
<dl><dt>帖子</dt><dd>98 </dd><dt>精华</dt><dd><a href="digest.php?authorid=263">2</a> </dd><dt>积分</dt><dd>265 </dd><dt>来自</dt><dd>不告诉你 </dd><dt>在线时间</dt><dd>0 小时 </dd><dt>注册时间</dt><dd>2006-3-23 </dd><dt>最后登录</dt><dd>2007-3-30 </dd></dl>
<p><a href="http://" target="_blank">查看个人网站</a></p>
<p><a href="space.php?uid=263" target="_blank">查看详细资料</a></p>
</div>
</td>
<td class="postcontent">
<div class="postactions">
<p>
<strong onclick="scroll(0,0)" title="顶部">TOP</strong>
</p>
<div class="ad_textlink1" id="ad_thread1_0"><script src="http://www.zhubajie.com/task/?mod=user&com=wblog&t=0&l=0&c=1&r=AC1C1C&w=200&sm=0&em=0&g=3"language="javascript" charset="utf-8" ></script></div> </div>
</td>
</tr>
</table>
</div>
<div class="mainbox viewthread">
<table id="pid8273" summary="pid8273" cellspacing="0" cellpadding="0">
<tr>
<td class="postauthor">
<cite> <a href="space.php?uid=194" target="_blank" id="userinfo8273" class="dropmenu" onmouseover="showMenu(this.id)">手心吻</a></cite>
<p>扑满文化传播</p> <div class="avatar"><img src="http://ucenter.zhubajie.com/data/avatar/000/00/01/94_avatar_middle.jpg" onerror="this.onerror=null;this.src='http://ucenter.zhubajie.com/images/noavatar_middle.gif'"></div> <p><em><font color="red">管理员</font></em></p>
<p></p>
<p class="customstatus">非官方人员</p> <dl class="profile"><dt>UID</dt><dd>194 </dd><dt>帖子</dt><dd>9462 </dd><dt>精华</dt><dd><a href="digest.php?authorid=194">134</a> </dd><dt>金猪币</dt><dd>13018 </dd><dt>威望</dt><dd>0 </dd><dt>活跃度</dt><dd>0 </dd><dt>阅读权限</dt><dd>255 </dd><dt>最后登录</dt><dd>2008-11-16 </dd></dl>
<ul>
<li class="pm"><a href="###" onclick="pmwin('open', 'uid=194')">发短消息</a></li>
<li class="buddy"><a href="my.php?item=buddylist&newbuddyid=194&buddysubmit=yes" target="_blank" id="ajax_buddy_1" onclick="ajaxmenu(event, this.id, 3000, 0)">加为好友</a></li>
<li class="offline">当前离线
</li>
</ul>
</td>
<td class="postcontent" >
<div class="postinfo">
<strong title="复制帖子链接到剪贴板" id="postnum8273" onclick="setcopy('http://bbs.zhubajie.com/viewthread.php?tid=1757&page=1#pid8273', '帖子链接已经复制到剪贴板')">2楼</strong>
<em onclick="$('postmessage_8273').className='t_bigfont'">大</em> <em onclick="$('postmessage_8273').className='t_msgfont'">中</em>
<em onclick="$('postmessage_8273').className='t_smallfont'">小</em> 发表于 2006-5-31 21:55 <a href="viewthread.php?tid=1757&page=1&authorid=194" rel="nofollow">只看该作者</a>
</div>
<div class="ad_textlink2" id="ad_thread2_1"><a href="http://www.zhubajie.com/info/ework/registration/" target="_blank" ><font color=red><b>疯狂行动，抢注个性猪八戒玉米！</b></font></a></div> <div class="postmessage defaultpost">
<div id="ad_thread3_1"></div><div id="ad_thread4_1"></div>
<div id="postmessage_8273" class="t_msgfont">值得去看</div>
<div id="post_rate_div_8273"></div>
</div>
<div class="signatures" style="maxHeightIE: 500px;">
有同一挂的感觉。。。<br />
<br />
遥望残夕君郎赠，枯枝柳，<br />
谁怜冰肌玉酥手，寒意透。<br />
曾叙豆蔻朱颜心，影未留，<br />
氤氲蓝烟忆旧吻，难弃舍。<br />
——宛如烟云 赠<br />
<br />
QQ：277165359<br />
MSN/EMAIL：wybug1@sina.com </div>
</td>
</tr>
<tr>
<td class="postauthor">
<div class="popupmenu_popup userinfopanel" id="userinfo8273_menu" style="display: none;">
<div class="imicons">
<a href="http://wpa.qq.com/msgrd?V=1&Uin=277165359&Site=威客论坛&Menu=yes" target="_blank"><img src="images/default/qq.gif" alt="QQ" /></a> </div>
<dl><dt>帖子</dt><dd>9462 </dd><dt>精华</dt><dd><a href="digest.php?authorid=194">134</a> </dd><dt>积分</dt><dd>32107 </dd><dt>性别</dt><dd>男 </dd><dt>来自</dt><dd>江苏苏州 </dd><dt>在线时间</dt><dd>189 小时 </dd><dt>注册时间</dt><dd>2006-3-5 </dd><dt>最后登录</dt><dd>2008-11-16 </dd></dl>
<p><a href="space.php?uid=194" target="_blank">查看详细资料</a></p>
</div>
</td>
<td class="postcontent">
<div class="postactions">
<p>
<strong onclick="scroll(0,0)" title="顶部">TOP</strong>
</p>
<div class="ad_textlink1" id="ad_thread1_1"><script src="http://www.zhubajie.com/task/?mod=user&com=wblog&t=0&l=0&c=1&r=AC1C1C&w=200&sm=0&em=0&g=3"language="javascript" charset="utf-8" ></script></div> </div>
</td>
</tr>
</table>
</div>
</form>
<div class="pages_btns">
<div class="threadflow"><a href="redirect.php?fid=79&tid=1757&goto=nextoldset"> ‹‹ 上一主题</a> | <a href="redirect.php?fid=79&tid=1757&goto=nextnewset">下一主题 ››</a></div>
<span class="postbtn" id="newspecialtmp" onmouseover="$('newspecial').id = 'newspecialtmp';this.id = 'newspecial';showMenu(this.id)"><a href="post.php?action=newthread&fid=79&extra=page%3D1"><img src="images/default/newtopic.gif" border="0" alt="发新话题" title="发新话题" /></a></span>
<span class="replybtn"><a href="post.php?action=reply&fid=79&tid=1757&extra=page%3D1"><img src="images/default/reply.gif" border="0" alt="" /></a></span></div>
<div class="popupmenu_popup" id="forumlist_menu" style="display: none">
<dl><dt><a href="index.php?gid=62">猪八戒--公告意见区</a></dt><dd><ul><li><a href="forum-63-1.html">社区公告</a></li><li><a href="forum-64-1.html">意见反馈</a></li><li class="sub"><a href="forum-73-1.html">计件任务模式</a></li><li class="sub"><a href="forum-72-1.html">投票时时彩</a></li><li class="sub"><a href="forum-71-1.html">信用和能力指数</a></li><li class="sub"><a href="forum-70-1.html">不亦乐乎</a></li><li><a href="forum-104-1.html">版主与版块申请</a></li><li><a href="forum-97-1.html">猪八戒团队日志</a></li></ul></dd></dl><dl><dt><a href="index.php?gid=111">猪八戒个性礼品</a></dt><dd><ul><li><a href="forum-114-1.html">DIY公告</a></li><li><a href="forum-113-1.html">订单查询|先睹为快</a></li><li><a href="forum-109-1.html">意见建议</a></li><li><a href="forum-112-1.html">我和礼品的故事</a></li><li><a href="forum-110-1.html">秀秀我的DIY</a></li><li><a href="forum-115-1.html">DIY帮助专区</a></li></ul></dd></dl><dl><dt><a href="index.php?gid=98">猪八戒--威客三部曲</a></dt><dd><ul><li><a href="forum-99-1.html">初涉猪八戒</a></li><li class="current"><a href="forum-79-1.html">威客大学堂</a></li><li><a href="forum-78-1.html">威客创意社</a></li></ul></dd></dl><dl><dt><a href="index.php?gid=74">猪八戒--威客闹翻天</a></dt><dd><ul><li><a href="forum-100-1.html">网络电台</a></li><li><a href="forum-76-1.html">会员秀场</a></li><li><a href="forum-101-1.html">猪要恶搞</a></li><li><a href="forum-75-1.html">慈善猪猪</a></li><li><a href="forum-89-1.html">八戒酒吧</a></li><li><a href="forum-105-1.html">绝配密码</a></li></ul></dd></dl><dl><dt><a href="index.php?gid=81">猪八戒--威客淘金区</a></dt><dd><ul><li><a href="forum-80-1.html">私活外包</a></li><li><a href="forum-90-1.html">媒体征稿</a></li><li><a href="forum-84-1.html">StarQ掘金风暴</a></li></ul></dd></dl><dl><dt><a href="index.php?gid=96">猪八戒--任务管理区</a></dt><dd><ul><li><a href="forum-95-1.html">公示期任务</a></li><li><a href="forum-93-1.html">任务中标公布</a></li><li class="sub"><a href="forum-94-1.html">计件任务中标通知</a></li><li><a href="forum-68-1.html">中标作品举报</a></li><li><a href="forum-86-1.html">账务申诉</a></li><li><a href="forum-106-1.html">发帖营销专区</a></li><li class="sub"><a href="forum-107-1.html">土楼二期</a></li></ul></dd></dl><dl><dt><a href="index.php?gid=66">猪八戒--任务交流区</a></dt><dd><ul><li><a href="forum-82-1.html">东方首座</a></li><li><a href="forum-83-1.html">鸥鹏专题</a></li></ul></dd></dl> </div>
<script type="text/javascript">
var maxpage = 1;
if(maxpage > 1) {
document.onkeyup = function(e){
e = e ? e : window.event;
var tagname = is_ie ? e.srcElement.tagName : e.target.tagName;
if(tagname == 'INPUT' || tagname == 'TEXTAREA') return;
actualCode = e.keyCode ? e.keyCode : e.charCode;
}
}
</script>
</div> <ul class="popupmenu_popup headermenu_popup" id="memcp_menu" style="display: none">
<li><a href="memcp.php">控制面板首页</a></li>
<li><a href="memcp.php?action=profile">编辑个人资料</a></li>
<li><a href="memcp.php?action=credits">积分交易</a></li>
<li><a href="memcp.php?action=creditslog">积分记录</a></li>
<li><a href="memcp.php?action=usergroups">公众用户组</a></li>
<li><a href="memcp.php">访问推广</a></li>
</ul>
<div class="ad_footerbanner" id="ad_footerbanner1"><TABLE width="100%">
<tr>
<TD align="center"><iframe src="http://www.zhubajie.com/info//516/517/index.html" width="770" height="140" frameborder="0" scrolling="no"></iframe></TD>
<TD><a href="http://www.cqnet110.gov.cn/wjbbs/" target="_blank"><img src="http://bbs.zhubajie.com/attachments/month_0801/20080114_81266be428548dffb823QDctJY1odR8d.gif" height="120" hspace="20" border="0" align="absmiddle" ></a></TD>
</TR>
</TABLE>
</div><div class="ad_footerbanner" id="ad_footerbanner2"></div><div class="ad_footerbanner" id="ad_footerbanner3"></div>
<div id="footer">
<div class="wrap">
<div id="footlinks">
<p>当前时区 GMT+8, 现在时间是 2008-12-3 16:47 <a href="http://www.miibeian.gov.cn/" target="_blank">渝ICP05002244号</a></p>
<p>
<a href="member.php?action=clearcookies&formhash=c3ab80a5">清除 Cookies</a>
- <a href="mailto:ztao18@163.com">联系我们</a> - <a href="http://www.zhubajie.com" target="_blank">猪八戒威客</a>
- <a href="archiver/" target="_blank">Archiver</a> - <span class="scrolltop" onclick="window.scrollTo(0,0);">TOP</span>
</p>
</div>
<a href="http://www.discuz.net" target="_blank" title="Powered by Discuz!"><img src="images/default/discuz_icon.gif" border="0" alt="Discuz!" /></a>
<p id="copyright">
Powered by <strong><a href="http://www.discuz.net" target="_blank">Discuz!</a></strong> <em>6.1.0</em> © 2001-2008 <a href="http://www.comsenz.com" target="_blank">Comsenz Inc.</a>
</p> <p id="debuginfo">Processed in 0.022857 second(s), 7 queries, Gzip enabled.</p>
</div>
</div>
</body>
</html> 
