CSS is the primary language for adding presentation elements to a webpage. These presentation elements include colors, fonts, backgrounds, and layout.
The following are my thoughts when I sum up the day after spending an hour or so trying to learn how to develop this web site using XHTML to control the structure and content, and CSS to control its presentation (style, fonts, images and layout).
Work has come to a halt on my website while I study how to create a new and revised website with new content and using CSS for the design in Dreamweaver. I don’t know how long it’s going to take to begin creating the new web site, as it’s going to depend on how long it takes me to learn how to do it.
As background, I’ve been intending to learn CSS for years, pretty much since I retired in late 2002 and I thought I would have lots of time to do things. But it hasn’t happened yet, despite some attempts over the years. Deep down, I suppose I’ve always thought it was too hard, and I’ve no talent for script languages, I’m too old for it, and bottom line – it didn’t excite me.
In January 1996 during my annual leave, I studied a book about Front Page (The Complete Idiot’s Guide to Front Page) and began work on my website at http://pyrus.customer.netspace.net.au/ (or use the link above to JT's Web Site).
Some may wonder why I chose that book as I’m not a complete idiot. But it worked for me. The entire website on Netspace was created with Front Page using two methods. 1. Using the most basic and elementary layout with all text and images centred. 2. Using tables to place text, images and blocks of space in table cells. In recent years I’ve made minor changes to some of the text, and added an image using Dreamweaver, but I’ve never touched the structure of the website at Netspace, until today.
I’ve been completely, totally and utterly lost when it comes to CSS and the various terms such as tag, div tag, div, class, id and span and so on in all the books I’ve studied so far. I just didn’t get it, and I began to despair that I ever would.
On Thursday I got the brainwave of downloading a trial version of Dreamweaver CS4 to find out first hand if it would make CSS easier to understand. So I downloaded it, installed it, and have been using it ever since for my studies. It’s a keeper, and I’ll see if I can buy it from Adobe in the US, as it will be $100 cheaper than locally. Knowing Adobe, they won’t let me. In the meantime I’ll continue with the 30 day trial.
I’m now just beginning to get the gist of what the above CSS terms mean, and how and when to use them, and on what. I’ve got a very long learning curve ahead of me, but I’ve not got the bit between my teeth as I can now see what CSS can do.
My old website at http://pyrus.customer.netspace.net.au/ is a good candidate to experiment with, to turn an old HTML site into a CSS site.
It struck me today that I’m trying to learn CSS from books about Dreamweaver - which is a huge subject in itself. CSS is far too big a subject to learn about it and how to use it from a book which is primarily about something else. So I’m now looking at books and courses that deal with nothing but CSS, and I have a particular book in mind – CSS: The Missing Manual.
Ever since I downloaded the 30 day trial of Dreamweaver CS4 on Thursday I’m gradually beginning to make some progress, but overall I’m still struggling with learning CSS. At least this weekend I’ve been confirming my thoughts that I’m going about trying to learn CSS the wrong way. I’m trying to learn it from a 500 page book about Dreamweaver CS3, and what I need is a 500 page book about CSS (and HTML). I’m settling more and more on CSS: The Missing Manual after checking it out many times using the Look Inside feature at Amazon. decided what book I want.
Today I made two changes to my Main Bookmarks page links. I’ve also started experimenting with my old website created using Front Page and am now slowly converting it to CSS as part of my studies. I’ve added some preliminary CSS to the home page, but the major change is to the scanning page at http://pyrus.customer.netspace.net.au/scanning.htm which is now all CSS.
You can see it best by resizing the width of your browser window, and watching the position and layout of the text at your full browser width, relative to the photo, then watching what happens as you gradually narrow the width of the browser more and more and more. This really impressed me, but it highlighted one of several problems of this type of liquid page width design, in that I have no idea how that page will look in anyone’s browser.
I tried doing a few things on my website in the trial Dreamweaver CS4, but it was one of those frustrating experiences where I realised how little I knew and understood (I’m drawing a distinction there between the concepts of know and understand. I’ve known how to create and edit web pages on this website for some 10 years or longer; but I’m now trying to learn how to create my new website using CSS with a level of understanding where it becomes second nature to me and I can implement all the design ideas that I might have.
So I spent most of my project time today further checking out Dreamweaver CS4: The Missing Manual and CSS: The Missing Manual and other books, with the Look Inside feature at Amazon to satisfy myself that these were the books I wanted. I like the books and their style of writing, and both are by the same author. Yes, the books passed all tests and my mind was made up.
I spent about an hour checking out the differences between the Dreamweaver CS3 and CS4 missing manual to see if an upgrade was justifiable. I have the CS3 book, and it’s a $75 book. The CS4 book has 1,087 pages compared with 995 pages for the CS3 book so there are 92 extra pages. Most of the Cs3 text is unchanged, but there are enough small changes to that text to justify the CS4. After all, if I’m going to get down to serious study of Dreamweaver and CSS, I don’t want to be doing it with a book that doesn’t cover the latest version of Dreamweaver and the author’s latest thoughts on it all.
When I got up this morning I had serious thoughts about whether it made any sense at all to upgrade to Dreamweaver CS4: The Missing Manual from my CS3 version of the book, as I’ve never read or studied the CS3 book. I’ve often used the book to look up and read about specific matters, but I’ve never had the heart to study it, despite it being written in a style that I like and really enjoy reading. I suppose the problem is not with the book but with me. These days, I find it very uncomfortable to hold and read big, thick heavy books. Anyway, this morning I checked my records to find the date I bought the CS3 book. It was in mid-January last year, over 15 months ago, and I still haven’t read or studied the book. But my mind said, of course, if I get the new book, I’ll read and study it. Even though it’s bigger and heavier? This outlook was a worry to me. I’ve been retired long enough to see enough of Dr Phil to know that one of his beliefs is that past behaviour is the best indicator of future behaviour.
With all that in mind, today I drove Chadstone shopping centre to check out Borders to get the two books I’d decided to buy (subject to checking them out and other books on the shelves). As it happened, Borders didn’t have either of the two books in stock.
I was very disappointed at first that I’d go away empty handed without the books to help me understand CSS and Dreamweaver CS4 any better. However, I then decided to check out what books they did have. This might sound silly, but it was almost as if the books my mind was set on were not in stock so that I’d have to take a good look at the other books Borders at Chadstone stock. And indeed, I found two that seemed to be far more suitable for me than the two books I had in mind. So I bought them, and I think I’ve fallen on my feet.
Both books are around 430-450 pages and are thus easy to handle and read, so they will get a lot of use. One is the Visual Quickstart Guide HTML, XHTML & CSS so this will cover a lot of ground beyond the CSS book I had in mind. The other is the easy to handle 432 page Dreamweaver CS4 for Dummies instead of the heavy 1,087 page Missing Manual.
This page was created after a quick read of part of the Dummies book, as was the link to this page on the home page. The home page is an image of a page developed in Xara Web Designer (great for prototyping quickly.
Today I practiced using CSS to develop the presentation of this page. The first task was to sort out the messy HTML presentation of the text which I wrote in Word and copied into the Dreamweaver main context box. It ended up double spaced. So I had a fun day as I gradually worked out a few things in amongst a huge amount of frustration. The biggest frustrations today were:
(a) Trying to place an image on this page and have the text wrap around it. No luck so far. In Xara Web Designer it’s so easy, as you might gather from the layout of the home page that I produced in that program.
(b) Trying to get the navigation bar on this page to be the same width as the header box above it.
The navigation bar at the top of this page was created by typing the following text items into the web page in Dreamweaver CS4 exactly as you see it below:
Home
Main Bookmarks
Big List Bookmarks
JT’s Web Site
I then followed all the steps in the Dummies book to turn that text into the navigation bar using CSS.
Today I had some degree of success and inserted 3 images on this page and have the text wrap around them, using techniques I learned from lessons I did today at www.lynda.com to which I subscribe on a monthly basis (and have for over two years). The first pic was done using CSS, and the nest two were done with HTML. My limited success (which took a couple of hours and much frustration) has made me realise how much I don’t know. I’m striving to get to the stage where I can do it in a few minutes.
It’s a long learning process, and I’ve come to realise that books and training videos about software are very dependent upon what the author knows and wants to include in his/her book, and upon who they see as their target reader/student.
I'm gradually getting the gist of using CSS and working in the Code view in the Dreamweaver CS4 trial program. In fact I'm now using the Code view as normal practice. Today I revised the home page with a colour effect in Photoshop, and added a new logo created in Photoshop. I also replaced the images on this page from images controlled by HTML <img> tags to images controlled by CSS classes (one class for images on the left, and one class for those on the right). I think I'm now able to say confidently that I'm slowly starting to get somewhere with CSS in Dreamweaver. I’ve still got lots to learn as I’m only a weeks old beginner, but at least I’m now on the way.
Today I had my weekend washing and other chores to do, which kept me at home, so I had a bit more time than usual to devote to my website. I didn’t do any CSS study and, instead, I did some HTML study about website colours, where black is #000000 and white is #FFFFFF representing values from 0 to 255 in HEX code for red, green and blue. This gives 16,581,375 colours in which Green is for unvisited, Red if you hover over a link with your cursor, Blue if you select the link, and Yellow/Orange if you’ve visited the link.
I’m slowly becoming more familiar with CSS concepts and working in code view in Dreamweaver, as this is how you have the greatest control. Today I created new pages for the two bookmarks pages using this page with its new heading and CSS rules as the basis for the new pages into which I copied the bookmarks, then I changed the background to a dark grey to make the links stand out.
It took a great deal of time and patience to get it all to work properly, but it was good practice and experience and confirmed that I'm still a beginner with a lot to learn.
I've now begun work on the iPhone Apps page, and I've established a link on my home page to enable the new page to be tested. For some reason the AFL app image on the page worked in the tests (using Firefox and IE8) but not when I went to the page in the normal course of my web browsing. It took about two hours to work out was causing that problem. I only found the cause after I quickly added a second and image, and this worked. So I then carefully studied the code to see what the difference was. It surely had to be something very silly, as I had been so careful to check and double check that the Aussie Rules app image was properly there and working. The only thing I could find in carefully beaming the code was that perhaps the name I'd given to the image was causing a problem in the HTML code. The name was Aussie Rules 50% which showed me that the image had been resized in Photoshop to 50% of the size of the original. It seems that the % sign had some meaning in the HTML code. The % sign doesn't cause a problem in this page as it's only being used in paragraph text. At least I learnt something new from my hassles today.
Apart from that issue, I haven't yet worked out the best way to set up the page in CSS for ease of use for me when working on the iPhone Apps page.
STOP PRESS: I've since noticed that page 71 of my Dreamweaver book makes it very clear not to use %, # or & in file names. I'd read that page weeks ago. Oh well, I think I'll remember that advice better after today.
Today I also began work on the Photo Gallery page, and this also has a link from the home page.
Today I added "open in new window" instruction to the image links in my iPhones page at viewer request (young Ralph at work there). Remember Ralph? His picture is floated (that's CSS talk) on the right.
I also amused myself by changing the font and colours of the h3 heading in the CCS rules panel. Amazing. All I had to do was the make the simple changes and it affects the appearance of all the h3 headings on all pages which have it, even though the pages are not open. I don't even have to publish the pages again to the web server, just the CSS styles rule file (a tiny 3Kb file). This is one of the benefits to the designer when the content and presentation of the web pages are separate.
Legal Disclaimer: The author of this web site warns visitors to this web page that they do so at their own risk. The author can accept no responsibility if this page bores them out of their mind; or on the other hand, if they suffer palpitations from the sheer excitement of reading it.