Login

Recover Your Password

Welcome

Bring Your Vision To Life

We provide software and services that enable our customers and partners to turn advanced technology into real solutions.

What We Do

Contensive works as a team member with client partners, providing the highest level of technical competence and support in the design, production, management & lifecycle support of online applications.

api illustration
API Integration

You name it, we can integrate it

mobile development illustration
Mobile App Development

Custom mobile apps that can do everything

cloud app dev illustration
Cloud Application Development

Customized applications with the features you need

cloud host illustration
Best-In-Class Cloud Hosting

AWS platform, the leader in cloud computing

life cycle illustration
Life Cycle Management

Continuous monitoring, user support, and training

business process illustration
Business Process Automation

Streamline your operations and increase efficiencies

Let’s work on a solution to your problem today!

Process

Agile Software Development Process

Benefits

Why You Should Choose Contensive

The greatest product we offer is our experienced team and our dedication to real-world, time-tested principles: a realistic budget, a disciplined process, and enough flexibility and creativity to accommodate any requirement.

contensive favicon
Proven Development Process

Our agile scrum process allows total transparency

contensive favicon
Time Tested Principles

We follow best practices to get the best results

contensive favicon
Realistic Budget

Payment options that will help you succeed

contensive favicon
Expertise

30+ year history of customer success and profitability

contensive favicon
Talented Team Members

Each developer has disparate skill sets & decades of experience

Experience

Contensive’s Experience

Contensive provides software and services that enable our customers and partners to turn advanced technology into real solutions.

100k+

e-commerce transactions a month

1st

Website allowed in the chamber of US Supreme Court

8 years

Average relationship with client

600+

Websites and applications created

30+

years of experience

300k+

People visiting our applications

Contact Us

Questions?
Call Us (703)-251-0624

Tech Support
support@contensive.com

Return to Product Support > Learning Center > Developer References > Developer Tutorials > Building a Template From a Static Html Design

Building a Template From a Static Html Design

This tutorial shows you how to transplant the html, css and javascript from a static html design into a page template for use on a Contensive site.

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

  1. This collection will include all the stylesheets, javascript, page templates and addons needed for this page.

Create addons for each jQuery extension on the html design

  1. If your template requires javascript, we recommend you create that javascript in an add-on, then reference the add-on in the template. For example, if you have a design that you have named "myDesign", create an addon called "myDesign Includes". In the javascript tab of the addon, paste the template's javascript in either the Head or End-of-Body section. Then in the actual html for the template, add { % "myDesign Includes" % } (without the spaces between % and {}).
  2. 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.
  3. Be sure to add collection dependencies to any libraries that need to be included.

Combine all styles into a single stylesheet

  1. From the source of the new design html, copy the necessary stylesheets one at a time, in order into a single shared stylesheet.
  2. Add the shared stylesheet to the new collection

Combine all custom javascript into a single script

  1. From the source of the new design html, copy the necessary scripts into one javascript file. Exclude those isolated into separate addons.
  2. 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

  1. Copy and paste the html from the body tag into a new page template record.
  2. if there are any special requirements fo the body tag from the design, add them to the body tag in the template.
  3. Add the consolidated javascript into the javascript tab of the new template.
  4. Locate the region in the template where the editable content should go. Replace it with the addon
  5. Add the page template to the collection 

Add External resources to the Collection

The design often includes a folder or two of included resources that have not already been isolated into stylesheets and javascript scripts, like images. Add those images to the collection by entering each resources root-relative path to the Resources tab of the collection. For instance, if you have in image called Logo.png in the img folder, it is probably referenced in the html or stylesheet with "img/Logo.png". Add it to the Resources tab, in the wwwRoot resources as "/img/Logo.png". If you have many resources and would like to zip them first, you can just add a single reference to the zip file and they will by unzipped on deployment.

Export the Collection

  1. If you have not already, installed the Addon Collection Export Tool from the Addon Library
  2. Select your collection from the list and export it to a zip file.
  3. Be sure to test the deployment on a staging site, preferably on a different server before deploying to a production site.
  4. 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.