Free Dreamweaver Tutorials from Vecpix

Description

Creating Web Pages/Sites using CSS (Part 1)

If you're new to web design or an old veteran you can't have failed to have heard about CSS (Cascading Style Sheets). These files that you can attach (or tags you can embed in a particular page) allow for intricate page layout, text control, etc. In this tutorial I'll be taking you through creating a simple page layout using only two CSS Styles.

I know that sounds a bit simplistic, but once you see how easy some of the techniques are you'll wonder why you ever bothered creating pages the old fashioned way.

Our page is going to consist of two tables and one style sheet (comprising of 2 styles). We are going to outline the tables, have different shades within the table and use a repeating graphic for the table heading.

Take a quick look at the HTML code for the page and you'll be able to see that a lot of the information on the page isn't there. However, at the top of the source code you should see (). This tells the browser to use the file default.css to control the way certain elements on the page are displayed. In the first part of this tutorial we are going to create that style sheet and define our two style tags. We'll also take a look at how altering the style sheet will update all the pages that are linked to it without our intervention. So, as you can see, style sheets make altering aspects of your entire website as easy as changing a single parameter. Cool huh?

We'll be using DreamweaverMX for this tutorial, but the differences with earlier versions of Dreamweaver may vary, but only slightly.

Step 1 - Creating the Style Sheet

Open Dreamweaver and have a new page open.

You'll need to have a site defined (ideally) for this tutorial as we are going to be using images, etc.

If you haven't already, save the file and name it css_1.htm. This is going to be our sample page so we can see the changes as they take effect while altering our CSS later. Open the CSS window/tab (Shift F11) - see figure 1.

Figure 1 (right) shows the CSS Styles selector palette. As you can see, there are already some styles created - your palette will be empty.

Get All Tutorial

$$ Buy "Free Dreamweaver Tutorials from Vecpix" on Amazon $$

Please check the description for download links if any or do a search to find alternative books.

Can't Download?
Please search mirrors if you can't find download links for "Free Dreamweaver Tutorials from Vecpix" in "Description" and someone else may update the links. Check the comments when back to find any updates.

Search Mirrors
Maybe some mirror pages will be helpful, search this book at top of this page or click here to find more info.

1. Ebooks list page : 87
2. Free Dreamweaver video tutorials
3. DreamweaverMX Tutorials free Dreamweaver ebooks
4. Dreamweaver tutorials for beginers
5. [share_ebook] Some great tutorials for free stuff
6. Free for All: How LINUX and the Free Software Movement Undercut the High-Tech Titans
7. [FREE EBOOK] Free IPHONE, MOBILE PHONES, MP3 PLAYERS, IPOD, GAME
8. Free for All: How LINUX and the Free Software Movement Undercut the High-Tech Titans
9. The Eat Well Cookbook: Gluten-Free and Dairy-Free Recipes for Food Lovers
10. Free as in Freedom: Richard Stallman%27s Crusade for Free Software
11. Free For All How Linux And The Free Software Movement Undercut The High-tech Titans by Peter Wayner
12. [share_ebook] Make free CALLS from computer on Tellephone (100 % free)
13. Free Voucher from Microsoft after you take the BETA exam for FREE, be
14. free web hosting and free e-book
15. free mathematics free ebooks
16. .Net tutorials