Making a Start With Web Design and Development

Over the course of the year, many of the students in upper Key Stage 2 have been working with a host of web based, enabled or modelling resources and tools. Think.com has been used as a learning community tool, PowerPoint has been used to model the principles of hyperlinking and how web like resources work and can be developed offline. They have begun to develop blogs as a class, and engaged with online resources and with think to lay the foundations for understanding what it means to be safe online. This term and last we began working with year 5 on a pilot project with Fronter, the LAs proposed learning platform, and decided that this should be framed by a unit of work I wrote a number of years ago that was adopted and adapted to become part of the LAs scheme of work for ICT.

The unit was originally developed with a year 4 class, as a challenge to help me redesign the school's website. It began as all design and technology units do with evaluation and disassembly activities. We visited a range of websites already available on the web, and created by or for schools. We explored the websites identifying features we liked or disliked, narrowing down gradually those that we might like our website to include. From here on paper we designed a navigation bar, including genreal areas we would like to appear on our site. Having established our website zones, the children worked in small groups on particular aspects of the site, collecting photographs, interviewing people, and using MS Word and MS Publisher to create pages, which were eventually saved as html, and linked into a frame set I had developed from their ideas in FrontPage. The project was so successful that I and Keith Ansell our ICT curriculum Support Teacher extended the project with other local primary schools, as part of an ICT project for the Success@ action zone.

This term however I have begun using 2 Create,(2 create a story's sibling) as a framing tool to engage year 5 students with the process. We began as above, by visiting other school sites, and then returning to our own existing structure. Using their community pages as a starting point I introduced the idea of how some aspects of the site were becoming reduntant, or were perhaps repeating other tools we were using. I asked them in their navigation bar design process to consider how we might change or reorganise the community pages, removing links we were not using, or perhaps adding new sections that were not there in their place. What would they like to have on their website. Instead of using a paper based tool, I opted to use 2 create to enable them to visually develop, hands on, their own version of the site.

They began by starting a new project and inserting the first page, using this to install their navigation structure to. They used clipart as icons and buttons as well as text to do this. They had noticed how the navigation bar and banner section on the opening page of their community pages always remained the same, and in subsequent sessions I have been able to introduce how this is made possible. Our community pages are developed within frame sets. Although seeming to be one page, it is actually made up of three, when a hyperlink is clicked, only the page to the lower right is loaded the others remain in place. To enable this to happen on a single page layout like the one they are using in 2 create, the key is for the visual appearence of the page to remain the same, while only the content changes. Sometimes it is great being an old dog who can teach the newbies some tricks. How to make a 2 create page appear that it is a frame set. With the navigation icons and text in place, we have added coloured boxes to the left hand side of the page, and another along the top to look like the banner. We selected both of these rectangles and used the order tool to send them to the back. At this stage we still only had one page in our site, so looking at the number of icons we had in our navigation bar, which in most cases was 5, we inserted new pages. opening our first page in the viewer, we selected all objects by dragging around the slide, copied them to the clipboard, and then opened each of the remaining pages individually, and pasted these in place, so we had 5 identical slides, on which to present the content identified in our navigation bar. I know I could have skipped the copy and paste process by simply asking the software to insert duplicates, but I wanted the students to develop the select all and copy skill. I tools such as frontpage this would not be achieved efficiently by copy and paste either, but by saving each file as and renaming them.

The students then began linking the pages to each other, and inserting back links. To the lower right of each page, they now have a large clear space, and it is here they will place their page content, and when the link buttons are pressed, and a page arrives what they see appears to be like the frame set in the real school community pages, the buttons will appear in exactly the same place, as will the banner. The students are really enjoying this task, it builds nicely on their prior experiences with PowerPoint and Think, but here they have complete control over the objects and pages they are creating.

In addition what has been said above, what I think is really powerful about 2 create and the students will probably not fully appreciate this until the project is complete, is a built in tool it shares with 2 create a story and how the final project outcomes can be saved as Flash Files. Flash an industry and web standard tool, generates special movie files from projects developed, that can be embedded in to html or web pages enabling them to run as navigable files. These 2 create projects when saved as Flash Files will function in a similar way, with every small web project file the students have created running as if standalone websites within a single page on the school website. The children will be able to see and share their website projects live with each other, their teachers and their parents.

The structures they have identified will be used to develop the navigation and page structure for their VLE Space, somewhere we would like them to work next year. I will also be drawing on their ideas to refine the student community sections of the school website. By working on this project the outcomes they develop will influence a real web project.