Documente Academic
Documente Profesional
Documente Cultură
Note: Given the nature of operating systems, your icon graphics may not resemble mine.
Note: Creating web interfaces is a rather complicated process, therefore I’m not going to go into
every little detail but rather highlight the most important aspects of html and css.
Copy the following code and paste it into your interface.htm document.
view source
01.<!-- this sets the doc type -->
02.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/strict.dtd">
03.<html>
04.<head>
05.<title>My Interface</title>
06.
07.<!-- linking your stylesheet document -->
08.<link rel="stylesheet" type="text/css" href = "stylesheet.css"
media="screen" />
09.
10.</head>
11.<body>
12.
13.</body>
14.</html>
Now with this html code in, it’s time to think about how the layout is going to work.
Before you do any real CSS, think about the logic that you’re going to use. It’s best to have a
picture in your
mind before you start rather than begin with little thought as it’s easy to work yourself into a
corner.
helpful tip: When writing CSS, it’s best to start broad and then become more specific as you go
along. (Just like painting a picture).
Copy and paste this code into your html document between the body tags.
view source
01.<!--
02.Start by blocking out the major sections of the website.
03.Create the site wrapper, header, body etc.
04.-->
05.<!--
06.Site Wrapper
07.Always create a site wrapper, this helps with the overall size and
position of your website.
08.-->
09.<div class="site-wrapper">
10.
11.<!--
12.Header Wrapper
13.This is where the logo, site title and top navigation will go
14.-->
15.
16.<!--
17.Body Wrapper
18.this section is what holds the left navigation, center content and right
panels
19.-->
20.
21.<!--
22.Footer
23.as you might expect, this is the footer
24.--></div>
I can’t stress enough how important this first step is. It provides the structure that the rest of your
components will build on. You wouldn’t trust a house with a shaky foundation would you? The
same applies here.
Copy and paste the following code into stylesheet.css
view source
01./*==============================
02.GLOBALS
03.Sets the default document font size, family
04.and color
05.===============================*/
06.body
07.{
08.font-family:Arial;
09.font-size:12px;
10.color:#3f4a4e;
11.}
12./*==============================
13.SITE WRAPPER
14.===============================*/
15..site-wrapper
16.{
17.width:800px;
18.
19./* min-height lets your site grow vertically
20.(like in tables). */
21.min-height:600px;
22.
23./* By setting these to auto you are centering the
24.site */
25.margin-left:auto;
26.margin-right:auto;
27.
28.border:solid 1px black;
29.}
30./*==============================
31.HEADER WRAPPER
32.===============================*/
33..header-wrapper
34.{
35.width:800px;
36.height:54px;
37.
38.background:url('images/header_bg.gif');
39.
40./* css lets you designate how you want an image to
41.repeat. Along the x-axis, y-axis or not at all. */
42.background-repeat:repeat-x;
43.}
44./*==============================
45.BODY WRAPPER
46.===============================*/
47..body-wrapper
48.{
49.margin-top:3px;
50.
51./* floats are crucial to the creation of any
52.web interface. Every web developer must master
53.this concept. Don't worry I'll be writing a
54.tutorial about this a little later. <img
src="http://www.bolducpress.com/wp-includes/images/smilies/icon_smile.gif"
alt=":)" class="wp-smiley"> */
55.float:left;
56.
57.width:800px;
58.min-height:530px;
59.}
60./*==============================
61.FOOTER
62.===============================*/
63..footer
64.{
65./* clears are the sisters to float, it's
66.time to meet the whole family <img src="http://www.bolducpress.com/wp-
includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> */
67.clear:left;
68.height:16px;
69.background:url(images/footer.gif);
70.}
Note: In the early stages of production like this, I highly recommend that you put a border on
every block element (div, table, h1, h2 etc. . ) that you create. It is much easier to visualize.
Open interface.htm in your browser, it should look something like this.