Dreamweaver之网制作报告Word格式.docx
《Dreamweaver之网制作报告Word格式.docx》由会员分享，可在线阅读，更多相关《Dreamweaver之网制作报告Word格式.docx（8页珍藏版）》请在冰豆网上搜索。
本课程的设计目的是通过实践让我们学会利用Dreamweavercs6开发制作网站，以便能较全面地理解、掌握和综合运用所学的知识。
结合具体的开发案例，理解并初步掌握运用Dreamweavercs6可视化开发工具进行网页开发的方法；
了解网页设计制作过程。
通过设计达到掌握网页设计、制作的技巧。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。
熟练掌握Photoshopcs5、Dreamweavercs6等软件的的操作和应用。
增强动手实践能力，进一步加强自身综合素质。
1.2简单介绍自己的个人网站
我本次主要是设计的以“迈克尔·
约瑟夫·
杰克逊”为主题的网页，针对他的传奇一生及对世界巨大的贡献与巨大的影响力做了介绍。
2、设计思想
2.1在设计中主要用的技术
利用DreamweaverCS6制作一个关于“MichaelJackson”的网站，利用表格、行为、层和链接等网页设计技术设计页面。
2.2网页主要的页面
本网站以迈克尔·
杰克逊的人生经历为素材，主要讲解了他人生的各个阶段、他取得的巨大成就、他面临的困境、他的处世态度的内容。
主网设计的几大亮点：
视频和音乐的点播、滚动图片的浏览、XX的在线检索、实时的时间天气、热点的使用、链接的创建、返回顶点等。
主网设有8个栏目，图片含有单多个链接。
大致结构如下图所示。
形象图、图片链接
长=600高=180
图片滚动栏、鼠标即停、链接350
时间天气
（更新、滚动、鼠标即停、联网350
搜索栏：
size（80）
视频栏：
长：
500
高：
376
（迈克尔宣传片、可控开关、默认不自动播放）
简历栏：
300
440
音乐栏：
60（开关按钮、循环、默认自动播放）
阶段1：
325
400
（分段、字体、链接）
阶段2：
阶段3：
阶段4：
经典语录栏：
长1300
（分段、字体、链接、子网）
成就栏：
自由评价栏：
（分段、字体、心情评价窗）
广告分享链接栏：
50
另有图片背景，尺寸略有偏差。
。
3、网页详细设计分析
3.1建立布局
在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。
Dreamweavercs6是大多数人设计网页的称手兵器，也是众多入门者的捷径。
特别是其在布局方面的出色表现，更受青睐。
大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。
1.进入布局模式，插入布局表格。
建立一个大概的布局，主要方法是利用表格的嵌套方式。
2.定义背景风格：
使用图片进行设置，代码如下：
<
style>
body{background:
url（"
音乐壁纸/t（3）.jpg"
）;
}
/style
3.2网页中的图像
图像传输是html的真正魅力所在，它与文字相比具有显着的优点：
一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；
二是能更清楚地表达细节内容。
正是由于这些优点，所以在进行网页设计时图像很受欢迎。
如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。
图像文件的格式有几十种，如GIF、JPEG、BMP等，我们这里用的格式是JPG。
利用Dreamweavercs6可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。
在网页中加入图像的操作非常简单，一般有两种方法：
一是通过插入>
图像>
设置>
确定>
只要选中，可在底部进行修改；
另一种是直接通过对代码的编写，如下：
imgsrc="
广告分享/4.jpg"
width="
54"
height="
30"
/>
Width、height是对图片的长宽比进行设置。
（1）设置图像环绕方式：
一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。
比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。
在网页中图像的环绕方式有两种：
①左环绕：
图像在左边，文本在图像的右边进行环绕。
②右环绕：
图像在右边，文本在图像的左边进行环绕。
在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。
（2）设置图像缩放比例：
网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×
600的窗口，还是1024×
768的窗口，网页都要能正常的显示。
设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。
设置图像缩放比例的步骤如下：
1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.
2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。
外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；
垂直间距指图像与周围元素在垂直方向的间距。
在Dreamweavercs6中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：
图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。
另外，为了使图片更符合要求，我还利用了photoshopcs5、美图秀秀对图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。
3.3插入视频音乐
关于视频音乐的插入，使用Dreamweaver中的“插入”命令，选择媒体，在选择插件，选中你要的视频音乐，确定即可。
当然，通过编码来说可以做到更加精细准确，比如大小，播放方式，循环与否等，代码如下：
1、视频：
<
videowidth="
500"
376"
controls>
sourcesrc="
MichaelJackson宣传片.mp4"
type="
video/mp4"
>
/video>
2、音乐：
tdwidth="
745"
60"
audiocontrolsautoplay="
autoplay"
>
MichaelJackson-EarthSong.mp3"
audio/mpeg"
/audio>
/td>
3.4设置图片循环滚动
要实现图片循环向左滚动，鼠标指向即停，图片上建立链接（每个图片均有一个链接）。
主要原理如下：
把连续图片再复制一份接到尾部，待第一张图片滚完之后被复制的接着滚动。
所示：
主要代码如下：
tdid=demo1valign=top>
tablealign=leftcellpadding=0cellspace=0border=0>
tralign="
center"
td>
ahref="
迈克尔·
杰克逊_XX百科.htm"
target="
_blank"
迈克尔/1.jpg"
220"
200"
hspace="
3"
border="
0"
align="
absmiddle"
/>
/a>
script>
varspeed=20//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
functionMarquee（）{
if（demo2.offsetWidth-demo.scrollLeft<
=0）
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
varMyMar=setInterval（Marquee,speed）
demo.onmouseover=function（）{clearInterval（MyMar）}
demo.onmouseout=function（）{MyMar=setInterval（Marquee,speed）}
/script>
3.5设置链接
（1）建立单链接，选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。
我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。
（2）建立多链接，即单图多链接，主要方法是通过热点来实现的。
上图中，左下角有三个几何图形，用于确定热点的区域大小，形状。
要对其属性进行编辑，如：
链接、目标。
选取多个热点即可建立多个链接。
3.6做个外网搜索栏
以XX为搜索引擎，点击按钮即显示搜索结果，设置搜索框大小，背景颜色，搜索按钮表述等处理，详情见代码，如下：
inputname=tntype=hiddenvalue=baidu>
inputtype=textname=wordsize=56>
inputtype="
submit"
value="
让我来XX一下吧！
"
/form>
3.7常用的显示-时间天气
时间来说，同步电脑的系统时间，不需要联网；
而天气，则需联网随时更新，从天气网站获取天气数据，并显示，代码如下：
360"
!
--=s以下是第一栏第三格文件-->
DIV>
TABLE>
TBODY>
TR>
TD>
P>
MARQUEEstyle="
WIDTH:
360px;
HEIGHT:
160px"
scrollAmount=1
scrollDelay=30onmouseover=stop（）onmouseout=start（）direction=upwidth="
160"
DIValign=center>
spanid="
t"
/span>
setInterval（"
t.innerText=newDate（）.toLocaleString（）+'
星期'
+'
日一二三四五六'
.charAt（newDate（）.getDay（））;
1000）;
/MARQUEE>
/P>
/TD>
/TR>
/TBODY>
/TABLE>
3.8建立子网和友情链接
主要是对图片、文字进行链接处理。
子网较为简单，主要元素有背景、音乐、文字、返回顶点按钮等。
友情链接在这里就不做特殊处理，目标只是指向本主网或XX百科。
代码大致如下：
链接"
广告分享/11.jpg"
3.9文段的处理
对文字的设置，可以采取宏定义的方式。
定义各种风格的字体，颜色，大小、；
定义段间距、行间距等，然后再在需要处理的文档位置进行定义。
代码如下：
styletype="
text/css"
--
.style1{
color:
#000000;
font-weight:
bold;
font-size:
20px;
.thw{
line-height:
-->
/style>
4、最终效果图
5、结论总结
这次实践我也遇到了很多的困难，比如：
一开始对dreamweaver的探索和熟悉，之后遇到包括搜索栏的、时间栏的、天气栏的、还有就是滚动图片的，最大的莫过于初始时表格布局没做好，尺寸错了，结果网页乱成一团。
这个简单的错误却很致命，因为我花了大量的时间才发现。
最后，能成功也是基于此的。
所以，认真仔细真的很重要。
通过这次网页课程设计激发学习兴趣，调动学习的自觉性，自己动脑、动手，动口，运用网络资源，结合教材及老师的指导，通过自身的实践，创作出积聚个人风格、个性的个人网页。
总体来说，整个学期的学习过程，我学会了很多知识，在此次网页设计中，我充分利用了这次设计的机会，全心全意投入到网页世界，去不断的学习，去不断的探索；
同时去不断的充实，去不断的完善自我，在网络的天空下逐渐的美化自己的人生！
做好页面，并不是一件容易的事，它包括个人主页的选题、内容采集整理、图片的处理、页面的排版设置、背景及其整套网页的色调等很多东西。
本次课程设计不是很好，页面过于简单，创新意识反面薄弱，这是我需要提高的地方。
需要学的地方还有很多，需要有耐心、坚持，不断的学习，综合运用多种知识，才能设计出好的web页面。
总体来说，通过这次的对网页课程设计，有收获也有遗憾、不足的地方，但我想，我已经迈入了网页设计的大门，只要我再认真努力的去学习，去提高，凭借我对网页设计的热情和执着，我将来设计出的网页会更加专业，更完善。
升级会员 