Website Design

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