Working with Images 1 / 12

Similar documents
ENGL 103 Eportfolio Instructions Table of Contents Create Portfolio Shell and Select Template Edit Pages

QRG: Adding Images, Files and Links in the WYSIWYG Editor

Relay Online How To:

Beginners Guide to Snippet Master PRO

Display Systems International Software Demo Instructions

OU Campus VERSION 10

Customer Support Guide. How to insert a photo into a tile in WX

WYSIWYG Editor: Users Manual

Joomla! 2.5.x Training Manual

Customer Support Guide How to insert a photo into a tile in WX

1.0 Overview For content management, Joomla divides into some basic components: the Article

FirmSite Control. Tutorial

Creating a Website in Schoolwires Technology Integration Center

Week 5 Creating a Calendar. About Tables. Making a Calendar From a Table Template. Week 5 Word 2010

Designing Your Teacher Page. Medora Community School Corporation

Microsoft FrontPage Practical Session

Creating a Website in Schoolwires

BHM Website Teacher User Guide

QRG: Using the WYSIWYG Editor

Word Introduction SBCUSD IT Training Program. Word Introduction. Page Setup, Paragraph Attributes, Printing and More.

OU Campus VERSION 10

Creating a Presentation

Handout created by Cheryl Tice, Instructional Support for Technology, GST BOCES

Creating Teacher Webpages on the New APS WordPress Site

Author/Editor s View Adding Text & Modifying Text on an Existing Page (Article)

Creating your eportfolio and Networks

Blackboard Portfolio Quick Reference Guide for Students

Centricity 2.0 Section Editor Help Card

Adobe Acrobat Pro DC for Windows

Editing the Home Page

1. Click on the button in your cover photo. 2. Chose the Donate Now option in the drop-down menu.

PBwiki Basics Website:

1 of 24 5/6/2011 2:14 PM

OrgPublisher Photos, Logos, and Legends

Swiiit User Guide 03/09/2015

How to Request a Site

Table Basics. The structure of an table

NEWPORT BEACH ALANO CLUB. Ryanne Tiffany. PowerPoint Guide

Overview NOTE: Listing Overview. User Profile. Language Selection. Asset(s) View. Asset(s) Details. Editing Mode

FrontPage 2000 Tutorial -- Advanced

Website Management with the CMS

Swiiit User Guide 09/11/2016

Adding Pictures to Your Teacher Web Page

Tempo Client Gateway Course Handout by the Houston Association of Realtors

Administrator Quick Guide

4. Fill in your information. Choose an address for your PBworks wiki. Be sure to choose For Education as your workspace type.

Creating Jump Searches

A Quick-Reference Guide. To access reddot:

Home page layout in Canvas

Web Manager 2.0 User s Manual Table of Contents

Drupal Basics. for COS and CLASS site maintainers

Cropping an Image for the Web

University of Pittsburgh Communications Services. Basic Training Manual Drupal 7

REFERENCE GUIDE. Using Plone. Unfinished Edit - Updated material coming soon. The College of the Liberal Arts: Guide to Editing Website Content

Editing Drupal 7 Sites. Basic page editing. June To begin editing, log in by clicking Login at the bottom of the homepage. Username.

NYLearns Curriculum Administration:

The Newsletter will contain a Title for the newsletter, a regular border, columns, Page numbers, Header and Footer and two images.

Updating Your Local Program Webpage

Microsoft FrontPage. An Introduction to. Lecture No.1. Date: April Instructor: Mr. Mustafa Babagil. Prepared By: Nima Hashemian

LaGuardia Community College Thomson Ave, Long Island City, New York Created by ISMD s Dept. Training Team.

Basic Content Management Introduction

Honaker BASIC QUIA INSTRUCTIONS How to set up Class Page in QUIA

AGLOWNET WORDPRESS HOW-TO

How to use Excel Spreadsheets for Graphing

ADOBE DREAMWEAVER CS4 BASICS

OU EDUCATE TRAINING MANUAL

Creating an Image Gallery Asset in OU Campus 4/23/15

Navigate to Success: A Guide to Microsoft Word 2016 For History Majors

GoLive will first ask you if your new site will be for one individual or a work group; select for a Single User, and click Next.

Advanced Marketing Techniques: Zach Stone, Molly McCormick, Dave Frees, Connie Gray, Karen Martin, and Mischelle Davis

Adobe Dreamweaver CS5 Tutorial

Introduction to Microsoft Word 2007 Quickguide

County of Sacramento Instructions for filling out an online Tree Permit

NVU Web Authoring System

Intermediate Microsoft Office 2016: Word

Piktochart 101 Create your first infographic in 15 minutes

Getting Started with BOLT

The Distributor s Content Management Guide for subzero-wolf.com

Content Management System User Guide CONTENT MANAGEMENT SYSTEM User Guide

Kona ALL ABOUT FILES

Configuring the WebDAV Folder for Adding Multiple Files to the Content Collection and Editing Them

Iconasys Advanced 360 Product View Creator. User Guide (Mac OSX)

MARK5 Whiteboard guide

Faculty Web Editing. Wharton County Junior College Employee Training Manual

FrontPage. Directions & Reference

Corel Ventura 8 Introduction

Introduction to Cascade Server (web content management system) Logging in to Cascade Server Remember me Messages Dashboard Home

Mt. Lebanon School District 7 Horsman Drive Pittsburgh, Pennsylvania

Address Bar. Application. The space provided on a web browser that shows the addresses of websites.

HOW TO. In this section, you will find. miscellaneous handouts that explain. HOW TO do various things.

From the Insert Tab (1), highlight Picture (2) drop down and finally choose From Computer to insert a new image

Dreamweaver Basics Outline

Creating Book Trailers Using Photo Story 3 Why Photo Story 3? It is a free program anyone can download.

Word 3 Microsoft Word 2013

RenWeb Handout Manual

How to Update Your Site In Wordpress Vetter Facilities

OU Campus. Web Editors Guide. University Information Technology Services. Training, Outreach, Learning Technologies, & Video Production

Blackboard QuickStart Guide for Students

CROMWELLSTUDIOS. Content Management System Instruction Manual V1. Content Management System. V1

Unit Test Plan for the Joomla Menu Manager

Transcription:

V2 APRIL 2017 1 / 12 To brighten up your website it is often nice to have images inserted onto various pages of your website. We have an easy option to size these photos on your page, as well as aligning multiple images on your page. Loading images into Media Folder 1. MEDIA Create new 2. Give your image a title and a keyword then browse your computer for the image you wish to load. 3. Submit your media once it is loaded. 4. You will land back on the media page once it is loaded, click on the URL beside this image.

2 / 12 5. Copy the link in the pop up window by following the prompts: CTRL + C 6. Copy the link in the pop up window by following the prompts: CTRL + C. Go to WEBSITE CONTENT and find the page you wish to add the image to. Click on the pencil icon to edit this page. 7. Click on the green tree button (Insert/edit media).

3 / 12 8. A pop up window will open. Paste the copied URL into Image URL box. You will then need to select either Small picture, Medium Picture or Large Picture from the radio buttons on the right. You will then get a preview of your image underneath. 9. Once you have made the choice of size, click on INSERT. You may get a pop up message like the one below you can just click OK and ignore it.

4 / 12 10. You will now see your picture on your page. Make sure to update your page, then VISIT site to see your work. You can repeat the process with other images in your media folder. In the example below, I have used the same image and the different size options.

View from your live website. 5 / 12

6 / 12 WRAPPING TEXT AROUND YOUR IMAGE If you have a page that you would like to brighten up with images displayed throughout your text, follow these instructions. 1. Follow step 1-6 in the above guide. Once you are on the page where you would like to add your image, put your cursor where you would like the image displayed. 2. In this instance we have put the cursor at the very top left corner of the page. Click on the green tree (insert/edit image) and paste the URL into the Image URL box, then select the image size. (We have chosen MEDIUM in this example).

7 / 12 3. Now click on the APPEARANCE tab at the top. Choose your alignment to be LEFT. 4. You will want to add some spacing around the picture, we suggest something around 5 pixels. Add 5 into both Vertical and Horizontal space. Then click Update.

8 / 12 5. Your page will look like this. Click on SUBMIT and visit your site to see your work. You may also choose to have images aligned to the right, middle etc. If you would like the image on the right, pop your cursor on the line you wish your image to appear and then hit the green tree button. Repeat steps above, this time choosing Alignment to the RIGHT.

9 / 12

10 / 12 ALIGNING MULTIPLE IMAGES ON A PAGE You may find that you would like a row of images displayed on your page, as long as you keep the size choice the same, they will look great. 1. Load your images in to the media folder following the steps outline previously. Copy the URL of the first image and go to WEBSITE CONTENT to find the page you wish to edit. 2. Pop your cursor where you would like the image and click on the Green Tree (insert/edit image) and paste in the URL. Choose your picture size (in this instance we are working with SMALL. 3. Now click on the APPEARANCE TAB and add spacing between the pictures. Spacing between images should be about 2 pixels. So both Horizontal and Vertical space should be 2.

11 / 12 4. Click on INSERT and you will see the image land on your page. 5. Go back to MEDIA and copy the URL of the second image you wish to load. Then go to WEBSITE CONTENT and edit the page you are working on. Pop your cursor to the right of the first image and then click on the Green Tree (insert/edit image) icon. 6. Paste your URL in, choose picture size SMALL and then click on Appearance to add in the vertical and horizontal spacing. 7. You will see your images aligned on your page, continue for as many as you like. Once finished, VISIT site to see your work.

12 / 12