TUTORIAL Creating a Simple Website
Why having a website?
Table of Contents Table of Contents ...... 2 Step 1: create a Google account (Gmail) ...... 3 Step 2: create a Google website ...... 4 Step 3: edit a page ...... 6 Add an hyperlink ...... 7 Create a new page: ...... 8 Add an image...... 9 Step 4: website page setting ...... 10 The header ...... 10 The side bar ...... 11 The custom footer ...... 12 Horizontal navigation bar ...... 12 Step 5: manage and adjust website parameters ...... 13 General ...... 13 Sharing and Permissions ...... 14 Website appearance: themes, colours and fonts ...... 15 Website Architecture ...... 17 Step 6: Google gadgets ...... 18 Reminders ...... Erreur ! Signet non défini. Reading mode ...... 20 Editing mode ...... 20 Layout mode ...... 21 Management mode ...... 21
Step 1: create a Google account (Gmail)
If you already have a Google account, go directly to Step 2.
This tutorial is entirely based on “Google Chrome” as the search engine. Although other internet search engines produce similar results, we recommend the installation of Google Chrome for the purpose of this tutorial exercises.
1) To create a Google account, search for “create a Google account” on your Internet research engine and click on the first link: https://accounts.google.com/SignUp?service=mail
2) You will be asked to complete a number of information, such as Name, Username, Password, E-mail, etc. (see illustration on the left). Fill out the form and click on “Next step”.
3) Next you can add a picture, however this is optional. Complete your registration by clicking on “Next step”.
Congratulations, your registration is now completed! Step 2: create a Google website
1) To start, go to: https://sites.google.com/ 2) In order to sign in, your Password created in step 1 is required.
Welcome on Google Sites !
3) Once signed in, click on the icon “CREATE” at the top left corner.
4) Creation page.
Select “blank template” (if familiar with the creation of webpages, you might also select a predesigned template)
Define the website title. For instance: “NIU Website”. It is possible to change the website title later on. (The section “site location” is filled in automatically, do not worry about it.)
By clicking on “Select a theme”, a set of predefined colours and styles for the website, can be selected. The selection of the theme is not definitive and will not influence the tutorial exercises.
By clicking on “Other options”, a website description can be added. The website description will appear in research results on your research engine.
Finally, type the code displayed on the bottom of the page in the designated field (this is a security procedure) and click on “CREATE”, at the top of the page (the creation of the website can take some time).
The illustration bellow shows how the blank website should look like.
Step 3: edit a page
Any webpage (here the homepage) can be edited by clicking on the “pencil button”:
Once clicked on the “pencil button” you enter the editing mode, where the page can be modified and content can be added (comparable to a word processing program). 1) Choose Layout The Layout or webpage structure can be adapted by clicking on the “Layout” tab at the top left corner (see illustration bellow).
After defining the webpage layout (e.g. “Three column”), insert relevant text, as illustrated below. 2) Add a hyperlink
A hyperlink allows to link a word or a group of words to another page of the website or to another Internet website page, if someone clicks on this/these word(s). To create a hyperlink, select the word or the group of words on which you want to apply the link, and then click on the “link” icon:
You can establish two different sorts of hyperlinks, either you create a connection within your webpage, or you create a link to another website.
If you want to create a hyperlink inside your webpage, chose the page you want to connect with the hyperlink in the website map (see image on the left). The next section illustrates how to create a new page within you webpage.
If you want the hyperlink to redirect the reader to another external website, copy & paste the web address of this website in the boy “Link to this URL” (e.g. www.cuts-geneva.org). The reader will be redirected to it by clicking on “Click here”.
Please note that the link is only working in reading mode. Click on “Save” to shift to the reading mode and verify if the link works correctly. 3) Create a new page:
To create a new page, click on the button “New page”: . The following menu will appear:
Name you page: by naming the page, the page URL will be modified automatically. You will be able to change it while clicking on “Change URL”.
Select a template to use: Click on « Web Page », or visit the section « Learn more » to know more about different templates of available pages.
Select a location: If you select “Put page at the top level”, it will become a main page, which means the new page is accessible through any other page on your website. There is also the possibility to select another location for the newly created page, such as subordinate it to another page. See the section on Website architecture to modify page hierarchy later.
4) Add an image
First, select the desired position of your image on the page. Second, click on “Insert” and chose the icon “Image”. The following menu will appear:
By clicking on « Uploaded images », you are able to chose an image available on your computer. Select the image saved on your computer and click on “OK”. It will appear on your web page.
By selecting the image inserted, there is the possibility to modify its position and size (S: small, M: medium, L: large, 100%: fill the space of the box), as well as the images interaction with the text (around or besides). By clicking on the cross at the bottom right, the image can be deleted. There is also the possibility to add a hyperlink to the image, which allows connecting it to a document or a relevant site.
Step 4: website page setting
The website page setting provides the possibility to modify the layout of each page, as well as the overall architecture of the website. It is not to be confused with the “editing mode” (Step 3). In order to access the website page setting mode follow the steps below: Return to the reading mode (by clicking on “Save”), Click on the button “More action menu” Inside the More action menu select “edit site Layout” The Layout mode allows for changes of 4 parameters that are integrated in each page, namely the header, the sidebar, the custom footer and the horizontal navigation bar.
By clicking on one of those four tabs, you will make them appear or disappear. When the areas are visible (i.e. when the area button is dark grey), click on the area you want to modify to start making changes on it. 1) The header
When selecting the header, click on “Edit site header”. You have now the possibility to modify its size and to add a website logo.
To add a logo, choose an existing image on your computer, (select it by clicking on “Browse”). You can then play with alignment options and keep the one you prefer.
To know how to add / delete the website title on the header, see Step 5 “General”. 2) The side bar
You can see that there are a lot of pages on the website homepage of this tutorial. By default, Google shows all existing pages, until the 2nd grade of the hierarchy (top-level pages and subpages). Below, you can see that there is no hierarchy for the moment and all the pages are visible.
Click anywhere on the Sidebar The box below will show up:
By clicking on the sidebar, you have the following options: Title: modify the title of the sidebar (or decide whether or not to display it) Select pages to display: Choose the pages to display in the sidebar (uncheck “automatically organize my navigation”). Click on “Add a page” and select pages among the ones you have created. Preferably, it will be the first pages in hierarchical order. o Please note that the non-selected pages will not be directly accessible by the reader for the moment. But as seen previously, you can create hyperlinks to redirect the reader to these pages. Include a link: you can also provide the reader with a link to the sitemap (its architecture, its pages’ hierarchy, etc.)
3) The custom footer
By default, the footer is hidden in your website. To create it, click on the corresponding tab:
A zone of word processing appears at the bottom of the page. This zone is ideal for adding contact information, links to other websites, Internet addresses of partners, etc.
4) Horizontal navigation bar
As for the footer, the horizontal bar will not appear automatically. Click on the relevant tab to display it:
Then click on the Horizontal navigation area to display the following box: The horizontal bar is a navigation instrument comparable to the sidebar. If you chose the horizontal navigation, the main pages are displayed horizontally at the top of your page, between the header and the content (instead of vertically on the right side as for the sidebar). Given the identical function of the horizontal and vertical navigation bars, we recommend choosing one of them only. To hide horizontal bar, click on the "Horizontal navigation" tab in the layout mode menu, by clicking on the same tab again, the horizontal bar reappears (in the previously saved version). Step 5: manage and adjust website parameters
To enter the Site Management mode, select “More action menu” and chose “Manage site” in the drop-down menu. You are now in “General” section (1) of the Site Management mode. Other sections introduced in Step 5 of this tutorial are: “Sharing and Permissions” (2), “Themes, Colours and Fonts” (3) and “Pages” (4). Whenever you want to leave the Site Management mode, click on to return to the website and continue with the tutorial.
1) General
The “General” section of the Site Management mode, allows for the following modifications: Modify the website name (but not its URL address). The title will change on the header of the website, as well as on the tab of your browser. In case you don’t want to display the website name in the header, uncheck the box “Show the website name on the bottom of pages”.
Change the “landing page” of our website, e.g. the first page that the users will read. To do so,
click on and select the relevant page.
There is also the possibility of deleting the research bar of your website by clicking on “Configure site search” (see illustration bellow). Uncheck “Enable search” to hide the research bar of your website. If you want to keep the research bar, choose if the research should only refer to the website content or to Google in general. 2) Sharing and Permissions
In the “Sharing and permissions” section, you can define who has the right to access and modify your website.
By default the website is public, meaning that anyone can find this website via an Internet search engine. During the time your website is under construction, it might be better not to make it public. In order to restrict access to the website, click on “Modify” then tick the box “Specific people”.
After saving the changes, you can invite contributors by granting them editing rights on your Internet website (they must have a Google account). Make sure to select “Can edit” (other choices are available by clicking in this tab). Add a message to your contributor by ticking the box “Notify people via email”.
The invited person has to click on the link received in her/his mail, in order to get access to the website. Once connected, the invited person has the same rights and options to edit the page as the owner of the website (except for the website parameters, which are only accessible to the owner). 3) Website appearance: themes, colours and fonts
3) Website Architecture
Step 6: Google gadgets
In the editing mode (Step 3), there is a function to insert “gadgets” in your website. The agenda gadget for example is a very useful tool, as it allows to inform visitors of the website about important events.
To insert a gadget in your website, enter the editing mode ( ). Then click with the curser on the zone you want the gadget to appear and select “Insert”, “More gadgets” (as you can see in the illustration bellow, there is also the possibility to insert YouTube videos, interactive maps, images, etc.)
To insert agenda, select “Calendar” Please note that the calendar does not appear in editing mode. Save your progress in order to see and edit the calendar in the reading mode.
Add events to the calendar by clicking on “Add” on the bottom of this gadget (reading mode). You will be redirecting to the following page, where you will be able to give some details about the event that you want to add.
Your new event will appear as below in the Calendar Gadget:
By clicking on the event, the reader has access to the specified details.
The different modes in Google Site
1) Reading mode
The “Reading mode” is the default mode. It displays the website as any visitor would see it.
2) Editing mode (Step 3)
The “Editing mode” can be accessed from the reading mode by clicking on “Edit page” . The menu-bar below will appear:
Quit this mode by clicking on , you will hence go back to the reading mode.
3) Layout mode (Step 4)
The “Layout mode” can be accessed from the reading mode by clicking on the button “More action menu” and selecting “edit site Layout” .
Go back to the reading mode by clicking on .
4) Management mode (Step 5)
To enter the Site Management mode, select “More action menu” and chose “Manage site” in the drop-down menu.
C