IMAGES

Media Elements Adding YouTube Videos & Uploading Files

Media Elements – Adding a YouTube Video Next, let’s try the YouTube Media Element Drag and drop the YouTube Element into your webpage, it will have a default video displaying Click on the YouTube Video to bring up its sub-menu To change the video, you will need to get a YouTube URL Position: Changes the displayed location of the video Spacing: Options for adding spacing above or below the video Advanced: Enables you to change the size of the YouTube video, but default, it is set to auto size

Media Elements – Adding a YouTube Video To get a YouTube URL: Go to YouTube.com & bring up a video you’d like to use When the video page opens, click on the ‘Share’ button to open the sharing options for the video Highlight the URL and copy it Go back to the YouTube Element in Weebly and bring up the sub-menu by clicking on the element Paste the URL and the preview image for your video should appear

Media Elements – Uploading a Document The document element gives you the option to display a word document or .pdf If you are using this to display your resume or things you do not want people to be able to edit – use a .PDF (Portable Document Format) Drag a Document Element to the page, click the new element and choose “Upload new File” at the top of the menu

Upload… Can upload ,pptx, , a word doc ,Photoshop file,s This will be how you upload your assignments Create the asset Upload it

Media Elements – Uploading a Document After navigating click ‘Open’ and you should now see the document you selected being displayed

Pictures in Weebly Adding and Editing Images

Images – Adding an Image To begin – Drag an image element onto the webpage The image element should now say ‘Upload Image’, click on that to open up the image options Working with images, you have four sources that you can pull from to get an image: My Computer: The local computer you are working on at the moment Search: Offers the ability to search the Internet and pull a graphic in Also controls for Copyright through the ‘Free Image’ search Favorites: Images that were previously used and favorited from searching URL: If you have the specific address (such as an image stored on a server) to display a graphic

Images – Adding an Image Let’s practice searching for an image: Click the Image Element to upload an image When in the sub-menu, click on the Search button Type in what you would like to search for and click ‘Search’ You will be shown the professional photo tab first These photographs cost money, so click on the Free Photo tab Select one of the Free Photos by hovering over it and clicking the select button to place it in the Image Element

Images – Editing an Image Once the image is selected and placed, click on it to open the Edit panel. The top level options allow: Lightbox, which makes the picture zoom when hovered over – the image becomes a thumbnail Link, which lets you make it a button that takes you to a different page (provide the page URL) Align, which orients the text around the image if it was added to a text element Spacing, which allows you to add a buffer around the image (otherwise text will flow directly on the image Caption, allows a small block of text below the image Advanced, which allows you to set a border style and color, as well as Alt Text – what to show when you hover The Edit Image button seen here is shown on next slide…

Images – Editing an Image, Continued The Edit Image button allows you to crop, rotate, fade, and apply effects

Media Elements Adding YouTube Videos & Uploading Files

Media Elements – Adding a YouTube Video Next, let’s try the YouTube Media Element Drag and drop the YouTube Element into your webpage, it will have a default video displaying Click on the YouTube Video to bring up its sub-menu To change the video, you will need to get a YouTube URL Position: Changes the displayed location of the video Spacing: Options for adding spacing above or below the video Advanced: Enables you to change the size of the YouTube video, but default, it is set to auto size

Media Elements – Adding a YouTube Video To get a YouTube URL: Go to YouTube.com & bring up a video you’d like to use When the video page opens, click on the ‘Share’ button to open the sharing options for the video Highlight the URL and copy it Go back to the YouTube Element in Weebly and bring up the sub-menu by clicking on the element Paste the URL and the preview image for your video should appear

Media Elements – Uploading a Document The document element gives you the option to display a word document or .pdf If you are using this to display your resume or things you do not want people to be able to edit – use a .PDF (Portable Document Format) Drag a Document Element to the page, click the new element and choose “Upload new File” at the top of the menu

Media Elements – Uploading a Document After navigating click ‘Open’ and you should now see the document you selected being displayed

Pictures in Weebly Adding and Editing Images

Images – Adding an Image To begin – Drag an image element onto the webpage The image element should now say ‘Upload Image’, click on that to open up the image options Working with images, you have four sources that you can pull from to get an image: My Computer: The local computer you are working on at the moment Search: Offers the ability to search the Internet and pull a graphic in Also controls for Copyright through the ‘Free Image’ search Favorites: Images that were previously used and favorited from searching URL: If you have the specific address (such as an image stored on a server) to display a graphic

Images – Adding an Image Let’s practice searching for an image: Click the Image Element to upload an image When in the sub-menu, click on the Search button Type in what you would like to search for and click ‘Search’ You will be shown the professional photo tab first These photographs cost money, so click on the Free Photo tab Select one of the Free Photos by hovering over it and clicking the select button to place it in the Image Element

Images – Editing an Image Once the image is selected and placed, click on it to open the Edit panel. The top level options allow: Lightbox, which makes the picture zoom when hovered over – the image becomes a thumbnail Link, which lets you make it a button that takes you to a different page (provide the page URL) Align, which orients the text around the image if it was added to a text element Spacing, which allows you to add a buffer around the image (otherwise text will flow directly on the image Caption, allows a small block of text below the image Advanced, which allows you to set a border style and color, as well as Alt Text – what to show when you hover The Edit Image button seen here is shown on next slide…

Images – Editing an Image, Continued The Edit Image button allows you to crop, rotate, fade, and apply effects

Editing Click the medicine man Click Edit Image The sub menu---4 items

Edit…

Sub Menu Spacing –white space around image Caption – add a caption at bottom of image Advanced-adjust border Practice—add a border to each image

Improve SEO Search Engine Optimization Advanced sub menu Image Caption and Image>Alt Text

END