基于Dreamweaver网站设计与实现.docVIP

基于Dreamweaver网站设计与实现 　　摘要：以自行设计的网站为例，介绍了利用Dreamweaver CS5网页制作工具，实现静态页面的功能，如导航条、动态时钟、滚动文字等的设计方法，实现动态页面的功能，如动态网页开发平台的架设，登录界面等的设计方法。 　　关键词：Dreamweaver 网站设计 动态网页 　　中图分类号：TP311 文献标识码：A 文章编号：1007-9416（2013）10-0149-03 　　在当今信息时代，Internet不仅是一个通信和交流的平台，同时也是一个必不可少的宣传、展示和交易的平台，与其他设计工作相比，网站设计具有交互性、多态性、综合性、艺术性等特点，一个网站建设过程综合了策划创意、平面设计、网络工程、时间空间处理等诸多方面，因此，网页要做到识别性强、形象品质好、设计理念清楚、色彩统一和谐、定位准确，其中最重要的是遵循用户第一、主线突出原则。 　　1 系统结构设计 　　系统结构设计是对网站的整体规划，是网站开发的基础。主要包括界面风格设计、导航设计、交互设计。 　　1.1 界面风格设计[1] 　　设计网站应主题鲜明，视觉设计要传达一定的意图和要求，要有明确的主题。因此，主题鲜明是网页设计的前提，不同的主题应有不同的设计风格。不同的设计风格，给人以不同的视觉效果。网页设计属视觉设计领域，它的最终目的是使网页内容清晰、具有条理性，并达到最佳的视觉效果。其设计不但要单纯、简练、清晰和准确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明的突出设计主题。同时，要使网页从形式上给人良好的印象，鲜明的突出主题，可以通过对网页的空间层次、主从关系、视觉秩序及彼此间逻辑关系的把握运用来实现。合理布局、调整主次的位置关系、突出主题，能让浏览者在短时间内过目不忘、回味无穷。 　　设计网站应内容与形式统一，内容与形式统一是指在进行页面编排时，形式语言必须符合页面的内容，能够体现内容的丰富含义，实现内容与形式的有机结合。网页形式要具有丰富的表现力，要将一个无生命的网页予以生命，变成充满活力的生命体。应用不同的形式，形成不同的造型效果和趣味，有利于创造独特新颖的页面，这些方法包括单纯与秩序、对比与调和、对称与平衡、节奏与韵律以及留白。不论采用那种形式的方法，都必须与内容达成一致。 　　网站首页如图1所示。 　　1.2 导航设计 　　导航是引导学习者学习的航标，是教学策略的体现。成功的数字学习资源应该具有良好有效的学习导航系统，才能避免学生因为学习资源的丰富而在信息中迷失方向、偏离学习目标，降低学习效率。因此，在本专题学习网站设计中，导航策略设计力求目标明确、方法简单、内容完整、相互交叉，以便学习者在浏览网站进行学习时，很快在网站内找到、浏览到自己需要的资源，方便地应用网站提供的各种资源、方法进行学习和协作交流。本站的导航设计采用了常见的导航条导航、功能面板导航、分页面导航三种形式。 　　导航条在网页中被广泛运用，相对于文本导航，图像导航条导航更加生动、形象。选择[插入]|[图像对象]|[导航条]命令，打开“插入导航条”对话框，可以增加、删除导航条元件，可将选中的导航条元件向上移动、向下移动，可选[修改]|[导航条]命令修改导航条，如图2所示。 　　而在同一模块内采用了Spry选项卡式面板导航，Spry选项卡式面板可将多项内容放置于同一??域中，浏览者可以通过单击面板上需要访问的选项卡来显示相应内容，其余内容隐藏，而不需要打开单独的页面来访问相应内容，因此给浏览者提供了方便，也节省了网页空间。 　　将插入点定位于网页要插入Spry选项卡式面板的位置，选择[插入]|[布局对象]|[Spry选项卡式面板]命令，即可在网页中插入Spry选项卡式面板。单击插入Spry选项卡式面板的名称，选择插入Spry选项卡式面板，打开属性检查器，如图3所示，在“面板”列表框中可重新设置面板名称，在“默认面板”下拉列表框中可以选择加载时默认显示哪个选项卡及其内容，如果要修改某选项卡的内容，可在属性检查器的“面板”列表框中选择对应的选项卡，然后在编辑窗口的内容区域内添加相应的内容。 　　1.3 网站的系统结构 　　本网站包括8个模块，系统结构如4图所示。 　　2 首页设计 　　2.1 动态时钟的实现 　　将如下代码加入需要显示时钟的页面： 　　 　　var today=new Date（）； 　　var hours=today.getHours（）； 　　var minutes=today.getMinutes（）； 　　var seconds=today.getSeconds（）； 　　var timeValue=+（（hours 12）？hours-12