Dreamweaver CS5 #3: Making some sense of it all

Ok well if you have seen the latest homepage of www.TheTaleofMatt.com you can see that things are starting to look like an actual site with real images and stuff not just some crud slapped on a page. Even though I still have a lot of work to go before anything is complete i thought I’d share with you some of the challenges I’ve met with DW and how I managed to curtail them.

The toughest part of DW for me thus far actually hasnt been DW at all its been the code. In particular the CSS code. What I have noticed is that if you have a good understanding of how websites work and can write your own code the DW CS5 is a snap. The interface is intuitive and for the most part things just seem to fall into place, thanks in large part to the auto insert feature that guesses at the tag you want to write and then drops it into place for you before you have time to “fat finger” the spelling. If you know anything about programming or if you’re a lousy typist like me then you fully understand that one missing character can ruin your whole day. Using DW auto insert help with this a lot.

However, as we discussed earlier in this blog I’m not a person who has a good handle on HTML or CSS so this has been a challenging process for me. But thanks to DW’s help I have been able to stumble my way through the CSS. Now thats not to say that I’m not making a total mess of the code I am producing and I am sure that a good coder would be irate at my lack of attention to details. But the point is I’ve been able to make it work mostly by trial and error here’s a good example of how DW has come in handy.

First off if you’re not familiar with coding, the idea of CSS is to keep the content and the design separate. You are supposed to use HTML to insert content into the page and then use CSS to tell the browser how you want that content to look. For example you use HTML to place an images into a website then you use CSS to tell the browser where to place it/how big/what border etc. that you want that image to have. Take a look at the www.w3cschools.com website to acclimate yourself to these two languages and the elaborate dance they do together.

DW 1 screen shot

Here is my home page as show in the DW window

 You see the picture of the camera? It took me awhile to figure out how to get it into the right spot. But I know that HTML controls the data and CSS controls the look right! So in order to get it where I wanted it I just had to toy with the CSS.

To place the image on the page was easy I just clicked where I wanted it and then in the menu bar selected Insert>Image and filled in the blanks.
Then I did some digging on the net and learned that to make an image stay to the left while the text sits to the right as you see next to the camera, you use the CSS “float” attribute.

I took a look at my CSS panel on the right and DW had already created a “fltlft” and a “fltrt” style for me on the style sheet. WOW how convenient how did DW know I was going to use that. So the theory is that I can place this image on the page and then tell DW I want it to apply the “fltlft” style to the image.

Sorry for the poor scribbles

 As I said I clicked on the image of the camera and in the properties panel at the bottom DW showed me all the properties of this image. By changing those fields i can control what DW does with the image. I chose to apply the “fltlft” style class from the drop down menu shown and presto image now floating left of text!

However there was one more thing that I wasnt quite pleased with the “fltlft” style. The text I had was right up against the image, there was no spacing there. So all I did was to double-click the style “fltlft” on the right hand side of the window in the CSS panel and tweak the style itself. I selected box and gave it 15 px of right padding then clicked apply. Done the fltlft style now comes complete with right padding to push the text away jsut a bit. You can see this also in the picture above as I highlighted on the right hand side.

The cool thing is that now if I want to do the same to another image all i have to do is drop it in and apply the preformatted style. Nothing to it thanks DW!

Ok hope this makes some sense of how DW CS5 can help you figure out and learn CSS by trial and error.

Later Gater!
Matt

Advertisements

Leave a comment

Filed under Dreamweaver

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s