dw如何制作图片自动切换效果_震惊!制作网页的秘籍竟然是!

580048999ec5aa3bdef712f148b002f3.png

我们每天都会浏览大量网页

那么大家有想过自己制作一个

属于自己的网页吗?

如果没有

那么现在就可以开始想了

17275f3125bf564735d43ec078b94b14.png

作为一个新手

要如何制作出

一个美观漂亮、功能实用的网站?

这就需要你用到网页制作软件了

6b398ad3d685474801a80628f218bdd0.png

Dreamweaver

网页制作软件有哪些?不同的人群有不同的适用软件。如果你懂一些编程知识,那么可以考虑用网页制作软件Dreamweaver来编辑网页。它是集网页制作管理网站网页代码编辑器,对新手来说,还是比较快上手的,代码提示很强大,可以方便新手更容易懂代码,也为优化网站打下了基础。

b78ef0239de8906d44710fdd59197c1e.png

不过,使用Dreamweaver的话,还是需要你懂一些代码知识,所以这种方法仍然不是很适合零基础的纯小白。

如果你什么技术都不懂,也没有时间去学习代码知识、熟悉操作系统,那么!

84069a61042727e7aefd4a0b0b6b09e8.png

Adobe Dreamweaver,简称“DW”,中文名称 "梦想编织者",是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器,DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制跨越浏览器限制充满动感的网页

0113c0beddb4123a18996f7490bf8ea5.png

现在大学里面,除了计算机专业,很多专业开始有DW的相关课程。

DW是网页设计同学必须要掌握的软件,同样也是大学生必学的涨技能的软件

注意啦注意啦,开始教学啦!

910851c5fe7b2150b70844750256135d.png

db6c79fce0bf7e050e3703ab9512ee88.png

01

初始界面

工具栏全是浮动工具栏(也叫浮动面板)

可以缩小,也可以关闭

利用它来控制对页面的编写和属性设置

先来介绍它的三个最重要的浮动面板

02

启动界面

快速启动相应的任务,或显示/隐藏相应的浮动面板。

如果启动面板是竖的,那么,可以点击它右下角的一个小按钮,它就可以变成横向的了,这时,可能会发现,它的状态栏上也有这个面板上的所有选项。这也就为网页制作提供了方便。

可以直接从右下角点击相应的栏目进入想要进入的对话框。

03

对象面板

主要功能相当于插入菜单,主要是向网页中插入一些对象。如表格、框架、图象、层、Flash动画等,它通过一个下拉菜单,把要插入的选项都包括在了其中。

每一个选项中都有若干个图标,只要在图表上单击一下,就可以插入想要插入的对象了

04

属性面板

534a37679cdd26846da45e601d056694.png

图示为文字属性面板,包含了所要编辑的文字的所有内容,如字体、颜色、大小、连接、缩进等。单击右下角的向下的小三角箭头,会展开属性面板,它把一些不常用的属性也列出来。

 属性面板很多,还有图象属性控制面板,层属性控制面板等对象的属性控制面板,用户只要选择要编辑的对象,它就会自动变化。

接下来我们一起来做一个案例吧~

72482ff7ff167a6a29e73b4e41e355fa.png

01丨新建站点

1.打开软件,(DW+HTML语言)点击菜单栏“站点”——新建站点

3530c4db8cd915fc23cc6a91c350e79e.png

2.点击右下角本地文件中站点 新建三个文件夹:分别命名为files、images、other

接着新建一个表格命名为homepage(十一行一列 表格宽度 1024像素)

beb2f04fc045047b8a37f350edfb08d4.png

3.缩小软件页面 把素材图片放到新建的imagas文件夹里。

把素材里的倒数第二张的图片插入在表格的第一行顶端。(图是:名称和logo)网站板块介绍:(网站名称+logo、导航条、广告条)

b0d64e6b7b784d4df27bcd2372220be9.png 385f13fb3b2589f69cb0374674a4d865.png

02丨网页内容

1.在第二行插入微信图片(波妞),调整大小,拉长撑满表格第二行。

573e038f4ad090f4f7fa40d7359aaa6c.png

2.在第三行插入一行8列的表格
在表格内以此输入以下内容:首页 千与千寻 龙猫 天空之城 起风了 哈尔的移动城堡 幽灵公主 风之谷
选中这个8列的表格,在表格的属性区选择居中对齐方式。

4dd8ea16ecb5d9c0b0b4bcba70184cc9.png

3.在第四行插入一个一行两列的表格。把新建的表格的在中间那条分隔线把分隔线往左移,移到想要的位置。再短一点的框框里插入我们需要的图片(老年人图片)。选中图片,然后在图片属性选择所需的高度和宽度。在长的框框里插入文字,直接复制粘贴过来。全选文字:调整样式 属性——默认字体 在弹出的对话框中输入ys1 点击确定 字体大小为24号 (文字素材里的第一段)
mg图片标签  p段落标签

52a396ceec71ffdacdc21266c0fc6b5e.png

4.在第五行新建一个一行两列的表格。把表格中间的分界线往右移移到想要的位置。在右边的框插入母子图像。拖动图片调整位置
在左边的框框插入早年经历大段文字(调整文字大小)。把早年经历四个字设置成为标题:选中——点击插入——选择。文件——保存

bee562a18d0989b77bb685af99f65b15.png

03丨导航条的制作

1.点击文件files右击新建文件,命名为qianyuqianxun,双击新建的文件,在新打开的页面中的标题输入qianyuqianxun。
返回首页——选中千与千寻文本——点击属性——点HTML——点击链接后面的小圆圈标识拖动到qianyuqianxun文件处,

bc83a62123962d4dfaea1641c58a58e4.png

2.点击右下角新建的《千与千寻》文件,打开新的页面之后插入一个四行一列的表格。选中整个表格——居中对齐。插入logo在第二行插入一个一行两列的表格。把中间的分隔线拖到想要的位置。在左边的框框选择《千与千寻》素材图片任意一张,调整大小。在右边的框框插入一个两行三列的表格,在表格的第二行分别插入三张图片。在第一行分别输入千与千寻标题,点击代码——找到《千与千寻》标题的代码。设置为二级标题的效果。

04丨插入图片和文字素材

新建标题,之后调整字体、对齐方式。

abebf50bd4527c7136d7a93a76b437fc.png

05丨返回首页添加链接,链接入千与千寻

之后按照上述步骤,添加哈尔的移动城堡链接、龙猫链接等,保存并预览,关于宫崎骏的网页就制作好了。

68a50d96a37ee8cbb186443a747028fe.png

到这里我们的教学就结束啦

最后,再给大家留一点小福利

赶快学起来学起来! 

aa1fd12730e41a8bfe1c5e90a1e2deb4.png 6d1c62cddcd62fb7b7345ae126997a49.png 3a5ceb7c4362bfe6885b0e97a0e0eade.png
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值