网页设计与制作论文

1、 网页设计与制作论文学号： 2011221104110054 班级： 数学与应用数学（1）班 姓名： 付梦丹 日期： 2013-5-16 网页设计的意义 internet正在以强大的冲击力影响着人类的生活。internet的出现和迅速发展， 彻底改变了人们的传统生活方式。internet现在已经渗透到了人类社会的各个领域， 以及人们的日常生活的各个环节。internet的迅速普及，正是依靠不计其数、丰富多彩的网站。 网站是由网页按照一定的链接顺序组成。现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。 同时也有越来越多的企业通过互联网上来展示自身形象，提供服务

2、和产品资讯。 以这种廉价的方式获取最大的宣传效果。 所以说，网页制作已经成为现代社会中人们的一种基本功，越来越多的人希望学习如何制作网页， 同时越来越多的网页制作工具展现在人们面前。当然掌握所有的网页制作工具是不可能， 也是不必要的。本课程主要讲解目前最受欢迎的，也是最流行的网页制作工具， 以及这些工具之间如何搭配使用，使学习者能够快速方便地制作出网页。网页设计的内容 设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。1. 视听元素 这里所说的视听元素，主要包括：文本、背景、按

3、钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页设计的表现力。以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示gif、jpeg图形和gif89a动画。还有些多媒体文件（如mp3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件（plug-in）可以播放更多格式的多媒体文件。微软推出ie浏览器后，提供了基于ole的activex技术，用来在网页中播放多媒体。目

4、前activex已经成为热门技术。另一种播放多媒体的技术是javaapplet。它是用java语言编写的应用于网页之中的小应用程序，相比于插件和activex，javaapplet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的设计提出了更高的要求。 2.版式设计 网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化

5、的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。开发工具 dreamweaver、flash以及在dreamweaver之后推出的针对专业网页图像设计的fireworks，三者被macromedia公司称为dreamteam(梦之队)，足见市场的反响和macromedia公司对它们的自信。说到d

6、reamweaver我们应该了解一下网页编辑器的发展过程，随着互联网(internet) 的家喻户晓，html技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在word中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点：编辑本段优点1最佳的制作效率dreamweaver可以用最快速的方式将fireworks，freehand，或photoshop等档案移至网页上。使用检色吸管工具选

7、择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。dremweaver能与您喜爱的设计工具，如playback flash，shockwave和外挂模组等搭配，不需离开dremweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使dreamweaver自动开启firework或photoshop来进行编辑与设定图档的最佳化。2网站管理使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，dreamweaver 会自动更新所有连结。使用支援文字、html码、html属性标签和一般语法的搜寻及置换功能使得复杂的网

8、站更新变得迅速又简单。3无可比拟的控制能力dreamweaver是唯一提供roundtrip html、视觉化编辑与原始码编辑同步的设计工具。它包含homesite和bbedit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得 dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给third-party厂商，包含asp， apache，broadvis

9、ion， cold fusion，icat， tango与自行发展的应用软体。当您正使用dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和xml dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出xml内容。 全方位的呈现利用dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。对于cascading style sheets的动态html支援和鼠标换

10、图效果，声音和动画的dhtml效果资料库可在netscape和microsoft浏览器上执行。使用不同浏览器检示功能，dreamweaver可以告知您在不同浏览器上执行的成效如何。当有新的浏览器上市时，只要从dreamweaver的网站在下载它的描述档，便可得知详尽的成效报告。编辑本段缺点一、 难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来；二、 页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求

11、可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的html代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的html代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在dreamweaver之前，frontpage98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在dreamweaver之前，现在我无意说dreamweaver已经实现网页设计师的梦想，但我觉得dreamweaver正在努力向这个梦想一步步走

12、去。网页设计之框架 框架实际上是一种特殊的网页，它可以根据需要把浏览器窗口划分为多个区域，每个框架区域都是一个单独的网页。框架（frames）由框架集（frameset）和单个框架（frame）两部分组成。框架集是一个定义框架结构的网页，它包括网页内框架的数量、每个框架的大小、框架内网页的来源和框架的其它属性等。单个框架包含在框架集中，是框架集的一部分，每个框架中都放置一个内容网页，组合起来就是浏览者看到的框架式网页。框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显示多个不同的文件。最常见的用法是将窗口的左侧或上侧的区域设置为目录区，用于显示文件的目录或导航条。而将右边一块面积较大的

13、区域设置为页面的主体区域。通过在文件目录和文件内容之间建立的超级链接，用户单击目录区中的文件目录，文件内容将在主体区域内显示，用这种方法便于用户继续浏览其他的网页文件。下面的实例显示了一个使用框架的网页，如图11.1所示。这是由三个框架组成的框架布局，一个框架横放在顶部，其中包含 web 站点的logo和一些常用按钮；左侧较窄的框架包含导航条；右侧的框架占据了页面的大部分，其中包含主要内容。这些框架中的每一个都显示单独的 html 文档。 框架的优缺点： 1）使网页结构清晰，易于维护和更新。 2）访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 3）每个框架网页都具有独立的滚动条，因此

14、访问者可以独立控制各个页面。 4）某些早期的浏览器不支持框架结构的网页。 5）下载框架式网页速度慢。 6）不利于内容较多、结构复杂页面的排版。 7）大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。a.创建框架和框架集 dreamweaver cs4提供了15种框架类型，分别是上方固定、上方固定下方固定、上方固定右侧嵌套、上方固定左侧嵌套、下方固定、下方固定右侧嵌套、下方固定左侧嵌套、右侧固定、右侧固定上方嵌套、右侧固定下方嵌套、垂直拆分、左侧固定、左侧固定上方嵌套、左侧固定下方嵌套、水平拆分等，可以使用新建文档的方式创建空白框架网页，也可以将普通网页转变为框架结构

15、。具体操作步骤如下：1创建空白框架网页2将现有文档创建为框架网页b.框架的嵌套 框架的嵌套是指一个框架集套在另一个框架集内。“上方固定，左侧嵌套”实际上就是一个嵌套的框架集，是在上下结构的框架集中嵌套一个左右结构的框架集。具体操作步骤如下：（1）将鼠标移至要创建嵌套框架集的框架内，如图11.8所示。（2）单击”插入”|“html”|“框架”|“左对齐”命令菜单，新插入一个框架集。此时，嵌套框架集制作完成。 框框架的基本操作主要包括：选取框架和框架集、保存框架和框架集、调整框架大小、拆分框架和删除框架等。c.框架的基本操作 1选取框架或框架集 2保存框架 3调整框架大小 4拆分、删除框架 d.嵌入式框架 1）嵌入式框架（标签为）也是框架的一种形式。它与普通框架的区别在于，它可以嵌入在网页中的任意部分，比如可以在表格中插入嵌入式框架。正是由于这一特点，使得嵌入式框架使用广泛。本节将结合具体实例，学习如何创建嵌入式框架，以及设置嵌入式框架