网站制作流程及界面交互设计研究探讨
作者的博客：
很多朋友希望我能和大家分享一下我制作网站的一些流程和经验。最近刚刚做了一次内训，所以稍微整理了一下。这些仅适用于网页初学者、具有一定图形设计水平的人员以及熟悉 HTML 的人员。我对此了解不多。他们可能只是想做一个个人主页自己做网站流程，所以整体布局还是倾向于传统的表格布局。这里很多都是我刚开学时的亲身经历，所以可能不是很专业，但是绝对是比较容易上手的。我一直有这个想法。只有崩溃了，才能爬到更高的地方。我想如果我没有学习这段时间，我不会理解什么W3C，什么CSS，等等ASP，什么XML，一切都有一个起点，希望能够对大家有一些帮助。整体PPT比较大，这里就不放了。我把主要内容粗略地整理成文字。如果需要PPT可以联系我。如果有不合理的地方，希望大家指出自己做网站流程，共同讨论。
主要内容介绍：
1.构成网页的基本元素
2、制作和美化的基本工具
3.网页创建的基本步骤
4.界面设计与交互研究探讨
5. 实例制作演示
1.构成网页的基本元素
1. 文字（标题、字号、字体...）
2 图形（网页常用的图像格式：jpg、jpeg、Gif、Swf...）
3.交互功能（菜单按钮、链接、表单、数据交换……）
...
超文本标记语言 (HTML)
HTML（HTML）是一种专门用于网页制作的编程语言。它用于描述超文本各部分的内容，告诉浏览器如何显示文本，以及如何与其他文本或图像生成链接点。
在 HTML 中，所有标签都包含在尖括号中。
例如，代表 HTML 标签。大多数标签成对出现，包括开始标签和结束标签。
喜欢：… 。
HTML文档的基本结构
典型的 HTML 文本的基本结构如下：
网站制作流程及界面交互设计研究探讨
文字内容：
2、制作和美化的基本工具
1.超文本标记语言（HTML）
编辑工具:,,记事本,,
2．页面设计和美化工具
使用工具：所有可以创建平面的软件
推荐使用,,Flash
3.网页创建的基本步骤
1、总体规划
需要完成的规划：网站主题、风格、页面元素、逻辑结构等。
2. 数据收集
征集内容：
一个。与主题相关的文字和图片
b.一些优秀的页面样式
c.下载一些您喜欢的互动页面
d.开源代码
3. 伪接口设计
根据预先规划好的结构，在图形软件中设计出自己想要的最终效果，并先以图形图片的形式展示出来。设计时要注意宜人性、人机、心理等各种因素。
4. 代码转换及交互添加
将扁平化的伪界面转换为HTML代码，添加相应的交互功能J、按钮、表单以及一些连接数据库的代码。
5.测试网页兼容性
您不必严格遵循W3C标准来创建页面，但您必须确保所有现有浏览器都可以更好地展示您的作品。
6. 发布站点
测试完成并满足您的要求后，当然可以开始发布您的网站了。发布服务器可以是远程的或本地的。每种语言都有自己对应的服务器，比如ASP，就应该对应ASP服务器。上传可以利用远程FTP工具。
4.界面设计与交互研究探讨
一个。导航栏设计
导航元素设计的好坏决定了用户能否轻松使用网站。导航元素应设计得直接、清晰，并最大程度地考虑用户的便利性。
b.网页布局
网页的布局是整个界面的核心。它体现了一切以用户为中心、创作者如何与观众沟通的理念。你必须知道你想传达什么样的信息，是否适合别人使用，以及字体大小。尺寸、模型、字距、行距、配色都在这个阶段完成，所以如何表达功能性和美观性是你研究的重点。
PS：布局前应紧密结合网站主题，注意把握整体风格。你可以提前在纸上画出草图，用你习惯的元素来表达你想要的效果。
网页布局--构成的主要原则
显着性：是指用户关注并诱导其浏览的部分和内容。
可读性：指网站内容易于理解
清晰度：指准确、快速地传达网站内容
造型：保持整体外观的稳定性和平衡
创造力：拥有鲜明的个性，创造力必不可少
布局的构成原则是：统一、协调、流动、重点、平衡。
c.互动研究
这里的交互主要集中在人机操作上。我研究用户浏览网站的心理。我个人认为，对于一个成功的个人主页来说，单纯的美观是不够的。重要的是要注意的愉悦感。如果你喜欢，你就住在这里。
5. 实例制作演示（略）
1、页面制作总体规划
对象：印刷版商业推广主页
风格：活泼、多彩、简约、大方
2. 数据收集
一个。商标、网站、公司宣传册，了解企业文化，了解负责人的品味、他们的案例，与负责人沟通获取信息
b.在线下载类似印刷行业的公司主页，了解现有行业的一些设计特点。
c.下载一些色彩绚丽的图片或者与印刷相关的图片
d.如果您不懂动态语言，请下载符合您功能的新闻发布系统和消息源码。
3. 伪接口设计
一个。 PS中设计伪界面
b.切片工具对整体进行合理分割
注意：隐藏要输入的文字，分段时保持其整体含义，尽量使每个部分完整，注意一些交互操作。
c.导出为WEB格式-直接导出为HTML格式-步骤：
1.点击保存为WEB文件格式
2.在界面中调整理想参数
3.导出并保存PS可以自动生成一些HTML代码，但不是很标准。你必须
内部加工
d.内部代码处理
具体步骤：
1.先修改标题
2.修改页面属性：背景颜色、背景图片...
3.调整页面为布局格式（这个可以根据自己的习惯来设置，有标准的表格方式和布局类型）
4. 将要添加文字的图像转换为背景形式
一个。找到对应的图片路径
b.复制路径后删除图像
c.转换为标准形式
d.将路径粘贴到背景属性
e.返回布局界面
5.添加具体的文本连接设置等操作
6.CSS设置
7.修改代码并发布预览。按F12预览效果。
4.测试网页兼容性
根据您的设计目的，根据IE版本和浏览器调整理想的效果。但大部分问题出现在JS/VB等代码中。如果只是静态图片的话，基本上不会有太大的差别。建议 每个人都应该尽力依赖 W3C 标准。
5. 发布站点
购买自己的空间域名，其实应该提前购买。使用 FTP 上传软件将您的页面上传到您的在线服务器。推荐一个FTP上传工具。
总结：
1.在开始制作网页之前，建议花少量的时间对你想要制作的主页进行整体设计，比如你想要主页是什么风格，应该放置什么信息，其他网页如何设计，几层如何处理等等。通常在开发网页时，首先制作静态网页，然后在其中添加脚本、表单等。静态网页仅用于被动发布信息，没有任何交互功能。它们是网页的重要组成部分。一个好的网站：首先是内容丰富，其次是网页设计。
2、不要先决定网页的外观，然后强迫自己去适应。您应该根据网站的访问者、要提供的信息以及制作目标来制定最合适的网页结构。
3、每页的版式不宜过于松散或使用过大的字数。尽量避免访问者在浏览网页时需要大幅滚动。对于太长的页面，可以使用内部链接。需要注意的是，页面的上半部分是一个显眼且有价值的地方。不要只放一些大胆的文字或图片。
4、每个页面不要使用不同的壁纸，以免每次翻页时花费太多时间下载。使用相同的背景颜色或壁纸也可以增强网页的一致性。建立自己的风格。
5.背景颜色或壁纸必须与文字形成强烈对比，以便于阅读。
6、熟悉之后，开始尝试使用CSS，编写自己的代码，按照W3C标准编写出符合要求的网页。
