WEB
DEVELOPME
NT
Grade 10 – ICT C3
Creating a new project
■ Click on the button – NEW PROJECT
■ The following window will come up:
File Name
Location where to save it
Make sure you do not use pre-set templates
Finally, press Create the project
The OpenElement Interface
Site Explorer:
This contains all the files & folders that compose the website
Element Explorer:
The different elements found in each page section can be seen,
renamed or deleted.
The OpenElement Interface
Editing Pane:
This is the main drawing board where page
content is modified.
Elements and Styles Menu:
Elements in this menu can be dragged to the editing pane.
Their properties can also be changed while different styles can
be applied as desired.
The OpenElement Interface
Quick Access Toolbar:
This contains shortcut to common action buttons.
Main Menu:
This displays a set of tabs, each containing different tools that can be
used depending on what the web designer is planning to create.
Creating Pages
■ Click on the button - New
File Name: It’s the name that will be displayed in the browser’s address bar.
Page Title: It’s the name that will be displayed in the browser’s tab.
You can choose to select the page as a base layer.
Finally, Press the Create button.
Changing the Webpage Background
■ Click on the Element Style Zone Tab.
■ Select Background Image button – to change the background to an image.
■ Select Color button – to change the background to a particular colour.
Adding Images
■ Drag the Image button to the Editing Pane.
■ The following window will come up and press the Add Files button.
■ Once the image is uploaded, Press the Select button to insert it.
Adding Text
■ Drag the Single-Line Text button to the Editing Panel, if you want to add a title.
■ Drag the Multi-Line Text button to the Editing Pane, if you want to add a paragraph.
Grouping Elements
■ Every element that is added to a website is treated as a separate element.
■ While this is essential when setting properties and styles, it is also somewhat
complicated when moving things that are related together.
■ In order to simplify this, we group the elements together.
■ How to group elements together:
– Drag the Group of Elements button to the Editing Pane.
– Enlarge the frame element as required and drag the separate elements by one one
inside.
Adding Videos
■ Videos animate a website and make it dynamic and interesting.
■ Adding videos in openElement can be made by using one of the three element options:
■ HTML5 video can be used if the video has been created personally or downloaded
from a website which is not Youtube or Dailymotion.
■ openElement accepts the following video formats: MP4, OGbG and WebM.
Adding Videos
■ Adding a link from a video library is much easier. You only need to paste the link in the
URL box.
Adding a videos
■ When adding a personal video, you need to select which video format it is and then
press the Browse button next to it to find where it is saved on your computer.
Adding Videos
■ The video frame’s properties can be modified from the Properties panel. This
includes the size of the frame and any border that one wishes to add.
Adding Links
■ Links allow web designers to include content from other sites without encumbering
their website.
■ There are different types of links that can be applied to a website:
■ There is also the customize feature that allows you to modify a design
according to your liking.
■ To edit the text of the Link, just double click on the words ’New Link’.
Inserting an Email address
■ To insert an email address:
– Drag the Text Link to the Editing Pane.
– Change the HTTP to MAILTO and enter the email address
– Press ok
– To edit the text of the Link, just double click on the words ’New Link’.
Inserting a map
■ To insert a map:
– Drag the Google Maps button to the Editing Pane.
– Access Google maps and copy the embedded code of your map.
– Paste it in the Google Maps Script.
Creating a Gallery
■ The Image Carousel buttons allows you to include a number of images into a web
page without necessarily taking more space than required.
■ Images can be given a title and a description, which makes is more accessible to people
with visual impairment who use a screen reader.
■ Drag the buttons to the Editing Pane and press the Add Images button to insert the
images from your computer.
Base Layer
■ The base layer is used so that the elements placed on it will be available on all web
pages.
■ The base layer is accessed on the Site explorer panel.
■ The base layer is automatically divided into content area and footer.
footer
Linking the pages together
■ To link the pages together:
– Drag the button link to the Editing Pane.
– Select which page you want to link it to under the Website name
– Press ok.
– Rename the button by double clicking on it.
