您好,欢迎来到微智科技网。
搜索
您的当前位置:首页网页制作步骤实验报告

网页制作步骤实验报告

来源:微智科技网
一、网页制作步骤:

1、使用Dreamweaver建立一个本地站点并命名为“新”, 包含以下

几个文件和文件夹:图片文件夹(photos);音乐文件夹(music)等。

2、在站点“新”中新建一个名为“欢迎进入”的网页文件,进而开

始网页制作。

3、首先插入背景图片,在设计网页空白处点击右键—页面属性—背景图片浏览—选择图片。

4、插入图片,装饰页面,为了固定图片,先插入层,插入记录—AP Div,在层里点击左键,再按插入记录—图像,改变位置和大小。(以后插入层和图片同此。) 结果如图:

5、在插入一层做网页导航。 结果如图:

6再插入层写标题。结果如图。

7.插入图片,在图片上插如层,在ENTER上点击右键—创建链接到文件名为“我们の家”,如图:

8、经过位置改变,字体大小修改,完成导入页面。

9、在站点“新”中新建一个名为“我们の家”的网页文件,进而开

始网页制作。

10、插入背景,装饰图片。 11、制作导航栏,如图

12、选中登陆点击右键,创建链接到登陆页面。 13、登陆页面的制作步骤:

(1)插入背景,装饰图片,以及标题。 (2)插入表格,插入表单,如图:

结果如图:

(3)“返回”创建链接回首页。完成登陆页面。

14、继续首页制作。制作导航栏,结果如图:

用行为做出,当鼠标靠近中山时,Welcome 的那个层隐藏,中山十景,名优特产,推荐路线的层显示,当鼠标离开时则相反。具体步骤如图:

其余同此。

15、打开“时间轴”面板,选中创建的层“我们の家”将层拖到“时间轴”面板的帧控制区中,出现一条紫色的动画线段。

在线段任意一帧点击右键,选择“添加关键帧”,再往后点的帧点击右键,选择“记录AP元素的路径”,任意拖动层, 如图:

点击自动播放和循环按钮,即可。

16、插入层,插入图片,如图:

用行为的方法,使得鼠标靠近小图时,在右边显示同图片的放大版,其他大图隐藏。 如图:

17、插入音频。

插入层,点击层里面,点击菜单中的“插入记录”选择“媒体—插件“,选择插入的音频,移动好播放器的位置即可。如图:

18、插入视频。

插入层,点击层里面,点击菜单中的“插入记录”选择“媒体—插件“,选择插入的视频,移动好播放器的位置即可。如图:

结果如图:

19、制作点击图片即可将该图设为网页的背景。代码如图:

效果如图:

20、由于首页和子页面背景相差较大,页面板块和颜色不太协调,于是进行重新排版和改变不协调的因素。

三、最终设计结果:

导入页面:

首页:

登陆页面:

总结:

这次的网页我们花了很长的时间,很多心机去做,可是经常得到的效果让我们不甚满意,不过制作完这个网页以后,我们也获得了很多,不仅仅是网页设计技术,还有如何跟同学协调合作,接下来是我们做完后得到的体会和心得。

我们这次制作,最大的问题就是我们没有从一开始就设计好我们要做的网页,包括主题,内容,网页风格,网页排版等,导致在做完以后觉得不好,又重新再做过,做了一些无用功。

对于色彩的搭配,网页色彩搭配和谐,可以让人觉得网页整体十分协调舒服,不仅如此,字体颜色与背景图片相搭配,网页不会显得突兀。

对于布局,要找到适当的材料,通过适当的布局才会得到好的效果,素材和布局同样重要。要通过合适的框架,表格,图片,选择适当的纵横混合排版或是不规则排版。

关于层,层在我们的网页是一个很重要的元素,加入层以后才可以将图片或文字等随意的移动位置,可以用进行行为、时间轴等技术的操作,可是插入过多的层也会使得制作难度提升,有时小层被大层遮挡,把小层找出来也是个不小的过程。

关于图片,选取不仅要与主题吻合,色彩搭配协调河和谐,还要注意图片像素,还要建立一个的文件夹存放在正确的路径中,这样在浏览的时候才会显示出来,想让图片不一样,还可以通过PS进行抠图等。

关于插入音频和视频,注意插入的格式计算机能否支持播放,不能的话要转换格式。

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- 7swz.com 版权所有 赣ICP备2024042798号-8

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务