I used Notepad to work on my site's pages, and I also used the three sites mentioned on this week's assignment to help me style it. This was a good way to refresh my memory on how to create CSS tags since I haven't had to code pages by hand in a while.
I find the W3 CSS tutorial very helpful. It shows you how to create boxes, like the one I added to the middle of my page, div tags, and how to style your headers and links. I also used the somacom.com web site for getting the hexadecimal code for the colors I used for the page background, headers, and links.
Designing a simple page like this one does not require a lot of planning, but it is always advisable to create a sketch of what you envision your site or pages to look like before you actually start typing the code. You can use a blank sheet of paper and start drawing a organizational chart, something like this:
Home page (index.html)
|
|
Videos <--> Images <--> etc. (videos.html, images.html, etc.)
For this exercise, I just followed the assignment instructions for some of the CSS styles, and I enclosed a free image of a world map inside a div tag, which I also used as a navigation tab to toggle back and forth between the site pages.
One technique that is used a lot in most sites today is the styling of links. I added css styles for visited links, active links, mouse over links, and selected links. You can view the code for the homepage by right-clicking anywhere on the page and selecting "View Page Source" or "View Source".
You can also save a CSS file to your root directory, as an individual file with a .css extension, and link to it from inside the Head tag in your pages. That way, you don't have to type the CSS code on each and every page, and the changes you make to the CSS file are applied to all pages. This is very helpful when you have a site with several pages.
My site
No comments:
Post a Comment