I wanted my website for this class to reflect my personality in its aesthetic design. I’m a fairly linear thinker; I like for things to be very organized and streamlined, divided up neatly into boxes and lists. For my website, I got the idea to use containers in CSS to make each heading and paragraph inside its own personal space, and color coded the containers on each page according to their respective colors on the navigation (Home) page. The About page is pink, the Photo page is purple, and so on.
I did this by making containers in CSS of the appropriate dimensions and specifying the font and size and everything. I chose the colors for each container using the color select option (for background-color) in Dreamweaver:
I did pink for the first heading on the home page and all the headings and text on my About page. I chose the color I wanted using the first and second sliders (color and lightness):
But the third slider, I discovered, controls transparency. I adjusted it and made the pink boxes more transparent. Then I clicked on the RGBa option in the bottom of the color choosing box:
This shows the amount of Red (255), Green (76), and Blue (0) coloring in my chosen shade. The last number is the opacity (.70 or about 70% opacity). Then I copied and pasted the color code into the CSS objects/containers for all of my headings and everything that corresponded to the About page (which I wanted to be pink). Then I did the same thing for all my other pages, choosing different colors for each page but 70% opacity for each.
The result looks really cool. It gives a little bit of depth and dimension to the page while still keeping the elegant, streamlined design I wanted. It was really easy and it kept my page simple while not being too plain.