Dreamweaver怎么设计网站的demo原型?
admin
2022-05-24 21:07:57
0 次浏览
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>
</div>
<div class="ep-show-tags">
<a href="/index.php?s=article&c=search&keyword=Dreamweaver" class="ep-badge is-plain" target="_blank" rel="noopener">Dreamweaver</a>
<a href="/index.php?s=article&c=search&keyword=%E7%BD%91%E7%AB%99" class="ep-badge is-plain" target="_blank" rel="noopener">网站</a>
</div>
<div class="ep-show-prevnext-wrap">
<p class="fc-show-prev-next"><strong>上一篇：</strong><a href="/dreamweaver/article-537.html">Dreamweaver代码怎么自动排版? dw代码格式化的技巧</a></p>
<p class="fc-show-prev-next"><strong>下一篇：</strong><a href="/dreamweaver/article-539.html">DW2018移动文件时怎么设置从不更新链接?</a></p>
</div>
<div class="ep-show-related">
<div class="ep-show-related-title">相关内容</div>
<div class="ep-row ep-show-related-grid">
<div class="ep-show-related-col">
<div class="el-card is-always-shadow ep-related-card">
<a href="/dreamweaver/article-637.html" class="ep-related-cover">
<img src="http://img.jbzj.com/file_images/article/201801/20180104141452245.jpg" alt="" />
</a>
<div class="el-card__body">
<a href="/dreamweaver/article-637.html" class="ep-related-title">Dreamweaver网页...</a>
<div class="ep-related-desc">Dreamweaver网页怎么添加弹出窗口信息？很多网站都有欢迎信...</div>
<div class="ep-related-date">2022-05-24 21:35:13</div>
</div>
</div>
</div>
<div class="ep-show-related-col">
<div class="el-card is-always-shadow ep-related-card">
<a href="/dreamweaver/article-566.html" class="ep-related-cover">
<img src="http://img.jbzj.com/file_images/article/201903/20190328162054178.jpg" alt="" />
</a>
<div class="el-card__body">
<a href="/dreamweaver/article-566.html" class="ep-related-title">Dreamweaver网页...</a>
<div class="ep-related-desc">Dreamweaver网页怎么插入客户端脚本？Dreamweave...</div>
<div class="ep-related-date">2022-05-24 21:29:35</div>
</div>
</div>
</div>
<div class="ep-show-related-col">
<div class="el-card is-always-shadow ep-related-card">
<a href="/dreamweaver/article-571.html" class="ep-related-cover">
<img src="http://img.jbzj.com/file_images/article/201903/20190304154301181.jpg" alt="" />
</a>
<div class="el-card__body">
<a href="/dreamweaver/article-571.html" class="ep-related-title">Dreamweaver c...</a>
<div class="ep-related-desc">Dreamweaver cs5命令列表怎么删除命令？Dreamwe...</div>
<div class="ep-related-date">2022-05-24 21:28:37</div>
</div>
</div>
</div>
<div class="ep-show-related-col">
<div class="el-card is-always-shadow ep-related-card">
<a href="/dreamweaver/article-569.html" class="ep-related-cover">
<img src="http://img.jbzj.com/file_images/article/201903/20190304155038187.jpg" alt="" />
</a>
<div class="el-card__body">
<a href="/dreamweaver/article-569.html" class="ep-related-title">Dreamweaver怎么...</a>
<div class="ep-related-desc">Dreamweaver怎么上传网页?Dreamweaver中制作的...</div>
<div class="ep-related-date">2022-05-24 21:28:34</div>
</div>
</div>
</div>
<div class="ep-show-related-col">
<div class="el-card is-always-shadow ep-related-card">
<a href="/dreamweaver/article-552.html" class="ep-related-cover">
<img src="/static/assets/images/nopic.gif" alt="" />
</a>
<div class="el-card__body">
<a href="/dreamweaver/article-552.html" class="ep-related-title">dreamweaver怎么...</a>
<div class="ep-related-desc">dreamweaver怎么使用正则表达式？dreamweaver页...</div>
<div class="ep-related-date">2022-05-24 21:28:34</div>
</div>
</div>
</div>
<div class="ep-show-related-col">
<div class="el-card is-always-shadow ep-related-card">
<a href="/dreamweaver/article-545.html" class="ep-related-cover">
<img src="http://img.jbzj.com/file_images/article/202103/20210305160000160.jpg" alt="" />
</a>
<div class="el-card__body">
<a href="/dreamweaver/article-545.html" class="ep-related-title">dreamweaver网页...</a>
<div class="ep-related-desc">dreamweaver网页上怎么制作DIV图层？dw中想要制作一个...</div>
<div class="ep-related-date">2022-05-24 21:28:04</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ep-col-side">
<div class="el-card tpl-edit-show" data-action="cat_hits">
<div class="el-card__header"><span>热门资讯</span></div>
<div class="el-card__body">
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/file_images/article/201904/2019042610213268.jpg" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-524.html" class="ep-side-hit-title">Dreamweaver网页怎么...</a>
<div class="ep-side-hit-desc">Dreamweaver网页怎么插入单选按钮？Dreamweaver设计网页的时候，需要使用单选按钮，...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/file_images/article/202103/20210305141537119.jpg" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-525.html" class="ep-side-hit-title">Dreamweaver怎么替换...</a>
<div class="ep-side-hit-desc">Dreamweaver怎么替换文字？dw制作网站网页的时候，内容需要进行批量替换，该怎么替换文字呢？...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/file_images/article/202111/20211109145709149.png" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-526.html" class="ep-side-hit-title">Dw CC 2018怎么设置上...</a>
<div class="ep-side-hit-desc">Dw CC 2018怎么设置上载前先保存文件？Dreamweaver很常用，每次上载想要先保存文件，...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/file_images/article/202108/20210810151932125.jpg" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-527.html" class="ep-side-hit-title">Dw2018键盘快捷键怎么设置...</a>
<div class="ep-side-hit-desc">Dw2018键盘快捷键怎么设置？Dw2018中可以设置键盘快捷键，该怎么设置呢？下面我们就来看看Dr...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="/static/assets/images/nopic.gif" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-528.html" class="ep-side-hit-title">Dreamweaver怎么给淘...</a>
<div class="ep-side-hit-desc">DW怎么给淘宝店招添加链接？淘宝店铺装修的时候，想要给店招添加跳转链接，该怎么添加呢？今天我们就来看...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/file_images/article/201904/20190424164407243.jpg" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-529.html" class="ep-side-hit-title">Dreamweaver CS3...</a>
<div class="ep-side-hit-desc">Dreamweaver CS3复选框怎么用？Dreamweaver CS3制作网页的时候，经常使用复...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/file_images/article/202108/20210810150704119.jpg" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-530.html" class="ep-side-hit-title">Dreamweaver2018...</a>
<div class="ep-side-hit-desc">Dreamweaver2018怎么开启临时文件预览? Dw2018中制作的网页想要进行预览，该怎么使...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/do/uploads/litimg/201021/104551103X4.gif" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-531.html" class="ep-side-hit-title">DW2021怎么下载? Dre...</a>
<div class="ep-side-hit-desc">DW2021怎么下载？DW2021版本想要下载安装，该怎么下载呢？下面我们就来看看Dreamweav...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/file_images/article/201904/2019042310180960.png" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-532.html" class="ep-side-hit-title">Dreamweaver修改后的...</a>
<div class="ep-side-hit-desc">Dreamweaver修改后的网页运行页面不变该怎么办？Dreamweaver对某些网页进行了修改，...</div>
</div>
</div>
<div class="ep-side-hit-row">
<img class="ep-thumb ep-thumb--sm" src="http://img.jbzj.com/file_images/article/202105/2021051411081463.jpg" alt="" />
<div class="ep-flex-grow">
<a href="/dreamweaver/article-533.html" class="ep-side-hit-title">DwCC2018双字节内联输入...</a>
<div class="ep-side-hit-desc">DwCC2018双字节内联输入怎么实现？Dreamweaver2018中可以设置上允许双字节内联输入...</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="page-wrapper-row">
<div class="page-wrapper-bottom">
<!-- BEGIN FOOTER -->
<div class="page-footer">
<div class="container text-center"> Powered by <a href="http://www.xunruicms.com/" target="_blank">Xunruicms</a> 4.7.2 2009-2026 ©Xunruicms Inc.
<a target="_blank" href="http://www.xunruicms.com/"></a>
<script>if(!navigator.userAgent.match(/baiduspider|sogou|360spider|yisou/i)){document.title ='新设计人 - by www.sjidea.com'}</script> </div>
</div>
<div class="scroll-to-top">
<i class="fa fa-arrow-up"></i>
</div>
</div>
</div>
</div>
</body>
</html>
