The Style Guide for The Silver Sheen
Header
As a prolouge to the style guide, please note that each page's body tag holds its own ID for simplifying navigation.
The background image for my website may vary, but will be a picture of a ice-capped mountain range or something that gives the user a sense of cold.
The lettering in my header will be an off-white color, #f0fff0, positioned in such a way that the user will be able to read all of the content in the header section. The Dragon image will stay in its position, but the other dragon may be substitued for a more dramatic images. As I (or anyone who works on my site that may have more of a talent for graphic design) become more familar with graphic design, images will improve.
The text in the header will be marked as such with and external style sheet:
#header h1{
text-align: center;
color: #f0fff0;
padding-left: 150px;
padding-top: 53px;
font-weight: bold;
}
#header h3{
text-align:center;
color:#f0fff0;
padding-left:390px;
font-weight:bolder;
}
#header p{
text-align: center;
color:#f0fff0;
font-weight:bold;
padding-left: 200px;
padding-right: 200px;
padding-top: 5px;
font-size: large;
Padding will vary to move lettering to more readable positions.
Navigation
The navigation bar is to be styled using an external style sheet.
With each page that is linked to from the nav bar, it is given its own
ID in the body tag so that when each link is selected, it looks like a
tab. The coding for this is labeled as such #index .home{
background-color: gray;
}
#assignments .assignments{
background-color: gray;
}
#samples .samples{
background-color: gray;
}
#contact .contact{
background-color: gray;
} If the link has not been visited, its color is navy as coded in the CSS
and black if visited (this follows for all links in the website).
Content
The content sections of my website will hold and images div that uses if IE statements. The wording will be controlled using an external style sheet. The coding for my creative prowess is as follows:
#content{
float: left;
width: 100%;
background-color: gray;
height: 100%;
}
#content p{
padding-left: 17px;
padding-right: 17px;
text-indent: .35in;
font-family: arial, helvetic, sans-serif;
}
#content h1,h2,h3{
text-align: center;
}
With the image div as follows:
#images{
float: right;
background-color: gray;
padding-left:7px;
}
Footer and Subnav
The content of these divs is to be small, and not to draw attention to themselves. the subnav div is to be smaller than the footer div, which holds a copyright statement, a link to the contact page and also a link to the colophon page and this document. The background is to follow the same rules as the content div, and also to follow the same rules for the links.
Prone to Changes
As I become better at webdesign, and learn more about the tools and capabilities of CSS, my website style guide will change to fit how I design. I hope to have better images, better concepts, more useable layouts, and undestand what to do for each situtaion.
The goal of The Silver Sheen is to be
- Informative
- Attract Customers
- Aestically Appealing
- Professional According to XHTML 1.0 Transitional and CSS 2.0 W3C standards
As a web developer this is going to be accomplished by adhering to the guidelines and set stlye/content ideas as laid out in this style guide.
1. In order to be informative, every section of content in this website will be concise and bold in word choice. The reason for this is that people do not want to sit and read 4 to 5 pages about my fish. This flows into my second item.
1. They want to know what I am selling, is it worth the investment on their part, and what proof is shown that this book/author will be an asset to my bookshelf/publishing house.
3. Since professional marketing companies will be looking into my website, it must be of a professional grade, and yet at the same time, fun for those who visit. This is going to be done by placing pictures in the aside (which has yet to be made and will be placed to the right of my content section). Conservativeness in the picture amount and overall domanance of the webpage is critical. It must be clear to the user that I am not selling my art, but I am selling my literary talents. When individuals view my webpages, I expect them to say or think, "This author has put alot of work into their site, and it shows. This is really professional. Lets take a look at their work." That is the end goal.
4. In order to show professional quality, I will demand that my website meet the standard of W3C. Proper syntax of XHTML transitional 1.0 and CSS 2.0 is vital to the survival of my website and cruicial to landing a potential publisher.