An Innovation & Technology Division Resource Guide “Things should be made as simple as possible, but not any simpler.� - Albert Einstein
n g i s e D ite
s b e W
-G
e l g oo
s e t i S -
pg. 2
U 11 . D g E p y l b e e W
American Nicaraguan School www.ans.edu.ni - Managua, Nicaragua - 2012
Website Design | Google Sites
Keywords: URL, Sidebar, Hompage, Pages, Site
Getting to Know | Google Sites
STEP 1 • • • •
2
Open your favorite Web Browser (Internet Explorer, Chrome, Firefox, Opera, etc.) In the address bar write: email.ans.edu.ni On the Google Bar Click on "Sites" You'll be taken to Google Sites page
Tiger Tech | Website Design
Creating a Google Site STEP 2 • A list of your sites will appear, if you haven't created any sites then a google site icon will appear. • Click on "Create" button.
Sites created
No Sites created
Starting with your Google Site STEP 3 Template Gallery
Tip: Choose an easy address.
• Select a Template. You're given two choices: Blank Templaete or Gallery. • Write your site's name. • Select your site address (URL). • Under Select Theme: Choose your theme. • Under More Options: Write your site's category, description and sharing options. • Click the "Create" red button.
technology.ans.edu.ni | Tiger Tech
3
Google Site Editor STEP 4
Edit Page New Page Share
• On Screen you'll see your just created website. • Get to know the following buttons: Pencil(Edit), Sheet(New Page), More (More options), Share (Share your page with others).
Tip: The most important buttons: Edit Page, New Page, Share
Editing your Site
}
Save
Tip: Easily find what you're looking for.
4
Tiger Tech | Website Design
STEP 5
Google Site Editor
Cancel
• Click on the Pencil. • Google Site Editor will load. • Explore the menu (Insert, Format, Table and Layout) • Within the Google Site Editor you can change fonts (color,size, alignment,etc) and add media (images, videos, calendar)
Inserting Media STEP 6 • On the menu click on "Insert". • A list of objects that can be inserted into your website appears. • Common objects: Image, Calendar, Document, Map, Picasa Web Slideshow, Video.
Example of YouTube Video
Tip: Inserting, all in one place!
Creating a new page • • • • •
Tips: In a menu you can add serveral items
Different Templates Web Page: Standard web page, write text, insert media. Announcement: Make posts and orders post by date/time. File Cabinet: Upload document so visitors can View or Download them. List: Organizes items in a list form. Startpage: Creates a homepage style web page.
STEP 7 • Click on the Sheet button to add a new page. • Write a name for your new page. • Select a template to use (Web Page, Announcements, File Cabinet, List, Start Page). • Select its location on the site. • Click the "Create" red bitton.
technology.ans.edu.ni | Tiger Tech
5
Customizing the Sidebar
After clicking "Edit Sidebar" 5 1
4
2 3
Tip: Add textboxes, counters, +1 button, etc.
STEP 8 • At the bottom of your site's sidebar, click on "Edit Sidebar". • To add a new side bar item click on "Add a new sidebar item"button. • Choose your item (+1 button, text box, navigation, recent activity, counter,etc.) • Click on "add" and add any of the listed items. • Click "Save" red button.
Inserting Media | Images STEP 9 • Click on the "Insert" • Choose "Image" • Click on the "Choose File" button. • Select your image, click open. • Wait until the image is uploaded. • Add an Alternate Text (optional) • Click "Ok" blue button. • Resize and align your image. Tip: Select image to resize (Small, Medium, Large, Original) and align.
6
Tiger Tech | Website Design
Inserting Media | YouTube STEP 10 • • • •
Click on "Insert" Choose "Video" Choose "YouTube" Paste YouTube video web address (URL). • Click on "Save" red button. • Align the YouTube video.
Tip: As easy as Copy-&-Paste!
Inserting Media | Picasa Web Album Note: Need to have Picasa ACTIVATED and uploaded pictures.
STEP 1I • Click on "Insert" • Choose " Picasa Web slideshow". • Select your Picasa Web Album. • Click on the "Select" blue button.
Tip: Activate Picasa by enteing: picasa.google.com upload your photos into albums.
technology.ans.edu.ni | Tiger Tech
7
Inserting Media | Custom HTML STEP 12 • Click the "<HTML>" button. • Copy & Paste the embedding code. • Click on the "Update" button.
Tip: Usually the embedding code is symbolized by " <>".
Inserting Media | Maps STEP 13 • Click on "Insert" • Choose " Maps" • In the search bar, search for the desired place. (suggestions will appear). • Click on the "Select" blue button". • Then click "Save" red button. After clicking " Select" Tips: If you have a Google Map Link just paste it in the space provided.
8
Tiger Tech | Website Design
Inserting Media | Calendar Note: To insert a calendar first in the calendar's sharing options put it as "public" if you want it available for every visitor.
STEP 14
Tip: Before saving you can customize the look of your calendar.
• Click on " Insert" • Choose "Calendar" • Choose the calendar you wish to publish inot the website. • Click on the " Select" blue button. • On the next dialog box, click the "Save" red button.
Disable Attachments/Comments STEP 15
Attachment/Comment Area
• Click on the "More" button. • Click on "Page Settings". • Un select "Allow Attachments" • Un select "Allow Comments"
Tip: Also can disable site from showing subpages or page title
technology.ans.edu.ni | Tiger Tech
9
Sharing and Collaboration STEP 16 â&#x20AC;˘ Click on "Share" blue botton. â&#x20AC;˘ Under "Add People": type your collegues name or the people's name/e-mail you want your site to be shared with and choose what type of permission they'll have.
Tip: Type names and ANS Google Apps will suggest the name.
Expiriences
"
Google site is easy to use. I can update it in less than ten minutes. I can attach documents for parents to print.
"
-Ruth Albuquerque Second Grade Teacher https://sites.google.com/a/ ans.edu.ni/2nd-grade-team/
10
Tiger Tech | Website Design
Website Design | Weebly EDU
Keywords: Drag & Drop, Elements, Multimedia, Tab
Getting to Know | education.weebly.com
STEP 1 • Open your favorite Web Browser (Internet Explorer, Chrome, Firefox, Opera, etc.) • In the address bar write: education.weebly.com • You'll be taken to Weebly for Education official Website.
technology.ans.edu.ni | Tiger Tech
11
Signing Up STEP 2
Tip: If available, use your ANS username.
• On the box provided: write a username, password and e-mail address. • Read and accept terms of service. • Fill in Human Verification. • Click "Sign Up" orange button. • Fill in your information: Name, Last Name, School and Country. • Click on the "Submit" button.
Let’s Get Started! STEP 3 • You're given three options: 1-Watch a Demo, 2-Set up a Class 3-Create a Website. • Choose Watch a Demo and view the video to get an idea what weebly is.
12
Tiger Tech | Website Design
Setup a Class | Creating a Class STEP 4 • Click on the "Setup a Class" button. • Write Class Name Select Grade and Choose wether students sites will be public or private. • Click "Create class" button.
Note: Students' websites can only contain 5 pages.
Tip: You can add several classes.
Setup a Class | Adding Students STEP 5
Tip: Create a CSV file on excel with First Name, Last Name and Password of each student.
• Write your student's First Name, Last Name, Username and Password. • Click "add button". • To add multiple students: Click on link "add multiple students". • Fill in the information on the box provided. • Students can login to their account on: students.weebly.com
technology.ans.edu.ni | Tiger Tech
13
Create a Website STEP 6 • On your Dashboard: click on "Add Site" orange button. • Enter a title for your website. • Select a Tupe for your site. • Select a Category for your site. • Click on "continue" orange button. • Choose "Use a Subdomain of Weebly. com" • Write your desired address.
Tip: Address will always end in weebly.com
Weebly Editor Ribbon UI
STEP 7 • You've been taken to the Weebly Editor. • The Weebly Editor is a drag&drop editor. • It's User Interface (UI) is similar to the Microsoft Office UI, ribbon
Tip: Start Drag and Dropping elements into the site.
14
Tiger Tech | Website Design
Editing Website | Design STEP 8 • Click on the "Design" tab. • Choose a design/ template for your website.
Your Design is automatically changed after you've selected it.
Editing Website | Adding Pages STEP 9
Tip: Drag pages up/down to reorder and left/right to create subpages.
• Click on the "Add Page" button. • Write your page name on the space provided. • Choose wether you want to hide the page from the navigation menu or not or link it to an web address (URL. • Click on "Advanced Settings" to add: Page Title, Page Description, etc. • Click on the "Save Settings" button.
technology.ans.edu.ni | Tiger Tech
15
Editing Website | Adding Elements STEP 10 • Drag & Drop any of the available elements (Paragraph/Title, Picture, Assignment form, multiple columns). • Elements are grouped by: Basic, Multimedia, Revenue and More.
Tip: To Drag & Drop: Click and drag (pressing down the left-click) to the designated area
Editing Website | Header STEP 11
Tip: To add a logo, hoover by the site name and click on "logo" and upload it.
16
Tiger Tech | Website Design
• Hoover over the header image. • Click on the "Edit Image" orange button. • The W Image Perfect will open. • Now you can: Add a new image, add text, Crop, Rotate, Choose opacity Fading and more effects to the header image. • To save: Click on the "Save" button on the right side corner.
Publishing STEP 12 • On the right-side corner click on the "Publish" orange button. • That's it, your website has been published. • To Close the Weebly Editor just click on the "Close" button on the right-corner.
Tip: One click away to publish!
Expiriences
"
Students were also satisfied with Weebly user interface (UI) and said that it was user friendly and easy for anyone to use and develop a website.
"
-Patricia Ruiz Twelfth Grade Spanish Teacher http://los3grandesdelposmodernismo.weebly.com/ http://dnr-posmodernistas.weebly.com http://posmodernismolml.weebly.com
technology.ans.edu.ni | Tiger Tech
17
American Nicaraguan School
Innovation & Technology Division Frente al Club de Lomas de Montserrat, P.O. Box 2670 Phone #: (505) 2278-0029 / (505) 2278-4508 / Fax: (505) 2267-3088 Managua, Nicaragua www.ans.edu.ni