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.