Dreamweaver CSS Website Layouts
In this video I'm gonna show you how to use the Dreamweaver CSS website layouts, and how to easily edit layouts and web pages...
Download everything we made in this video (ZIP)
Hey everybody, Greg Davis here. In this video I'm gonna show you how to use the Dreamweaver css website layouts, and how to easily edit layouts and web pages.
Let's GO under File and New.
We get THIS screen up.
SELECT blank page, html, and there are many different kinds of css layouts HERE.
Like THIS one is a 2 column, fixed, left sidebar, header and footer layout.
You can see it right HERE.
It has a HEADER, a LEFT SIDEBAR, and a FOOTER.
And the fixed basically means that all widths are in pixels.
DocType will BE XHTML 1.0 transitional.
And I'm just gonna ADD the css style sheet to the head tags.
I CLICK Create.
And HERE is the layout.
It's pretty much ready for your content, if you choose to use it. But even if you build your own layout, you should study these layouts, because they are really good, and you can learn a lot from them.
Let's TURN Live View ON.
And you can see that THIS navigation bar uses some kind of rollover effect.
Let's figure out how it works.
I TURN Live View OFF.
I PUT my cursor inside of the navigation bar.
And if I let GO the mouse for a few seconds, THIS little indicator will show up right HERE.
I CLICK it to bring up the Code Navigator.
Now, if you don't wanna wait for the indicator to show up, just alt,click on the element (or cmd,opt,click on the mac) and you can bring up the Code Navigator right away.
And what this Code Navigator does is it allows you to easily see the css rules that are affecting your current selection, or insertion point.
Right now, my cursor is SITTING inside of LINK tags, inside of a LIST ITEM, inside of an UNORDERED LIST, inside of DIV tags, inside of DIV tags, inside of the BODY tags.
And in the Code Navigator you can see that THERE is a compound hover rule applied to the link. That's what generates the rollover effect. The BACKGROUND is some kind of dark green, and the FONT is white.
Now, if you CLICK the rule, Dreamweaver will jump right to the rule in the css style sheet, and you can make changes.
It's a comma separated compound selector, so these PROPERTIES apply to all of these RULES: HOVER is when somebody hovers over the link, ACTIVE is a hover link for visited links, and FOCUS is when somebody navigates by keyboard.
And you can see THESE grey comments HERE explaining the code. Comments are ignored by browsers, and they allow you to write notes about your code.
You can just CLICK the Apply Comment button HERE, select the first one if you are in html, or the second one if you are in css, and then you can type in your comments in the comment tags.
Now, let's GO back to Design View.
And when you are editing your website, and some elements are just not where you want them to be, there is an other cool feature in Dreamweaver to help you figure out what's going on.
Let's TURN ON Inspect Mode and Live View.
And now you can look at the different elements, and the padding and the margin on those elements.
When you HOVER OVER an element, the kind of BLUE view that you're seeing is the actual width and height of the element itself. The PURPLE are the padding, and the YELLOW are the margins for that particular element.
Now, as you mouse around you will notice that not every single element has padding and margins. But it's gonna be very easy for you to see what's going on.
Down HERE the tag selector gives you the tag, and the class style or id of the element that you're mousing over.
Now, if I MOUSE OVER this H1 tag, and HIT my left arrow, notice that the tag selector just walks right back up to the div tag with the class style of content. And now you can clearly see that that is the element whose padding is controlling that spacing above the H1 tag.
And not having to search through all of your code for this information can save you a lot of time. You will be able to quickly and easily get up the speed with the structure of the page, and you can spend more time working on the design, and less time navigating through the code to find a specific property.
Now, Dreamweaver also has a Live Code feature HERE.
And it's very useful if you are using any dynamic pages, because that way you can see the actual html code that is being generated, rather than the placeholder php code.
So this is how you can use the Dreamweaver css layouts. And this is how you can quickly edit your layouts, themes, and web pages.
I hope you learned something. I hope you enjoyed it. If you wanna get more videos from me go to my website EasyWebDesignSystem.com, and join my list. Thanks a lot for watching, and see you in the next video. Bye!
Next video:
Creating a CSS Drop Down Menu in Dreamweaver>>>All videos in recommended learning order:
How to design a website using Adobe Fireworks>>>
Building a Website Start To Finish With Dreamweaver>>>
How To Embed a YouTube Video On Your Website>>>
Floating Div Tags in Dreamweaver>>>
How To Create a Table in Dreamweaver>>>
Building a Web From in Dreamweaver>>>
Dreamweaver CSS Website Layouts>>>
Creating a CSS Drop Down Menu in Dreamweaver>>>
Creating a Spry Menu Bar in Dreamweaver>>>
Creating Spry Tabbed Panels in Dreamweaver>>>
Creating a Spry Collapsible Panel in Dreamweaver>>>
Working with the Spry Tooltip Widget in Dreamweaver>>>
Creating a Web Photo Gallery/Album in Dreamweaver>>>