基于dreamweaver的个人网站的网页设计 - 图文(3)

2019-04-09 11:52

网页技术，就可以这些大量重复使用的图片缓存在用户的客服端中，减少了系统的消耗，降低对服务器的压力，提高网页打开的速度。

总之，在同一个网站上，同时采用动态网页技术和静态网页技术是很普遍的。 2.4网页设计的语言

网页设计中所涉及的语言高达十几种，这里就简单介绍比较常见的两种语言，它们分别是HTML、JavaScrip。 2.4.1 HTML

HTML（英语Hypertext Markup Language的缩写）即超文本标记语言，它是在文本文件的基础上加系列标记，描述其格式、颜色、字体、文字大小，再加上声音、图像、甚至是视频等形成精彩的页面。严格的来讲，它并不是编程语言，没有分支、循环等控制结构，只是一些能够让浏览器看懂的标记。

HTML的结构标识一般来说，都是双向标识，书写规则是<标识名><／标识名>。一个标准的HTML文档如下所示：

for example <／title> <／head> <body> main body <／body> <／html> </p><p> 就像这个文档一样，HTML文档都是必须以<html>开始，以<／html>结束，它还通常有一个head元素和一个body元素，并且3对标签在个网页文档中有且只能出现一次，不能重复使用。 </p><p>其中<html><／html>为文件标识，表示此文件是HTML格式的文件，是一个网页文件。 </p><p><head><／head>为头部标识，包含网页的重要信息，但是在浏览器中不显示。 <body><／body>为主体标识，网页的主体部分都放在这对标识之间，比如文本、图</p><p>6 </p><p> </p><p>像、表格等元素，以及其他媒体元素都可以放置在<body><／body>标签中。 </p><p>以上3对标签在个网页文档中只能出现一次，而不能重复使用。 2.4.2 JavaScrip </p><p>JavaScript是一种跨平台、基于对象的脚本语言，由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展3部分组成。它与Java是两种完全不相同的语言，前者是脚本语言,而后者是一种编译型的语言。含有JavaScript脚本代码的文档如下所示： </p><p> <html> <head> <title>for example <／title> <／head> <body> </p><p> <／body> <／html> </p><p>其中，< Script language=\和</Script>之间就是JavaScript的脚本代码。 2.5网页的配色 </p><p>色彩是很有力的工具，其视觉效果非常引人注目，能够让平平无奇的东西，瞬间生动活泼起来;也能够让生动活泼的东西，瞬间平平无奇。 </p><p>当浏览者打开一个网页时，网页给其留下的第一印象既不是网站丰富的内容，也不是网站合理的版面布局，而是网页中的色彩。色彩运用和搭配是否成功，在一定程度上决定网页界面风格是否形成，也决定了设一个网站的是否优秀。总而言之，在设计网页时必须重视网页的配色。 </p><p>“白纸黑字”是永远的主题。网页界面以白色为背景的居多，因为白色给人的感觉是干净和简洁，同时又是一种百搭色，它可以和多种颜色配上黑色最为突出。以白色为背景色、配上黑色的字，可以让页面视觉自然、流畅，有利于突出页面的重点，也有利于整个界面的配色，更容易为大多数人认可和掌握。那么让我们看看使用白色为背景色</p><p>7 </p><p> </p><p>的优秀网站，如图（2-4）。 </p><p> </p><p>图（2-4）：百度主页 </p><p>2.6网页的布局 </p><p>一般来说，好的网站应该给人干净整洁、条理清楚的感觉，而能否做到这一点，就由网页的布局所决定，也就是说布局设计可以让浏览者更加清晰地 “读懂”网站，从而轻而易举地找到自己所需要的资源在那个位置。 </p><p>在网页布局时通常有两种方法，也就是纸上布局法和软件布局法。纸上布局法：就是在纸上打草稿。先在纸上画出草图，对网页布局进行规划，以方便设计，易于设计出优秀的网页。软件布局法：一般是说使用Photoshop来完成软件的布局。Photoshop在图像编辑、处理方面的功能十分强大，它可以对颜色、图像等进行方便的处理，并且它的图层功能，可以让设计者设计出无法在纸上实现的效果。 </p><p>网页布局大致可分为“国”字型、拐角型、“T”字型、“L”字型、综合框架型、Flash型、变化型，这里就不一一介绍了。 </p><p> </p><p>8 </p><p> </p><p>3 网页设计软件介绍 </p><p>网页设计的软件一般有三种类型，其中以Adobe Dreamweaver为代表的网页制作软件，以Adobe Flash为代表的网页动画制作软件，以Adobe Fireworks为代表的网页图像处理软件。这三款软件合在一起被称为网页制作三剑客。 </p><p>不同的设计者有不同的软件使用习惯，加上网站不同的设计要求，设计者都是选择自己适用的软件，而我比较喜欢的网页设计软件搭配是Adobe Dreamweaver和Adobe Flash，还有Adobe Photoshop。 3.1 Adobe Dreamweaver介绍 </p><p>Dreamweaver原本由著名的Macromedia公司所开发，但是Macromedia公司现已被Adobe公司收购，Dreamweaver也就正式改名为Adobe Dreamweaver。Dreamweaver刚开始只支持Mac（也就是苹果公司的电脑系统），后来开发了Windows版本的，而随着Macromedia被Adobe收购后，Adobe也开始有计划地开发Linux版本的。 </p><p>目前，用户最多、应用最广、功能最强大的的网页制作软件就是Dreamweaver，它集网页制作和管理网站于一身，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以非常容易地制作出跨越平台限制和跨越浏览器限制的充满动感的网页，是目前制作网页站点、网页和网页应用程序开发的理想工具。不管是初学者，还是专业的网页设计员，都可以使用Dreamweaver容易地制作出精美的网页，甚至可以编写出各种各样的复杂的网页应用程序。作为一种网页设计软件，Dreamweaver使用所见即所得的接口，提供了强大的可视化编辑网页功能，用户可以将文本、图像、动画和视频等等的媒体元素插入网页，并使用表格以及框架等布局技术为这些媒体元素布局。 </p><p>Dreamweaver的优点就是它的兼容性，它可以与Fireworks、Flash、Photoshop、Playback等等的设计软件兼容，从而可以用最快速的方式将兼容软件的文档移动到网页上。Dreamweaver同时还可以直接开启Firework或Photoshop来进行编辑与设定图档的最佳化。这些优点使Dreamweaver的网页制作效率非常之高。 </p><p>在Adobe Dreamweaver CS5的工作界面中，包括【标题栏】、【菜单栏】、【工作区】、【属性】、【面板组】等等的组成部分，如图（3-1）所示： </p><p>9 </p><p> </p><p> </p><p>图（3-1）：Adobe Dreamweaver CS5的工作界面 </p><p>3.2 Adobe Flash介绍 </p><p>网页动画主要包括Flash动画和GIF动画，其中Flash动画制作首选Adobe Flash软件。Adobe Flash是目前应用最广泛的多媒体动画制作软件，它可以将各种音乐、声效和动画有机地融合在一起，制作出非常不错的动画。它在动画制作方面也有一整套十分强大的功能，例如从动画的绘制、动作的实现、编程控制以及最后动画的输出等，它都可以完全满足这些功能的要求。 </p><p>Adobe Flash之所以能够在网页动画设计方面大放异彩，与它所采用的矢量绘图技术有着密不可分的关系。矢量图像能够在放大质量的情况下，保持图像的无损失，这样也就能够满足不同用户的需求，让屏幕大、分辨率大的用户有不错的体验。矢量绘图的Flash动画另外的一个优点就是大大地缩小了动画文件的大小，使在网络带宽局限的情况下，降低对网络传输速度的要求，可以更加方便他人下载观看或者在线观看。 </p><p>在Adobe Flash CS5的主界面中，包括标题栏、工作区、时简轴／动画编辑器面板、属性面板、库面板和工具箱等组成部分，如（3-2）所示：</p><p>10 </p><p></p> <br /> <p><script type="text/javascript">s("content-m");</script></p> </div> <div class="m-pages"><li><a>共7页: </a></li><li><a href='578521_2.html'>上一页</a></li><li><a href='578521.html'>1</a></li><li><a href='578521_2.html'>2</a></li><li class="thisclass"><a href='#'>3</a></li><li><a href='578521_4.html'>4</a></li><li><a href='578521_5.html'>5</a></li><li><a href='578521_6.html'>6</a></li><li><a href='578521_7.html'>7</a></li><li><a href='578521_4.html'>下一页</a></li></div> <div class="down-word"> <div class="word-ico"></div> <div class="word-tit"> <span class="docx">基于dreamweaver的个人网站的网页设计 - 图文(3).doc</span> <span>将本文的Word文档下载到电脑</span> <span>下载失败或者文档不完整，请联系客服人员解决！ </span> </div> <div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div> </div> </article> <div class="art-prenext"> <p>下一篇：<a href="/wenku/zonghe/578520.html">你喜欢她,我退出。你喜欢我,我死也不会把你让给别人。</a></p> </div> <script type="text/javascript">s("like-m");</script> <div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a href="/wenku/zonghe/1263351.html" title="石油大学《化工原理二》2021期末考试答案">石油大学《化工原理二》2021期末考试答案</a></li> <li><a href="/wenku/zonghe/1157609.html" title="建筑节能检测习题集（84页）">建筑节能检测习题集（84页）</a></li> <li><a href="/wenku/zonghe/215568.html" title="高考物理(考点解读命题热点突破)专题06 机械">高考物理(考点解读命题热点突破)专题06 机械</a></li> <li><a href="/wenku/zonghe/215769.html" title="1 2014.10.23第一次财务会计理论与实务课堂笔">1 2014.10.23第一次财务会计理论与实务课堂笔</a></li> <li><a href="/wenku/zonghe/215778.html" title="通信资源管理系统介绍(GIS)">通信资源管理系统介绍(GIS)</a></li> <li><a href="/wenku/zonghe/215564.html" title="年产60万吨PTA项目环境影响报告书">年产60万吨PTA项目环境影响报告书</a></li> <li><a href="/wenku/zonghe/215563.html" title="2016小学生读书笔记范文">2016小学生读书笔记范文</a></li> <li><a href="/wenku/zonghe/215562.html" title="Dhlrwk谈中学生英语学习策略">Dhlrwk谈中学生英语学习策略</a></li> <li><a href="/wenku/zonghe/215560.html" title="数电课程设计报告洗衣机自动控制电路">数电课程设计报告洗衣机自动控制电路</a></li> <li><a href="/wenku/zonghe/215558.html" title="2018年最新湖南省长沙市长郡中学2018届上学">2018年最新湖南省长沙市长郡中学2018届上学</a></li> </ul> </div> <div class="main-tab"><a class="on" href="javascript:;">本类排行</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a href="/wenku/zonghe/175782.html" title="云客服基础考试">云客服基础考试</a></li> <li><a href="/wenku/zonghe/158762.html" title="《红星照耀中国--》名著阅读练习题及答案">《红星照耀中国--》名著阅读练习题及答案</a></li> <li><a href="/wenku/zonghe/176003.html" title="红星照耀中国练习题及答案">红星照耀中国练习题及答案</a></li> <li><a href="/wenku/zonghe/171844.html" title="《红星照耀中国》练习题">《红星照耀中国》练习题</a></li> <li><a href="/wenku/zonghe/159778.html" title="人教部编版2018-2019学年八年级语文上册第一">人教部编版2018-2019学年八年级语文上册第一</a></li> <li><a href="/wenku/zonghe/183326.html" title="化工导论试题">化工导论试题</a></li> <li><a href="/wenku/zonghe/182252.html" title="八年级上册名著导读练习——《红星照耀中国》">八年级上册名著导读练习——《红星照耀中国》</a></li> <li><a href="/wenku/zonghe/162180.html" title="人教版语文八(上)名著导读《红星照耀中国》练">人教版语文八(上)名著导读《红星照耀中国》练</a></li> <li><a href="/wenku/zonghe/185266.html" title="2018年江苏省第八届就业创业知识竞赛题库(全7">2018年江苏省第八届就业创业知识竞赛题库(全7</a></li> <li><a href="/wenku/zonghe/168880.html" title="《红星照耀中国》导读及练习题附答案">《红星照耀中国》导读及练习题附答案</a></li> </ul> </div> </div> <footer class="footer"> <p class="bt-links"><a href="https://m.77cn.com.cn">手机版</a><span class="v-line">|</span><a href="https://www.77cn.com.cn">PC版</a><span class="v-line">|</span><a href="https://m.77cn.com.cn/fww">范文大全</a></p> <p>Copyright © 2019-2022 免费范文网版权所有<br/> 声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/>客服QQ：邮箱：tiandhx2@hotmail.com<br/> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-18</a> </p> <div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e245478384fea490ec3a2317ee103ab"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> <b>注册会员免费下载</b>（下载后可以自由复制和排版） </div> <div class="theme-popbod dform">        <p class='wxpay'><a href='https://www.77cn.com.cn/user/index.php'>马上注册会员</a></p> <p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信： QQ：</p> </div> </div> <div class="theme-popover-mask"></div> <script> //menu $(".header .menu").on("click", function(){ $("body").append("<div class=\"mask-bg menu-mask-bg\"></div>"); $(".menu-slide").show(); $("html,body").css({height:$(window).innerHeight(), overflow:"hidden"}); setTimeout(function(){ $(".menu-slide").css({transform:"translateX(-50px)"}); },50) }); $("body").on("click", ".menu-mask-bg", function(){ $(".menu-slide").css({transform:"translateX(-100%)"}); $(".menu-mask-bg").remove(); $("html,body").removeAttr("style"); setTimeout(function(){ $(".menu-slide").hide(); },300) }); //search $(".header .search").click(function(){ if($(".search-box").is(":hidden")){ $(this).children("i").removeClass("search-icon").addClass("close-icon"); $(".search-box").fadeIn("fast"); }else{ $(this).children("i").removeClass("close-icon").addClass("search-icon"); $(".search-box").fadeOut("fast"); } }); //nav if($(".nav").length > 0) { var nav = new Swiper(".nav",{ slidesPerView: "auto" }); } </script> <script> $(".pay1 img").click(function () { $(".wxpay").css("display", "block"); $(".alipay").css("display", "none"); $(".pay1 img").addClass("over"); $(".pay2 img").removeClass("over"); }); $(".pay2 img").click(function () { $(".wxpay").css("display", "none"); $(".alipay").css("display", "block"); $(".pay1 img").removeClass("over"); $(".pay2 img").addClass("over"); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { $('.word-pic a').click(function(){ $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); $(".vip-up").hide(); $(".vip-pay").hide(); var downid = '578521' $('.wxpay a').click(function(){ var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=wx&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); $('.alipay a').click(function(){ var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=ali&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); }) $('.theme-poptit .close').click(function(){ $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }) }) </script> <script src="/js/gobacktop.js" type="text/javascript"></script> </body> </html>