How To Add Flair To Your Site

1
How To Add Flair To Your Site

• Maureen Enright, Elyse Kuriata, Nathan Boes, Hodge

2
Tutorial Overview

• Adding images, video, and music to your site can
  make your site a more exciting, entertaining, and
  interactive place for users to visit.
• This tutorial is meant for users who have an html
  site and are familiar with editing the code of
  the site.

3
Things you will learn in this tutorial

• How to add an image to your site
• How to add a Youtube video to your site
• How to add background music to your site

4
How to add an image

• This section will assist you in adding an image
  to your web site, no matter what type of program
  you are using to create your web site

5
Adding an image

• First
• Select the image you would like to add to your
  web site.
• Note This image can be from your own folder or
  from the internet, a good image site is Flickr.com

6
Online Photos

• If you are choosing to use a web site to download
  your image from a site like flickr.com, open the
  web page.
• If you use flickr
• insert the category
• you would like to
• choose an image of

7
Flickr.com

• Once you have selected a category, you must click
  Advanced Search, right of the search option

• This is necessary
• to give you
• more
• options about the
• photos you
• are viewing

8

• Once you are in advanced search, scroll to the
  bottom of the page and select
• -Only search within Creative Commons and
• -Find content to use commercially
• -Find content to modify, adapt or build upon

9
Creative Commons

• The Creative Commons options allows you to search
  within images people have updated with express
  permission for others to use, modify, etc.
• Click through search, and you will be back to a
  main page of images in the category you have
  selected

10
Downloading an Image

• Once you have selected the image you would like
  to use click on it
• This will open the image to a large scale
• Underneath the title of the image is a microscope
  icon that says All Sizes
• This will open the image again with options for
  downloading

11

• Depending on the size of your web site, and the
  size of the image you desire, you can download
  the various size options on the site

• For the majority of web sites, the medium size
  will be the best choice to download.
• Select the Medium size and download the image to
  your desktop

12
Saving an image

• Once you have your image selected, if through a
  web site, or from your own folder, and it is
  edited, save the image into the same folder where
  your web site pages are stored
• While you can link to an image on the internet
  and do not have to save it into a folder on your
  computer, the image you are using may be deleted
  from the internet, and you will lose your access

13
Open your web site software

• Open the web site software you are utilizing, and
  open the web page you are editing
• If it is a Dreamweaver type of program, the image
  can be easily inserted into the design portion of
  the program
• If it is in a Wordpad type of program, the image
  can only be inserted by knowing the image tags
  and codes

14
If in design software(if using a Word similar
program skip these next steps)

• If you are in a design program, open the split
  screen for design ease and pull down the Image
  menu on the Common Toolbar (the tree icon), or
  choose InsertImage

15

• Choosing to add an image will bring you to a
  screen that allows you to select the place the
  image lives on your computer by using the
  drop-down file option

• Once you find your image, select OK and your
  image will be added
• Click ok through the Accessibility attributes,
  and enter a short description in the image tag
  if your image does not show up on the site, this
  text will

16
Resizing the Image

• Once inserted into your web site, you can resize
  the image to the size you would like
• In a design program the image can be resized by
  pulling in or out on the arrowsHold down the
  shift/alt keys while pulling on the arrows to
  keep the image proportional
• Or you can resize using the code

17
Resizing with Code

• Click on the image you would like to resize
• While having the image highlighted, look at the
  code portion of the split screen, and the image
  coding will be highlighted as well
• If you have specific dimensions the image must
  be, change the height and width accordingly by
  simply retyping the numbers to fit your
  specifications

18
(No Transcript)
19
If in a Word type program

• Open the Word program, and the web page you are
  editing
• Look at the code you have already written
• Select the area of the web page you would like to
  add the image into
• Put your cursor into the page at that particular
  area

20
Inserting with Codefrom a Web folder

• In order to insert any image, you must know what
  the image is saved in your web folder as, it
  should be saved as a .jpg or .gif fileif not,
  resave it as either
• The code necessary for the image is
• width"350"

21
(No Transcript)
22
Breakdown of Code

• width"350"
• The code will look as such with
• standing for the paragraph
• srcstanding for source (or where the image is
  housed)
• Flamingos.jpgtitle of the image to insert (this
  will change depending on your particular image)
• Height and width will also vary
• closing the paragraph code

23
Inserting with codefrom the internet

• If you are inserting an image that is not saved
  in a folder, and is housed on the internet, the
  procedure is the same as inserting an image saved
  in a folder except for one detail

24
Continued

• width"350"
• The code for an image saved on the internet will
  not be as simple as flamingos.jpg
• The image must include the URL of the image in
  addition to the image name
• For example if the flamingos picture were saved
  on the Michigan State University website the
  image information would look as such
• height"400" width"350"
• Once inserting the image, you must manually
  adjust the height and width by adjusting the
  numerals

25
Things to note

• When adding an image into a Word program, unlike
  a design program, you cannot see the image upon
  inserting and resizing
• Having a separate internet browser open while
  resizing the image will assist in adjusting the
  image to the correct size, and ensure that the
  image is inserted into the correct area

26
How to Add a Youtube Video To Your Website

• This section of the tutorial will show you how to
  add (or embed) a video from Youtube onto your
  already existing web site. You will also learn
  how to resize, label, and position the video to
  where you would like to see it on your site.

27
Beginning Your Video Search

• First you must open your browser, and visit the
  Youtube web site, http//www.youtube.com
• Once you are at the site, type the name of the
  video you are looking for in the search bar at
  the top of the page and click on the search
  button.

28
Searching For and Selecting A Video

• If you are unsure of what video you want to post,
  you can type in a subject for the type of video,
  such as funny video, or whatever phrase
  describes the type of video you want to post to
  your site.
• In this case, specifically we are looking for a
  video called Da Mae Mae
• Once you have searched for your video, click on
  the highlighted title of it to take you to the
  videos page

29
Embedding the Code Into Your Site

• Once you have reached the page for your video,
  find the embed code and copy it.
• Paste it into your html page using Notepad.

30
Sizing the Video

• Once the code is embedded into your page, you can
  resize the video by adjusting the width and
  height in the code.
• width"720" and height"480 are both
  recommended sizes, but you can alter this size to
  be how big or small you want.

31
Adding A Title To Your Video

• To add a title to the video, you must add an
  tag that will appear before the embed code.
  Insert with the title of the video and close
  it off with
• To add a description to the video, insert and
  a description of the video. To close it off add
  Insert this after in the code

32
Aligning Your Video

• To align the video flush left, center, or flush
  right, you must insert a tag.
• This tag will go before the title (or tag)
  and after the tag you just inserted.
• To center the video, insert
  before the title at the very beginning of the
  code, and place at the very end of the
  code. To align the code left or right, delete the
  word center in the code, and insert the word
  left or right where the word was.

33
Conclusion to Adding A Youtube Video To Your Site

• You are now finished adding your Youtube video to
  your web site.
• Dont forget to save the changes you made in the
  code of your html site.
• Enjoy the added flair of a Youtube video for your
  page.

34
A Little Extra Pizzazz

• Your audience is looking for excitement. Make
  this happen on your webpage by adding a song,
  jingle, or sounds to the background that will
  enhance their web-browsing experience.

Also, learn how to make your music start
automatically, loop any number of times, and hide
inside the code of the page.
35
Embedding The Object

• Background music on your page will exist as an
  object within the body, meaning you have to embed
  it inside the page. Start like this

36
Adding The Music

• Now, you get to pick the music you want playing
  behind your page. Add the source of the file like
  this

Any .mp3 .mid or .wav sound file will work, but
keep in mind that larger files will take longer
to load. If the sound file is not in the same
folder as the page it is on, make sure to put the
entire file extension in the html tag.
37
Autostart

• You can choose if your music will start as soon
  as the page is opened with this property

Putting false instead will only allow the music
to start when the user clicks the play button on
your page.
38
Looping The Sound

• To have your background music loop, add this to
  the tag

looptrue
Putting a number for this value will only allow
it to loop that many times, or false will only
play it once.
39
Hiding Your Noise

• To make the player invisible on your site, hide
  it like this

looptrue height0 width0
If you dont want the player entirely hidden,
adjust the number values to the size (in pixels)
you want the player to be.
40
Finishing The Job

• Once you have adjusted the properties of the tag
  to your liking, finish the embedding of the
  object like this

looptrue height0 width0
This object should play amusicfile.wav as soon as
the page loads and loop infinitely with no player
visible on the screen.
41
If All Else Fails

• Double-check your code if you are having trouble.
  You may want to try removing the properties from
  the tag and adding them again one at a time to
  see which one is giving you problems. To abandon
  all hope and stick with simpler code, add this
  instead

Musical Madness!
When users click on the Musical Madness! link,
your amusicfile.wav will play, giving your site
its daily dose of flair
42
Conclusion of Tutorial

• Adding images, videos, and background music to
  your site are all ways to improve the look and
  interactivity of your site.
• We hope you have found this tutorial helpful in
  your quest to add flair to your site.

43
(No Transcript)