web design training - layers
Microsoft Office Training verified by visa - mastercard securecode about microsoft training company london ukadd this page to your favourites/bookmarksAdd to favourites
view a printable version of this pagePrintable version
email this page to somebodyEmail this page
Customer: Sign in
Delegate: Sign in
Trainer: Log in

Forum home » Delegate support and help forum » Dreamweaver Training and help » web design training - Layers

web design training - Layers

The UK's most regular instructor-led training courses.
Training information: web design training · Dreamweaver training · Adobe dreamweaver training

resolvedResolved · Low Priority · Version Standard

Layers

Gavin has attended:
Dreamweaver 8 Introduction course
Dreamweaver 8 Intermediate course

by - delegate Gavin [12 posts] (2007 Mar 16 Fri, 22:52) replyReply

How do i add named tabs to the layers?

Dreamweaver 8 Intermediate 1 day course
Version Date Location Places
available
Book Next place rate:
Card Invoice
8 2009 Jan 20 Tue Bloomsbury 8 book now £175 £225
8 2009 Apr 24 Fri Bloomsbury 8 book now £175 £225
8 2009 Jul 15 Wed Bloomsbury 8 book now £175 £225
8 2009 Aug 28 Fri Bloomsbury 8 book now £175 £225
8 2009 Oct 6 Tue Bloomsbury 8 book now £175 £225

RE: Layers

by - trainer Rich platinum contributer[744 posts] (2007 Mar 21 Wed, 09:18) replyReply

Hi Gavin,

Not quite sure what you mean by 'named tabs'. Could you show me an example URL of where one exists?

If you're talking about a layer with a tab-style heading, one way might be to have a DIV tag as the first thing inside your layer, but assign a CSS class to the DIV with the same background colour as your normal background colour (eg. layer is blue, background of whole page is white, so make the DIV white background too). Then have a SPAN tag around the text, with CSS background same as layer, in this case blue. This will appear as a tab. You may need to add graphics or clever CSS colours, like this person's example. Also see this example.

Please elaborate and I'll try to help further. Otherwise you're welcome to mark this question as resolved.

Good luck.

Regards, Rich

RE: Layers

by - delegate Gavin [12 posts] (2007 Mar 26 Mon, 16:02) replyReply

like yahoo has the sections where

In the News, World, Local and Video tabs are....how do they do this?

RE: Layers

by - trainer Rich platinum contributer[744 posts] (2007 Mar 27 Tue, 11:44) replyReply

Gavin,

I imagine this would be an advanced bit of CSS and JavaScript.

One way to achieve this is to have 3 layers on top of each other (with two of them initially invisible). Then when a visitor clicks on one of the tabs, javascript is called to turn all layers to invisible, then set the appropriate layer to visible. At the same time, the javascript code would change the CSS of each tab to an 'off' class, and then the appropriate tab (one just clicked) to an 'on' class.

Dreamweaver can do the behaviour of turning on/off layer visibility, but you may need to program in the changing of CSS classes. It's not too difficult though.

I'm sure Yahoo has a much more complicated bit of scripting.

I've sent you an example HTML file via e-mail to show you how it can be done.

Regards, Rich


Related articles

· Advantages Of Using Dream Weaver To Design Web Pages
· The Importance of a Professionally Designed Website
· Macromedia Dreamweaver: An Introduction
· Special Image Techniques with Dreamweaver CS3
· Dreamweaver: Business Benefits of Web Design Skills

Dreamweaver tip:

Toggle panels on and off

Press the F4 key to toggle all the panels in Dreamweaver on or off. This gives you more editing and programming screen space.

View all Dreamweaver hints and tips

Institute of IT Training - Accredited Training Provider Microsoft Certified Partner
microsoft office
Microsoft Office Specialist Authorised Testing Centre (MOS and MCAS)

Prodigy Platinum Learning Partner

Institute of IT Training - Accredited Training Provider Association of Computer Trainers Valid HTML 4.01 Transitional
Valid CSS Markup

secure online payments - visa - mastercard

Mini sitemap. These are the main areas of our web site. Full sitemap.

Training by application Main information pages See also

Access courses
DreamWeaver courses
Excel courses
MS Project courses
Outlook courses
PowerPoint courses
VBA courses
Word courses
(more...)

Public scheduled courses
On-site training
Closed company courses

Microsoft Office training
Pricing and availability
Training schedule
Training venues

Access training
Dreamweaver training
Excel training
MS Project training
PowerPoint training

London Computer Training
Computer Training London

Microsoft Access training
Microsoft Excel training
Microsoft Project training
Microsoft Outlook training
Microsoft Powerpoint training
Microsoft Word training

Time Management Course London

Interested in Access training? Please see the following pages:
microsoft access courses · microsoft training access course
microsoft+access+training · access courses in london

Training Information

Training Articles

AddThis Social Bookmark Button What's this?
Add to Del.icio.us Add to Facebook Add to Digg Add to Reddit Add to Google Add to Yahoo Add to Diigo Add to Mr. Wong Add to Linkarena Add to Power Oldie Add to Folkd Add to Jumptags Add to Upchuckr Add to Simpy Add to StumbleUpon Add to Slashdot Add to Netscape Add to Furl Add to Spurl Add to Blinklist Add to Blogmarks Add to Technorati Add to Newsvine Add to Blinkbits Add to Ma.Gnolia Add to Smarking Add to Netvouz