《Dreamweaver之网制作报告》由会员分享，可在线阅读，更多相关《Dreamweaver之网制作报告（9页珍藏版）》请在金锄头文库上搜索。
1、多媒体技术及应用报告学生姓名：嘎嘎学 号：专业班级： 自动化103班网页制作报告（目录）3该主题网站简 单 介 绍 自3333的图像插入视频和音乐6设置图片循环滚动 7设置链接7做个外网搜索栏8常用的显示-时间天气8建立子网和友情链接 9文段的处理995、结论总结111、设计目的阐述该个人网站的设计意图和创意。本课程的设计目的是通过实践让我们学会利用Dreamweaver cs6开发制作网站，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌 握运用Dreamweavercs6可视化开发工具进行网页开发的方法；了解网页设计制作过程。 通过设计达到掌握网页设计、制作的
2、技巧。了解和熟悉网页设计的基础知识和实现技巧。 根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要 求的网页设计作品。熟练掌握 Photoshop cs5、Dreamweavercs6等软件的的操作和应用。 增强动手实践能力，进一步加强自身综合素质。简单介绍自己的个人网站我本次主要是设计的以“迈克尔约瑟夫杰克逊”为主题的网页，针对他的传奇 一生及对世界巨大的贡献与巨大的影响力做了介绍。2、设计思想在设计中主要用的技术利用DreamweaverCS6制作一个关于“ Michael Jackson ”的网站，利用表格、行为、 层和链接等网页设计技术设计页面。网页主要的页面
3、本网站以迈克尔杰克逊的人生经历为素材，主要讲解了他人生的各个阶段、他取 得的巨大成就、他面临的困境、他的处世态度的内容。主网设计的几大亮点：视频和音 乐的点播、滚动图片的浏览、百度的在线检索、实时的时间天气、热点的使用、链接的 创建、返回顶点等。主网设有 8个栏目，图片含有单多个链接。大致结构如下图所示。形象图、图片链接长=600 高=180图片滚动栏、鼠标即停、链接350时间天气（更新、滚动、鼠标即停、联网350搜索栏：size（80）视频栏：长：500高：376（迈克尔宣传片、可控幵关、默认不自动播放）简历栏：长：300咼：440音乐栏：长：500高：60 （幵关按钮、循环、默认自动播放）
4、阶段1：长：325阶段2：长：325阶段3：长：325阶段4：长：325咼：400（分段、字体、链接）咼：400咼：400咼：400经典语录栏：长1300咼：300（分段、字体、链接、子网）成就栏：长1300咼：300（分段、字体、链接）自由评价栏：长1300咼：300（分段、字体、心情评价窗）广告分享链接栏：长1300高：50另有图片冃景，尺寸略有偏差。3、网页详细设计分析建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweavercs6是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的 出色表现，更受青睐。大家都知道，没有表格的帮助，很难
5、组织出一个协调合理的页面。1.进入布局模式，插入布局表格。建立一个大概的布局，主要方法是利用表格的嵌 套方式。2.定义背景风格：使用图片进行设置，代码如下：body background: url( 音乐壁纸 /t (3).jpg);/style 网页中的图像图像传输是 html 的真正魅力所在，它与文字相比具有显着的优点：一是直观，人 眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地 表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页 做得像一幅风景画，浏览者一定会流连忘返(如果图片很大，效果会适得其反) 。 图 像文件的格式有几十种，如 G
6、IF、JPEG BMP等，我们这里用的格式是JPG 利用 Dreamweavercs6 可以方便地在网页中插入图像，还可以设置图像边框、大小、和 位置，并且可以直接对图像进行编辑。 在网页中加入图像的操作非常简单， 一般有两种 方法：一是通过插入 图像设置确定 只要选中， 可在底部进行修改； 另一种是直接通 过对代码的编写，如下：img src= 广告分享 / width=54 height=30/ Width 、 height 是对图片的长宽比进行设置。(1) 设置图像环绕方式： 一般情况下一幅图像只能与一行文字处在同一高度，但有 时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一
7、幅图像，要求右 边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在 网页中图像的环绕方式有两种： 左环绕：图像在左边，文本在图像的右边进行环绕。 右环绕：图像在右边，文本在图像的左边进行环绕。 在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并 单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右” ，图像就被设置 为右环绕方式。(2) 设置图像缩放比例： 网页设计的一个重要原则就是网页的兼容性，对于不同的 浏览器或者不同的分辨率，不管是 800X 600的窗口，还是1024X 768的窗口，网页都 要能正常的显示。设置图像缩放比例就是
8、将图像设置为大小可以按比例变化，与浏览 器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1. 选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性” 菜单项，弹出一个“图像属性”对话框 .2. 在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面 的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确 定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行 设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指 图像与周围元素在垂直方向的间距。在 D
9、reamweaver cs6 中，可以使用“图片”工具栏中的各种工具对网页中的图像 进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我还利用了photoshop cs5、美图秀秀对图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。插入视频音乐关于视频音乐的插入，使用 Dreamweaver 中的“插入”命令，选择媒体，在选择 插件，选中你要的视频音乐，确定即可。当然，通过编码来说可以做到更加精细准确， 比如大小，播放方式，循环与否等，代码如下：1、视频：2、音乐： 设置图片循环滚动要实现图片循环向左滚动， 鼠标指向即停， 图片上
10、建立链接 （每个图片均有一个链 接）。主要原理如下：把连续图片再复制一份接到尾部，待第一张图片滚完之后被复制的接着滚动。所示：主要代码如下： var speed=20oLocaleString()+ 星 期 + 日 一 二 三 四 五 六 .charAt(newDate().getDay();,1000);建立子网和友情链接 主要是对图片、文字进行链接处理。子网较为简单，主要元素有背景、音乐、文 字、返回顶点按钮等。友情链接在这里就不做特殊处理，目标只是指向本主网或百度 百科。代码大致如下： 文段的处理 对文字的设置，可以采取宏定义的方式。定义各种风格的字体，颜色，大小、 ；定 义段间距、行间
11、距等，然后再在需要处理的文档位置进行定义。代码如下：4、最终效果图5、结论总结这次实践我也遇到了很多的困难，比如：一开始对 dreamweaver的探索和熟悉，之后遇到包括搜索栏的、时间栏的、天气栏的、还有就是滚动图片的，最大的莫过于初始 时表格布局没做好，尺寸错了，结果网页乱成一团。这个简单的错误却很致命，因为我 花了大量的时间才发现。最后，能成功也是基于此的。所以，认真仔细真的很重要。通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口， 运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性 的个人网页。总体来说，整个学期的学习过程，我学会了很多
12、知识，在此次网页设计中， 我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探 索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的 处理、页面的排版设置、背景及其整套网页的色调等很多东西。本次课程设计不是很好， 页面过于简单，创新意识反面薄弱，这是我需要提高的地方。需要学的地方还有很多， 需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想， 我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设 计的热情和执着，我将来设计出的网页会更加专业，更完善。
