|
Portfolio |
Richard
C. Aguilar |
rca@rcaguilar.com |
|
Basic
Steps in Website Design |
|
Designing
a website has become a relatively easy venture nowadays and needn't
be costly. One of the most significant factors in web design is
the number of browsers in public use along with preference settings
for each individual user. Standards and guidelines are set, but
because of the many individual differences no two browsers present
the same viewing. This is good to remember when developing your
own website. |
|
I. |
Design
|
|
Put your design on paper first. Make an
outline draft (rough draft). Shape the spaces you want to
put images into. Shape where you want to place the text. Use
sketching and free-hand placement. Rough hand-drawings are
fine. Then use a program like Photoshop or Paint Shop Pro
to design your color-scheme(s).
In designing your webpages, decide how you
want your text to look – choose fonts, font sizes, colors,
bold face, italics, etc. |
|
|
II. |
HTML
- http://www.w3schools.com |
|
All information on a web page reflects
information as dictated within opening tags <***> and
closing tags </***>. In order to see this page in its
coded form, right click on the screen and then right click
"view source" on the menu that pops up. This will
bring up a "code" view of this page. You can view
the source of almost any website using this technique.
You may require the use of an HTML editor
or other program to build your website. The following chart
includes several commonly used web editors, with the first
2 listings being freeware (costs you nothing!). If you're
already employed within a school district, you might want
to check with the Academic
Superstore for a greatly reduced price. |
|
|
|
If you choose not to use an HTML editor
or other program to build your site with, you need to know
enough HTML to do it in Notepad
or Write (any text editor). MS Word
can save documents as web pages, but inserts overwhelmingly
excessive tags.
For an excellent overview of HTML, along
with simplified explanations, see: http://www.w3schools.com.
This free site provides lessons in HTML – as well as
many other types of web design tactics. They provide a complete
listing of current tags, current web production tips and issues,
and a considerable learning experience through example. |
|
|
III. |
CSS
|
|
Cascading Styles Sheets are useful in designing
your web pages because they provide all of the basic information
for all pages at once. The use of CSS cuts down on the size
of your pages, and covers the whole “styling”
of your webpage design. It is used to designate fonts, font
sizes, font colors, alignment, different partition styles
– practically any design element for ALL pages in your
site in one document.
Take a look at this
sample webpage file. A CSS website http://www.csszengarden.com/
shows you what your CSS file can do for a single text file.
An off-shoot of this site that offers variations for the same
text file is at: http://www.mezzoblue.com/zengarden/alldesigns/bydate/.
Keep in mind that all of the pages represent the exact same
text file. |
|
|
IV.
|
Text
Files, Sound Files, Images, Power Point, Flash, etc. |
|
In creating your website, it is important
that you maintain your data in a logical set of folders and
objects. If you will use sound files or graphic images, you
should position these in separate folders from your text files.
This obviously depends on the size of website you are producing.
Your root file is always known as “index.html.”
This is the document that any server will present when your
web address is provided in the address bar. All other pages
can be named whatever you wish, but have the extension “.htm”
after each title. It's also a good practice NOT to leave spaces
between words in naming your files.
Sound files can be embedded into your webpage
through special tags. When you link a sound file to a page
and a user views your page, most often the computer in use
will play the sound file - as long as it has the software
to do so! Most common sound file extensions in use today are
.au, .wav, .mp3, .ra, .rm.
Images and movie files are also easy to embed
on your pages, but careful attention needs to be given to
sizing, resolution, and file extension. Again, if the browser
has the software to present the file, it will. Some computers
have default settings that take .mov files away from your
browser into QuickTime, thus losing your viewer's connection
to your site. |
|
|
V. |
Host
/ IP / Domain Name |
|
Decide where your website will be housed.
Your website has to be available on the internet through a
server, which will serve the pages once your “site name”
is entered into the address bar. If you are in a school system
that has its own website, and provides space for teacher websites,
you've got it made. You can easily upload your pages onto
the school server, without concern for how your site is to
be found via the internet.
If you purchase a web hosting package, you
will receive an IP address (or DNS), which is the numerical
address associated with your site’s name. A Domain name
can be purchased through Register.com, Network Solutions,
or many other sites offering this service. Once you have purchased
a Domain Name, it will be up to you to “point”
the name to your DNS – where your site is hosted.
Many online/internet services offer a one-page
or 50 Meg website with their service, and provide you a “/~name/index.html”
indexing location. This can work fine for a website –
but is very limited in how and whether it will be found for
viewing by a great audience. |
|
|
VI. |
FTP
for transfer of files and maintenance |
|
Once you feel that your site is publishable,
you will need an FTP program (file transfer protocol) to transfer
your files to the server. Once again, if you purchase a hosting
package, the host frequently provides this service through
its site maintenance pages. It is still recommended that you
use a separate FTP program, in order to maintain more control
and a better overview of the pages in your site.
For a free FTP program that is reliable,
http://www.internet-soft.com/
has FTP Commander. Versions change frequently, and updates
are constantly available. |
|
|
VII. |
Contact
Page vs. Email Address on site |
|
One area to be wary of is the use of your email address
on your webpage. If you have a generic email address through
hotmail or Netscape, it is less drastic to make this address
available to the public. A preferred method of contact is
the Contact Page, which requires technical know-how. The
reason for avoiding using a personal email address is because
there are many spammers who pick up your email address,
and start sending you anything and everything that you don’t
want to get!
|
|
|
VIII. |
Metatags,
Search Engines, and Site Submission |
|
When you are developing your pages, take
special care to insert valid and proper meta-tags.
Many of these tags provide background information for your
website, including the author’s name, date of production,
revisions, keywords, a description, etc. These tags are used
by search engines to locate term-related data from computers
world-wide.
Many search engines also provide a “Site
Submission” section in their web pages, so that you
can submit your site for spidering and inclusion in search
results for anyone seeking information of the type you are
providing. |
|
|
IX. |
Link
Validation |
|
If you are providing links in your site to information
from the internet, be sure to check frequently that the
links are still valid. One of the most irritating points
of the internet is the loss of link validity. Sites change,
are dropped, become stale, or simply cease to exist.
|
|
|
X. |
Affiliate
Programs |
|
You can also make money on your website,
by joining affiliate programs. You need to be business-oriented
if your site is “sales.” A very good program to
join at this time is the Google
Adsense program. Don’t expect to generate a lot
of revenue from your website, but getting anything back out
of it is worth the effort! |
|
|
XI. |
More
Resource Sites for Further Information: |
|
|
|
|
|
|
|
If
you have specific questions or need further explanation of any item
in this presentation, please send an email to: rca@rcaguilar.com.
Feel free to visit any of the following websites: |
|
|
|
|