网页设计教程.docx
- 文档编号:23526481
- 上传时间:2023-05-17
- 格式:DOCX
- 页数:66
- 大小:1.59MB
网页设计教程.docx
《网页设计教程.docx》由会员分享,可在线阅读,更多相关《网页设计教程.docx(66页珍藏版)》请在冰豆网上搜索。
网页设计教程
网页设计教程
1、导航条的制作
首先进行一些必要的前期工作,按CTRL+J,打开PageProperties(页面属性)窗口,参数设置如图二,这一设置对菜单的位置将有影响,所以请如图设置。
按CTRL+F2打开Objects面板,点击层[img=20,20]file:
///G:
/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之Dreamweaver篇.files/2003819141626.gif[/img]按钮后在页面中按住鼠标不放拖出一个层,然后在层的Properties(属性)面板中设置各参数,LayerID框填入title,L、T、W、H框分别填入8、15、480、15,背景色填入#006699,如图。
将光标移至层内,点击Objects面板上的表格按钮[img=21,21]file:
///G:
/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之Dreamweaver篇.files/2003819141659.gif[/img],插入一个一行四列的表格,设置如图。
按住CTRL键不放点取表格的四个单元格,然后设置它们的宽度为120,并在前两个单元格中输入文字,就是你的主菜单名,可按自己想要的名字输入,我用"经典论坛"和"天极网"为例,并加上链接。
二、下拉选单的制作
现在开始制作将要下拉出现的菜单,同样用层来制作。
再次从Objects面板插入一个层到前面我们做好的导航条的下方,各项参数填为:
LayerID框填入menu1,L、T、W、H框分别填入8、34、120、80,背景色填入#999966,其中L和T两个参数是设置这个层距离窗口左边框和上边框的距离,一定不能填错,不然菜单将会错位,也将影响完成后的可用性。
这时候,我们便可以在menu1这个层中输入我们所要的菜单内容。
为了排版方便,我在这还是使用表格来做菜单。
这个层将作为"经典论坛"的下拉选单出现,填入你所需要的菜单链接。
同样的方法,再为"天极网"也做一个下拉选单(层menu2)。
这一步要注意的地方就是下拉选单所在的层(menu1、menu2)的位置非常重要(由L和T两个参数决定)。
它们的上边线应该紧贴导航条的下边线,这样才能保证在后面我们完成第三个步骤后,菜单能正常使用。
因为如果远离导航条的话,鼠标一离开导航条,菜单就消失了。
按F2打开LAYER(层)面板,其中列出了网页中的三个层,点menu1和menu2的前面一格,出现闭着的眼睛图标,这两个层便隐藏起来了。
操作这一步是因为下拉菜单的初始状态是不可见的。
2、(在dw里在你要加下拉菜单的文字上面加上热键
点击行为里面的+显示弹出式菜单
按照要求设置就ok了)
三、显示和隐藏效果的添加
这一步骤是化腐朽为神奇的关键一步,大家仔细跟我来做。
本步骤分为两部分:
第一,对导航条中的主菜单添加控制显示隐藏的命令;第二,给下拉选单本身添加显示隐藏的命令。
1.导航条部分
首先按CTRL键不放点击导航条中的第一个单元格,现按Shift+F3打开Behaviors窗口,点[img=20,18]file:
///G:
/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之Dreamweaver篇.files/2003819141856.gif[/img]按钮,在下拉选项中选中"Show-HideLayers"(如图)。
如果选项中没有这一项,则选择ShowEventsFor下的IE5.0后,重新点按钮,此时"Show-HideLayers"将出现。
这时将会弹出一个窗口,如下图。
在NamedLayers框中会列出当前网页所有的层,选中"layer"menu1"",因为我们想要menu1这个层对"经典论坛"响应。
然后点下面的"show"按钮,OK。
这时会回到Behaviors窗口,窗口中出现如下图所示字样,点击Events下的文字"onClick",会出现一个向下的小箭头,点击它,在下拉选项中选中onMouseOver。
这一步的作用是实现当鼠标移至第一个单元格时,下拉选单menu1的状态变为显示(Show)。
下一步是让下拉选单menu2在鼠标移至第二个单元格时再变加隐藏状态。
再点[img=20,18]file:
///G:
/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之Dreamweaver篇.files/2003819142037.gif[/img]按钮,在下拉选项中选中"Show-HideLayers",在弹出窗口中选中"layer"menu1"",因为我们想要menu1这个层对"经典论坛"响应。
然后点下面的"hide"按钮,OK。
回到Behaviors窗口,点击向下的小箭头,在下拉选项中选中onMouseOut。
2.下拉选单部分
先选中层menu1,方法是点击层的边缘或在LAYER面板中点击menu1,用与导航条部分同样的方法在Behaviors窗口中为它添加显示与隐藏自己的命令。
这样做的效果是当鼠标移出层menu1时,层menu1就自动隐藏。
最后层menu1的状态如图所示。
3.重复以上两部分,为导航条的第二个主菜单"天极网"和层menu2添加显示、隐藏层命令。
四、下拉菜单的美化修饰
到这里,下拉菜单的功能效果已经实现了,你现在按F12就可以看到。
不过你一定也发现菜单有点难看,字不够精细,菜单选项的默认链接色不好看,菜单也没有边框,那就让我们来稍稍为它美容一下。
1.定义菜单字体样式
按Shift+F11打开CSSStyle(样式)面板,点击面板下面的[img=18,15]file:
///G:
/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之Dreamweaver篇.files/2003819142159.gif[/img]按钮
在弹出的"NewStyle"窗的Tag框内选中td标签,Type选第二项RedefineHTMLTag,Define选ThisDocumentOnly,如图。
此时弹出设置窗口,不管其它的,只在右边的Size框里选中12,单位为pixels。
2.定义菜单链接样式
在样式面板中,点击面板下面的按钮,在弹出窗中,Type选第三项UseCSSSelector,Tag框内选中a:
hover标签,Define选ThisDocumentOnly,如图。
点击OK后在弹出窗中,Color填#ff9933,Decoration选none,点OK。
返回到样式面板,点击面板下面的[img=18,15]file:
///G:
/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之Dreamweaver篇.files/2003819142413.gif[/img]按钮,在弹出窗中,Type选第三项UseCSSSelector,Tag框内选中a:
link标签,Define选ThisDocumentOnly。
点击OK后在弹出窗中,Color填#ffffff,Decoration选none,点OK。
又返回到样式面板,点击面板下面的[img=18,15]file:
///G:
/程序所用的材料/网站/网页制作下载文章/[天极论坛网页设计]下拉菜单全攻略之Dreamweaver篇.files/2003819142413.gif[/img]按钮,在弹出窗中,Type选第三项UseCSSSelector,Tag框内选中a:
visited标签,Define选ThisDocumentOnly。
点击OK后在弹出窗中,Color填#ffffff,Decoration选none,点OK。
3.定义菜单边框样式
在样式面板中,点击面板下面的按钮,在弹出窗中,Tag框内选中td标签,Type选第二项RedefineHTMLTag,Define选ThisDocumentOnly,如图。
弹出设置窗口,在左边的列表中选Border,右边四条边宽度都输入为1,颜色设为黑色#000000,Style选为solid。
Dw网页设计教程:
层及其应用
(层在网页设计制作中基本的运用方法
什么是网页中的“层”。
层是CSS中的定位技术,在Dreamweaver中对其进行了可视化操作。
文本、图像、表格等元素只能固定其位置,不能互相叠加在一起,而层可以放置在网页文档内的任何一个位置,层内可以放置网页文档中的其他构成元素,层可以自由移动,层与层之间还可以重叠,层体现了网页技术从二维空间向三维空间的一种延伸。
1、在「窗口」菜单>选"层"或点「插入」菜单>布局对象>选"层"。
2、在页面中显示一个层。
3、通过周围的黑色调整柄拖动控制层的大小。
4、拖动层左上角的选择柄可以移动层的位置。
5、单击层标记可以选中一个层。
6、在层中可以插入其他任何元素包括图片文字链接表格等。
[层和表格之间转换]
由于层在网页布局上非常方便,所以,一些人可能不喜欢使用表格或"布局"模式来创建自己的页面,而是喜欢通过层来进行设计。
DreamweaverMX2004可以使用层来创建自己的布局,然后将它们转换为表格。
在转换为表格之前,请确保层没有重叠。
请执行以下操作:
选择“修改”>“转换”>“层到表格”。
即可显示"转换层为表格"对话框。
选择所需的选项。
单击“确定”。
若要将表转换为层,请选择"修改">"转换">"表格到层"。
即可显示"转换表格"为层。
对话框。
选择所需的选项。
单击"确定"。
层还有一个概念就是层数,层数决定了重叠时哪个层在上面哪个层在下面。
比如层数为2的层在层数为上海网站设计的层的上面。
改变层数就可以改变层的重叠顺序。
层面板上面还有一个参数就是防止层重叠。
一旦选中,页面中层就无法重叠了。
层还有一种父子关系也就是隶属关系。
在层面板中是这样表示的。
图中Layer2挂在Layer1的下面。
Layer1为父层,Layer2为子层。
在页面中拖动Layer1,Layer2也跟着动起来。
因为他们已经链在一起了,并且Layer2隶属于Layer1。
父层移动会影响到子层。
移动layer2层,Layer1层不动。
也就是子层不会影响到父层。
要建立这样的一种隶属关系方法很简单。
在层面板中按Ctrl键将子层拖拽到父层即可。
一个网站设计页面中可以画出很多的层,这些层都会列在层面板中。
层之间也可以相互重叠。
层面板可以通过菜单「窗口」菜单>选"层"打开。
这里我们需要对几个概念进行解释。
层有隐藏和显示的属性。
这是层的一个重要属性和以后说到的行为相结合就变成了重要的参数。
单击层面板列表的左边,可以打开关闭眼睛。
眼睛挣开和关闭表示层的显示和隐藏。
)
层(Layer)是一种HTML页面元素,您可以将它定位在页面上的肆意位置。
层可以包含文本、图像或其它HTML文档。
层的呈现使网页从二维平面拓展到三维。
可以使页面上元素进行重叠和复杂的结构。
首先,请看下图:
我们首先来做一个层
1、在「窗口」菜单>选“层”,或点「插入」菜单>结构对象>选“层”。
2、在页面中显示一个层。
3、经由过程周围的黑色调整柄拖动节制层的大小
4、拖动层左上角的选择柄可以移动层的位置。
5、单击层标识表记标帜可以选中一个层。
6、在层中可以插入其他任何元素包罗图片文字链接表格等。
一个页面中可以画出良多的层,这些层城市列在层面板中。
层之间也可以彼此重叠。
层面板可以经由过程菜单「窗口」菜单>选“层”打开。
这里我们需要对几个概念进行诠释。
层有埋没和显示的属性。
这是层的一个主要属性和今后说到的行为相连系就酿成了主要的参数。
单击层面板列表的左边,可以打开封锁眼睛。
眼睛挣开和封锁暗示层的显示和埋没。
层还有一个概念就是层数,层数抉择了重叠时哪个层在上面哪个层不才面。
好比层数为2的层在层数为1的层的上面。
改变层数就可以改变层的重叠挨次。
层面板上面还有一个参数就是防止层重叠。
一旦选中,页面中层就无法重叠了。
层还有一种父子关系也就是附属关系。
在层面板中是这样暗示的。
图中Layer2挂在Layer1的下面。
Layer1为父层,Layer2为子层。
在页面中拖动Layer1,Layer2也跟着动起来。
因为他们已经链在一路了,而且Layer2附属于Layer1。
父层移动会影响到子层。
移动layer2层,Layer1层不动。
也就是子层不会影响到父层。
要成立这样的一种附属关系体例很简单。
在层面板中按Ctrl键将子层拖拽到父层即可。
[层和表格之间转换]
因为层在网页结构上很是便利,所以,一些人可能不喜好利用表格或“结构”模式来建立自己的页面,而是喜好经由过程层来进行设计。
DreamweaverMX2004可以利用层来建立自己的结构,然后将它们转换为表格。
在转换为表格之前,请确保层没有重叠。
请执行以下操作:
选择“点窜”>“转换”>“层到表格”。
即可显示“转换层为表格”对话框。
选择所需的选项。
单击“确定”。
话框。
选择所需的选项。
单击“确定”。
Dw里利用层的一些建议
层的八条定律
当然,这些并非真正的定律,而只是一些有益的忠言,使你免陷于利用层时可能的困窘中。
原本有九条定律的,我们精简失踪一条,还有下面的八条:
1.若是你要嵌套层,决不要利用多重父层,应共享一个配合的单一父层。
若是你必需利用未在样式表中作完全限制的嵌套层,应在Netscape4x中做经常的检查。
2.老是将文本放在层中的一个表格里-表格应该是绝对大小的(以像素为单元,而不是百分比)且不大于层,不外主表中的嵌套表可以设置为相对的百分比大小。
这样做可以防止当窗口大小改变时,NC4xx会从头调整文字到不成预期的位置。
3.决不放置层在表格中。
Netscape4x将不能准确地舆解表格中的层。
4.老是利用NetscapeResizeFix这个插件于任何具有层或CSS样式的页面。
5.不要期望当浏览器窗口大小或屏幕分辩率发生转变后,绝对定位的层仍能连结与居中的表格或页面内容的对齐。
有插件可用来动态的实现这个结果。
6.不要试图在层中放置滚动条(用overflow属性)-利用一个DHTML滚动器或者ProjectSevenIFRAME手艺来取代,对于Netscape4.x用户,可以在IFRAME中设置一个特定的弹出页面。
7.决不给层和一幅图像不异的命名-每个层应该有自己独一的并区别于页面中的其它元素的名字(事实上,你不应该让两个具有不异的名称的元素呈此刻统一个页面中)。
8.不要直接对层应用事务/行为。
它们将不能跨浏览器地工作。
应用它们到层中的内容(链接或图像)而不是层自身。
Dw打造多彩文字链接
文字链接可以说是网页中最常见的页面元素了,默认的文字链接样式都是带下划线的结果,这种一陈不变的外不美观可能使良多伴侣都想改变它,以使之合适页面的整体结果,自从样式表获得普遍的应用后,这个愿望此刻可以很是便利的实现。
今天我给大师介绍操纵样式表打造多彩的文字链接结果。
我将分为初级篇、进阶篇和高级篇给大师作介绍,所有的链接样式结果我们都将在Dreamweaver的样式编纂器中完成,关于Dreamweaver中的样式编纂器的用法请参考以前的介绍。
链接样式浏览结果如下图;具体的页面浏览请看这里
一、筹备工作
我们将首先建立一个根基的链接样式,其他的样式将在此根本上添加一个自界说的Class类。
1、Shift+F11打开样式面板,点击新建样式按钮,如图一;
2、在Type选项中选择UseCSSSelector,建立默认链接样式,如图二;
3、按照图三中所示设定默认链接的样式为无下划线,字体为宋体9pt,其他色彩等等都不设置,我们将在后面为每一个Class类分袂设置。
4、界说样式类Class。
我们下面的每一个样式气概都是界说了一个零丁的类,并将其赋予链接文字。
法式如下:
点击添加打开新界说样式面板,选择MakeCustomStyle(class)界说自己的样式类。
如图四;
5、为链接文字添加样式类。
在Dreamweaver中选择一项链接文字,在窗口最下端的快速标签选择条上选择标签,右键点击此标签,选择SetClass将自界说的样式赋予此链接文字即可,如图五;
6、其它链接文字样式的做法与此不异,后面我将不再作介绍。
在本教程中有关界说hover状况的链接样式法子,伴侣们可以自己建造。
我也不再作介绍,只是提醒界说时直接输入[.t1:
hover]即可。
二、初级链接样式
这部门的链接结果我们将完全在样式编纂器的Type分类中完成,若何建立和设置我不再细说,只把完成的面板图给大师看,并稍作介绍。
1、通俗链接。
如图六;
通俗的链接都是在样式编纂器的Category分类中的第一项Type中设定,Color界说链接字体的颜色,Decoration界说链接的划线气概,分为以下几类:
underline:
下划线
overline:
上划线
line-through:
删除线
blink:
明灭线
none:
无划线
本部门的其他几种链接样式都是经由过程改变划线的组合来达到的结果。
2、无下划线链接,如图七;
3、双划线链接,如图八;
4、删除线链接,如图九;
三、进阶链接样式
接下来我介绍一种另类链接样式的界说体式格局,这种体式格局主若是操纵样式表中的Border属性来替代通俗链接的划线,因为Border有更多的节制参数和样式,是以可以实现一些特别的结果。
我们来看看下面的面板,如图十;
Dw打造多彩文字链接
(2)
时间:
2010-09-15
在Border选项中包罗Width(划线宽度)、Color(划线色彩)、Style(划线种类)三部门,而每部门又是可以针对分歧的边框设定分歧的参数,这是通俗链接划线不成能实现的结果。
需要提醒大师的是,利用这种体式格局界说链接样式还有一个需要的前提:
就是必需界说样式中的Box属性,如图十一;
这是因为Border是属于样式中的块状元素,我们必需先界说一个块状元素才可以使Border起感化。
我们只要肆意界说Box选项中的Width或Height即可,具体数值大师可以试着看看结果,我在这里界说了Height为0。
下面我们看看可以做出什么样的结果。
1、另类链接样式。
设置如图十二;
2、定制下划线色彩,我们可以界说出下划线与文字分歧的色彩,这是通俗链接文字不成能实现的结果,只要将Border的色彩和文字的色彩界说的分歧即可,如图十三;
3、定制下划线距离。
此种划线的距离我们可以在Box分类中设置,只需改变Padding的数值,在本例中我们设定Padding—Bottom为5pix,如图十四;
4、定制划线长度和对齐体式格局。
更进一步我们还可以切确界说划线的长度和对齐体式格局,打开Box分类设定Width为200,如图十五;设定Block分类的TextAlign为Center,即中心对齐,如图十六;
5、定制双划线结果。
改变Border中的Style即可改变划线的外不美观,其中设定Style为Double,并设定Bottom为3pix即可实现双划线的结果。
如图十七;
四、高级链接样式
经由过程组合应用上面介绍的手艺,我们还可以创作出更复杂的文字链接样式,下面我们介绍三个例子。
1、界说块状链接。
首先给链接增添一个布景色,如图十八;
再为文字链接增添四边框即可实现平面块状文字链接,如图十九;
2、界说按钮状文字链接。
改变边框的样式,界说Border-Style为outset,如图二十;
界说Box选项中的Width和Height可以界说按钮的宽和高,界说Padding为2pix可以使链接文字与按钮周围有2pix的间距,如图二十一;
3、界说特效文字链接。
CSS样式表中还包含了一组特效滤镜,我们可以再连系滤镜与前边的参数建立特别的链接样式。
本例中我建立了一个利用Blur滤镜的文字链接,并带有边框结果。
如图二十二;
4、界说静态布景切换的结果。
本例是经由过程对链接文字通俗状况和Hover状况设定分歧的布景图片来实现布景切换的结果。
见下图:
5、动态布景切换的结果。
此结果与上例根基一样,只是在Hover状况界说了一个动态Gif图片布景。
而且这个图片需要一点技巧就是设定轮回为一遍,并在最后添加一个帧,设定帧的时候为一个较大的值,如10000。
这样可以使动画执行一边后就遏制。
为改善结果执行时的速度,我们还需要在Dreamweaver中增添了一个Preload/doc/webpage/images/images行为。
这需要打开行为面板,并添加Preload/doc/webpage/images/images行为,如图:
Dw打造多彩文字链接(3)
时间:
2010-09-15
我们可以把最后两种链接样式所需要用到的四张图片都预先载入,如下图:
五、总结
我就介绍这么多链接样式,配合设置链接文字的hover状况,可以实现很是标致的结果,具体的页面浏览请看这里,但愿伴侣们按照上面的思绪,组合缔造出更多地链接文字样式。
记住,样式表就好比网页建造中具有宝藏的一个冰山,今天我们只是揭开了冰山小小的一个角落,更多的宝藏等着你去挖掘。
Dw设计、套用模板技巧
跟着Internet的普及,良多人已经不知足于仅仅上网冲浪,而但愿深切地介入其中。
此刻,拥有自己的Web网站已经成为一种潮水。
固然建造一个简单的网页并不坚苦,可是建造出超凡脱俗的网站就不那么轻易了,是以我们特意为大师筹备了最新网站设计软件DreamweaverMX2004的系列教程,但愿对大师有所辅佐。
凡是在一个网站中会有几十甚至几百个气概基秘闻似的页面,若是每次都从头设定网页结构以及不异栏面前目今的导航条、各类图标就显得很是麻烦,不外我们可以借助DreamweaverMX2004的模板功能来简化操作。
其实模板的功能就是把网页结构和内容分手,在结构设计好之后将其存储为模板,这样不异结构的页面可以经由过程模板建立,是以能够极大提高工作效率。
一、建造模板
建造模板和建造一个通俗的页面完全不异,只是不需要把页面的所有部门都建造完成,仅仅需要建造出导航条、题目栏等各个页面的公有部门,而把中心区域用页面的具体内容来填充。
第一步:
先在DreamweaverMX2004中运行“File→New”呼吁,接着从图1所示的窗口中依次选定“Templatepage→HTMLtemplate”选项,点击“Create”按钮之后即可建立一个模板文件。
第二步:
在页面设计视图下插入网页框架、导航条、Flash题目等所有页面公有的元素(图2),然后运行“File→Save”呼吁将这个模板保留下来。
小提醒:
可以先下载一个中意的网页,然后在Dreamwea
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 教程