|
Assignment
in Brief
1. Use
Nested Tables created in HTML or an editor
2. Add CSS to control text and layout
3. Fill in Final Presentation Form
Reading
Read the Templates section of the CD
Read this Lesson 7 page all the way through
Cleaning
up Your Code
This learning
objective is extremely important if you plan to work in the industry.
Handing off sloppy code or creating a site filled with unneeded tags
is a sign of a rank amateur.
If
you continue on to the Business of Web Design course you will be
required to create a working template which contains clean code,
which is built in a way that allows an unlimited amount of content
to be added without breaking the table structure.
If
you used ImageReady to create the rollover effects in lessons 4
and 5, this is the time to take a look at your code and see if there
are problems you can correct. I recommend you take the following
steps:
- Look
at the images created for the rollovers, and see if you can find
any images which seem to be extra. For example if you have images
called "about.gif" and then "about-over.gif", they seem to belong
and will be kept.
-
If you have images called "about_welcome.gif" or "about_welcome-over.gif"
then those images seem suspicious.
- Remove
those files into a folder called "extra images".
- Open
the HTML file created by ImageReady. Use an HTML editor like BBEdit
or HomeSite to to modify the code. Take out the code which refers
to the rollover for these extra images. This
is a more technically challenging way to create your site getting
down and dirty with the code, however some folks prefer it.
OR
- Another
option is to use Dreamweaver (or Go Live). Use the images that
ImageReady created from your slices and rebuild the site.
- After
you have tested your code on both Netscape and I.E. browsers,
you can toss the "extra images" folder.
Dreamweaver
is my chosen method for creating code. It is much cleaner and more
professional. Up until 2002, Linda Hemenway who is very adept at
working with HTML code, did her nested tables in an HTML editor
(BBEdit). Now she has switched to using Dreamweaver as well. This
is the part of my lecture (when I teach this class in the classroom)
that I compare the code for a page created in ImageReady to the
code for the same page created in Dreamweaver. The number of lines
of code is one third to one half less in Dreamweaver.
Working
with the ImageReady code can be problematic. I don't recommend jumping
into Dreamweaver (or Go Live) without a prior introduction to the
programs, as this can be like jumping into a big lake without learning
to swim first. Stay with the ImageReady code if you are not ready
to jump to Dreamweaver. If you encounter problems working with ImageReady
code, email me. This week's lesson is meant to make you aware of
the issues of working with ImageReady code and look towards learning
the tools to create more professionally coded pages.
top
Nested
Tables
When
adding HTML code to pages that require a lot of content, frequently
you will find that the text flows down as needed, but this expansion
of a table cell will "break" your table causing navigation
or other elements to space out down the page in unplanned ways.
If you have sliced up images such as a logo or photo, these images
can split apart. You may want to rethink the way you have sliced
your pages. Try not to slice up images into parts unless you have
to.
To
keep your images and navigation from breaking apart, create a table
to hold them together and place the table into the table cells of
a larger, "momma" table.
See
the CD and the Lesson 7 Examples pages for more information about
nested tables.
top
Using
HTML and Cascading Style Sheet Code
When
the pages were created by ImageReady, a cell with white or green
may have been created using an image of solid white or green. A
more efficient technique is to use HTML code to achieve this effect.
To
create a white area turn the entire page white. <BODY BGCOLOR="FFFFFF">.
Then in the table cell which you want to display as white simply
place a <BR> tag to create an empty cell.
To
create a colored cell you can simply insert this code into the table
cell code. <TD BGCOLOR="FFCCFF">. Once again insert the <BR>
tag to create an empty cell.
In
the example of the retirement home I used a dithered image to create
the non-web-safe color of green. In that case the code is <TD
BACKGROUND="images/green.gif">
When
we created the body text in Photoshop we were able to indent the
first line of text, or use leading to create more space between
lines of text. Cascading Style Sheets allow you to create this look.
In the head of the document add this code to produce a leading of
approximately 1.5 spacing
<HTML> <HEAD>
<style>
<!-- P {line-height:18px; font-size:12px,}-->
</style>
<HEAD>
In
the head of the document add this code to produce a first line indent
<HTML> <HEAD>
<style>
<!-- P {text-indent:30px; font-size:12px,}-->
</style>
<HEAD>
Whenever
the <P> tag is used the CSS code will be invoked.
These
are just a few examples of how you can use HTML code and Cascading
Style Sheets to make your pages look better and require fewer images.
Turning
in Homework
Convert
1 of the second level pages from a sliced mock up created by ImageReady
to a working template page built in Dreamweaver or with an HTML
editor. Use CSS code and nested tables as needed. The second level
pages can be from the optional or campus client
<A href="campus-final/admission.html"> second level
template</A>
<A href="campus/services.gif"> additional campus second
level example </A>
<A href="optional/campus-st-ser.jpg"> additional optional
second level example </A>
|
