Dreamweaver设计网站的时候，我们会用网站原型和客户讨论需求，客户方便易懂，可以达到事半功倍的效果，该怎么制作网站的demo呢？下面我们就来看看详细的教程。
1、下载安装Dreamweaver
下载Dreamweavercs6，本文提供软件下载，下载安装即可。
2、打开Dreamweaver开始做原型
打开Dreamweaver之后，有一个窗口，可以快速选择之前编辑过的文件，也可以新建不同类型的文件。如果不想下次进来再出现这样的窗口，可以勾选左下方的“不在显示”。做网站的原型我们用的一般是HTML搭配css和JavaScript文件做。所以下面我们先新建一个HTML页面。
3、新建HTML页面
Dreamweaver新建的HTML页面已经有了<body></strong>这些基本的标签，我们可以在这个基础上编辑，<strong>要引入的css文件和JavaScript文件放到<head>标签中</strong>。</p>
<p align="center"><img alt="" src="//img.jbzj.com/file_images/article/201904/2019041110342478.jpg " /></p>
<p>4、联想</p>
<p>Dreamweaver会自动联想标签，属性或关键字等，所以只需要输入前几个单词，就会自动弹出选择下拉框。方便编程人员快速编码。</p>
<p align="center"><img alt="" src="//img.jbzj.com/file_images/article/201904/2019041110342479.jpg " /></p>
<p>5、Dreamweaver的几种视图一</p>
<p>Dreamweaver有四种视图，分别是“<span style="color: #ff0000"><strong>代码”，“拆分”，“设计”和“实时视图”，</strong></span>掌握好这几种视图的切换，可加速编码效率。</p>
<p><strong>第一种视图：代码</strong></p>
<p>就是纯代码，打开文件默认的就是“代码”视图。这里就不截图展示了。</p>
<p><strong>第二种视图：拆分</strong></p>
<p>就是左边代码，右边页面效果的视图，编辑左边的源代码，右边的效果图跟着实时变化。</p>
<p> </p>
<p align="center"><img alt="" src="//img.jbzj.com/file_images/article/201904/2019041110342480.jpg " /></p>
<p><strong>第三种视图：设计</strong></p>
<p>展示的是页面效果图，但是这个页面中的标签块是可以拖动的，拖动到合适的位置可以保存，这种方法设计网页，简单方便。</p>
<p><strong>第四种视图：实时视图</strong></p>
<p>展示的就是页面效果图。</p>
<p align="center"><img alt="" src="//img.jbzj.com/file_images/article/201904/2019041110342481.jpg " /></p>
<p>6、文件树</p>
<p>写一个网站原型，有很多文件，这么多文件怎么管理呢？</p>
<p>点击右侧面板中的文件面板，弹出文件树窗口。在这里可以管理网站demo使用的文件。</p>
<p>例如：我例子中的文件树，<strong>common文件夹放要使用的插件，css和JavaScript文件，以及图片等资源</strong>。login文件夹放登录相关的html文件，register文件夹放注册相关的html文件，根目录中的success.html,error.html文件都是系统中使用频繁的文件。</p>
<p align="center"><img alt="" src="//img.jbzj.com/file_images/article/201904/2019041110342482.jpg " /></p>
<p>7、预览</p>
<p>demo写的差不多了，可以点击菜单中的预览按钮，先预览一下。Dreamweaver提供了360，IE，谷歌，火狐等浏览器可供预览。</p>
<p align="center"><img alt="" src="//img.jbzj.com/file_images/article/201904/2019041110342583.jpg " /></p>
<p>8、保存</p>
<p>写好的页面一定要保存，最好是一边写一遍保存，</p>
<p>点击菜单中的“文件”——》选择“<strong>保存</strong>”，或者按快捷键<span style="color: #ff0000"><strong>ctrl+s</strong></span>保存。</p>
<p align="center"><img alt="" src="//img.jbzj.com/file_images/article/201904/2019041110342584.jpg " /></p>
<br><br>感谢您的阅读标题为<a href="http://www.sjidea.com/dreamweaver/article-538.html" target="_blank"> 《Dreamweaver怎么设计网站的demo原型?》</a>的文章，更多教程内容可关注新设计人网。
</div>
<div class="blank5"></div>
<div class="blank5"></div>
<div class="art_bottom" >
<div style="float:left">上一篇：<a href="http://www.sjidea.com/dreamweaver/article-537.html">Dreamweaver代码怎么自动排版? dw代码格式化的技巧</a>
</div>
<div style="float:right">下一篇：<a href="http://www.sjidea.com/dreamweaver/article-539.html">DW2018移动文件时怎么设置从不更新链接?</a>
</div>
</div>
<div class="blank5"></div>
<div class="content">
<div class="tuijian info">
<div class="hd">
<h3><span>推荐内容</span></h3>
</div>
<div class="bd clearfix">
<div class="content">
<ul class="art">
<li><a title="Dreamweaver网页怎么添加弹出窗口信息?" href="http://www.sjidea.com/dreamweaver/article-637.html" target="_blank">Dreamweaver网页怎么添加弹出窗口信息?</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver网页怎么插入客户端脚本?" href="http://www.sjidea.com/dreamweaver/article-566.html" target="_blank">Dreamweaver网页怎么插入客户端脚本?</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver cs5命令列表怎么删除命令?" href="http://www.sjidea.com/dreamweaver/article-571.html" target="_blank">Dreamweaver cs5命令列表怎么删除命令?</a> <span>2022-05-24</span></li>
<li><a title="dreamweaver怎么使用正则表达式?" href="http://www.sjidea.com/dreamweaver/article-552.html" target="_blank">dreamweaver怎么使用正则表达式?</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver怎么上传网页? dw网页上传到服务器的教程" href="http://www.sjidea.com/dreamweaver/article-569.html" target="_blank">Dreamweaver怎么上传网页? dw网页上传到服务器的教程</a> <span>2022-05-24</span></li>
<li><a title="dreamweaver网页上怎么制作DIV图层?" href="http://www.sjidea.com/dreamweaver/article-545.html" target="_blank">dreamweaver网页上怎么制作DIV图层?</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver怎么设计一款拼图游戏?" href="http://www.sjidea.com/dreamweaver/article-553.html" target="_blank">Dreamweaver怎么设计一款拼图游戏?</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver cs5怎么使用实时视图?" href="http://www.sjidea.com/dreamweaver/article-573.html" target="_blank">Dreamweaver cs5怎么使用实时视图?</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver文件头部信息有什么作用? dw查看文件头部信息的教程" href="http://www.sjidea.com/dreamweaver/article-629.html" target="_blank">Dreamweaver文件头部信息有什么作用? dw查看文件头部信息的教程</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver cs5页面怎么插入Spry菜单栏?" href="http://www.sjidea.com/dreamweaver/article-575.html" target="_blank">Dreamweaver cs5页面怎么插入Spry菜单栏?</a> <span>2022-05-24</span></li>
</ul>
</div>
</div>
</div>
<div class="tuijian info info2">
<div class="hd">
<h3><span>热点内容</span></h3></div>
<div class="bd clearfix">
<div class="content">
<ul class="art">
<li><a title="Dreamweaver网页怎么插入单选按钮?" href="http://www.sjidea.com/dreamweaver/article-524.html" target="_blank">Dreamweaver网页怎么插入单选按钮?</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver怎么替换文字? DW批量替换文字的技巧" href="http://www.sjidea.com/dreamweaver/article-525.html" target="_blank">Dreamweaver怎么替换文字? DW批量替换文字的技巧</a> <span>2022-05-24</span></li>
<li><a title="Dw CC 2018怎么设置上载前先保存文件? Dreamweaver站点的设置方法" href="http://www.sjidea.com/dreamweaver/article-526.html" target="_blank">Dw CC 2018怎么设置上载前先保存文件? Dreamweaver站点的设置方法</a> <span>2022-05-24</span></li>
<li><a title="Dw2018键盘快捷键怎么设置? Dreamweaver键盘快捷键的用法" href="http://www.sjidea.com/dreamweaver/article-527.html" target="_blank">Dw2018键盘快捷键怎么设置? Dreamweaver键盘快捷键的用法</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver怎么给淘宝店招添加链接? 淘宝店招添加链接的技巧" href="http://www.sjidea.com/dreamweaver/article-528.html" target="_blank">Dreamweaver怎么给淘宝店招添加链接? 淘宝店招添加链接的技巧</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver CS3复选框怎么用? dw复选框属性介绍" href="http://www.sjidea.com/dreamweaver/article-529.html" target="_blank">Dreamweaver CS3复选框怎么用? dw复选框属性介绍</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver2018怎么开启临时文件预览?" href="http://www.sjidea.com/dreamweaver/article-530.html" target="_blank">Dreamweaver2018怎么开启临时文件预览?</a> <span>2022-05-24</span></li>
<li><a title="DW2021怎么下载? Dreamweaver2021破解安装图文教程" href="http://www.sjidea.com/dreamweaver/article-531.html" target="_blank">DW2021怎么下载? Dreamweaver2021破解安装图文教程</a> <span>2022-05-24</span></li>
<li><a title="Dreamweaver修改后的网页运行页面不变该怎么办?" href="http://www.sjidea.com/dreamweaver/article-532.html" target="_blank">Dreamweaver修改后的网页运行页面不变该怎么办?</a> <span>2022-05-24</span></li>
<li><a title="DwCC2018双字节内联输入怎么实现?" href="http://www.sjidea.com/dreamweaver/article-533.html" target="_blank">DwCC2018双字节内联输入怎么实现?</a> <span>2022-05-24</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="blank5"></div>
<div class="jogger"> </div>
<div class="blank5"></div>
<div class="blank5"></div>
</div>
</div>
</div>
<div class="blank"></div>
<div class="blank"></div>
<div class="footer_box">
<div class="block">
<div id="footer">
<div class="text">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=81868151&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:81868151:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a><br />
教程中心： <a href="http://www.sjidea.com/PSzhuanti">PS专题</a> 【 <a href="http://www.sjidea.com/psjiaocheng">Photoshop教程</a>、
<a href="http://www.sjidea.com/PShuabi">PS画笔</a>、
<a href="http://www.sjidea.com/PSdongzuo">PS动作</a>、
<a href="http://www.sjidea.com/PSyangshi">PS样式</a>】
| <a href="http://www.sjidea.com/c4djc">C4D教程</a>
| <a href="http://www.sjidea.com/illustrator">Illustrator教程</a>
| <a href="http://www.sjidea.com/corldraw">Corldraw教程</a>
| <a href="http://www.sjidea.com/indesign">Indesign教程</a>
| <a href="http://www.sjidea.com/websheji">网页设计教程</a>
</div>
<p style="white-space: normal; text-align: center;"><span style="color: rgb(127, 127, 127); font-family: 微软雅黑, "Microsoft YaHei"; font-size: 16px;"><strong>新设计人网（www.sjidea.com） 网站理念：致力服务新设计人 SJidea！</strong></span><br />
免责声明：本站所有资源(文字、图片)搜集整理于互联网或者网友提供，仅供学习与交流使用，如果不小心侵犯到你的权益，请及时联系我们删除该资源。</p>
<p style="white-space: normal; text-align: center; color: rgb(150, 150, 150); ">Powered by 新设计人联盟
Copyright © 2006 - 2020 新设计人 www.sjidea.com <a href="https://www.xunruicms.com" target="_blank">迅睿CMS框架</a></p>
</div>
</div>
<div class="x_fot">
<a href="/">首页</a>
<a href="/designwork">作品</a>
<a href="/jiaocheng">教程</a>
<a href="/freefont/">字体</a>
</div>
<div style="display:none"> <script src=http://s33.cnzz.com/stat.php?id=109884&web_id=109884 language=JavaScript charset=gb2312></script></div>
<div class="gotop">
<ul>
<li><a href="javascript:history.go(-1)"><i class="icon iconfont">返回</i><em>上一页</em></a></li>
<li><a href="/" ><i class="icon iconfont">首页</i><em>网站首页</em></a></li>
<li><a id="goTopBtn" href="#" ><i class="icon iconfont">︿<br>TOP</i><em>返回顶部</em></a></li>
</ul>
</div></body>
</html>
