Templates and SSI

Question

http://kirtmarkle.com/slide1.html
http://kirtmarkle.com/
http://kirtmarkle.com/gallery_frameset.html
Above I have included a link to a set of 3 slides I create
this morning in an attempt to better define my site (as well as
links to my Home and Gallery pages for reference):
Slide 1: a flowchart of the “stuff” that makes up
the site:
Red items are “class 1” elements that will not
change
Green items are “class 2” elements which could
change
Blue items are “class 2” elements used for
section-specific navigation
Brown items are “class 3” elements which will
change every page
Slide 2: the elements in their current position on the site.
The white dividers with “150px” and “145px”
are used to mark the current boundaries of the frames-based layout.
Red: graphic images placed inside CSS-P elements absolutely
positioned
Green: navigation bar placed inside CSS-P element absolutely
pos.
Blue: overlapping CSS-P elements with “previous”
and “next” buttons
(typically, there are two such 5x4 grids for each Year
Category)
Slide 3: when any of the Blue CSS-P elements are clicked,
they navigate/animate to their new position above the
“Legend”, hide the other Blue CSS-P elements and reveal
the “Legend” “Viewer”
“previous” and “next” buttons. Clicking the
image inside the “Viewer” cycles through a series of
detailed/zoom views. When the Blue CSS-P element is clicked again,
it navigates/animates to its original position, hiding the
“Legend” “Viewer” “previous”
and “next” buttons while revealing the overlapping Blue
CSS-P elements again. You’ll note, however, that the button
(in this case “D2”) swaps CSS-P element
“D2” to “D2-y” to allow the return
navigation/animation, swapping back once it reaches its original
position.
TASK: create a template containing all the class 1 elements.
Question #1: What should this template be named? Would
“page.html” suffice?
Question #2: Should the Red elements be CSS-P? Would a
navigation bar work better? If so, how does one have two navigation
bars on a page? (I refer to the Green elements)
TASK: Create server-side include files containing all class 2
elements and place them on the template as needed.
Question #3: Which elements are used to build the SSI files?
How many SSI files would need to be built? For example, for the
Green navigation bar, do I create a file with only those five
elements in a table and then save it as an SSI? How are they then
placed correctly on the template (I assume inside the CCS-P
wrapper)? How does the “Gallery” button make them
appear when clicked?
TASK: Insert editable regions to cover the class 3 items,
including the section-specific navigation.
Question #4: The same question with regards to the SSI files
required for the puzzle grid. Is each grid saved as its own SSI?
(Currently, there are nine variations of this 5x4 grid, two for
each navigation bar item except 2007) Or, since each piece is in
its own CSS-P element, does each piece need to be saved as an SSI?
Do the “previous” and “next” buttons belong
in this class 2 section-specific navigation elements?
Question #5: In the “Viewer” I cycle zoom levels.
Is a separate page to be built for each zoom level, as I have
currently done?
[Of course, I realize I’m asking for a LOT of
information. I don’t know if this is beyond the scope of this
board or if I’m overstepping my bounds by asking too many
questions. However, I believe if I can have the answers it will go
a long way towards my understanding of something that seems
essential to web design. And as I hope to make this a profession
when my skills improve, I need to learn the BEST methods for
executing the work. I apply the same attitude towards my work as an
artist, animator and, yes, word processor. I desire to be just as
proficient in the field of web design and will continue to work has
hard as necessary until I achieve that goal. The assistance
I’ve received on this board has been most helpful towards
that end.]

Answer 1

I am unable to spend the kind of time this would really
require, but to
say one thing: rethink the use of Absolutely Positioned
elements. There
has been much written here on this subject which you night
want to
google. But they will be more misery than you might imagine.
As a
general rule, use Divs instead.
E. Michael Brandt
www.divaHTML.com
divaGPS : you-are-here menu highlighting
divaFAQ : FAQ pages with pizazz
www.valleywebdesigns.com
JustSo PictureWindow
JustSo PhotoAlbum
KirtMarkle wrote:
>
http://kirtmarkle.com/slide1.html
>
>
http://kirtmarkle.com/
>
>
http://kirtmarkle.com/gallery_frameset.html
>
>
> Above I have included a link to a set of 3 slides I
create this morning in an
> attempt to better define my site (as well as links to my
Home and Gallery pages
> for reference):
>
> Slide 1: a flowchart of the ?stuff? that makes up the
site:
> Red items are ?class 1? elements that will not change
> Green items are ?class 2? elements which could change
> Blue items are ?class 2? elements used for
section-specific navigation
> Brown items are ?class 3? elements which will change
every page
>
> Slide 2: the elements in their current position on the
site. The white
> dividers with ?150px? and ?145px? are used to mark the
current boundaries of
> the frames-based layout.
> Red: graphic images placed inside CSS-P elements
absolutely positioned
> Green: navigation bar placed inside CSS-P element
absolutely pos.
> Blue: overlapping CSS-P elements with ?previous? and
?next? buttons
> (typically, there are two such 5x4 grids for each Year
Category)
>
> Slide 3: when any of the Blue CSS-P elements are
clicked, they
> navigate/animate to their new position above the
?Legend?, hide the other Blue
> CSS-P elements and reveal the ?Legend? ?Viewer?
?previous? and ?next? buttons.
> Clicking the image inside the ?Viewer? cycles through a
series of detailed/zoom
> views. When the Blue CSS-P element is clicked again, it
navigates/animates to
> its original position, hiding the ?Legend? ?Viewer?
?previous? and ?next?
> buttons while revealing the overlapping Blue CSS-P
elements again. You?ll
> note, however, that the button (in this case ?D2?) swaps
CSS-P element ?D2? to
> ?D2-y? to allow the return navigation/animation,
swapping back once it reaches
> its original position.
>
> TASK: create a template containing all the class 1
elements.
>
> Question #1: What should this template be named? Would
?page.html? suffice?
>
> Question #2: Should the Red elements be CSS-P? Would a
navigation bar work
> better? If so, how does one have two navigation bars on
a page? (I refer to
> the Green elements)
>
>
> TASK: Create server-side include files containing all
class 2 elements and
> place them on the template as needed.
>
> Question #3: Which elements are used to build the SSI
files? How many SSI
> files would need to be built? For example, for the Green
navigation bar, do I
> create a file with only those five elements in a table
and then save it as an
> SSI? How are they then placed correctly on the template
(I assume inside the
> CCS-P wrapper)? How does the ?Gallery? button make them
appear when clicked?
>
>
> TASK: Insert editable regions to cover the class 3
items, including the
> section-specific navigation.
>
> Question #4: The same question with regards to the SSI
files required for the
> puzzle grid. Is each grid saved as its own SSI?
(Currently, there are nine
> variations of this 5x4 grid, two for each navigation bar
item except 2007) Or,
> since each piece is in its own CSS-P element, does each
piece need to be saved
> as an SSI? Do the ?previous? and ?next? buttons belong
in this class 2
> section-specific navigation elements?
>
> Question #5: In the ?Viewer? I cycle zoom levels. Is a
separate page to be
> built for each zoom level, as I have currently done?
>
>
> [Of course, I realize I?m asking for a LOT of
information. I don?t know if
> this is beyond the scope of this board or if I?m
overstepping my bounds by
> asking too many questions. However, I believe if I can
have the answers it
> will go a long way towards my understanding of something
that seems essential
> to web design. And as I hope to make this a profession
when my skills improve,
> I need to learn the BEST methods for executing the work.
I apply the same
> attitude towards my work as an artist, animator and,
yes, word processor. I
> desire to be just as proficient in the field of web
design and will continue to
> work has hard as necessary until I achieve that goal.
The assistance I?ve
> received on this board has been most helpful towards
that end.]
>
>