使用Dreamweaver8实现网页区域选择显示Word文件下载.docx

上传人:b****5 文档编号:19847534 上传时间:2023-01-10 格式:DOCX 页数:46 大小:678.81KB
下载 相关 举报
使用Dreamweaver8实现网页区域选择显示Word文件下载.docx_第1页
第1页 / 共46页
使用Dreamweaver8实现网页区域选择显示Word文件下载.docx_第2页
第2页 / 共46页
使用Dreamweaver8实现网页区域选择显示Word文件下载.docx_第3页
第3页 / 共46页
使用Dreamweaver8实现网页区域选择显示Word文件下载.docx_第4页
第4页 / 共46页
使用Dreamweaver8实现网页区域选择显示Word文件下载.docx_第5页
第5页 / 共46页
点击查看更多>>
下载资源
资源描述

使用Dreamweaver8实现网页区域选择显示Word文件下载.docx

《使用Dreamweaver8实现网页区域选择显示Word文件下载.docx》由会员分享,可在线阅读,更多相关《使用Dreamweaver8实现网页区域选择显示Word文件下载.docx(46页珍藏版)》请在冰豆网上搜索。

使用Dreamweaver8实现网页区域选择显示Word文件下载.docx

'

;

olduser.style.display='

none'

"

  代码含义是点击radiobutton1时,设置表格newuser的display属性为空,即可视,表格olduserdisplay属性为none不可视。

  同样编辑radiobutton2代码,它的onclick事件响应和radiobutton1恰恰相反,代码如下:

onclick="

  完成以上步骤后,就搞定了这个页面的制作。

F12预览,浏览器中,我们点击radiobutton1就会显示新用户注册界面;

再点击radiobutton新用户注册界面不可视,老用户登录界面显示。

  通过很简单的代码编辑,就可以实现这个非常实用的功能。

虽然我们用层也可以实现这样的效果,但是层在网页中精确定位远没有表格方便,不便于网页的整体布局设计。

入门:

用Dreamweaver简单描述制作网页的基本步骤

 

更新日期:

2007-07-1622:

52 

出处:

网页教学网 

作者:

闪电儿收藏本文

  本教程主要是针对初学者,如何使用Dreamweaver制作一个网页?

这个教程具体详细讲解了制作网页的步骤,及注意的问题,并且拿一个实例来给大家做了一下详细讲解!

  创建网页页面

  1、在Dreamveaver“文件-新建-常规-基本页-HTML”,这样就建好了一个页面,英文版的默认的文件名为untitled.htm。

中文版的的默认的文件名为“无标题文档”。

htm就表示这个网页文件是一个静态的HTML文件。

给它改名为index.htm。

  

  注:

网站第一页的名字通常是index.htm或index.html。

其它页面的名字可以自己取。

这也就是主页,上传后打开网页默认连接到此页。

  2、在标题空格里输入网页名称,点击修改-页面属性,打开“页面属性”窗口。

在这里可以设置网站的标题、背景颜色或背景图像,超级链接的颜色(一般默认即可),其他都保持默认即可。

  3.此时光标位于左上角,可输入一句话,如“欢迎来到我的主页”。

选取文字,用菜单“窗口/属性”打开属性面板,选取文字大小为6,再使文字居中,然后在文字前用几个回车使其位于页面中间等。

  4.如要选取字体,则选择字体中的最后一项:

编辑字体列表。

然后在对话框中选+号,接着在“可用字体”栏中选择需要加入到字体列表中的一种字体,点击中间的按钮就可以加入了。

在网页上最常用的是宋体字。

不要将特殊的字体加到列表中使用,因为别人电脑上未装就看不到。

如果需要用的话,要做成图片后再使用。

在网页上打入空格的办法是:

把输入法调为全角。

在网页上换行的办法是:

shift+Enter。

只按Enter则为换段。

  下面拿一个现成的例子来给大家讲解一下:

  现在,以下边的简单网页为例,叙述一下制作过程。

简单网页如下图:

  在开始制作之前,我们先对这个页面进行一下分析。

看看这个页面用到了哪些东西。

  □网页顶端的标题“我的主页”是一段文字。

  □网页中间是一幅图片。

  □最下端的欢迎词是一段文字。

  □网页背景是一深紫红颜色。

  构思好这个网页的结构,我们就可以开始制作了。

  首先启动Dreamweaver,确保你已经用站点管理器建立好了一个网站(根目录)。

  为了制作方便,请您事先打开资源管理器,把要使用的图片收集到网站目录images文件夹内。

  【插入标题文字】

  进入页面编辑设计视图状态。

在一般情况下,编辑器默认左对齐,光标在左上角闪烁,光标位置就是插入点的位置。

如果要想让文字居中插入,点属性面板居中按钮即可。

启动中文输入法输入“我的主页”四个字。

字小不要紧,我们可以对它进行设置。

  【设置文字的格式】选中文字,在上图属性面板中将字体格式设置成默认字体,大小可任意更改字号。

并选中“B”将字体变粗。

  【设置文字的颜色】首先选中文字,在属性面板中,单击颜色选择图标,在弹出的颜色选择器中用滴管选取颜色即可。

  【设置网页的标题和背景颜色】

  点击“修改”菜单选“页面属性”。

系统弹出页面属性对话框(如下图)

  请在标题输入框填入标题“我的主页”。

  设置背景颜色:

 网页背景可以是图片,也可以是颜色。

此例是颜色。

如上图打开背景颜色选择器进行选取。

如果背景要设为图片,点击背景图象“浏览”按钮,系统弹出图片选择对话框,选中背景图片文件,点击确定按钮。

  设计视图状态,在标题“我的主页”右边空白处单击鼠标,回车换一行,按照以下的步骤插入一幅画图片,并使这张图片居中。

您也可以通过属性面板中的左对齐按钮让其居左安放。

 

  【插入图像】选择以下任意一种方法:

  

(1)使用插入菜单:

在“插入”菜单选“图像”,弹出“选择图像源文件”对话框,选中该图像文件,单击确定。

如下图:

  

(2)使用插入栏:

单击插入栏对象按钮>

选按钮,弹出“选择图像源文件”对话框,其余操作同上。

  (3)使用面板组“资源”面板(如下图):

点按钮,展开根目录的图片文件夹,选定该文件,用鼠标拖动至工作区合适位置。

  注:

为了管理方便,我们把图片放在“images”文件夹内。

如果图片少,您也可以放在站点根目录下。

注意文件名要用英文或用拼音文字命名而且使用小写,不能用中文,否则要出现一些麻烦。

  一个图片就插入完毕了。

(插入*.swf动画文件,选择“插入”菜单>媒体>Flash)。

  【输入欢迎文字】

  在图片右边空白处单击,回车换行。

仍然按照上述方法,输入文字“欢迎您……”然后,利用属性面板对文字进行设置。

  保存页面。

  一个简单的页面就这样编辑完毕了。

  【预览网页】在页面编辑器中按F12预览网页效果。

  网站中的第一页,也就是首页,我们通常在存盘时取名为index.htm。

  【小结】我们制作了一个简单的网页。

   内容有四:

   ①图片插入和对齐设置;

   ②文字的格式、颜色和加粗等设置;

   ③背景颜色的设置;

   ④预览网页,查看实际效果。

   不仅要掌握还要举一反三反复练习。

Dreamweaver网页制作教程:

层及其应用

2007-06-1819:

36 

  层(Layer)是一种HTML页面元素,您可以将它定位在页面上的任意位置。

层可以包含文本、图像或其它HTML文档。

层的出现使网页从二维平面拓展到三维。

可以使页面上元素进行重叠和复杂的布局。

首先,请看下图:

  我们首先来做一个层

  1、 

在「窗口」菜单>选“层”,或点「插入」菜单>布局对象>选“层”。

  2、 

在页面中显示一个层。

  3、 

通过周围的黑色调整柄拖动控制层的大小

  4、 

拖动层左上角的选择柄可以移动层的位置。

  5、 

单击层标记可以选中一个层。

  6、 

在层中可以插入其他任何元素包括图片文字链接表格等。

  一个页面中可以画出很多的层,这些层都会列在层面板中。

层之间也可以相互重叠。

层面板可以通过菜单「窗口」菜单>选“层”打开。

  这里我们需要对几个概念进行解释。

层有隐藏和显示的属性。

这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。

单击层面板列表的左边,可以打开关闭眼睛。

眼睛挣开和关闭表示层的显示和隐藏。

  层还有一个概念就是层数,层数决定了重叠时哪个层在上面哪个层在下面。

 比如层数为2的层在层数为1的层的上面。

改变层数就可以改变层的重叠顺序。

  层面板上面还有一个参数就是防止层重叠。

一旦选中,页面中层就无法重叠了。

  层还有一种父子关系也就是隶属关系。

在层面板中是这样表示的。

  图中Layer2挂在Layer1的下面。

Layer1为父层,Layer2为子层。

在页面中拖动Layer1,Layer2也跟着动起来。

因为他们已经链在一起了,并且Layer2隶属于Layer1。

父层移动会影响到子层。

移动layer2层,Layer1层不动。

也就是子层不会影响到父层。

  要建立这样的一种隶属关系方法很简单。

在层面板中按Ctrl键将子层拖拽到父层即可。

  [层和表格之间转换]

  由于层在网页布局上非常方便,所以,一些人可能不喜欢使用表格或“布局”模式来创建自己的页面,而是喜欢通过层来进行设计。

DreamweaverMX2004可以使用层来创建自己的布局,然后将它们转换为表格。

  在转换为表格之前,请确保层没有重叠。

请执行以下操作:

选择“修改”>“转换”>“层到表格”。

即可显示“转换层为表格”对话框。

选择所需的选项。

单击“确定”。

话框。

  选择所需的选项。

  层及应用我们就简单介绍到这里。

B

如何使用Dreamweaver方便快捷编辑网页标签

2007-05-1108:

14 

  不知各位是否有手写代码的习惯。

例如:

要在一个单元格插入一段CSS代码,或者一段Javascript代码,怎么做才比较快捷方便呢?

  虽然Dreamweaver已经为我们提供了代码视图,可是必竟还要手工去查找,还要来回地切换。

虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤。

有没有更好的办法呢?

答案是肯定的。

  下面我们以Dreamweaver8为例,假设大家Dreamweaver面板布局都为默认的布局方式。

查看一下属性面板的上方是否有一行小标签。

(如果您用的不是MX,标签在状态栏中)例如:

你新建一个空白的HTML文档,上面的小标签应该为<body>。

请看下图:

  图上画红框的地方,就是我们今天的主角了。

我们先看一下“环绕标签”。

在页面上随便打入几个字,选中它们,在右键菜单中选择“环绕标签”,在弹出的环绕标签对话框中输入“<strong>”(不包括引号),然后回车。

之前被选中的文字是不是已经变成粗体了,到源代码看一下,我们所选中的文字是不是已经被<strong>标签包围了?

大家可以试着再加入其它的一些标签,如:

<a>,<p>。

这里也可以直接输入属性。

如:

<pstyle="

color:

#CC0000"

>。

这里仅大概说明一下,如有疑问,请查看Dreamweaver的帮助。

  下面说一下标签选择器的应用方法。

  我们将光标移动到刚才加粗的文字里,会发现在<body>的后面多了个<strong>。

这就是说光标所在处的这些文字的外面有<strong>的标签,在<strong>标签外有<body>标签。

下面大家再添加一个表格,把光标移动到表格内,看看标签的结构。

相信对HTML有些基础的朋友都应该很容易理解的。

  假设我们现在要插入一个表格,并将这个表格用CSS来将它下移10个象素。

先插入一个表格,然后交光标移动到表格内。

这时在标签选择器上应该可以看到这样的字样<body><table><tr><td>。

然后在table标签上点鼠标右键,会看到有四个选项。

删除标签、编辑标签、设置类、设置ID。

  删除标签:

即是将标签删除。

(有一些特殊的标签是不能删除的。

<table>、<tr>、<td>、<body>...)

  编辑标签:

给标签附加属性、修改属性等。

  设置类:

给这个标签附予一个类。

(即CSS的类别)

  设置ID:

给这个标签附予一个ID。

(即CSS的ID)

  在这里,我们选择编辑标签,然后在后面加上属性style="

margin-top:

10px"

和正常书写源代码的方式是一样的。

然后按下回车。

就完成了编辑。

如果在Dreamweaver里看不到效果,请用浏览器预览。

  还有另外一种方法,也许你会喜欢。

选择窗口→标签检查器当你选择某一个标签后,这里会显示出当前选择标签的所有属性。

也可以很快地在这里进行编辑。

在这里输入的属性不用包括引号,编辑后按回车确定。

  这里我们只将方法告诉大家,希望大家能够从中受益。

Dreamweaver8来构建符合标准的Web站点

2007-05-0104:

33 

收藏本文

  译者序:

这个系列原文一共8篇文章,从普及WebStandards入手,讲述如何用Dreamweaver8来构建符合标准的Web,由于原作者的此篇文章是对《BuildYourOwnStandardsCompliantWebsiteUsingDreamweaver8》(这篇文章是收费的)的摘录,所以我对内容进行了适当的删改,顺序与原文是一致的,但篇幅会有调整,特此告知。

翻译水平有限,敬请谅解。

  如果您正在读这篇文章,您很可能是已经对Web标准有了一定的兴趣,并且对用DW(Dreamweaver的简称)来构建的站点中标准的应用非常好奇。

  或许您已经对WS(WebStandards的简称)有了一定的了解,但是您并不知道如何用DW来编写可兼容的代码。

或者您是一个DW用户,您很想遵从WS,更广泛的使用CSS,并且可以制作出更有亲和力的文档。

无论您是哪一种类型,这篇文章都会给您想要的答案:

告诉您如何用DW来搞定WS。

  Web标准的定义

  就我们在整篇文章所关心的WS来说,让我们首先花一点时间来明确一下我们究竟在谈论些什么:

  WS是一些指导Web开发语言的规范,是由W3C所制定的。

这些规范包含了多种语言,例如,HTML、XHTML和CSS还有一些其他的相关语言,例如MathML,用来表示数学中的方程,当你有这种特殊的需要的时候,或许会用得上。

W3C也颁布了“Web内容亲和力指南”(WebContentAccessibilityGuidelines——WCAG)——推广网页的可访问性(通过WAI)

  提示:

直接获取这些规范

  你可以在W3C的网站上阅读这些规范,尽管他们有时读起来还是有些困难的:

  HTML4.01

  XHTML1.0

  CSS1

  CSS2.1

  WCAG1.0

  在本文中,我们将会用到XHTML1.0、CSS1和2.1、WCAG1.0等规范和建议,但是你一定很高兴知道我们其实不必过多的阅读W3C文档。

  谁需要WS?

  您可能只有一个含糊的概念:

WS是个好东西,但是许多网站——包括许多知名的站点——并不遵从WS,并且他们看起来的确管理得很好。

所以,为什么我们要尽力去遵从WS呢?

这么做会有什么真正的收益吗?

谁需要WS?

谁需要去关注W3C的规范与建议?

  Web开发者与设计者

  需要关注WS的首类人群就是我们:

网站建设的开发者与设计者。

花费时间去学习如何用WS开发对于我们来说值得吗?

  整洁的标记使BUG的修复速度加快。

  如果您通过W3C校验您的页面,至少您会了解到不规范的标记并不是引起您曾经遇到过的错误的原因。

有时,校验一个页面和修复已发现错误的过程,可以清除显示中遇到一些问题,这些问题是由标记(element)没有结束或标签(tag)拼写错误引起的。

  即使校验您的文档并没有修正这些问题,至少你会知道这些问题存在于规范的文档中。

既然你已经知道这个问题不是一个错误,那么你可以开始关注其他的问题了,例如在不同的浏览器中CSS处理差异问题。

  遵从可访问性的需求很容易

  如果你编写一个规范的XHTML标记,那么你就可以保证文档在语义上是无误的,并且您可以把文档中的内容与表现相分离,您将可以把大量的工作放在许多WCAG1.0中所列的可访问性的问题上。

认识到可访问性并不是仅仅为残疾人设计的这一点也很重要。

一个亲和力好的站点是可以被许多不同的设备访问的,例如移动电话和PDA,他们是不具备强大的处理能力去对付那些散乱而非标准的标记的。

  向前兼容

  如果您仅仅考虑到自己新开发的页面在当前的几个浏览器中的表现,那么你怎么才能保证它在未来的新浏览器中的表现呢?

新浏览器或许会把您的页面显示的很糟糕,此时你只能去费力的寻找和修正那些恼人的问题。

  遵从WS并不会完全根除这个问题;

然而,标准的兼容使你的设计失败的风险大大减少,同样,如今的浏览器软件公司也开始支持标准。

他们也许会偶然的错误解释了某部分规范,他们不可能完全不支持它。

如果最坏的事情发生了,并且一个新的浏览器在你的标准化网站上产生了奇怪的效果,那么修复它要比修复一个不兼容的站点容易的多。

如果你遇到一个问题,它同样会影响其他的标准可兼容网站。

Web社区的群体智慧会指出这个问题,并会写文章来解决这个问题。

所以,大家集体讨论,在可兼容的文档里修正这个BUG也比在不兼容的文档里修正更加的容易。

  更方便的重构

  你曾经不得不从一个站点中剥离文字而对他进行重构过吗?

而且一切都得从头开始。

你曾经见过那些被字体标签和微小的表格单元(它使我们只能从头开始)弄得混乱不堪的标签吗?

我只知道我曾经看过,这是一个漫长的过程,大量的时间和金钱都被这个站点的重构烧掉了。

  分离文档的内容与表现将会使你体会到标准化兼容带来美妙:

这意味着下次某个人想重构这个站点的时候,他们不必把Web文档中的拷贝出去。

所有站点中的文本都将会被具有语义的(X)HTML所标记,所有的表现信息——这部分才是站长想更改的——都将被储存在一个可轻易替换的CSS文件中。

  一些客户在开始要求你做一些改变之前是不会等待它去重构的,他们只会等到游览完猛犸象化石坑,然后就要求你说“把左边栏挪到右边就可以了。

”对于一个标准化可兼容站点来说,全部页面都是由CSS控制的,你可以很方便移动页面中的标记,而不用在许多以复杂表格为结构的页面中想歪招了。

这使得改变页面布局更加简单。

  结构从表现中分离同样可以使增加新的元素变得更加容易,就像一个高对比度、小图片版本的站点或许对于某些浏览者更有吸引力。

当您可以轻松的更换样式表时,为什么建立单独的纯文本版的页面呢?

  浏览器软件公司

  浏览器的软件公司开始对WS关注了。

过去,浏览器软件公司添加他们私有的专属标签和属性到基本的语言中。

但是现在,前所未有的,他们都开始遵从标准了,并且一些最新的浏览器已经可以确定,正在努力按照规范中所定义的(X)HTML和CSS来显示它们。

  在可遇见的未来中,浏览器都将能够显示大多数的不规范标记、代码,因为如果它们不这么做,成千上万的不规范站点都将无法正常显示——那么大众就很可能开始责备浏览器了,而不是责备Web设计者。

然而,其他的设备(那些没有台式机强大处理功能的设备)将会更加依赖那些他们所遇到代码的标准化兼容性了。

  创作工具软件厂商

  创作工具软件厂商——例如Macromedia,它制作了Dreamweaver——也像Web设计者一样,开始遵从WS了,比如,它们越来越多的客户要求这些创作工具可以输出规范的标记。

原本这些可视化的开发环境都没有太好的口碑,因为它们会生成混乱、不规范的标记;

然而,最新的主要可视化开发环境都援引了标准化的兼容性和可访问性的元素,这也成为了主要的卖点。

软件厂商一定要聆听,并回应市场的需求。

  Web用户

  我们设计的网站的用户也从我们采用WS中获益,即使他们并没有认识到这一点!

或许他们正无意识的使用那些专门针对当今流行浏览器而开发的站点。

如果这些用户转用其他的浏览器,他们或许就会发现这个在线的体验就不再令人享受了,因为那些专属的标记是不会被新浏览器所接受的。

一个标准化可兼容的站点在不同的浏览器中都有很好的表现,不论是在现有的,还是在未来的浏览器中都同样优秀。

  此外,一个遵照可访问性建议的网站对那些发现浏览网页不如意的用户也是很有亲和力的。

Web应该给那些视觉有缺陷或其他的残疾人提供更方便的购物、阅读、搜索的条件。

不应该因为用专属标记或者其他排它(指浏览器)技术的站点,使他们无法浏览。

学习参考:

用Dreamweaver+ASP实现网页分页

2007-03-2419:

30 

  今天心情有点激动,想把"

关于用DW+ASP实现分页技术的参考"

分享给用DW+ASP做网页的朋友们.去掉只有"

第一页,前一页,下一页,最后一页"

的小痛苦。

  此效果最后的显示是:

第N页[共*页]<

<

12345678910>

  用DW+ASP做网页时,在绑定记录集后,代码页里马上出现以下代码:

DimRecordset1 

DimRecordset1_numRows 

SetRecordset1=Server.CreateObject("

ADODB.Recordset"

) 

Recordset1.ActiveConnection=MM_数据库名_STRING 

Recordset1.Source="

SELECT*FROM表名"

Recordset1.CursorType=0 

Recordset1.CursorLocation=2 

Recordset1.LockType=1 

Recordset1.Open() 

Re

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 总结汇报 > 学习总结

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1