[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>
|