This is a Clilstore unit. You can .
UNIT 9 WEB DESIGN: ACTIVITY 3. BASIC EDITION
Ejercicio 3 KompoZer
3. Modificar textos e imágenes.
-
Open in Moodle the quiz RANDOM TASK ASSIGNATION FOR KOMPOZER ACTIVITY 3
-
In the first question there are some images and text randomly assigned to you, that you need to carry out this exercise.
ACTIVITY 3.1
Open in Kompozer the page index.html from the site web_aviones, you created in exercise 2:
-
Select all the text and delete it
-
Copy the text provided in the quiz to index.html. It's better to copy the text first to gedit, so that the copied text get filtered of html tags:
-
Copy the text from the Moodle quizz
-
Open a new gedit document (Aplicaciones->Accesorios->gedit) and paste the text there.
-
Copy the text from gedit (Ctrl+c)
- Paste it in Kompozer.
-
-
Change the tittle appearance using the format toolbar: (the tittle is the text "Aviones para uso civil")
-
Select the tittle and change the letter font (tipo de letra). Select the one you like the most.
-
Set a letter size using the button
to increase the font size. -
Set the text to bold letters (negrita). If you want you can also underline the text (subrrallar) and set italic letters (inclinada).
-
-
Set entered alignement
for all the thext. -
Change the text color using
. Notice that this botton is made up of two rectangles, one black and one white. Make sure you click on the black one (foreground text color) and not the white one ( background text colour)
-
The page background color can be set using Format | Page colors and and Background. In this window you can select a background color or image. Choose whatever color you like.
the window in its english version
-
Download the images from the quizz to the folder ./sitios_web/web_aviones/images. Put the cursor over the image, deploy the contextual menu clicking with the right button and select guardar imagen como/save images as. Take into account that there are several different models of the task. The one assigned to you might be similar to others but there are always some difference in the color and the text.
-
Insert the plane picture in the web page. First place the cursor where you want to place the image and clik in the button
. An image selection dialog box will open. -
Use the yellow folder icon
to select the file imagen_entrad.jpg . This file is an image of a plane. -
Don't insert an alternative text, (it will be shown in case the browser can not show the image, but in this activity will consider this unnecessary)
-
Make sure that the option La URL es relativa a la dirección de la página (URL is relative to page location) is enabled.
-
version in spanish and english of this dialog.
-
You must design the page so that I looks like the image bellow. You can adjust the image size and position pulling or dragging any of the image handlers (the white points on the corners of the image)
-
Deploy the contextual menu over the image, select the tab Apariencia (Appearance) and select the option Alinear el texto con la imagen (Align text to image- opción wrap to the left), so that the text flows around the image
-
Repeat the procedure with the other two images of buttons, botonEmpresas.gif and botonRegistro.gif. A quick way to add a new image is to deploy the tree of contents in the site manager panel and dragging (arrastrando) the image to the document from it
-
Insert a line between the two buttons. To insert a line click on the menu Insert | Horizontal line
-
Finally change the page properties selecting the menu formato/Título y propiedades de la página (format |title and page properties) as seen in the image bellow
Spanish Versión
English version
All these items will be written in the header section( between the tags <head>… </head>) . For example what you write in the field title will be written between <title> and </title> tags
-
Download and insert avionVolando.gif it in the top of the page using the button
-
https://www.dropbox.com/s/3wlv9h8yvn71ici/avionVolando.gif?dl=0
-
The exercise must look like the image bellow:
Compress the web_aviones folder and upload it to moodle to the activity 3.1
ACTIVITY 3.2.
In this activity you are going to design the main page in a web site from a languages academy. In the quizz ASIGNACIÓN ALEATORIA EJERCICIO 3, you'll find the text needed and a picture showing the expected result.
-
In the site manager select double click the site academia_idiomas. (You registered this site in the activity 2)
-
For the moment there's only a file there: index.html. Open, using Kompozer, index.html, and if there is on it any text or image, delete it all.
-
If there is no index.html file, just create a new page in Kompozer and save it as ./web_academia/index.html.
- Copy the text from the quizz
- Paste it on a new gedit document
- Copy the text from gedit
- Paste the text on Kompozer, in index.html
-
Deploy the page properties clicking on the menú format / page title and properties
-
Fill in the field autor with your name
-
Disable This page is a template.
-
Select the character set UTF-8
-
-
Select a text color, Select all the text and click on the text color button:
-
A selection color dialgog opens. Create a personalized color. First click on a color as shown in arrow 1 on the image bellow.
-
Choose a saturation degree clicking on 2 (see the image bellow )
-
Don't use a predefined color from the colors palette.
-
If you need to use again this color, you can copy the color hexadecimal code.
-
Apply the color to the page background (fondo). Select Format | Page colors and Background,
-
Select use customs colors (usar colores personalizados)
-
Click in the colored square in texto normal and select a dark personalized color. Remember, we explained above how make a personalized color.
-
Click in the square of texto de enlace (link text) and select a personalized color
-
Click in fondo (background) and choose a personalized pastel color (for example a light cyan, a cream color, a light green etc.)
-
Every student must choose his own set of personalized color. The coincidence of colors in two different students works will be considered an evidence of copy.
-
Now we are going to introduce an image on the top part of the page
-
Search in Google Images a picture of a teacher teaching the language assigned to you in the quizz. Look these examples that you can not use:
-
-
-
Save all the pictures in the folder ./sitios_web/web_idiomas/images
-
To insert the image, place the cursor in the upper left corner and click in the button
. Then select the file you have just downloaded to web_idiomas/images -
In the tab location, check the box URL is relative to page location
-
In the tab appearance select the options shown bellow
-
-
Change the appearance of the the document main tittle at the beginning of the page which is Fluent english/Italiano Fluente/Eisach Deuscht/ Français fluid depending on the language assigned to you
-
Increase the text size using the button
-
Change the font (tipo de letra). Look for a visually striking (llamativa) font (tipo de letra), since this page is meant to sell a product and must draw the clients attention. In the example has been used the font AR BLANCA. Don't use this one, but one of your choice
-
In the text there are several headers (encabezados). In this example there is a section title clases trimestrales, Assign them a header type using the drop down control shown in the image bellow
-
-
Align the tittle to the center using
-
There are two types of text:
-
Text in a foreign language: Format it in bold letters (negrita)
-
Text in spanish: Format it in italic letter (cursiva)
-
-
Set a justified alignment for all the common text paragraphs (those which are not tittles or section headers) using
-
Look for three more images regarding your assigned language learning and put them in the text. It may be a teacher, a classroom, students, or anything similar. This images must appear mixed with the text, as shown in the image bellow.
-
Select the image properties (using the contextual menu)
-
Select the tab appearance
-
Select the option fluir por la derecha o fluir por la izquierda (wrap right o wrap left).
-
-
Insert more elements in the page.
-
Add a horizontal line at the end of the text. Place the cursor in the next-to-last line, (penultima línea) and select the menu Menú insertar | Línea horizontal. (insert | horizontal line)
-
-
-
Double click on the line to change its properties. Set a width between 60% and 80% of the window, and a height between 2 and 5 points.
-
Add the text shown in the image bellow. Separate them using the character '|' and some tabulations in order to distribute them evenly (uniformemente) along the line.
-
-
Under the horizontal line add this copyright indication: Copyright © 2010 Fluent English Systems. No rights reserved (Obviously you must replace Fluent English by the name of the language school assigned to you). To insert the © character select the menu insert->Characters and symbols->common symbols
-
Let's insert on the top of the page a navigation bar similar to the one we have just inserted on the bottom. Look the image bellow, the links in the navigation bar will be INICIO, PRUEBA NUESTRAS CLASES ON LINE, CONOCE TU NIVEL DE INGLÉS, QUIENES SOMOS,CONTACTA CON NOSOTROS. Don't forget to align the bar to the center
-
Assign the header 5 to the text in the navigation bar.
-
-
-
Depending on the language assigned to you, you have to add one of these banner images shown bellow. Place them whenever you like
ENGLISH
-
GERMAN
-
ITALIAN
FRENCH
Upload the activity now, just in case you are not able to finish the activity 3.3, But take into account that you'll have to make some changes in the activity 3.2 later while carrying out the activity 3.3
To upload this activity Compress the project folder and upload it to moodle Moodle using the link activity 3.2
ACTIVIDAD 3.3
In this activity we are going to add a new page to the language school web site, talking about legal issues.
-
Click in the button nuevo/new page to create a new page
-
Drop down the page properties clicking in formato/Título y propiedades de la página (format | page title and properties)
-
The document title is: CONDICIONES USO
-
Write your name in the author
-
Disable the checkbox this page is a template
-
Select the character set UTF-8
-
-
Save the file in the web_academia folder, with the name condiciones_uso.html
-
Search on internet an image regarding a disclaimer similar to the one shown bellow, and insert it in the top left corner using the option wrap to the left (image properties→tab appearance→align text to image). Change also the spacing as shown in the image.
|
|
-
The text you have to insert in this page is in the bottom of the quizz page ASSIGNACIÓN ALEATORIA DE LA ACTIVIDAD 3 Take into account that each student is receiving a different text. Copy the text provided in the quizz:
-
Copy the text from the Moodle quizz
-
Open a new gedit document (Aplicaciones->Accesorios->gedit) and paste the text there.
-
Copy the text from gedit (Ctrl+c)
- Paste it in Kompozer.
-
-
Apply to the page the same background color you gave to the page in the activity 3.2. The best way to do this is to copy the color Hexadecimal code and then applying it using Formato | Colores y fondo de página (Colors and page background)
-
Make a document header similar to the shown in the image bellow, but use a font and colors of your choice.
Now we are going to give format to the text:
-
Format the content index at the beginning. Select the text and apply to it the style Título 3 (heading 3). Then turn it in a bulleted list clicking in the button
-
Select the article titles and apply them the style Titulo 3 (Heading 3)
-
Every paragraph inside the articles must be formate as a bulleted list. Select the text and click in
-
At the end you must do a glosary. Select the word and click in
,
And now select the definition of the world ans click in 
-
At the end add the same navigation bar you used at the bottom of exercise 3.2
The result must look like the page shown in the image bellow, but remember, the text assigned to you have some differences
Turn the word INICIO into a link to index.html. Select the text and click in 
Open again the file index.html you created in the activity 3.2. At the end you will find the navigation bar shown bellow
Turn the yellow emphasized text into a link to the disclaimer web page
Compres the project folder and upload it to moodle moodle using the link activivity 3.2
Compres the project folder and upload it to moodle moodle using the link activivity 3.3