Tampilkan postingan dengan label images. Tampilkan semua postingan
Tampilkan postingan dengan label images. Tampilkan semua postingan

Rabu, 16 Desember 2015

Video Tutorial - Image Formatting and Icons

My latest video tutorial for Google Sites.  We've been creating this sample website for a bakery quite steadily.

Here's what you an expect to learn in this video:
  • How to insert images by URL
  • How to format images horizontally
  • How to create images as links
  • How to find free icons for your website



    I hope you enjoy this latest video.  Any suggestions or ideas can be submitted as comments.  Thanks for tuning in.

    Senin, 07 September 2015

    Working With Templates - having a problem with a public Google Sites template and you can't locate that pesky rogue logo?

    Change Your Sites Logo - are you having a problem with a public template and you can't locate that pesky rogue logo? 

    ok.....

    there are possibly a few ways the logo or image could be attached to the top of the page

    click on more actions > manage site > colours and fonts > scroll down and click on Site header background image and see if that is where the logo is



    if the logo is not there ..... click on more actions > manage site > site layout > change logo and see if it is there ......



    And last but not least, the template logo could be part of the background image.



    If this is the case you will need to click on view, save the image to your pc and then edit the image by placing your logo over the top for example in a program such as photoshop.

    Let me know if this sorts out the situation for you.....

    B x


    Selasa, 31 Maret 2015

    Go, Do This! How To - The 'Mouse Over Image Change'

    Hey, Beckystar here again from web princess :)

    One of my favourite effects is the 'Mouse Over Image Change', like the example I have made on my home page, my web princess logo is turquoise on white, move your mouse pointer over it, now it's turquoise on black! - click here to see it.

    (I apologise now for the lengthy links used in my code example, no doubt yours will be the same too!)

    This is so easy to do . . . .

    Click Edit page ► Insert ► More gadgets ► Search: Code Wrapper ► Select ► embed the code below, customise it, and remember to change the width and heights to the size of the images you use.

    TIP - It's best to use two images roughly the same size!
    TIP -To get the url of your images click More Actions ► Manage Site ► Attachments ► Click View on the images you want to use ► Copy the URL from the address bar of the pop up window displaying the image ► Repeat for image 2!

    This is the code:

    <style type="text/css">
    .outer {width:245px; height:60px; background-image:url(http://746368688081817836-a-1802744773732722657-s-sites.googlegroups.com/site/webprincessgbbo00/Website-Designer-In-Boston-Lincolnshire-testimonials/final%20logo.jpg?attachauth=ANoY7crNBp06DjiBmK8kaRXZ5I6v391tSkpDfULC8Q6sThQ9b5J1ie_Hv1sxYFx5VhZQlicPQi1f0LAaTCRNwdRDYhHmtMdZZHk3TA9uNzCbj5cQV3zPLBzUCpj_KRu4NiLkve0MVA7LzGVTn0XQrudpzWzJA-9CymQ9goKDi_itm05TovIqIrCRaxJSyUWsjDEtMMiGI7dF1C8vSjGJNAf1VNeEh_jPaWjanazfTUwl9IkG-kKXd_7RyxfO7atEEP4WY-RY_H-ILYlG9a_bvAzjl69HvN1UiA%3D%3D&attredirects=0)}
    .outer {display:block}
    .outer img {width:100%; height:100%; border:0}
    html>body .outer img {display:block}
    .outer a:hover {visibility:visible}
    .outer a:hover img {visibility:hidden}
    </style>
    <div class="outer"><a href="http://webprincess.co.uk/" target="_blank" title="I Love This Mouse Over Effect."><img src="http://746368688081817836-a-1802744773732722657-s-sites.googlegroups.com/site/webprincessgbbo00/home/untitled2.jpg?attachauth=ANoY7cpHPsL-PdUgPwr1WbiJJeqjO00EbbI6jeoBLE4F16-OM_0zVhq49NFfBIzrmwItcDixPMB9PdUj4s2uadJ6epta_hpTnbNU9fRN7y5q1al_RQn7wQovydgwm4yBgWwmSLe7kRJz5Gueokrr2VpPjzRygFTB7K6gTDyejfTCanbWMFxTJJUd2uUmGMT_sdSBEqr8xI0H4fj79w12urIHYc8Oi-MUwg%3D%3D&attredirects=0" width="245" height="60"></a></div>

    Then just customise the gadget Display ► OK ► Save!

    Let me know what you think, enjoy! Need SOme Help? Visit www.webprincess.co.uk/google-sites-help

    Beckystar

    PS Massive thanks to mori79 for the code which allowed me to share this amazing effect with you.



    Jumat, 27 Maret 2015

    Tip - The Small Things

    Even BIG professional web designers miss some basic things in Google site powered professional  website.
    Some of them are:
    1. Favicon:   Making a favicon and upload in Google sites is very simple. That gives you the personalised look.  That’s not very tough, right?... Go to favicon.cc and just make one favicon and upload it in Google site's attachments. (Ha ha, I know, most of them are aware of it, but even they are not doing it.).
    2. Site header/ Background/ Wrapper images:   Some plain Background images are always not necessary too BIG, like this.
     

               You can make a header like this, instead of above.
        

      and make it repeat horizontally.   So we can reduce the size, and web page will load faster.
    1. Logo:   It’s always nice to put a logo in separately uploaded as logo ( Site layout> Height: Use theme default (change logo)). So that, It’ll clickable to homepage. You can make a .png image with background as transparent.
     
    See the sample site.

    Kamis, 05 Maret 2015

    Magic Tables! Get Lined Up And Look Pro!

    Happy Saturday Everyone!

    Well I have lots of memories of help needed on how to line up text and pictures and sometimes clicking on an image and selecting "wrap on" is not good enough when designing your google site.

    Perhaps you want to add some thumb nails of pictures with a description underneath, or,  maybe you want to create a four column look like Perfect Square Solutions' site which will brilliantly advertise your services.

    To create the effect choose a one column area within your pages.




    Now, click on Insert > Table - then select the size you require, in this instance select two rows and four columns like this:





    Click in each cell columns and add text and pictures. I would recommend your pictures should be around the same size, your pictures should also be centralised. How you have them is up to you, have a play!

    Text looks good lined up to the left as http://www.perfectquaresolutions.com/ have done and so has my example which is looking something like this now, is yours?



    Albeit a little tricky keep clicking around the bottom right hand corner of each cell at the top of your table until you select each cell, then stretch it by dragging it a little to the right to fill out the space, do this for each cell until the whole of the one column width is filled out and all the cells are equal in size.



    Make sure you are 100% happy with the look of your table and position of your pictures and text. Get out your magic wand as we are going to erase those harsh black borders of the table!

    With a sprinkle of fairy dust on your computer > Click on HTML in your page editor.

    Delete ONLY the <TABLE> line of the table html. Remember your text may be a little different to mine but it will always begin with <TABLE



    Click update, then watch as you admire those ugly lines disappear ans your site tranforms to the fairest of them all!



    Now remember to save your page, tweek if required then sit back and admire your handy work. I promise you the next time you do this you will be a pro magician!

    Here are a two more examples where those abracadabra tables have been used:

    
    This Uses Two Tables, Each Consisting Of Two Rows And Three Columns
    
    The Original Inspiration - Perfect Square Solutions Four Column Style Home Page
    
    I look forward to hearing your comments.

    Need some help? Visit  www.webprincess.co.uk/google-sites-help

    Speak soon!