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

来源：百度文库 编辑：神马文学网 时间：2024/05/23 13:05:32
很多朋友希望，我能把我做网站的一些流程及经验跟大家分享一下，最近刚好做一次内部培训，所以稍微整理了一下，这些只是针对网页初学者，具有一定平面设计水平的人，对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><br><／HEAD><br><BODY>文本内容：OnLing.net<／BODY><br><／HTML><br>二.制作及美化的基本工具<br>1．超文本标识语言（HTML）<br>编辑工具：editplus、dreamweaver、记事本、FrontPage、<br>2．页面设计及美化工具<br>使用工具：所有可制作平面的软件<br>推荐使用Photoshop、FireWorks、Flash<br>三、网页制作的基本步骤<br>1、整体规划<br>需要完成的规划：网站主题、风格、页面元素、逻辑结构等<br>2、资料收集<br>收集内容：<br>a、跟主题相关的文字图片资料<br>b、一些优秀的页面风格<br>c、下载一些你喜欢的交互页面<br>d、开放的源代码<br>3、伪界面设计<br>根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素<br>4、代码转换及交互添加<br>把平面的伪界面转化为HTML代码，添加相应的交互功能Js、按纽、表单，以及一些与数据库相连接的代码。<br>5、测试网页兼容性<br>你可以不必严格按照W3C标准来制作页面，但是你必须保证让所有现有的浏览器能比较好的展示你的作品。<br>6、发布站点<br>测试完毕，符合你的要求，当然就可以开始发布你的网站了，发布的服务器可以是远程，也可以是本地，各个语言有各自的相应的服务器，比如ASP，就应该对应的是ASP服务器，上传可利用远程FTP工具。<br>四.界面设计及交互研究探讨<br>a、导航栏设计<br>导航要素设计的好坏决定着用户是否能方便使用网站导航要素要设计的直接而明确，并最大限度为用户的方便考虑。<br>b、网页布局<br>网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是你研究的重点。<br>PS:布局之前要紧密连接你网站的主题，要注意把握整体风格，你可以事先在纸上勾画草图，利用你习惯的元素来表现你想要的效果<br>网页布局--主要构成原则<br>醒目性：指用户把注意力集中到你诱导起浏览的部分和内容<br>可读性：指网站的内容让人容易读懂<br>明快性：指准确、快速转达网站的构成内容<br>造型性：维持整体外型上的稳定感和均衡性<br>创造性：有鲜明个性，创意是必不可少的<br>布局的构成原则上是:统一、协调、流动、强调、均衡<br>c、交互研究<br>我这边的交互主要集中在人机操作方面，研究用户浏览网站心理我个人认为一个成功的个人主页，单纯的美观是不够的，重要的是宜人性方面应该注重，喜欢Google、Douban就居于这。<br>五、实例制作演示(略）<br>1、页面制作整体规划<br>对象：一个打印商业宣传主页<br>格调:活泼，色彩，简单，大方<br>2、资料收集<br>a 、商标、网址、公司宣传册、了解企业文化，了解负责人的品位、他们的案例、跟负责人沟通掌握信息<br>b 、网上下载相似印刷行业的公司主页，了解现有行业的的一些设计特点<br>c、下载一些色彩比较华丽的图片，或跟印刷相关连的图片<br>d、如果你自己不会动态语言，下载一个满足你功能的新闻发布系统和留言源码<br>3、伪界面设计<br>a、在PS设计伪界面<br>b、切片工具对整体进行合理的分割<br>注意点：隐藏你要通过输入的文字，分割时要保持他的整体意义，尽量让每一部分是完整的，注意一些交互上操作。<br>c、导成WEB格式-直接导成HTML格式—步骤:<br>1、.点击文件存储为WEB文件格式<br>2、在界面里面调整理想参数<br>3、导出保存PS能自动生成一些HTML代码，但是他不是很标准，你必须在<br>Dreamweave里面进行加工<br>d、在Dreamweave里面进行代码加工<br>具体步骤：<br>1、先修改标题<br>2、修改页面属性：背景颜色、背景图片.....<br>3、把页面调整为布局格式（这个可以按照自己习惯来设置，有标准的表格方式，也有布局类型）<br>4、把要添加文字的图片转化为背景形式<br>a、找到对应图片路径<br>b、拷贝路径后删除图片<br>c、转化为标准形式<br>d、把路径粘贴到背景属性上<br>e、回到布局界面<br>5、添加具体文字连接设置等操作<br>6、CSS设置<br>7、修整代码，发布预览按F12即可预览效果<br>4、测试网页兼容性<br>按照你设计时的对象,根据IE版本以及浏览器的不同，调整理想的效果，但是大部分出现问题的是JS\VB等代码，如果只是单纯静态图片，基本不会有很大的差别，推选大家尽量往W3C标准靠<br>5、发布站点<br>购买自己的空间域名，其实事先就应该购买的，利用FTP上传软件，把你的页面上传到你的网上服务器上推荐一款FTP上传工具LeadFTP<br>总结：<br>1、在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等。静态网页仅仅用来被动地发布信息，而不具有任何交互功能的网页，它是Web网页的重要组成部分，一个好的网站：首先是内容丰富，其次就是网页设计<br>2、不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。<br>3、每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片<br>4、不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性。以树立自己的风格。<br>5、底色或墙纸必须与文字对比强烈，以易于阅读。<br>6、熟悉以后开始尝试用CSS，自己书写代码，按照W3C标准来写符合要求的网页。</div> <div class="list-group"> <a href="/article/97180" class="list-group-item">网站制作流程及界面交互设计</a> <a href="/article/63614" class="list-group-item">网站制作流程及界面交互设计研究探讨 - OnLing‘s BLOG</a> <a href="/article/81327" class="list-group-item">最新的web界面交互设计</a> <a href="/article/93" class="list-group-item">web交互界面易用性设计和验收的指导性原则</a> <a href="/article/163114" class="list-group-item">关于界面和交互设计的思考1</a> <a href="/article/1852750" class="list-group-item">网站制作流程</a> <a href="/article/1923311" class="list-group-item">网站制作流程</a> <a href="/article/2473392" class="list-group-item">网站用户体验设计-交互体验</a> <a href="/article/72094" class="list-group-item">界面设计、交互设计及程序开发(一)</a> <a href="/article/72095" class="list-group-item">界面设计、交互设计及程序开发(二)</a> <a href="/article/150142" class="list-group-item">Interface是界面or介面？ - 麦兜的交互设计| Maison Interacti...</a> <a href="/article/106122" class="list-group-item">交互设计</a> <a href="/article/826484" class="list-group-item">交互设计</a> <a href="/article/1210527" class="list-group-item">制作自己的网页及制作流程</a> <a href="/article/166628" class="list-group-item">交互设计的几大要点及结构图</a> <a href="/article/166630" class="list-group-item">交互设计的几大要点及结构图-二</a> <a href="/article/166631" class="list-group-item">交互设计的几大要点及结构图-三</a> <a href="/article/166707" class="list-group-item">交互设计的几大要点及结构图</a> <a href="/article/166708" class="list-group-item">交互设计的几大要点及结构图-二</a> <a href="/article/1724834" class="list-group-item">交互设计的几大要点及结构图-搜狐IT</a> <a href="/article/1211526" class="list-group-item">谁为用户买单(1)——电子商务网站的交互设计 | 交互设计禅意花园-Alitedesign...</a> <a href="/article/121139" class="list-group-item">网站设计与开发流程管理</a> <a href="/article/1906034" class="list-group-item">网站设计与开发流程管理</a> <a href="/article/2534090" class="list-group-item">浅谈公司形象网站的设计流程</a> </div> </div> </div> </div> </div> </div> <footer id="footer" class="footer hidden-print"> <div class="container"> <div class="panel panel-default"> <div class="panel-heading">相关问题</div> <div class="panel-body"> <a class="btn btn-default" href="/article/1586322" title="古老的八字配婚(留此存照）">古老的八字配婚(留此存照）</a> <a class="btn btn-default" href="/article/1586323" title="汉字当美（快人快语）">汉字当美（快人快语）</a> <a class="btn btn-default" href="/article/1586324" title="各种拔丝的做法">各种拔丝的做法</a> <a class="btn btn-default" href="/article/1586325" title="excel表格的35招必学秘技">excel表格的35招必学秘技</a> <a class="btn btn-default" href="/article/1586326" title="大学校长应成为荣誉服务性职位">大学校长应成为荣誉服务性职位</a> <a class="btn btn-default" href="/article/1586327" title="弟子规">弟子规</a> <a class="btn btn-default" href="/article/1586328" title="（新人教版）高中语文必修1第二单元检测题（文言文部分）上">（新人教版）高中语文必修1第二单元检测题（文言文部分）上</a> <a class="btn btn-default" href="/article/1586329" title="普希金诗歌精选">普希金诗歌精选</a> <a class="btn btn-default" href="/article/1586330" title="必学洁面法！正确洗脸肌肤才会好">必学洁面法！正确洗脸肌肤才会好</a> <a class="btn btn-default" href="/article/1586331" title="感动：一对夫妇的离婚“账单”！">感动：一对夫妇的离婚“账单”！</a> <a class="btn btn-default" href="/article/1586332" title="益母草为女性而生">益母草为女性而生</a> <a class="btn btn-default" href="/article/1586333" title="高清晰动物图片">高清晰动物图片</a> <a class="btn btn-default" href="/article/1586334" title="新婚洞房的风水与布局装饰">新婚洞房的风水与布局装饰</a> <a class="btn btn-default" href="/article/1586335" title="【最新精华】免费医学书籍大汇编(不收藏是你的损失)_艳阳天http://hi.baidu....">【最新精华】免费医学书籍大汇编(不收藏是你的损失)_艳阳天http://hi.baidu....</a> <a class="btn btn-default" href="/article/1586336" title="季度奖等非全年一次性奖金个税政策应明确">季度奖等非全年一次性奖金个税政策应明确</a> <a class="btn btn-default" href="/article/1586337" title="既温馨舒适又聚拢人气 七招打造家居客厅最佳风水 -家居快讯-苏州搜房装修家居网">既温馨舒适又聚拢人气 七招打造家居客厅最佳风水 -家居快讯-苏州搜房装修家居网</a> <a class="btn btn-default" href="/article/1586338" title="[中医诊断学-远程教育网]">[中医诊断学-远程教育网]</a> <a class="btn btn-default" href="/article/1586339" title="英语记忆的基本原理与方法">英语记忆的基本原理与方法</a> <a class="btn btn-default" href="/article/1586340" title="这样做皮肤真的会彻底改变哦~">这样做皮肤真的会彻底改变哦~</a> <a class="btn btn-default" href="/article/1586341" title="西方间谍盗取中国3万口油井坐标 或成导弹目标">西方间谍盗取中国3万口油井坐标 或成导弹目标</a> <a class="btn btn-default" href="/article/1586342" title="我的老师——民间的经方医学研究者张丰">我的老师——民间的经方医学研究者张丰</a> <a class="btn btn-default" href="/article/1586343" title="4大热门女星 透露私家丰胸法">4大热门女星 透露私家丰胸法</a> <a class="btn btn-default" href="/article/1586344" title="强!中国的隐形公路,世界上最牛的公路">强!中国的隐形公路,世界上最牛的公路</a> <a class="btn btn-default" href="/article/1586345" title="在泰国看动物表演">在泰国看动物表演</a> <a class="btn btn-default" href="/article/1586346" title="粉面樱唇俏佳人">粉面樱唇俏佳人</a> <a class="btn btn-default" href="/article/1586347" title="猪蹄的十三种吃法0">猪蹄的十三种吃法0</a> <a class="btn btn-default" href="/article/1586348" title="客厅挂画不可不知风水禁忌 用开运图体现自己的修养 -家居快讯-深圳搜房装修家居网">客厅挂画不可不知风水禁忌 用开运图体现自己的修养 -家居快讯-深圳搜房装修家居网</a> <a class="btn btn-default" href="/article/1586349" title="二十道家常菜">二十道家常菜</a> <a class="btn btn-default" href="/article/1586350" title="风湿偏方大全1">风湿偏方大全1</a> <a class="btn btn-default" href="/article/1586351" title="别做情人，做知己!">别做情人，做知己!</a> <a class="btn btn-default" href="/article/1586352" title="人间仙境，做你的桌面你喜欢吗？">人间仙境，做你的桌面你喜欢吗？</a> </div> </div></div> <div class="copy-right"> <p>神马文学网，客观、专业、权威的知识性互动百科全书。</p></div> </footer> </body> </html>