j.s. how tos

Google Sites: Help and Instructions to Customize Your Site

  Twitter  Facebook  Twitter  More...  Contact 
 
Basics
Gadgets
Images
Links

Recent Posts
  • Favicon You can personalize your site even more by adding a custom favicon, the image that appears next to the site name in the browser tab.   Create a favicon (for example ...
    Posted Mar 21, 2013, 6:06 PM by Julie Sharma
  • Image borders You can add a border to your images using HTML markup. For hints about html basics, try HTML basics. To add a basic border be sure you are signed in ...
    Posted Mar 21, 2013, 6:07 PM by Julie Sharma
  • Change image size When you add an image, you can set relative image size in regular edit mode , or specific image size in HTML mode. Regular (WYSIWYG) mode: Add your picture as specified ...
    Posted Mar 21, 2013, 6:50 PM by Julie Sharma
  • Slideshow go to Picasa and create an album; add any pictures you want in your slideshow (*note: if you want all visitors to be able to see the slideshow, be sure ...
    Posted Mar 21, 2013, 6:09 PM by Julie Sharma
  • Images as links make an image a link to another page (as on this template): click on the pencil  to edit the page (top, near-center) insert an image (from Picasa or your ...
    Posted Mar 21, 2013, 6:07 PM by Julie Sharma
Showing posts 1 - 5 of 8. View more »




Favicon

posted Jun 8, 2012, 5:03 PM by Julie Sharma   [ updated Mar 21, 2013, 6:06 PM ]

favicon
You can personalize your site even more by adding a custom favicon, the image that appears next to the site name in the browser tab.  
  1. Create a favicon (for example, use www.favicon.cc/)
  2. download your favicon to your computer (if using favicon.cc, click on "Download Favicon" below the drawing area)
  3. upload the favicon to your Google Sites' attachments. To access attachments and upload the file:
    1. click on more button button (top right)
    2. click on "Manage Site" 
    3. click on "Attachments" (on the left side)
    4. click on "Upload"
    5. click on "Choose File"
    6. find the favicon.ico file you just downloaded
    7. click "Upload"
  4. in your attachments, be sure the favicon is named "favicon.ico"  
    1. if not, select the favicon 
    2. click "Rename" 
    3. type "favicon.ico"
    4. click RENAME
  5. return to your site by clicking on your site's name (near top of left side) 
  6. refresh your browser to see your new favicon

  Twitter   Facebook   Twitter   More...   Contact 

Image borders

posted Apr 26, 2012, 4:49 PM by Julie Sharma   [ updated Mar 21, 2013, 6:07 PM ]

html
You can add a border to your images using HTML markup.

For hints about html basics, try HTML basics.

To add a basic border
  1. be sure you are signed in to Google Sites, and then go to your site
  2. click on the penciledit screen pencil to edit the page (top, near-center)
  3. add the image (see these tutorials to add an image from your computer or Picasa)
  4. while still in edit mode, click on the image (to put the cursor in the right section of the computer)
  5. click on <HTML> (top, to the right of the text alignment buttons) menu <-----
  6. look through the html for your image (hint: search for <img to find images in the html). You should find something like this

    <img alt="sample picture" src="https://sites.google.com/site/siteshelphowtos/samplepicture">

     note: your html will be probably have different terms in it

  7. add border style attribute (border ="1"), to get something like

    <img alt="sample picture" src="https://sites.google.com/site/siteshelphowtos/samplepicture"
    style ="border:1;">
  • Formatting with attribute options

    You can change the weight, style, color, which borders to alter, and padding (spacing between border and image) using style attributes:

    image with solid border
    style ="border:1px solid black; padding:5px;"

    1 pixel weight, solid black border with 5 pixels of padding

    image with dotted border
    style ="border:3px dotted red;"

    3 pixel weight, dotted red border without padding

    image with border
    style ="border:5px dashed blue; padding:20px"

    5 pixel weight, dashed blue border 
    with 20 pixels of padding

    image with solid border
    style ="border-top:1px solid black;
    border-bottom:1px solid black;"

    1 pixel weight, solid black border on top and bottom only

    Sample complete html for an image with a 1 pixel solid black border with padding:

    <img alt="sample picture" src="https://sites.google.com/site/siteshelphowtos/samplepicture" 
    style = "border:1px solid black; padding:5px;">

View Related Posts


  Twitter   Facebook   Twitter   More...   Contact 

Change image size

posted Apr 7, 2012, 6:56 AM by Julie Sharma   [ updated Mar 21, 2013, 6:50 PM ]

image

When you add an image, you can set relative image size in regular edit mode , or specific image size in HTML mode.

Regular (WYSIWYG) mode:
  1. Add your picture as specified on the Picasa or computer picture how to.  
  2. After you have entered the picture and while still in edit mode, click on the image
  3. in the toolbar that appears, image size toolbar click  S   M   L or   Original to change the size
  4. click "Save" to save and view changes
HTML mode:
  1. Add your picture as specified on the Picasa or computer picture how to.  
  2. After you have entered the picture and while still in edit mode, click on <HTML>
  3. search the html for something like this

    <img alt="picasa" border="0" src="https://sites.google.com/site/samplepicture.png" >


  4. to specify size, you have 3 options: 
    1. specify width and height with pixels (px) or percentage of page (%)

      <img alt="picasa" border="0" src="https://sites.google.com/site/samplepicture.png"
      width ="40px" height="40px">

      OR

      <img alt="picasa" border="0" src="https://sites.google.com/site/samplepicture.png" 
      width ="50%" height="50%">


    2. specify only width (height will proportionally change) with pixels (px) or percentage of page (%)

      <img alt="picasa" border="0" src="https://sites.google.com/site/samplepicture.png
      width ="40px"  >


      OR

      <img alt="picasa" border="0" src="https://sites.google.com/site/samplepicture.png
      width ="50%"  >


    3. specify only height (width will proportionally change) with pixels (px) or percentage of page (%)

      <img alt="picasa" border="0" src="https://sites.google.com/site/samplepicture.png" height="40px" >

      OR

      <img alt="picasa" border="0" src="https://sites.google.com/site/samplepicture.png" height="40%" >


  5. be sure to use  the = " " and < >  exactly as shown and do NOT add a space between number and px or the number and %  (use 10px not 10 px).
  6. click "Update"
  7. click "Save" to save and view changes

View Related Posts


  Twitter   Facebook   Twitter   More...   Contact 

Slideshow

posted Mar 25, 2012, 8:04 PM by Julie Sharma   [ updated Mar 21, 2013, 6:09 PM ]

picasa
  1. go to Picasa and create an album; add any pictures you want in your slideshow (*note: if you want all visitors to be able to see the slideshow, be sure to set the album's privacy setting to "public on the web")
  2. on your website, click on the penciledit screen pencil to edit the page (top, near-center)
  3. click on "Insert" at the top left of page
  4. select "Picasa Web Slideshow"
  5. click on "Picasa Albums"
  6. click on the album you want to include
  7. click on "Select" 
  8. Click "Save" (top right of page) to save changes and view your slideshow

View Related Posts


  Twitter   Facebook   Twitter   More...   Contact 

Images as links

posted Mar 25, 2012, 8:02 PM by Julie Sharma   [ updated Mar 21, 2013, 6:07 PM ]

image
make an image a link to another page (as on this template):
  1. click on the pencil edit screen pencil to edit the page (top, near-center)
  2. insert an image (from Picasa or your computer) to your site in the place you want the link
  3. in a separate window/browser tab, go to the page you want the picture to link to and copy the URL, for example www.pageiwanttolinkto.com
  4. back in your website and while in edit mode (click on the pencil), click on the image you want to be a link

  5. if you see a toolbar with the blue link and the option to "change" the link,image toolbar with link follow these directions 
    1. click on "change" in the toolbar (right side) 
    2. in the box labeled "Link to this URL:" paste the web address of the site you want to link to (from step 3 above)
    3. click "Ok"
    4. click "Save" to save and view changes
    5. click on the image-link you just created to verify that it works


  6. if you see a toolbar image toolbar without link  without the option to "change" the link, follow these directions (*note* this will require modifying the html. If you are not comfortable with that, try inserting the picture again and see if the "change" option is there or visit HTML basics to learn more about html)
    1. while in edit mode (click on the pencil), click on the area of the webpage where your image is
    2. click on <HTML> (top)
    3. search the html for your image (hint: use the find function (ctrl f (PC) or command f (Mac) and search for img or the name of the image you added) you should find something like this:

      <img src="https://sites.google.com/site/julie1schlafersharma/
      sampleimage.jpg" border="0" alt="imagesample">

    4. in the html, add this

      <a href="https://sites.google.com/site/julie1schlafersharma/samplelink">

       directly before the highlighted <img> text above, replacing the 
      red text with the web address of the site you want to link to (copied in step 3 near top of instructions)

      to give you: 

      <a href="
      www.pageiwanttolinkto.com">
      <img src= "https://sites.google.com/site/julie1schlafersharma/
      sampleimage.jpg">


    5. add this

       
      </a> 

      after the above text, to give you:

      <a href="www.pageiwanttolinkto.com">
      <img src= "https://sites.google.com/site/julie1schlafersharma/
      sampleimage.jpg
      ">
      </a>

      (*note* your text should look different from the highlighted areas of text because you are using a different image and linking to a different page (and might have different size and border settings). Also, instead of 

      .jpg"

      you might have something like this:

      .jpg?height=100&amp;width=100" title= "samplepicturename" width="100"

    6. click "Update"
    7. click "Save" to save and view changes
    8. click on the image-link you just created to verify that it works

View Related Posts


  Twitter   Facebook   Twitter   More...   Contact 

Delete an image

posted Mar 25, 2012, 7:54 PM by Julie Sharma   [ updated Mar 21, 2013, 6:05 PM ]

click on the pencil edit screen pencil to edit the page (top, near-center)
  1. click on the image you want to delete
  2. on the tool bar that appears, click the remove  to remove the image
  3. click "Save" at the top of page to save and view changes 

  Twitter   Facebook   Twitter   More...   Contact 

Include an image (from computer)

posted Mar 25, 2012, 7:51 PM by Julie Sharma   [ updated Mar 21, 2013, 6:08 PM ]

click on the pencil edit screen pencil to edit the page (top, near-center)
  1. place cursor where you want the picture and hit the enter/return button on your keyboard a few times and then return the cursor to the location you want the picture (this is important or the image you insert will probably not go where you want it to)
  2. click on "Insert" (top left side of screen)
  3. click on "Image"
  4. click "Choose File"
  5. choose the desired image from your computer
  6. in the box labeled "Alt text (optional):" type a brief description of the image
  7. click "OK"
  8. once image is in document, you can change the size, alignment, and text-wrapping options by clicking on the image and changing the alignment, size, and text-wrap options on the tool bar that appears: image edit options
  9. click "Save" (at top of page) to save and view changes

View Related Posts


  Twitter   Facebook   Twitter   More...   Contact 

Include a Picasa image

posted Mar 25, 2012, 5:24 PM by Julie Sharma   [ updated Mar 21, 2013, 6:08 PM ]

picasa If you have Picasa albums, you can easily add pictures from there into your site
  1. go to Picasa and upload the pictures you want to post to a web album *important*  if you want all website visitors to be able to see the image(s), be sure to set the album's privacy setting to "public on the web
  2. on your website, click on the pencil edit screen pencil to edit the page (top, near-center)
  3. place the cursor where you want the picture and hit the enter/return button on your keyboard a few times and then return the cursor to the location you want the picture (this is important or the image you insert will probably not go where you want it to)
  4. click on "Insert" (top left side of screen)
  5. click on "Picasa Photo"
  6. choose the desired image
  7. click "Select"
  8. once image is in document, you can change the size, alignment, and text-wrapping options by clicking on the image and changing the alignment, size, and text-wrap options on the tool bar that appears: image edit options
  9. click "Save" (at top of page) to save and view changes

View Related Posts


  Twitter   Facebook   Twitter   More...   Contact 

1-8 of 8