Since a traditional website is a collection of files, and Drupal works by storing everything in a database, to convert an existing website, you must re-create each page within Drupal. The amount of time it takes to copy an existing webpage to Drupal depends on the age and quality of the code of the original website.
The following steps will not only help you convert the pages to Drupal, but also fix and update the code to use more modern techniques of HTML. Updating the coding of your pages helps with search engine placement, helps with mobile devices, and lets you change their look easily if you ever change the look of your website.
I recommend opening two browser windows side by side so that you can see the existing page for reference while you create the new page.
Get your text
- Go to the page on the existing website that you wish to copy and view the source. This is typically a menu item option that's different in each browser. This will pull up a window showing the HTML of that page. If you're not familiar with HTML, you will see that it's a combination of the text you see on the page and formatting tags enclosed with angled brackets.
- Since we're only interested in copying the content area of the page rather than the whole template including the menus, etc, find where the content part starts in the code. An easy way to do this is to use the find feature and enter the first few words in the content area. Text in HTML should be enclosed in a pair tags, you may see a <p> or <h1> or similar tag before the text that starts the content area. Include that as well as you highlight the copy for the page down to the last part of the copy text and the closing tag such as </p>.
- Sometimes it's easy to find what text to highlight because the template has consistent code at the beginning and end of the content area. For instance, in Dreamweaver, you may see an <!-- InstanceBeginEditable name="content" --> at the beginning and an <!-- InstanceEndEditable --> at the end. In that case, highlight everything inbetween but not including those tags.
- Once the text is highlighted, select "Copy" from the "Edit" menu.
- In your other browser window, go into the Drupal editor where you want to paste the text. You may need to click the edit tab if it's an existing page, or Create Content and select a node type if you're creating a new page.
- Normally, you would paste content right into the Body field and it would convert it to HTML. Since you want to enter HTML, though, you need to click the "Disable rich-text" link under the body field. The formatting icons across the top of the body field should disappear.
- Click into the body field and paste the code you copied from the original page.
- Click the "Enable rich-text" link under the body field, and you should now see the formatted version of the page you're working on.
Cleaning the Formatting
- Typically, the first thing at the top of the content area is the tite of the page. If you copied this over, this should be copied and pasted into the title field of the form and removed from the body field. If it is in all capital letters, you should retype it to use title case instead.
Spacing
- Remove blank lines: Sometimes when the editor tries to update older code, extra blank lines appear between paragraphs or at the top and bottom of the content. Be sure to go through and remove any extra blank lines. Your template will control the spacing of your text.
- Remove forced spacing: Sometimes people add extra returns to prevent a new paragraph from wrapping around a graphic. Since everyone could have different sized screens and text, this isn't a reliable method. Instead, remove the extra returns, then click on (don't highlight) the paragraph you want to start below the graphic and select "clearboth" from the styles menu. It should then move down the correct amount.
Headers
- If your page has different sections, you want to format the headers of each section. This may have been done incorrectly on the old site. To check, click on the text of the header. You should see "Heading" and a number in the format menu. If not, remove any bolding from the text so that it looks plain, then select the appropriate Heading from the format menu (see below).
- If the heading is correctly formatted as a heading, make sure it's the correct level of heading (see below).
- Headings should always be used in order and never skipped. So start with Heading 2 for section headers, Heading 3 for sub-section headers, etc.
- Remember, do not use headings to simply make something big, only use them for actual titles of sections.
- You may also want to rework the text to add headings to break up long pages. This makes your page easier to scan.
Bulleted Items and Numbered Lists
- Bullet lists give users a great way to scan your content. If you have a list of things but they're just separate paragraphs rather than a bulleted list, I recommend changing them.
- If you have bulleted items or numbered lists in your text but they don't have an actual bullet or they don't have hanging indents, they may not be formatted as an HTML list.
- To create a bulleted list, select all of the items that should be in the list and click either the Unordered List (bulleted) button or Ordered List (numbered) button
- If you're converting something that was a faked bulleted list, you'll probably have duplicated bullets now. Simply remove the original ones leaving the editor ones.
Move Over Images
Even though images may be showing up on your converted page and this may seem like busywork, we need to move the images into Drupal's system, otherwise you may lose them when you take down the original version of your site.
- Go through the original page, and save each of the images to your computer. Usually you can do this by right-clicking them.
- On your converted page, click on each graphic then click the "Insert/Edit Image" icon
on the toolbar. - Note the filename in the "Image URL" field, this is the file you'll be looking for on your hard drive.
- Click the browse icon at the end of the "Image URL" field and this wil show you all of your files in Drupal.
- If you're organizing your images into folders, navigate to the correct folder, then click the "Upload" button
- Click the "Browse" button and select the corresponding file from your hard drive, followed by clicking the "Upload" button.
- Once it's uploaded you'll see the image preview below. Click on it to select it. The window will close and you'll be back to your "Insert/Edit Image" screen with the new URL listed.
- If there is any text on the image, type it into the "Image description" field, otherwise if it's just a photo, for instance, type a space in this field.
- If there is a caption for this image, type it into the "Title" field.
- Next click the "Appearance" tab to check the other settings.
- "Alignment" should say "-- Not set --". This is an old method of aligning graphics. If it says something else, remove it. If it said left or right, select "image-left" or "image-right" as approriate from the "Class" field.
- Make sure "Vertical space", "Horizontal space", "Border", and "Style" are all blank.
- Click "Update" to return to the editor.
Linking
- If this is a new page that needs to be on the menu, see "Menu Items"
- Once your pages are converted, their URLs may have changed. You'll want to go through your pages and check all of the links to make sure they are linking to the new Drupal pages.
- Some navigation links on the page may be unnecessary now that you're moving to Drupal with an expanding menu navigation such as repeating other pages in the section at the bottom of every page. Or your original site may have used links such as Back and Top links, which are rarely used anymore.