Dreamweaver之网页制作报告

《多媒体技术及应用》报告学生姓名：嘎嘎学号：6100310211专业班级：自动化103班网页制作报告(目录)1.设计目的31.1阐述该主题网站的设计意图和创意31.2简单介绍自己的个人网站32.设计思想32.1在设计中主要用的技术32.2网页基本的框架33.网页详细设计分析43.1建立布局43.2网页中的图像53.2.1在网页中插入图像53.2.2图像的各种属性设置53.2.3怎样编辑网页中的图像63.3插入视频和音乐63.4设置图片循环滚动73.5设置链接73.6做个外网搜索栏83.7常用的显示-时间天气83.8建立子网和友情链接93.9文段的处理94.最终效果图95、结论总结111、设计目的1.1阐述该个人网站的设计意图和创意。直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。图像文件的格式有几十种，如GIF、JPEG、BMP等，我们这里用的格式是JPG。3.2.1在网页中插入图像利用Dreamweavercs6可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单，一般有两种方法：一是通过插入>图像>设置>确定>只要选中，可在底部进行修改；另一种是直接通过对代码的编写，如下：<imgsrc="广告分享/4.jpg"width="54"height="30"/>Width、height是对图片的长宽比进行设置。3.2.2图像的各种属性设置(1)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：①左环绕：图像在左边，文本在图像的右边进行环绕。②右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。(2)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂直方向的间距。3.2.3怎样编辑网页中的图像在Dreamweavercs6中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。另外，为了使图片更符合要求，我还利用了photoshopcs5、美图秀秀对图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。3.3插入视频音乐关于视频音乐的插入，使用Dreamweaver中的“插入”命令，选择媒体，在选择插件，选中你要的视频音乐，确定即可。当然，通过编码来说可以做到更加精细准确，比如大小，播放方式，循环与否等，代码如下：1、视频：<videowidth="500"height="376"controls><sourcesrc="MichaelJackson宣传片.mp4"type="video/mp4"></video>音乐：<tdwidth="745"height="60"><audiocontrolsautoplay="autoplay"><sourcesrc="MichaelJackson-EarthSong.mp3"type="audio/mpeg"></audio></td>3.4设置图片循环滚动要实现图片循环向左滚动，鼠标指向即停，图片上建立链接（每个图片均有一个链接）。主要原理如下：把连续图片再复制一份接到尾部，待第一张图片滚完之后被复制的接着滚动。所示：主要代码如下：<tdid=demo1valign=top><tablealign=leftcellpadding=0cellspace=0border=0><tralign="center"><td><ahref="迈克尔·杰克逊_百度百科.htm"target="_blank"><imgsrc="迈克尔/1.jpg"width="220"height="200"hspace="3"border="0"align="absmiddle"/></a></td><script>varspeed=20//速度数值越大速度越慢demo2.innerHTML=demo1.innerHTMLfunctionMarquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}varMyMar=setInterval(Marquee,speed)demo.onmouseover=function(){clearInterval(MyMar)}demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}</script>3.5设置链接建立单链接，选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。建立多链接，即单图多链接，主要方法是通过热点来实现的。上图中，左下角有三个几何图形，用于确定热点的区域大小，形状。要对其属性进行编辑，如：链接、目标。选取多个热点即可建立多个链接。3.6做个外网搜索栏以百度为搜索引擎，点击按钮即显示搜索结果，设置搜索框大小，背景颜色，搜索按钮表述等处理，详情见代码，如下：<formaction="/baidu"target="_blank"><inputname=tntype=hiddenvalue=baidu><ahref="/"><alt="Baidu"align="bottom"border="0"></a><inputtype=textname=wordsize=56><inputtype="submit"value="让我来百度一下吧！"></form>3.7常用的显示-时间天气时间来说，同步电脑的系统时间，不需要联网；而天气，则需联网随时更新，从天气网站获取天气数据，并显示，代码如下：<tdwidth="360"height="200"><!--=s以下是第一栏第三格文件--><DIV><TABLE><TBODY><TR><TD><P><MARQUEEstyle="WIDTH:360px;HEIGHT:160px"scrollAmount=1scrollDelay=30onmouseover=stop()onmouseout=start()direction=upwidth="360"height="160"><DIValign=center><spanid="t"></span><script>setInterval("t.innerText=newDate().toLocaleString()+'星期'+'日一二三四五六'.charAt(newDate().getDay());",1000);</script><DIValign=center><iframename="weather_inc"src="/index.php?c=code&id=2&num=2"width="360"height="160"frameborder="0"marginwidth="0"marginheight="0"scrolling="no"></iframe></MARQUEE></P></TD></TR></TBODY></TABLE></td>3.8建立子网和友情链接主要是对图片、文字进行链接处理。子网较为简单，主要元素有背景、音乐、文字、返回顶点按钮等。友情链接在这里就不做特殊处理，目标只是指向本主网或百度百科。代码大致如下：<ahref="链接"target="_blank"><imgsrc="广告分享/11.jpg"width="54"height="30"/></a>3.9文段的处理对文字的设置，可以采取宏定义的方式。定义各种风格的字体，颜色，大小、；定义段间距、行间距等，然后再在需要处理的文档位置进行定义。代码如下：<styletype="text/css"><!--.style1{ color:#000000; font-weight:bold; font-size:20px;}.thw{line-height:20px;}--></style>4、最终效果图5、结论总结