10:40 a.m.
Author: admitriev
Date: 2009-03-02 11:40:50 -0500 (Mon, 02 Mar 2009)
New Revision: 12788
Added:
management/design/realWorldDemo/html/album.html
management/design/realWorldDemo/html/images/
management/design/realWorldDemo/html/images/examples/
management/design/realWorldDemo/html/images/examples/photo_200.jpg
management/design/realWorldDemo/html/images/shell/
management/design/realWorldDemo/html/images/shell/ai.gif
management/design/realWorldDemo/html/images/shell/ai.png
management/design/realWorldDemo/html/images/shell/arr_left.png
management/design/realWorldDemo/html/images/shell/arr_right.png
management/design/realWorldDemo/html/images/shell/bull_arr_down.gif
management/design/realWorldDemo/html/images/shell/bull_arr_up.gif
management/design/realWorldDemo/html/images/shell/bullet.gif
management/design/realWorldDemo/html/images/shell/footer_bg.gif
management/design/realWorldDemo/html/images/shell/frame_album_120.png
management/design/realWorldDemo/html/images/shell/frame_album_200.png
management/design/realWorldDemo/html/images/shell/frame_album_80.png
management/design/realWorldDemo/html/images/shell/frame_photo_120.png
management/design/realWorldDemo/html/images/shell/frame_photo_200.png
management/design/realWorldDemo/html/images/shell/frame_photo_80.png
management/design/realWorldDemo/html/images/shell/general_panel_bg.gif
management/design/realWorldDemo/html/images/shell/general_panel_header_bg.gif
management/design/realWorldDemo/html/images/shell/general_panelbar_bg.gif
management/design/realWorldDemo/html/images/shell/general_panelbar_bullet.gif
management/design/realWorldDemo/html/images/shell/logo_bottom.gif
management/design/realWorldDemo/html/images/shell/logo_top.gif
management/design/realWorldDemo/html/images/shell/page_bg.gif
management/design/realWorldDemo/html/images/shell/search_bg.png
management/design/realWorldDemo/html/images/shell/search_option_bg.png
management/design/realWorldDemo/html/images/shell/spacer.gif
management/design/realWorldDemo/html/images/shell/top_tight_bullet.gif
management/design/realWorldDemo/html/images/shell/tree_icon_album.png
management/design/realWorldDemo/html/images/shell/tree_icon_minus.png
management/design/realWorldDemo/html/images/shell/tree_icon_plus.png
management/design/realWorldDemo/html/images/shell/tree_icon_shelf.png
management/design/realWorldDemo/html/images/shell/tree_icon_slid.png
management/design/realWorldDemo/html/photo.html
management/design/realWorldDemo/html/shelf.html
Log:
Added: management/design/realWorldDemo/html/album.html
===================================================================
--- management/design/realWorldDemo/html/album.html (rev 0)
+++ management/design/realWorldDemo/html/album.html 2009-03-02 16:40:50 UTC (rev 12788)
@@ -0,0 +1,656 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+
+<html>
+<head>
+ <title>Untitled</title>
+ <link rel="STYLESHEET" type="text/css"
href="common.css">
+</head>
+<style>
+ *{font-family : verdana; font-size : 11px}
+ body {margin : 0px; background : url(images/shell/page_bg.gif) repeat-x #D7D7D7; height
: 100%}
+ h1{font-size : 175%; font-weight : normal; margin : 0px;}
+ .top_part {height : 116px;}
+ .header_box {height : 79px; position : relative;}
+ .auth_box {position : absolute; font-weight : bold; color : #ffffff; right : 8px; top :
42px}
+ .auth_data {vertical-align : top; padding : 0px 8px 0px 15px; font-weight : bold; color
: #ffffff;}
+ .auth_data span {color : #FF7200;}
+ .about_toolbar {position : absolute; right : 8px; top : 12px;}
+ .about_toolbar_item {vertical-align : top; padding : 0px 8px 0px 15px;}
+ .about_toolbar_item a{font-size : 11px; color : #ffffff; text-decoration : none;}
+ .about_toolbar_item a:hover{font-size : 11px; color : #ffffff; text-decoration :
underline;}
+
+ .content_box {padding : 15px 35px 15px 35px;}
+ .content_box p {margin : 0px 0px 5px 0px; FONT-SIZE : 12PX}
+
+ a{color : #DF6400;}
+
+
+ .preview_box_album_80 {width : 100px; height : 100px; position : relative; float : left;
margin : 0px 10px 20px 0px;}
+ .preview_box_album_80 img.pr_album_bg {width : 100px; height : 100px; position :
absolute;}
+ .preview_box_album_80 table{position : relative; width : 100px; height : 100px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_80 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_album_120 {width : 140px; height : 140px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_album_120 img.pr_album_bg {width : 140px; height : 140px; position :
absolute;}
+ .preview_box_album_120 table{position : relative; width : 140px; height : 140px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_120 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_album_160 {width : 180px; height : 180px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_album_160 img.pr_album_bg {width : 180px; height : 180px; position :
absolute;}
+ .preview_box_album_160 table{position : relative; width : 180px; height : 180px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_160 table img{margin: 0px 0px 1px 1px; border : 1px solid #FFFFFF;}
+
+
+
+ .preview_box_photo_80 {width : 100px; height : 100px; position : relative; float : left;
margin : 0px 10px 20px 0px;}
+ .preview_box_photo_80 img.pr_photo_bg {width : 100px; height : 100px; position :
absolute;}
+ .preview_box_photo_80 table{position : relative; width : 100px; height : 100px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_80 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_photo_120 {width : 140px; height : 140px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_photo_120 img.pr_photo_bg {width : 140px; height : 140px; position :
absolute;}
+ .preview_box_photo_120 table{position : relative; width : 140px; height : 140px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_120 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_photo_160 {width : 180px; height : 180px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_photo_160 img.pr_photo_bg {width : 180px; height : 180px; position :
absolute;}
+ .preview_box_photo_160 table{position : relative; width : 180px; height : 180px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_160 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+
+
+
+</style>
+
+<body>
+
+<table cellpadding="0" cellspacing="0" border="0"
width="100%" height="100%">
+ <tr>
+ <td colspan="2">
+ <div class="top_part">
+ <div class="header_box">
+ <a href="#"><img src="images/shell/logo_top.gif"
width="290" height="79" alt="" border="0"
style="position : absolute;"></a>
+ <div class="auth_box">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td class="auth_data">
+ Welcome, <span>Jhon Smith</span>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+
+ <div class="about_toolbar">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td class="about_toolbar_item">
+ <a href="#">User guide</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">F.A.Q.</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">About Demo at JBossWiki</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">About Demo at JBossForum</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ <div style="height : 37px; position : relative; background :
url(images/shell/general_panelbar_bg.gif) repeat-x #A84807; padding-left : 15px;
">
+ <table height="37px" cellpadding="0"
cellspacing="0" border="0">
+ <tr>
+
+ <td valign="middle">
+ <img src="images/shell/general_panelbar_bullet.gif"
width="11" height="15" alt=""
border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 11px 25px 0px 8px">
+ <a href="#" style="font-size : 11px; font-weight : bold; color
: #ffffff; text-decoration : none;">My Album</a>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td height="100%" valign="top">
+ <div style="background : url(images/shell/general_panel_bg.gif) right top
repeat-y; height : 100%;">
+ <div style="height : 15px; background :
url(images/shell/general_panel_header_bg.gif) right top; font-size : 1px;">
+ <img src="images/shell/spacer.gif" width="300"
height="1" alt="" border="0">
+ </div>
+
+ <div style="padding : 15px 35px 15px 15px;">
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_minus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name :: <a href="#"><strong>7</strong>
new</a>
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ <strong>Album name</strong>
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+
+
+ </div>
+
+ </div>
+ </td>
+ <td height="100%" width="100%" valign="top"">
+ <div style="background : url(images/shell/general_panel_bg.gif) right top
repeat-y; height : 100%;">
+ <div style="height : 15px; background :
url(images/shell/general_panel_header_bg.gif) right top; font-size : 1px;">
+
+ </div>
+ <div class="content_box">
+
+ <table style="border-collapse : collapse; margin-bottom : 15px"
cellpadding="0">
+ <tr>
+ <td>
+ <h1 style="margin-bottom : 4px">Album name (0-50 symb; first
cann't be SPACE symb)</h1>
+ <span style="color : #666666">Created <strong>29 Jan
2009</strong>, contain <strong>200</strong> pics, <a
href="#"><strong>7</strong> new</a></span>
+ </td>
+ <td style=" padding : 8px 0px 0px 20px; vertical-align : top; white-space
: nowrap">
+ <a href="#">Edit</a>
+ <a href="#">Delete</a>
+ </td>
+ </tr>
+ </table>
+
+ <p> This is a "Album name..." description.
+
+ <div style="margin : 30px 0px 0px 0px;">
+ <div style="float : right"
onclick="window.location.href='#'" style="cursor :
pointer">
+ <img src="images/shell/tree_icon_slid.png" width="27"
height="16" alt="" border="0" style="vertical-align :
bottom; margin-right : 5px">Slideshow
+ </div>
+ <div>
+ Preview size: inputNumberSlider
+ </div>
+ </div>
+ <br><br>
+
+ <div class="preview_box_album_80">
+ <img class="pr_album_bg"
src="images/shell/frame_album_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="80"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_photo_80">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="60"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+
+
+ <div style="width : 90%; height : 10px; float :
left;"> <div>
+
+
+ </div>
+
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <div style="height : 82px; position : relative; background :
url(images/shell/footer_bg.gif) repeat-x #000000;">
+ <img src="images/shell/logo_bottom.gif" width="160"
height="55" alt="" border="0" style="position :
absolute; right : 0px; top : 27px">
+ <div style="position : absolute; left : 8px; top : 51px">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 0px 15px 0px 8px">
+ <a href="#" style="font-size : 11px; color : #ffffff;
text-decoration : none;"> Terms And Conditions</a>
+ </td>
+
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 0px 15px 0px 8px">
+ <a href="#" style="font-size : 11px; color : #ffffff;
text-decoration : none;">Privacy Statement</a>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ </td>
+ </tr>
+</table>
+
+<form style="margin : 0px">
+ <div style="height : 65px; width: 339px; position : absolute; top : 64px; right
: 0px; margin-right : 0px;">
+ <img src="images/shell/search_bg.png" width="339"
height="65" alt="" border="0" style="position :
absolute; top : 0px; left: 0px">
+ <div style="position : absolute; color : #FFFFFF; font-weight : bold; top :
22px; left : 20px">
+ Search
+ </div>
+ <div style="position : absolute; color : #FFFFFF; font-weight : bold; top :
21px; left : 277px">
+ Find
+ </div>
+ <input type="Text" style="width : 176px; height : 17px; border : 0px;
position : absolute; top : 20px; left : 73px; background : none; font-weight :
bold;">
+ <input type="Image" src="images/shell/spacer.gif"
border="0" style="width : 61px; height : 18px; position : absolute; top :
20px; left : 261px;">
+ <div style="position : absolute; top : 41px; left : 197px">
+ <a href="#" style="color : #FFFFFF; text-decoration :
none">Options <img src="images/shell/bull_arr_down.gif"
width="7" height="7" alt="" border="0">
</a>
+ </div>
+ </div>
+ <div style="height : 90px; width: 327px; position : absolute; top : 107px; right
: 5px; background : none; display : !none; overflow : hidden;">
+ <img src="images/shell/search_option_bg.png" width="327"
height="153" alt="" border="0" style="position :
absolute; bottom : 0px; left: 0px">
+ <div style="position : absolute; color : white; top : 7px; left :
45px">
+ in <input type="checkbox">in My
Album <input type="checkbox">in Shared
Albums
+ </div>
+ <div style="position : absolute; color : white; top : 32px; padding-top : 3px;
left : 38px; border-top : 1px solid #383838">
+ for <input type="checkbox">Tags <input
type="checkbox">Photos <input
type="checkbox">Albums <input
type="checkbox">Users
+ </div>
+ <div style="position : absolute; top : 70px; left : 163px">
+ <a href="#" style="color : #FFFFFF; text-decoration :
none">Hide options <img src="images/shell/bull_arr_up.gif"
width="7" height="7" alt="" border="0">
</a>
+ </div>
+ </div>
+</form>
+
+<div style="height : 52px; width: 79px; position : absolute; top : 0px; left :
278px; visibility : vidden;">
+ <img src="images/shell/ai.png" width="52" height="79"
alt="" border="0" style="position : absolute; top : 0px; left:
0px">
+ <img src="images/shell/ai.gif" width="26" height="26"
alt="" border="0" style="position : absolute; top : 26px; left:
13px">
+</div>
+</body>
+</html>
Added: management/design/realWorldDemo/html/images/examples/photo_200.jpg
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/examples/photo_200.jpg
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/ai.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/ai.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/ai.png
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/ai.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/arr_left.png
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/arr_left.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/arr_right.png
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/arr_right.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/bull_arr_down.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/bull_arr_down.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/bull_arr_up.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/bull_arr_up.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/bullet.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/bullet.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/footer_bg.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/footer_bg.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/frame_album_120.png
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/frame_album_120.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/frame_album_200.png
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/frame_album_200.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/frame_album_80.png
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/frame_album_80.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/frame_photo_120.png
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/frame_photo_120.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/frame_photo_200.png
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/frame_photo_200.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/frame_photo_80.png
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/frame_photo_80.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/general_panel_bg.gif
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/general_panel_bg.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/general_panel_header_bg.gif
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/general_panel_header_bg.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/general_panelbar_bg.gif
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/general_panelbar_bg.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/general_panelbar_bullet.gif
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/general_panelbar_bullet.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/logo_bottom.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/logo_bottom.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/logo_top.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/logo_top.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/page_bg.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/page_bg.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/search_bg.png
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/search_bg.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/search_option_bg.png
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/search_option_bg.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/spacer.gif
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/spacer.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/top_tight_bullet.gif
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/top_tight_bullet.gif
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/tree_icon_album.png
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/tree_icon_album.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/tree_icon_minus.png
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/tree_icon_minus.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/tree_icon_plus.png
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/tree_icon_plus.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/tree_icon_shelf.png
===================================================================
(Binary files differ)
Property changes on:
management/design/realWorldDemo/html/images/shell/tree_icon_shelf.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/images/shell/tree_icon_slid.png
===================================================================
(Binary files differ)
Property changes on: management/design/realWorldDemo/html/images/shell/tree_icon_slid.png
___________________________________________________________________
Name: svn:mime-type
+ application/octet-stream
Added: management/design/realWorldDemo/html/photo.html
===================================================================
--- management/design/realWorldDemo/html/photo.html (rev 0)
+++ management/design/realWorldDemo/html/photo.html 2009-03-02 16:40:50 UTC (rev 12788)
@@ -0,0 +1,698 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+
+<html>
+<head>
+ <title>Untitled</title>
+ <link rel="STYLESHEET" type="text/css"
href="common.css">
+</head>
+<style>
+ *{font-family : verdana; font-size : 11px}
+ body {margin : 0px; background : url(images/shell/page_bg.gif) repeat-x #D7D7D7; height
: 100%}
+ h1{font-size : 175%; font-weight : normal; margin : 0px;}
+ .top_part {height : 116px;}
+ .header_box {height : 79px; position : relative;}
+ .auth_box {position : absolute; font-weight : bold; color : #ffffff; right : 8px; top :
42px}
+ .auth_data {vertical-align : top; padding : 0px 8px 0px 15px; font-weight : bold; color
: #ffffff;}
+ .auth_data span {color : #FF7200;}
+ .about_toolbar {position : absolute; right : 8px; top : 12px;}
+ .about_toolbar_item {vertical-align : top; padding : 0px 8px 0px 15px;}
+ .about_toolbar_item a{font-size : 11px; color : #ffffff; text-decoration : none;}
+ .about_toolbar_item a:hover{font-size : 11px; color : #ffffff; text-decoration :
underline;}
+
+ .content_box {padding : 15px 35px 45px 35px;}
+ .content_box p {margin : 0px 0px 5px 0px; FONT-SIZE : 12PX}
+
+ a{color : #DF6400;}
+
+
+ .preview_box_album_80 {width : 100px; height : 100px; position : relative; float : left;
margin : 0px 10px 20px 0px;}
+ .preview_box_album_80 img.pr_album_bg {width : 100px; height : 100px; position :
absolute;}
+ .preview_box_album_80 table{position : relative; width : 100px; height : 100px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_80 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_album_120 {width : 140px; height : 140px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_album_120 img.pr_album_bg {width : 140px; height : 140px; position :
absolute;}
+ .preview_box_album_120 table{position : relative; width : 140px; height : 140px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_120 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_album_160 {width : 180px; height : 180px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_album_160 img.pr_album_bg {width : 180px; height : 180px; position :
absolute;}
+ .preview_box_album_160 table{position : relative; width : 180px; height : 180px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_160 table img{margin: 0px 0px 1px 1px; border : 1px solid #FFFFFF;}
+
+
+
+ .preview_box_photo_80 {width : 100px; height : 100px; position : relative; float : left;
margin : 0px 10px 20px 0px;}
+ .preview_box_photo_80 img.pr_photo_bg {width : 100px; height : 100px; position :
absolute;}
+ .preview_box_photo_80 table{position : relative; width : 100px; height : 100px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_80 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_photo_120 {width : 140px; height : 140px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_photo_120 img.pr_photo_bg {width : 140px; height : 140px; position :
absolute;}
+ .preview_box_photo_120 table{position : relative; width : 140px; height : 140px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_120 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_photo_160 {width : 180px; height : 180px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_photo_160 img.pr_photo_bg {width : 180px; height : 180px; position :
absolute;}
+ .preview_box_photo_160 table{position : relative; width : 180px; height : 180px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_160 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_photo_nav {width : 50px; height : 50px; position : relative; float : left;
margin : 0px 2px 0px 0px;}
+ .preview_box_photo_nav img.pr_photo_bg {width : 50px; height : 50px; position :
absolute;}
+ .preview_box_photo_nav table{position : relative; width : 50px; height : 50px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_nav table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+ .preview_box_photo_nav table img.sel{margin: 0px 0px 0px 0px; border : 3px solid
#DF6400;}
+
+
+
+
+</style>
+
+<body>
+
+<table cellpadding="0" cellspacing="0" border="0"
width="100%" height="100%">
+ <tr>
+ <td colspan="2">
+ <div class="top_part">
+ <div class="header_box">
+ <a href="#"><img src="images/shell/logo_top.gif"
width="290" height="79" alt="" border="0"
style="position : absolute;"></a>
+ <div class="auth_box">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td class="auth_data">
+ Welcome, <span>Jhon Smith</span>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+
+ <div class="about_toolbar">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td class="about_toolbar_item">
+ <a href="#">User guide</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">F.A.Q.</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">About Demo at JBossWiki</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">About Demo at JBossForum</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ <div style="height : 37px; position : relative; background :
url(images/shell/general_panelbar_bg.gif) repeat-x #A84807; padding-left : 15px;
">
+ <table height="37px" cellpadding="0"
cellspacing="0" border="0">
+ <tr>
+
+ <td valign="middle">
+ <img src="images/shell/general_panelbar_bullet.gif"
width="11" height="15" alt=""
border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 11px 25px 0px 8px">
+ <a href="#" style="font-size : 11px; font-weight : bold; color
: #ffffff; text-decoration : none;">My Album</a>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td height="100%" valign="top">
+ <div style="background : url(images/shell/general_panel_bg.gif) right top
repeat-y; height : 100%;">
+ <div style="height : 15px; background :
url(images/shell/general_panel_header_bg.gif) right top; font-size : 1px;">
+ <img src="images/shell/spacer.gif" width="300"
height="1" alt="" border="0">
+ </div>
+
+ <div style="padding : 15px 35px 15px 15px;">
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_minus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ <strong>Shelf name</strong> :: <a
href="#"><strong>7</strong> new</a>
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+
+
+ </div>
+
+ </div>
+ </td>
+ <td height="100%" width="100%" valign="top"">
+ <div style="background : url(images/shell/general_panel_bg.gif) right top
repeat-y; height : 100%;">
+ <div style="height : 15px; background :
url(images/shell/general_panel_header_bg.gif) right top; font-size : 1px;">
+
+ </div>
+ <div class="content_box">
+
+ <table style="border-collapse : collapse; margin-bottom : 15px"
cellpadding="0">
+ <tr>
+ <td>
+ <h1 style="margin-bottom : 4px">Photo name (0-50 symb; first
cann't be SPACE symb)</h1>
+ <span style="color : #666666">Album «Album
name»</span>
+ </td>
+ <td style=" padding : 8px 0px 0px 20px; vertical-align : top; white-space
: nowrap">
+ </td>
+ </tr>
+ </table>
+
+ <p> This is a "Photo name..." description.
+
+
+ <div style="margin : 30px 0px 0px 0px; background : #f1f1f1; padding : 3px
4px 53px 2px;">
+ <div style="float : right"
onclick="window.location.href='#'" style="cursor :
pointer">
+ <img src="images/shell/tree_icon_slid.png" width="27"
height="16" alt="" border="0" style="vertical-align :
bottom; margin-right : 5px">Slideshow
+ </div>
+
+ <div>
+ <a href="#"><img src="images/shell/arr_left.png"
width="16" height="50" alt="" border="0"
style="float : left; margin-right : 4px"></a>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0" class="sel"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <div class="preview_box_photo_nav">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ <a href="#"><img src="images/shell/arr_right.png"
width="16" height="50" alt="" border="0"
style="float : left"></a>
+ </div>
+ </div>
+ <br clear="all">
+ <div style="padding-top : 10px;">
+ <table cellpadding="0" style="border-collapse : collapse;
margin-bottom : 5px">
+ <tr>
+ <td style="padding-right : 10px" rowspan="2">
+ <img src="images/examples/photo_200.jpg" width="600"
height="400" alt="" border="0" style="border : 2px
solid #FFFFFF;">
+ </td>
+ <td valign="top">
+ <div style="margin : 0px 0px 0px 0px; background : #f1f1f1; padding :
3px 4px 4px 4px;">
+ <a href="#">Original size</a>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td valign="bottom" style="padding-bottom : 5px">
+ <div style="margin : 0px 0px 0px 0px; background : #f1f1f1; padding :
3px 4px 4px 4px;">
+ <a href="#">Edit</a>
+ </div>
+
+ <div style="margin : 3px 0px 0px 0px; background : #f1f1f1; padding :
3px 4px 4px 4px;">
+ <a href="#">Delete</a>
+ </div>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <span style="color : #666666">Captured:</span> Samsung
T1000<br>
+ <span style="color : #666666">Uploaded:</span> 1 november
2008<br>
+ <span style="color : #666666">Author:</span> <a
href="#">Author Name</a>
+ <br><br>
+
+
+
+ <div style="margin-top : 20px">
+ <strong>Tags:</strong> <a
href="#">breathtaking</a>, <a
href="#">bright</a>, <a href="#">clouds</a>,
<a href="#">cloudy</a>, <a href="#">day</a>,
<a href="#">grass</a>, <a href="#">lens
flare</a>, <a href="#">low angle</a>, <a
href="#">view</a>, <a href="#">nature</a>,
<a href="#">nobody</a>, <a
href="#">outdoor</a>, <a href="#">peaceful</a>,
<a href="#">picturesque</a>, <a
href="#">serenity</a>, <a href="#">sky</a>,
<a href="#">sunny</a>, <a href="#">sun</a>,
<a href="#">sunshine</a>
+ </div>
+
+ <div style="margin-top : 30px">
+ <strong>Comments:</strong>
+ <br><br>
+
+ <table style="border-collapse : collapse; margin-bottom : 20px"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <div class="preview_box_photo_nav" style="margin-right :
5px">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </td>
+ <td width="100%" valign="top">
+
+ <div style="margin : 1px 0px 7px 0px; background : #f1f1f1; padding :
3px 4px 4px 4px;">
+ <div style="float : right"
onclick="window.location.href='#'" style="cursor :
pointer">
+ <a href="#">Delete comment</a>
+ </div>
+ <div>
+ <strong>Username</strong> <span
style="color : #666666">1 Dec 2008</span>
+ </div>
+ </div>
+ <div style="margin : 0px 0px 10px 0px; padding : 0px 4px 0px
4px;">
+ Comment
+ </div>
+
+ </td>
+ </tr>
+ </table>
+
+ <table style="border-collapse : collapse; margin-bottom : 20px"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <div class="preview_box_photo_nav" style="margin-right :
5px">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </td>
+ <td width="100%" valign="top">
+
+ <div style="margin : 1px 0px 7px 0px; background : #f1f1f1; padding :
3px 4px 4px 4px;">
+ <div style="float : right"
onclick="window.location.href='#'" style="cursor :
pointer">
+ <a href="#">Delete comment</a>
+ </div>
+ <div>
+ <strong>Username</strong> <span
style="color : #666666">1 Dec 2008</span>
+ </div>
+ </div>
+ <div style="margin : 0px 0px 10px 0px; padding : 0px 4px 0px
4px;">
+ Comment
+ </div>
+
+ </td>
+ </tr>
+ </table>
+
+ <table style="border-collapse : collapse; margin-bottom : 20px"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <div class="preview_box_photo_nav" style="margin-right :
5px">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </td>
+ <td width="100%" valign="top">
+
+ <div style="margin : 1px 0px 7px 0px; background : #f1f1f1; padding :
3px 4px 4px 4px;">
+ <div style="float : right"
onclick="window.location.href='#'" style="cursor :
pointer">
+ <a href="#">Delete comment</a>
+ </div>
+ <div>
+ <strong>Username</strong> <span
style="color : #666666">1 Dec 2008</span>
+ </div>
+ </div>
+ <div style="margin : 0px 0px 10px 0px; padding : 0px 4px 0px
4px;">
+ Comment
+ </div>
+
+ </td>
+ </tr>
+ </table>
+
+ <table style="border-collapse : collapse; margin-bottom : 20px"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <div class="preview_box_photo_nav" style="margin-right :
5px">
+ <img class="pr_photo_bg"
src="images/shell/frame_photo_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="40" height="40"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+ </td>
+ <td width="100%" valign="top">
+
+ <div style="margin : 1px 0px 7px 0px; background : #f1f1f1; padding :
3px 4px 4px 4px;">
+ <div style="float : right"
onclick="window.location.href='#'" style="cursor :
pointer">
+ <a href="#">Delete comment</a>
+ </div>
+ <div>
+ <strong>Username</strong> <span
style="color : #666666">1 Dec 2008</span>
+ </div>
+ </div>
+ <div style="margin : 0px 0px 10px 0px; padding : 0px 4px 0px
4px;">
+ Comment
+ </div>
+
+ </td>
+ </tr>
+ </table>
+
+ <a href="#">Add comment</a>
+ </div>
+
+ </div>
+
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <div style="height : 82px; position : relative; background :
url(images/shell/footer_bg.gif) repeat-x #000000;">
+ <img src="images/shell/logo_bottom.gif" width="160"
height="55" alt="" border="0" style="position :
absolute; right : 0px; top : 27px">
+ <div style="position : absolute; left : 8px; top : 51px">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 0px 15px 0px 8px">
+ <a href="#" style="font-size : 11px; color : #ffffff;
text-decoration : none;"> Terms And Conditions</a>
+ </td>
+
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 0px 15px 0px 8px">
+ <a href="#" style="font-size : 11px; color : #ffffff;
text-decoration : none;">Privacy Statement</a>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ </td>
+ </tr>
+</table>
+
+<form style="margin : 0px">
+ <div style="height : 65px; width: 339px; position : absolute; top : 64px; right
: 0px; margin-right : 0px;">
+ <img src="images/shell/search_bg.png" width="339"
height="65" alt="" border="0" style="position :
absolute; top : 0px; left: 0px">
+ <div style="position : absolute; color : #FFFFFF; font-weight : bold; top :
22px; left : 20px">
+ Search
+ </div>
+ <div style="position : absolute; color : #FFFFFF; font-weight : bold; top :
21px; left : 277px">
+ Find
+ </div>
+ <input type="Text" style="width : 176px; height : 17px; border : 0px;
position : absolute; top : 20px; left : 73px; background : none; font-weight :
bold;">
+ <input type="Image" src="images/shell/spacer.gif"
border="0" style="width : 61px; height : 18px; position : absolute; top :
20px; left : 261px;">
+ <div style="position : absolute; top : 41px; left : 197px">
+ <a href="#" style="color : #FFFFFF; text-decoration :
none">Options <img src="images/shell/bull_arr_down.gif"
width="7" height="7" alt="" border="0">
</a>
+ </div>
+ </div>
+ <div style="height : 90px; width: 327px; position : absolute; top : 107px; right
: 5px; background : none; display : none; overflow : hidden;">
+ <img src="images/shell/search_option_bg.png" width="327"
height="153" alt="" border="0" style="position :
absolute; bottom : 0px; left: 0px">
+ <div style="position : absolute; color : white; top : 7px; left :
45px">
+ in <input type="checkbox">in My
Album <input type="checkbox">in Shared
Albums
+ </div>
+ <div style="position : absolute; color : white; top : 32px; padding-top : 3px;
left : 38px; border-top : 1px solid #383838">
+ for <input type="checkbox">Tags <input
type="checkbox">Photos <input
type="checkbox">Albums <input
type="checkbox">Users
+ </div>
+ <div style="position : absolute; top : 70px; left : 163px">
+ <a href="#" style="color : #FFFFFF; text-decoration :
none">Hide options <img src="images/shell/bull_arr_up.gif"
width="7" height="7" alt="" border="0">
</a>
+ </div>
+ </div>
+</form>
+
+<div style="height : 52px; width: 79px; position : absolute; top : 0px; left :
278px; visibility : vidden;">
+ <img src="images/shell/ai.png" width="52" height="79"
alt="" border="0" style="position : absolute; top : 0px; left:
0px">
+ <img src="images/shell/ai.gif" width="26" height="26"
alt="" border="0" style="position : absolute; top : 26px; left:
13px">
+</div>
+</body>
+</html>
Added: management/design/realWorldDemo/html/shelf.html
===================================================================
--- management/design/realWorldDemo/html/shelf.html (rev 0)
+++ management/design/realWorldDemo/html/shelf.html 2009-03-02 16:40:50 UTC (rev 12788)
@@ -0,0 +1,476 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+
+<html>
+<head>
+ <title>Untitled</title>
+ <link rel="STYLESHEET" type="text/css"
href="common.css">
+</head>
+<style>
+ *{font-family : verdana; font-size : 11px}
+ body {margin : 0px; background : url(images/shell/page_bg.gif) repeat-x #D7D7D7; height
: 100%}
+ h1{font-size : 175%; font-weight : normal; margin : 0px;}
+ .top_part {height : 116px;}
+ .header_box {height : 79px; position : relative;}
+ .auth_box {position : absolute; font-weight : bold; color : #ffffff; right : 8px; top :
42px}
+ .auth_data {vertical-align : top; padding : 0px 8px 0px 15px; font-weight : bold; color
: #ffffff;}
+ .auth_data span {color : #FF7200;}
+ .about_toolbar {position : absolute; right : 8px; top : 12px;}
+ .about_toolbar_item {vertical-align : top; padding : 0px 8px 0px 15px;}
+ .about_toolbar_item a{font-size : 11px; color : #ffffff; text-decoration : none;}
+ .about_toolbar_item a:hover{font-size : 11px; color : #ffffff; text-decoration :
underline;}
+
+ .content_box {padding : 15px 35px 15px 35px;}
+ .content_box p {margin : 0px 0px 5px 0px; FONT-SIZE : 12PX}
+
+ a{color : #DF6400;}
+
+
+ .preview_box_album_80 {width : 100px; height : 100px; position : relative; float : left;
margin : 0px 10px 20px 0px;}
+ .preview_box_album_80 img.pr_album_bg {width : 100px; height : 100px; position :
absolute;}
+ .preview_box_album_80 table{position : relative; width : 100px; height : 100px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_80 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_album_120 {width : 140px; height : 140px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_album_120 img.pr_album_bg {width : 140px; height : 140px; position :
absolute;}
+ .preview_box_album_120 table{position : relative; width : 140px; height : 140px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_120 table img{margin: 0px 0px 2px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_album_160 {width : 180px; height : 180px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_album_160 img.pr_album_bg {width : 180px; height : 180px; position :
absolute;}
+ .preview_box_album_160 table{position : relative; width : 180px; height : 180px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_album_160 table img{margin: 0px 0px 1px 1px; border : 1px solid #FFFFFF;}
+
+
+
+ .preview_box_photo_80 {width : 100px; height : 100px; position : relative; float : left;
margin : 0px 10px 20px 0px;}
+ .preview_box_photo_80 img.pr_photo_bg {width : 100px; height : 100px; position :
absolute;}
+ .preview_box_photo_80 table{position : relative; width : 100px; height : 100px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_80 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_photo_120 {width : 140px; height : 140px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_photo_120 img.pr_photo_bg {width : 140px; height : 140px; position :
absolute;}
+ .preview_box_photo_120 table{position : relative; width : 140px; height : 140px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_120 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+ .preview_box_photo_160 {width : 180px; height : 180px; position : relative; float :
left; margin : 0px 10px 20px 0px;}
+ .preview_box_photo_160 img.pr_photo_bg {width : 180px; height : 180px; position :
absolute;}
+ .preview_box_photo_160 table{position : relative; width : 180px; height : 180px;
text-align : center; vertical-align : middle; border-collapse : collapse;}
+ .preview_box_photo_160 table img{margin: 0px 0px 0px 0px; border : 1px solid #FFFFFF;}
+
+
+
+
+</style>
+
+<body>
+
+<table cellpadding="0" cellspacing="0" border="0"
width="100%" height="100%">
+ <tr>
+ <td colspan="2">
+ <div class="top_part">
+ <div class="header_box">
+ <a href="#"><img src="images/shell/logo_top.gif"
width="290" height="79" alt="" border="0"
style="position : absolute;"></a>
+ <div class="auth_box">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td class="auth_data">
+ Welcome, <span>Jhon Smith</span>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+
+ <div class="about_toolbar">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td class="about_toolbar_item">
+ <a href="#">User guide</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">F.A.Q.</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">About Demo at JBossWiki</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ <td class="about_toolbar_item">
+ <a href="#">About Demo at JBossForum</a>
+ </td>
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ <div style="height : 37px; position : relative; background :
url(images/shell/general_panelbar_bg.gif) repeat-x #A84807; padding-left : 15px;
">
+ <table height="37px" cellpadding="0"
cellspacing="0" border="0">
+ <tr>
+
+ <td valign="middle">
+ <img src="images/shell/general_panelbar_bullet.gif"
width="11" height="15" alt=""
border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 11px 25px 0px 8px">
+ <a href="#" style="font-size : 11px; font-weight : bold; color
: #ffffff; text-decoration : none;">My Album</a>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td height="100%" valign="top">
+ <div style="background : url(images/shell/general_panel_bg.gif) right top
repeat-y; height : 100%;">
+ <div style="height : 15px; background :
url(images/shell/general_panel_header_bg.gif) right top; font-size : 1px;">
+ <img src="images/shell/spacer.gif" width="300"
height="1" alt="" border="0">
+ </div>
+
+ <div style="padding : 15px 35px 15px 15px;">
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_minus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ <strong>Shelf name</strong> :: <a
href="#"><strong>7</strong> new</a>
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/spacer.gif" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_album.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Album name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+ <table style="border-collapse : collapse; margin-bottom : 5px;"
cellpadding="0">
+ <tr>
+ <td valign="top">
+ <img src="images/shell/tree_icon_plus.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top">
+ <img src="images/shell/tree_icon_shelf.png" width="25"
height="16" alt="" border="0"><br>
+ </td>
+ <td valign="top" style="padding-left : 4px">
+ Shelf name
+ </td>
+ </tr>
+ </table>
+
+
+ </div>
+
+ </div>
+ </td>
+ <td height="100%" width="100%" valign="top"">
+ <div style="background : url(images/shell/general_panel_bg.gif) right top
repeat-y; height : 100%;">
+ <div style="height : 15px; background :
url(images/shell/general_panel_header_bg.gif) right top; font-size : 1px;">
+
+ </div>
+ <div class="content_box">
+
+ <table style="border-collapse : collapse; margin-bottom : 15px"
cellpadding="0">
+ <tr>
+ <td>
+ <h1 style="margin-bottom : 4px">Shelf name (0-50 symb; first
cann't be SPACE symb)</h1>
+ <span style="color : #666666">Created <strong>29 Jan
2009</strong>, contain <strong>200</strong> pics into
<strong>10</strong> albums, <a
href="#"><strong>7</strong> new</a> pics</span>
+ </td>
+ <td style=" padding : 8px 0px 0px 20px; vertical-align : top; white-space
: nowrap">
+ <a href="#">Edit</a>
+ <a href="#">Delete</a>
+ </td>
+ </tr>
+ </table>
+
+ <p> This is a "Album name..." description.
+
+ <div style="margin : 30px 0px 0px 0px;">
+ <div>
+ Preview size: inputNumberSlider
+ </div>
+ </div>
+ <br><br>
+
+ <div class="preview_box_album_80">
+ <img class="pr_album_bg"
src="images/shell/frame_album_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="80"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_album_80">
+ <img class="pr_album_bg"
src="images/shell/frame_album_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="80"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_album_80">
+ <img class="pr_album_bg"
src="images/shell/frame_album_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="80"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_album_80">
+ <img class="pr_album_bg"
src="images/shell/frame_album_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="80"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="preview_box_album_80">
+ <img class="pr_album_bg"
src="images/shell/frame_album_200.png" border="0">
+ <table cellpadding="0">
+ <tr>
+ <td>
+ <a href="#"><img
src="images/examples/photo_200.jpg" width="80" height="80"
alt="" border="0"></a><br>
+ </td>
+ </tr>
+ </table>
+ </div>
+
+
+ <div style="width : 90%; height : 10px; float :
left;"> <div>
+
+
+ </div>
+
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td colspan="2">
+ <div style="height : 82px; position : relative; background :
url(images/shell/footer_bg.gif) repeat-x #000000;">
+ <img src="images/shell/logo_bottom.gif" width="160"
height="55" alt="" border="0" style="position :
absolute; right : 0px; top : 27px">
+ <div style="position : absolute; left : 8px; top : 51px">
+ <table cellpadding="0" cellspacing="0"
border="0">
+ <tr>
+
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 0px 15px 0px 8px">
+ <a href="#" style="font-size : 11px; color : #ffffff;
text-decoration : none;"> Terms And Conditions</a>
+ </td>
+
+ <td valign="middle">
+ <img src="images/shell/bullet.gif" width="3"
height="15" alt="" border="0"><br>
+ </td>
+ <td style="vertical-align : top; padding : 0px 15px 0px 8px">
+ <a href="#" style="font-size : 11px; color : #ffffff;
text-decoration : none;">Privacy Statement</a>
+ </td>
+
+ </tr>
+ </table>
+ </div>
+ </div>
+ </td>
+ </tr>
+</table>
+
+<form style="margin : 0px">
+ <div style="height : 65px; width: 339px; position : absolute; top : 64px; right
: 0px; margin-right : 0px;">
+ <img src="images/shell/search_bg.png" width="339"
height="65" alt="" border="0" style="position :
absolute; top : 0px; left: 0px">
+ <div style="position : absolute; color : #FFFFFF; font-weight : bold; top :
22px; left : 20px">
+ Search
+ </div>
+ <div style="position : absolute; color : #FFFFFF; font-weight : bold; top :
21px; left : 277px">
+ Find
+ </div>
+ <input type="Text" style="width : 176px; height : 17px; border : 0px;
position : absolute; top : 20px; left : 73px; background : none; font-weight :
bold;">
+ <input type="Image" src="images/shell/spacer.gif"
border="0" style="width : 61px; height : 18px; position : absolute; top :
20px; left : 261px;">
+ <div style="position : absolute; top : 41px; left : 197px">
+ <a href="#" style="color : #FFFFFF; text-decoration :
none">Options <img src="images/shell/bull_arr_down.gif"
width="7" height="7" alt="" border="0">
</a>
+ </div>
+ </div>
+ <div style="height : 90px; width: 327px; position : absolute; top : 107px; right
: 5px; background : none; display : none; overflow : hidden;">
+ <img src="images/shell/search_option_bg.png" width="327"
height="153" alt="" border="0" style="position :
absolute; bottom : 0px; left: 0px">
+ <div style="position : absolute; color : white; top : 7px; left :
45px">
+ in <input type="checkbox">in My
Album <input type="checkbox">in Shared
Albums
+ </div>
+ <div style="position : absolute; color : white; top : 32px; padding-top : 3px;
left : 38px; border-top : 1px solid #383838">
+ for <input type="checkbox">Tags <input
type="checkbox">Photos <input
type="checkbox">Albums <input
type="checkbox">Users
+ </div>
+ <div style="position : absolute; top : 70px; left : 163px">
+ <a href="#" style="color : #FFFFFF; text-decoration :
none">Hide options <img src="images/shell/bull_arr_up.gif"
width="7" height="7" alt="" border="0">
</a>
+ </div>
+ </div>
+</form>
+
+<div style="height : 52px; width: 79px; position : absolute; top : 0px; left :
278px; visibility : vidden;">
+ <img src="images/shell/ai.png" width="52" height="79"
alt="" border="0" style="position : absolute; top : 0px; left:
0px">
+ <img src="images/shell/ai.gif" width="26" height="26"
alt="" border="0" style="position : absolute; top : 26px; left:
13px">
+</div>
+</body>
+</html>