Creating Integrated Web-based Projects using Microsoft Word

1. Creating Integrated Web-based Projects using Microsoft Word

2. Doing things in the right order • First create a folder and name it eg Project Webs • Load Word and from File, New, WebPages select the Web Page Wizard Give your website a name here. Browse for the folder you made in 1 here then click Next. Word will automatically create a folder with your website name inside of it the Project Webs folder.

3. Frames … • Frames provide easy navigation and a common layout to all pages. • Hyperlinks will be automatically created in the navigation pane. Choose where you would like your navigation bar to appear and click on Next

4. Add pages … • You can add blank pages, web page templates from Microsoft, or add web pages you have previously downloaded or created in Word – how many do you need? The example uses seven. Blank pages for you to decide layout Pre-prepared web page templates from Microsoft Existing web pages from Word or downloaded from the Internet

5. Get organised here and save problems later … • Rename each page to something meaningful – this is what will appear in your navigation pane. • Rearrange them into the order you want them to appear in the navigation pane Re-arrange pages by moving up and down Rename your pages – these will be your hyperlinks

6. Add a theme (or colour scheme) …. • You can choose to have a completely white website so that you can select the colours and backgrounds of the panes. • You can choose a pre-prepared theme, which you can ‘tweak’ later. Choose a pre-pared theme as the basis for your website Leave your pages white and tailor them later

7. Adding a theme (or colour scheme) …. • You can change your mind later by going to Format, Themes Choose a theme – some of them will need installing from the Office Installation disk Vivid colours gives a coloured background Active graphics gives some animated effects Background image gives a patterned background

8. Nearly finished … • If you are happy with your choices so far, just click on Finish – or you can go back through and check your choices and adjust them if you wish. Go back and check or make changes Finish if you are happy

9. Adding top frame … • Using the Frames toolbar you can add another frame at the top and moved the website title from the navigation frame into it. • Frames can be re-sized by dragging their edges • This will be applied to all pages automatically.

10. Changing a frame background colour … You may wish to change the navigation pane background – here cream matches the top pane I have created. • Click in the frame you want to change • From Format choose Background • Choose your colour • Use More Colours if necessary

11. Adding frame borders … From Format choose Frames, Frame Properties, or choose Frame Properties from the Frames toolbar Show all frame borders Choose a line thickness Choose a colour Decide when scrollbars are shown

12. Adding Content … • You add content to your web pages in exactly the same way that you would normally in Word. • You can add animations from ClipArt or Clips on line - search for animations for ‘dog’ and ‘cat’. • Active graphics and animations only ‘work’ when you use Web Page Preview from the File menu. • Tables are a very useful layout tool – give the table no borders and it will not show on your webpage.

13. Hyperlinks, hotspots and bookmarks • A hyperlink is a piece of text, a graphic shape, or an image that takes you to another page either within your site, or to an external link. • A hotspot is a transparent box covering an area of the page. Hotspots do the same as a hyperlinks but are used to cover an area rather than an object. They are often used on maps, so that one map can link to several areas. • A bookmark is a link that takes you to another place on the same page.

14. Adding Hyperlinks and Hotspots … • Select the text, graphic shape or image that will become the hyperlink. • Click on Insert Hyperlink on the Standard toolbar, or choose Hyperlink from the Insert menu. You can then either: • Browse for the webpage within your site you wish to link to. • Enter the name of a website you wish to link to (you can copy and paste this from the address bar in your web browser or type it in). • Browse for the document you want to load when the link is clicked.

15. Adding Hyperlinks and Hotspots … • Select the text to become the hyperlink. • Choose Insert Hyperlink from the toolbar or Insert menu. • Choose Existing File or Web Page • Copy and paste or type in a web address for an external link. • Or browse for an existing file or webpage in your website folder. • Click on OK

16. Adding documents for downloading … • When you add a hyperlink to an ‘ordinary’ document such as a Word or Excel file, clicking on that link will open the document in the main frame of the page. The document can be viewed but not edited. • If the document is to be downloaded so that pupils can work on it, they should RIGHT click on the hyperlink and choose Save Target As, they can then save it to their network area and edit it. • ALWAYS put the ‘ordinary’ documents you are going to want to hyperlink to into the same folder as the web pages you have made. This makes the website ‘portable’, as the system can retrieve the location of the files when you copy it to a disk or server. • If the documents to which you are hyperlinking are not in the same folder as the website, the links to them can be lost when you copy the website to a new location (and you could end up feeling silly!).

17. Adding bookmarks … • The three lines at the top of the page will become hyperlinks to ‘bookmarks’ further down the page (the orange titles). • Select the text to become the bookmark (in this case ‘How can you help’) • From the Insert menu choose Bookmark • Type a name for your bookmark (no spaces!) • Click Add

18. Hyperlink to a bookmark … • Select the text to become the hyperlink • Choose InsertHyperlink from the toolbar or Insert menu. • Choose Place in this Document • Select the bookmark you want to link to. • Click on OK

19. Tips … • Save regularly, it can be heartbreaking when you have worked your socks off and something goes wrong. • To edit the website in the future, load Microsoft Word and choose Open then browse for the file called ‘default’ with the web symbol on it. When you load this the rest will follow and the frames page will be available.

20. More tips … • If you do not open ‘default’ but simply open the page you want to edit it will not appear in the frames page so you are not sure how it will look. • Check it often: from the File menu choose Web Page Preview to make sure it is looking as you wish – sometimes it is not quite WYSIWYG This looked fine in Word, but when it is in the web browser ‘Spreadsheet Modelling’ appears on two lines. I had to widen the navigation pane by dragging its border.

21. Last tips! …. • The ‘default’ webpage is inside the folder you created when you created the web (Kennelby Pet Rescue), and that is inside of the folder you originally set up to hold your projects (Project Webs). • You can create a shortcut to the ‘default’ page in a more sensible place. • You can re-name the shortcut ‘Kennelby Pet Rescue Website’ • Put the URL in the Internet Explorer’s ‘Favourites’ folder of all your pupils so that they can locate it easily.