Creating a Directory |
Before you create
your web pages, begin by creating a folder that will contain your entire
website. Go to the File menu and from the drop down menu select "New
Folder. |
Directory
|
For this exercise, click on the "untitled folder" and let's
name our folder (sometimes called a "Directory") "my_web_site"
It is important as a rule-of-process, to always name folders, web pages
and images with lowercase text and no spaces in their naming.
Other text that is not usable in naming pages, images and folders are:
[ !,-,@,#,$,%,^,&,*,(,)?,/,<,+,= ]
|
Creating sub-directories |
Open your "my_web_site"
folder and create a new folder and name that new folder "images".
The purpose of creating sub folders (sometimes called "sub-directories")
are to hold specific files in our website. |
Images Folder |
Once we create and import images for our web pages, we will save those
image files here. The purpose of these sub folders is to ensure better
organization of your files.
|
Sub Directories
|
Other types of sub folders that you may eventually include will be
folders for your music, animation, and printable document files called
pdf's.
Again the main reason for these sub folders is so you may organize
your contents.
|
Turn On Mozilla... Some general Items About Mozilla
| 
New Composer Page
|
|
If you don't have Mozilla, its a FREE software, go here to download.
http://www.mozilla.org/products/firefox/
Follow directions, and load your software.
Once your Mozilla Software opens, you will need to click on the
"File" Drop-down Menu, Go to "New", then go
to "Composer Page" to Open the Mozilla Composer interface.
|
|
Save File |
| Now before you begin to work on your webpage, you should "Save"
or "Save As" your composer page in your Directory Folder.
Learning to save your work early and often will guard against loosing
your work later in case the software was to crash or any other unforseen
problems. |
|
| |
Examples of appropriate name: index.html (for the home page).
In Mozilla it is not important to put the suffixes (html, htm)
on the file name, the software will do this automatically. |
|
Saving Pages |
| Remember this is where you save your page names in lowercase
names with no spaces and other usable in naming pages, images and
folders are: [ !,-,@,#,$,%,^,&,*,(,)?,/,<,+,= ] |
|
About Mozilla |
| When you have a question about a software you are unfamiliar with,
it is a good idea to look under the "Help" Menu item to
look for Tutorial and Help Contents. |
|
Controls and Menus |
| Most controls on any software have dual commands. The same is
with Mozilla Composer. Across the top are the drop down menus where
the command can be found |
|
Controls |
| Those same commands can be found under Icons that are distributed
across the top of the desktop under the drop down menus. |
|
Options |
| Usually the menu commands that are used more often are found in
the available Icons. Here we see the Link, Insert Image and Table
Commands as well as the Spell Check. |
|
Page Views |
| In the lower left of the Mozilla's Desk Top we see page view options.
This allows the designer to create and preview in Design View or
in HTML Source view, as well as a preview option. |
|
Page Titles |
| To Title you page is different than saving your page file. Go
to "Format" and "Page Titles and Properties" |
|
| 
Formatting Window
|
| You may keep the file name for your webpage, in this case it say
"index.html" , this is where Mozilla uses the File name
for the Page name. To save any confusion until you are more familiar
with the program, leave the File name for the Page name. |
|
Formatting |
| It is a good idea for fill out the other option of the "Author,
and Description of the Webpage your are designing. |
|
| 
Page Colors
|
| To format the page background colors and text colors go to: "Format"
and then to "Page Colors and Background" |
|
| 
Page Formatting Window
|
| You will see a second dialogue window appear. Within Mozilla,
the is a default style of color combinations of a white background
as shown. |
|
Setting Page and Text Colors |
|
The "Use custom colors" feature allows the designer
to change the text and background colors as well as place an image
as a tile effect as a back background
Click on any colored button to bring up a color palette for color
options. It is important to give height consideration to color
combination of choices. These considerations are discussed below.
Example of Images as a
background.
 |
|
Inserting Images
|
| To insert an image onto a webpage, Either click on the "Insert"
Drop-down Menu or the "Image Icon" |
|
Choosing Image File |
A "Image Location" window should appear, click on
the "Choose File" and navigate to where you have your
images stored. It is important to have your images already saved
in your "Images" subdirectory folder within your Directory.
Once you have located your image... |
|
Image File Window |
... from your "Images" folder, before you say "OK"
where you see the "Alternate Text Field" Give your image
a name.
Example here |
|
Image Dimensions |
| If you need to make some alterations to your image size, look
under the dimensions tab for more information. Simple click the
"Custom size option and change the vertical and horizontal
dimensions. It is important to keep the "Constrain" option
clicked so as to keep the the dimension constant about your image. |
|
Image Appearance |
|
The appearance tab allow for text alignment around your image.
Example here. |
|
Creating Image Links |
The link tab allows you to link your image to another page
either within your website or to an external link.
Example here |
|
Highlighting Text
|
To make a hyperlink on text or change text color, font, or
other options. You first have to highlight the text with your
cursor.
To create a link, follow the same instruction as linking an image.
Highlight> Click the "Link" icon, Navigate to your
internal directory for the page an existing page you wish to link
or type in the external link.
Example here |
|
Font Typefaces
|
| To use a different text than Mozilla's default text, Highlight
your text, Click on the "Format" Drop-down menu, then
"Font" then select the text you prefer. Caution to your
choices. Some text options are hard to read on some monitors as
well not all people have the same text options and may not have
access. It is best to use a common text, like Aerial, Helvetica,
and Times. |
|
Text Colors |
| Text color options are available under the "Format"
dropdown menu. |
|
| |
| In Mozilla the is a short cut to changing text and background,
there are two small colored squares. One controls text, the other
background. |
|
Formatting Text
|
| There is also a dropdown menu for changing text sizes. Simple
highlight your text and choose from these options. |
|
Picture 24.png |
| In all the text and background features, the color picker shows
the last color chosen. If you know the numerical number of the color
you wish, simply type in that number. |
|
Page Colors
|
| Again, page colors and backgrounds can be controlled through the
"Format" dropdown menu. |
|
Dark Text / Light Background |
| It is best to use high contrast values in your web design. Dark
text on a light colored background works well. |
|
Light Text / Dark Background |
| Another high contrast is to use light colored text on a dark background. |
|
San Serif Fonts Suggested |
| Depending on your design, so would prefer to see a San-serif font
like Helvetica, specially if designing light text on a dark background. |
|
Problem with Low Contrast |
| Low contrast colors don't work well. |
|
Problem of Color Vibrations |
| Colors that vibrate against one another also don't work well together. |
|
High Contrast
|
| Best to design with high contrast in mind when creating web pages |
|
Publishing |
To publish your website, go to "File" and then the
"Publish" commands.
You will need to have an account with an online service or access
to your school's server to publish pages to the world wide web. |
|
Publishing Settings
|
| You will need to have a "Username and Password to publish
to the WWW. Be sure to have the correct FTP site name and server
address to upload your pages. A teacher will have to assist you
initially with this step. |
|
| |
|
