www.VFXskills.com                                                                                 www.MAXlife.TV

TechsChoice.com
Google Enter your search terms

Lesson 3 Adobe Dreamweaver
Creating a Web Page with CSS Layout


 
www.yourhtmlsource.com

CSS Layouts

Define Site - SITE - NEW SITE
In files panel - all webpage files will reside.

Create first HTML Webpage.

Go up to the top toolbar - FILE - NEW
BLANK HTML PAGE - See preconstructed CSS Layouts
Liquid Layouts  - Fill up entire Screen
Fixed Width Layouts
Hybrid
Elastic Layouts (less common) (em as unit of measurement so the page scales with font size)

TWO COLUMN FIXED WIDTH LAYOUT WITH A LEFT SIDE BAR AND HEADER AND FOOTER
The doc type XHTML 1.0 Transitional

Click CREATE
Here's where we save our stylesheet - by default give it a long name.... replace it with your special name.
Save in with site files.
SAVE

Style sheet appears down in the files panel
Here is our HTML document and we still have to save that.  FILE- SAVE - NAME

So now we have 1st web page and the attached stylesheet.
Scroll up to the head of the page.
Code View - you can now see the link to the styles page.

So now all the style rules here that are now
Expand CSS Stylesheet

All styles linked to our page define the layout.

Double click on stylesheet to open it up.

Created HTML page and Created a Stylesheet

Comments - explain things.

Clean up some of the code:  This ID selector header targets the DIV element named header which makes perfect sense.  So DIV element header has background, color, but by having this CLASS prefix makes this a descendent selector so this rule is only going to apply on a page that has that Class applied to the body element.  This gives you greater versatility and lets you define different styles for the same page element over different pages.

For our purposes, we're going to eliminate this class prefix and these styles that we have defined for container and header are just going to be the same for every page in our site.

FIND AND REPLACE function

Select the text in your source code that you want to remove.
Class Prefix
EDIT - FIND AND REPLACE
Replace it with nothing because we just want to remove it.
FIND NEXT
Replace All

Go to HTML Page now.
There are a few instances of that class prefix in the html too.  In the head of document.

Edit find replace - still has the code we want removed.  three instances found.  REPLACE - click refresh.

Now remove this class that has been applied to our body element.

Give page a title then preview the page in a web browser. 

Save Changes







 

 

 

 

 

dreamweaver cs3, dreamweaver tutorials, learning dreamweaver, adobe dreamweaver, learn dreamweaver, dreamweaver classes, dreamweaver lessons, how to define a site in dreamweaver, web design, web design tutorials, css, stylesheets in dreamweaver, support, free dreamweaver tutorials, templates, how to adobe
Site Map         

 

Please add us to your website or blog!

Privacy Policy - Disclaimer
free sound files, free media files, free tutorials, free web hosting, cheapest domain names, inexpensive domain names, screen capture software, Computer Software Tutorials, online training videos, computer basics tutorial, free windows tutorial, free computer tutorial for kids, computer programming tutorials, free computer courses, pc tutorial, beginner computer tutorials, free computer software tutorials, free internet tutorial, free typing tutorial programs, computing tutorials, computer science tutorials, graphic design tutorials, free visual basic tutorials, free Photoshop tutorials, newbie computer tutorials free flash tutorials, access tutorial online, computer course, pc maintenance online tutorials, absolute beginners computer tutorials, free online computer classes, frshirtsbestee online learning, free computer training download, free computer tutorial for seniors, computer parts tutorial, computer tutorials for children, computer hardware tutorials, free excel tutorials, computer fundamental introduction basics tutorial, Microsoft tutorial, free grocery coupons, Free computer software tutorials, tech support, technical support, the tech support forum, game development, 3d game development software tutorials, graphic design tutorials, graphic illustration tutorials, character animation and design tutorials, web development, Clipart and Banner Ads, adobe photoshop tutorials and downloads, software lessons, how to do it yourself, Fierce Layouts learn adobe Photoshop, learn silverlight, learn microsoft expressions, asp.net, video editing, youtube video, digital image editing software, national association of Photoshop professionals (naap) Flash Animation, graphics, computer software, computer books, manhattan flash animation presentations for advertising and banner ads, adobe, photoshop, macromedia, microsoft, software and application development, learn to, how to, tutorials, hardware, software Tech Support - Free Technical Support for Beginners and Advanced Users of Computers, Videographers, photographers, Programmers and Web Designers, Tutorials and How To Start, computer help, video, audio, nonlinear editing, cameras, microsoft excel free online video lessons, learn excel, learn microsoft word

Free software tutorials, downloads and technical support information for computer geeks, photographers and videographers.