advanced web user interface.

kaalidor
New Member

Posts: 42

advanced web user interface. Feb 24, 2008 15:48:26 GMT -5

Quote

Post by kaalidor on Feb 24, 2008 15:48:26 GMT -5

run basic isn't very cool for advanced html interface but i want to give you an exemple of what we can do !

carl, it will be usefull to permit html indentation code, because it's hard to see if an html instruction is closed or not !


html "<body leftmargin=""0"" topmargin=""0"" marginheight=""0"" marginwidth=""0"" bgcolor=""#E6E6E6"">"
html "<!-- Bandeau HAUT = logo + Boutons App + Infos Générales + Login -->"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""758"" align=""center"">"
html "<tr valign=""top"">"
html "<td><img src=";gui$;imgDirBoutique$;"logo.gif";gui$;" alt=""logo VMD France"" width=""184"" height=""129"" border=""0""></td>"
html "<td>"
html "<!-- Table Boutons App + Infos Générales + Login -->"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">"
html "<!-- Ligne Boutons APPELLATIONS -->"
html "<tr>"
html "<td colspan=""2"">"
html "<table border=""0"" valign=""top"" cellpadding=""0"" cellspacing=""0"" width=""100%"">"
html "<tr>"
html "<td><img src=";gui$;imgDirBoutique$;"but01.gif";gui$;" width=""115"" height=""30"" border=""0""></td>"
html "<td><img src=";gui$;imgDirBoutique$;"but02.gif";gui$;" width=""114"" height=""30"" border=""0""></td>"
html "<td><img src=";gui$;imgDirBoutique$;"but03.gif";gui$;" width=""112"" height=""30"" border=""0""></td>"
html "<td><img src=";gui$;imgDirBoutique$;"but04.gif";gui$;" width=""116"" height=""30"" border=""0""></td>"
html "<td><img src=";gui$;imgDirBoutique$;"but05.gif";gui$;" width=""117"" height=""30"" border=""0""></td>"
html "</tr>"
html "</table>"
html "</td>"
html "</tr>"
html "<!-- Fin Ligne Boutons APPELLATIONS -->"
html "<!-- Ligne Infos GENERALES -->"
html "<tr>"
html "<td background=";gui$;imgDirBoutique$;"fon_top01.gif";gui$;" colspan=""2"" height=""37"">"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">"
html "<tr>"
html "<td><p class=""menu01""><a href=""#""><img src=";gui$;imgDirBoutique$;"e01.gif";gui$;" width=""8"" height=""7"" border=""0"">  Le Cercle</a></p></td>"
html "<td><p class=""menu01""><a href=""#""><img src=";gui$;imgDirBoutique$;"e01.gif";gui$;" width=""8"" height=""7"" border=""0"">  Zone Téléchargement</a></p></td>"
html "<td><p class=""menu01""><a href=""#""><img src=";gui$;imgDirBoutique$;"e01.gif";gui$;" width=""8"" height=""7"" border=""0"">  Fonctionnement</a></p></td>"
html "<td><p class=""menu01""><a href=""#""><img src=";gui$;imgDirBoutique$;"e01.gif";gui$;" width=""8"" height=""7"" border=""0"">  Propriétaires</a></p></td>"
html "<td><p class=""menu01""><a href=""#""><img src=";gui$;imgDirBoutique$;"e01.gif";gui$;" width=""8"" height=""7"" border=""0"">  Contacts</a></p></td>"
html "</tr>"
html "</table>"
html "</td>"
html "</tr>"
html "<!-- /Fin Ligne Infos GENERALES -->"
html "<!-- entête login et register -->"
html "<tr>"
html "<td><img src=";gui$;imgDirBoutique$;"form01.gif";gui$;" width=""341"" height=""22"" border=""0""></td>"
html "<td><img src=";gui$;imgDirBoutique$;"form02.gif";gui$;" width=""233"" height=""22"" border=""0""></td>"
html "</tr>"
html "<!-- / fin entête login et register -->"
html "<tr>"
html "<!-- LOGIN -->"
html "<td height=""40"" background=";gui$;imgDirBoutique$;"form03.gif";gui$;" width=""341"" border=""0"" align=""center"">"
html "</td>"
html "<!--Fin LOGIN -->"
html "<!-- s'enregistrer -->"
html "<td background=";gui$;imgDirBoutique$;"form04.gif";gui$;" width=""233"" height=""40"">"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""100%"">"
html "<tr align=""center"">"
html "<td><p style=""color: #FFFFFF; font-size: 10px;""><b>Nbre d'Adhérents<br>328</b></p></td>"
html "<td><a href=""#""><img src=";gui$;imgDirBoutique$;"b_vew.gif";gui$;" width=""79"" height=""20"" border=""0""></a></td>"
html "</tr>"
html "</table>"
html "</td>"
html "<!-- Fin s'enregistrer -->"
html "</tr>"
html "</table>"
html "<!-- /Fin Table Boutons App + Infos Générales + Login -->"
html "</td>"
html "</tr>"
html "</table>"
html "<!-- / Fin Bandeau HAUT --><!-- Bandeau CENTRAL = Menu Gauche + Menu Contact + Corps -->"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""758"" align=""center"">"
html "<tr valign=""top"">"
html "<!-- / Colonne des Menus -->"
html "<td width=""185"" background=";gui$;imgDirBoutique$;"fon_left03.gif";gui$;">"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" background=";gui$;imgDirBoutique$;"fon_left01.gif";gui$;">"
html "<tr>"
html "<td align=""right""><br>"
html "<!-- Menu Contact -->"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""165"" background=";gui$;imgDirBoutique$;"fon_left02.gif";gui$;">"
html "<tr>"
html "<td background=";gui$;imgDirBoutique$;"left02.gif";gui$;" height=""26""><p class=""title"">CONTACT</p></td>"
html "</tr>"
html "<tr>"
html "<td>"
html "<p class=""b02"">Tel   :<b> 05 57 50 11 02</b></p>"
html "<p class=""b02"">Fax :<b> 05 57 50 11 02</b></p>"
html "<p class=""b02""><a href=""mailto:contact@vmd-france.com"">contact@vmd-france.com</a></p>"
html "</td>"
html "</tr>"
html "<tr>"
html "<td><img src=";gui$;imgDirBoutique$;"left_bot02.gif";gui$;" width=""165"" height=""18"" border=""0""></td>"
html "</tr>"
html "</table>"
html "<!-- / Fin Menu Contact -->"
html "</td>"
html "</tr>"
html "<tr>"
html "<td><img src=";gui$;imgDirBoutique$;"left_bot01.gif";gui$;" width=""185"" height=""32"" border=""0""></td>"
html "</tr>"
html "</table>"
html "</td>"
html "<!-- / Fin  Colonne des Menus -->"
html "<!-- Colonne corp de page -->"
html "<td bgcolor=""#FFFFFF"" width=""572"">"
html "<div align=""center""><img src=";gui$;imgDirBoutique$;"m_top.gif";gui$;" width=""572"" height=""8"" border=""0""></div>"
html "<p class=""px5"">"
html "<!-- Presentation -->"
html "<table align=""center"">"
html "<tr>"
html "<td>"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" bgcolor=""#FFFFFF"">"
html "<tr>"
html "<td align=""center"" width=""100%"" height=""100"">"
html "<p align=""center""><img src=";gui$;imgDirBoutique$;"ob.gif";gui$;" width=""328"" height=""90"" border=""0""></p>"
html "<p align=""center""><font color=""#FF506F"" face=""Arial""><br>Le site est actuellement en cours de Maintenance...</font></p>"
html "</td>"
html "</tr>"
html "<tr>"
html "<td align=""center"" width=""100%"" height=""160"">"
html "<font color=""#3C506F"" face=""Arial"" align=""center"">"
html "<b>Entrez dans le monde des Bordeaux.</b>"
html "</font>"
html "<p><font color=""#3C506F"" face=""Arial"" align=""center"">"
html "<b>«Boire du vin, c’est boire du génie.»<br>(Charles Baudelaire)</b></font>"
html "</p>"
html "</td>"
html "</tr>"
html "</table>"
html "</td>"
html "</tr>"
html "</table>"
html "<!-- / Fin Presentation -->"
html "<p class=""px5"">"
html "<p class=""px5"">"
html "</td>"
html "<!-- / Fin Colonne corp de page -->"
html "<td bgcolor=""#979797""><img src=";gui$;imgDirBoutique$;"px1.gif";gui$;" width=""1"" height=""1"" border=""0""></td>"
html "</tr>"
html "</table>"
html "<!-- Bandeau Pied de Page -->"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""758"" align=""center"">"
html "<tr>"
html "<td height=""52"" align=""right"" background=";gui$;imgDirBoutique$;"bot.gif";gui$;">"
html "<table border=""0"" cellpadding=""0"" cellspacing=""0"" width=""530"">"
html "<tr>"
html "<td>"
html "<p class=""menu02"">"
html "<a href=""#"">Accueil</a>      "
html "<a href=""#"">Emploi</a>      "
html "<a href=""#"">Confidentialité</a>      "
html "<a href=""#"">Fonctionnement</a>      "
html "<a href=""#"">Contacts</a>      "
html "<a href=""#"">FAQ</a>"
html "</p>"
html "</td>"
html "</tr>"
html "</table>"
html "</td>"
html "</tr>"
html "<tr>"
html "<td><p align=""right"" style=""margin-right: 200px;""><font color=""#AAAAAA"">Copyright ©2007 VMD-France.com</font></p></td>"
html "</tr>"
html "</table>"
html "<!-- / Fin Bandeau Pied de Page -->"
html "</body>"
wait

here is the result !

i don't put CSS class because they are too long.

please don't use it because all pics are copyrighted.

The next step is hadding some interactivity like "Subscribe", etc...

regards,
pascal

Last Edit: Feb 24, 2008 16:17:35 GMT -5 by kaalidor

Jerry Muelver
Administrator

Posts: 521

advanced web user interface. Feb 24, 2008 17:46:51 GMT -5

Quote

Post by Jerry Muelver on Feb 24, 2008 17:46:51 GMT -5

Pascal, RB allows you to wrap HTML statements, like this:


html "</div>
<div style=""text-align:center"">
<h2>My Little Table</h2>
<table border=1 align=center>
    <tr>
        <td>One</td>
        <td>Two</td>
    </tr>
</table>
</div>
"

You can indent with spaces. Maybe that will help your layout conversions. It's fairly easy to paste HTML into a script, that way.

kaalidor New Member Posts: 42	advanced web user interface. Feb 25, 2008 1:13:00 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by kaalidor on Feb 25, 2008 1:13:00 GMT -5 i will try this asap ! thank's jerry ...

wurlde New Member Posts: 30	advanced web user interface. Feb 27, 2008 16:38:51 GMT -5 Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by wurlde on Feb 27, 2008 16:38:51 GMT -5 nice page

advanced web user interface.

Post by kaalidor on Feb 24, 2008 15:48:26 GMT -5

Post by Jerry Muelver on Feb 24, 2008 17:46:51 GMT -5

Post by kaalidor on Feb 25, 2008 1:13:00 GMT -5

Post by wurlde on Feb 27, 2008 16:38:51 GMT -5