Thursday, 15 October 2015

Session 8 - Closing out the project

Closing out the project

The main task at this stage is the handover of the deliverable, as scoped, to the client. At this stage you tick off the items and ensure that everything within the project has been finalised. The key areas of this stage are:

  •     Client acceptance
  •     Lessons learned
  •     Celebrating success
  •     Stakeholder debrief and evaluation
  •     Closing out the project
  •     Contract close-out

The ultimate aim of project management is to bring the project to a successful and complete conclusion. Hopefully, if you have done your job properly, this would have been closely monitored and evaluated against the predetermined criteria with little room left for ambiguity or missed expectations.

As well as delivering the project to your client, the project manager and team members should use this time to look back over the project for mistakes made and the lessons learned as a result. The final stage should involve:

  •     Delivering the project’s objective, output or final result
  •     Finalising all the administrative issues
  •     Evaluating the project and the process

Do all project finish successfully? NO!!! Some projects

  •     Fail to finish at all
  •     Drift off in a non-scheduled (and non controlled) direction
  •     Are superseded with newer ideas and supporters.

Class Activity

Can you think of an example of a project that has failed to finish? Which of the above reasons do you think apply to why the project failed to finish?


If a project is not going to be completed successfully, when do you terminate the project or decide that the project should not continue?

You can start by asking the following questions throughout the project:

  •     Is the project still consistent with the organisational goals?
  •     Is management enthusiastic about continuing the project?
  •     Does the project enjoy cross-functional support?
  •     Is there still a return on investment?
  •     Are there better alternatives for the funds, time and personnel devoted to the project?
  •     Is the project team still innovative?
  •     Has the project lost any key personnel?
  •     Can the deliverable be more efficiently purchased or subcontracted rather than being developed in-house?
  •     Have any changes in the marketplace warranted the project’s outcome and/or termination?
  •     Is the client satisfied? (Has client acceptance been obtained?)
  •     Is the current project team properly qualified to complete the project?
  •     Do other projects warrant higher priority?
  •     Is the probability low that the outcome will be realised?
  •     Are all the tasks finished?
  •     Is the testing finished?
  •     Are the training programs prepared and/or finished?
  •     Is the supporting equipment installed and operating?
  •     Are the documentation manuals finished?

Client Acceptance

The only stakeholder who can ultimately know whether the project is finished or not is the client. The process of acceptance should always be completed as formally as possible so that there is a comprehensive sign off on each and every aspect of the deliverable. This should include the following:

  •     A written acceptance procedure;
  •     A completion checklist;
  •     Specification conformance;
  •     Acceptance or performance testing; and
  •     Final payment

Lessons Learned

Every project, whether successful or not, will generate a ‘lessons learned’. A lessons learned is just that – some practical wisdom that has been observed and hopefully acquired while working on the project.

Lessons learned can be both positive and negative from both mistakes and successes during the project.

Lessons learned must be documented and shared with the other stakeholders, perhaps in a project review document or final project report. The information can then be used when planning and managing future projects.


Celebrating Success

Every project has some success and success should be rewarded. Some of the ways that you can reward your project team are:

  •     Introducing the team members to the client
  •     Taking the team members out for a meal or coffee
  •     Printing up some certificates
  •     Formally appraising and recording the team members’ positive performance
  •     Passing positive feedback on the team on to their line and/or functional managers
  •     Getting all team members to give each other positive feedback on the tasks they performed
  •     Giving the team members challenging duties and/or more complex project work
  •     Channelling your personal feedback to the team members up the chain of command so a higher authority can be seem to be recognising their contribution
  •     Recommending the team members for promotion as a result of their project achievement
  •     Holding a PARTY for the team

Stakeholder debrief and evaluation


At the end of a project you need to bring the stakeholders together for a final debrief and evaluation of their contributions, feelings and outcomes.

The Client
You need to get feedback from the client:

  •     Was the project delivered as specified?
  •     Was the reporting documentation accurate?
  •     Was the project delivered on time?
  •     Were the communication channels kept open at all times?
  •     Was the project delivered on budget?
  •     Were all variations and scope changes addressed competently?
  •     Was the project managed professionally?
  •     Were the issues resolved in a win-win solution for all?
  •     What improvements can you suggest with regard to how future projects are set up and managed?

The Stakeholders
Stakeholders are anyone with a vested interest in the project’s outcome. Each stakeholder should be questioned so that you gain an understanding of the project from their perspective:

  •     Were you satisfied with your level of involvement in the project?
  •     Were you always kept informed of the project’s achievements and failures?
  •     What part did you play in the decision making processes
  •     Could the consultation processes be improved?
  •     What improvements can you suggest with regard to how future projects are set up and managed?

The Project Manager
The project manager has had a lot riding on their back throughout the project so you should take the opportunity to review their performance also.

  •     Were you satisfied with you access to, and support from, the relevant stakeholders?
  •     Do you believe you had sufficient time, budget and resources to complete the project?
  •     Did you have the appropriate level of authority, power and responsibility?
  •     Was the project team appropriately skilled?
  •     Do you require any additional training?
  •     How effective were your leadership skills?
  •     How effective were you at motivating and rewarding the team?
  •     What improvements can you suggest with regard to how future projects are set up and managed?

The Project Team
You should meet with the project team one last time and get feedback as they were the ones doing the main work.

  •     Was your workload appropriate?
  •     Were all the disputes resolved amicably?
  •     Were all decisions reached through consensus?
  •     Did your level of skills reflect the nature of the tasks you worked on?
  •     How would you describe the project environment in which you worked?
  •     How would you describe the project manager you worked for?
  •     Did you always have sufficient information, time, resources and money to make the decisions you were required to make?
  •     What improvements can you suggest with regard to how future projects are set up and managed?

The Close-out Report
The close-out report should be a summary of the highs and lows, success and failures, of the project through the concept , outline, progress and outcome stages. It should address the project performance, administrative performance, organisational structure, project teams, and project management techniques.

Contract Close-out
If you have entered into any formal contracts during the project development, such as maintenance contracts, client contracts, warranties etc., you will need to make sure that these are closed off and/or signed off.

Session 8 - Track your Project

Once your project has been set and is underway, the role of the project manager is to keep track of all aspects of the project.


Baselines

To be able to track your project, you need to tell your project management software that the current version of the project file is the one that you want to save and use to compare with. This process is setting a baseline.

So, for our Big Move project, we have added all of the tasks and allocated is as required and we are happy with it. We can now set this as our first Baseline.


Completion

Completion for a task can be entered in the properties box for that task.


You can also add completion percentages by adding the completion column to the View.


If you are keeping track of costs variations, you should also add work amounts in - this indicates the number of actual hours spent on a task.



By viewing the activity with the baseline set, you can compare the actual against the plan.


If the actual time spent is more than the original plan, you will see that the estimated end date will alter.

Thursday, 17 September 2015

Session 7 - Basic CSS (Week 9)

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS defines how HTML elements are to be displayed
  • Styles were added to HTML 4.0 to solve a problem
  • CSS saves a lot of work
  • External Style Sheets are stored in CSS files

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

In HTML 4.0, all formatting could (and should!) be removed from the HTML document, and stored in a separate CSS file.

N.B. The above information is from W3School's website www.w3schools.com

CSS Levels

There are three levels of CSS:
  • An external style sheet is a separate document to your HTML pages. Within this one document, you can create styles for your whole website.
  • An embedded style is where you use the STYLE tag and write the code in the <head> section of each page - this will override the stylesheet for the current page.
  • An inline style is placed within the <body> section, usually with the tag that is being formatted. Inline styles will override embedded and external styles and so it can be used in circumstances where you wish to deviate from the default styling.

Web Colours

To use colours in a web page, you need to refer to the HEX code, the official web colour name or the RGB numbers. It is generally accepted that you use the HEX codes for web colours.

Web Safe Colours

"Web Safe, or Browser Safe palettes as they are also referred to, consist of 216 colors that display solid, non-dithered, and consistent on any computer monitor, or web browser, capable of displaying at least 8-bit color (256 colors)."



You can also access a list of the colours from the w3schools web site:
http://www.w3schools.com/html/html_colornames.asp

Or Use their online colour picker:
http://www.w3schools.com/tags/ref_colorpicker.asp

Or some other colour websites:
http://html-color-codes.info/
http://www.colorpicker.com/

To get a feel for different colour schemes, you can use the adobe Kuler colour website. This is a visual aid that you can use to pick colours and colour schemes.
http://kuler.adobe.com





You can even upload an image and have it choose colours from your image. Web colours are based on RGB (Red, Green, Blue) and so may not look exactly the same as the printed version (CMYK).

Class Activity 1:


Read a couple of the following articles on colour design for web:

http://thenextweb.com/dd/2015/04/07/how-to-create-the-right-emotions-with-color-in-web-design/

http://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers--webdesign-1437

http://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/

http://www.hongkiat.com/blog/basics-behind-color-theory-for-web-designer/


A colour scheme typically has ether 3 or 5 colours. Regardless of how many colours you have in your pallete, one should be your main colour and would have the largest coverage, followed by a secondary colour. Any other colours within your palette are contrasting and would have the least amount of coverage.

Create a 3 colour palette and a 5 colour palette for Mysty River Regional Library Service. Share with the class, your choice of colours and the reason why you selected them.


CSS Box Model

The CSS Box Model describes the boxes that surround any Block level elements within a web page. There are four parts to the CSS box model - margin, border, padding, content.



Each of these can be manipulated with CSS as well as height and width for any block element.

The following tags are considered "block-level" elements. When displayed, they will take up the full width available with new lines before and after.

<div>
<h1>….<h6>
<p>
<ul>; <ol>, <li>
<table>
<form>



"Inline" elements only take up as much room as needed and do not force new lines before and after.


You can override block and inline behaviours with the CSS display property:

display:inline

or

display:block


The Style Attribute can be used to apply inline styles to any HTML element. Inline styles override any global styles that have been made.

<p style="color:green; text-align:center; background-color:lightgrey">

N.B. the above will apply the styling to the current paragraph

The <style> element or tag is used to style the current document. The style tag is usually placed in the <head> section of the document.

<head>
<style type="text/css">
     p {color:green;
     text-align: center;
     background-color: lightgrey}
</style>
</head>

N.B. The above styling will apply to any <p> element within the current page

or as a separate style sheet


Use the link element to link the document to an external style sheet:

<head>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<link href="style1.css" media="screen" rel="stylesheet" type="text/css" />
<title></title>
</head>

To start styling a web page, we need to know what properties we can alter. Properties are categorised into the following:

  •     Background
  •     Border and outline
  •     Dimension
  •     Font
  •     Generated Content
  •     List
  •     Margin
  •     Padding
  •     Positioning
  •     Print
  •     Table
  •     Text


PDF Version
http://coding.smashingmagazine.com/wp-content/uploads/images/css3-cheat-sheet/css3-cheat-sheet.pdf

Styling Text

Fonts


font-family is used to specify a list of font family names and/or generic family names to be used to display text within an element. The browser will go through the list until it finds a valid font that can be used. To make sure that at least one of your choices is used, include a generic family name at the end of your list. Generic Fonts are found on most computers and do not go inside quotes when referring to them.

The Generic family names are:
•    Serif
•    Sans-serif
•    Cursive
•    Fantasy
•    Monospace

<style>
p {font-family: "Algerian", "Helvetica", fantasy}
</style>

Font Size can be specified as an absolute using pixels (px), or a measurement such as centimetres (cm), inches (in), millimetres (mm), points (pt) or picas (pc). You can also refer to a relative size such as xx-small, x-small, small, medium (default), large, x-large or xx-large. You can also use percentage (%) or the multiplier em (em).

p {font-size: 16px}
p {font-size: x-large}

Font color is specified using the color attribute, background-color is used to specify a background colour. If you use more than one attribute for the element, make sure you separate them using a semicolon (;).

p {font-family: "Algerian", "Helvetica", fantasy; font-size: 16px; color: pink; background-color: lightgrey }


Bold and italics can also be created using styles.
p {font-weight: bold}
p {font-style: italic}
p {font-style: normal}

The following are valid styling attributes for the text within the heading element
h1 {color: indigo;}
h2 {color: #4b0082; }
h3 {color:rgb(255,0,0);}

Text


You can also apply other styles using the text-decoration attribute - text can be underline, overline, line-through, blink, none.

Word and letter spacing can be changed by using:
p {word-spacing: 2px; letter-spacing: 1px}

N.B. See CSS Cheat Sheet for more information.

Background

We saw how easy it is to set a background color for any of the HTML elements. As well as color, you can also choose a background image.

Here are the background attributes:
•    background-color
•    background-image
•    background-repeat
•    background-attachment
•    background-position

To set a background image for your page, you could use:

body {background-image:url('filename');}

Background-repeat will specify whether to repeat the background if the image is smaller than the screen viewing area.

N.B. See CSS Cheat Sheet for more information

Styling Hyperlinks

Styling Hyperlinks is a little bit different to other elements.You can apply a style to all hyperlinks by styling the <a> element, but hyperlinks usually display differently when they have been visited - purple instead of the usual default blue.

A Hyperlink has 5 states that can be styled:

    Link - the unvisited link
    Visited - what the link will look like once it has been visited
    Focus - this is used if the link has been selected using a keyboard shortcut
    Hover - this is how the link will display when you move your mouse over it
    Active - This is used for the link when it has been clicked, but prior to it being "visited":


To apply link styles, use the syntax

<style>
a:link {color: black; background-color: white}
a:visited {color: black; background-color: pink}
a:hover {background-color:lightblue}
a:focus {color: red; background-color: white}
a:active {color: lightgreen; background-color:black}
</style>

Applying the Box Model

I mentioned the Box Model when introducing CSS. All Block level elements utilise the Box Model styling features.

N.B. See CSS Cheat Sheet (Box Model section) for more details

and the result:


Linking to an External Style Sheet

Within the head section of your web page, use the <link> element to link the page to the external style sheet.

<link href="mystylesheet.css" media="screen" rel="stylesheet" type="text/css" />

where "mystylesheet.css" is the name of your external style sheet.


More Cheat Sheets



http://websitesetup.org/html5-cheat-sheet/

http://websitesetup.org/css3-cheat-sheet/

http://www.bluehost.com/blog/website-design/html-css-cheat-sheet-infographic-4181/


Class Activity 2


Apply some styling to the sample page we created last week

More Social Media Integration

Facebook

To get embed code for Facebook social plugins, you need to go to the Developers section of Facebook.







Whilst nursing her seriously ill best friend, Diploma of Nursing student Jennifer Purvis recognised nursing was her calling and is on her way to complete a nursing degree through pathway options at Chisholm. Hear her story here www.chisholm.edu.au/jennifer
Posted by Chisholm Institute on Wednesday, 9 September 2015
Embedded Video Post from Facebook

Instagram

You can embed Instagram posts just as easily







https://instagram.com/developer/embedding/

For Instagram Badges
https://instagram.com/accounts/badges/



Instagram


Class Activity 3


Can you embed Pinterest?

Class Activity 4

Add a post to your Blog and include:
  • Like me on Facebook for Chisholm Institute
  • An embedded Facebook post from Chisholm Institute (or another appropriate one of your choice)
  • An Instagram Badge
  • Embedded Instagram post
  • Twitter Feed for ALIA

Thursday, 10 September 2015

Session 6 - Basic HTML (Week 8)

This week we will go through some of the basics of HTML. You are not expected to create a website using HTML, but it can be often used to value add onto a website and as this is about integrating Social Media, HTML can be used to achieve this.

What is HTML


HTML stands for HyperText Markup Language and it is the main language used to create web pages. The "tags" are typed into a text editor, which are then interpreted by your web browser and your web page will be displayed accordingly.

The current version of HTML is HTML5 with CSS3. If you would like to find out more about the various versions of HTML and the history of the language, here is a good source http://www.yourhtmlsource.com/starthere/historyofhtml.html

What do you need?

Actually, you need very little to create web pages with HTML. A little bit of know how (or a good tutorial), a text editor and a browser.

Text Editor

There are plenty of text editors around. If you have a Windows computer, you will have Notepad for example. You can use any text editor, but generally when coding, it is best to use a text editor that is friendly for coders. Again lots to choose from - just Google free HTML editors and you will get a list. The main difference between a text editor and a HTML editor is that the latter understands about coding and the language and will colour code your document and give you line numbers, which makes it easier to pick up any errors.

I am a person of habit and so my standby HTML editor is Notepad++, which you can find here:
https://notepad-plus-plus.org

There are a number of different versions that can be downloaded, but the safest is to stick to the big buttons and you will get the installer for the latest stable version - currently 6.8.3.




Once downloaded, you can click on the file and install Notepad++ on your computer.

Browser

Any browser is fine - most people will have a preference, but with what we will be doing, any browser will do the job. You don't even need Internet access when displaying simple pages you have just created, but of course you need it if you want to publish your document on the WWW or if you are linking to other websites.

Basic HTML Elements

As a bare minimum, a web page MUST have the following basic Tags or elements:

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

The <html> element, will always be at the very start and end of your page.

<head> </head> defines the header area of the page. The <title> tag will always be inside the <head> tag.

<body></body> is used to start and end the content that will be displayed on your page.

You will notice that the elements are contained within angle brackets "< >". The ending tag is preceded by a forward slash "/".

The above code will produce an HTML page with no content. All you will have is a title up the top in the document tab.

Heading


The Heading Element can be used to increase the size of text on your page. Heading sizes will vary from 24 points for a heading 1 to 8 points for a heading 6. (24, 18, 14, 12, 10, 8)

To use the Heading Element use <h1> through to <h6>.

Paragraph Element

The <p> is the paragraph element. Paragraphs are automatically spaced with a blank line in between.

HTML does not recognise new lines within your text editor as new lines on the web page, and will only recognise one space when interpreting the tag and content. You can only start text on a new line with a <p> tag or a <br> tag.

You will also notice, when viewing some code, the <p> tag is almost optional. Blogger, for example, does not use them in its HTML code. Good coding practice is to use them and to always have an opening and closing tag.

Break

A line break tag can be used to start a new line of text without starting a new paragraph. This is one of the exceptions to the rule that elements have a starting and ending tag. As this is not a paired tag, the forward slash is placed at the end of the tag after a space, so the syntax is <br />.

Lists


There are two types of lists that you can be used in HTML. They are the Ordered List and the Unordered List.

Ordered Lists

An ordered list is a numbered list.

  1.  First Item
  2.  Second Item
  3.  Third Item etc.


To create an Ordered List use the <ol> element

Unordered Lists

An unordered list is created using the <ul> element

The <ul> element will create a bulleted list

  • Item 1
  • item 2
  • item 3

With both of these list types, use the <li>  </li> for each line item

Horizontal Rule

The Horizontal Rule element is used to place a line in your HTML document. It is a great way to separate different sections of a page.

The syntax is <hr> (or <hr /> for compatibility)

The default horizontal rule is 100% wide and 2 pixels high.

Hyperlinks

There are three types of hyperlinks that are used on a web page.

The most common hyperlink is used to open up another web page, either within this website such as for navigation, or a totally different website.

You can also use hyperlinks and anchors to move to different sections of the same document.

The last type of hyperlink is to link to an email address.

Webpage Hyperlink


The <a> element is used for Hyperlinks, The basic syntax for the webpage hyperlink is:

<a href="http://thisisthelink.com">

<a href="webpage.html"> for linking to a page within the same domain.

If you do not want to open the hyperlink in the same browser window, you can use the target="_blank"  attribute to specify a new tab

To use text as the link, such as click here for the Chisholm website, you would type:

<a href="http://www.chisholm.edu.au">Click here for Chisholm website</a>

<a href="http://www.chisholm.edu.au" target="_blank">Click here for Chisholm website in a new tab</a>

Images


The <img> tag is used to place an image on your page.

<img src="filename.png"> or if the images are stored in a different folder to the document then the src would include the folder <img src="images/filename.jpg">. If the file is located somewhere else, then you will need to include the full url name for the image.

<img src="logo.jpg" height="200"> with the number referring to the pixels

<img src="logo,jpg height="200" width="150">

Images can be tricky to manipulate on a webpage. You can use the style="float: left" or style="float: right" or even easier, place it within a <p> tag, so that it is on a line on its own.

The alt attribute is used to have text as an alternative to the image. It should be included for accessibility reasons.

Tables


The last elements that we will cover today are those that relate to tables.

A Table is made up of Rows and Columns. Each block within a table is called a CELL. In HTML, we need to define what is going to be placed in each CELL. Any HTML element can be placed within a table CELL.

The HTML code to create a table is:

<table> </table> Use to define the table

<tr> </tr> used for each row in the table

<th> </th> Table Header

<td> </td> used for each cell within each row of the table.

Putting it all together

I think this is enough to get the hang of what HTML is all about. If you want more information, here are a few links to get you going:

http://www.goodellgroup.com/tutorial/index.html
https://www.codecademy.com/
and my personal favourite http://www.w3schools.com/

Also heaps available from Linda.com, which you access for free from the Chisholm Library website.

To get started, I have downloaded and Installed Notepad++

I closed the documents that are opened the first time you use Notepad++

I typed in my code. Note: The image file was downloaded and saved in the same folder as the HTML.




Start by creating the simple page below. I could give you the code to cut and paste, but I think the best way to get the hang of this is to type in the code, and see what happens with errors etc.

Depending on time, we may expand on this and include code for tables and links.


Once you have your page coded and saved, you can view it in your browser. Notepad++, being the cool application it is, allows you launch your webpage from within the application.

Choose Run, and then Launch in Firefox (or whatever your preferred browser is)

This is what mine looks like. This is just a basic page - no formatting or styles have been applied to the code.

Exercise 1

Try adding some more items to your page underneath the image.

Add an unordered list with some of your favourite social media tools.
Add a relevant heading  followed by a paragraph outlining your favourite social media tool

Advanced option:
See if you can add a table - try W3Schools.com for more information.
Add a link to the Chisholm home page

HTML and Blogger

I know we looked at heaps of different way to create websites, but for this first example, I will use Blogger. In Blogger, you can create or edit posts and pages using Compose, where you get the menu to add elements, or HTML, where you can type in code.

It doesn't really matter which tool we use, most will allow you to modify the HTML or add an HTML widget.



HTML view


Looking at the image, you can see the tags and the page contents.

Adding Social Media

Most of  the Social Media applications will create the embedding code for you, so you can easily cut and paste it onto a web page. For this exercise, lets take some of the things we can do with Twitter.

Twitter - Embedding a Post

to Embed a post, select your Post, use the ,,, to copy the code.




Once you select Embed Tweet, Twitter will allow it to be copied to the Windows Clipboard.

You can then paste the code where you want it to be.


And the page with the embedded post:



Twitter - Embed Search

This is also extremely easy to do. Go to the search screen in Twitter and put on your search Criteria. I put in #Melbourne - this will display any Tweets that have a hashtag of Melbourne.


Change any Settings


Copy the code to the Clipboard


And paste into your HTML document.







Twitter Buttons

https://about.twitter.com/resources/buttons

Go to the above link to get to the Twitter Buttons

Change any settings and copy and paste the code




Save the code and display/launch the page. If the page is already open in your browser, you can just refresh the screen.

It doesn't matter whether you understand the code or not - you just need to put the setting details in and then copy/paste the created code. The idea of having a basic knowledge of HTML is so that you can see where you should paste the code, not to create the code yourself from scratch.


Exercise 2

Find a video in YouTube that you like. Go to the sharing area and Embed the video on to your page.

How To - if you need it!!



Next session we will look at tracking our project, CSS, and some more social media code.

If you would like to do something during the holidays - do one of the Linda.com basic HTML tutorials or look at some lessons online.


askjdaskdjaSKJD

Thursday, 20 August 2015

Session 5 - Other Blogging and Website Builders


Google Sites

https://sites.google.com/

Very simple to use and lots of templates. Using a similar theme to previous web sites I created using free templates, I proceeded to create a website for "Manor House Eggs".

Start by Clicking on the Create button.


Start by choosing a template. There are heaps to choose from and once you select one you can easily customise it.



This is what it looks like with the basic information



To edit the current page or add a page to your site, use the buttons top right.



You can change the site layout or other site settings using the drop down settings menu.



After adding an image to my header, some text and image to the home page, this is what my website looks like.



Just another option for creating your websites. As mentioned before, all of these tools are so easy to use that you could end up creating a couple of sites and deciding which one to submit!!

I suggest that you write up your content and save it in a text editor. You could use Word, but you do need to be careful if you cut and paste and with some tools it will include the formatting, which will not look as good on the web as it does in Word.


Wordpress

The process to create a website with Wordpress is very similar to Blogger. You can create a simple website by using and modifying one of the free themes. Try and choose a theme that can be customised to look like a website easily. If you want to include any e-commerce on your page, you will have to pay and upgrade to a business account.



Once you have chosen a theme, you can add a header image and change the background colours.



Go into the settings and make sure that you change your front page to be the sample static page that comes with your theme. In my theme it is called About.

You can add pages using the option on the site Dashboard.



If you are after more information, there are heaps of YouTube videos as well as Blogs and tutorials on Wordpress itself.

https://www.youtube.com/watch?v=P4ACxJS8_-E

http://en.support.wordpress.com/using-wordpress-to-create-a-website/

Tumblr

Tumblr is another blogging site that can be used to create a website rather than a Blog.

Create a new Blog. Give it a title and a name.



Customise the Blog.

Choose an appropriate theme if you have not already done so. Depending on your theme, you can add pages as well as social media. Create a page and see that with the right template, your page will be added to the menu.



Here is what mine looks like when loaded.





https://www.youtube.com/watch?v=DhlW5M8aDu8