CSS Assignment
I have documented the different steps needed to fulfill all the requirements for the completion of this assignment. As you review the different web pages you will find that the links in each Step Page do not work correctly. These pages are for display only. They allow you to see the style changes in the web page. To return to this page and follow along, you will need to use the back button on your browser.
Part 1
Step 1 - Getting the Initial template
For my first step I went into the StyleMaster templates and created a web page using their blu template. This created an initial html page, index.html, and the corresponding style sheet, blu.css. I then went to Dreamweaver and created a site called TheOldScholar. I copied the files from where I had saved them using StyleMaster into the Dreamweaver directory. I made a copy of the html and called it initialindex.htm.
As you can see this was pretty basic, but it had a lot of things in it that I did not understand. For instance, I realized that I also needed to copy the imgs directory over so that the style sheet could get the backgrounds etc. I played around with the referencing of other pages and made the projects page. This showed me how the id's embedded in the li tags work for the currently selected item in the navigation bar.
This playing around led me to have two pages on my site, the main page and the projects page. I also had the blu.css and the imgs directory. I decided that I would create a copy of this main page as the start of my CSS assignment, Step 1.
I then uploaded everything to the server to make sure I knew how to do that. I was pleasantly surprised because with the .mac account I didn't have to do anything. Using the finder I just moved the files from my disk to the idisk drive which points to a place on the Apple servers. No fuss, no muss. I'd like to say everything worked out just that easy - but instead of reading the directions I tried about 4 different ways before finding the easy way. I'm so used to working in a locked down secure world, I could not believe I could move files to a server that easily.
Step 2 - Adding a header graphic
For Step 2 we needed to modify the header graphic with a graphic of our own and then use that graphic as a background graphic. I spent some time looking for a caricature of an old man studying, which could become a logo or theme throughout, but I did not have a lot of luck. I did find a nice picture of Charles Dickens that fit the bill pretty well for this initial effort. I superimposed the picture on the background image using Photoshop. I renamed the image backbanner1.jpg and changed the blu.css to reference it. I also changed the blu.css to blu1.css, enabling me to show the web page as it changed over time. All the links and changes are captured in Step 2.
About that time I remembered I needed to make this page so there is a place to document the changes that occurred over time. This page becomes the page to which my projects page will refer. I copied everything up to the server and was rudely informed that none of my links worked; I had forgotten to put in the .html extension. They should work for you.
Step 3 - Changing the color scheme and font
I went into the css file and changed the color for the text in the container div to red and changed the font family to Georgia, "Times New Roman", Times, serif. I was surprised that not all the text changed. Then I reviewed the .css file and found out that the div sidebar had a color set also. As that was the controlling direction to the browser, setting of that color superceded my color setting. I went into the sidebar and changed the background color and the font color. This action really shows the background graphic and the interrelationship between the graphic and color choices. In reality I would use the graphic for setting the color and not use css. These changes are shown in Step 3 with the appropriate css file.
When I put that file up to the server I found out something I did not know before. If I put my hyperlink in all lower case css2.html, but the file exists in upper case CSS2.html, I get a page not found error. This means the file system is on a Unix based machine, but I'm sure that the web addresses can't be case sensitive. A question for class. In the meantime I will have to insure the case of my hyperlinks match the case of my files.
Step 4 - Floating an image and adding a list
The next step was to float an image. I added a picture of my little pal Sydney. I changed the .css file to float images. I also added an ordered list. I used ordered and unordered lists in my projects page so this was just done here so everything was in one place for my final page for this assignment
I wanted to have the last sentence go underneath the picture instead of floating. I put in the "clearthefloats" as shown in the Wyke book on page 117, but it really messed up the page. I feel it may have more to do with the fixed size of the containers, but I was not able to play around with this one. This is shown in Step 4, and the css file.
Step 5 - Adding a new div and putting on certification badges.
The template that I used already had links to the html and css certification. I just made a div called "badges" and changed those links into the badges as shown in Step 5, and the css file. I then went back and added that to all my other pages.
Part 2
To create the portfolio page I just used the work that I had done with the template I had started on. I did not use the techniques I experimented with in Steps 3 through 5, except I did add the certification badges to the main portfolio page and the projects page. So the Portfolio page is also the main page of my web site TheOldScholar.net.
