Import an Existing Website
In part one of the intros, you created a new site from scratch. Next you will create a new template in the CMS from an existing web page on a live website. In this case you’re going to use a simple demo page, but you can use any page desired. The first thing you need to do is save the page to your local computer if you do not have the original site files available. If you do have the originals, use a standard page and the corresponding images/assets folder in lieu of the names about to be used.
A. Create a New Template from a Web Page
To download and prepare an existing page:
- Browse to the page in a web browser, and do a Ctrl-S or File -> Save As… to save the page. We will use http://www.hannonhill.com/demo/.
- Name the local file template.htm. Note that the web browser will automatically create a corresponding folder, named template_files, with dependent page assets like images and CSS files.
- Go to your local hard drive, and find the folder where the files were just saved.
- Zip the entire template_files folder into template_files.zip. Make sure you have zipped the folder and not just the files inside. (Zip the folder by right-clicking on the folder and then clicking Add to archive… and ensure that the Archive format is set to Zip. Another option is to right click on the folder, select Send To, and then select Compressed (zip) Folder.
With these two files – template.htm and template_files.zip – you are ready to bring in a standard web page, with associated assets, as a new CMS template.
B. Unpack a Zip Archive
Now in the CMS, you need to upload and unpack the zip file.
To upload and unpack a zip file:
- If you are still logged in as the user ‘bill’ from the first intro, please logout of the software and log back in as your original, more advanced user.
- Click on Home in the top navigation menu if you aren’t already in the asset management interface.
- Click on the folder web, in the left asset tree, created in the previous intro.
- Now that you are in our desired folder, use the top navigation menu, and select Tools -> Import -> Zip Archive.
- Click the Browse… button for the Zip Archive field and select template_files.zip.
- The Placement Folder should automatically be set to web, but this can be changed by clicking on the browse icon.
- Now click Submit to upload and unpack the zip file into the CMS.
C. Create Template from File
With the dependent template files in the system, we now need to create a new template from the saved web page file. The new template is going to be made by automatic conversion of the saved HTML file by the CMS.
To create a template from a file:
- Create a new sub-folder under /web named templates by clicking the New -> Default -> Folder button in the top navigation menu. For the templates folder, make sure to uncheck the boxes for Include with publishing and Include with indexing because a pure templates folder will never be used for either. Click Submit to record the new folder.
- While in the templates folder, use the top navigation menu and select New -> Default -> Template.
- Click on System in order to give the template a name. In this case, we will call ours standard. Note that the folder for the template is already defined as the folder you are currently in, and in this case it is web/templates.
- Click the browse folder icon next to Target, and choose the target web.
- Click back on the Content pane. You’ll leave the XML field blank and instead select a local file for the template. To do this, click the Browse… button for the File Upload field, and select the template.htm file you just saved.
- Check the box that says Convert HTML to template XHTML. This will run several routines, converting the web page to a system template. In addition, the links, images, and CSS in the file will be rewritten using the base folder of the target as the root path for this new site.
- Click the Submit button to create the new template.
If this were a modification of an existing template that is already associated with a configuration set, you could go right to a page that uses the configuration set and see the result. In this case, however, you need to assign the new template to an existing configuration set before you can preview what the new design looks like.
D. Assign Template to Configuration Set
Assign your new template to the configuration set that is already being used by your example page. To find this configuration set, you could go into the Administration area, or you could access it in the Home area, directly from the example page that uses it.
To assign a template to a configuration set (accessed from the Home area):
- In the Home area, select the web top-level folder in the left asset tree.
- Click the page example.
- Once the example page loads, click on the Configurations pane, under the View tab.
- To access the configuration set, click on the Configuration Set Web Standard link.
- You will now be taken into the Web Standard configuration set (located in the Administration area).
- Click on the View tab. Above the Properties section, next to the list of Configurations, you will see HTML listed as the default configuration. You want to change the newly uploaded template into the template associated with this configuration. Click on the Edit tab and then select the Configurations pane. Next to Template, click the browse icon. Navigate to and select your new template, web/templates/standard, and click Confirm (if it isn’t already selected).
- Click the Submit button to record the configuration change. When the View screen reloads, notice several new regions in the template with which dynamic content could be assigned (you’ll leave them blank for now).
Now that your new template has been assigned to the configuration set, go back to your page where the configuration set is used to see your page with the updated template.
There are two ways to return to the original page. You may click on Home and then navigate to the web/example page; or you can access the page in the Administration area, directly from the configuration set:
- While still viewing the Web Standard configuration set, select the Subscribers tab. This tab shows all assets that utilize this configuration set.
- Click web/example to be transported back to that page. You can see the page with the new template applied
- Click the Edit tab to bring up the editor.
- With the word processor open, type in My second change.
- Click Submit to save the changes.
Changes are reflected on the page in the default content region. With the example page ready to go, you can now automatically import the rest of the pages from the site.
Advanced Topic: Rewrite Assets Linked by JavaScript
Often times in your template you’ll have JavaScript or other code that points to assets in the CMS. To have these paths rewritten so that when published they become relative to the page, you have a special pseudo tag. For the demo site, we have code like:
The href and the src are automatically rewritten because they are standard attributes. To have the image referenced in the onmouseover JavaScript function call rewritten, the onmouseover attribute needs to be changed to:
E. Example Zip for Automatic Site Import
If you have the original files for your site, you can zip all the folders into a single zip file. If you don’t have the originals or have dynamic pages that you would like made into files, you can download and run HTTrack Website Copier from http://www.httrack.com/ to create a local site copy. For this walk through, we will use our example demo site, which can be downloaded from http://www.hannonhill.com/downloads/demo.zip and saved locally.
F. Upload and Unpack Zip File
To upload the zip file:
- Click on the web folder, located in the left asset tree, in the Home area of the system.
- From there, click Tools -> Import -> Zip Archive for the upload screen.
- Click the Browse… button for the Zip Archive field, and choose the downloaded demo.zip zip file.
- The Placement Folder will already be set to web, but this may be changed if needed.
- Now click the Submit button to upload and unpack your site files.
G. Integrate Folder Conversion
Now with all the HTML files in the system, you need to have them converted to system pages.
- From the top navigation menu, select Tools -> Import -> Integrate Folder.
- Choose the designated system folder for the Base Folder. We will choose web as our folder.
- Browse for a Base Page upon which all converted files will be based (this integrate folder process can be done several times on different folders if different page types need to be used). We will choose /web/example as our base page.
- Next, if the existing content is based on a Dreamweaver Template (our demo site is), type a comma separated list of Default Region Names. These are the names of the Dreamweaver editable regions for the main page content. The content will be chosen from the first name specified in the list that is found in the file. By default, without any regions specified in the imported files, all content between the and tags is put in the word processor region. No modifications are necessary when using the supplied demo site.
- Click the Submit button to start the integration queue. Wait 30 seconds and click on web in the left asset tree to see the resulting system pages.
All of your existing content has been converted to system pages. It is best to click through the pages and see the imported content in order to check for correctness. By default, without any regions specified in the imported files, all of the content between the body is put in the word processor region.
Tips for Preparing Content for Import
With a local copy of a static file-based site downloaded, there are several preparation steps that can be taken before bringing the content into the CMS.
1. Remove Design Elements
For pages that do not use Dreamweaver Templates or separate navigation items using techniques such as scripting or server-side includes, it is important to remove any templates or common elements before bringing the files in. For example, if a site has a common header and footer, these should be removed from the files by using a global search and replace. Using Dreamweaver MX 2004, a global search and replace of plain text or a regular expression can be performed against an entire site to remove design elements. If your site is already database driven or uses header and footer includes, you can modify the include files removing their content and making them empty. Run HTTrack against your site to make it static with only the main content in the body tags. With prepared static content, do the standard process outlined above.
2. Optimize Titles
For pages that have common title words, it is best to do a global search and replace in order to remove the common words because this information will be specified or dynamically created in the system template. For example, if every page title starts with My Company Inc. followed by the specific title information for the page, then a global search and replace should be done looking for <title >My Company Inc. – and replacing it with simply <title >. This is important because all of the static HTML page titles will be placed in the title metadata field for the system page (meta description and meta keywords will also be automatically placed in the appropriate system metadata field upon importing).
The resulting static files that are left, following these preparation steps, are bare bone files with only the core content remaining. Everything between the <body > and corresponding </body > tags will be placed in the page default content area. This content will be made available for editing in a browser-based word processor, while the HTML metadata values will be put in the appropriate system metadata fields.
With the static files converted to dynamic pages, the publish file extensions will be added based on the target settings once the content is sent to the destination servers. In the CMS, all the converted files will be standard pages with the appropriate icon.