当前位置:文档之家› 浅谈Dreamweaver设计与制作网页

浅谈Dreamweaver设计与制作网页

第27卷第2期吉林工商学院学报V01.27.No.2201 1年3月 ANDJOURNALOFJILn、JBUSINESSTECHNOLOGYCOLLEGE Mar.201l<Bstyle='color:black;background-color:#ffff66'>浅谈</B>Dreamweaver设计与制作网页狄加利(吉林工商学院经贸分院,吉林长春130062)【摘要】在今天的网络信息时代,互联网已成为了人们生活的一部分,越来越多的人关注着网络信息.网页作为网络信息的载体,则需要更多的网页设计与制作的人来构建和维护,而学会一个好的网页设计与制作开发及维护工具是成为一个真正的网页设计师的关键,网页编辑软件Dreamweaver 恰恰就为我们提供了一个良好的开发环境。

[关键词】Dreamweaver;网页设计;网页制作;CSS;HTML [中图分类号】TP3ll 【文献标识码】A 【文章编号】1674.3288(2011)02.0100.04【收稿日期】2011-03.09[作者简介】狄加利(1975一),男,吉林长春人,吉林工商学院经贸分院讲师,研究方向:电子商务与网页设计。

随着Intemet互联网的快速发展,它已经走入了企事业单位以及公司,同时也走入了家庭,而网页也成了企事业单位和公司的信息窗口,让自己的信息及时呈现在人们的面前,从而人们也不必走出家门就可以知晓外面的世界。

因此,网页设计与制作、网站维护等技术已必不可少,也显得越来越重要了。

目前,DreamweaverCS3是一个业界领先的网页开发工具之一,具有很强的使用户高效地设计、开发和维护基本的标准网站和Web应用程序的功能。

览的效果相同,具有直观性、使用方便、很容易上手的优点。

而它的三种视图也为不同的网页设计者提供了方便。

一是代码视图更适合专业开发网页代码的编程人员,并且有代码提示功能,可以更快速的编写代码开发网页。

二是显示设计视图专为不熟悉网页HTML代码的初学者而设计,可以无需编写任何代码就能快速创建网页。

三是拆分视图更适合初学者来熟悉HTML网页代码,从而更加容易学会HTML网页代码编程,伴随着有插入HTML代码的菜单提示,能够快速的完成HTML代码的编程操作,让初学者能够快速成为一名专业网站开发人员。

第一,表格布局几乎已经成为一个网页结构的标准,我们随便打开一个网站,它们的网页通常都有表格实现布局的。

它能对不同的网页对象加以处理和控制,而又不用担心会受不同对象的影响,并且整个页面也会变得美观、大方且界面排列整齐有序,能精确地定位网页元素,也可对数据进行排序,还可以将其它文档的能也为设置各个单元格的参数变得简单,有多种表格样式,可以任意选择所需,就自动生成了表格的配色方案,也可以自己定义相应样式,并有预览示图可以参考,生成有个性有创意的格局。

像新浪、网易等大型网站信息进行格式化的,布局显得直观、简洁和整齐。

第二,框架布局,它将一个浏览器窗口划分成几个部分,用户不用切换窗口就可以浏览到多个网页内容,加快了浏览速度,统一了页面格局,实现了页面的多态化,灵活运用滚动条来查看网页内容。

当前比较流行的腾讯网就采用了这种技术,只要进入到QQ秀商城就可以看到最典型的框架结构效果。

而有的网站的后台管理平台也常采用这种技术,因为它的一个窗口可以实现多页面浏览,便于管理操作。

置不能出现两种网页元素的弊点,其最大的特点就是它的灵活性,不占用页面空间,可以放在页面的任意位置,这样也就很轻松地来构建页面布局。

也可将没有重叠的层的布局转化为表格布局,以定位网页元素。

还?? 100??万方数据可以和透明Flash形成页面特殊效果,它也是一些网站常用的技术,如我们经常看到页面的文本内容或图像上有鱼的游动、蝴蝶的飞舞、光的闪烁等。

另外,利用层与时间轴的结合,可以制作出动画效果的页面,可以作为当前最流行的网络营销的一种手段。

如在层中插入某公司图片或视频的产品宣传广告,让这个广告在页面上进行流动,这种动态效果会大大吸引人们的注意力,从而增加了商品宣传和销售,对加快公司的发展有着促进作用。

虽然我们浏览者对打开网站就会弹出这类广告有着不同的意见,但是设计者人性化地加上关闭按钮让我们有选择性地关闭,重要的是它的作用还是不容忽视的。

设计,即使我们不是专业编程人员,我们想要的布局设计也会非常容易设计起来。

标签在页面中有浮动的特性,需要利用CSS样式表来定位。

CSS样式表不但可以定位网页元素的位置,而且可以改变页面的排版、统一页面的风格,可以不用每一个页面都去设置单独的样式,只需建立一个样式表文件,然后再将其链接到其它页面就可以实现统一的页面风格了。

同时也可以设置不同对象的不同样式,产生独特的效果。

如文本格式化、艺术字效果、页面特效、鼠标特效,背景渐变等。

这样不但美化了页面,而且产生良好的视觉效果,吸引浏览者的眼球,以实现网页设计的目的。

再次,Dreamweaver能很快地完成网页的动态效果、视频和图像的处理功能。

利用行为可以产生奇特的鼠标、键盘和页面效应,可以防止别人直接拷贝自己网页的内容。

如有些网站利用点击鼠标打开浏览器窗口行为,它可以实现自定义窗口,让浏览者看到的是个性化的窗口,加深对该网页的印象并注意网页的内容。

再有我们常常在网站上看到弹出菜单效果的导航条,我们只需利用行为中的狐等这样的大型网站中也有选项卡式的内容板块,也只需利用DreamweaverCS3中的Spry选项卡式面板、Spry可折叠式面板、Spry折叠式技术来轻松实现。

懂。

使用Flash来增加网页的动感,用Flash视频产生影视效应,因为它们文件小,浏览速度快,是其它视频文件无法比拟的,所以在网页上得到了广泛的应用。

比如,我们经常在新浪网上看到视频新闻,以及优酷视频网和土豆视频网,或网站中出现广告视频窗口,都使用了Flash 视频的功能,利用它来实现在线视频,让浏览者非常容易在线收看影音文件,不用担心播放不流畅,而影响收看效果。

从而对信息产生强烈的敏感性,对新闻消息产生的印象亦更加深刻,对新产品性能更加了解,为人们的生活提供了方便。

这些动画和视频可以像处理软件,增强了图像与网页的协调性。

这三款软件合在一起就成了“网页的梦之队”,可谓是完美的组合,让网页设计人员成为一名真正的网页设计师。

最后,强大的动态交互式网页实现功能和管理维护功能。

态的、数据库驱动的Web应用程序(即动态网页,可以实现在线添加、删除、修改和查询等交互行为)。

若使用用手工书写代码的优点,非常适合初学者建设动态网站,如建立文章发布系统、在线音乐网站、文件上传系统、投票系统、会员管理系统、在线调查、商务/产品展示和购物、邮件群发、论坛、Blog和网站后台管理系统等动态网站,其操作直观易懂,让我们从枯燥的编写代码中解脱出来,成为一名真正的网页设计与制作高手。

以ASP动态网页技术为例,当前的商务网站或论坛网站中不可缺少的会员管理系统。

下面简述一下利用Dreamweaver工具制作会员管理系统的过程。

(1)系统结构设计会员从网站首页登录到首页,才能实现首页上的会员功能,如会员购物、会员发布论坛新帖等。

不是会员只有注册为会员才能实现会员的功能。

新会员注册时要通过表单的行为验证,同时检查用户名不能重名,才能注册成功,并将密码发送到注册时用的E―Mail邮件地址中,忘记密码时可以到自己邮箱去查。

若对自己注册信息进行修改,可登录到修改页,只有会员本身才能进入其修改页,所以每个会员只可以对自己的资料?? ??101万方数据也1】俘吼。

^月四1日E嚣累班^日鞋小IRI??HJ¨头巩舌贝酬睢、硎际jF信雷Ⅲ删目gflJ修以管皿性P健的功能。

当要在众多会员中盘找某个会员信息时,通过会员查找立刻找到相关信息;对于非法注册的会员,实现批量删除。

对于不同的会员分配给他们不同的权限等级,实现不同等级会员的管理功能不同。

系统结构图(图I)。

∈ n一隔丫儿午八④\―一/ 1 一占赢蕊(2)数据库设计符表示方式,是为了数据库的安全考虑.防止数据库被下载.给周站带来不必要的危害。

这类数据库不需要单独服务器支持即可运行,将其存于站点中的data(此目录可自拟)目录中,奉示例数据库只用了一个会员表.如有需要也可以将会员拆成多个表.如地址信息和权限都可单独成表,以实现地址单独添加、修改和删除,而不影响会员记录;也可单独增加或修改会员等级.实现更多权限级别。

membeLm会员表结构图(图2)。

其中,会员权限分为三个等级,默认为普通会员。

(3剧建站点利用Dreamweaver的‘姑点”下拉菜单‘新建站点”.设置本地信息和测试服务器信息,站点名称为会员管理系统,本地文件夹和测试服务器文件都指向站点根目录℃:unetpub\wwwroot",服务器模型可选择ASPVBScrlpl或ASPJ'avaScript.这里选择ASPVBScripl.这和后面创建页面类型保持一致。

(4)测试jI匠务器xFProfcssiohalScrvicePack2使用Windows版本以上或WindowsServer2000版本眦上的Inter-nd信息服务器《简称IlS),它的安装方法很简单,我们可以通过‘控制面板”中的‘‘添加,删除windows组件”来添加,只是添加时插入需要的当前操作系统版本号相同的安装盘才能添加成功。

万方数据(5J数据库连接利用D―weaver的应用程序面板来连接数据库,采用自定义连接字符串的方法,这种方法便于从本地应连接‘性用测试服务器上的驱动程序”.连接字符串(圈3)为:目3自定女{接宇#$(6)动志页面宣现步骤在页面中榷加表单,用于提交数据;③在表单中.利J盯表格或CSS+DIV标签设置页面市局;④在布局中加人相应表单域;⑤对表学进行表单行为验证,确保袁单提交数据的合法性;⑥为相应动态髑页创建记录集;⑦添加相应的服务器行为(如用户身份验证中的用户登录,限制对页的访问、用户注销和检查新用户,插^记录.修改记录.删除记录、重复区域.分页等)。

(7)本地测试在Dreamweaver中通过F{2快捷键来浏览首页“index 车即可浏览测试会员管理系统,(8)t传可以利用D<div id="loadingAD"><div class="ad_box"><div class="waiting"><strong>文档加载中...</strong>广告还剩<em id="adtime"></em>秒。

相关主题