Quick Tips
Windows keyboard shortcuts:
Undo change(s): Control + Z
Redo change(s): Control + Y
Cut: Control + X
Copy: Control + C
Paste: Control + V
Mac keyboard shortcuts:
Undo change(s): Command + Z
Redo change(s): Command + Y
Cut: Command + X
Copy: Command + C
Paste: Command + V
For a single line break between rows of text, press "Shift + Enter".
"Shift + Enter" is the same as single-spacing in Microsoft Word; "Enter" key by itself will give you a double-space.
I'd like to:
- Create a hyperlink
- Upload a document*
- Upload an image*
- Create a table
- Include a new link (top links/grey links)
- Add content below my menu (sidebar blocks)
- Add a new page to my website
- Edit/add styles
*Only files with the following extensions are allowed: gif, png, jpg, jpeg, pdf, zip, doc, docx, ppt, pptx, xlxs, xls, xlsm, xlsb, xltm, xlam.
Create a hyperlink
- Using your cursor, first highlight the text you'd like to be a hyperlink
- Click the "Link" tool in the toolbar (reference the image above if you're unsure)
- Copy and paste the URL from another browser window, or type it directly if you know it by heart
- Click the "OK" tool. The text you highlighted earlier should now be a blue link; congratulations!
Upload a document
Please be sure to make the document you are uploading accessible before uploading. Visit the ATI website for more information on how to do so. Also watch this Lynda tutorial on creating accessible PDFs.
- Using your cursor, first highlight the text you'd like to be a hyperlink
- Click the "Link" tool in the toolbar (reference the image above if you're unsure)
- Click "Browse Server". A new window will open--this is the server window.
- To add a document to the server, select your department folder, in this case "Drupal". Once you have clicked the folder, the "File Name" list on the right side of the window will fill with documents already on the server, if any.
- Click the green "Upload" button.
- Select "Choose File". This will open your computer browser. Select the file on your computer, and double-click it. The file name should appear where "No file chosen" was.
- Click the second (lower) Upload button. After a few seconds, the file should appear on the right-hand side.
- Double-click the newly-uploaded file. The server browser window will close, and you'll be back at the Link window.
- Accessibility Check - Before you click OK, be sure to add something to the "Advisory Title" box. You'll find this on the "Advanced" tab in the Link window. It should explain what your new link will do. As examples, "Download Fee Schedule" or "Opens Google.com" should be sufficient.
- Simply click "OK", and you should see a blue link where you had highlighted your text in step one.
Upload an image
Image dimensions for placement on a webpage - Online tool to resize images.
Full width: 710px max and Align left/right: 350px or less
- Click to place your cursor at or near the area where you'd like your photo to live.
- Click the image tool (reference the image above if you're unsure)
- Click "Browse Server". A new window will open--this is the server window.
- To add an image to the server, select your department folder, in this case "Drupal". (Sometimes clicking the department folder will causes "Documents" and "Images" to drop down. If that is the case, be sure to click the "Images" folder.) Once you have clicked the folder, the "File Name" list on the right side of the window will fill with images already on the server, if any.
- Click the green "Upload" button.
- Select "Choose File". This will open your computer browser. Select the file on your computer, and double-click it. The file name should appear where "No file chosen" was.
- Click the second (lower) Upload button. After a few seconds, the file should appear on the right-hand side.
- Double-click the newly-uploaded file. The server browser window will close, and you'll be back at the Image window.
- You can set the height and width of the image by changing the numbers in the appropriate boxes. If the padlock is in the closed position, changing one number will automatically adjust the other for you.
- Accessibility Check - Before you click OK, be sure to add informative text to the "Alternative Text" box. This is to assist those with visual disabilities, who use screen readers to access the website. The text should very briefly explain your image. You don't need to go to great detail. As examples, "Students studying" or "Photo of President Junn" should be sufficient. When adding a graphic with text, the entire text in the graphic needs to be made available in the alternative text field. Read more about alternative.
- Click "OK", and your image should appear on the page!
Create a table
Tables should only be used for tabular information. Tables with row or column spans are not accessible. If you can display the content outside of a table and it will make sense, please do so. The table tool is not for formatting purposes especially. The "Styles" tool has options for two-column and three-column setups. More information can be found in the Advanced Skills page.
- Click to place your cursor where you would like to table to be.
- Click the "Table" tool in the toolbar (reference the image above if you're unsure. This is the one that looks like a calendar or group of small boxes.)
- Type the number in the Rows and Columns boxes that you would like displayed in your table.
- While not required, it is suggested to see the Width box to "100%". This will scale the table to the available space on the page, which makes it look nicer and is more readable.
- For accessibility, be sure to select "first row" or "first column" from the Headers dropdown to note those as the main headings for the table.
- Set the "Border size" to zero, borders on tables do not display nicely on the website.
- Click OK, and your table will appear on the page.
To edit the table, right-click on the table and that gives all the edit options available. You can insert/delete rows and columns, edit table properties or delete an entire table.
Include a new link (top links/grey links)
- Please note - This section is for adding grey links to your menu. If you would like to add a normal menu link, see the Advanced Skills page.
- To add links, such as those in the photo above, open the home page of your department. This step is important--you can only create these links from the department home page!
- About halfway down the page, you will see a section called "Top Links". (In your window, the section header will be gold in color).
- In the "Title" column, add the text you would like to display on the grey link.
- In the "URL" column, type or paste the address of the page you'd like the link to open.
- If you need another row, click the "Add another item" button.
- Remember to save your draft to retain the changes!
Add content below my menu (sidebar blocks)
- To add content (such as quick contact information) to the bottom of your menu, open a new draft of the department home page. This step is important--you can only create these blocks from the department home page!
- Scroll down to the "Sidebar Blocks" section. (In your window, the section header will be gold in color.)
- These sections are essentially mini-pages. All of the rules and tools available for normal pages apply to these as well. The only difference is that sidebar blocks shouldn't have much content; just little things you'd like users to see on every page in your department or program.
- When you are finished with your sidebar block, simply save the draft or submit for publishing.
Add a new page to my website
- Locate the "Add Content" button in the top left corner of your browser. Hover over this button till you see the dropdown.
- From the dropdown menu, select "Page"
- A blank page will appear on your screen. Enter a title and fill out the content.
- IMPORTANT - Select the group (department) in the "Groups Audience" box about halfway down the page. By default it will have "None" highlighted. For example, if it is a new H.R. page, you would select "Human Resources" as the group. Only the groups you have permission to edit will be available to you as options.
- If you would like this new page to appear in your navigation menu, check the box "Provide a menu link" under "Menu settings" tab. See the detailed instructions "Add a menu/navigation link" for more information on this topic.
- The system forces you to save your page as a draft the first time.
- If you are ready to send the draft for publishing, set the moderation state to "Needs Review" and save it again. If you are unsure how to do that, see The Basics.
Styles
- Click the "Styles" drop-down menu.
- The options in this menu change based on which content is selected, so be sure to place your cursor on or in the content you'd like to change.
- The names aren't intuitive, so it may require some guessing and checking.
- Some of the common styles you see around the website are:
- The gold bubbles for lists, such as this one. Create a normal bulleted list, click or highlight the content, and choose "ul.circle-list"
- Letter icons for email addresses. Create a normal email address link. For example mail@example.com becomes mail@example.com when the style "a.mail-link" is chosen.
- Arrows for links. Selecting "a.gray-arrow-gold-link" turns a normal hyperlink such as Stan State into: Stan State
- There are lots of other options, and you are encouraged to experiment and try them out!