2022年Dreamweaver之网页制作报 .pdf

《2022年Dreamweaver之网页制作报 .pdf》由会员分享，可在线阅读，更多相关《2022年Dreamweaver之网页制作报 .pdf（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、多媒体技术及应用报告学生姓名：嘎嘎学号：6100310211 专业班级：自动化 103 班网页制作报告 (目录 )1. 设计目的3名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 11 页 - - - - - - - - - 1.1 阐述该主题网站的设计意图和创意 3 1.2 简单介绍自己的个人网站 3 2. 设计思想32.1 在设计中主要用的技术 3 2.2 网页基本的框架 3 3. 网页详细设计分析4 3.1建立布局 4 3.2网页中的图像 5 3.2.1在网页中插入图

2、像 5 3.2.2图像的各种属性设置 5 3.2.3怎样编辑网页中的图像 6 3.3插入视频和音乐 6 3.4设置图片循环滚动 7 3.5设置链接 7 3.6做个外网搜索栏 8 3.7常用的显示 - 时间天气 8 3.8建立子网和友情链接 9 3.9文段的处理 94. 最终效果图9 5、结论总结111、设计目的1.1 阐述该个人网站的设计意图和创意。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 11 页 - - - - - - - - - 本课程的设计目的是通过实践让我

3、们学会利用Dreamweaver cs6 开发制作网站，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs6 可视化开发工具进行网页开发的方法；了解网页设计制作过程。 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求， 给出网页设计方案， 可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs5、Dreamweaver cs6 等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。1.2 简单介绍自己的个人网站我本次主要是设计的以“迈克尔约

4、瑟夫杰克逊”为主题的网页，针对他的传奇一生及对世界巨大的贡献与巨大的影响力做了介绍。2、设计思想2.1 在设计中主要用的技术利用 Dreamweaver CS6制作一个关于“Michael Jackson”的网站，利用表格、行为、层和链接等网页设计技术设计页面。2.2 网页主要的页面本网站以迈克尔杰克逊的人生经历为素材，主要讲解了他人生的各个阶段、他取得的巨大成就、他面临的困境、他的处世态度的内容。主网设计的几大亮点：视频和音乐的点播、 滚动图片的浏览、 百度的在线检索、 实时的时间天气、热点的使用、链接的创建、返回顶点等。主网设有8 个栏目，图片含有单多个链接。大致结构如下图所示。形象图、图

5、片链接长 =600 高=180图片滚动栏、鼠标即停、链接 350时间天气（更新、滚动、鼠标即停、联网 350搜索栏： size(80)视频栏：长： 500 高： 376 （迈克尔宣传片、可控开关、默认不自动简历栏：长： 300 高： 440音乐栏：长： 500 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 11 页 - - - - - - - - - 播放）高： 60（开关按钮、循环、默认自动播放）阶段 1：长： 325 高： 400 （分段、字体、链接）阶段 2：长：

6、 325 高： 400阶段 3：长： 325 高： 400阶段 4：长： 325 高： 400经典语录栏：长1300 高： 300 （分段、字体、链接、子网）成就栏：长1300 高： 300 （分段、字体、链接）自由评价栏：长1300 高： 300 （分段、字体、心情评价窗）广告分享链接栏：长1300 高： 50另有图片背景，尺寸略有偏差。3、网页详细设计分析3.1 建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs6 是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出

7、一个协调合理的页面。1. 进入布局模式，插入布局表格。建立一个大概的布局，主要方法是利用表格的嵌套方式。 2.定义背景风格：使用图片进行设置，代码如下： body background: url(音乐壁纸 /t (3).jpg); 图像设置确定只要选中，可在底部进行修改；另一种是直接通过对代码的编写，如下： Width、height 是对图片的长宽比进行设置。 3.2.2图像的各种属性设置 (1) 设置图像环绕方式： 一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像

8、的环绕方式来实现。在网页中图像的环绕方式有两种：左环绕：图像在左边，文本在图像的右边进行环绕。右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式， 同样，如果选“右” ，图像就被设置为右环绕方式。(2) 设置图像缩放比例： 网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是 800600 的窗口，还是 1024768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里

9、图像都能正常的显示外观。设置图像缩放比例的步骤如下：1. 选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 11 页 - - - - - - - - - 属性”菜单项，弹出一个“图像属性”对话框. 2. 在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。 外还可以在“外观”选项卡的“水平间距” 和“垂直间距

10、”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。3.2.3 怎样编辑网页中的图像在 Dreamweaver cs6 中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我还利用了photoshop cs5 、美图秀秀对图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。3.3 插入视频音乐关于视频音乐的插入， 使用 Dreamweaver 中的“插入”命令，选择媒体，在选择插件，选中你要的视频音乐，确定即可。当然，通

11、过编码来说可以做到更加精细准确，比如大小，播放方式，循环与否等，代码如下：1、视频： 2、音乐： 3.4 设置图片循环滚动要实现图片循环向左滚动，鼠标指向即停，图片上建立链接（每个图片均有一个链接）。主要原理如下：把连续图片再复制一份接到尾部，待第一张图片滚完之后被复制的接着滚动。所示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 11 页 - - - - - - - - - 主要代码如下： var speed=20/速度数值越大速度越慢 demo2.innerHTML

12、=demo1.innerHTML function Marquee() if(demo2.offsetWidth-demo.scrollLeft=0) demo.scrollLeft-=demo1.offsetWidth else demo.scrollLeft+ var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() clearInterval(MyMar) demo.onmouseout=function() MyMar=setInterval(Marquee,speed) 3.5 设置链接（1）建立单链接， 选中图

13、片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank 设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。（2）建立多链接， 即单图多链接，主要方法是通过热点来实现的。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 11 页 - - - - - - - - - 上图中，左下角有三个几何图形，用于确定热点的区域大小，形状。要对其属性进行编辑，如：链接、目

14、标。选取多个热点即可建立多个链接。3.6 做个外网搜索栏以百度为搜索引擎，点击按钮即显示搜索结果，设置搜索框大小，背景颜色，搜索按钮表述等处理，详情见代码，如下： 3.7 常用的显示 -时间天气时间来说，同步电脑的系统时间，不需要联网；而天气，则需联网随时更新，从天气网站获取天气数据，并显示，代码如下： setInterval(t.innerText=new Date().toLocaleString()+ 星期+日一二三四五六.charAt(new Date().getDay();,1000); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - -

15、 - - - - 名师精心整理 - - - - - - - 第 8 页，共 11 页 - - - - - - - - - 3.8 建立子网和友情链接主要是对图片、文字进行链接处理。子网较为简单，主要元素有背景、音乐、文字、返回顶点按钮等。友情链接在这里就不做特殊处理，目标只是指向本主网或百度百科。代码大致如下： 3.9 文段的处理对文字的设置，可以采取宏定义的方式。定义各种风格的字体，颜色，大小、 ；定义段间距、行间距等，然后再在需要处理的文档位置进行定义。代码如下： 4、最终效果图名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - -

16、 名师精心整理 - - - - - - - 第 9 页，共 11 页 - - - - - - - - - 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 11 页 - - - - - - - - - 5、结论总结这次实践我也遇到了很多的困难，比如：一开始对dreamweaver的探索和熟悉，之后遇到包括搜索栏的、时间栏的、天气栏的、还有就是滚动图片的，最大的莫过于初始时表格布局没做好，尺寸错了， 结果网页乱成一团。 这个简单的错误却很致命，因为我花了大量的时间才发现。最

17、后，能成功也是基于此的。所以，认真仔细真的很重要。通过这次网页课程设计激发学习兴趣，调动学习的自觉性， 自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。 总体来说，整个学期的学习过程， 我学会了很多知识，在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、 页面的排版设置、 背景及其整套网页的色调等很多东西。本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的 web页面。总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 11 页 - - - - - - - - -