Drupal Training Series
Discover Drupal 6
Basics
This work is licensed under a Creative Commons AttributionNonCommercial-ShareAlike 3.0 United States License
What We’ll Be Covering…
CMS Overview
Permissions & Access Roles
Usability Concerns
Getting Started
• Ex. 01 Log into Discover Drupal 6
Page Content Type
• Ex. 02 Create a Page Node
Locating Nodes
• Ex. 03 Using the Content View
Revision Tracking
• Ex. 04 Create a Revised Draft
WYSIWYG Editor
•
•
•
•
Ex. 05 Using the WYSIWYG Editor
Ex. 06 Paste Text from Word
Ex. 07 Change Text Styles
Ex. 08 Change the Input Format
Links
• Ex. 09 Create an Anchor Link
• Ex. 10 Create an Internal Link
• Ex. 11 Create an External Link
URLs
• Ex. 12 Toggle Automatic Alias Feature
• Ex. 13 How to Locate a Node Reference
File Attachments
• Ex. 14 Attach a File
Basic Menus
• Ex. 15 Add a Menu Item
The Value of a Plan
Conclusion
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
2
CMS Overview
Content Management System (CMS)
• Computer software, or group of interdependent software
applications, used to create, edit, publish, and manage
different types of content in a consistent and orderly
fashion
Web Content Management System
• A CMS designed to simplify web-based publications for
users who author web based content
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
3
CMS Overview: What is Drupal?
Drupal is…
• A Web Content Management System
• CMS of choice for CWS
• A framework originally written by
Belgian computer scientist Dries
Buytaert, PhD as a Bulletin Board
System (BBS)
• An open source project as of 2001
• Hosted at OSU’s Open Source Lab
Very active programming community at http://drupal.org
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
4
Permissions and Access Roles
Permissions are what particular users are allowed to do within a
particular website
• Security feature
• Provides organization and responsibility levels for team
based initiatives
Access Roles are categories of users, each with different levels of
permissions
OSU Drupal 6 has three different Access Roles
• First level: Author
• Second level: Advanced Author
• Third level: Administrator
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
5
Permissions and Access Roles: Author Access Role
First permission level
Permissions include
• Create, edit, & publish all default
content types
– Upload & embed images
– Embed video content

OSU Media Manager
– Use Full-HTML input
– Change styles on a per-page basis using
Edit CSS Style button in text editor
• Administer Menus
• Administer Taxonomies
• Administer some layout elements
– Enable default blocks
– Create custom blocks
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
6
This role would be for someone who only
needs to contribute or edit site content
Permissions and Access Roles: Advanced Author Access Role
Second permission level
Has same permissions as Author
Other permissions include:
• Create custom content types
– CCK
• Administer data queries & displays
– Views
• Create Glossaries
– Context sensitive help feature
This role would be for someone who
needs to work as a site developer –
someone who needs to perform some
type of programming or site structure
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
7
• Utilize PHP code
– Scripting language used for producing
dynamic web pages
Permissions and Access Roles: Administrator Access Role
Third permission level
Has same permissions as others
Other permissions include:
• Ability to change site settings
–
–
–
–
Themes
General Site Information
Change module configurations
Add & manage directories
• User Management
–
–
–
–
Add new users through Drupal interface
Raise or lower existing user Access Level
Create custom Access Roles
Create custom Permission Sets
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
8
This role would be for someone who is in
charge of managing the users on a site –
this role may or may not work in a
programming or site structure capacity
Usability Concerns
Usability, as it relates to web publications, usually refers to how
clearly a web site is designed and how accessible it is to a wide
audience. There are a few different things to consider here
including, but not limited to:
• How clear is the navigation?
• Has thought been given to users with disabilities?
• Does the site work with many different browsers?
• Do features actually work as they are supposed to?
Throughout all Drupal workshops, if there are potential usability
issues, they will be addressed in their corresponding sections.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
9
Learning Environment
A common fear in technology classes is that something will get
“broken”.
Central Web Services has developed a training area specifically for
new users. You might make a mistake or two, and it’s all right if
you do.
The training area we’ll be using, Discover Drupal, is a multi-user
site. This means that everyone is working on the same site at the
same time.
This is an interactive class. Don’t be afraid to speak out
concerning any questions or comments.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
10
Getting Started
Just so everyone is on the same page, please use Mozilla Firefox as
your browser.
This is to ensure consistency
between all participants, class
materials, and the instructor.
To get to the Discover Drupal 6 Training site go to:
http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
11
Getting Started: Anonymous v. Authenticated Users
When you first encounter the Discover
Drupal 6 website, notice the lack of menus.
This is what the general public, who are
referred to as anonymous users, will see if
they were to visit this site.
Right now, you are considered an
anonymous user – the Drupal site does not
recognize you.
An authenticated user, someone who is
registered with the site, will see something
a little different upon logging in…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
12
Getting Started: Ex. 01 Log Into Discover Drupal 6
http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6/login
To log in to the Discover Drupal training
site, do the following:
1. Type the word login at the end of
the URL
2. The ONID login dialog box appears
3. Enter your ONID username and
password
4. Click the Login button
5. Once logged in, the
Administration menu will display
at the top of the screen, which is
where all of the controls are.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
13
2
3
4
5
1
Getting Started: Administration Menu
The Administration menu, located at the top of the screen, can
only be viewed by logged in users.
The menu items at the furthest left, Content management and Site
building, are the only menu items we’re concerned with at this
point.
Hovering on these items will drop a sub-menu down.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
14
Getting Started: Single Sign On Service (SSO)
OSU Drupal 6 utilizes a web service called Single Sign-On Service
(SSO). This service allows ONID users to use many different web
applications at one time without having to log in to each one
separately.
There is a time limit on SSO. If nothing is submitted or saved
within a certain time period, the user will be disconnected from
ONID.
It’s good computing practice, in general, to save content on a
regular basis (about every 15 minutes or so).
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
15
Getting Started: Basic Content Terminology
Drupal has many terms. Here are a few to get started:
Content: Any sort of material published in a Drupal site
– Text
– Images
– Video
Content Type: The form that is used to create a particular
type of content. The standard content types in OSU Drupal
6 are:
–
–
–
–
–
–
Album
Announcement
Book Page
Page
Poll
Story
Node: A general, collective term for all content types
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
16
Page Content Type
OSU Drupal 6 offers many different Content Types to work with.
Today, though, we’ll focus on just one of them, the Page content
type.
The Page content type is best suited for static information. Static
information is information that doesn’t change very often. A good
example is the kind of information that’s commonly found on an
“About Us” or “Contact Us” web page.
Within this one content type, we’ll explore a few different things,
including some general features that are found on all default
content types and basic use of the text editor.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
17
Page Content Type: Ex. 02 Create a Page Node
To create a Page node, do the
following:
2
1
1. Within the Administration
menu at top, click on
Create Content > Page
2. A new Submit Page form
opens
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
18
Page Content Type: Ex. 02 Create a Page Node - Page Features
1
2
On the Page content type, at the top,
we have:
1. Title field
2. Menu Settings group
– Menu Link Title field
– Parent Item drop-down box
– Weight drop-down box
3
3. Body field
4. Disable Rich Text toggle
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
19
Page Content Type: Ex. 02 Create a Page Node – Page Features (continued)
On the Page content type, at the
bottom, we have:
1. Input format group
1
– Filtered HTML option
– Full HTML option
2
2. Book Outline group
3
– Book drop down box
– Weight drop down box
4
3. Revision Information group
5
4. URL Path Settings group
6
7
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
20
– Create New Revision toggle
– Log Message field
– Automatic Alias option
– Alias field
5. File Attachments feature
6. Authoring Information group
7. Publishing Options group
– Published option
– Promoted to Front Page option
– Sticky at Top of Lists option
Page Content Type: Ex. 02 Create a Page Node – Add Content to Page
To add your first bit of content:
1
1. Enter some text in the Title
field
2. Enter at least two lines of
text in the Body field
2
3. Click on the Publishing
Options group to open it
4. Uncheck the Published
option
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
21
Page Content Type: Ex. 02 Create a Page Node – Preview Draft
To preview the content:
1. At the bottom of the form, click the Preview button
2. A Preview screen will appear at the top of the form
2
1
Note: A preview will show a yellow background. Depending on
your monitor settings, sometimes this coloration may not be
very obvious.
Also notice the slight difference between the Preview screen and
the editor field. The Preview screen is how content will appear
when published.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
22
Page Content Type: Ex. 02 Create a Page Node – Save Draft
To save the node:
1. Click the Save button
2. A notification will appear that a draft of the
content has been saved
2
Note that once you save,
an Edit tab appears at the
top of your content area
1
Note: A draft preview will show a pink background. Depending on your
monitor settings, sometimes this coloration may not be very obvious.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
23
Locating Nodes
You may notice that we didn’t even bother setting a menu link for
the node that was just created.
Draft nodes will not display a menu link at all – even if one is set.
When nodes are in the draft state, they are not visible by
anonymous users and any menu links that are associated with the
node are disabled.
You can still locate and access your draft material, though, by using
the Content feature.
This particular feature is a view of all content on the site.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
24
Locating Nodes: Ex. 3 Using the Content View – Filtering Results
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
25
4
With large sites, it can be tedious
trying to find one particular node.
Filter tools are provided at the top
to help locate the node you want.
To filter the list of content shown:
1. In the Admin menu, click on
the Content Management >
Content menu item
2. Leave the Status option
selected
3. In the top drop-down box,
change Published to Not
Published
4. Click the Filter button
Locating Nodes: Ex. 3 Using the Content View – Viewing Your Node
To view a draft:
1. Click on the desired title in the
list of unpublished content
2. A view of the draft content will
appear
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
26
Revision Tracking
The ability to apply revision tracking to both published and draft
content is a great benefit that Drupal supplies.
Utilizing revision control may be desirable for a few different
reasons including:
• Group projects where many contributors are working on
the same document
• Security for works-in-progress
• Convenience if a roll-back to a previous version is desired
By default, the revision capabilities are set to be enabled on an
“as-needed” basis. The ensuing process must be followed every
time you wish to add to the revision history.
Site administrators have the option of making revision tracking an
automatic process, though, if desired.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
27
Revision Tracking: Ex. 04 Create a Revised Draft
1
2
3
4
5
6
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
28
To track a revision, do the
following:
1. Click on the Edit tab above
the preview to open the
content in edit mode.
2. Add another line of text in
the Body field
3. Scroll down to the Revision
Information group and click
to expand it
4. Check the Create New
Revision box
5. Describe the change made in
the Log Message field
6. Click the Save button
Revision Tracking: Ex. 04 Create a Revised Draft – View Revision List
To view the revision list:
1. Click on the Revisions tab at the
top of the screen
2. A list of content revisions appears
3. A few operations can be
performed from here
a. View content by clicking on desired
Date and Time link
b. Revert content by clicking on the
Revert link
c. Delete content by clicking on the
Delete link
1
2
4. Click on the top revision in the list
to open the most recent draft
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
29
WYSIWYG Editor
Web-based WYSIWYG text editor module
• WYSIWYG = What You See Is What You Get
• Allows users to utilize a text editing interface similar to a
word processing application versus coding in HTML
HTML Code
WYSIWYG Editor
• Individuals can toggle this feature on and off at their
discretion
• Leave this feature enabled for this workshop
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
30
WYSIWYG Editor: Ex. 05 Using the WYSIWYG Editor
To edit a draft from view mode:
1. Click on the Edit tab to open in edit
mode
2. The editor appears with the Rich
Text Editor tool bar
1
– Very similar to existing text editor
toolbars available in programs such as
MS Word
3. Hover over an icon for a second to
see the name / function of the
button
3
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
31
WYSIWYG Editor: Ex. 05 Using the WYSIWYG Editor – Changing the Format
The Format drop down menu
contains pre-set attributes for fonts
which include point size and font
type
1. Highlight the first row of text in
the Body field
2. Click on the Format drop-down
menu to open it
3. Click on one of the options in
the list
The highlighted row of text will
change according to the format
selected
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
32
2
1
3
WYSIWYG Editor: Ex. 05 Using the WYSIWYG Editor – Changing the Font Effect
The available font effects are Bold,
Italic, and Underline. To change
the font effect:
2
1
1. Highlight the first row of text
again
2. Left-click on the Italic button
to activate the Italic effect
The selected text will change and
display an italic effect
Try some other font effects
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
33
WYSIWYG Editor: Ex. 05 Using the WYSIWYG Editor – Applying Bullets
To add bullets (or numbers):
1. Select the second and third
rows of text
2. Click on the Unordered List
button to activate the Bullets
effect
Note that bullets are referred to as an
Unordered List and numbers are
referred to as an Ordered List
The selected lines of text will display
bullets
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
34
2
1
WYSIWYG Editor: Ex. 05 Using the WYSIWYG Editor – Indenting Text Lines
2
1
To indent text lines:
1. Highlight the third row of text
2. Click on the Indent toolbar
button to indent it
Note how the solid bullet changes
to a hollow, sub-bullet
To break out of the bullets, just hit
enter a few times.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
35
WYSIWYG Editor: Ex. 05 Using the WYSIWYG Editor – Preview Format Changes
Let’s take a look at the progress to
date:
1. Scroll to the bottom of the
editor and click on the Preview
button
2. The preview screen appears at
the top of the editor
3. It’s not much, but it’s getting a
little more interesting. Click on
the Save button
2
3
1
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
36
WYSIWYG Editor: Ex. 06 Pasting Text
Different word processing programs contain different
programming elements. Different web browsers also contain
different programming features.
In many situations, pasting directly from one text editor into
another one can cause some strange formatting behavior.
For OSU Drupal 6, the WYSIWYG text editor will accept paste
entries directly from MS Word using both Internet Explorer and
Firefox.
Using different word processing software, such as Open Office
Writer or WordPerfect, along with different browsers, such as
Safari, may sometimes yield some strange formatting behavior.
Text that is pasted in from a web page utilizing valid HTML/CSS will
translate fine, but remember that your theme's CSS will be applied
versus the CSS from the source page you copy from.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
37
WYSIWYG Editor: Ex. 06 Pasting Text – Copy Word File
2
1
3
To copy the example document:
1. Click on the ex-06.doc file in your
lab materials folder
2. Note the formatted text in the file:
– Calibri font
– Larger, bold headers
– Bulleted list
3. Select all of the text in the
document by pressing the Ctrl + A
keys
4. Copy all of the text in the
document to your Windows
clipboard by pressing the Ctrl + C
keys
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
38
WYSIWYG Editor: Ex. 06 Pasting Text – Paste Word File
To paste from Microsoft Word:
1. Place the cursor after the existing
text and enter down to make
space
2. Press the Ctrl + V keys to paste the
text directly into the text editor.
2
1
Enter down to about here
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
39
WYSIWYG Editor: Ex. 06 Pasting Text – Preview MS Word Paste
Preview the draft
A clean preview should appear
Larger Sub-Headings
The pasted content should have larger
sub-headings and bullets
Note, though, that the font is not the
Calibri font used in the Word
document. Instead, it’s Arial.
This is the theme at work. It’s taking
some information from Word and using
it, but the theme is overriding some
styles. This is normal.
Bullets
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
40
If everything is satisfactory, click on the
Save button
WYSIWYG Editor: Styles
While exploring the Discover Drupal 6 site, it can be observed that
some elements within the site are consistent.
•
•
•
•
The background is always the same
The menu items all look similar
The colors for certain items, such as headings, are consistent
Some images are always the same and are located in the same
place
What’s occurring here is that the Drupal site is “being told” how to
look from a set of styling commands known as Cascading Style
Sheets (CSS). CSS is what is used to create the Theme of the
Drupal site.
In the standard installation of OSU Drupal 6, the only role that can
change the theme is the Administrator.
Authors can override some style settings on a per-page basis,
though.
Let’s find out how to do this…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
41
WYSIWYG Editor: Styles – Ex. 07 Change Text Styles
To edit the CSS Style on your node:
1. Click the content type Edit
tab to open in edit mode
2. Highlight the area in the
Body to receive a style
change
3. Click on the Edit CSS Style
toolbar button
4. The Edit CSS Style dialog box
opens
There are many features here that
a user can get lost in – so let’s just
stay on the Text tab for now
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
42
1
3
4
2
WYSIWYG Editor: Styles – Ex. 07 Change Text Styles – Edit CSS Style Dialog Box Text Tab
Text Properties:
1. Font drop-down field
1
2
3
4
5
6
7
8
Changes font type (Arial, Times NR, etc)
2. Size drop-down field
Field one – size of text
Field two – units of measure
3. Weight drop-down field
9
Boldness of text
4. Style drop-down field
Slant of text – normal, italic, oblique
5. Variant drop-down field
Allows for all small caps
6. Line Height drop-down field
Field one – set desired value
Field two – units of measure
The best way to get to know the Edit CSS Style dialog
box feature is to use it. Experiment around and see
what things do.
7. Case drop-down field
Force all caps, all smalls, or capitalize first word
8. Color field / palette
Choose a color
It can actually be pretty fun.
9. Decoration options
Decoration options such as underline, blink, etc
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
43
WYSIWYG Editor: Styles – Ex. 07 Change Text Styles – Change Line/Paragraph Text Color
To change the color of a text line,
such as a sub-header or paragraph,
do the following:
1. Highlight the line of text
2. Click on the Edit CSS Style
toolbar button
3. Click on the little window
next to the Color field - this is
a color browser button.
4. The color browser will appear
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
44
2
1
3
4
WYSIWYG Editor: Styles – Ex. 07 Change Text Styles – Change Line/Paragraph Text Color – Browser
2
1
3
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
45
There are four ways to find or
apply the color you want:
1. Color Picker tab
2. Palette tab
3. Named tab
4. Or, if you already know the
hex value of the color you
want, you can enter it in any
of the fields on any of these
options, or directly in the Text
tab Color field – bypassing
the Color Browser entirely.
WYSIWYG Editor: Styles – Ex. 07 Change Text Styles – Change Line/Paragraph Text Color – Painter
There are two buttons at the bottom of the Edit CSS Styles dialog
box: Update and Apply.
The Update button is for when you are completed using that style.
It will close the Edit CSS Style dialog box and update your page.
Apply can be used as a format painter, though. For example, if you
wanted to apply the same color and style to all of the headers, just
make a new selection. If you’re only using one monitor, the Edit
CSS Style dialog box will be hidden under your browser – but it will
show at the bottom of your screen. Just click on the Edit CSS Style
item at the bottom of your screen to bring the dialog box back into
focus, and hit Apply again.
When you’re done making all changes, click the Update button.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
46
WYSIWYG Editor: Styles – Ex. 07 Change Text Styles – Changing Text Excerpt Colors
Changing the text color of an excerpt in a
paragraph can sometimes be helpful to add
emphasis. It’s tricky with CSS, though, as the
system tries to change the entire paragraph
to the new color.
There’s a way to do it though:
1. Highlight the desired text including the
space before and after
2. Click the Bold tool button
3. Highlight just the word again
4. Click the CSS Edit Style tool button
5. Enter the hex value, if known, or click
the color picker and Apply a color
6. Click the Update button on the Edit CSS
Style dialog box
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
47
1
2
5
6
3
4
WYSIWYG Editor: Styles – Ex. 07 Change Text Styles – Usability Concerns
Along with the ability to change something as simple as color,
comes the responsibility to consider potential outcomes.
According to the Howard Hughes Medical Institute, some form of
hereditary color blindness affects approximately 7% of American
men and about .4% of American women. This does not count
color blindness that occurs due to injury.
There are different types of color blindness: blue-yellow, redgreen, and total. Use caution with color changes to ensure
usability for your audience as a whole.
No Color Blindness
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
48
Blue-Yellow Color
Blindness
Red-Green Color
Blindness
Total Color Blindness
WYSIWYG Editor: Styles – Ex. 07 Change Text Styles – Preview Style Change
Click on the Preview button at the
bottom of the editor
Some of the style changes aren’t
showing.
You may be wondering why the preview
doesn’t show any style changes. Let’s
find out why …
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
49
WYSIWYG Editor: Input Formats
An Input Format is the type of input that a content provider is
allowed to enter into a Drupal site.
Different access roles can have different input format
permissions. There are a few reasons for having this type of
feature, but the most important is the overall security of the site.
Some types of code, such as PHP, can break a site, either
accidentally or intentionally.
Authors can use both Filtered HTML and Full HTML input formats.
Filtered HTML strips all but the most necessary of HTML tags out
– including ones that change style. This is the default setting for
all pieces of content. Full HTML allows a user to make style
changes.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
50
WYSIWYG Editor: Input Formats – Ex. 08 Change the Input Format
To change the input format:
1. Scroll down the page to the Input Format group
and click on it to expand it
2. After the Input Format group opens, select the
Full HTML option
1
1
2
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
51
WYSIWYG Editor: Input Formats – Ex. 08 Change the Input Format – Preview Input Format Change
Preview the draft
All style changes that you’ve applied
should now appear
If everything is in order, click on the
Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
52
WYSIWYG Editor: Links
The Hyperlink, or Link, is the oldest conceptual element on the
Web, in fact, the Web was actually created specifically to use
linking.
There are three main categories
of Links:
• Anchor (aka “On Page”)
– Jumps to another location
within the web page
• Internal (aka “On Site”)
– Jumps to a different web page
within the same web site
• External (aka “Off Site”)
– Jumps to a page on another
web site
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
53
WYSIWYG Editor: Links – Ex. 09 Create an Anchor Link
To create an Anchor link, first insert an
Anchor:
1
1. Click the content type Edit tab to
open in edit mode
2. Add the following three reference
above the text pasted in from Word:
– Drupal Core
– Core Modules
– Core Themes
3. Select the Drupal Core sub-header
4. Click the Insert/Edit Anchor tool
button to open the Insert/Edit
Anchor dialog box
5. Enter the name drupal-core in the
box
4
2
5
6
3
Note: Use all small case, no spaces
6. Click on the Insert button
7. A small anchor appears near the
Drupal Core sub-header
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
54
7
WYSIWYG Editor: Links – Ex. 09 Create an Anchor Link – Insert a Link
2
1
3
4
5
Next, insert the link:
1. Select the Drupal Core reference
2. Click the Insert/Edit Link tool
button to open the Insert/Edit Link
dialog box
3. Select drupal-core from the Anchor
drop down field
4. Add some descriptive text into the
Title field
5. Click the Insert button
The new link will switch to a blue,
underlined hyperlink
Remember: An is where a link leads to. Most often,
with On Page links, this is at the bottom of the page.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
55
WYSIWYG Editor: Links – Ex. 09 Create an Anchor Link – Preview & Test
Preview the work to view
and test the links
As each reference in the link
list is clicked, the screen
should jump to the
corresponding anchor
If everything works
correctly, click on the Save
button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
56
WYSIWYG Editor: Links – Ex. 10 Create an Internal Link
First, create a reference:
1. Click the content Edit tab to open
in edit mode
2. Type the words Check This Link
Out beneath the anchor link
references
3. Highlight the newly added row of
text
4. Click the Align Right tool button
to right align the text and
distinguish it from the anchor
link references
2
Insert new line of text here
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
57
1
4
3
WYSIWYG Editor: Links – Ex. 10 Create an Internal Link – Insert the Link
Next, insert the link:
1. Click the CMS Link tool button to
open the CMS Link dialog box
1
This dialog box contains a list of all
aliases used by this particular Drupal
site
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
58
2. Select the congratulations menu
item
3. Click the Insert button
WYSIWYG Editor: Links – Ex. 10 Create an Internal Link – Preview & Test
Preview the page to view and test
the links
Clicking on the internal link should
open another window with a page
from our training site
If everything works correctly, click
on the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
59
WYSIWYG Editor: Links – Ex. 11 Create an External Link
1
3
2
4
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
60
To create an External Link:
1. Click the content Edit tab to
open in edit mode
2. Select any unlinked word
within the editor
3. Click the Insert/Edit Link tool
button to open the Insert/Edit
Link dialog box. Fill out the
information as shown in the
example. And enter your
favorite URL.
4. Click the Insert button
WYSIWYG Editor: Links – Ex. 11 Create an External Link – Preview & Test
Preview the page to view and test the
links
Clicking on the external link should open
another window containing the Drupal
home page
If everything works correctly, click the
Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
61
URLs
A URL, or Uniform Resource Locater, is a pointer, or address, to a
page or resource on the Web. Sometimes this might also be
known as a URI (Uniform Resource Identifier)
Let's take a second to understand how a URL works.
1
A user on a client machine, such
as a personal computer, enters a
web address in the URL bar, or
clicks on a hyperlink.
2
A signal, known as a
request, is sent through
many different devices,
often over thousands of
miles, to a web server.
This signal says “serve me
up the information at this
address”.
4
The packets are then
reassembled as they are
returned to the client machine
and the requested item is
displayed in the user’s browser.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
62
3
A web server is a big storage
computer that can hold millions
of different files. When a request
is made of the web server, it
locates the information, breaks it
into lots of pieces called packets
that are then sent to the client.
Web Server
Keep in mind, this is all
happening in a matter of
seconds!
Also keep in mind that the web server
may have many other different clients
around the world making the same
request at the same time!
URLs: Page Not Found
Given the process that a web page request has to go through, it’s
understandable why the URL has to be correct for the information
to be provided by the server.
Most of us are familiar with the dreaded 404, or Page Not Found,
message:
A 404 message will appear for a
few different reasons:
• User mistypes a URL in the
address bar
• A link is incorrectly set by the
content provider
• A web page using an absolute
URL is moved and not
redirected
• A web page is removed
• An alias is changed and the link
is not updated
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
63
URLs: Absolute v. Relative URLs
There are a couple of different types of URLs:
• Absolute
A URL that points directly to a file on the Internet
“http://drupaldev.cws.oregonstate.edu/training/discover-drupal-6/home”
• Relative
A URL that points to a another file/directory in relation to itself
“/home”

This tells the computer to move to the “top” of the Discover Drupal 6 site
directory in which all of the files relative to this site are stored – from this
starting point, the system “counts down” to the correct directory to find
the necessary file
Sometimes a picture helps…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
64
URLs: Why Relative URLs are Preferred
An absolute URL only tells the computer the
location of a particular resource
A relative URL tells the computer how to get
to that resource
• Simplifies site migration
– When CWS installs a development site for an OSU user, it
is initially put in a secluded area where users outside of
campus, or search engines, can not discover it. This area is
called “drupaldev”.
– When a site is ready to “go live” CWS programmers
physically move all of the site’s files to the location where
the site needs to reside.
– With Absolute URLs, all internal links would have to be
manually reset because they will be pointing to
“drupaldev.cws.oregonstate.edu/my-site” instead of
something like “oregonstate.edu/my-site”.
– With Relative URLs, this is not necessary
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
65
This is the “back end” of the Discover Drupal 6 site.
It’s just a tiny fragment of a much, much larger
directory system in use at OSU.
URLs: Things to Watch Out For
URLs can sometimes be confusing because they affect everything
on a website. Fortunately, Drupal and it’s different modules
handle much of this automatically for you. Where Drupal doesn’t
have a solution, CWS has created one for you:
• Menu Items
−
When you use Drupal’s built in menu system, all links are
automatically relative
• Embedded links (links that are within your content area)
−
−
For anchor and external links, the Add/Edit Link tool (the chain
button on your WYSIWYG editor) automatically handles this for you.
For internal links, the CMS Link tool (the house with the chain button
on your WYSIWYG editor) has been created by CWS for you
• Embedded links to things such as files
−
The Add/Edit Link tool is used for this – we’ll cover it in more detail in
the following class
• Embedded media such as images and video players
−
Special tools also exist for this which will be covered in the next class
The final URL related item we need to consider is the URL Alias…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
66
URLs: URL Aliases – What An Alias Is
Whenever a node is created in Drupal, the system assigns it a
unique numerical identifier referred to as a Node ID in Drupal
speak.
• If a node titled “My Biography” were created, and it was the
10th piece of content to be created on a site, Drupal would
recognize it this way: node/10
• If the URL http://www.my-drupal-site/node/10 were used,
the page “My Biography” page would appear
• node/10 isn’t very user friendly, though
A URL alias is, basically, a “nickname” that you give your web
address to make it easier for your users to remember.
Simply put, with an alias you’re telling Drupal ‘node/10 also equals
the name “my-biography”’ – Drupal then relates the two and
recognizes both ways of referring to the node.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
67
URLs: URL Aliases – Automatic Alias Feature
OSU Drupal 6 utilizes a contributed module named Pathauto that
will automatically alias all content.
It does this by simply using the title and programmatically
enforcing some consistency:
•
•
•
•
All letters are changed to lower case
All extraneous words (such as “and”, “but”, “the”, etc) are removed
All spaces are hyphenated
If the content’s title is repeated, the automatic alias feature will
enumerate the end of the alias
As an example, a piece of content titled “This Is My Content”
would become “my-content”
If there were two pieces of content on the site with the same title
they would appear as such
• my-content
• my-content-0
• my-content-1, etc.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
68
URLs: URL Aliases – Why Is This Important?
Knowing about URL aliases is important because:
• Content providers have the ability to turn off the Automatic
Alias feature through the content type form
– Doing this inadvertently will result in creating content types that only
have node references
• Content providers have the ability to change aliases through
the content type form
– Doing this inadvertently, or without planning, on existing content can
break a link or adversely affect menus
– Doing this on existing content could result in invalid bookmarks for your
audience
• Sometimes, when setting links, a need may arise where an
internal link needs to be manually set
– Ex: A content provider wishes to link from one page to a specific anchor
link on another page
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
69
URLs: URL Aliases – Ex. 12 Toggle Automatic Alias Feature
1
To toggle the Automatic alias feature:
1. Click the Edit tab to open the
content in edit mode
2. Scroll down to the URL Path
Settings group and uncheck the
Automatic alias check box
3. The path field will turn from grey
to white – at this point, the user
can enter an alias manually
Note: Ensure that manual aliases are
entered with all small letters and hyphens
between words
For simplicity’s sake, it’s suggested that this
feature not be turned off
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
70
2
3
URLs: URL Aliases – Ex. 13 Locate a Node Reference
To locate a node reference :
1. In the Administration menu, click on
Site building > URL aliases to open the
alias list
4
2. All aliases in use on the site are listed
alphabetically in the Alias column
3
2
3. The node reference (or node ID) is
listed under the System column
4. Filtering on the Alias column can be
performed by entering the word to
filter on in the Filter aliases field and
clicking the Filter button
5. Sorting can be performed by clicking
on the title of the desired column
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
71
5
File Attachments
File attachments are files that are intended to be distributed.
As an example, an instructor may want to attach a pdf version of
an article to a node for students to download and use.
The following should be taken into consideration regarding
attachments:
• File format
– Any type of non-executable file type can be uploaded
– For general distribution, common file types, such as pdf, should be
used to ensure your audience can open it
• File size
– 8 MB upload limit, by default

This can be increased on a case-by-case basis
– Consider audience members who may be in a remote area and may
not have a robust connection
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
72
File Attachments: Ex. 14 Attach a File
To attach a file to a node, return to your
page by going to Administration menu >
Content management > Content and
clicking on the Edit operation:
1. Scroll down the page to the File
attachments group and click on it to
expand it
2. Click the Browse button
a. This will open a window that shows the
contents of a personal computer
b. Browse to the drupal-06-basics workshop
materials folder on the Desktop and click
on it
c. Find the file named ex-14.pdf and select it
d. Click the Open button on the dialog box –
the dialog box will then go away
1
2
3
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
73
3. Click the Attach button on the
content form
File Attachments: Ex. 14 Attach a File – Preview and Test
Preview the page to test the file
attachment. It will be located at the
bottom of your node.
Scrolling down the page and clicking
on the file attachment will open a
dialog box asking you if you want to
Open or Save the file. Click on the
Open option to view the file.
If everything works correctly, click
back on the browser and then click
the Save button
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
74
Basic Menus
What Menus are:
• An organized list of features or content
• Often contains sub-items
How Menus are Created:
• Standard menus automatically created by modules
• Custom menus can be created manually by all content
providers
Why Menus are used:
• To provide organization and clear direction
– Users want to “get there” in four clicks or less
– A plain website with a great menu system will beat out a beautiful
website with a poorly designed menu system anytime
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
75
Basic Menus: Different Drupal Default Menus
When Drupal is first installed, there are three menus that are
automatically created: Navigation, Primary Links, and Secondary
Links.
• Navigation
– Where all Drupal administrative tools are located
– Only seen by site contributors logged into system
– Do not place your content menu links within this menu
• Primary Links
– Default menu when creating menu links
– Best place to store main menu items
• Secondary Links
– Also available
Of course, custom menus can be made as well. This is covered in
the OSU Drupal 6 Formatting Blocks workshop.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
76
Basic Menus: Ex. 15 Add A Menu Item
1
2
3
4
5
6
7
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
77
To add an item to the Primary links menu:
1. Click the Edit tab to open the content in
edit mode
2. Locate the Menu settings group and click
on it to expand it
3. Add a title in the Menu link title field – this
can be the same as the title of the content
or different
4. In the Parent item field, the default should
be the <Primary links> option – leave this
as is
5. Leave the Weight field at 0 – this will order
all menu items alphabetically
6. Click on Publishing options and check the
Published option
7. Click the Save button
Note: Menu links will not appear for Draft (unpublished) content
Basic Menus: Ex. 15 Add A Menu Item To Primary Links Menu – Primary Links Menu Activated
And now the Primary links menu
shows
Menu creation has been greatly
simplified in OSU Drupal 6 – which
has both benefits and potential
drawbacks…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
78
Basic Menus: Usability Concerns
Menu development can be a tricky thing. As we build content, we
naturally want our audience to be able to “see everything” at one
shot. Often times, though, this is not feasible.
For example, if a site contains 300 pieces of content, that could
translate into 300 menu links – which is really too much for
anyone to try to wade through. It can happen quite quickly,
though, especially on the multi-user sites we have at OSU.
This is where planning and coordination come in – even before the
first piece of content is ever created.
Additional tools and features exist in Drupal to help with site
optimization – but the first and simplest is a pencil and a piece of
paper…
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
79
The Value of a Plan
Websites come in all shapes and sizes.
The bigger a site is, and the more contributors that are involved,
the more important it is to try and figure some things out ahead of
time. Much of this can be done even before the first piece of
content is published.
For those who are simply interested in contributing or updating
content on an existing site – this workshop, as well as the
following Content Types workshop is probably enough.
For those who need to be actively involved in developing a site
from the ground up, CWS will also offer several workshops
regarding how to strategize these things and use the more
advanced features available in OSU Drupal 6.
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
80
Conclusion
This completes the OSU Drupal 6 Basics tutorial. For additional
tutorials, please visit CWS Training at:
http://oregonstate.edu/cws/training
To view and register for all OSU Drupal 6 Workshops, visit the
Professional Development Central Registration site at:
http://oregonstate.edu/cws/register
To submit a Help Ticket or make a Site Request on-line, go to:
http://oregonstate.edu/cws/contact
Provided by Central Web Services
541-737-1189
http://oregonstate.edu/cws
81