Setting up your index page for DMAD 200 Projects - due Week 11. Grading is based on 1)design success 2)
functionality 3)completeness of all content. 4) completion by due date and 5) correct naming conventions.
1. make sure all of your folders are organized (with proper interior folders).
a.
b.
c.
d.
e.
f.
Root folder – lastname dmad200
Inside: vocab folder with css
Named anchor folder (with image folder)
Apdiv folder (w/image folder)
Rollover folder (w/image folder)
Childwindow folder (w/image folder)
2.
The index page will be the only page that is loose, outside of any folders in this main folder. This set
up should be visible in the browser window of our lab monitors without scrolling.
If you need to rework previous projects, compose them so they can fit in the browser without scrolling.
(named anchors will scroll however).
3.
INDEX page -- This page is a frameset and will be called index.html. It holds two other html pages,
“main.html” and “nav.html.” These 2 other pages can be in a folder called frameset html.
4.
SET UP: open NEW (page from sample / frameset) and choose a frameset configuration.
5.
Save the 3 pages of this frameset (index. html, nav.html, main.html) (see #3)
6. Title each page of this index .html Use the FRAMES panel located in windows to help you select the
page in the frameset you are working on.
7. DIVS will hold the content in each page of this frameset (index.html).
8. You may use background images anywhere if desired on this index page but do not make them
distracting.
8. Use my demo as an example. Main.html will hold an illustration/design & nav.html will consist of a
block based nav bar.
9. NAV PAGE: requirements: create a div the proper width. The links (a, hover, visited) are designated
as BLOCK elements in Block>display>block:. (this makes each link own the whole width of the div – you
can set the height and width as well for each block). DIVS for both pages (nav.html and main.html) should
have appropriate margin settings, placement (value, auto etc.), padding settings. NAV PAGE:
a. The block color (bg) for the links must change, the font color CAN change.
b. Use borders (any configuration - Border(s) of the block CAN change - figure out how you want to
use borders.
c. Keep font families and sizes the same so these don’t jump around when the mouse is on these
elements.
d. Nav.html should have a set width. Main.html can be elastic (%) or a set width
e. CONTENTS: chapter 1 & 2 vocab, chapter 3 vocab, chapter 4 vocab, chapter 5 vocab, chapter 6 vocab
& about images, named anchor, rollovers, child windows. (All TARGET=right (or main).
10. Main Page – should be illustrated/designed in some way which represents your “visual interest” (montage?
Illustration, text) and your name, class name and semester date). Main page contents should be in a div.