Dreamweaver之网页制作报告
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
《多媒体技术及应用》
报告
学生姓名:嘎嘎
学号:
专业班级:自动化103班
网页制作报告(目录)
1.设计目的3
阐述该主题网站的设计意图和创意 3
简单介绍自己的个人网站 3
2.设计思想
在设计中主要用的技术 3
网页基本的框架 3
3.网页详细设计分析4
建立布局 4
网页中的图像 5
5
5
6
插入视频和音乐 6
设置图片循环滚动 7
设置链接 7
做个外网搜索栏 8
常用的显示-时间天气 8
建立子网和友情链接 9
文段的处理 9
4.最终效果图
5、结论总结
1、设计目的
阐述该个人网站的设计意图和创意。
本课程的设计目的是通过实践让我们学会利用Dreamweaver cs6开发制作网站,以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例,理解并初步掌握运用Dreamweaver cs6可视化开发工具进行网页开发的方法;了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs5、Dreamweaver cs6等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素质。
简单介绍自己的个人网站
我本次主要是设计的以“迈克尔·约瑟夫·杰克逊”为主题的网页,针对他的传奇一生及对世界巨大的贡献与巨大的影响力做了介绍。
2、设计思想
在设计中主要用的技术
利用Dreamweaver CS6制作一个关于“Michael Jackson”的网站,利用表格、行为、层和链接等网页设计技术设计页面。
网页主要的页面
本网站以迈克尔·杰克逊的人生经历为素材,主要讲解了他人生的各个阶段、他取得的巨大成就、他面临的困境、他的处世态度的内容。主网设计的几大亮点:视频和音
乐的点播、滚动图片的浏览、百度的在线检索、实时的时间天气、热点的使用、链接的创建、返回顶点等。主网设有8个栏目,图片含有单多个链接。大致结构如下图所示。
3、网页详细设计分析
建立布局
在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。Dreamweaver cs6是大多数人设计网页的称手兵器,也是众多入门者的捷径。特别是其在布局方面的出色表现,更受青睐。大家都知道,没有表格的帮助,很难组织出一个协调合理的页面。
1.进入布局模式,插入布局表格。建立一个大概的布局,主要方法是利用表格的嵌套
方式。
2.定义背景风格:使用图片进行设置,代码如下:
body {background: url("音乐壁纸/t (3).jpg");}
网页中的图像
图像传输是html的真正魅力所在,它与文字相比具有显着的优点:一是直观,人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度;二是能更清楚地表达细节内容。正是由于这些优点,所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画,浏览者一定会流连忘返(如果图片很大,效果会适得其反)。图像文件的格式有几十种,如GIF、JPEG、BMP等,我们这里用的格式是JPG。
利用Dreamweaver cs6可以方便地在网页中插入图像,还可以设置图像边框、大小、和位置,并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单,一般有两种方法:一是通过插入>图像>设置>确定>只要选中,可在底部进行修改;另一种是直接通过对代码的编写,如下:
Width、height是对图片的长宽比进行设置。
(1)设置图像环绕方式:一般情况下一幅图像只能与一行文字处在同一高度,但有时需要将图像和文字分开,且两者互不影响。比如在网页左边插入一幅图像,要求右边的文字就像没有图像时可以多行输入,这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种:
①左环绕:图像在左边,文本在图像的右边进行环绕。
②右环绕:图像在右边,文本在图像的左边进行环绕。
在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框,选择“左”选项,并单击“确定”按钮,图像就被设置为左环绕方式,同样,如果选“右”,图像就被设置为右环绕方式。
(2)设置图像缩放比例:网页设计的一个重要原则就是网页的兼容性,对于不同的浏览器或者不同的分辨率,不管是800×600的窗口,还是1024×768的窗口,网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化,与浏览器的大小成一固定比例,这样在不同大小的浏览器窗口里图像都能正常的显示外观。
设置图像缩放比例的步骤如下:
1.选中网页中的图像,单击鼠标右键,在弹出的快捷菜单里,选择“图像属性”菜单项,弹出一个“图像属性”对话框.
2.在“大小”栏中选中“指定大小”复选框,同时选中“宽度”和“高度”下面的“百分比”单选按钮,然后在“宽度”和“高度”栏里输入想显示的比例,单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置,水平间距是指图像与周围元素在水平方向的间距,以象素为单位;垂直间距指图像与周围元素在垂直方向的间距。
在Dreamweaver cs6中,可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑,编辑功能主要有:图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。
另外,为了使图片更符合要求,我还利用了photoshop cs5、美图秀秀对图片进行了处理,使得图片看起来更加精细美观,符合我们的主题要求。
插入视频音乐
关于视频音乐的插入,使用 Dreamweaver 中的“插入”命令,选择媒体,在选择插件,选中你要的视频音乐,确定即可。当然,通过编码来说可以做到更加精细准确,比如大小,播放方式,循环与否等,代码如下:
1、视频:
2、音乐:
设置图片循环滚动
要实现图片循环向左滚动,鼠标指向即停,图片上建立链接(每个图片均有一个链接)。主要原理如下:
把连续图片再复制一份接到尾部,待第一张图片滚完之后被复制的接着滚动。所示:
主要代码如下: