Adding content directly to your site is straightforward, but you may notice that when you copy and paste content from a Word file, or an e-mail or a PDF that things get a little weird. Paragraphs don't look the way they should, the text may be very small or not match the rest of your site, etc. This is because when you copied the text, you may have also copied the formatting. This formatting fights with your website formatting producing unexpected results.
The first thing to remember is that a webpage is not a flyer, brochure, etc. It's a different type of medium, and so you format it differently. Typically, the formatting on a webpage is much simpler and informational since it doesn't need to grab people's attention from across the street. People are at your website because they want to know what you have to tell them.
Converting your documents to webpages correctly may take a little extra work, but following these steps will make them look consistent with the rest of your site which looks more professional, 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. Luckily, once you do it a few times, it gets much easier.
Get your text
- The first thing you want to do is get all the text from the document that you want to make a webpage out of. Highlight all the text in your document and copy it.
- Sometimes, particularly in complicated Word files or in some PDF files, if there are many blocks of text, it may not highlight the text in the order you want. You can either copy and paste the sections separately, or reorder them once you get them into your website.
- Next, 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.
- Click into the text field you want to paste into, usually the Body, but this works for any field that has the formatting icons across the top.
- Paste. All of the formatting from your program will automatically be stripped so you can format it for the web.
- If you need to add more text from the document, copy and use the icon to paste again until you are finished.
Now you should see all of the text from your document in your editor and there should be no formatting to it. Now you can make it look nice.
Fixing Paragraphs If Necessary
To start out, each block of text should have a little space under it and the text should wrap to the width of your editor. If this is not the case, this can be fixed using the tricks below. Many of these problems can also be avoided by changing the original document before copy and pasting which may be simpler depending on your preferences.
- Extra Spacing Between Paragraphs: Depending on how your original document was formatted, you may see blank lines in your text. Go through and delete those.
- No Spacing Between Paragraphs: Depending on how your original document was formatted, you may not see any space between your paragraphs. This is caused by soft returns. Fix this by clicking at the beginning of each paragraph, hitting the backspace key (PC) or the delete key (Mac) to remove the soft return, and then hit enter (PC) or return (Mac) to recreate the new paragraph. You should now see space between your paragraphs.
- Document is One Big Paragraph: Depending on how your original document was formatted, your entire document may be one big paragraph with the spacing between paragraphs being blank lines. Fix this by clicking at the beginning of each paragraph, hitting the backspace key (PC) or the delete key (Mac) until the text is next to each other, and then hit enter (PC) or return (Mac) to recreate the new paragraph. You should now see space between your paragraphs and not be able to click on the space.
- Text Doesn't Wrap Correctly / All the Lines are Shorter than My Window: This happens mainly with e-mails or PDF files when there is a return at the end of every line rather than at the end of a paragraph. You can just delete the extra line breaks and add correct ones until it looks right.
Adding Headers
- If your page has different sections, you want to format the headers of each section. To do this, click on the header text and change the format to the appropriate heading level.
- 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.
- If more text than what you want changes, there wasn't a return between the text. See "No Spacing Between Paragraphs" above.
Bulleted Items and Numbered Lists
- If you have bulleted items or numbered lists in your text they may not look as nice as they could. To fix this, you can convert them to webpage lists
- Select all of the items that should be in the list and click either the Unordered List (bulleted) button or Ordered List (numbered) button
- You'll probably have duplicated bullets now. Simply remove the original ones leaving the editor ones.
- There's Only One Bullet: This can happen if the editor doesn't see the items as separate paragraphs. To fix this, see "No Spacing Between Paragraphs" above.
Styling
Have your original document and editor side by side and scan through them for finishing touches.
- If the paragraphs are not standard body text, click on them (do not highlight) and select the appropriate style from the menu.
- Bold and italicize additional words as necessary.
- Tip: If you find yourself bolding or italicizing an entire paragraph, there's probably an appropriate style you should be using instead.
- If you see titles that are in all capital letters, retype them as upper and lowercase letters and format them with bold or italics instead as appropriate.
Images
If there were images in your original document, we can add those now. Focus on photographs, charts, logos, etc and ignore borders and purely decorative graphics like dingbats to keep your webpages simple and readable. If you have a graphic that's just text formatted to look fancy, it's probably best to simply type it in as regular text for your webpage.
Getting the Image
Web pages are collections of text and images, so the first thing you need to do is get the graphics as separate files. If you already have the images as separate JPG or GIF files on your hard drive, you can skip this step.
- Try right-clicking the graphic. Many programs allow you to right click to save an image to your hard drive. This is the simplest trick to try first.
- If you can't get the graphic as a separate file on your hard drive, you'll need to use a graphics program such as Photoshop. In this case, you would copy the graphic, paste it into a new file in your graphics program, and save it as a JPG or GIF onto your hard drive.
Placing Your Images
How you place your images depends on your template and how you want them to appear.
- Many of you have a photos field that you can use to simply upload the photograph. This will resize them and place them at the top of your page. If you don't have this feature, and want it, just let me know. This is the best solution.
- If you want images in other places on your website, simply click where you want the graphic, and use the Insert/Edit Image button.
Proofread
- Skim over the page again to make sure all the text was placed and is formatted correctly. Sometimes it's easy to miss little paragraphs of text when selecting them or sometimes text gets copied in the wrong order.
- Remember, the goal is not to reproduce the way the original looked exactly but to convert it to a webpage that people can get the information from. If people need to see the original version you can always link to a PDF version of the original as well.
Every document is different and depending on how well it was created can make your life simpler or more difficult. If you run into any problems, please let me know and I can add more tips to this page.