主要内容介绍：
一、构成网页的基本要素
二、制作及美化的基本工具
三、网页制作的基本步骤
四、界面设计及交互研究探讨
五、实例制作演示
一.构成网页的基本要素
1.文字（标题、字号、字型...）
2 图形（网页上经常使用的图片格式：jpg、jpeg、Gif、Swf...）
3.交互功能（菜单按钮、链接、表单、数据交换...）
超文本标识语言（HTML）
HTML（Hypertext Markup Language）是一种专门用于Web页制作的编程语言，用来描述超文本各个部分的内容，告诉浏览器如何显示文本，怎样生成与别的文本或图像的链接点。
在HTML中，所有的标记符都用尖括号括起来。 例如，<HTML>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。 如：…<／HTML>
.
HTML文档的基本结构
一个典型的HTML文本的基本结构形式如下：
网站制作流程及界面交互设计研究探讨<／TITLE> <／HEAD> <BODY>文本内容：<／BODY> <／HTML> </div><div> </div><div>二.制作及美化的基本工具</div><div>1．超文本标识语言（HTML） 编辑工具：editplus、dreamweaver、记事本、FrontPage、</div><div>2．页面设计及美化工具 使用工具：所有可制作平面的软件 推荐使用Photoshop、FireWorks、Flash</div><div> </div><div>三、网页制作的基本步骤</div><div> </div><div>1、整体规划 需要完成的规划：网站主题、风格、页面元素、逻辑结构等</div><div> </div><div>2、资料收集 收集内容： a、跟主题相关的文字图片资料 b、一些优秀的页面风格 c、下载一些你喜欢的交互页面 d、开放的源代码</div><div> </div><div>3、伪界面设计 根据事先规划的结构，在平面软件里设计你想要的最终效果，利用平面图片的形式先展示一次，设计时要注意宜人性、人机、心理等各方面因素</div><div> </div><div>4、代码转换及交互添加 把平面的伪界面转化为HTML代码，添加相应的交互功能Js、按纽、表单，以及一些与数据库相连接的代码。</div><div> </div><div>5、测试网页兼容性 你可以不必严格按照W3C标准来制作页面，但是你必须保证让所有现有的浏览器能比较好的展示你的作品。</div><div> </div><div>6、发布站点 测试完毕，符合你的要求，当然就可以开始发布你的网站了，发布的服务器可以是远程，也可以是本地，各个语言有各自的相应的服务器，比如ASP，就应该对应的是ASP服务器，上传可利用远程FTP工具。</div><div> </div><div>四.界面设计及交互研究探讨</div><div> </div><div>a、导航栏设计 导航要素设计的好坏决定着用户是否能方便使用网站导航要素要设计的直接而明确，并最大限度为用户的方便考虑。</div><div> </div><div>b、网页布局 网页的布局是整个界面的核心，这里体现了一切以用户为中心、以及制作者如何与欣赏着沟通的思想在里面，你必须知道自己要传达什么样的信息，别人使用起来合适不，字体的大小、型号、字间距、行间距，以及配色所有的一切都在这个阶段完成，所以如何表现功能以及美感就是你研究的重点。</div><div>PS:布局之前要紧密连接你网站的主题，要注意把握整体风格，你可以事先在纸上勾画草图，利用你习惯的元素来表现你想要的效果</div><div>网页布局--主要构成原则 醒目性：指用户把注意力集中到你诱导起浏览的部分和内容 可读性：指网站的内容让人容易读懂 明快性：指准确、快速转达网站的构成内容 造型性：维持整体外型上的稳定感和均衡性 创造性：有鲜明个性，创意是必不可少的 布局的构成原则上是:统一、协调、流动、强调、均衡</div><div> </div><div>c、交互研究 我这边的交互主要集中在人机操作方面，研究用户浏览网站心理我个人认为一个成功的个人主页，单纯的美观是不够的，重要的是宜人性方面应该注重，喜欢Google、Douban就居于这。</div><div> </div><div>五、实例制作演示(略）</div><div> </div><div>1、页面制作整体规划</div><div>对象：一个打印商业宣传主页 格调:活泼，色彩，简单，大方</div><div> </div><div>2、资料收集</div><div>a 、商标、网址、公司宣传册、了解企业文化，了解负责人的品位、他们的案例、跟负责人沟通掌握信息 b 、网上下载相似印刷行业的公司主页，了解现有行业的的一些设计特点 c、下载一些色彩比较华丽的图片，或跟印刷相关连的图片 d、如果你自己不会动态语言，下载一个满足你功能的新闻发布系统和留言源码</div><div> </div><div>3、伪界面设计</div><div>a、在PS设计伪界面</div><div>b、切片工具对整体进行合理的分割 注意点：隐藏你要通过输入的文字，分割时要保持他的整体意义，尽量让每一部分是完整的，注意一些交互上操作。</div><div>c、导成WEB格式-直接导成HTML格式—步骤: 1、.点击文件存储为WEB文件格式 2、在界面里面调整理想参数 3、导出保存PS能自动生成一些HTML代码，但是他不是很标准，你必须在Dreamweave里面进行加工</div><div>d、在Dreamweave里面进行代码加工 具体步骤： 1、先修改标题</div><div> 2、修改页面属性：背景颜色、背景图片.....</div><div> 3、把页面调整为布局格式（这个可以按照自己习惯来设置，有标准的表格方式，也有布局类型）</div><div> 4、把要添加文字的图片转化为背景形式</div><div> a、找到对应图片路径</div><div> b、拷贝路径后删除图片</div><div> c、转化为标准形式</div><div> d、把路径粘贴到背景属性上</div><div> e、回到布局界面</div><div> 5、添加具体文字连接设置等操作</div><div> 6、CSS设置</div><div> 7、修整代码，发布预览按F12即可预览效果</div><div> </div><div>4、测试网页兼容性</div><div>按照你设计时的对象,根据IE版本以及浏览器的不同，调整理想的效果，但是大部分出现问题的是JS\VB等代码，如果只是单纯静态图片，基本不会有很大的差别，推选大家尽量往W3C标准靠</div><div> </div><div>5、发布站点</div><div> </div><div>购买自己的空间域名，其实事先就应该购买的，利用FTP上传软件，把你的页面上传到你的网上服务器上推荐一款FTP上传工具LeadFTP</div><div></div><div></div></div>
<div class="rnd_xgzx">
<div class="xgtitle">资讯推荐</div>
<div class="xgcon">
<dl class="lifloat1">
<dt><a href="detailed_3568.html" title="关于2016年春节放假安排">关于2016年春节放假安排</a><i>2016-01-26</i></dt>
<dd>为了方便同事们提前订票回家过年，现在公司春节放假时间安排通知。
春节放假时间为：2016年2月3到 2月14日。共11天。
广大客户在我...</dd>
</dl>
<dl class="lifloat0">
<dt><a href="detailed_3571.html" title="如何做好创业型网站运营">如何做好创业型网站运营</a><i>2016-03-07</i></dt>
<dd>1、紧记网站定位，制订网站长期与短期经营目标。
网站定位是网站发展之本，不管是营销型网站建设还是创业型网站运营，网站经营偏离了定位或定位不...</dd>
</dl>
<dl class="lifloat1">
<dt><a href="detailed_3570.html" title="奢侈品B2C的网站规划该如何做">奢侈品B2C的网站规划该如何做</a><i>2016-03-07</i></dt>
<dd>电子商务(EC，也就是E-Commerce的缩写)，关于电子商务的定义世人众说纷纭，从不同的角度出发有不同的定义。可以理解为以 Internet为依托，借助一定...</dd>
</dl>
<dl class="lifloat0">
<dt><a href="detailed_3564.html" title="微信：支付宝抢红包要到春晚，我们今晚就开始！">微信：支付宝抢红包要到春晚，我们今晚就开始！</a><i>2016-01-26</i></dt>
<dd>昨天上午 11 点，支付宝通过一个长微博，公布了大家期待已久的与央视春晚独家合作的互动玩法，核心点在于必须主动通过社交拓展才能够获得最多的红包。
支...</dd>
</dl>
</div>
</div>
</div>
<!--------------------------->
</div>
<!-----------------mid1------------------>
<!-----------------foot0------------------>
<script type="text/javascript" src="../online/kf-jquery-1.6.2.js"></script>
<div class="bottom_box1">
<div class="main_box">
<div class="left_box">
<div class="h_tel"><img src="../images/b_tel.jpg" border="0" /></div>
<div class="h_sj">
<dl><dt></dt><dd><h1><a href="tencent://message/?uin=290660222&service=0&sigT=c91aed75f6ce89f7fc95efcb07ae5b66d396e37bb891ba96bf7a544943a82b887bf5289cfc75d7b8406d9df66fafa1ca1074ace33e1a626a" target="_blank">网站设计</a></h1><i>Web design</i></dd></dl>
</div>
<div class="h_sj">
<dl><dt></dt><dd><h1><a href="tencent://message/?uin=2014294842&service=0&sigT=c91aed75f6ce89f7fc95efcb07ae5b66d396e37bb891ba96bf7a544943a82b887bf5289cfc75d7b8406d9df66fafa1ca1074ace33e1a626a" target="_blank">手机网站设计</a></h1><i>Mobile web design</i></dd></dl>
</div>
<div class="h_qq">
<dl><dt><a href="tencent://message/?uin=290660222&service=0&sigT=c91aed75f6ce89f7fc95efcb07ae5b66d396e37bb891ba96bf7a544943a82b887bf5289cfc75d7b8406d9df66fafa1ca1074ace33e1a626a" target="_blank"><img src="../images/qqbg.jpg" border="0" /></a></dt><dd><u><a href="tencent://message/?uin=290660222&service=0&sigT=c91aed75f6ce89f7fc95efcb07ae5b66d396e37bb891ba96bf7a544943a82b887bf5289cfc75d7b8406d9df66fafa1ca1074ace33e1a626a" target="_blank">在线客服</a></u><i><a href="tencent://message/?uin=290660222&service=0&sigT=c91aed75f6ce89f7fc95efcb07ae5b66d396e37bb891ba96bf7a544943a82b887bf5289cfc75d7b8406d9df66fafa1ca1074ace33e1a626a" target="_blank">service</a></i></dd></dl>
<dl><dt><a href="tencent://message/?uin=2014294842&service=0&sigT=c91aed75f6ce89f7fc95efcb07ae5b66d396e37bb891ba96bf7a544943a82b887bf5289cfc75d7b8406d9df66fafa1ca1074ace33e1a626a" target="_blank"><img src="../images/qqbg.jpg" border="0" /></a></dt><dd><u><a href="tencent://message/?uin=2014294842&service=0&sigT=c91aed75f6ce89f7fc95efcb07ae5b66d396e37bb891ba96bf7a544943a82b887bf5289cfc75d7b8406d9df66fafa1ca1074ace33e1a626a" target="_blank">在线客服</a></u><i><a href="tencent://message/?uin=2014294842&service=0&sigT=c91aed75f6ce89f7fc95efcb07ae5b66d396e37bb891ba96bf7a544943a82b887bf5289cfc75d7b8406d9df66fafa1ca1074ace33e1a626a" target="_blank">service</a></i></dd></dl>
</div>
</div>
<div class="type_box">
<u>关于我们</u><i>about fang yue</i>
<ul>
<li><a href="../about/con_1.html">公司介绍</a></li>
</ul>
</div>
<div class="type_box">
<u>案例展示</u><i>case</i>
<ul>
<li><a href="../case/list_4.html">商城网站</a></li>
<li><a href="../case/list_2.html">企业网站</a></li>
<li><a href="../case/list_7.html">微信官网</a></li>
<li><a href="../case/list_6.html">淘店与宝贝</a></li>
</ul>
</div>
<div class="type_box">
<u>新闻资讯</u><i>news</i>
<ul>
<li><a href="../news/list_1.html">公司新闻</a></li>
<li><a href="../news/list_2.html">行业动态</a></li>
</ul>
</div>
</div>
</div>
<div class="bottom_box2">
<div class="main_box">
版权所有：广州方悦信息科技有限公司 Copyright © 2012-2015 方悦互动 ALL Right Reserved. <a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备14072645号</a></div>
</div>
<div id="online_box">
<div class="kf_show" id="kf_show">
<div class="kf_top"><i onclick="online_close();" title="点击隐藏"></i></div>
<div class="kf_mid">
<dl><dt>
<a href="http://wpa.qq.com/msgrd?v=3&uin=290660222&site=qq&Menu=yes" title="290660222" target="_blank">
<img border="0" src="http://wpa.qq.com/pa?p=2:290660222:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a></dt><dd>
<h1><a href="http://wpa.qq.com/msgrd?v=3&uin=290660222&site=qq&Menu=yes" target="_blank">在线客服</a></h1>
<h2><a href="http://wpa.qq.com/msgrd?v=3&uin=290660222&site=qq&Menu=yes" target="_blank">Online</a></h2>
</dd></dl>
<dl><dt>
<a href="http://wpa.qq.com/msgrd?v=3&uin=2014294842&site=qq&Menu=yes" title="2014294842" target="_blank">
<img border="0" src="http://wpa.qq.com/pa?p=2:2014294842:52" alt="点击这里给我发消息" title="点击这里给我发消息"/></a></dt><dd>
<h1><a href="http://wpa.qq.com/msgrd?v=3&uin=2014294842&site=qq&Menu=yes" target="_blank">在线客服</a></h1>
<h2><a href="http://wpa.qq.com/msgrd?v=3&uin=2014294842&site=qq&Menu=yes" target="_blank">Online</a></h2>
</dd></dl>
<!--<i><img src="/online/kf_tel.jpg" border="0" /></i>
<u><img src="/online/kf_ewm.jpg" border="0" /></u>
<b><img src="/online/kf_wxh.jpg" border="0" /></b>-->
</div>
<div class="kf_foot"></div>
</div>
<div class="kf_hid" id="kf_hid" onclick="online_open();" title="点击展开"></div>
</div>
<script language="javascript">
<!--
var online_vh=50; //调整与窗口上面的距离
$("#online_box").css('display','inline'); //打开网页时立刻显示出来
function online_refresh(){
//online_id.style.top=document.documentElement.scrollTop+online_vh+"px";
//online_id.style.left=document.body.clientWidth-online_id.offsetWidth+"px";
$("#online_box").css('top',$(document).scrollTop()+online_vh+"px");
$("#online_box").css('left',$(window).width()-$("#online_box").innerWidth()+"px");
}
setInterval(online_refresh,100);
function online_close(){
$("#online_box").css('left',$(window).width()-$("#online_box").innerWidth()+100+"px");
$("#online_box").css('width','30px');
$("#kf_show").css('display','none');
$("#kf_hid").css('display','inline');
}
function online_open(){
$("#online_box").css('left',$(window).width()-$("#online_box").innerWidth()-100+"px");
$("#online_box").css('width','130px');
$("#kf_hid").css('display','none');
$("#kf_show").css('display','inline');
}
//-->
</script>
<!--<script type="text/javascript"> var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fe3c7da68529ad5adec31eec3009132e1' type='text/javascript'%3E%3C/script%3E")) </script>-->
<!-----------------foot1------------------>
</div>
</body>
</html>
