| This section discusses the pros and cons of certain web
designs You should first note that the best design implementation is one
you can change by editing one or few files and the change is reflected on
all pages on the website, For example
BuildGuide.NET or info2device.com
are websites that are constructed with PHP, PHP is a dynamic web
development scripting language, The websites are theme capable, the
administrator of those websites (me) can change the design of such
websites by simply making a new theme and installing it, i can also revert
back to the old design with a few clicks in the admin area.
There are many ways to make the design changeable by editing a few
files, one is Server Side Includes (SSI) usually comes with the extension
SHTML, Although HTML is allot lighter on the server (all it has to do is
send you the page), it is not really handy when modifications need to be
made.
Anyway, SSI and scripting languages will be discuss later, for now let
us just stick to choosing a design and implementing it in html, all you
design now is one html template that should be applied to your website
weather dynamic or static, with SSI or without.
The design of a page has a few factors to take into account, the look,
Ease of use (how to navigate the website), How fast pages will load
(loading time), what software needs to be installed on the user's browser
(for example Macromedia FLASH player), And finally Cross Browser
Compatibility.
Surely All your pages should have the same design, use the same fonts,
and same color schemes, this is accomplished by using CSS (Cascade Style
Sheets), A cascaded style sheet is a text document that will carry
information about the style and design of all pages that link to it.
Lets start by making this sheet.... Start by making a folder (directory)
on your hard drive, and name it whatever you like, over here i will call
it web and place it on in my home directory (my C drive if you use
windows), so i will have a directory c:\web\ From this point on i will
assume you use Microsoft windows, you can surely use any other operating
system, I will also assume you have made a directory called c:\web
Start by making sure your operating system displays the file extension
(so we can rename them), In windows 2000 this is done by opening any
directory (our new web directory for example), go to the tools drop down
menu, then to folder options, A dialogue box will appear, If you go to the
View tab (looks like a phone book thing) Remove the tick from (Hide file
extensions for known file types), for those of you using linux, file
extensions are not hidden in the first place so this step is not for you.
Make two new text documents and rename the first to index.html and the
other to style.css after doing that, you have two files at
c:\web\index.html and c:\web\style.css, open those files with notepad or
any other text editor paste the following into style.css
body
{
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background : #000000;
color : White;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin: 0px;
scrollbar-face-color: #EBEDE8;
scrollbar-shadow-color: #D2D7CC;
scrollbar-highlight-color: #FCFCFC;
scrollbar-3Dligh-color: #FFFFFF;
scrollbar-arrow-color: #686868;
scrollbar-darkshadow-color: #1553A6;
scrollbar-base-color: #E0E0E0;
} |
and paste this into index.html
<html>
<head>
<meta name="keywords" content="info to 2 device network
info2device">
<meta name="description" content="The info2device network, Something
for everyone">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>My First Web Page</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>This is my first web page, all the colors come from a style
sheet :) i even modified how my scroll bar looks !
</body>
</html> |
Ok, Now your files are ready for use, Just double click (or click) on
index.html. If this does not work, you can open your browser, hit CTRL+O
and browse to that file, then chose the file index.html You should now
see a page with a BLACK background and WHITE text, The colors are
specified in the file style.css and the content in index.html Do not
panic if you don't understand how this happened ! It will all be explained
in the next section, Please be sure to go with the guide step by step for
best results.
Ok, so you have made a page, and a style sheet, But a nice design requires
you to make many many html pages, If you are reading this to become a
designer, you should master HTML and CSS, you should go through all parts
of BuildGuide, if you just want to make a website, and like most of us
(including me) not much of a designer (artistic sense wise) you would
probably be better off getting some ready HTML template, If you would like
to get ready html templates, some cheap templates are sold at the
info2device website (mother website of buildguide.net) (Click
here to go to the info2device html templates section). You can also
use software like MS front page to generate your html code, either way,
some basics you must no to become a good webmaster, the following section
is for everybody, after that you will find some optional parts that you
may skip if you like, even if you do get the HTML templates, you should
understand the following part of the guide, So, lets get to the next part,
Over there you will understand what you have pasted in your index.html.
NEXT: Basic HTML / About HTML. |