Setting Up Your Design

There’s a variety of approaches you can to take for converting an existing site to Webvanta. In this article, we’ll start with the simplest method, and then gradually show how to make additional changes to take more advantage of Webvanta’s unique capabilities.

The basic steps are as follows:

1. Upload your files
2. Create template(s)
3. Create pages

Then come the optional refinements, which enable you to realize the full value of the Webvanta platform:

• Create a page template by extracting from your sample page just those parts that are the same for every page (header, navigation, footer)
• Move page-specific content into editable regions so it is managed by the content management system (CMS)
• Revise the navigation code so it uses dynamic menus created by the CMS
• Put any content used in multiple places into snippets
• Move structured content into the database
• Make the CSS and JavaScript files editable in your browser

Other enhancements that are available to you for free as part of the Webvanta platform include:

• Change your contact page to use our contact form, and gain spam protection and database logging.
• Incorporate our privacy policy if you don’t already have one.
• Set up accounts for others who you want to be able to edit the site.
• Add RSS feeds.
• Add site search.
• Add other built-in features such as an integrated blog, photo gallery, resources page, or even a complete information portal.

Super-Quick Site Import

Note: if you want to set up your site the right way to begin with, skip this section and continue with Basic Site Conversion. This section explains a quick-and-dirty way to get an existing site moved over quickly.

There’s a super-quick way to get started, if you have a complete static web site to begin with: zip up all the files that make up the site and upload the zip file to your Webvanta site (Content > Image & Files and click Add File). Webvanta will automatically generate a matching directory structure, unpack all the files in the zip into it, and register the files in the content management system.

In most cases, this will yield an immediately working site on the Webvanta platform. You’re running your site entirely outside of our CMS and database, so you’re gaining little benefit, but at least all your files are moved over, and you can operate in this mode while you work your way through a more complete conversion.

Note that Webvanta does not support PHP or other server-side scripting in your pages. To maintain security and performance for everyone, we only allow our own back-end code to run on our servers.

One caution: all files you’ve uploaded in this way are always publicly visible. In your Site Admin control panel, you can enable or disable viewing of your site, but this affects only pages produced by the Webvanta CMS and database, not .htm or .html pages that you upload. As you convert your site, you’ll eliminate all of these .htm or .html pages.

See Uploading Files for details.

Basic Site Conversion

Upload images, PDFs, Flash files (SWFs), and video files

Assuming you skipped the super-quick import as described in the preceding section, zip up all of the non-HTML files that make up your site, and upload the zip file via Content > Images & Files and click Add File.

If you did the super-quick site import, you’ve already uploaded all your files, including the HTML files. As you convert the site, some of those files will cease to be needed.

If you uploaded your CSS and JS files as part of the zip file, then they should be ok for now. To make them editable in the Webvanta interface, you may want to convert them as described later in this article.

Create template(s)

Now you need to create the HTML content for your site. In the Webvanta system, every page has a template. Typically, the head section of the HTML is entirely in the template file (or in a snippet referenced there), as are the site’s visual header, footer, and navigation.

To make the most out of Webvanta, you’ll want to move all page-specific content out of the templates and into snippets, reducing the number of templates to a minimum (which keeps your page designs consistent and simplifies maintenance). But to get started, you can go to the other extreme: create a template for each page. You can use the entire HTML for a page as a template file.

Note that you cannot upload any PHP or other server-side code. If your site includes such code, you may want to start by capturing the HTML for your fully rendered site, using the browser’s “Show Source” feature, to provide the initial code for the template.

All CSS and JS files are at the root of your site, so if you have these stored in folders in your existing design, you’ll need to edit the file paths in the template HTML to eliminate everything except the filename.

Pages in the Webvanta system don’t require any filename extension (e.g., you can use /services instead of /services.html). You can include these extensions when you name your pages, but it is cleaner to eliminate them. If you don’t use the extensions, then be sure to fix any links in your template files to remove the extensions.

If you use HTML pages uploaded as assets, the extension is required. Remember that such pages are outside of the view of the content management system and should be used only temporarily during the process of converting a site.

See Using Templates to Define Page Structure for more information on using templates.

Create pages

With traditional web site design, you create a file for each page. In Webvanta, you create your pages with the content management system.

Click Structure > Pages, and then click Add Page. Enter the page title (which appears in the browser title bar) and the slug (the final part of the URL, after the last slash). You can enter the keywords and description (for SEO) now, or defer that task until later.

If you created a separate template for each page, taking the minimal conversion approach, then all the content is in the templates and all you need to do to create the page is to choose the corresponding template from the pop-up list.

In general, though, you'll want to use a template that has non page-specific content, so you can use the same template for many pages, and then set the page-specific content either through the page admin screen or using in-place editing on the site itself.

Note that page slugs cannot have slashes in them. If you have pages that have a folder name in their path (e.g., /products/chair), then you’ll need to first create a page for the first level (products), and then create a “chair” page as a subpage of “products” (click the green circle with the plus sign next to the products page in the page list).

See Creating and Managing Pages for more information.

Fix Up File Paths

If conventional site designs, you may have relative paths to files, such as 'scr="img/picture.jpg" '. With Webvanta, you should start all file paths with a slash, so this changes to "/img/picture.jpg". And if you uploaded files without creating a matching directory structure, you'll need to update the path to match.

Give It a Test Drive

At this point, you should be able to access all the pages you have converted. If you encounter problems, here’s some things to check:

• If you’re getting “page not found” for any pages, make sure you created a page with the proper URL.
• If images are missing, make sure you uploaded them, and that the folder structure you uploaded matches the references in your code. If you uploaded images individually, they are at the root of the site.
• If JavaScript behaviors are missing, make sure your template references any required JS files, and that the JS files have been created or uploaded. If you’ve created the JS files through the CMS, be sure any references to the file names have no path in front of the name.
• If styling is missing, make sure your template loads any required CSS files, that the CSS files have been uploaded or created, and that the paths are correct.

Refinements to Gain the Full Benefit of Webvanta

At this point, you should have a functional site running on the Webvanta system. To gain the full benefit of the Webvanta system, however, you’ll need to separate out your editable content and your navigation from the templates.

Move page-specific content into editable regions so it is managed by the content management system (CMS)

The first step is to create as many templates as you need to define the different types of pages on your site. Each template should have no page-specific content but everything that repeats for all pages of a type.

See Using Regions for Page-Specific Content for details.

Revise the navigation code to use dynamic menus

You can create navigation however you'd like. If you use Webvanta's dynamic menu features, you can build menus with any visual design and html structure you'd like, while your (or the content owner) sets up the menu independently of the code, via the Menu admin screen (Structure > Menu).

See Creating Navigation for more information.

Put any content used in multiple places into snippets

Snippets are just named chunks of content, either code or text, that you can use anywhere by name. So the analytics code that you need in every template, you can put in a snippet of that name, and then reference it in each template. Now you have a single place to maintain that code.

See Using Snippets for details.

Move links and any other structured content into the database

The real power of Webvanta comes into play when you build your site around structured content stored in the database. It could be news items, events, resources, project profiles, FAQ items, whatever.

See Setting Up Your Database Structure to get started with the database.

Add redirects

If your site’s URLs have changed and you want to redirect them, you can enter a list of translations from old to new. Note that this capability is limited to processing the string after the base URL; for example, in www.webvanta.com/help, only the string “help” is processed.

Convert CSS files

There are two different ways to set up your CSS files on Webvanta; each has its pros and cons:

• Upload CSS files via Content > Images & Files. This is the best approach for CSS library files or others that you don't need to modify.
• For CSS files that you will be editing, it is better to set them up through the CSS control panel.

To use the second method, which enables you to edit your CSS online, click Structure > CSS Files and click Add CSS File, copy the contents from your first CSS file, paste it into the form, enter the name of the file in the Name field, and click Create. Repeat for each of your CSS files.

Note that all CSS files created in this way reside at the root of your site (not in folders).

You may need to edit image file references if the folder in which images are stored is different on the Webvanta site.

See Styling Pages with CSS for details.

Convert JavaScript files

JavaScript files, like CSS files, can be edited through a form in the web browser, if they are entered via the JS control panel. Click Structure > JS Files and click Add Javascript File, copy the contents from your first JS file, paste it into the form, enter the name of the file in the Name field, and click Create. Repeat for each of your JS files.

Note that all JS files created in this way reside at the root of your site (not in folders).

See Using Javascript for details.

And there's more...

At this point, you should have something close to your original site, built with Webvanta. Now it will be much easier to maintain.

And now you can explore the additional features Webvanta makes it easy to add, including:

• Blog
• Article library
• Bookstore
• Photo gallery and slideshow
• Video player
• Information portal
• Contact form
• Custom forms