|
View previous topic
::
View next topic
|
| Author |
Message |
trigatch4
Joined:
30 Jan 2006
Posts:
29
|
Posted: Thu Feb 16, 2006 2:35 am
Post subject: Dreamweaver Layers
|
 |
|
I found the easiest way to create my site was to use a Layer for the banner, a layer for links on the left, and to make this a template. I would then use the middle as an editable region.
Then, I heard grumblings about layers being not so good and then read the following on the Macromedia's webpage:
you may be left with the idea that using layers offers both a convenient and effective method of building a website, but unfortunately you would be wrong. The main reason why using layers isn't the best approach to structure your web pages is because Dreamweaver includes the CSS styles within the DIV element (inline CSS).
When Should You Use Layers?
Because Dreamweaver layers consist of absolutely positioned elements and their CSS styles are written inline, they are not considered the best way of designing pages using CSS. Here are a couple of reasons why you may still want to use the Layers tool:
You need to create basic animation.
You need to create rapid page mock ups.
Wow - well that screws my entire method of making webpages. Since I have absolutely no clue how to approach this in any other manner, I could use a poop load of help. What is my alternate approach.
As an example, one of the sites I created using layers template is www.shoresensation.com .... Should I start from scratch? What do I need to learn? Someone please help me as I have about 4 projects I'm ready to start and don't want to continue until I'm doing it right!
Or, perhaps the layers aren't as big of a problem as I am making them?
Thank you in advance! |
|
| Back to top |
  |
 |
Debs
Joined:
16 Aug 2003
Posts:
4296
Location:
NY
|
Posted: Thu Feb 16, 2006 1:22 pm
Post subject:
|
|
|
You can use layers fine; CSS is rendered well in current browsers so you shouldn't have problems; it provides cleaner code than tables do; loads faster in most cases; and the spiders love them.
Macromedia knows nada about building sites for spiders; just keep the css in an external css style sheet so you can change it sitewide if needed and enjoy.
Debs
_________________
Learn how to turn keyphrases into quality, well-targeted articles your visitors and SE's will love with Gary Antosh's new ebook "Web Content Made Easy!" |
|
| Back to top |
|
|
income
Joined:
02 Feb 2006
Posts:
23
|
Posted: Thu Feb 16, 2006 3:37 pm
Post subject:
|
|
|
trigatch4,
Your page looks good and your code is pretty good. You might want to visit these two site and validate your code.
HTML Validater
http://validator.w3.org/
CSS Validater
http://jigsaw.w3.org/css-validator/
The validators will help you clean up your HTML and CSS.
If I can give you some advice, I would recommend that you take your CSS code in the head section and place it in a separate file. Take this code:
| Code: | <style type="text/css">
<!--
.style1 {
color: #FF0000;
font-weight: bold;
}
.style2 {color: #000000}
.style3 {color: #0000FF}
-->
</style> |
Put it in a new file with only this code:
| Code: | .style1 {
color: #FF0000;
font-weight: bold;
}
.style2 {color: #000000}
.style3 {color: #0000FF} |
Save the file with any name with the .css extension, i.e. style.css.
Put this code in the head of your page:
| Code: | | <link rel="stylesheet" href="style.css" type="text/css" /> |
This method allows you to use the CSS style on any page on your site.
You also have alot of inline CSS code, for example:
| Code: | | <div id="Banner" style="position: absolute; left: 35px; top: -5px; width: 792px; height: 158px; z-index: 1; font-weight: bold"><img src="/SSBanner.gif" width="792" height="162"></div> |
What you have done here is okay, especially if this is the only location where this style applies. However, to use CSS to its full potential, you can put the style in your CSS file and use the style on any page without having to rewrite the code. Even thought you are using the page as a template, and you can change the template and subsequently every page that uses the template, it is easier and more logical to use an external CSS file.
You can also streamline your code by a putting your JavaScript in a separate folder the same as your css file. The process is the same as the css file. Copy all the js code minus the script tags and save the file with a .js extension.
Hope this helps,
Jim
_________________
Simple PC Talk |
|
| Back to top |
  |
|
sophist
Joined:
21 Nov 2003
Posts:
595
Location:
Kamloops, Canada
|
Posted: Thu Feb 16, 2006 4:31 pm
Post subject:
|
|
|
| income wrote: | trigatch4,
You might want to visit these two site and validate your code.
HTML Validater
http://validator.w3.org/
Jim |
When I validate my code it shows errors that really make no sense. stuff like
<body>
and
<img src="image-files/image1.jpg">
How do I correct this without messing up my code?
_________________
Business Owners Guide to Going Online What every business owner needs to know about going online |
|
| Back to top |
|
|
income
Joined:
02 Feb 2006
Posts:
23
|
Posted: Thu Feb 16, 2006 5:15 pm
Post subject:
|
|
|
Here is the updae to the first error.
| Code: | | <script type="text/javascript" language="JavaScript"> |
Here is the updated img errors:
| Code: | <div id="Banner" style="position: absolute; left: 35px; top: -5px; width: 792px; height: 158px; z-index: 1; font-weight: bold"><img src="SSBanner.gif" alt="ssbanner" width="792" height="162"></div>
<div id="Guide" style="position:absolute; width:210px; height:32px; z-index:2; top: 123px; left: 501px"><a href="/GuideToTopsail/guidehome.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Guide','','GuideButtonOver.gif',1)"><img name="Guide" border="0" src="GuideButton.gif" width="192" height="29"></a></div> |
This is the addition to your img tags. I only showed one here but all img tags need updated.
_________________
Simple PC Talk |
|
| Back to top |
|
|
| View previous topic :: View next topic |
|
FAQ
Search
Memberlist
Usergroups
Register
Profile
Private Messages
Log in
