← Jeff Williams portfolioOriginal PDF (19 pages)

Handout · Humboldt State University

Introduction to Drupal

Step-by-step instructions for building and maintaining a department website in Drupal, with a screenshot for each step.

What it is: A step-by-step handout I wrote for Humboldt State University employees who maintained their department websites in Drupal. It was used in hands-on training sessions and as a reference afterward.

Design choices: One action per step, each paired with a cropped screenshot of exactly what to select, plus notes that head off common mistakes. Several steps nudge authors toward accessible pages: heading styles instead of manual formatting, and header rows and captions on tables.

Logging into your site

  1. Open any web browser, such as Chrome or Firefox.

    Internet Explorer, Firefox, and Chrome browser icons.
  2. Navigate to your site by entering the site’s URL in the browser’s address bar.

    Browser address bar showing humboldt.edu/yoursite.
  3. Add “/user” to the end of your site’s URL in the address bar and press the Enter key.

    Browser address bar showing humboldt.edu/yoursite/user.
  4. Log in using your standard HSU username and password.

    User account login form with Username and Password fields and a Log in button.
  5. Once logged in, you will be presented with your profile page.

    Profile page with View, Edit, Shortcuts, and File browser tabs and a History section.

Adding a basic page

  1. Select Content in the administration menu.

    Administration menu with Dashboard, Content, Structure, and Appearance.
  2. Select Add content.

    Content page with the Add content link selected.
  3. Select Basic page.

    Note: Content options can vary depending on the site configuration.

    Add content page listing Article and Basic page content types.
  4. Add a Title.

    Note: This is the page title that a visitor will see.

    Title field containing About Us.
  5. Type or paste content.

    Note: This screen does not accurately reflect the appearance of text when viewed live.

    Body editor with a formatting toolbar and several paragraphs of placeholder text.
  6. Select Save to preserve changes.

    Save and Preview buttons, with the pointer on Save.

Page settings

  1. Under Menu settings, select Provide a menu link to have the link appear in a menu. You will be presented with several options:

    1. Menu link title: text used for the link in the menu.
    2. Description: can be left blank.
    3. Parent item: generally controls the indentation of links within your menus. Depending on the settings, links will often be indented under the parent item.
    4. Weight: controls the order of an item in the menu. This is easier to set elsewhere, so it can be ignored here.
    Menu settings tab showing Not in menu.Menu settings with Provide a menu link checked and fields for Menu link title, Description, Parent item, and Weight.
  2. Comments allow site visitors to remark on a page and other visitors to read those remarks. In most cases, this should be set to Closed.

    Comment settings tab showing Closed.Comment options Open and Closed, with Closed selected.
  3. Leave Published unchecked to keep a page in draft form while you or others on your team are working on it. When the page is ready for public consumption, check Published. Generally, you will leave the other options unchecked.

    Publishing options tab showing Published.Publishing options with Published checked and Promoted to front page and Sticky at top of lists unchecked.
  4. Other settings, such as Revision information, URL path settings and Authoring information can generally be left as-is.

    Vertical tabs for Revision information, URL path settings, Comment settings, and Authoring information.

Formatting text

  1. Select the text to be formatted, then use the formatting buttons as you would in a word processing program.

    Editor toolbar with paragraph format, bold, italic, underline, list, link, and source buttons.
  2. When pasting content from MS Word, paste as plain text, then reformat as necessary.

    Editor paste buttons, with the pointer on Paste as plain text.
  3. Use the styles in the Paragraph Format drop-down to format text when possible.

    Paragraph Format drop-down listing Normal, Formatted, Address, Heading 1, and Heading 2.
  4. To remove previously applied paragraph formatting, apply the Normal option.

    Note: Using paragraph formatting keeps the appearance of text consistent throughout the site and makes pages more accessible.

  5. Use the Remove Format button to remove any undesired formatting.

    Bold, italic, underline, strikethrough, subscript, superscript, and Remove Format buttons.
  6. To view or edit the HTML for the page, select the Source button.

    The Source button.

Working with tables

  1. Select the Table button on the toolbar.

    Editor toolbar with the pointer on the Table button.
  2. Choose the options for the table and select OK.

    1. Rows: Select the minimum number of rows you will need. Rows can easily be added later.
    2. Columns: Select the number of columns you will need.
    3. Headers: If the table will have column or row headings, select those here. This changes the table’s appearance and increases the accessibility of the table.
    4. Caption: The text entered here will appear as a title above the table.
    5. Summary: The table summary is not displayed.
    6. Width: This creates a fixed width for the table. Leaving this blank will allow the table to expand to the available space.
    7. Border size, Alignment, Cell spacing, Cell padding: Leave these blank to allow the styles for the site to control these options.
    Table Properties dialog with Rows 3, Columns 3, Headers set to First Row, and the caption 2015 Training Reports.
  3. The table will be inserted into the body of the page where you can edit the contents.

    Note: The table’s appearance will be different when viewed live.

    A table captioned 2015 Training Reports with Month, Title, and File columns.
  4. The table can be modified by right clicking within the table and choosing an option.

    Table context menu with Row expanded, showing Insert Row Before and Insert Row After.
  5. To insert a row at the bottom of the table:

    1. Select the last row in the table.
    2. Right click on the table.
    3. Select Row > Insert Row After.
  6. To modify cell settings, right click on the cell and select Cell Properties.

    Table context menu with Cell expanded and the pointer on Cell Properties.
  7. Adjust settings as necessary for the cell.

    Cell Properties dialog with width, height, alignment, cell type, span, and color settings.
  8. To resize a cell, enter a Width value. Adjusting the cell width generally changes the width for the entire column.

    Width field set to 200 pixels.
  9. Change the Text format to Full HTML before saving the page. If this setting is not changed, the table will not display properly and some settings will be lost.

    Text format drop-down set to Full HTML.

Uploading and displaying images

  1. Select the Image button in the toolbar.

    Editor toolbar with the pointer on the Image button.
  2. Select Browse Server.

    URL field with the Browse Server button.
  3. To upload a new image from your computer, select Upload.

    File browser toolbar with the pointer on Upload, above a folder tree.
  4. Select Choose File and locate the image file on your computer. The uploaded file will be included in the list of files.

    Upload panel with a Choose File button, thumbnail size options, and an Upload button.
  5. With the file selected, choose Insert file.

    File browser with sunset.jpg selected and the pointer on Insert file.
  6. The Image Properties dialog box will appear.

    Image Properties dialog with URL, alternative text, width, height, spacing, alignment, and a preview.
  7. Enter a width, in pixels. The height should change automatically to keep the same proportions.

    Width 400 and Height 267 fields with a lock icon.
  8. To add more space between the image and the text wrapping around the image (horizontal spacing), add a number in the HSpace box. A number between 5 and 20 is a good starting point.

    HSpace field set to 10.
  9. Adjust the Alignment of the image if desired.

    Alignment drop-down set to Left.
  10. Change Text format to Full HTML.

    Text format drop-down set to Full HTML.
  11. Select Save.

    Save, Preview, and Delete buttons, with the pointer on Save.

Uploading and linking to files

  1. Select the text you would like to link.

    Table cell with the text View Report 1 selected.
  2. Select the Link button.

    Editor link buttons, with the pointer on Link.
  3. Select Browse Server.

    Browse Server button.
  4. Select Upload.

    File browser toolbar with the pointer on Upload.
  5. Select Choose File.

    Choose File button with No file chosen.
  6. Locate the file on your computer that you will be linking to.

    A file named Report 1.pdf.
  7. Select Upload. This will upload the file to the web server.

    Upload button.
  8. Close the Upload dialog box.

    Upload dialog with the pointer on its close button.
  9. Select the file from the list of files.

    File list with Report 1.pdf selected above sunset.jpg.
  10. Select Insert file.

    Insert file button.
  11. When linking to a file, it may be preferable to have the file open in a new tab or window. To do so, select the Target tab.

    Link dialog with Link Info, Target, and Advanced tabs, with the pointer on Target.
  12. Under Target, select New Window (_blank).

    Target drop-down set to New Window (_blank).
  13. Select OK.

    OK and Cancel buttons, with the pointer on OK.
  14. The text should appear as linked.

    Linked text: View Report 1 and View Report 2.
  15. Select Save.

    Save, Preview, and Delete buttons, with the pointer on Save.
  1. Select Structure from the Administration menu.

    Structure menu open, listing Blocks, Content types, Menus, Taxonomy, and Views.
  2. Select Menus.

    Menus link: add new menus to your site, edit existing menus, and rename and reorganize menu links.
  3. You will be presented with a list of the available menus.

    Menus page listing Main menu, Management, Navigation, and User menu, each with list links, edit menu, and add link.
  4. Locate the menu you would like to add the link to and select list links.

    Operations column with the pointer on list links.
  5. From the list of links, choose Add link.

    Add link.
  6. Add a Menu link title. This is the text that the visitor will click on the menu.

    Edit menu link page with Menu link title set to About Us.
  7. Enter the Path or destination for the link. The Path can be a page or file on your site or it can link to another site.

    Note: For links to your site, only include the portion of the URL after the main address for your site.

    Path field containing node/1.
  8. Uncheck Enabled if you would like to hide a menu item without deleting it from the menu.

    Note: You could use this if you intend to include the menu item again in the future.

    Enabled checkbox, checked.
  9. If this link will have other links indented under it, select Show as expanded to always show the indented links.

    Show as expanded checkbox, checked.
  10. Choose the Parent link using the drop-down.

    Note: This is one way to indent a link or move a link to another menu.

    Parent link drop-down set to Home.
  11. The Weight controls the order of an item in the menu. This is easier to set elsewhere, so it can be ignored here.

    Weight drop-down set to 0.
  12. Select Save to keep your changes.

    Save and Delete buttons.
  13. The list of links can be used to re-order the menu items. To do so, select the 4-pointed arrow and drag it to the appropriate position.

    Menu link list with Home, About Us, and Table Example, each with a four-pointed drag handle.
  14. To indent a menu item, drag it to the right using the 4-pointed arrow.

    About Us being dragged to the right, indented under Home.
  15. Be sure to select Save configuration when finished.

    Save configuration button.

Menus and blocks

  1. Select Structure.

    Structure menu open, with the pointer on Structure.
  2. Select Blocks.

    Structure page with the pointer on Blocks.
  3. To see where you can put blocks on the page, select Demonstrate block regions.

    Blocks page with the Demonstrate block regions link.
  4. Areas of the page are displayed where blocks can be placed.

    Page layout with highlighted regions: Horizontal Navigation, Section Navigation, Left sidebar, Banner Image, and Content.
  5. On the blocks page, blocks can be moved to a different region, reordered within a region, and configured.

    Blocks table with Block, Region, and Operations columns; Search form and Main menu are in Section Navigation.
  6. To move a menu block to a new location, locate the menu and select the region in the drop-down. To hide a block, select None.

    Region drop-down listing None, Banner Image, Horizontal Navigation, and Section Navigation.
  7. To edit the settings for the block, select configure.

    Main menu row set to Horizontal Navigation, with the pointer on configure.
  8. To hide a menu title, enter “<none>” as the Block title.

    Block title field containing <none>.
  9. Select Save block when finished.

    Save block button.

Allow others to edit the site

  1. Ask the individual to log into the site as described previously in this guide.

  2. Select People in the administration menu.

    Administration menu with the pointer on People.
  3. Find the user you would like to allow to work on the site.

    People list showing a user named training with the administrator role and an edit link.
  4. Select edit for that user.

  5. Under Roles, select administrator or another appropriate role.

    Roles with authenticated user and administrator checked.
  6. Select Save.

    Save button.
  7. The individual to whom you have assigned the role should immediately be able to edit the site. If they are still logged into the site, they may need to refresh their web browser.

Turn off maintenance mode

  1. Maintenance mode restricts access to the site and changes its appearance.

    Site home page reading Site under maintenance.
  2. Select Configuration > Development > Maintenance Mode.

    Configuration menu with Development expanded and the pointer on Maintenance mode.
  3. Uncheck Put site into maintenance mode.

    Put site into maintenance mode checkbox.

Other modules

  1. Collapse Text

    Source view showing a collapse shortcode wrapped around a heading and paragraph.
  2. Special Menu Items

    Path field containing <nolink>.
  3. Other modules of interest:

    Folder list of installed modules, including admin_menu, ckeditor, collapse_text, pathauto, special_menu_items, views, webform, and wysiwyg.