Tutorials


Web Design

Web design using Fireworks and Dreamweaver
Word Press support
Google Sites
Insert custom HTML CSS, Javascript into Google Sites
Building a site with Google Sites
Changing CSS in google sites
http://www.georgebenainous.com/web/
http://www.w3schools.com/

Coding

Learn to code with Javascript
Coding tutorials - various
Embed google maps
Adding a search function
Changing the background - wikispaces (video)
Changing the default stylesheet in wikispaces

Dreamweaver and CSS

Site set up in Dreamweaver



CSS tutorial


Use this link to choose an HTML / CSS template



Link the stylesheet to the index.html page
Note: Make sure you saved your stylesheet page as style.css
external image Screen%20Shot%202015-02-01%20at%2012.21.05%20PM.png


Insert your banner into index.htmlGo the index.html page - code view and make sure you have the following. Note: you should save your banner as banner.gifAsk if you are unsure


external image Screen%20Shot%202015-02-01%20at%2012.21.22%20PM.png
You can now start adding content to your index.html page.


Obviously, you will need to change the Latin example text to any text you would like to include.

You can repeat the steps for 3,4,5,6 and if you would like to change the html /css layout, take a look at some of the great example html / css designs here

Note: If you create any more pages, you will need to name them appropriately (eg content.html, contact.html)

Creating Galleries using HTML/CSS/Javascript



Download the template above

You may wish to change the HTML code.
Below I have added some more div tags for the banner, title and images
Screen Shot 2015-03-05 at 8.30.03 AM.png



Screen Shot 2015-03-10 at 11.15.32 AM.png
Screen Shot 2015-03-10 at 11.16.01 AM.png

You should then also change the CSS code to reflect these changes




You could change the name of the html file to gallery.html (as you already have an index.html). You would need to copy all files into your webdesign folder and images folder respectively. You can then edit the HTML page to link to any images within your image folder.



https://support.google.com/sites/answer/2500646?hl=en

How to extract the source files from your google site

Video tutorial on how to use the Java file to extract your google site

Search bar in Google Sites
<form id="sites-searchbox-form" action="[SiteURL]/system/app/pages/search">
<input type="hidden" id="sites-searchbox-scope" name="scope" value="search-site" />
<input type="text" id="jot-ui-searchInput" name="q" size="20" value="" aria-label="Search this site" autocomplete="off" />
<input type="submit" id="sites-searchbox-search-button" class="goog-inline-block jfk-button jfk-button-standard" tabindex="0" value="Search this site" />
</form>

Wikispaces Classroom Site
Some useful tutorials for adding Javascript/HTML
http://gettingtrickywithwikis.wikispaces.com/

Embed Flash into Google Site




Video Editing

Final Cut Express 4
Creating custom buttons in Final Cut 4
Making a DVD from Final Cut

Cyberlink Power Director

Google sites slide Show help
http://www.steegle.com/websites/google-sites-howtos/docs-presentation-slider-gadget