In this video, we will cover the first steps in creating a Webpage.
The Page Content Field is the Content Editor, also known as the WYSIWYG editor, which is an acronym for “What You See Is What You Get”. This is where we will add content like text, images, and documents to the webpage.
To give text a heading, just place the cursor in the P or DIV container, and select the desired heading from the Styles drop-down menu.
In this video we will go over how to upload images into Drupal, how to insert them into the content area of a webpage, and how to format them.
Once we’re done editing a webpage, our final step is to save it.
Method 1: Use the corners
When you select an image, there are hot points on all corners and edges of an image. An image can be resized by clicking and dragging those hot points. Make sure that you are only using the corners since using the edges will distort the image.
Question: What if I accidentally distort an image? How do I bring it back to its normal proportions?
Answer: In the Image Properties, click the blue padlock so that it’s locked. This will restore its original proportions. (See Method 2 for details)
Please note: Hot points are not available in Chrome, so if Method 1 is for you, use Firefox instead.
Method 2: Adjust the Image properties
a) Select the image, b) Select the Image tool in the WYSIWYG toolbar, c) Make sure that the blue padlock is locked (next to the height and width properties). If the padlock is unlocked, click on it to lock it.
d) Adjust either the height or width. If you adjust the height, the width will automatically change in order to retain proportions and vice versa.
It is important to avoid using punctuation in a Webpage title. Examples of punctuation to avoid are commas, colons, expression marks, and every other type of punctuation mark you can think of.
When creating a Webpage, one of the first steps is to enter a Page Title. The Page Title not only becomes the main heading for your content, but it also defines the URL of the Webpage you are creating.
For example, in the Future Students section, for the Webpage titled “Why UNBC”, the URL is unbc.ca/future-students/why-unbc.
The title of the page determines the URL, so if this page was titled “Why is UNBC Awesome” then the URL would be unbc.ca/future-students/why-unbc-awesome.
However, if the title was “Why is UNBC Awesome?” with a question mark, this would cause problems with the URL because URL’s don’t use punctuation, and Drupal doesn’t know what to do with them when it wants to convert the title into a URL. This title “Why is UNBC Awesome?” with a question mark would make a URL like unbc.ca/future-students/why-unbc-awesome%, that is with some strange code trying to make up for the punctuation.
Here is an example of a real URL in the website with this problem: http://www.unbc.ca/releases/8047/%E2%80%9Cexplorer-millennium%E2%80%9D-headline-dr-bob-ewert-memorial-lecture-and-dinner
Take note of the % marks appearing in this URL. Now click on the link and look at the url and the Page Title of the actual webpage. Notice that the URL has punctuation marks in it.
And so, don’t ever use punctuation in the Page Title field.
The Templates tool is the most important tool in the WYSIWYG editor. Anytime that
you add content, it must be placed in a Template. We have created Templates to help
organise your content within a webpage, keep up with web standards and improve
accessibility within the UNBC website.
When placing an anchor in your content, don’t select the whole word. Simply place your cursor at the start of the word, and your anchor will be created in the right place.
Never copy and paste content directly into a web page from Microsoft Word.
UNBC Uses Web Style Sheets
All content on the UNBC website is designed with specific styles for text in terms of font, sizes, colours and more. This helps all content share a common look and feel so that it is distinctly recognizable as being UNBC branded. It’s not just about branding, however; it’s also about creating a strong user experience.
The use of common styles across the website means that a web user can easily browse the UNBC website and scan content without having to relearn how content is presented.
Microsoft Word also uses Styles
And they are not the same as the UNBC web styles.
Microsoft Word is a word processing tool and is not meant for publishing web content. Fonts in Word may not be accessible online; text sizes are defined by styles and code meant for printing, not for the web; etc. The coding used by Microsoft Word to define styles of content for word processing just does not work online.
Copy/Paste from Word Corrupts Web Code
When you copy content directly from a Word document, the styles defined in Word will attach to that content and be pasted into the web code along with your text.
Code that has carried over MSO (Microsoft Office) code is easily identifiable:
What Goes Wrong
It is nearly impossible to style content with MSO code attached using UNBC’s web styles. The web code will have a very hard time resolving what should display. And not just about what text to make Header 3, but it can break the entire layout of the webpage.
When the UNBC website migrated into Drupal, we encountered many pages with MSO code. As the old content management system used outdated HTML standards, these pages would
often display fine. Now that we are using current web standards, this is no longer the case.
Here are some screenshots of some worst case examples of how MSO code broke UNBC webpages:
Recognizing the Problem
You might have an MSO code problem if you find that you are having difficulty editing a webpage, even when following simple, step-by-step editing directions.
MSO code has caused problems ranging from not being able to apply UNBC web styles, to content disappearing or shifting on the page, to not even being able to edit/select text on the page.
Fixing the Problem
There are two options:
- Review and repair the code on the page, line by line.
- Start from scratch.
Most often, we will delete all content and code from a page that has MSO code embedded within it as repairing the code manually is simply too time consuming and prone to error.
Preventing the Problem
Preventing this problem is easy peasy.
Simply past your content from MS Word using the “Paste as Plain Text” button within the Drupal WYSIWYG editor.
This will remove all formatting and MSO styles and paste your content into the page as plain text. It’s just like copy and pasting your content through Notepad before pasting in the web page.
From there, you can add appropriate styles as selected from the UNBC web styles.
Tip: Don’t waste your time formatting your content in Word if it will be displayed online. You’ll just end up doing it again in Drupal.
- MS Word is excellent word processing software.
- MS Word is not meant for web publishing.
- Editing pages that have MSO code embedded within them is a nightmare.
- Never copy and paste into a web page directly from MS Word.
- Always use the “Paste as Plain Text” when copying content from MS Word into a web page.