[phpwebapp-commits] CVS: app2/templates styles.css,1.1.1.1,1.2 page2.html,1.1.1.1,1.2 page2.css,1.1.
Brought to you by:
dashohoxha
Update of /cvsroot/phpwebapp/app2/templates In directory sc8-pr-cvs1:/tmp/cvs-serv6504/templates Modified Files: styles.css page2.html page2.css page1_content.html page1.html header.html footer.js footer.html Log Message: improvments in the styles and templates Index: styles.css =================================================================== RCS file: /cvsroot/phpwebapp/app2/templates/styles.css,v retrieving revision 1.1.1.1 retrieving revision 1.2 diff -C2 -d -r1.1.1.1 -r1.2 *** styles.css 21 Feb 2003 08:24:14 -0000 1.1.1.1 --- styles.css 15 Aug 2003 09:09:26 -0000 1.2 *************** *** 1,43 **** body { ! background-color:#EFE7D6; ! margin-top:20px; ! margin-left:20px; ! margin-right:20px; ! margin-bottom:20px; ! } ! ! .font ! { ! font-family: Arial, Helvetica, Sans-Se; ! font-size: 10pt; ! color:#000000; } ! .checkbox, .radio { } ! .text, .button { ! font-family: Arial, Helvetica, Sans-Se; ! font-size: 10pt; ! background-color: #EAEAEA; ! color: #006666; } ! .title { ! COLOR: #FFFFFF; ! FONT-FAMILY: Arial, Helvetica, Sans-Se; ! FONT-SIZE: 12px; ! FONT-WEIGHT: bold } ! .strong { ! COLOR: #000066; ! FONT-FAMILY: Arial, Helvetica, Sans-Se; ! FONT-SIZE: 16px; ! FONT-WEIGHT: bold } --- 1,35 ---- body { ! background-color: #efe7d6; ! margin-top: 20px; ! margin-left: 20px; ! margin-right: 20px; ! margin-bottom: 20px; ! font-family: arial, helvetica, sans-se; ! font-size: 12pt; ! color: #000000; } ! h1, h2 { + text-align: center; } ! h1, h2, h3, h4 { ! color: #660000; } ! pre { ! background-color: #eeeeee; ! border: 1px solid #0000aa; ! color: #00aa00; } ! strong { ! color: #000066; ! font-size: 14px; ! font-weight: bold } Index: page2.html =================================================================== RCS file: /cvsroot/phpwebapp/app2/templates/page2.html,v retrieving revision 1.1.1.1 retrieving revision 1.2 diff -C2 -d -r1.1.1.1 -r1.2 *** page2.html 21 Feb 2003 08:24:13 -0000 1.1.1.1 --- page2.html 15 Aug 2003 09:09:26 -0000 1.2 *************** *** 1,66 **** <html> ! <head> ! <title> Page 2 </title> ! <link rel="stylesheet" type="text/css" href="{{./}}styles.css"> ! <link rel="stylesheet" type="text/css" href="{{./}}page2.css" /> ! </head> ! <body> ! <Include SRC="{{./}}header.html"/> ! <h3> A Page Constructed without Subtemplates </h3> ! <table width="95%" align="center" border="0" cellspacing="0" cellpadding="0"> ! <tr><td class="box_title">tpl.html</td></tr> ! <tr><td class="box_content"> ! <table width="100%" border="0" cellspacing="20" cellpadding="0"> ! <tr> ! <td width="60%" valign="top"> ! <table width="100%" border="0" cellspacing="0" cellpadding="0"> ! <tr><td class="box_title_1">tpl_1.html</td> ! </tr> ! <tr><td class="box_content_1" valign="top"> ! <p class="content_1"> ! <i>page2.html</i> is the same as <i>page3.html</i>, however it ! is implemented in the usual way, without templates. After ! studying how both of them are implemented, try to make a small ! modification in both of them and see which one is easier to be modified. ! </p> ! </td></tr> ! </table> ! </td> ! <td valign="top"> ! <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"> ! <tr><td class="box_title_2">tpl_2.html</td></tr> ! <tr><td class="box_content_2"> ! <table width="100%" border="0" cellspacing="10" cellpadding="0"> ! <tr><td> ! <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"> ! <tr><td class="box_title_2_1">tpl_2_1.html</td></tr> ! <tr><td class="box_content_2_1"> ! tpl_2_1 <br> ! content ! </td></tr> ! </table> ! </td></tr> ! <tr><td> ! <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"> ! <tr><td class="box_title_2_2">tpl_2_2.html</td></tr> ! <tr><td class="box_content_2_2"> ! tpl_2_2 <br> ! content ! </td></tr> ! </table> ! </td></tr> ! </table> ! </td></tr> ! </table> ! </td> ! </tr> ! </table> ! </td></tr> ! </table> ! <p> ! <Include SRC="{{./}}footer.html"/> ! </body> </html> --- 1,95 ---- <html> ! <head> ! <title>Page 2</title> ! <link rel="stylesheet" type="text/css" href="{{./}}styles.css"> ! <link rel="stylesheet" type="text/css" href="{{./}}page2.css"> ! </head> ! <body> ! <Include SRC="{{./}}header.html" /> ! <h3>A Page Constructed without Subtemplates</h3> + <table width="95%" align="center" border="0" cellspacing="0" cellpadding="0"> + <tr> + <td class="box_title">tpl.html</td> + </tr> + + <tr> + <td class="box_content"> + <table width="100%" border="0" cellspacing="20" cellpadding="0"> + <tr> + <td width="60%" valign="top"> + <table width="100%" border="0" cellspacing="0" cellpadding="0"> + <tr> + <td class="box_title_1">tpl_1.html</td> + </tr> + + <tr> + <td class="box_content_1" valign="top"> + <p class="content_1"><em>page2.html</em> is the + same as <em>page3.html</em>, however it is + implemented in the usual way, without + templates. After studying how both of them are + implemented, try to make a small modification + in both of them and see which one is easier to + be modified.</p> + </td> + </tr> + </table> + </td> + + <td valign="top"> + <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"> + <tr> + <td class="box_title_2">tpl_2.html</td> + </tr> + + <tr> + <td class="box_content_2"> + <table width="100%" border="0" cellspacing="10" cellpadding="0"> + <tr> + <td> + <table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"> + <tr> + <td class="box_title_2_1">tpl_2_1.html</td> + </tr> + + <tr> + <td class="box_content_2_1"> + tpl_2_1 <br> content + </td> + </tr> + </table> + </td> + </tr> + + <tr> + <td> + <table width="100%" align="center" border="0" cellspacing="0" cellpadding= "0"> + <tr> + <td class="box_title_2_2">tpl_2_2.html</td> + </tr> + + <tr> + <td class="box_content_2_2"> + tpl_2_2 <br> content + </td> + </tr> + </table> + </td> + </tr> + </table> + </td> + </tr> + </table> + </td> + </tr> + </table> + </td> + </tr> + </table> + + <Include SRC="{{./}}footer.html" /> + </body> </html> Index: page2.css =================================================================== RCS file: /cvsroot/phpwebapp/app2/templates/page2.css,v retrieving revision 1.1.1.1 retrieving revision 1.2 diff -C2 -d -r1.1.1.1 -r1.2 *** page2.css 21 Feb 2003 08:24:12 -0000 1.1.1.1 --- page2.css 15 Aug 2003 09:09:26 -0000 1.2 *************** *** 2,78 **** .box_title { ! text-align: center; ! background-color: #003366; ! color: white } .box_content { ! height: 250; ! background-color: white; ! border: thin solid #003366 } .box_title_1 { ! text-align: center; ! background-color: #006633; ! color: white } .box_content_1 { ! height: 250; ! background-color: #eeeeee; ! border: thin solid #006633 } .content_1 { ! padding: 10; ! font-family: arial } .box_title_2 { ! text-align: center; ! background-color: #336600; ! color: white } .box_content_2 { ! background-color: #eeeeee; ! border: thin solid #336600 } .box_title_2_1 { ! text-align: center; ! background-color: #660033; ! color: white } .box_content_2_1 { ! height: 100; ! border: thin solid #660033; ! background-color: white; ! text-align: center } .box_title_2_2 { ! text-align: center; ! background-color: #663300; ! color: white } .box_content_2_2 { ! height: 100; ! border: thin solid #663300; ! background-color: white; ! text-align: center } - --- 2,77 ---- .box_title { ! text-align: center; ! background-color: #003366; ! color: white } .box_content { ! height: 250; ! background-color: white; ! border: thin solid #003366 } .box_title_1 { ! text-align: center; ! background-color: #006633; ! color: white } .box_content_1 { ! height: 250; ! background-color: #eeeeee; ! border: thin solid #006633 } .content_1 { ! padding: 10; ! font-family: arial } .box_title_2 { ! text-align: center; ! background-color: #336600; ! color: white } .box_content_2 { ! background-color: #eeeeee; ! border: thin solid #336600 } .box_title_2_1 { ! text-align: center; ! background-color: #660033; ! color: white } .box_content_2_1 { ! height: 100; ! border: thin solid #660033; ! background-color: white; ! text-align: center } .box_title_2_2 { ! text-align: center; ! background-color: #663300; ! color: white } .box_content_2_2 { ! height: 100; ! border: thin solid #663300; ! background-color: white; ! text-align: center } Index: page1_content.html =================================================================== RCS file: /cvsroot/phpwebapp/app2/templates/page1_content.html,v retrieving revision 1.1.1.1 retrieving revision 1.2 diff -C2 -d -r1.1.1.1 -r1.2 *** page1_content.html 21 Feb 2003 08:24:12 -0000 1.1.1.1 --- page1_content.html 15 Aug 2003 09:09:26 -0000 1.2 *************** *** 1,72 **** ! ! <!--# This file is the content that is displayed in the page1 #--> <h4>Templates</h4> ! <p> ! Templates are pieces of HTML code, that are used or combined ! by the framework to generate the HTML pages that are sent to ! the browser. ! </p> <h4>Template variables</h4> ! <p> ! The templates may contain variables inside them (called ! "template variables"), which are replaced by the framework ! with their string values. The variables inside a template ! are denoted by double curly braces: { {tpl_var} }. ! </p> <h4>The <Include> tag</h4> ! <p> ! The templates may also contain some extra tags, which are ! not HTML tags. These tags are reckognised and processed ! by the framework. One of them is the <Include> tag, ! which is used to include another template inside the ! current template: ! </p> <pre> ! <Include SRC="file_to_be_included" /></pre> ! <p> ! It is a very useful tag, because it allows to separate ! pages into subtemplates, which results in a better structured ! application, provides modularity (the graphical designer ! can work with smaller pieces of code), and reusability ! (templates are easier to be reused in other pages or other ! applications). ! </p> <h4>Comments</h4> ! <p> ! The templates may contain some special comments as well: ! </p> <pre> ! <!--# Framework comments #--></pre> ! <p> ! These comments are like HTML comments by they have a diesis ! (#) at the opening and closing marks. These comments are not ! processed by the framework and are not displayed in the ! HTML page that is generated. ! </p> <h4>JavaScript code and stylesheet of a template</h4> ! <p> ! If a certain template has some javascript code or some special ! styles of its own, then it is better to include them at the ! begining of the template (instead of including them globally, ! at the header of the page). This makes the template more ! independant from the other parts of the page and thus easier ! to use it again into another page. They are included like ! this: ! </p> <pre> ! <script language="javascript" src="file.js"></script> ! <link rel="stylesheet" type="text/css" href="file.css"></pre> ! <p> ! The inclusion is much better than writting the JS and CSS ! code in the template because it separates the HTML code ! from the JS and CSS codes. It also is more efficient ! (has a better performance) because the next time that ! this template is loaded in browser again, most probably the ! browser will get "file.js" and "file.css" from the cache, ! instead of retrieving them again from the server. ! </p> --- 1,63 ---- ! <!--# This file is included inside page1.html #--> <h4>Templates</h4> ! ! <p>Templates are pieces of HTML code, that are used or combined by ! the framework to generate the HTML pages that are sent to the ! browser.</p> <h4>Template variables</h4> ! ! <p>The templates may contain variables inside them (called ! "template variables"), which are replaced by the framework with ! their string values. The variables inside a template are denoted by ! double curly braces: {{#tpl_var} }.</p> <h4>The <Include> tag</h4> ! ! <p>The templates may also contain some extra tags, which are not ! HTML tags. These tags are reckognised and processed by the ! framework. One of them is the <Include> tag, which is used to ! include another template inside the current template:</p> <pre> ! <Include SRC="file_to_be_included" /> ! </pre> ! ! <p>It is a very useful tag, because it allows to separate pages ! into subtemplates, which results in a better structured ! application, provides modularity (the graphical designer can work ! with smaller pieces of code), and reusability (templates are easier ! to be reused in other pages or other applications).</p> <h4>Comments</h4> ! ! <p>The templates may contain some special comments as well:</p> <pre> ! <!--# Framework comments #--> ! </pre> ! ! <p>These comments are like HTML comments by they have a diesis (#) ! at the opening and closing marks. These comments are not processed ! by the framework and are not displayed in the HTML page that is ! generated.</p> <h4>JavaScript code and stylesheet of a template</h4> ! ! <p>If a certain template has some javascript code or some special ! styles of its own, then it is better to include them at the ! begining of the template (instead of including them globally, at ! the header of the page). This makes the template more independant ! from the other parts of the page and thus easier to use it again ! into another page. They are included like this:</p> <pre> ! <script language="javascript" src="file.js"></script> ! <link rel="stylesheet" type="text/css" href="file.css"> ! </pre> ! ! <p>The inclusion is much better than writting the JS and CSS code ! in the template because it separates the HTML code from the JS and ! CSS codes. It also is more efficient (has a better performance) ! because the next time that this template is loaded in browser ! again, most probably the browser will get "file.js" and "file.css" ! from the cache, instead of retrieving them again from the ! server.</p> Index: page1.html =================================================================== RCS file: /cvsroot/phpwebapp/app2/templates/page1.html,v retrieving revision 1.1.1.1 retrieving revision 1.2 diff -C2 -d -r1.1.1.1 -r1.2 *** page1.html 21 Feb 2003 08:24:12 -0000 1.1.1.1 --- page1.html 15 Aug 2003 09:09:26 -0000 1.2 *************** *** 1,14 **** <html> <head> ! <title> Page 1 </title> ! <link rel="stylesheet" type="text/css" href="{{./}}styles.css"> </head> - <body> ! <Include SRC="{{./}}header.html"/> ! <Include SRC="{{./}}page1_content.html"/> ! <Include SRC="{{./}}footer.html"/> ! <br> </body> - </html> --- 1,12 ---- <html> <head> ! <title>Page 1</title> ! <link rel="stylesheet" type="text/css" href="{{./}}styles.css"> </head> <body> ! <Include SRC="{{./}}header.html"/> ! <Include SRC="{{./}}page1_content.html"/> ! <Include SRC="{{./}}footer.html"/> ! <br> </body> </html> Index: header.html =================================================================== RCS file: /cvsroot/phpwebapp/app2/templates/header.html,v retrieving revision 1.1.1.1 retrieving revision 1.2 diff -C2 -d -r1.1.1.1 -r1.2 *** header.html 21 Feb 2003 08:24:12 -0000 1.1.1.1 --- header.html 15 Aug 2003 09:09:26 -0000 1.2 *************** *** 4,8 **** <!-- This is a usual HTML comment and it will be part of the generated page --> ! <center> ! <h1> Sample Application 2: Templates </h1> ! </center> --- 4,6 ---- <!-- This is a usual HTML comment and it will be part of the generated page --> ! <h1>Sample Application 2: Templates</h1> Index: footer.js =================================================================== RCS file: /cvsroot/phpwebapp/app2/templates/footer.js,v retrieving revision 1.1.1.1 retrieving revision 1.2 diff -C2 -d -r1.1.1.1 -r1.2 *** footer.js 21 Feb 2003 08:24:12 -0000 1.1.1.1 --- footer.js 15 Aug 2003 09:09:26 -0000 1.2 *************** *** 5,23 **** function goto_page1() { ! GoTo("page1.html"); } function goto_page2() { ! GoTo("page2.html"); } function goto_page3() { ! GoTo("page3/page3.html"); } function go_back() { ! history.back(); } --- 5,23 ---- function goto_page1() { ! GoTo("page1.html"); } function goto_page2() { ! GoTo("page2.html"); } function goto_page3() { ! GoTo("page3/page3.html"); } function go_back() { ! history.back(); } Index: footer.html =================================================================== RCS file: /cvsroot/phpwebapp/app2/templates/footer.html,v retrieving revision 1.2 retrieving revision 1.3 diff -C2 -d -r1.2 -r1.3 *** footer.html 11 Aug 2003 16:46:43 -0000 1.2 --- footer.html 15 Aug 2003 09:09:26 -0000 1.3 *************** *** 2,10 **** <hr> <br> ! Go To [ ! <a href="javascript: goto_page1()"> Page 1 </a> | ! <a href="javascript: goto_page2()"> Page 2 </a> | ! <a href="javascript: goto_page3()"> Page 3 </a> ] ! <p> ! <a href="javascript: go_back()"><img src="{{IMG_URL}}back.png" border="0"></a> <a href="{{APP_URL}}"><img src="{{IMG_URL}}home.png" border="0"></a> --- 2,10 ---- <hr> <br> ! Go To ! [ <a href="javascript: goto_page1()"> Page 1 </a> ! | <a href="javascript: goto_page2()"> Page 2 </a> ! | <a href="javascript: goto_page3()"> Page 3 </a> ] ! <br><br> ! <a href="javascript:go_back()"><img src="{{IMG_URL}}back.png" border="0"></a> <a href="{{APP_URL}}"><img src="{{IMG_URL}}home.png" border="0"></a> |