Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


2) Working with the Editor

The body typically contains the main content that appears on a webpage. It has many of the standard editing capabilities that you would find in Google Docs or Microsoft Word.

...

There is menu bar located at the top which is used to format text, add headings, styles, links, tables, etc.

...


The editors functions are listed below.

...

  1. Undo | Redo

  2. Remove Formatting

  3. Bold, Italics, Bullet List, Ordered List

  4. Headings

  5. Styles

  6. Horizontal Rule

  7. Anchors

  8. Links

  9. Special Characters

  10. Find/Replace

  11. Tables

  12. Add Image in Body Copy

  13. Upload Image

  14. View HTML Source

  15. Toggle Full Screen

Each of the editors functions are described below.

2.1) Undo | Redo

Allows you to undo or redo any edit you make to the body copy block.

2.2) Remove

...

Formatting

Whenever you copy and paste text into Drupal from another source (Google Docs, Microsoft Word, or PDFs, etc), the pasted text will usually inherit use the font styling of the original source file (font type, color, size, etc). This font styling will likely be different from the font styling used on the Swarthmore webpagessite. The Remove Formatting function will make your removes that imported formatting and makes the text look consistent with the rest of the website. Simply highlight the text you wish correct adjust using your cursor and then click the Remove Formatting button.

Info

Please note: All the text that appears content on the website should use the standard default font same style found on the main Swarthmore website. To ensure consistency, always use Remove Formatting option when you copy and paste content into the Drupal CMS.

...

Allows you to add headings to your content. All webpages follow a standard convention of ranking of headings from H1 to H6. The Page Title (the most important element) is the H1. If you include heading/subheadings in the page content, you would start with H2 and then use H3-H6 for additional sub-headings.

Info

Please note: Whenever using headings, you must follow the proper heading sort order. This is essential for both accessibility purposes and to maintain consistency.

H1: The title of the page

H2: First point

H3: Subsection of first point

H3: Subsection of first point

H3: Subsection of first point

H2: Second point

H3: Subsection of second point

H4: Subsection of H3second point

H4: Subsection of H3second point

H3: Subsection of second point

H2: Third point

...

Adding links to other webpages or other content is one of the most common tasks you’ll be doing when creating webpages.

2.8.1) Linking to another webpage in Drupal

  1. Highlight the text you wish to become a link

  2. Click the the chain icon in the menu bar. This will open the link editor window

...

2.8.2 How the Link Editor Works

  1. Link URL - is where you would add the link or URL.

  2. Link to a Document - if linking to a document (hosted in Drupal) then you click this button.

  3. Advanced - opens/collapses the advanced tab which includes: CSS Classes, ID, and Open in a new window.

  4. Open in a new window - allows you to toggle whether the link should open in a new tab or not. The default setting is have the link open the same window/tab.

  5. Save / Cancel - click the check mark to save your edits or the x to cancel

Info

Note: It is recommended that when linking to an external website (ie not at swarthmore.edu) or to a document, that you have the link open in a new tab.

...

2.8.3 Creating a link to another page in Drupal

  1. Start typing the name of the webpage you wish to link to. For example, if you wanted to link to the “Admissions & Aid” homepage, you would type “Admissions” and every page in Drupal that has the word “Admissions” in it’s title would appear in the list below.

  2. Select the webpage you wish to link to.

...

  1. After selecting the page you wish to click to, the link editor will switch back the minimized view. In place of the page name, you will see a reference like this /node/######. This is normal. This is how Drupal keeps track of internal links.

  2. Click the checkmark to save your changes or the X to cancel.

...

2.

...

8.4 Creating a link using an URL

  1. Link URL - You can also simply copy and paste any URL into the field. This includes both external links, internal links, Google drive links, etc.

...

Info

Note: It is recommended that when linking to an external website (ie not at http://swarthmore.edu ) or to a document, that you have the link open in a new window/tab located under the advanced options.

link_open_new_win.pngImage Added

2.8.5 Creating a link to a document

  1. You add a link to a document. Select the text you wish to become a link. Always include the file type to let people know that the link points to a file and not a website. For example, add [pdf] for a pdf file.

    link_doc1.pngImage Added

  2. Click the Link to Document Button to add a new document (or select) a existing document that has been previously uploaded to Drupal

  3. It is recommended always have PDFS (or other documents) open in a new tab. You can control whether a link opens in a new tab, by clicking the Advanced tab

  4. Under the Advanced tab, slide the toggle to green to have the link open in a new window.

...

  1. Clicking the Link to Document Button will open a new window that allows you upload a new document to Drupal or select an existing document.

    5.1 Select Document - will display all the documents that has been previously uploaded into Drupal
    5.2 Upload Document - will allow you upload a new document
    5.3 Filename - lets you search the documents folder
    5.4 Name - allows you sort the folder by filename
    5.5 Created - allows you sort the folder by when it was uploaded.
    5.6 Radio Button- choose the the file you wish make become a link.
    5.7 Select Document - save your choice. You will then be returned to the previous window.

...

  1. The name of the file you selected will appear in the Link URL field

  2. Click the green check mark to add the link in Drupal.

...

  1. To edit or remove a link, click the link. The link editor window will appear.

  2. You can select the pencil icon to edit an existing link

  3. Or the paperclip X icon to remove the link.

...

2.9) Special Characters

This function allows you to add special characters (a,e,i,o,u with accents and other marks). This is most common for foreign words and names that might appear on the site

...

2.10) Find & Replace

Allows you to do a standard find and replace in the body content block.

...

Use this function to add table content to your webpage.

  1. You first select the number of rows and columns using the matrix

...

  1. Then you add your data

    table2.pngImage Added

Info

When creating a table you must select Headers and include a Caption. Both of these fields are This field is critically important - they not only make tables more understandable and readable, they also help persons with disabilities understand what the table is about.

...