![580048999ec5aa3bdef712f148b002f3.png](https://img-blog.csdnimg.cn/img_convert/580048999ec5aa3bdef712f148b002f3.png)
我们每天都会浏览大量网页
那么大家有想过自己制作一个
属于自己的网页吗?
如果没有
那么现在就可以开始想了
![17275f3125bf564735d43ec078b94b14.png](https://img-blog.csdnimg.cn/img_convert/17275f3125bf564735d43ec078b94b14.png)
作为一个新手
要如何制作出
一个美观漂亮、功能实用的网站?
这就需要你用到网页制作软件了
![6b398ad3d685474801a80628f218bdd0.png](https://img-blog.csdnimg.cn/img_convert/6b398ad3d685474801a80628f218bdd0.png)
Dreamweaver
网页制作软件有哪些?不同的人群有不同的适用软件。如果你懂一些编程知识,那么可以考虑用网页制作软件Dreamweaver来编辑网页。它是集网页制作和管理网站的网页代码编辑器,对新手来说,还是比较快上手的,代码提示很强大,可以方便新手更容易懂代码,也为优化网站打下了基础。
![b78ef0239de8906d44710fdd59197c1e.png](https://img-blog.csdnimg.cn/img_convert/b78ef0239de8906d44710fdd59197c1e.png)
不过,使用Dreamweaver的话,还是需要你懂一些代码知识,所以这种方法仍然不是很适合零基础的纯小白。
如果你什么技术都不懂,也没有时间去学习代码知识、熟悉操作系统,那么!
![84069a61042727e7aefd4a0b0b6b09e8.png](https://img-blog.csdnimg.cn/img_convert/84069a61042727e7aefd4a0b0b6b09e8.png)
Adobe Dreamweaver,简称“DW”,中文名称 "梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
![0113c0beddb4123a18996f7490bf8ea5.png](https://img-blog.csdnimg.cn/img_convert/0113c0beddb4123a18996f7490bf8ea5.png)
现在大学里面,除了计算机专业,很多专业开始有DW的相关课程。
DW是网页设计同学必须要掌握的软件,同样也是大学生必学的涨技能的软件
注意啦注意啦,开始教学啦!
![910851c5fe7b2150b70844750256135d.png](https://img-blog.csdnimg.cn/img_convert/910851c5fe7b2150b70844750256135d.png)
工
作
界
面
![db6c79fce0bf7e050e3703ab9512ee88.png](https://img-blog.csdnimg.cn/img_convert/db6c79fce0bf7e050e3703ab9512ee88.png)
01
初始界面
工具栏全是浮动工具栏(也叫浮动面板)
可以缩小,也可以关闭
利用它来控制对页面的编写和属性设置
先来介绍它的三个最重要的浮动面板
02
启动界面
快速启动相应的任务,或显示/隐藏相应的浮动面板。
如果启动面板是竖的,那么,可以点击它右下角的一个小按钮,它就可以变成横向的了,这时,可能会发现,它的状态栏上也有这个面板上的所有选项。这也就为网页制作提供了方便。
可以直接从右下角点击相应的栏目进入想要进入的对话框。
03
对象面板
主要功能相当于插入菜单,主要是向网页中插入一些对象。如表格、框架、图象、层、Flash动画等,它通过一个下拉菜单,把要插入的选项都包括在了其中。
每一个选项中都有若干个图标,只要在图表上单击一下,就可以插入想要插入的对象了
04
属性面板
![534a37679cdd26846da45e601d056694.png](https://img-blog.csdnimg.cn/img_convert/534a37679cdd26846da45e601d056694.png)
图示为文字属性面板,包含了所要编辑的文字的所有内容,如字体、颜色、大小、连接、缩进等。单击右下角的向下的小三角箭头,会展开属性面板,它把一些不常用的属性也列出来。
属性面板很多,还有图象属性控制面板,层属性控制面板等对象的属性控制面板,用户只要选择要编辑的对象,它就会自动变化。
接下来我们一起来做一个案例吧~
![72482ff7ff167a6a29e73b4e41e355fa.png](https://img-blog.csdnimg.cn/img_convert/72482ff7ff167a6a29e73b4e41e355fa.png)
操
作
步
骤
01丨新建站点
1.打开软件,(DW+HTML语言)点击菜单栏“站点”——新建站点
![3530c4db8cd915fc23cc6a91c350e79e.png](https://img-blog.csdnimg.cn/img_convert/3530c4db8cd915fc23cc6a91c350e79e.png)
2.点击右下角本地文件中站点 新建三个文件夹:分别命名为files、images、other
接着新建一个表格命名为homepage(十一行一列 表格宽度 1024像素)
![beb2f04fc045047b8a37f350edfb08d4.png](https://img-blog.csdnimg.cn/img_convert/beb2f04fc045047b8a37f350edfb08d4.png)
3.缩小软件页面 把素材图片放到新建的imagas文件夹里。
把素材里的倒数第二张的图片插入在表格的第一行顶端。(图是:名称和logo)网站板块介绍:(网站名称+logo、导航条、广告条)
![b0d64e6b7b784d4df27bcd2372220be9.png](https://img-blog.csdnimg.cn/img_convert/b0d64e6b7b784d4df27bcd2372220be9.png)
![385f13fb3b2589f69cb0374674a4d865.png](https://img-blog.csdnimg.cn/img_convert/385f13fb3b2589f69cb0374674a4d865.png)
02丨网页内容
1.在第二行插入微信图片(波妞),调整大小,拉长撑满表格第二行。
![573e038f4ad090f4f7fa40d7359aaa6c.png](https://img-blog.csdnimg.cn/img_convert/573e038f4ad090f4f7fa40d7359aaa6c.png)
2.在第三行插入一行8列的表格
在表格内以此输入以下内容:首页 千与千寻 龙猫 天空之城 起风了 哈尔的移动城堡 幽灵公主 风之谷
选中这个8列的表格,在表格的属性区选择居中对齐方式。
![4dd8ea16ecb5d9c0b0b4bcba70184cc9.png](https://img-blog.csdnimg.cn/img_convert/4dd8ea16ecb5d9c0b0b4bcba70184cc9.png)
3.在第四行插入一个一行两列的表格。把新建的表格的在中间那条分隔线把分隔线往左移,移到想要的位置。再短一点的框框里插入我们需要的图片(老年人图片)。选中图片,然后在图片属性选择所需的高度和宽度。在长的框框里插入文字,直接复制粘贴过来。全选文字:调整样式 属性——默认字体 在弹出的对话框中输入ys1 点击确定 字体大小为24号 (文字素材里的第一段)
mg图片标签 p段落标签
![52a396ceec71ffdacdc21266c0fc6b5e.png](https://img-blog.csdnimg.cn/img_convert/52a396ceec71ffdacdc21266c0fc6b5e.png)
4.在第五行新建一个一行两列的表格。把表格中间的分界线往右移移到想要的位置。在右边的框插入母子图像。拖动图片调整位置
在左边的框框插入早年经历大段文字(调整文字大小)。把早年经历四个字设置成为标题:选中——点击插入——选择。文件——保存
![bee562a18d0989b77bb685af99f65b15.png](https://img-blog.csdnimg.cn/img_convert/bee562a18d0989b77bb685af99f65b15.png)
03丨导航条的制作
1.点击文件files右击新建文件,命名为qianyuqianxun,双击新建的文件,在新打开的页面中的标题输入qianyuqianxun。
返回首页——选中千与千寻文本——点击属性——点HTML——点击链接后面的小圆圈标识拖动到qianyuqianxun文件处,
![bc83a62123962d4dfaea1641c58a58e4.png](https://img-blog.csdnimg.cn/img_convert/bc83a62123962d4dfaea1641c58a58e4.png)
2.点击右下角新建的《千与千寻》文件,打开新的页面之后插入一个四行一列的表格。选中整个表格——居中对齐。插入logo在第二行插入一个一行两列的表格。把中间的分隔线拖到想要的位置。在左边的框框选择《千与千寻》素材图片任意一张,调整大小。在右边的框框插入一个两行三列的表格,在表格的第二行分别插入三张图片。在第一行分别输入千与千寻标题,点击代码——找到《千与千寻》标题的代码。设置为二级标题的效果。
04丨插入图片和文字素材
新建标题,之后调整字体、对齐方式。
![abebf50bd4527c7136d7a93a76b437fc.png](https://img-blog.csdnimg.cn/img_convert/abebf50bd4527c7136d7a93a76b437fc.png)
05丨返回首页添加链接,链接入千与千寻
之后按照上述步骤,添加哈尔的移动城堡链接、龙猫链接等,保存并预览,关于宫崎骏的网页就制作好了。
到这里我们的教学就结束啦
最后,再给大家留一点小福利
赶快学起来学起来!
![aa1fd12730e41a8bfe1c5e90a1e2deb4.png](https://img-blog.csdnimg.cn/img_convert/aa1fd12730e41a8bfe1c5e90a1e2deb4.png)
![6d1c62cddcd62fb7b7345ae126997a49.png](https://img-blog.csdnimg.cn/img_convert/6d1c62cddcd62fb7b7345ae126997a49.png)
![3a5ceb7c4362bfe6885b0e97a0e0eade.png](https://img-blog.csdnimg.cn/img_convert/3a5ceb7c4362bfe6885b0e97a0e0eade.png)