P
utting it all together. We can mix the pull quotes,drop caps and an
image with text wrap all together. Magazine style drop caps and pull
quotes can really make your page stand out against the rest. This would
really look great in a newsletter. We can also place images into the
text and then wrap our text around the image also. Just like if you
were reading a magazine or
...Wisteria
Blooming
In The
Spring Time
Is Not Only Beautiful
But Has An
Intense Aroma that fills the air...
illustrated book. We can place our
image to the
left or even
to the right of the text. We can also pace pull quotes to bring extra
attention to a particular point you are trying to emphasize.With pull
quotes you can place any additional information you really want your
readers or potential customers to focus in on. We can add
more
pull quotes if needed and certainly more images also.
We
can also use the drop cap to emphasize a new paragraph if we want to do
so. This would bring the readers attention to the fact that this may be
something important that they need to read before going on to whatever
is the next thing on their agenda. If they happen to have one.
Wisteria Racemes
You
can still add another image to the same side or to the opposite side
like this. Another image is easily added to the right side as well.
This time without the border around it. You can place borders around
any image you so desire
The text that you type here will automatically align to the left of the
image. You can type as much as you want. The more you type the better
it looks. This gives a rather cool looking page effect. Just about what
you would expect to see in a good magazine or nice newsletter. We could
also place all of this into tables to create a two, three or more
column layout. You can simply place a table into the space you want it
to appear. Then to make it keep a nice space between the table cells
set your cellspacing to something like 20 pixels and you get a nice
column effect. You should always use he WIDTH attribute in your TABLE
and TD tags. Like HEIGHT and WIDTH attributes on images, the WIDTH
attribute in tables gives browsers vital information about your page
layout and make pages at least appear to render more quickly. But
sometimes web designers get confused by what height and width really
tell a Web browser. If you set a table's HEIGHT to 500 pixels and the
WIDTH to 740 pixels, then the table will always be that size, right?
Wrong.
HEIGHT and WIDTH attributes set the minimum size of the table, not the
maximum. If the page elements are larger than the table size you've
specified, then the table will always expand to accommodate them.
Tables have to be able to stretch to fit your page content. Otherwise
browsers wouldn't be able to display your page!
This
will give you a two column effect like reading from a newspaper or
magazine. Without pulling your hair out trying to keep the tables
aligned using spacers
( )
The code for this table is in the adjoining table cell. Notice I set
the border to 0 and the cellspacing to 20. I set the cell padding to 2
but you could drop this to 0 if you want to as you already have 20
pixels separating the two columns , actually 24 if you count the 4 for
the inside walls of the two cells (2+2) |
<table
style="text-align: left; width: 837px; height: 68px;"
border="0" cellpadding="2" cellspacing="20">
<tbody>
<tr>
<td
style="vertical-align: top; text-align:
left;"></td>
<td
style="vertical-align: top; text-align: center; width:
415px;"></td>
</tr>
</tbody>
</table>
|
Code for everything except the tables follows. Including the text that would need to be removed/replaced
|