www.VFXskills.com                                                                                 www.MAXlife.TV

TechsChoice.com
Google Enter your search terms

Lesson 4 Adobe Dreamweaver
Styling with CSS


Four Developments:
1.  Container - Parent Development (Content Wrapper)
2:  header development  (child development)
3.  Main content (child development)
4.  Footer. (child development)

apply Color - put image in header development and draw colors from that image.

Open it up in Image Preview 2 (Dreamweaver extension that talked about in lesson 1)
Open in graphic editor Fireworks 780 pixels (width of container)

Double click on header CSS style rule - go to background property - browse for header image.

Select header image.  In properties dialog:  drop down NO REPEAT - Apply
Apply BACKGROUND color - pale gray

Can't see much of image because there is no VALUE set for the HEIGHT PROPERTY in the header development.

Open the BOX category in the dialog box.  Height = 180 pixels click OK

Changed header text to Web Learning Series

Click on the BODY style rule and change background color.  Select from the image.  Apply - ok

LEFT SIDEBAR 1 TEXT
Body Rule = 100% for font

Open up sidebar1 - Change font size to 85% - this will apply to the entire sidebar.

Click on <p> for paragraph and apply the text size to ONLY the paragraph - which keeps the heading the same size.  Select 90% for main content text. Click OK.

Insert an image.

228 X 271 pixels

Apply another stylerule to let the text wrap around the new image.  FLOAT LEFT or FLOAT RIGHT.

Select the image - go to properties panel below - drop down and select FLOAT LEFT.

Apply style to footer:

Tile a background in the footer.  Gradient affect.
Open fireworks:  image is 10 pixels wide and 100 pixels high.  Took the gradient out of the blue in the image.  Export image from fireworks - image named FOOTER.

Footer - double click - go to background properly.  Select image - and REPEAT across the X Axis.  Apply background image.  Go to box category and pick a height.

Go on to the next tutorial.







 

 

 

 

 

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, cs4,  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.