FAQ
The FAQ explains all the techniques used in this demo
It uses the template Template:bars we created also. The first parameter creates the link, the second the background color. The font color is set in the CSS for header links.
<nowiki><iframe class="youtube" type="text/html" src="http://www.youtube.com/embed/{{{1}}}" frameborder="0"></iframe></nowiki>
How did you make the color bar header?
For the text, we created an system message System:skinheader/en with the following text{{bars|Home|white}}{{bars|Products|yellow}}{{bars|Services|cyan}}{{bars|Portfolio|magenta}}{{bars|Trailers|green}}{{bars|Support|red}}{{bars|FAQ|blue}}{{bars|Contact|black}}It uses the template Template:bars we created also. The first parameter creates the link, the second the background color. The font color is set in the CSS for header links.
<div style="float:left;width:120px;height:30px;text-align:center;vertical-align:bottom;background-color:{{{2}}}; color:{{{3}}}">[[{{{1}}}]]</div>How did you lay out images and texts in the pages Products, Servcies and Portfolio?
These are simple tables. The images are columns in the first row, the titles in the second and the text in the third.How did you embed the Youtube video?
We wrote the youtube template. The HTML code is protected with a nowiki tag. The iframe is of the class youtube. The CSS sets this class to width 480 and height 385. If you have a 16:9 video, you would want to set the width to 640.<nowiki><iframe class="youtube" type="text/html" src="http://www.youtube.com/embed/{{{1}}}" frameborder="0"></iframe></nowiki>