Building a Template From a Static Html Design
Install the html design on top of your development site
For instance, if the new design has a page called newHome.html, copy it and all the included references to your development site. When correctly installed, you should be able to see the design through your browser at http://myDevSite/newHome.html
Create a collection to hold the new template
Create addons for each jQuery extension on the html design
- If the design includes a jQuery extension, it should be isolated as a discrete addon and add a dependency for it to your template includes addon described above. If the addon already exists, just install it in your development environment and add the dependency.
- Be sure to add collection dependencies to any libraries that need to be included.
Combine all styles into a single stylesheet
- From the source of the new design html, copy the necessary stylesheets one at a time, in order into a single shared stylesheet.
- Add the shared stylesheet to the new collection
- Add the new consolidated script into the "Includes" addon created earlier.
Create a new Page Template record from the body-to-body html from the design
- Copy and paste the html from the body tag into a new page template record.
- if there are any special requirements fo the body tag from the design, add them to the body tag in the template.
- Locate the region in the template where the editable content should go. Replace it with the addon
- Add the page template to the collection
Add External resources to the Collection
Export the Collection
- If you have not already, installed the Addon Collection Export Tool from the Addon Library
- Select your collection from the list and export it to a zip file.
- Be sure to test the deployment on a staging site, preferably on a different server before deploying to a production site.
- Once the new collection is installed, you can create a new test page, and set it's template to one of the ones created by the collection.