《网页设计与制作技术 公选上交》由会员分享，可在线阅读，更多相关《网页设计与制作技术 公选上交（5页珍藏版）》请在金锄头文库上搜索。
1、 东华理工大学 题 目：网页设计与制作技术 姓 名： 程龙 学 院： 软件学院 专 业： 电子商务 班 级： 081102 学 号： 08110204 2012.5.16 网页设计与制作技术1. Macromedia Dreamweaver 8简介随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下，作者将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视
2、听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功能”都是为了更好地表达网站主题这一观点。 Macromedia Dreamweaver 8是建立Web站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于CSS的设计的领先支持到手工编码功能，Dreamweaver提供了专业人员在一个集
3、成、高效的环境中所需的工具。开发人员可以使用Dreamweaver及所选择的服务器技术来创建功能强大的Internet应用程序，从而使用户能连接到数据库、Web服务和旧式系统。 它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。 2. dreamweave的发展于1997年首次推出，.于2000年推出Dreamweaver UltraDev: 运用其核心的 Roundtrip HTML 技术，可确保在切换程序代码与设计检视时的程序代码质量，Dreamweaver 成为专业网站外观设计的先驱。Macromedia 针对多种日
4、益受到网页开发人员采用的服务器技术，而推出了 Dreamweaver UltraDev。本产品除了提供 Dreamweaver 的功能外，还提供以 ASP、JSP 和 ColdFusion 建立网页应用程序的工具。于2002年5月推出Dreamweaver MX: 目的是支持现代网页专业人员兼负的多重角色。Dreamweaver MX 将 UltraDev 最佳的开发功能以及 HomeSite 的主要程序代码编辑功能整合为一个核心的 Dreamweaver 环境,为建立单一开发环境的第一步，以期让使用者能在此环境中，依其偏好的方式（例如以手动编码、可视化设计或结合两者的方式）来建立不同的网站和
5、应用程序。于2003年9月推出Dreamweaver MX 2004: 新增了对以 CSS 为基础的设计与开发提供支持的革命性功能，将网页设计提升到新的层次。透过将 CSS 结合在所有使用者的工作流程中，促进了网页专业人员对 CSS 的普遍采用。 推出Dreamweaver 8: 以之前版本为基础，扩充了主要范围的功能，例如 XML 和 CSS，并简化了工作流程，以帮助使用者事半功倍。藉由支持最新的专业设计方式，Dreamweaver 8 为使用者提供以开放标准为基础的强大开发方式，并增强了专业性的基本工具。另外，Dreamweaver 也支持所有主要的服务器技术，包括 ColdFusion、
6、PHP、ASP、ASP.NET 和 JSP，让各种能力程度的开发人员，无论是新手或老手，都能实现其设计。3.Dreamweaver8 的操作环境 在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用
7、的项目，建议大家保留。新建或打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。4.规划站点结构 网站由多个页面构成，因此应该提前设定网页的页面数层数以及相关的功能链接，能够把多层次不同内容的页面联系起来。我们可以把各自的文件分类放在各自的文件里面，使网站结构清晰便于管理。5.Dreamweaver8.0插入图像“水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的距离。“边框”文本框时用来设置图像边框的宽度，默认的边框宽度为0。“替代
8、”文本框用来设置图像的替代文本，可以输入一段文字，当图像无法显示时，将显示这段文字。单击属性面板中的对齐按钮，可以分别将图像设置成浏览器居左对齐、居中对齐、居右对齐。在属性面板中，“对齐”下拉列表框时设置图像与文本的相互对齐方式，共有10个选项。通过它我们可以将文字对齐到图像的上端、下端、左边和右边等，从而可以灵活的实现文字与图片的混排效果。插入其它图像元素在我们单击常用插入栏的“图像”按钮时，可以看到，除了第前项“图像”外，还有“图像占位符”、“鼠标经过图像”、“导航条”等项目。插入图像占位符，在我们布局页面时，如果要在网页中插入一张图片，可以先不制作图片，而是使用占位符来代替图片位置。单击
9、下拉列表中的“图像占位符”，打开“图像占位符”对话框。按设计需要设置图片的宽度和高度，输入呆插入图像的名称，即可。6.Dreamweaver8.0插入声音在页面中能够嵌入背景音乐。这种音乐多以MP3，MIDI文档为主，在DW中，添加背音乐有两种方法，一种是通过手写代码实现，更有一种是通过行为实现。在HTML语言中，通过这个标记能够嵌入多种格式的音乐文档，具体步骤是： 我们将01.mid音乐文档存放在med文档夹里。 打开03.html网页，我们为这个页面添加背景音乐 转换到DW的“拆分”视图，讲光标定位到之前的位置，在光标的位置写下下面这段代码：，如下图所示。 7.dreamweaver8创建
10、连接关系链接是一个网站的灵魂，一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。超级链接是指站点内不同网页之间、站点与Web之间的链接关系，它可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系。超级链接由两部分组成：链接载体和链接目标。绝对路径，为文件提供完全的路径，包括适用的协议，例如http、ftp，rtsp等。如：ftp:/202.136.254.1/相对路径，相对路径最适合网站的内部链接。如果链接到同一目录下，则只需要输入要链接文件的名称。要链接到下一级目录中的文件，只需要输入目录名。然后输入“/“，再输入文件名。如链接到上一级目录中的文件，则先输入
11、”./“再输入目录名，文件名。根路径：是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头，例如， /fy/maodian.html就是站点根文件夹下的fy子文件夹中的一个文件（maodian.html ）的根路径。 8.网页设计小结要领一：确定网站主题做网站，首先必须要解决的就是网站内容问题，即确定网站的主题。掌握的资料较多，也可以做一个自己感兴趣的东西，一者，你可以有自己的见解，做出自己的特色；二者，在制作网站时不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有创作热情，很难设计制作出优秀的作品。要领二：选择好域名域名是网站在互联网上的名字。一个非产品推销的纯信息服务网站，其所有建设的
12、价值，都凝结在其网站域名之上。失去这个域名，所有前期工作就将全部落空。目前，做个人网站的很多都依赖免费个人空间，其域名也是依赖免费域名指向，如网易的虚拟域名服务，其实这对个人网站的推广与发展很为不利，不光是它“适时”开启的窗口妨碍了浏览者的视线和好感，让人一看就知道是个人网站，而且也妨碍了网页的传输速度。所以，就我个人观点来说，首先花点钱去注册一个域名，独立的域名就是个人网站的第一笔财富，要把域名起得形象、简单、易记。要领三：掌握建网工具要领四：确定网站界面网站的题材确定后，就要将收集到的资料内容作一个合理的编排。比如，将一些最吸引人的内容放在最突出的位置或者在版面分布上占优势地位。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。在栏目编排时需要注意的是Dreamweaver8.0是用于网页网页设计很有用的一个工具，掌握好了这个技术可以在对网页设计跟技术方面轻松许多，可用于测试，发布，维护站点跟制作网页的图像声音链接等内容。
