CSS is the primary language for adding presentation elements to a web page. These presentation elements include colors, fonts, backgrounds, and layout.HERE to see the report.
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.
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/.
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 centered. 2. Using tables to place text, images and blocks of space in table cells.
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 a 30 day trial, installed it, and have been using it ever since for my studies. It’s a keeper. The beauty of the CS$ is that I can click on any element in the page while holding the ALT key and it brings up a list of all the CSS styles controlling the appearance of that element.
So 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 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.
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 trial of Dreamweaver CS4 on Thursday I’m 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.
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 fine distinction there between the concepts of know and understand. I’ve known how to create and edit web pages on this website for over 10 years, but I’m now trying to learn how to create a new website using CSS.
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 over 15 months ago, and I still haven’t read or studied the book.
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). Borders didn’t have either of the two books in stock. However, I checked out what books they did have in stock and I found two I liked.
Both books are around 430-450 pages and are thus easy to handle and read, so they'll 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 a web page quickly with a more interesting design than I'd come up with using slow methods).
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 simply by typing the into the web page and then applying a CSS style to it.
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.
Since I last reported, a lot has happened in my life, not the least of which was an unexpected and bad reaction to my annual flu injection that laid me low for days. The flu bout itself lasted less than a day, but it's impact lasted for almost a week before I was fully over it. During this time I not only lost interest in food and didn't like what I cooked, but unbelievably, I couldn't stand red wine.
Life is starting to look better now. Except for a blocked kitchen sink. And medical tests this week.
My CSS studies continue, but very slowly, as I've entered the dark side. I've become involved in code - both XHTML and CSS. In fact, the colour of the horizontal bar in the date heading was set in my CSS style sheet from a colour in the HTML Cheat Sheet iPhone App. I'm also now into coding with ems, pixels and percentages as a way of describing measurements to determine the width of web pages.
It's been an interesting week for me. The medical tests went very well, and this was a huge relief after two weeks of concern. My interest in food and red wine has now been restored after the flu bout aftermath, but my cooking is currently a bit limited by what utensils I can wash easily with the kitchen sink still blocked. At least I now have a practical reason to keep the washing up simple and not sheer laziness.
Today is the last day of my 30 day trial of Dreamweaver CS4. It's almost 3 weeks since I ordered the upgrade but no sign of it yet. Could be a few weeks. But no matter, because I've now decided to shift my attention to something I never thought I'd ever try to do again. Try to learn a computer language.
During my 28 years with computers I've tried learning Cobol (for use on the Wang), Pascal, C++, Basic, Rexx and Amos (on the Amiga), Fortran and Modula-2, but never got past the first chapter in any of the books about these computer languages. After so many failed attempts, I'd long ago given up the idea of ever trying to learn a computer language again. But this week I dismissed all that and decided to learn HTML (plus XHTML and CSS). I'm going to do a study course in a book that I bought at Borders yesterday.
I haven't started my HTML course yet, but I've looked a bit ahead, and I see that I won't be using Dreamweaver, Front Page or any other web page and design software to create my web pages. I'll be using Notepad - the little text editor in Windows. Perhaps this is my first lesson. You don't need a special program to create web sites. All you need is a text editor.
The book I bought yesterday is quite bizarre looking. It looks like a book intended for 3rd grade primary school children. And its whole approach is odd. For example, it explains that the reason I've had a problem learning computer languages in the past is that half my brain wants to learn the language, but the other half of my brain wants me to forget what I'm reading because it wants to save my valuable brain resources for more important stuff, such as what wild animals to avoid, or whether it's a good idea at my age to skateboard in heavy traffic without any protective clothing.
On the left is a montage of extracts from some pages in the book. The whole book is like that, and has little tests and crossword puzzles and interviews with HTML tags, and discussions between HTML and CSS and other concepts as if they were people.
The book doesn't look like a serious training book, so I dismissed it instantly.
Then fate took a hand. To cut the story short, I had occasion to review the book again a few weeks later and became aware that even with a casual browse I was picking up information I'd never read anywhere else. And it was sticking in my mind because of the way the information was presented.
And so I bought the book.
During the week I also bought two reference books. One for HTML and the other for CSS. Yes, it's costing a bit of money when I can least afford it, but I'm taking my HTML/CSS studies seriously; and most of all, I'm thoroughly enjoying the experience. It's fun!
This morning my Dreamweaver CS4 30 day trial finally ran out.
I still haven't begun my HTML studies, but I've been pushing ahead with HTML and CSS, and I've now created a new CSS style sheet for all my one column pages. This means that I can now change the presentation of all the pages on my web site, except the home page (which is three column), by changing the attributes in the CSS style sheets. I no longer have to make changes to each page and publish each page again to my hosting server. I can now make any CSS presentation changes I like and all I have to do is publish the changed CSS file to my server. This will then change the look of all my web pages that use the CSS file. I don't have to re-publish the web pages again.
That of course is the purpose of CSS. I could have 10,000 pages and to change their layout all I'd have to do is change one CSS file. It's also better for you. Your browser only has to download the CSS file once, which it caches, and then uses it for any pages you look at on my website.
Today I renewed jthonline.com domain name for another year and my hosting at Aussie HQ which has taken over the hosting firm whose server this web site has been on since it started.
Dreamweaver CS4 arrived today at City Software, right on the estimated date. I drove to the City Software warehouse at Axxess Corporate Park in Mt Waverley, and found the allocated car park spaces for their customers in front of their premises were all occupied. What to do? Normally, I'd be very nervous about parking in front of other premises what with all the signs warning that the parking is for their customers only. But this afternoon, when I looked at the cars parked outside the premises opposite City Software, I decided that my car looks like it should be there.
My car is on the left.
(It's an iPhone photo, and the iPhone focused on the wall, instead of on the cars.)
Oops. I've just read that the iPhone has a fixed focus lens. Perhaps my lens had a bit of a smear on it to make the above photo less sharp than the normal iPhone photo.
Today I completely revised the HTML code for my Bookmarks Big List page. The links are now all HTML lists and nested lists. I've also added some new Special Search Engine links.
I've also changed the Opinion bar on the home page navigation bars to Rambles - but it still shows Opinion when the mouse hovers over it. Clever? The navigation bar now leads to a ramble page.
I did some work on my website today and added a first attempt at a Photo Gallery. So now all the navigation bars work except Music and Gadgets. The Photo Gallery looks great when I press F11 in my browser to see it at full screen size. It allows you to select individual slides from thumbnails on the left, or see a slide show either from the View menu (above the thumbnails) or by clicking on the Play button below the large photo.
I was asked today as regards the above photo what the name is for a collection of Lexuses, and my favourite suggestion is a levee of Lexi. Of course no-one would understand it, and that's where the fun comes in, to explain it. Oh well, it's now winter in Melbourne. I've made up my mind that this year I'm not going to let the miserable weather depress my spirits, as it can in retirement.
In the past week I've begun to get a better understanding of CSS, and HTML. I still have heaps to learn, but I'm now enjoying my slow but gradual progress in learning it.
Today I began serious work on creating a new home page for JT's Web Site on my Netspace server which has been around since I created the site in January 1996. I'm quite thrilled with it, and hope to complete and publish it later this week.
As I write this I'm listening to, and sometimes watching a thriller movie starring Kirk Douglas. Not on TV, but in my Firefox browser, which now has about 3,000 TV stations worldwide.
Tonight I'm tuned into Thriller Classics USA.
The new home page for JT's Web Site has now been finished and published.
The page was created entirely in Xara Web Designer, and then exported to Dreamweaver CS4 where I added the links to the other pages on that web site and then published it all to the Netspace server.
The background of all pages (except the home page) are now off white with a very gentle gradient to a light grey on the right hand side.
This Queen's Birthday holiday weekend in Victoria I made quite a few changes to the web site. It now has a revised home page with new colours and with all links now going to a page (the Gadgets page is only a placeholder - but fully ready to go). The Music page is already under way with some content - me playing some music I improvised for the page, and a picture of the keyboard I played it on. I've added a new background for all pages, and added a new review and other revisions to the iPhone Apps page. I've also made changes to the HTML code so that all pages now have the favicon in the web browser (the little red J next to the URL at the top, and in the history of pages visited). I've also learned more about CSS and (X)HTML.
I'm thrilled with the changes made this weekend, and especially with the new Music page. But I'm not sure how my music will go over with those who visit the page.
Today I began struggling with the HTML code and CSS for the list of 160 books referred to above.
I've managed to get the list of authors and their books look pretty much the way I'd like, so maybe the smart thing is to leave it at that and move on. But it niggles at me that I have a page with a list of authors and a list of their books, but I'm not using HTML list tags as I should. The advantage of using the correct tags is that it gives web browsers clearer instructions on how to show web pages as intended, but it also helps search engines to identify what's on your web page. The problem is that when I tried to convert the names of the books into list items by adding HTML list tags to the names of the books, the page fell completely apart. At this stage I've got no idea why this is happening.
Today I also discovered that I can download Project Gutenberg and other free books direct to my Stanza app on the iPhone. And the result is much better. So I downloaded my next Tarzan book to read - The Beasts of Tarzan. I'm reading the books in the chronological order in which they were written, as listed in the Wikipedia article about Edgar Rice Burroughs.
Today I fixed the problem with the 160 books list. To see the finished page without going to the iPhone Apps page and the review of 150 Great Books for Ten Bucks, click HERE.
What caused the problem? Ahhhh... the perils of find and replace all, if what you are replacing in the HTML code is not set out in an entirely consistent way. It can end up a jumble that I suppose in this case caused the browser to incorrectly display the page.
Late tonight I published a revised Gadgets page. It's now worth a visit.
During the past week I revised the colour scheme and some of the text on the home page as seen below.
However, the home page was created in Xara Web Designer. So I have to make the changes in that program then export the revised web page to Dreamweaver and re-establish all the links to my other pages and to larger images. It takes time to re-establish the links, and check that they work. It's always been tiresome to have to start from scratch again every time that I make changes to the home page.
Today I decided that it was time that I tried to create the home page design in Dreamweaver CS4 based on the design created in Xara Web Designer. This is going to be a challenge as my other web pages created in Dreamweaver have a fairly simple one design - header, main content, footer.
My efforts to create a new home page are showing up how little I know about CSS. This is the basic layout of my new home page - click HERE. My efforts to turn that basic layout into what I've got in mind are progressing rather slowly at present, as I have a great deal to learn, and I'm finding that there's no single source of information that covers everything. Not even the Dreamweaver manual PDF file, which makes no mention of descendent selectors, which is what I need to create so that I can turn the list of web pages into a nice looking navigation bar.
Today I published a new Home Page. This is such a quantum jump from yesterday that I've even surprised myself by managing to do it so quickly.
It's a great relief that the home page has now been created in Dreamweaver, as I can now make changes, save them and publish them immediately. I've never timed the save and publish process in Dreamweaver, but a ballpark guess is about 10 seconds maximum for text and CSS changes, and longer if the changes require uploading new images.
In yesterday's comments I wrote that what I need to create CSS code so that I can turn the list of web pages into a nice looking navigation bar. If you're wondering what I meant when I mentioned "the list of web pages" then click HERE to see the list as it would appear in your browser without the CSS code. Amazingly, the only difference between the new home page and the page linked to a few lines above, is that I deleted <style type="text/css"> from the HTML code in that page.
Now that I've succeeded in creating my new web site by using CSS and writing a lot of the HTML code myself, I have wondered in the past week whether there would be any need to further update this web page and the reports on my CSS learning progress.
It's not that I thought I now know everything I need to learn. Far from it. It's that I've now achieved my immediate goal of creating an entirely new web site with web standards and CSS. As a result I've been unsure how much further I want to go with my HTML and CSS studies, and whether I'd have anything new to report on this page to make it worthwhile for visitors to check it out.
I think I've now solved the problem. My home page now has a What's New section where I can advise recent changes, and changes made that day.
Today I drove to Chadstone shopping centre with three $10 discount vouchers in my pocket that had to be used in June. I never expected to buy a CSS book again as I already have several really good books: but today I browsed a CSS book that I couldn't resist, so I bought it. Unlike all other CSS books I've seen, which are dull and grey with B&W illustrations to support the content of the text., this is book is a design piece full of beautiful colour photos and colour web site layouts.
Today I started reading the Transcending CSS book and it's an interesting read; but I'm not sure that it's ever going to be very useful, other than to strongly encourage me to learn more and more about creating web sites.
I've never been happy with the photo slideshows produced in Photoshop or Adobe Lightroom - as they give very little control over how the slideshow will look and work on a web page, and I can't edit the slide show after it's been created. The current Photo Gallery slide show was created in Adobe Lightroom. It annoys me that each photo is created in 4 sizes - thumbnail, small, medium and large. It bloats the Gallery file size and makes it impractical to edit a photo (to improve the way it looks), as every image is there 4 times.
I want far more control over the Photo Gallery slideshow. So tonight, I've bought a Dreamweaver extension for the first time. I hope it will help create better slide shows on my web site.
You can see a very interesting slideshow created in the extension if you click HERE. It's about the building industry in Dubai. Don't forget F11 to go full screen. If that fails, go to the menu - View > Full Screen and click on it. The originating web site (ENR.com) is HERE - it's quite interesting.
Today, apart from editing yesterday's entry on this page, I've created my first slideshow with the Dreamweaver extension that I bought yesterday. The extension is far deeper than I've had time to go into on my first day with it, but I have been able to set the size of the slideshow screen and add a soundtrack which I created in Sound Forge. The first part of the soundtrack is the music on the home page, followed then by another piece. It's all been a lot of trial and error, and I'm not sure how it will all work out for individual visitors to the new page with the slideshow.
Today, I also completed reading the first of the 4 sections in the Transcending CSS book I bought on Monday. Much like I suspected yesterday, the first section is really a rant by the author about the current acceptance that web pages should be designed for the lowest common denominator to give the widest range of accessibility to web page visitors. The author makes the point that in no other technology is progress held back because of users that don't want to update. Widescreen HD TV isn't being held back because most people in Australia don't have the equipment. It's all going ahead, on the basis that viewers will eventually realise they're missing out on an experience far more exciting than they have now.
The author relates this to web design where the design caters to people who still use early versions of Internet Explorer and an 800 x 600 monitor. The author asks why cater to them? It's holding back progress, which everyone expects in all other fields. Cater to people with the latest browsers, to keep progressing forward. People with old browsers can still see the content of the page, but in some cases won't get the best experience.
With that in mind I created the Art Collection slideshow for viewers with a modern browser and a 1024 x 768 screen viewed at full screen size (press F11 or select View>Full Screen in the menu).
It's too early to cater to users with a 22" or 30" screen. They're in the minority, and who knows how wide they have set their browser.
Internet Explorer used to dominate the browser market (after it trounced Netscape), but it seems that it's now losing share, and Firefox is now #1. See the stats HERE.
Firefox streaked ahead today with Firefox 3.5 - check it out HERE.
The stats page has a quote I like:
"First get your facts; then you can distort them at your leisure."
Much to my surprise, today I created a new CSS rule that applies to this page and the home page and it's made interesting changes. This is a result of the new CSS book I bought on Monday. It gave me the idea. But I was only to implement them because of the detailed explanation in another book I'd bought earlier.
I'm quite thrilled with this because I'm now writing serious CSS code and rules direct to the CSS style sheets in the text editor, that are not able to be done with the Dreamweaver WYSIWYG helpers.
I'm now using "adjacent sibling selectors" to style this page and all other pages on my website that have applicable selectors.
font-family: Georgia, "Times New Roman", Times, serif;
The first letter in a paragraph immediately after an h3 heading will have a yellowish colour and will be twice the size of the normal font size, and will be a serif style (Georgia) in bold and italic. On the home page the code applies to the paragraph immediately after an h2 heading.
I've also changed the soundtrack to the Art Collection and added a final slide (a Canon IXUS 40 photo) to indicate that the show has ended.
The code for the Main Bookmarks page has been revised. It's no longer a table; it's now a list.
The Foster's Art Collection slideshow was completed on Sunday with new slides created in Xara Xtreme 5 Pro.
I've been a bit quiet lately with my website. Partly, I've wondered if it's worth the effort. But mostly I've been concentrating on a few problems at home - blocked drains and flooding (with possible rot or swelling damage over time). I don't mean that I only have a few problems at home. I have lots. It's just that I decided to concentrate on two of them and call in a plumber.
Apart from that, I've been changing the music on several pages without commenting on it, and doing a quite a bit of CSS study on a range of matters, especially relating to the layout of web pages. I've tried creating a web page by typing its content first (in HTML) and then adding CSS styles, as a training exercise. So far, it's not working as intended.
Today I did some careful reading of the page layout chapter in CSS: The Missing Manual and I've made enough progress to post the new Food page to my web site. There's a link for it on my home page. The new page is essentially a placeholder for the layout and design, before I add real content. Unlike all the other pages on my jthonline web site, this page was created from a blank page, and I've developed the CSS from scratch, by typing the name of a new class or id into the HTML page. Once I've created that, I've used Dreamweaver to add rules to the class or id. [The JT's Web Site on Netspace was totally created from blank pages.]
I still have a problem to sort out in the header at the top of the page. The header has moved down to reveal the background, and the header text has moved up to the top of the header.
Anyway, the Food page is a good learning experience. It's different to anything I've done before, from my point of view behind the scenes, but I've tried to make it look as consistent as possible with the rest of the web site, so that you won't notice a difference.
Today I contintued my CSS studies, and have made changes to the Food page, but not published them. I'm going to wait until it's ready. Today I also renewed my studies of Dreamweaver CS4. I'd become so preoccupied with my HTML and CSS studies that I'd forgotten that Dreamweaver is my host program with features that relieve the tedium of hand coding, especially when it's repetitive.
Of late, I've only been updating this page when I've made significant progress in my learning and CSS studies. Today was such a day. It happened with the Food page which I've published after the most intensive time I've spent on any page other than my home page.
My home page is 960 pixels wide to suit a 1024 x 768 computer screen, and it has three columns - comprising left sidebar, main content and right sidebar.
My new Food page started life the same way with three columns, built from the ground up on a blank page. While lying in bed this morning I realised that what I needed was a one column page where I use nested CSS boxes and floats to create the layout. And that's what I've done.
Today I worked on the Food and Cooking page to put something into the empty placeholder section at the top section of the page, as shown below.
So I typed in my favourite recipe for scrambled eggs, by which I mean the method I use when I'm in a good mood and feeling like the extra effort.
The layout of the Food and Cooking page is by far the most complex I've attempted so far with CSS floats to position elements on the page.
I'm now going to let you into some inside information.
The heading on the Food and Cooking page was taken with a different camera to the header image in all the other pages. It's actually from a still of an HD movie shot with the Canon EOS 5D Mark II at 12500 ISO.
The colours on the page for the left and right sidebars and all the text on the page (apart from black) were chosen from colours in the dinner photo. It's a method I've used on all the pages on this website. Most of the colours on my home page are based on the vertical stripes you might see on the sides of my narrower pages.
At around 3.00pm yesterday, on a cold but sunny Sunday afternoon in Melbourne, I decided that I'd like to create a contact page where people could contact me through their web browser. It was a very optimistic decision. I've always skipped over this aspect of web pages in the past as it involves a complexity of design and scripting way beyond my knowledge, and I have no heart for learning it.
It presented a huge challenge for me that could keep me occupied for weeks or months trying to do what I wanted to do. So I was totally stunned to realise at midday today that I'd created a working Contact page. I say "stunned" in the sense of being disoriented and bewildered. This is a long term "impossible for me" project I'd thought up that was completed within 24 hours, and it worked.
However, my common sense told me that my design wasn't right. For a start, it exposed my email address in the HTML code behind the scenes. I've now fixed that. I've also watched the Lynda.com tutorials about creating Forms in Dreamweaver. After this I deleted my Contact Me form and have created the form from scratch taking the Lynda.com advice into account.
Today I began revising this page to make it make easier to scroll through to the latest entry.
It's going to take time to revise the whole page, as it's a rather slow process to cross all the t's, and it should be done in an orderly manner, and not randomly.
It was a wet, cold, rainy and miserable afternoon in Melbourne today, so I decided not to go out as planned, as I felt warm and comfortable inside my home unit. I took advantage of this to complete the movement of this page to collapsible panels for each date heading.
I've had a personal web site on the World Wide Web since January 1996, but it's only this week that I've added a form so that visitors to my web site can send comments to me. The concept of doing that has always been in the "too hard basket." It began with a contact form where a visitor could provide his/her contact information and write comments about my website (or anything).
This quickly lead to a comment form on my home page where visitors can comment on opinions or news I post on that page.
I'm getting to like this concept. It's very easy to create forms in Dreamweaver, but they don't do anything unless I have the right software on my web site server that can action the instructions sent to it when visitors use my forms.
Currently I'm using a paid-for PHP Dreamweaver extension to process my forms, and send me an email to tell me what visitors have submitted. But I'd like to create my own PHP code to do other things. Nothing major, just small things that can't be done in HTML or CSS.
This week I've been doing searches to find out more about PHP and I'm totally confused. PHP is supposed to be very simple and easy to use. Yet so far, after days of searching, I've not been able to find a clear instruction of where to find and install PHP on my server. At least I've been able to find out that much. PHP is server based. It works from my jthonline.com server site, and doesn't need any software on the visitor's computer.
There was good and bad news today.
The good news is that I learned that my new AussieHQ hosting site already has PHP installed ready for me to use.
The bad news is that I also learned today that to take full advantage of PHP on my web pages I'll have to install a local server on my computer, otherwise I can't view my works in progress. It's easy enough to install a local server; the bit I don't like is that I'll have to create and locate all my web pages in the root directory of the server, on the C drive. I've always kept my web site folders data on another drive. I suppose I'll get used to the idea once I'd had time to sleep on it for a while.
Today I downloaded and installed a complete Apache, PHP and MySQL system to my computer, so I now have a local server on my PC. I tried using this web site on it, and it worked, but I hated the whole experience.
I also tried Adobe Coldfusion on my PC (it does much the same as PHP), but it took up over 1GB disk space on my PC, and costs too much to have on my hosting server. It caused major problems when I tried to delete the downloaded file. It crashed my computer three times. Eventually what worked was to boot up in Safe Mode to delete the downloaded file, and then boot up normally to uninstall the two Coldfusion programs.
The whole experience has been a nightmare this weekend when I shifted my website from being a static website to a dynamic website (which I hated) then back again. But I learned something out of all of it. Stay with what you know and feel comfortable with.
The move to Aussie HQ last month has been a blessing. I now have lots of stats and features, and amazingly, 24/7 phone and email support. It was this support that I took advantage of Saturday night at about 11pm, when I rang AussieHQ to sort out my confusion about PHP on my server.
We had 30 minute chat, and during this I learned that PHP is already installed on my server, and will execute .php files I publish. It also has MySQL installed (a database). At the time, I thought that I have no use for a database. But read on.
During our chat the service guy (Steve) mentioned WordPress, and gave me the URL to his own website which uses WordPress so I could see it in action. It didn't mean all that much to me at the time, as this was the first I'd heard of WordPress. Since then I've done some research on it, and I think it's worth a try.
Steve explained to me that WordPress can be installed direct from my web server to my domain, and I did that tonight. At this stage I haven't begun work on it.
The advantage of using WordPress to publish blogs such as this diary of my progress in learning CSS, is that although WordPress publishes in HTML as normal, it has a lot of PHP code and is tied to a MySQL database created for the purpose of the blog. Therefore, once the blog page gets too long, instead of resorting to collapsing panels for each day as I have on this page, WordPress will automatically (PHP in action) drop off the oldest daily posts and archive them. The database (and I'm only guessing this is what happens) keeps a record of the daily posts, and thus maintains the archives, and allows you to search the posts.
First off, I've rewritten yesterday's post.
I'm not entirely happy with my WordPress installation setup. After all, I only installed it late last night and I know very little about how it works. My main concern is whether I did a sensible thing by creating a subdomain (blog.jthonline.com) on my website to install WordPress.
I had hoped that http://blog.jthonline.com would lead straight to my blog. It doesn't. You can try it yourself and see where it leads. It needs http://blog.jthonline.com/WordPress, which I think is too complex unless bookmarked. But it doesn't really matter, as my home page now has a navigation bar link called Blog, which takes you directly to the WordPress blog part of my website (which is entirely independent of the rest of this website -yet it's in the same root directory on the remote site at AussieHQ). Very confusing, but amazing.
I'm in good company. The New York Times (among many others) has done the same thing. You can visit its normal website at http://www.nytimes.com/ref/topnews/blog-index.html and then choose any of the blogs that might interest you. Once you're into a blog, have a good look at it and the side margin content. I'll never be able to do that well. I don't have the staff. But you'll see that the general options is similar to those on my blog page. Choose View in the menu of your browser and go down to the view source, or equivalent to bring up the HTML code. On the 8th line at the bottom of the first group of code, you'll see that the blog page generator is
<meta name="generator" content="WordPress 2.6.5" />
Hmmm. My blog page is version 2.8.2 - so NYT have been slack in updating. It's a free program, and the importance of updating is to fix security issues. But maybe NYT has all the resources it needs to overcome security issues.
By the way, I've opened up some of my favourite posts when you load this page.
It's now several weeks since I've done any CSS studies. For the time being, it has not on my list of things to do ever since I created my Contact Me page and found that I could create interactive forms where visitors to my page could send me a message from the page. My excitement over this lead to my discovery of WordPress in a phone call to AussieHQ/Hosting Shop (my wonderful hosting server people).
Once I discovered WordPress, things haven't been the same since. It has taken over all my website interests, and it's free, and interactive, and has a MySQL database and PHP program looking after everything. Until two weeks ago, this was my blog page, but by my own definition I could only blog about learning CSS. On my new Blog page I can write about anything, although currently I'm writing a lot about my first experiences using the WordPress blog page. That's partly because it's what I'm most interested in currently, but also because I don't think I've come across a hobby or interest before that not only excites me, but anyone can take up FREE.
My Blog page is all written in a web browser. I prefer using Firefox for this because of its Web Developer and Firebug tools that are useful for examining the HTML and CSS code.
WordPress doesn't require any technical knowledge or skill beyond being able to use a computer and type a letter in Word; or even just write an email and send it. Wordpress offers 1600 free themes ( CSS layouts and PHP code) and there are many other free themes on the Internet. You can also buy themes.
The thing is that although my current interest has shifted to my WordPress powered Blog page, I'm already making good use of my HTML and CSS training to alter the appearance of my Blog page. I hope to learn far more when the two books I've ordered from Amazon arrive.
My blog post on Wednesday drew a comment from a visitor (Reno) who asked about the PHP program which he'd heard about twice in the one day. I've replied to his comments on my blog page.
I hope to write about PHP on this page in a way that will give you the gist of what PHP does as compared with a normal HTML page, without needing to understand the detail. The easiest way is to show you, by asking you to look at the source code. You don't need to understand HTML, CSS or PHP. The difference will be obvious.
To view the source code, in Internet Explorer (IE), go to the View menu and select Source. Much the same in Firefox where Ctrl U is the shortcut to View>Page Source. In Safari, Ctrl+Alt U is the shortcut to View> View Source.
The best page on my site to look at is my home page. The full address is http://www.jthonline.com/index.html but as you know, browsers understand that you usually mean http:// so you don't have to type that in. And you don't have to type the "/index.html" file name as browsers know that the home page file is either index.html or index.php in most web sites.
As I mentioned above, the full address to my home page is http://www.jthonline.com/index.html
The full address to my blog page is http://www.jthonline.com/WordPress/index.php - but as with home pages you don't have to enter the full address. All you need type is www.jthonline.com/WordPress to go direct to my blog page. The "/WordPress" part tells the browser to look in the WordPress directory. As no file is specified, the browser will select the index file, which is index.php in this case.
Your browser asks the server at www.jthonline.com to send it instructions on how to display the page for you to look at. When the server finds that the browser has asked for a PHP file it asks the PHP Interpreter to deal with it. The PHP Interpreter then opens the WordPress/index.php file, and this is all it finds:
The index.php file comprises comments (in orange), with code in lines 1, 14, 17 and 18.
Of that code, all that line 1 does is to indicate that the PHP begins at <?php and ends at ?> which is on line 18.
Line 14 instructs the PHP Interpreter to define the current WordPress theme, and it will need (require) to get the instructions in the wp-blog-header.php file.
The PHP Interpreter then goes to that file. Here is a screen grab for the entire contents of that file:
As you can see, not much is happening here either. It's just calls to two other files. And so it goes on.
The next files start to get into some serious PHP program code and make further calls to other files, including calls to the MySQL database to obtain actual data. In the end, the PHP Interpreter sends an HTML file to the server, which then sends the HTML file to your browser to tell it how to display the blog page for you. The amazing thing is that all of this usually happens within in a second or so. And it's done in Canberra :-)
If you view the source code on the blog page, all you see is the HTML code and content that was returned to your browser from the server via the PHP Interpreter.