Using templates and CSS
Moderator: General Moderators
Using templates and CSS
Hey there,
I'm a computer science student on summer holidays messing around with a pet PHP project and have a question regarding the use of templates that I think fit in this section.
I have chosen to rebuild a existing application provided by a PHP guide I just completed, in the hope of learning a few design techniques. It uses PEAR templates to separate content from style, for example it has a main template that sets up headers and a navigation bar and then there are a few different templates for the various types of pages required for the website. When a page is opened the specific page type template is then merged with the main template and the content inputed through php block manipulation. My question is, why have this main template that only seems to set up things that are present on every page, why not just include this using CSS? Basically what can be archived by templates that cant be done by CSS?
Thank for your help guys!
I'm a computer science student on summer holidays messing around with a pet PHP project and have a question regarding the use of templates that I think fit in this section.
I have chosen to rebuild a existing application provided by a PHP guide I just completed, in the hope of learning a few design techniques. It uses PEAR templates to separate content from style, for example it has a main template that sets up headers and a navigation bar and then there are a few different templates for the various types of pages required for the website. When a page is opened the specific page type template is then merged with the main template and the content inputed through php block manipulation. My question is, why have this main template that only seems to set up things that are present on every page, why not just include this using CSS? Basically what can be archived by templates that cant be done by CSS?
Thank for your help guys!
Re: Using templates and CSS
Hi,
With CSS you can 'just' change the style of your site, the font/background color, font size, width & heights of container etc.
But you cannot change the structure of a site. With templates, you can.
For example take this board. If you change the css file, you can change only very basic aspects (font family, size, color etc.).
But if you have templates, you can change everything! You can add/remove easily new smilies or icons, you can change the structure of posts, e.g. from:
to
Thats the big advantage of templates. You can easily create different designs of your application, e.g. one design/view for search engines, another design/view for blindly person and another design/view for normal humans.
It is also possible to create webservice or (rss, atom) feed for your site just by changing the templates. Try this with CSS.
Another advantage of using templates is the seperation of code and design. It's very easy to change the design/structure of the application, you just need some basic skills in HTML.
But, by the seperation you can also modify the logic of your programm without modifing the design.
Guess a webshop-software (e.g. osCommerce) without templates. Each shop should look different, so who runs the shop have to change the html code, which is mixed up with php code.
If there is now an update, maybe a fix of a vulnerability, and the programmers of osCommerce release a new version, it's nearly impossible to update the own shop, because all changes you have done would be lost.
But, because osCommerce uses templates, it's realy easy to update the own shop and you do not have to modify the (php) files again and again to get the old look of your site.
Templates are much more powerfull than just CSS.nfrandsen wrote:Basically what can be archived by templates that cant be done by CSS?
With CSS you can 'just' change the style of your site, the font/background color, font size, width & heights of container etc.
But you cannot change the structure of a site. With templates, you can.
For example take this board. If you change the css file, you can change only very basic aspects (font family, size, color etc.).
But if you have templates, you can change everything! You can add/remove easily new smilies or icons, you can change the structure of posts, e.g. from:
Code: Select all
author | title Posted: Date
| Text Text Text
| Text Text Text
| --------------
| signature
Code: Select all
Text Text Text
Text Text Text
-- written by author at Date
It is also possible to create webservice or (rss, atom) feed for your site just by changing the templates. Try this with CSS.
Another advantage of using templates is the seperation of code and design. It's very easy to change the design/structure of the application, you just need some basic skills in HTML.
But, by the seperation you can also modify the logic of your programm without modifing the design.
Guess a webshop-software (e.g. osCommerce) without templates. Each shop should look different, so who runs the shop have to change the html code, which is mixed up with php code.
If there is now an update, maybe a fix of a vulnerability, and the programmers of osCommerce release a new version, it's nearly impossible to update the own shop, because all changes you have done would be lost.
But, because osCommerce uses templates, it's realy easy to update the own shop and you do not have to modify the (php) files again and again to get the old look of your site.
- allspiritseve
- DevNet Resident
- Posts: 1174
- Joined: Thu Mar 06, 2008 8:23 am
- Location: Ann Arbor, MI (USA)
Re: Using templates and CSS
nfrandsen wrote:why not just include this using CSS? Basically what can be archived by templates that cant be done by CSS?
The main template should include all HTML that is the same across every single one of your pages. You can style this however you like with your css, but you don't want to duplicate that html across every one of your individual page templates. Basically, in a nutshell the main template is to make changes to the overall appearance of the site easier.
If you're not using table-based layouts, you can (and should) change structure with css.Hannes2k wrote:With CSS you can 'just' change the style of your site, the font/background color, font size, width & heights of container etc. But you cannot change the structure of a site.
Re: Using templates and CSS
Templates and CSS work together to achieve the same goals but are inherently different.
Templates include the mark-up (ie HTML) and dynamic information that PHP generates. CSS Controls the formatting of that markup. Re-use of both is recommended for creating a consistent look-and-feel and for developing better maintainable websites.
Templates include the mark-up (ie HTML) and dynamic information that PHP generates. CSS Controls the formatting of that markup. Re-use of both is recommended for creating a consistent look-and-feel and for developing better maintainable websites.
Re: Using templates and CSS
Him
The design for a post (in this board) could look like:
now try to get another structure of your post just with CSS, maybe, that a post is displayed like:
or try to get a valid web service with css:
With CSS: impossible.
With a good template engine: extremly easy.
But your possibilities are extremly limited.allspiritseve wrote:If you're not using table-based layouts, you can (and should) change structure with css.
The design for a post (in this board) could look like:
Code: Select all
<div class="left">Hannes2k</div>
<div class="post">
<div class="title">Using templates and CSS</div>
<div class="post_text">Text Text Text</div>
</div>Code: Select all
<b>Using templates and CSS</b><br />
Text Text Text<br />
Text Text Text<br />
-- written by Hannes2k at 21.11.2008
Code: Select all
<post>
<author>Hannes2k</author>
<title>Using templates and CSS</title>
<date>21.11.2008</date>
<text>Text Text Text</text>
</post>With a good template engine: extremly easy.
- allspiritseve
- DevNet Resident
- Posts: 1174
- Joined: Thu Mar 06, 2008 8:23 am
- Location: Ann Arbor, MI (USA)
Re: Using templates and CSS
I don't really understand your examples. What exactly do you think you can do structurally with html that you can't do with css? line breaks?Hannes2k wrote:now try to get another structure of your post just with CSS, maybe, that a post is displayed like:
Re: Using templates and CSS
Hi,
The possibilities of CSS are very limited (else each document would just consists of the body tag).
If you just have the possibility to change the CSS file for a web application, all design you can create looks very simular. Maybe you can change colors, sizes and images, but you cannot insert/modify/delete containers/items to your website. Otherwise HTML would be absolute obsolete and creating a webdesign would just mean editing a css file of a standard template (which maybe is used by every website on earth).
I hope you understand what I mean.
For example. Or to change the text. Or to insert new text. Or to change totaly the order of items.allspiritseve wrote: I don't really understand your examples. What exactly do you think you can do structurally with html that you can't do with css? line breaks?
The possibilities of CSS are very limited (else each document would just consists of the body tag).
If you just have the possibility to change the CSS file for a web application, all design you can create looks very simular. Maybe you can change colors, sizes and images, but you cannot insert/modify/delete containers/items to your website. Otherwise HTML would be absolute obsolete and creating a webdesign would just mean editing a css file of a standard template (which maybe is used by every website on earth).
I hope you understand what I mean.
- allspiritseve
- DevNet Resident
- Posts: 1174
- Joined: Thu Mar 06, 2008 8:23 am
- Location: Ann Arbor, MI (USA)
Re: Using templates and CSS
Making something block-width instead of inline would create a line break. Changing text isn't a structural concern, nor is inserting new text. (though you can insert text in CSS2-- see :after). Changing the order of items can be done with floats and positioning.Hannes2k wrote:For example. Or to change the text. Or to insert new text. Or to change totaly the order of items.
Ever seen the CSS Zen Garden?Hannes2k wrote:If you just have the possibility to change the CSS file for a web application, all design you can create looks very similar.
You maybe can't insert and delete, (which arguably aren't structural concerns anyways) but you can show/hide, position, move, etc... (which arguably are structural concerns.Hannes2k wrote:Maybe you can change colors, sizes and images, but you cannot insert/modify/delete containers/items to your website.
On the contrary; the possibilites of CSS are (nearly) endless.Hannes2k wrote:The possibilities of CSS are very limited
Re: Using templates and CSS
??? Not sure what you mean. What about the visible property though?Hannes2k wrote: Or to change the text.
Visible property.Hannes2k wrote:Or to insert new text.
CSS does this.Hannes2k wrote:Or to change totaly the order of items.
???? CSS addresses different forces than HTML. HTML should structure the document logically using semantic tags, CSS is like a visual map layer laid over the underlying structure, to change the formatting for presentation. If the underlying structure needs to change you should use a templating system. If you don't need to manipulate template pragmatically you may find looking into XSL transformations interesting as well.Hannes2k wrote:The possibilities of CSS are very limited (else each document would just consists of the body tag).
Yes you can.Hannes2k wrote:If you just have the possibility to change the CSS file for a web application, all design you can create looks very simular. Maybe you can change colors, sizes and images, but you cannot insert/modify/delete containers/items to your website.
HTML doesn't address problems in the same context that CSS does.Hannes2k wrote: Otherwise HTML would be absolute obsolete
It does. If you understand how to use itHannes2k wrote: and creating a webdesign would just mean editing a css file of a standard template
NopeHannes2k wrote:I hope you understand what I mean.