Convert PDF to a Webpage

This page provides the basic instructions on converting a PDF document to a web page. As you create content to your web page, please keep the "How to Meet WCAG (Quick Reference)" information in mind.

Convert the PDF to a Word Document

To make it easier to copy and paste content, convert the PDF to a Word document by opening the PDF in Adobe Acrobat. Then, select Menu --> Export a PDF --> Microsoft Word --> Word Document.

Screenshot of a software menu showing steps to export a PDF file as a Word document. Menu options highlighted include "Menu," "Export a PDF," "Microsoft Word," and "Word Document," indicating navigation path for file conversion.

Create the Web Page in ModernCampus

Log in to ModernCampus and go to the folder where you want to create the web page. In this example, we're going to the services-forms-policies folder in the Accounts Payable and Travel website. Select the DropDownList on the right of the + NEW button (1) and select "A Webpage: HTML" (2).

Screenshot of a content management system interface showing a dropdown menu under a "+ NEW" button with options to create a folder, webpage (HTML), component info blocks, left navigation, or web setup configuration. The interface includes a navigation bar with Dashboard, Content, Reports, Add-Ons, and Setup tabs, and a file list displaying a policy document named "doa-for-trave-policy-exceptions."

Enter the web page information and click the CREATE button.

The naming convention of the Filename is all lower-case and separate each word with a hyphen (-).

Screenshot of a webpage form for creating or editing an HTML page titled "Qualifying Items for Check Request." Form includes fields for page title, breadcrumb visibility, sidebar display, body class, filename, overwrite option, and access group, with "Create" and "Cancel" buttons at the bottom.

Once the web page is created, the next step is to create the layout of the page. In this example, we're going to use two boxes (Box 1 and Box 2) and one section for each box. For more information on how to use the layout builder, please go to the Page Layout Options & Tools web page.

Screenshot of a web page layout manager interface showing settings for body CSS, layout for boxes, and layout catalog with options to add rows, columns, and sections. The interface includes a warning message "Please Choose A Layout Box," buttons to reset or hide sections, and a layout preview displaying two numbered boxes labeled "1" and "11."

Once the layout is finalized, copy the text in the Body CSS field and update the Body CSS section on the page.

Screenshot of a software interface showing a properties editing panel with a section labeled "Body Class" containing a green checkmark and the text "Body CSS." The panel includes fields for Title and Description, with a note indicating the page has a title but the description is missing or too short.

Click on the "Background Styles and Images" icon (1) and update the CSS for Box 1 with the values shown (2). The value stock-graphic-17 is the photo stock name at the Campus Stock Photos: Web Ready web page. The middle-left value is the content placement style at the Placement: Content & Images web page.

Screenshot of a software interface showing a "Backgrounds" panel with tabs for Boxes, Top Media, Sections, and Page. The Boxes tab is active, displaying multiple green-labeled CSS and image box options, with "CSS For Box 1" and "stock-graphic-17 middle-left" highlighted, alongside navigation icons at the top.

Edit Section 1 and enter the title of the document as Heading 1. Optionally, you can also enter additional information regarding the document as a paragraph and then assign the "Medium Text" style.

Then, edit Section 1 and copy and paste the content of the document from Word. Before you paste the content, make sure to click the "Paste as text" icon. Make the necessary changes to the content as needed.

Screenshot of a text editor toolbar highlighting the "Paste as text" icon with a red outline. Toolbar includes icons for undo, cut, copy, search, text formatting, and paragraph styles, indicating editing and formatting options.