Really simple guide for Teachers to produce a solution using Dreamweaver for the Climate Change task (or any other web task!)

Transcription

1 Really simple guide for Teachers to produce a solution using Dreamweaver for the Climate Change task (or any other web task!) ISDD H Info Sys Higher Unit Package 1: Unit-by-Unit approach

2 Starting Dreamweaver: All East Renfrewshire Schools should have a copy of Adobe Web Standard CS4 which should include Dreamweaver CS4. This program is an Industry Standard program for writing web and CSS style pages. From the user menu select Adobe web Standard and choose Dreamweaver CS4. Choose the create new html option from the list The Dreamweaver interface is simple to use once you know your way about the panels. There are different view options which allow you to see and edit the html code version of your document. Design view is a non-code based editor viewer which allows you to easily edit text, graphics and insert other media. A point to note: editing web pages is not like a word processor in that the pages are not WYSIWYG. You cannot simply arrange media around the screen and expect the objects to match your layout. For info only Web pages can be created with different widths and be viewed at different resolutions. To control your layout it is easier to use tables with columns and insert your media. Additional Cascading Style Sheets (CSS) are also usually used along with the html pages to control page layout and formatting. You do not have to use a style sheet for html pages that have basic formatting included. To view your pages you can use the live viewer or default browser view F12. More complex html and pages with Javascript usually have to be tested in different browsers to ensure they display properly on the web as they can appear and function differently in some browsers eg. Chrome, Silk, Safari etc.

3 Dreamweaver Interface Html code view Split screen view: html and design Design view: easy web page creation! Live view: see what your page looks like! Insert panel: to select and insert common html objects File navigation window: used to manage all your files if you are managing multiples files on a website Properties panel: used to edit the properties of an html object eg. hyperlink addresses Simple formatting: used for on-page formatting that does not need a style sheet Inserting media: Text In the design view window you can position your cursor at the beginning of a line and type or paste your text. The page properties button allows you to access general formatting properties which are applied to the whole page only (see next page). If you want greater control of formatting you need to use a CSS style sheet. When you press return you will notice you get a double line space. If you want a single line space use shift+return.

4 Click here to view the Page properties window Page properties are applied to the whole page only in this window Additional formatting commands can be accessed by pressing the right mouse button in the design window. Indents can be made to the paragraphs but more precise formatting of text paragraph positioning requires the use of tables. Tables Tables can be inserted by clicking on the Insert menu and then table.

5 The following window will be displayed and you can choose the number of rows and columns. You can also set the table width to fit onto your page. As a general guide many web pages are about 1,000 pixels wide, so making up a table about 500 pixels wide will take up half the page. (A point to note is that many web pages are dynamic in that they automatically resize to fit the browser window). Other settings include table cell alignment, cell padding (the space around the cell contents). The table can be selected by clicking on the active cell and pasting or typing text. Table dimensions/cell widths etc. can easily be changed by clicking and dragging on the table lines. (The cursor will change to a double line). Additional table editing properties like adding rows or columns can be accessed by right-clicking on the table and selecting the table sub-menu. Table headings can be created by selecting the two cells, right-click, select table and then merge cells.

6 Adding Graphics You cannot copy and paste graphics into web pages. Graphics must be inserted from a previously saved location. To add a graphic to the table, select the cell you want to add the graphic to and choose Insert and then Image from the sub-menu. A window will appear like the one below. Navigate and select your chosen image. Click the OK button. When you insert your image you will notice that your image may be too small or too big. If your image is too small you can drag and enlarge it but there will be a loss of quality when you view the image on your page. If you reduce the size to suit, the image will view properly but will take slightly longer to load because the image is needlessly too big. This is the reason why you should really plan out your pages in advance using wire-frame diagrams and create an images folder to organise your graphics and media in advance. The graphics should all be resized to match your page at the correct resolution so they take up the minimum storage space and the page loads as quickly as possible. Adjusting the graphic size as well dragging the cell sizes to make the table look the way you want it can be a very fiddly task and requires a bit of patience! If you adjust the table properties so that the border size is set to 0, you can make the table invisible and the result is very professional.

7 Inserting hyperlinks A link can be a word, group of words, a graphic or even a hotspot (designated area of a graphic) that has a hyperlink associated with it. Select your object and then insert the hyperlink address into the properties link box. You must ensure you insert the full path including the part at the beginning. Once you insert the link, text will change colour and become underlined to indicate they are now a hyperlink. If you select an image you can create a hyperlink exactly the same way as a text link. To create a hotspot link, you can create a hotspot area on a graphic by entering the name for your hyperlink in the Alt box, drawing out the hotspot using the hotspot tool and then entering your target address. Creating buttons A button is basically a fancy graphic hyperlink that changes appearance when the mouse hovers over it or the button is clicked. This is called a roll-over image. You need two images, one for the normal image and one for the roll-over image. This can be achieved using html and a CSS script or a more simple way would be to make your own button. Go to and enter the text for your own button.

8 1 2 3 The screen looks as follows: Step 1: Enter your text for the button Step 2: Download the button to your download folder or choose the save as option Step 3: Click on the swap button to reverse the colours this will give a roll-over effect and download the second version of your button. Adding the button in Dreamweaver In Dreamweaver, go to the Insert - Common panel and select Images - Rollover Image. Give the button a name, enter the location of your two saved button images and enter the full URL including the bit and click OK.

9 Save your web page changes for the button and hit F12 to preview your button in the default browser. It should look like this: The button will have a roll-over image that changes state when the mouse cursor goes over it and the button links to a web site address. The code made by Dreamweaver will be as follows: <a href=" onmouseout="mm_swapimgrestore()" onmouseover="mm_swapimage('example Button','','../My Pictures/example button 2.png',1)"><img src="../my Pictures/example button 1.png" name="example Button" width="197" height="40" border="0" id="example Button" /></a> <p><a href=" to a website</a> Adding a video from an external website The simplest way to do this is to get the html code from an external website that allows you to embed the code. Vimeo allows you to do this. Go to Use the search box at the top right of the screen to search for a topic: Once you have found an appropriate video Click on the share button to access the share window. Copy the embed code and paste the code into your web page whilst you are using the code view.

10 In Dreamweaver using the design view, position your cursor where you want to place the video. Switch to Code view and paste in the code you want to embed. The code will look something like the code above. Save your page and preview it in a browser by pressing F12. You should be able to view your embedded video on your web page. Adding a Search box Do a search for add google search box to web page. You may get a link like this one. Google can generate the code for you. Copy the code into the Code view window in Dreamweaver and save your page. Preview by pressing F12

11 FINALLY A POINT TO NOTE: Please read the instructions for the assessment carefully as the assessment requires candidates to write at least two short sections of code. Presumably this means two parts of the html code must be hand entered in html and not entered using the Dreamweaver editor to create the code for you. A simple table could be hand-coded or a text hyperlink entered as the minimum requirement. See examples below. Examples: <p>a simple table</p> <table width="500" border="0"> <tr> <td width="249">sub-heading 1</td> <td width="241">sub-heading 2</td> </tr> <tr> <td>lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td>ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</td> </tr> </table> <p>simple link to a website</p> <p><a href=" to a website</a></p>