Advanced Drupal Features and Techniques

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "Advanced Drupal Features and Techniques"

Transcription

1 Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount Holyoke College and is to be used exclusively for creating, updating, and expanding Mount Holyoke College websites by authorized MHC community members only. This document is not for distribution in any form outside the College without permission.

2 05/20/15 Mount Holyoke College Drupal Basics and Beyond 2

3 Table of Contents 1. Fixing Formatting Issues Basic HTML Editing... Error! Bookmark not defined. 3. Buttons Tables Anchors /20/15 Mount Holyoke College Drupal Basics and Beyond 3

4 1. Fixing Formatting Issues To avoid adding non-standard fonts and badly formatted text to your webpages, always use the Paste from word icon to paste your content from another application. When you cut and paste content into Drupal s text editor from applications, such as Word, the HTML code copied from Word into Drupal s text editor may result in strange formatting on your webpage. If you should forget to do this and you end up with formatting issues, you can select the text with the bad formatting, cut it, and then follow the directions below to paste it correctly. The example on the right shows your text may look when you paste directly from a Word document into Drupal s text editor instead of using the paste from word icon. The formatting problems are seen when you are viewing the web page, not when you are in the Drupal editing form. The Word document brought in HTML into the text editor, causing: Extra white space above the pasted content. The fonts are not the College style fonts (as you see in the second paragraph). Add Content from Word or Another Application A. Copy the text from your Word document or other application. B. Place your cursor in the body field of the Drupal text editor where you want to paste your content. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 4

5 C. Select the Paste From Word tool. D. When the Paste from Word popup window appears, paste your content in the text window, (Ctrl + V on your keyboard), and then select Insert. The popup will close and your text will appear in the body field. E. If there are text links in your content, be sure to review them to make sure they copied correctly. See more about text links and PDF s in the Links chapter of this manual. F. Links to PDF files must be removed from the text and the PDF file will need to be uploaded to the page. Instructions on how to upload and link PDF files are in the Links mini-manual. G. After you save the page, review all links to verify they are accurate. H. If there are still formatting problems, you will need to fix them in the HTML editor. Directions for this are in the following section. If you are not comfortable doing this yourself, please write to for assistance. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 5

6 2. Basic HTML Editing In order to fix major formatting problems and use some of the more advanced features in Drupal, it is helpful to have a basic knowledge of HTML code. This section will give you the basics so that you will be comfortable using the HTML editor to make changes on your webpages. If you are not comfortable doing this yourself, please write to for assistance. HTML stands for Hyper Text Markup Language. It is the code used by your web browser to format the display of the content on a webpage. HTML code uses tags, which surround content and apply meaning to it. Each tag typically has an opening and a closing, which tell the browser what to do with the content that comes between them. Standard HTML Tags This table shows the standard HTML tags that are used in Drupal. Tags are abbreviations for formatting styles, and typically have an opening and a closing (the opening does not have a leading / ): <h2></h2> Mark the beginning and ending of a header. The larger the number inside the <h3></h3> header tag the smaller the header text will be displayed. <p></p> Mark the beginning and ending of a paragraph. <strong></strong> Mark the beginning and ending of text that will appear using boldface. <em></em> Mark the beginning and ending of text that will appear using italics (emphasis). <a></a> Mark the beginning and ending of text that will be formatted as a hyperlink. Note: In order to actually act as a link, the opening <a> would also contain the attribute href= url-of-the-link. ie. <a href= >Admissions</a> would make the word Admissions formatted as a link and when a user clicks on it they will be taken to the page <ol></ol> Mark the beginning and ending of an ordered list (ie. numbered list). <ul></ul> Mark the beginning and ending of an unordered list (ie. bulleted list). <li></li> Mark the beginning and ending of each item in an ordered or unordered list. The <li> tags are embedded between the opening and closing <ol> or <ul> tags. <table></table> <tr></tr> <td></td> Mark the beginning and ending of a table. (See Chapter 3) Mark the beginning and ending of a row in a table. <tr> tags are embedded between the opening and closing <table> tag. Mark the beginning and ending of the data in a column of a table. <td> tags are embedded between an opening and closing <tr> tab. Note: Not all tags have closing tags. Some tags, which do not wrap around content, will close themselves. The line-break tag <br> is one of them. You might also see some of these self-closing tags displayed with an ending /, such as <br />. Either format is acceptable and should work the same way. Attributes Some HTML tags can also have attributes, which are extra bits of information that is used to tell the browser how to display the content. The most common of these is the href attribute for the <a> tag, which specifies the url of the link. You may also see the class attribute used with a paragraph tag. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 6

7 HTML Tags and Attribute that Often Cause Formatting Problems The most common problems that occur when content is copied from another application into Drupal are the introduction of <span> tags and style elements that force the browser to display content a certain way, overruling the formatting specifications set in place by the webteam. Here is an example of a page where the content was copied from a google doc directly into the body field without using the Paste from Word tool. The content is all there, but the formatting is not standard. The fonts are not the college web fonts, they are all different sizes, use different spacing and even different colors. First try cutting the content and re-pasting it using the Paste from Word tool. If that does not fix the problem, you will need to use the HTML Source Editor and remove the formatting from within the code. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 7

8 To access the HTML Source Editor, you must first be sure that you are using the Text format Full HTML. The Text format field is located below the body field. Use the pull-down and select Full HTML if it is not already selected. The HTML tool should now be displayed in the toolbar. When you select it, the HTML Source Editor window will be displayed. You can see from this example that there is a lot more code in there than just basic HTML tags and content. There are many standard tags that have style and/or margin attributes inserted, and also many <span> tags that should not be there at all. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 8

9 Cleaning up the code in the Source Editor takes some time and patience. You may choose to copy all of the code into a different text editor, such as Sublime or TextWrangler, both of which are free to download. They allow you to separate out the tags and make viewing the code easier. If you do this, you should cut all of the text from the Drupal HTML Source Editor, copy it into the other editor to make your changes and then copy all of it back into the Drupal HTML Source Editor, completely replacing what was there. Note that you can always divide up the HTML tags in the HTML Source Editor by inserting spaces and line breaks between tags. These will not be saved when you click on insert, but while you are in the editor this may help you read the code more easily. In most cases you will want to remove: all <span> </span> tags, including the attributes within them. any style, margin, text-decoration, align, or line-height attributes that have been inserted inside of <p> tags. Note: If you have paragraphs that you have purposely indented using the indent tool, a style= padding-left: 30px attribute may appear in one or more <p> tags. This type of style attribute on a <p> tag can be left alone. If you are unsure about which tags or attributes should be removed, send an to and someone will assist you. Here is what the sample code looks like once it is cleaned up. The style attributes have all been removed, along with the <span> tags. The type of style attribute that should be removed from inside a <p> tag are ones that affect the line-height, font-size, font-family, and text-decoration. You can see how much unnecessary code was copied in! It takes far less code to display the page correctly than it does to display it with improper formatting. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 9

10 The page now displays with the correct fonts, spacing and colors. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 10

11 3. Buttons Buttons are useful tools when you want to callout an action for a site visitor to perform. Admissions, for example, uses buttons as a callout tool to engage prospective students: A button must: 1. Use action words (ie. Make a Reservation) 2. Be a link to another piece of content. The Visit Us button, for example, is linked to the Visit page. 3. Stand out from the rest of the page. The very top or bottom of a page are the best places for buttons. Follow these steps to create a button: 1. Add the text to become the link. 2. Create the link to the target page. 3. Save the page and test the link. 4. Go back into edit, into the body field and select the link text. 5. With the link text selected, use the styles pull-down menu and select Button. Note that you will not see any noticeable changes. 6. Save the page. The link should now be displayed as a button. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 11

12 4. Tables Best web practices discourage the use of tables on webpages as formatting devices. Tables are not user-friendly on mobile devices, so if you decide to use a table you will need to do some extra work to make sure that the table will be viewable and readable on a mobile device. If you would like to add a table to you must first make sure that you are in full HTML mode. Use the Text Format pull-down field located under the body field and select full HTML. Add the HTML Code to Create a Basic Table While it is possible to add a table to your page using the Insert/Edit Table tool, it will be far easier to make sure that the table will be viewable on mobile devices if you build it using the HTML source editor. The code below contains the outline of a responsive table: <table class= responsive-table > <tr> <th>header1</th> <th>header2</th> <th>header3</th> </tr> <tr> <td data-th= Header1 >Data for Row 1 Column 1</td> <td data-th= Header2 >Data for Row 1 Column 2</td> <td data-th= Header3 >Data for Row 1 Column 3</td> </tr> <tr> <td data-th= Header1 >Data for Row 2 Column 1</td> <td data-th= Header2 >Data for Row 2 Column 2</td> <td data-th= Header3 >Data for Row 2 Column 3</td> </tr> <table> If we were to paste this basic code into the HTML editor and click insert, the table will be displayed in the body field in an editable state like this: 05/20/15 Mount Holyoke College Drupal Basics and Beyond 12

13 Upon saving the page, the basic table will look like on desktop: And like this on a mobile device: On mobile devices the column headers become labels, and the rows in the table are divided with a horizontal line. All of the data from the table is still easily readable in this mobile list format. Edit the HTML Code to Build a Table Containing Your Data Copy the basic table code into the editor of your choice. It may be a good idea to use an HTML text editor such as TextWranger or Sublime (either of which are free to download). You can also use the Drupal HTML Source Editor just as it is, but better text editors offer more help when it comes to formatting your code to make it easier to read. If you choose to use an editor outside of Drupal, first follow all of the steps below for changing the code, and then copy all of the text and paste it into the Drupal HTML Source Editor. If you want to do the work right in the Drupal HTML Source Editor, simply place your cursor where you would like to add the table, and open the HTML editor window by clicking on the HTML tool in the toolbar. The HTML Source Editor window will appear. See Chapter 2 for instructions on basic HTML editing. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 13

14 Copy the basic table code from page 12. NOTE: The following are the HTML tags used in this table example: <table> (table marker) <tr> (table row) <td> (table data) <th> (table header) Paste the code into the into the HTML editor (or into the text editor of your choice). Then you will need to replace the placeholder text in the code with the actual text you want in your table. 1. Label the column headers. a. Change the column headers for the header row: <tr> <th>header1</th> <th>header2</th> <th>header3>/th> </tr> Replace each of them with the column headers you want to use for your table. Note that these ARE NOT enclosed in quotation marks. If you need more than three columns, copy one of the <th> lines and paste a new one before the </tr> tag. Be sure to include the <th> and </th> tags. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 14

15 b. Change the column headers that are listed as the data-th attribute of each <td> tag on every row: <tr> <td data-th= Header1 >Data for Row 1 Column 1</td> <td data-th= Header2 >Data for Row 1 Column 2</td> <td data-th= Header3 >Data for Row 1 Column 3</td> </tr> Replace each of them with the exact same column headers you used in the <th> lines. Note that these must be enclosed in quotation marks. If you need to add columns, copy one of the <td> lines and paste a new one before the </tr> tag. Be sure to include the <td> and </td> tags. 4. Put the data into the table cells. <tr> <td data-th= Header1 >Data for Row 1 Column 1</td> <td data-th= Header2 >Data for Row 1 Column 2</td> <td data-th= Header3 >Data for Row 1 Column 3</td> </tr> Replace the placeholder text Data for Row # Column # with the text you want in each table cell. 5. Add rows as needed. Copy this entire <tr> section (all of the lines shown here) to add more rows to your table. Be sure to paste the section in before the end table tag </table>. <tr> <td data-th= Header1 >Data for Row 1 Column 1</td> <td data-th= Header2 >Data for Row 1 Column 2</td> <td data-th= Header3 >Data for Row 1 Column 3</td> </tr> 05/20/15 Mount Holyoke College Drupal Basics and Beyond 15

16 As an example, here is a 4-column table followed by the HTML code that is used to display it: <table class= responsive-table > <tr> <th>date</th> <th>time</th> <th>place</th> <th>topic</th> </tr> <tr> <td data-th= Date >January 1</td> <td data-th= Time >Midnight</td> <td data-th= Place > New York </td> <td data-th= Topic >Happy New Year </td> </tr> <tr> <td data-th= Date >February 14</td> <td data-th= Time >7 pm</td> <td data-th= Place > Your favorite restaurant</td> <td data-th= Topic >Valentine s Dinner</td> </tr> <tr> <td data-th= Date >April 1</td> <td data-th= Time >8 am</td> <td data-th= Place > Your office</td> <td data-th= Topic >April Fools</td> </tr> <table> 05/20/15 Mount Holyoke College Drupal Basics and Beyond 16

17 Because this example uses the responsive-table class and has all of its columns properly labeled, the table will display as shown above in desktop, and as follows on mobile devices: 05/20/15 Mount Holyoke College Drupal Basics and Beyond 17

18 Creating a Table Using the Table Tool You can also add tables by using the Insert/Edit Table tool in the toolbar. Once the basic table has been created, however, you will need to go into the HTML code editor and add the required labels so that the table will be viewable on mobile devices. Clicking on the Insert/Edit Table tool will display the Insert/Edit Table pop-up. Choose the number of columns and rows you need for your table, and use the pull-down next to the Alignment field to select Left alignment. Remember that one of your rows will be used as a header row, so if you need 4 rows of data, you should enter a 5 in the Rows field. You can always add rows or columns later, but it is easier if you start with a table that is the correct size. In order to make your table viewable on mobile devices, you need to add the responsive table class by pulling down the class field and selecting Responsive Table. Click the insert button. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 18

19 Drupal will then bring you back to the body field where the basic formatting for a table will appear. You will see the number of rows and columns that you specified. First, add the headers for each column in the table. Once the column headers have been entered, you will need to make some basic changes to the HTML code in order to add the header row and to properly label each data row. Open the Drupal HTML Source Editor window by clicking on the HTML tool in the toolbar. The HTML Source Editor window will appear. See Chapter 2 for instructions on basic HTML editing. In order to provide the proper headers for the table, the <td> and </td> (table detail) tags that are initially created for each element in the first row will need to be changed to <th> and </th> (table header) tags. See the example on page for instructions on formatting the headers as well as the data rows in your table. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 19

20 4. Anchors Anchors are used on pages that display a lot of information that is segmented into different sections and where it makes sense to let the site visitor jump to a different section of content on the page. An FAQ page is a good example of when anchors may be useful. The questions would be listed at the top of the page as links to the section below where the answer is listed. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 20

21 Adding Anchors to Sections of Content 1. Add the anchors to the finishing location of the jump to. On our sample FAQ page, we would place our cursor before the first letter of the first answer (Can I Study Abroad?) and click on the anchor tool. 2. The insert/edit anchor window will be displayed. Enter an anchor name that makes sense for the section of content you are segmenting. In this example, Can I Study Abroad? is the question that is being answered in the section where the anchor is being placed. Make a note of the exact text you used for the anchor you will need it later. 3. There will now be an anchor icon located where you had placed your cursor before clicking on the Anchor tool. 4. Repeat 1-3 for all of the sections where you want to place an anchor. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 21

22 Adding Anchor Links Once you have the anchor jump to points in place, you need to add the links that the user will click on in order to jump to those sections of content. In our example, these links need to be added to the questions at the top of the FAQ page. This can be done either by using the Insert/Edit Link took, or via the HTML Source Editor window (see chapter 2 for more detailed instructions on using the HTML tool). Adding Anchor Links Using Insert Link Tool 1. Select the text that will become the anchor link. In our example, it would be one of the questions at the top of the FAQ page. 2. Click on the Insert/Edit Link tool. 3. In the Link URL field, enter the exact text that you used to mark the anchor, preceded by a #. 4. Click Insert. The text you selected will now be displayed in blue to indicate that it is a link. 5. Save the page and test that clicking on that text causes the browser to jump down the section of the content that you marked with the anchor. 05/20/15 Mount Holyoke College Drupal Basics and Beyond 22

23 Adding Anchor Links Using the HTML Source Editor 1. While in edit mode, click on the HTML tool. 2. Add an <a> tag with an href attribute containing the identical anchor text that you entered above to the content containing the text that should become the anchor link (or the jump from spot). In our FAQ page example, there is a list of questions at the top of the page. These are already inside ordered list <ol> and list item <li> </li> tags. The <a> </a> tags should be entered surrounding the content, inside the <li> </li> tags as shown: 05/20/15 Mount Holyoke College Drupal Basics and Beyond 23

Caldes CM12: Content Management Software Introduction v1.9

Caldes CM12: Content Management Software Introduction v1.9 Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge

More information

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D

BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D BASICS OF WEB DESIGN CHAPTER 2 HTML BASICS KEY CONCEPTS COPYRIGHT 2013 TERRY ANN MORRIS, ED.D 1 LEARNING OUTCOMES Describe the anatomy of a web page Format the body of a web page with block-level elements

More information

The McGill Knowledge Base. Last Updated: August 19, 2014

The McGill Knowledge Base. Last Updated: August 19, 2014 The McGill Knowledge Base Last Updated: August 19, 2014 Table of Contents Table of Contents... 1... 2 Overview... 2 Support... 2 Exploring the KB Admin Control Panel Home page... 3 Personalizing the Home

More information

Your Personal Homepage

Your Personal Homepage Your Personal Homepage You can use your Personal Homepage to share information about yourself, something that interests you, or a course topic. Your classmates can view your home page from the Classlist

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

More information

HTML CREATOR. HTML Creator

HTML CREATOR. HTML Creator HTML CREATOR The HTML Creator is an HTML editing tool that allows you to create content in HTML without having to enter HTML tags. Similar to a word processor, you can easily create and maintain content

More information

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products...

Introduction... 3. Designing your Common Template... 4. Designing your Shop Top Page... 6. Product Page Design... 8. Featured Products... Introduction... 3 Designing your Common Template... 4 Common Template Dimensions... 5 Designing your Shop Top Page... 6 Shop Top Page Dimensions... 7 Product Page Design... 8 Editing the Product Page layout...

More information

Google Docs Basics Website: http://etc.usf.edu/te/

Google Docs Basics Website: http://etc.usf.edu/te/ Website: http://etc.usf.edu/te/ Google Docs is a free web-based office suite that allows you to store documents online so you can access them from any computer with an internet connection. With Google

More information

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a

More information

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5

More information

Introduction to Drupal 6

Introduction to Drupal 6 Ready Reference 063014 Introduction Introduction to Drupal 6 This page provides instructions for using the Drupal Web Content Management System. Drupal makes publishing content relatively easy and allows

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

How to Edit Your Website

How to Edit Your Website How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing

More information

Creating your personal website. Installing necessary programs Creating a website Publishing a website

Creating your personal website. Installing necessary programs Creating a website Publishing a website Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on

More information

Using econtentmanager s ewebeditpro Editor

Using econtentmanager s ewebeditpro Editor Using econtentmanager s ewebeditpro Editor econtentmanager comes with its own content editor, called ewebeditpro. With ewebeditpro, you can add and modify your page content with WYSIWYG ease-of-use. The

More information

Login: https://ipfw.edu/c Quick Guide for dotcms & Accessibility November 2014 Training: http://ipfw.edu/training

Login: https://ipfw.edu/c Quick Guide for dotcms & Accessibility November 2014 Training: http://ipfw.edu/training dotcms & Accessibility Folders Creating a New Folder Note: All folders showing on menu must have an index page. 1. Right-click the parent folder in which the new folder will reside. 2. Click New > Folder.

More information

Mastering the JangoMail EditLive HTML Editor

Mastering the JangoMail EditLive HTML Editor JangoMail Tutorial Mastering the JangoMail EditLive HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop

More information

HTML Kit: A User Manual. by Paul Strickberger

HTML Kit: A User Manual. by Paul Strickberger HTML Kit: A User Manual by Paul Strickberger HTML Kit User Manual Contents Introduction... 1 The Main Screen... 1 Displaying or Hiding Elements of the Screen...1 Getting Around the Main Screen... 3 The

More information

About webpage creation

About webpage creation About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that

More information

Mastering the JangoMail TinyMCE HTML Editor

Mastering the JangoMail TinyMCE HTML Editor JangoMail Tutorial Mastering the JangoMail TinyMCE HTML Editor With JangoMail, you have the option to use our built-in WYSIWYG HTML Editors to compose and send your message. Note: Please disable any pop

More information

The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013

The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013 INFORMZ USER GUIDE: The HTML Editor Version 1.0 January 13, 2013 ABOUT THIS GUIDE This guide provides an overview of the HTML editor used by Informz. This guide does not cover all aspects of the editor,

More information

Introduction to Web Design Curriculum Sample

Introduction to Web Design Curriculum Sample Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic

More information

Do It Yourself Website Editing Training Guide

Do It Yourself Website Editing Training Guide Do It Yourself Website Editing Training Guide Version 3.0 Copyright 2000-2011 Sesame Communications. All Rights Reserved. Table of Contents DIY Overview 3 What pages are editable using the DIY Editing

More information

WYSIWYG Tips and FAQ

WYSIWYG Tips and FAQ WYSIWYG Tips and FAQ Version 1.0 WYSIWYG: What you see is what you get. This is an abbreviation for the type of editor Acalog uses. You will layout your content in the editor, and when you hit preview,

More information

Creating a Resume Webpage with

Creating a Resume Webpage with Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume

More information

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,

More information

To change title of module, click on settings

To change title of module, click on settings HTML Module: The most widely used module on the websites. This module is very flexible and is used for inserting text, images, tables, hyperlinks, document downloads, and HTML code. Hover the cursor over

More information

NJCU WEBSITE TRAINING MANUAL

NJCU WEBSITE TRAINING MANUAL NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...

More information

Web Design with Dreamweaver Lesson 4 Handout

Web Design with Dreamweaver Lesson 4 Handout Web Design with Dreamweaver Lesson 4 Handout What we learned Create hyperlinks to external websites Links can be made to open in a new browser window Email links can be inserted onto webpages. When the

More information

Joomla Article Advanced Topics: Table Layouts

Joomla Article Advanced Topics: Table Layouts Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand

More information

P a g e 0. Training Guide for the Content Management System

P a g e 0. Training Guide for the Content Management System P a g e 0 Training Guide for the Content Management System P a g e 1 Table of Contents: Website Administration Page 2 Editing Pages Page 3 Adding Images. Page 4 Editor Toolbar Key... Page 5 & 6 Training

More information

Getting Started with KompoZer

Getting Started with KompoZer Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files

More information

WYSIWYG Manual Ironcities Stadt Kolbermoor 2012

WYSIWYG Manual Ironcities Stadt Kolbermoor 2012 WYSIWYG Manual Ironcities Stadt Kolbermoor 2012 WYSIWYG Editor Manual TinyMCE used on http://www.ironcities.net is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing

More information

Introduction to Drupal

Introduction to Drupal Introduction to Drupal Login 2 Create a Page 2 Title 2 Body 2 Editor 2 Menu Settings 5 Attached Images 5 Authoring Information 6 Revision Information 6 Publishing Options 6 File Attachments 6 URL Path

More information

Creating HTML authored webpages using a text editor

Creating HTML authored webpages using a text editor GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage

More information

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Chapter 14: Links. Types of Links. 1 Chapter 14: Links 1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and

More information

Using the HTML/Text/WYSIWYG Editor

Using the HTML/Text/WYSIWYG Editor Using the HTML/Text/WYSIWYG Editor When creating text (e.g., a Discussion, a News item, Descriptions) within Online Campus you are working with a What You See Is What You Get Editor (WYSIWYG). This program

More information

Micro soft Expression Web 4

Micro soft Expression Web 4 University of Texas at Arlington Micro soft Expression Web 4 Beginner s Guide 2011 1 2 Table of Contents UTA Web Pages... 5 Connecting to your Website... 5 Copying files from your Website... 8 To open

More information

WYSIWYG Editor in Detail

WYSIWYG Editor in Detail WYSIWYG Editor in Detail 1. Print prints contents of the Content window 2. Find And Replace opens the Find and Replace dialogue box 3. Cut removes selected content to clipboard (requires a selection) 4.

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

WYSIWYG Toolbar. File Functions. Cut, Copy, Paste, Find Functions. Undo Redo Functions. Page 1 of 7

WYSIWYG Toolbar. File Functions. Cut, Copy, Paste, Find Functions. Undo Redo Functions. Page 1 of 7 File Functions Save Save As Revert to Last Save Click on the "Save" button to save the current file on the staging server and exit the WYSIWYG editor. Remember, it will not be live on the production server

More information

Working with the new enudge responsive email styles

Working with the new enudge responsive email styles Working with the new enudge responsive email styles This tutorial assumes that you have added one of the mobile responsive colour styles to your email campaign contents. To add an enudge email style to

More information

Below is the toolbar for the Rich Text Editor on the SharePoint Portal.

Below is the toolbar for the Rich Text Editor on the SharePoint Portal. Rich Text Editor Below is the toolbar for the Rich Text Editor on the SharePoint Portal. You will find instructions for using each of these functions on the following pages. 1. Cut 2. Copy 3. Paste 4.

More information

NDSU Technology Learning & Media Center. Introduction to Google Sites

NDSU Technology Learning & Media Center. Introduction to Google Sites NDSU Technology Learning & Media Center QBB 150C 231-5130 www.ndsu.edu/its/tlmc Introduction to Google Sites Get Help at the TLMC 1. Get help with class projects on a walk-in basis; student learning assistants

More information

Creating Personal Web Sites Using SharePoint Designer 2007

Creating Personal Web Sites Using SharePoint Designer 2007 Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare

More information

Populating and Maintaining your eservice Center Knowledge Base

Populating and Maintaining your eservice Center Knowledge Base Populating and Maintaining your eservice Center Knowledge Base Table of Contents Populating and Maintaining the eservice Center Knowledge Base...2 Key Terms...2 Setting up the Knowledge Base...3 Consider

More information

Introduction. Steps in Creating Web Pages

Introduction. Steps in Creating Web Pages 1 of 7 Introduction A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser. To see the HTML codes of any

More information

USC Aiken CMS Manual. A manual on using the basic functions of the dotcms system. Office of Marketing and Community Relations-USC Aiken

USC Aiken CMS Manual. A manual on using the basic functions of the dotcms system. Office of Marketing and Community Relations-USC Aiken USC Aiken CMS Manual A manual on using the basic functions of the dotcms system Office of Marketing and Community Relations-USC Aiken Table Of Contents Introduction/How to Use Manual... 2 Logging In...

More information

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)

More information

Understanding the Advanced Template Editor

Understanding the Advanced Template Editor Quick Start Guide to: Understanding the Advanced Template Editor The basic template editor in Swiftpage is used to create templates that began as imported templates or global advanced templates. (One function

More information

Umbraco v4 Editors Manual

Umbraco v4 Editors Manual Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...

More information

Quick Start Guide To: Using the Sage E-marketing Online Editor

Quick Start Guide To: Using the Sage E-marketing Online Editor Quick Start Guide To: Using the Sage E-marketing Online Editor When you first enter the Sage E-marketing online editor, you will see two tabs on the left-hand side of the screen: Content Editor and Customize

More information

Adding Links to Resources

Adding Links to Resources Adding Links to Resources Use the following instructions to add resource links to your Moodle course. If you have any questions, please contact the helpdesk at. Adding URL links 1. Log into your Moodle

More information

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site.

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. Updating a Site in Drupal If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. You should be able to find your site at a URL similar to

More information

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials

More information

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA

JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA All information presented in the document has been acquired from http://docs.joomla.org to assist you with your website 1 JOOMLA 2.5 MANUAL WEBSITEDESIGN.CO.ZA BACK

More information

Drupal Basics User Manual

Drupal Basics User Manual Drupal Basics User Manual Mount Holyoke College 7/29/2013 Author: Theresa Chamberland This user manual describes how to use Drupal to update your section of the Mount Holyoke College website and covers

More information

Have you seen the new TAMUG websites?

Have you seen the new TAMUG websites? 4 For all Cascade Management System request for PUBLISHING please email cms@tamug.edu for the quickest response. For all Cascade Management System request for QUESTIONS or COMMENTS please email cascadeusers@tamug.edu

More information

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu)

Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Ingeniux 8 CMS Web Management System ICIT Technology Training and Advancement (training@uww.edu) Updated on 10/17/2014 Table of Contents About... 4 Who Can Use It... 4 Log into Ingeniux... 4 Using Ingeniux

More information

CSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File

CSE 3. Marking Up with HTML. Tags for Bold, Italic, and underline. Structuring Documents. An HTML Web Page File CSE 3 Comics Updates Shortcut(s)/Tip(s) of the Day Google Earth/Google Maps ssh Anti-Spyware Chapter 4: Marking Up With HTML: A Hypertext Markup Language Primer Fluency with Information Technology Third

More information

Increasing Productivity and Collaboration with Google Docs. Charina Ong Educational Technologist charina.ong@nus.edu.sg

Increasing Productivity and Collaboration with Google Docs. Charina Ong Educational Technologist charina.ong@nus.edu.sg Increasing Productivity and Collaboration with Google Docs charina.ong@nus.edu.sg Table of Contents About the Workshop... i Workshop Objectives... i Session Prerequisites... i Google Apps... 1 Creating

More information

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits

More information

Creating Web Pages With Dreamweaver MX 2004

Creating Web Pages With Dreamweaver MX 2004 Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic

More information

Urban Planet Website Content Management System. Step-by-Step Instructions

Urban Planet Website Content Management System. Step-by-Step Instructions Urban Planet Website Content Management System Step-by-Step Instructions For steps with pictures, videos, version bugs, integration ideas, and more see http://uphelp.spps.org Department of Educational

More information

2013 Copyright Speed Realtor Pte Ltd - You may not copy, scan, print or redistribute this handbook without written consent from Speed Realtor Pte Ltd

2013 Copyright Speed Realtor Pte Ltd - You may not copy, scan, print or redistribute this handbook without written consent from Speed Realtor Pte Ltd 1 Contents 1.1What is SEO?... 3 What Do We Need To Do In Order To Search Engine Optimize Our Website?... 4 On Page SEO... 4 Doing On Page SEO... 5 Now let us run through each of the criteria that you have

More information

Introduction to CommonSpot 5.0. Presented by OHSU Web Strategies

Introduction to CommonSpot 5.0. Presented by OHSU Web Strategies Introduction to CommonSpot 5.0 Presented by OHSU Web Strategies Introduction to CommonSpot 5.0 Lesson Summary Turning Off Web Browser Pop up Blockers Internet Explorer 7.x (Win): Tools Pop-up Blocker Turn

More information

[D YOUVILLE COLLEGE OUCAMPUS WEB CONTENT MANAGEMENT SYSTEM TRAINING] June 11, 2014

[D YOUVILLE COLLEGE OUCAMPUS WEB CONTENT MANAGEMENT SYSTEM TRAINING] June 11, 2014 MANAGEMENT SYSTEM TRAINING] June 11, 2014 What is OU Campus? OU Campus is a content management system used by D Youville College on www.dyc.edu. It is an easy-to-learn tool for updating Web pages from

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

More information

HTML & CSS Brief Introduction and Exercises

HTML & CSS Brief Introduction and Exercises HTML & CSS Brief Introduction and Exercises Chris Sparks HTML and CSS are useful to understand when working on digital editions, since they are very frequently published online, and hence often make use

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

Basic HTML elements: Quick Reference

Basic HTML elements: Quick Reference Basic HTML elements: Quick Reference University of Bristol Information Services document web-r4 Document Information Format Conventions The following format conventions are used in this document: Computer

More information

Help on Icons and Drop-down Options in Document Editor

Help on Icons and Drop-down Options in Document Editor Page 1 of 5 Exact Synergy Enterprise Help on Icons and Drop-down Options in Document Editor Introduction The following table provides descriptions on the icons and drop-down options that are available

More information

Introduction to the Hyper Text markup language (HTML) SE 101 Spiros Mancoridis

Introduction to the Hyper Text markup language (HTML) SE 101 Spiros Mancoridis Introduction to the Hyper Text markup language (HTML) SE 101 Spiros Mancoridis What is HTML? HTML (Hyper Text Markup Language) is a language for specifying how text and graphics appear on a web page When

More information

Center for Faculty Development and Support. OU Campus Faculty Website Guide

Center for Faculty Development and Support. OU Campus Faculty Website Guide Center for Faculty Development and Support OU Campus Faculty Website Guide CENTER FOR FACULTY DEVELOPMENT AND SUPPORT...1 OU CAMPUS FACULTY WEBSITE GUIDE...1 INTRODUCTION...3 LEARNING OBJECTIVES...3 I.

More information

A quick guide to. Creating Newsletters

A quick guide to. Creating Newsletters A quick guide to Creating Newsletters In this guide... Learn how to create attractive, well-designed HTML and plain-text messages to engage your the template, which can be mobile, responsive. Table of

More information

Site Maintenance. Table of Contents

Site Maintenance. Table of Contents Site Maintenance Table of Contents Adobe Contribute How to Install... 1 Publisher and Editor Roles... 1 Editing a Page in Contribute... 2 Designing a Page... 4 Publishing a Draft... 7 Common Problems...

More information

Creating a Web Site with Adobe Dreamweaver

Creating a Web Site with Adobe Dreamweaver Creating a Web Site with Adobe Dreamweaver This tutorial will teach you how to: 1. Create a new web site using Adobe Dreamweaver 2. Create a new webpage using the Dreamweaver editor 3. Create numbered

More information

Intro to Web Development

Intro to Web Development Intro to Web Development For this assignment you will be using the KompoZer program because it free to use, and we wanted to keep the costs of this course down. You may be familiar with other webpage editing

More information

CONTENT MANAGEMENT SYSTEM USER GUIDE

CONTENT MANAGEMENT SYSTEM USER GUIDE CONTENT MANAGEMENT SYSTEM USER GUIDE TABLE OF CONTENTS Logging in to the CMS...p. 3 Folders...p. 4 Creating a web page...p. 5 Step one: create your content section...p. 5 Step two: use a smart form to

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1

UH CMS Basics. Cascade CMS Basics Class. UH CMS Basics Updated: June,2011! Page 1 UH CMS Basics Cascade CMS Basics Class UH CMS Basics Updated: June,2011! Page 1 Introduction I. What is a CMS?! A CMS or Content Management System is a web based piece of software used to create web content,

More information

Creating Accessible Documents in Word 2011 for Mac

Creating Accessible Documents in Word 2011 for Mac Creating Accessible Documents in Word 2011 for Mac NOTE: Word 2011 for Mac does not offer an Accessibility Checker. After creating your document, you can double-check your work on a PC, to make sure your

More information

Schoolwires Staff Website Reference Guide

Schoolwires Staff Website Reference Guide CONTENTS Signing In... 2 Changing Your Web Account Password... 3 Adding a New Page... 7 Updating A Web Page... 10 Schoolwires Staff Website Reference Guide Inserting an Email Link... 12 Inserting a Web

More information

JustEdit WYSIWYG Toolbar

JustEdit WYSIWYG Toolbar JustEdit WYSIWYG Toolbar Overview When entering JustEdit, users will encounter the JustEdit toolbar, which has a variety of functions available in order to make editing the page easier. The icons present

More information

SOCS Javascript Editor

SOCS Javascript Editor Javascript Editor Tool Bar and Buttons Insert Article Redirect Use the Article Redirect icon when you want a Section to redirect to another website, to a webpage or file within your site. The article containing

More information

A quick guide to... Creating Newsletters

A quick guide to... Creating Newsletters A quick guide to... Creating Newsletters In this guide... Learn how to create attractive, well-designed HTML and plain-text messages to engage your contacts, meet their expectations and match their preferences.

More information

Lions Clubs International e-district House Content Management System (CMS) Training Guide

Lions Clubs International e-district House Content Management System (CMS) Training Guide Lions Clubs International e-district House Content Management System (CMS) Training Guide All of the material contained in this guide is the exclusive property of Alkon Consulting Group, Inc. (Alkon).

More information

Blackboard 9.1 SP 11 The Content Editor

Blackboard 9.1 SP 11 The Content Editor Blackboard 9.1 SP 11 The Content Editor Introduction Blackboard has introduced a new content editor. The content editor is available to instructors, teaching assistants and students throughout Blackboard.

More information

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide

RADFORD UNIVERSITY. Radford.edu. Content Administrator s Guide RADFORD UNIVERSITY Radford.edu Content Administrator s Guide Contents Getting Started... 2 Accessing Content Administration Tools... 2 Logging In... 2... 2 Getting Around... 2 Logging Out... 3 Adding and

More information

Chapter 3: The Schoolwires Editor

Chapter 3: The Schoolwires Editor : By the end of this chapter you will be able to: Insert and format text. Insert and format images. Insert and format tables. Insert links. Use ActiveBlocks to enhance your pages. Introduction to the Schoolwires

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

Using JCPS Online for Websites

Using JCPS Online for Websites Getting Started Before you begin, an Online Group must be created for you. Send an email requesting the group along with the username of anyone you want added as an editor to mike.broderick@jefferson.kyschools.us.

More information

Welcome to the Drupal How to Guide for Business/Association Member

Welcome to the Drupal How to Guide for Business/Association Member www.webprophets.com.au PO Box 2007 St Kilda West Victoria Australia 3182 Phone +61 3 9534 1800 Fax +61 3 9534 1100 Email info@webprophets.com.au Web www.webprophets.com.au Welcome to the Drupal How to

More information

Microsoft Word 2007 (Getting Started) Screen Layout

Microsoft Word 2007 (Getting Started) Screen Layout Microsoft Word 2007 (Getting Started) Screen Layout Menus When you begin to explore Word 2007 you will notice a new look to the menu bar. There are three features that you should remember as you work within

More information

Tagging an Existing PDF in Adobe Acrobat 8

Tagging an Existing PDF in Adobe Acrobat 8 Tagging an Existing PDF in Adobe Acrobat 8 Adobe Acrobat 8 allows for elements of a document to be tagged according to their purpose. These tags are not displayed in the document, but they are used by

More information

WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)

WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:

More information

Using Anchors Drupal: Gold, Silver & Bronze

Using Anchors Drupal: Gold, Silver & Bronze Using Anchors Drupal: Gold, Silver & Bronze Anchors help to link within a page. They are most often used to link different items in a table of contents to the answer or description relating to that item

More information

A quick guide to... Creating Autoresponders

A quick guide to... Creating Autoresponders A quick guide to... Creating Autoresponders In this guide... Learn how the GetResponse autoresponder puts your follow-up messages on autopilot with drip campaigns, welcome messages and more! Table of Contents

More information

ICT 6012: Web Programming

ICT 6012: Web Programming ICT 6012: Web Programming Covers HTML, PHP Programming and JavaScript Covers in 13 lectures a lecture plan is supplied. Please note that there are some extra classes and some cancelled classes Mid-Term

More information