《dreamweaver之网页制作报告》由会员分享，可在线阅读，更多相关《dreamweaver之网页制作报告（11页珍藏版）》请在金锄头文库上搜索。
1、多媒体技术及应用 报 告学生姓名： 嘎嘎 学 号： 6100310211 专业班级： 自动化103班 网页制作报告(目录)1.设计目的 31.1 阐述该主题网站的设计意图和创意 31.2简单介绍自己的个人网站 32.设计思想 32.1在设计中主要用的技术 32.2 网页基本的框架 33.网页详细设计分析 4 3.1建立布局 4 3.2网页中的图像 5 3.2.1在网页中插入图像 53.2.2图像的各种属性设置 53.2.3怎样编辑网页中的图像 6 3.3插入视频和音乐 6 3.4设置图片循环滚动 7 3.5设置链接 7 3.6做个外网搜索栏 8 3.7常用的显示-时间天气 8 3.8建立子网和
2、友情链接 9 3.9文段的处理 94.最终效果图 95、结论总结 111、设计目的1.1 阐述该个人网站的设计意图和创意。本课程的设计目的是通过实践让我们学会利用Dreamweaver cs6开发制作网站，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs6可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs5、Dreamwea
3、ver cs6等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。1.2简单介绍自己的个人网站我本次主要是设计的以“迈克尔约瑟夫杰克逊”为主题的网页，针对他的传奇一生及对世界巨大的贡献与巨大的影响力做了介绍。2、设计思想2.1在设计中主要用的技术利用Dreamweaver CS6制作一个关于“Michael Jackson”的网站，利用表格、行为、层和链接等网页设计技术设计页面。2.2 网页主要的页面本网站以迈克尔杰克逊的人生经历为素材，主要讲解了他人生的各个阶段、他取得的巨大成就、他面临的困境、他的处世态度的内容。主网设计的几大亮点：视频和音乐的点播、滚动图片的浏览、百度的在线检
4、索、实时的时间天气、热点的使用、链接的创建、返回顶点等。主网设有8个栏目，图片含有单多个链接。大致结构如下图所示。形象图、图片链接长=600 高=180图片滚动栏、鼠标即停、链接350时间天气（更新、滚动、鼠标即停、联网350搜索栏：size(80)视频栏：长：500高：376（迈克尔宣传片、可控开关、默认不自动播放）简历栏：长：300高：440音乐栏：长：500高：60（开关按钮、循环、默认自动播放）阶段1：长：325高：400（分段、字体、链接）阶段2：长：325高：400阶段3：长：325高：400阶段4：长：325高：400经典语录栏：长1300高：300（分段、字体、链接、子网）成就
5、栏：长1300高：300（分段、字体、链接）自由评价栏：长1300高：300（分段、字体、心情评价窗）广告分享链接栏：长1300高：50另有图片背景，尺寸略有偏差。3、网页详细设计分析3.1建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs6是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。1.进入布局模式，插入布局表格。建立一个大概的布局，主要方法是利用表格的嵌套方式。 2.定义背景风格：使用图片进行设置，代码如下：body background
6、: url(音乐壁纸/t (3).jpg);图像设置确定只要选中，可在底部进行修改；另一种是直接通过对代码的编写，如下：Width、height是对图片的长宽比进行设置。 3.2.2图像的各种属性设置 (1)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：左环绕：图像在左边，文本在图像的右边进行环绕。右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框
7、，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。(2)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800600的窗口，还是1024768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2.在“大小”栏中选中“指定大小”复选框，同时选中
8、“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。3.2.3怎样编辑网页中的图像在Dreamweaver cs6中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我还利用了photoshop cs5、美图秀秀对图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要
9、求。 3.3插入视频音乐 关于视频音乐的插入，使用 Dreamweaver 中的“插入”命令，选择媒体，在选择插件，选中你要的视频音乐，确定即可。当然，通过编码来说可以做到更加精细准确，比如大小，播放方式，循环与否等，代码如下：1、视频： 2、 音乐： 3.4设置图片循环滚动要实现图片循环向左滚动，鼠标指向即停，图片上建立链接（每个图片均有一个链接）。主要原理如下：把连续图片再复制一份接到尾部，待第一张图片滚完之后被复制的接着滚动。所示：主要代码如下： var speed=20/速度数值越大速度越慢 demo2.innerHTML=demo1.innerHTML function Marquee() if(demo2.offsetWidth-d
