Reset Your Style

Over the past eight weeks we have learned how to design a basic website and how to post links and publish it. But normally before designing a website, the proper protocol to follow is to first design mock up of your website before you begin programing. The mock up includes the wire frame (sketch of where you plan on putting all of the elements on your site) and the prototype (a functioning website for the client to test out before putting it online). The wire frame can just be designed in Photoshop or Illustrator where you can create grids or you can just make a sketch on paper.

With our Wire Frame to use as a guide we can start programing the Prototype. But when designing your web page the preexisting tags (excluding id or class tags that you defined yourself) have a predefined font, size, margin, and padding spaces, so we often like to re-set our styles. There are three types or resets you can do in CSS:

  1.  There’s the lazy method, which is just type in * {} which re-define every single tag in your CSS.Web_13
  2. Meyers reset (2KB): http://meyerweb.com/eric/tools/css/reset/ Web_14
  3. Normalize CSS (8KB): https://necolas.github.io/normalize.css/ Web_15.jpg

To incorporate a reset in your document, include two separate links to the two different CSS documents in the Head of your document. One for the Reset, and bellow that your New styles. The stacking order is important because the last code always takes priority, so if the Reset was linked bellow the New styles then the reset would override any new design work.Web_16.jpgIn your New CSS document, we generally redefine the font-family. You can ether import fonts on your system by writing the font-family: in wherever tag you want the text to be applied. But these fonts must be installed on the users computer otherwise they wont show up for them when viewing the website so you can import google fonts directly from the website by copying the link provided on www.google.com/fonts and Web_17 then writing @import url before pasting the link on top of your CSS document. Then when applying your font-family: to tags you can include the google font you imported.

“@import url(https://fonts.googleapis.com/css?family=Roboto);
body { font-family: ‘Roboto’, sans-serif; }”

The advantage of doing this is that everyone will be able to view your fonts regardless of what they have installed on their computers because it takes them directly from google. Another common practice is to  align your text to the center of a container by making the containers height:” the same as the line-height:.

height:50px;
line-height:50px;

Web_17B

To put text over and image or position an image without moving or otherwise effecting the text, we generally put images in the background. This is done in your CSS document and I just put it all together in the New style sheet.

To put an image in the background of your page body {background-image:url(_1_bg.jpg);} and you can repeat that background immage by adding background-repeat:repeat; to your body tag.

You can also make the background image scroll with the content on your page with backgound-attachment:scroll;” or you can make it fixed with background-attachment:fixed;and your content will scroll separately.

to completely cover your page with your background image  with background-size:cover; and you can fit the image to be flexible with the size of your browser background-size:contain; = fit

you can make your background repeat as the background expands or contracts
body {
background-image:url(images/_1_seamless_rainforest.png);
background-repeat:repeat-x;
background-position:left bottom;
background-attachment:fixed;}

your background image will always overlap your background color, so if there is transparency in your image, the background will be white unless you add background-color:rgba(142,231,255,1.00) to your body tag.
body {
background-image:url(images/_1_seamless_rainforest.png);
background-repeat:repeat-x;
background-position:left bottom;
background-attachment:fixed;
background-color:rgba(142,231,255,1.00)}

you can scale your background image to fit in your browser with
{ background-image:url(images/hong-kong.jpg);
background-repeat:no-repeat;
backgound-position:center center;
background-attachment:fixed;
background-size:contain;
}”

or you can scale your background image to fill your browser with
{ background-image:url(images/hong-kong.jpg);
background-repeat:no-repeat;
backgound-position:center center;
background-attachment:fixed;
background-size:cover; }

and you can center you background image with
{background-position:center;}

You can also put the background image in a container or any other tag for that matter. Keep your images from overflowing from your containers type “{overflow:none;}” in CSS

You can also add list items with bullet points or numbers with “li {}” in your CSS and you can change those bullets to images with li {list-style-type:none; list-style-image:url(images/_0_bg-bullets.gif);} and you can get more control by making it a background image.
li { list-style-type:none; background-image:url(images/_0_bg-bullets.gif); background-repeat:no-repeat; padding-left:20px;

To put content side by side we need to put them into Columns and it is industry standard to arrange your document with the 960 Grid System: http://960.gs/

960_Grid

  • 12 Column =60px width & 20px gutter (10px margin)
  • 16 Column =40px width & 20px gutter (10px margin)
  • 24 Column =30px width & 10px gutter (5px margin)

The idea is to put your content in containers and assign them a specific column size to arrange your website. And since “padding” pushes your content down and “margins” push stuff around your content away we use this grid system to help streamline the process instead of calculating for different margins and padding every new site.

normal document flow dictates that you must arrange your document from top to bottom and if you define how you would like your tags to float in the CSS, you can arrange the content on your page:
#content {float:left;}
#content {float:right;}

Once you arrange you define the floats for some of your content the remaining content bellow those tags might get pushed in between your floating content so this will require you to clear the content following your floating content.
#footer {clear:both;}

to reuse your floats you can define them as classes and reassign them to the necessary tags:
.fl {float:left;}
.fr {float:right;}
.clear {clear:both;}

To give our site some extra flare, we can add a Favicon to our site. A Favicon is a little icon that shows up next to the tittle of your page in the Browser.  Tho link a favicon, we need an image with a transparent background, that is 16px by 16px, or 32px by 32px and then we need to link the image in the Head of our HTML document by typing <link rel=”icon” href=”favoicon.png”  type=”image/icon”/>

If your code is messy when you are finished you can quickly organize your code your code in Dreamweaver by going up to comments in your Drop Down Menu and clicking on Apply Source Formatting.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s