Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Creating a Web Site within BlackCat Spider
Transcript
D:\841016430.doc Creating a Web Site within BlackCat Spider You will create a web site about the Black Death. Before starting you need to create a folder to save your website Open My Documents folder on Folder called ‘My Website’. your desktop and create a new The My Website folder will store your new website and also sub-folders to store additional files (images, graphics) associated with the site. Create a sub folder called images If you decide to download and save any Animations or Clipart from the Internet or some other source, make sure you save them to the Images folders inside you’re My Website folder. To Create a Web Site Load BlackCat Spider from Start – Programs – Black Cat – Spider. Click on New Homepage. The New Homepage dialogue box opens. Change Name to – Welcome to my Website This is the text that will appear on the title bar of your browser when the page is opened. Change the Homepage size Width Height 740 600 Click OK. Page 1 of 22 14/05/2017 SC D:\841016430.doc To Save the web site for the first time click on File - Save locate the My Website folder beside File Name type in: Black Death (this is the name of the website. Extra pages will be added later) click Save. You should always save your website at the beginning If you need to make adjustments to the page size at a later date, use the Page Button on the top toolbar. When the page opens on the screen, click on the Maximise icon to the top right of your page to view in full. At this stage you need to give our first web page a Page Identification. Click on the Page Button at the - top of your screen. change the Page Id to Home Page The Page Title will read - Welcome to my Website This was the name given when the new document was first loaded To make changes on your page, you need the Page Inspector Window which you find by clicking on the page icon at top of screen Alternatively if the Page Inspector is not showing on your screen: - right-click with your mouse anywhere on the white page - go down to Show Inspector - select Show Page Inspector. Page 2 of 22 14/05/2017 SC D:\841016430.doc Changing Background Click on the Background tab You can choose a coloured background by clicking on single colour and a choice of colours will be displayed. Select a colour and click OK OR Click on the Background tab - select the Picture option. The program will take you to the ‘Backgrounds’ folder within the program which contains appropriate layouts. Select the CurvedTopBlue file for your background - click Open Page 3 of 22 14/05/2017 SC D:\841016430.doc ToolBox The toolbox is placed down the left hand side of the page. When you use a tool for the first time you will be presented with a dialogue box. Click in the check box so that this box will not be displayed again Entering Text Click on the Text Tool on your toolbar. Hold down your left-hand mouse button - drag a small text box across the page. The Object Window appears on the screen. The window can be moved by placing the pointer on its (blue) title bar, holding down the left mouse button and dragging the window to another position on the page. Note: a RED box should be visible around the text. Text can only be edited when shown displayed within a red box. - click the Information tab - select Arial size 7 and centre - type in Black Death Note: if any time the box turns from red to blue, place the pointer directly over one of the letters and double-click. You can then highlight the text to be edited using the Object Window Inspector. To Re-size the Text Object - place the pointer on a red ‘handle on the right or left of the box - the pointer changes to a double arrowhead - hold down the left button on the mouse and drag out the box Page 4 of 22 14/05/2017 SC D:\841016430.doc To Position your Text on the Page: - click the Select Arrow Tool - place the pointer over any one of the letters - the pointer changes to a ‘compass’ showing four points - hold down the left button and move the text box to a central location on the page Click on the X (Exit/Quit) button on the top right of the Object Window. You must select(highlight) the text in order to change the size at a later stage To Insert a Picture - click on the Picture Tool - hold down your left-hand mouse button and drag out a box on the white page. The Open dialogue box will appear: - locate the sub-folder images - select an image. - click Open to import the image onto your web page. To Adjust the Size of your Picture - click on the picture – a blue box shows that the object has been selected - - click - click on the Information tab in the Object Window box. on the Object Button Make width 300 and height 150 - notice how you picture has changed size. Page 5 of 22 14/05/2017 SC at the top of the page D:\841016430.doc Note: use this method to create an object to an exact size. Otherwise simply click on the picture object and use the ‘handles’ to re-size. You can type a value e.g 10.0 into this box to rotate the picture or you can rotate by selecting the corner handle of the picture Alternative Text This feature is useful if you wish to give extra information about a picture. Click on Map click on the Object Button at the top of the page to show the object window if it is not already displayed Click on Alternative Text and type a message You will see the alternative text when you point to the map To Preview Your Page Click on View on the top Menu bar – click on Choose Browser type. Click on Use standard Browser. This option will allow you to view your page in the web browser you would normally use to view web pages on the Internet. Click the Preview Button web browser. on top menu to view the page as it would look on a Be sure to click on the Maximize button on the top right of the window to get the page in full view. Click on the X (Exit/Quit) button on top right of the window to return to your work area. Make appropriate changes, if necessary, and save. Page 6 of 22 14/05/2017 SC D:\841016430.doc Add New Pages Click the Add Page Button to insert a new page The Settings for page dialog box appears: - change the Web Name to Causes of Black Death - change the Page Id to Causes Click the Page Button You can change the background colour as before Or You may wish to add a picture background Click on Background, Click on Picture Page 7 of 22 14/05/2017 SC D:\841016430.doc Drawing shapes We will draw a rectangle for the title so that we can have a coloured background to the text Select the rectangle tool Click and drag out a rectangle shape on your page, where you will add the title Adding Text to an Object click on the shape – a blue box shows that the object has been selected click on the Object Button window if it is not already click on the Button Text tab click the Colour box – select a colour at the top of the page to show the object displayed from the palette choose Arial size 48, Bold, Centre tick on Shadow Settings - Use box. type Causes of Black Death into the Button text box. Use the Select Tool to resize and move the title box to an appropriate place Adding a Style to an Object select the title text box Click on the Styles Button Choose whichever style you wish Page 8 of 22 14/05/2017 SC D:\841016430.doc To make sure everything is working correctly, click on the Preview Button to go onto the web browser. When you are in the browser: - place your mouse over the Map. The alternative text should be displayed Return to page 1 by clicking on X in top right corner Add Three New Pages Click the Add Page Button to insert a new page The Settings for page dialog box appears: - change the Web Name to Cures for Black Death Click the Page Button if necessary - change the Page Id to Cures Insert two further pages Web Name Effects of Black Death My Evaluation Page ID Effects Evaluation To Copy the Background from Page to Page You will now copy the background from the Causes page over to next pages. Click on the Show Page Button select causes page from the drop-down menu. click on Edit on the top Menu Bar select Copy Background. click on the Show Page Button select cures page Page 9 of 22 14/05/2017 SC D:\841016430.doc On Cures Page: click on Edit on the top Menu Bar click on Paste Background. Do the same for the other pages Copy the title Click on title rectangle-blue handles around it Edit, Copy Show the Cures Page Edit, Paste click on the Object Button at the top of the page to show the object window if it is not already displayed Click on Button text to change the text written in the title box Click on the styles palette to change the background of the button Continue to create Effects and Evaluation Pages Using Shapes Use the ellipse tool and draw out an ellipse Set size of each ellipse to 182 and 56 Click on Button Text to add text. Change colour/size of font Click on Fill icon to colour the shape On the Cures Page I wanted the title to be displayed down the left hand side of page Here I used a rectangle rotated through 270, since I copied from previous page. You could also draw a rectangle vertical on page I filled using styles palette and added special effects using effects tool Page 10 of 22 14/05/2017 SC D:\841016430.doc With the rectangle object selected, click on the Effects Button. click the Glow tab. To see the menu click on the down arrowhead. click on the Colour box - choose an appropriate, contrasting colour. set the slide bar markers for softness and transparency to the same % shown here. make sure to tick the On box. Experiment with Shadow and Bevel Creating Hyperlinks We wish to include useful websites and place a hyperlink from Effects page to the BBC website Click on the Show Page Button – select Effects Page Use the text tool to type BBC Website Double click on text if the red handles are not showing Select the text BBC Website Click on hyperlink tool - tick the Use Link box - tick the WWW box - type the address www.bbc.co.uk/history Page 11 of 22 14/05/2017 SC D:\841016430.doc Creating Hyperlinks using buttons We wish to hyperlink all the pages using buttons. We will place the buttons across the bottom of the page Draw an ellipse at the bottom of the first page( Home Page) Keep the ellipse selected. Click on the button tab Type in Causes in button text You can use styles to create a different coloured button We wish to hyperlink from Causes button to Causes page Click on hyperlink tool - tick the Use Link box - tick the Page box - click on the down arrowhead - choose Causes from the list Adding a MouseOver Effect to an Object Click on the MouseOver Button – click on Create. The MouseOver object option will be ticked. Page 12 of 22 14/05/2017 SC D:\841016430.doc In simple terms two objects have been created: the Original object the MouseOver object With the MouseOver option ticked: - click on the Fill Button - the Fill Window appears - click the Colour box to the right of Single Colour - click a dark blue colour on the palette - click OK If you wish you can use a style by selecting the style palette Click on the MouseOver Button again. - click on Original Object to see the button as it will appear on the page (in yellow) - click on MouseOver Object as it will appear when the ‘pointer’ moves over it( Rainbow) Click on the Preview Button to see the MouseOver effect. Page 13 of 22 14/05/2017 SC D:\841016430.doc Note: 1. different Style can be used on the MouseOver Button to that on the Original Button 2. different Text can be used on the MouseOver Button to that on the Original Button If using different text on the MouseOver page button, you must remember to remove the tick from the Use same text for MouseOver and original box. Keep the ellipse object selected. Adding different Text to the Mouseover Object Click on the Object Button - click on the Button Text tab - click the Colour box – select a colour from the palette type Causes visited into the Button text box To Copy and Paste Objects You now need to create THREE more MouseOver buttons on the ‘Home page’. Cures - to link to Cures Effects- to link to Effects Evaluation - to link to Evaluation The quickest way to do this is to copy and paste the ‘Causes’ button and then make a few changes using the appropriate Inspector Boxes. Click on the ‘Causes’ button - blue box should appear around the button. Page 14 of 22 14/05/2017 SC D:\841016430.doc click on Edit on the Menu bar – click on Copy click on Edit on the Menu bar – click on Paste Note: the copied button will be sitting on top of the original button. Drag the button to its new position. Repeat to copy and paste three more buttons. Use the Object Window - Button Text to change the text on the three buttons to Cures, Effects and Evaluation Use the Link Window to change the links associated with the buttons. This link will only take effect when the site is loaded onto a working browser. When you have set up these buttons with links and MouseOver effects on the first page (Home Page) of your web site, you can copy them to other pages. To Copy and Paste All the Buttons from one Page to Another at the Same Time Make sure that all the buttons on your welcome page are working as they should. click on one of the buttons hold down the Shift key on the keyboard at the same time click with the left mouse button on each of the other buttons All buttons should now display a blue box around them. click on Edit - click on Copy Page 15 of 22 14/05/2017 SC D:\841016430.doc click on the Show Page button and on the downward arrow select Causes Page click on Edit -click on Paste drag the buttons to the position you wish on the page – you can do this with all the buttons selected or with one button at a time click anywhere on the page away from the objects to de-select Repeat the steps described above for the remaining pages. Note: both the text as well as the link on one of the buttons need to be changed on each page. Make sure that buttons are not placed too close to each other as the hyperlinks will not work Once again make the appropriate changes to Text and Links using the Inspector Windows – Object and Link. Page 16 of 22 14/05/2017 SC D:\841016430.doc Using HTML The HTML tool allows you to insert HTML objects into your Homepage. To insert an HTML object, click on the HTML tool, then click and drag on your Homepage to select the area you wish. How an inserted HTML object is represented Once you have selected the area, you will be able to enter your HTML code. E.g <marquee> welcome to our website <marquee> Click OK when you are satisfied with your code. To edit your HTML code, select the HTML object using the Arrow tool, then click on the Object icon on the toolbar. The inspector will now show the object settings. Click on the Edit HTML button to edit your HTML. Page 17 of 22 14/05/2017 SC D:\841016430.doc Edit HTML button available Page 18 of 22 14/05/2017 SC D:\841016430.doc How to …… Link to other documents including music/video It may be that you have created web pages using another software program such as Word or a video file or music file. It is possible to create a link to these web pages using the Link tool in Spider. Select the object (eg a button) which the student will click to move to the linked web page Click on the Link tool on the menu bar at the top of the screen The Link Window appears on the screen Select Docum. You now need to locate the web page to which you wish to set up the link. Click on the Browse button The Specify Document window opens Use Look in to locate the document you want to link to. Click on the document (here – vitamins1.htm) Click Open The Link window now shows the link to another document/file – the vitamins1 web page In the same way you can enter an email link or a link to the Internet You will obviously link to a different document e.g a Power point presentation on the Black Death or a video you have taken using Windows Moviemaker Page 19 of 22 14/05/2017 SC D:\841016430.doc To Copy Text from Page to Page: Single left-click on one of the letters: History Website - make sure there is a blue border around the text - click Edit on the menu bar and select Copy. - click the Show Page Button - select Page 2. On Page 2 - click on Edit - click on Paste. Creating Hyperlinks using buttons Draw an ellipse to the left of the hotel picture near the top of the page. Keep the ellipse selected. Page 20 of 22 14/05/2017 SC D:\841016430.doc Exporting Your Work When you use Save or Save As, the site created is saved as a ‘Spider’ file eg History.vnu – this means that the file will open only on a computer which has the BlackCat Spider software installed. Note: when moving a Spider file (.vnu) from one computer to another on floppy disk or USB drive there may be problems with clipart which is not part of the software package. For instance there may be problems with clipart, sound, video, animation files stored in separate sub-folders within your project folder. A way round any possible difficulties is to Export web pages as HTML documents. To Export Your Work as HMTL - click on File - click on Export - the Browse for Folder dialogue box appears - select an appropriate location – click OK A new folder called My_Homepage_Export will be created in that location. The pages will be converted to HTML. Your HomePage / Front Page will be renamed Index.html. All the objects created on the pages will be stored in a sub-folder called My_Home_Page Files. To view your pages in the web browser, click on Index.html. Page 21 of 22 14/05/2017 SC D:\841016430.doc Creating Hyperlinks We wish to hyperlink from page 1 to page 2 Click on the Show Page Button – select page 1 Use the text tool to type Page 2 Double click on text if the red handles are not showing Click on hyperlink tool - tick the Use Link box - tick the Page box - click on the down arrowhead - choose page 2 from the list Creating Hyperlinks using buttons Draw an ellipse to the left of the hotel picture near the top of the page. Keep the ellipse selected. Click on the Show Page Button – select Home Page Use the text tool to type Page 2 Double click on text if the red handles are not showing Click on hyperlink tool - tick the Use Link box - tick the Page box - click on the down arrowhead - choose page 2 from the list Page 22 of 22 14/05/2017 SC
