( live preview under the cut. )

- - - - -
THE CODE
<center><br/><br/><raw-code><table style="color: #111; font-family: helvetica, arial, sans-serif; font-size: 9pt; letter-spacing: 1pt;"><tr><td style="background: url(BACKGROUND IMG URL); background-position: center center; height: 140px; width: 400px;"> <div style="width: 400px; height: 160px;"><div style="width: 140px; height: 140px; text-align: left; display: inline-block;"> <div style="border: 5px solid #fff; height: 100px; width: 100px; background: url(ICON URL); border-radius: 50%; margin: 20px;"></div></div> <div style="width: 150px; height: 100px; padding: 20px 10px 0px 10px; float: left; margin-top: -140px; margin-left: 126px;"> <div style="width: 240px; height: 160px; color: #fff; font-weight: bolder; font-size: 2.4em; padding: 5px; text-align: justify;">THIS IS YOUR HEADER.</div></div></div></td><td rowspan="4" style="padding: 0 16px; vertical-align: top; width: 200px;"><a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <a href="URL" style="background: #000; color: #fff; font-size:1.8em;font-weight:bolder; padding: 2px; text-decoration: none;">LINKTEXT</a><br/> <p style="text-align:justify; font-size: 0.9em; padding: 10px 0;">SMALLTEXT BLURB GOES HERE</p></td></tr> <tr><td style="background: #fff; width: 400px; height: auto; padding: 20px 8px 0 8px; text-align:justify;"><span style="color: #000; font-size:2.0em;font-weight:bolder; padding: 2px;">HEADER TITLE HERE</span><br/><span style="color: #FF0000; font-size:1.6em;font-weight:bolder; padding: 2px;">HEADER SUBTITLE HERE</span></td></tr> <tr><td style="background: #fff; width: 400px; height: auto; padding: 20px 12px 20px 12px; text-align:justify;">MAIN TEXT GOES HERE.</td></tr> <tr><td width="400"></td></tr></table></raw-code><Br/><Br/></center>

NOTES:
— Yell in my direction if something messes up.
— This is in raw-code, which means DW's autoformatted returns (that's when you hit enter to linebreak) don't work. If you want linebreaks, just add [br/] at the end of the line (replace the brackets with the correct symbols). Do two of those for spacing.
— Edit to your heart's content, credit not required, just don't claim the code as your own.

- - - - -

( live preview under the cut. )

- - - - -

CODE FOR "MIKE"
<table style="font-family: Helvetica, Optima, Arial, sans-serif; font-size: 10pt; text-transform: uppercase;"><tr><td colspan="5" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;"><a name="top"></a>SOME TITLE</span></td></tr> <tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr> <!-- THE RED HEADER TEXT --!> <tr><td colspan="4" style="padding: 20px 0 0 0; line-height: 1.8em;"><a name="faves"></a><span style="color: #ff0000; font-size: 4em; letter-spacing: -3pt; padding: -10pt;"><a href="#top" style="text-decoration: none; color: #ff0000;">↺</a>YOUR CATEGORY</span><hr style="border: 1px solid #ff0000;" /></td></tr> <!-- WHERE YOUR CHARACTERS GO --!> <tr><td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td> <td style="text-align:center; padding:5px 0 15px 0; width:150px;"><img src="IMG URL" style="border-radius: 50%; padding: 10px 20px;"><br/>CHARACTERNAME<br/><small><b>CANON</b><br/>( <a href="http://USERNAME.dreamwidth.org/profile" style="text-decoration: none; color: #ff0000;"><b>JOURNAL</b></a> )</td></tr></table>


- - - - - - -




- - - - -

( live preview under the cut. )

- - - - -

CODE FOR "JULIE"
<raw-code><table style="font-family: Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif; text-transform: uppercase;"><tr><td colspan="4" style="text-align: center; padding: 10px; font-weight: 100;"><span style="font-size: 4em; letter-spacing: 8pt;">HEADER TITLE</span></td></tr> <!-- YOUR MENU LINKS --!> <tr><td colspan="4" style="text-align: center; padding: 20px 0 30px 0; font-weight: 100;"><span style="letter-spacing: 1pt;"><a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a> / <a href="#LINK" style="text-decoration: none; color: #353535;">LINK</a></span></td></tr> <!-- YOUR CHARACTERS COME IN AFTER THIS LINE --!> <a name="LINK"></a> <tr><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; height: 100px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ff00ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td><td style="text-align: center; padding:10px; width:100px;"><div style="width: 100px; height: 100px; align: float; position: relative; background: #ffb2ff; background-position: center; background-repeat: no-repeat; border-radius: 50%;"> <div style="width: 100px; height: 100px; background: url(IMG URL); position: relative; border-radius: 50%; opacity: 0.6;"></div></div><br/>CHARACTERNAME<br/><small><a href="URL" style="text-decoration: none; color: #353535;"><b>JOURNAL</b></a></td></TR></table></raw-code>

NOTES:
— ask if something messes up etc etc
— FOR MIKE: the refresh text icon thingie automatically links to the top of the table.
— FOR JULIE: if you want to replace the color overlay thing, ctrl+f #ff00ff and replace it with the hex code of your choice.
— [a name=""] tags are for linking within the same table/document; if you want to just link out to a different page for the top menu, just replace name with href.
— if you're linking within the table, make sure your target name and target link match! don't remove the # sign if you do. just replace the word.