CSS: Layout Generator

This tutorial guides the reader to generate the web page layout using HTML and CSS. Optionally, the reader may upoad the generated page to RedHat's Openshift server.

1) Go to http://www.cssportal.com/layout-generator/.



2) Fill-in the required information. Click Create Layout.


3) Locate the Download Button. Download the generated files.


4) Assuming you have already had an OpenShift server account with JBOSS Application Server Catridge installed, follow the next steps.

4.1) Unzip the downloaded file in step 3 above. Remember the location of the unzipped file.

4.2) Run JBOSS Developer Studio, open your OpenShift project. Right-click webapp folder, select Import...


4.3) Select File System.


4.4) Browse for your files. Optionally, tick Create top-level folder to separate this layout files from other files.


4.5) Right-Click your project, select Team/Commit. Then Right-Click your project, select Team/Push to upstream.

4.6) Browse your OpenShift website. Check for the changes that you have made.

5) Making a portal.
5.1) Rename your page as Page1. Then duplicate it as Page2, Page3, Page4 etc.
5.2) Goto http://www.cssportal.com/css-menu-generator/ to create menu codes.
5.3) Embed the code to Page1, Page2, Page3, Page4 etc.
5.4) Commit and Push your files to OpenShift.