Elizabeth Brown, February 2005 Page 1 of 4 G6DPMM – Principles of Multimedia Lab session 1 – Writing web pages using a WYSIWYG editor Exercise sheet Dreamweaver is a website creation and management tool, as well as a document creation and editing tool – thus you can create whole sites using Dreamweaver, not just individual pages. In this lab session, you should create a new folder called “test”, under your public_html directory, and use this folder to store all your documents you create in this session. To do this, go into Windows Explorer, click on the H:\ drive and select the public_html folder (in the left-hand side of the window). Then right-click on the right-hand side of the window, then select New Folder, and name it test. Now open up Dreamweaver – you should find it opens up a new document, and you are now ready to start. Defining a local site and creating a homepage 1. The first thing you should do is save this first document. Click on File then Save as and save your file under H:\public_html\test Your file should be called index.html Saving files under your public_html folder means that anyone can see it on the web. The address of your website will be http://www.cs.nott.ac.uk/~username/test/ (where username = your CS username) and this page will be http://www.cs.nott.ac.uk/~username/test/index.html 2. You can now create your index.html page using any of the design views in Dreamweaver. You can hand-code it in HTML or create it completely visually, with no viewing of HTML code at all. You can also import Word documents, and use the Dreamweaver facility to convert them to HTML. 3. Read through the lab sheet (http://www.cs.nott.ac.uk/~ejb/pmm/dwintro.pdf) and familiarise yourself with the features of the work area. Adding content and hyperlinks to a homepage 1. Type this text into your index.html page (note – only press Enter once after each line). --------------------------------------------------------------------------------------------------------------- Test Home Page This is a new web site I am creating. I am using it to try out different features in Dreamweaver. This is my email address. This is the web address of the University of Nottingham. The features I will be using are: Elizabeth Brown, February 2005 Page 2 of 4 Headings Lists Horizontal lines Images Tables Hyperlinks --------------------------------------------------------------------------------------------------------------- 2. Note that your document is now called index.html* in the title bar. The * means that the file has been changed but not saved. Press CTRL-S to save your page every now and again. 3. Before spell-checking the document, check that Dreamweaver is not using a US dictionary – click on Edit Preferences, then in the Category column on the left choose General (if necessary) and alter the spelling dictionary so it is set to English (UK –ise). 4. Spell-check your document by clicking on Text Check spelling (or press Shift + F7). 5. Note that when you press Enter, Dreamweaver insertstags around your work. If you don’t want the text to be in a paragraph, press Shift + Enter, or Insert Line break. This will put in a line break, or
tag, instead. 6. Change the page title (this appears in the title bar at the top of your web browser). Click on the Title text box, delete the text “Untitled Document” and insert your new title “My Home Page”. Press Enter to confirm. Now save your work and preview your page by pressing F12. You can also preview your work by going to the web address in your web browser. Note that by pressing F12, you create a temporary copy of your page, called something like TMPel216af92k.htm – basically, a load of meaningless characters assigned to the filename. Every time you press F12, you will get a different temporary page created. Formatting and enhancing web pages 1. Click anywhere on your ‘Test Home Page’ title in the main window. Align the text in this paragraph by clicking on the centre button on the Properties palette. Re-save your work. Note that the alignment affects all the text in that paragraph. 2. Now apply different headings to your text. Click on the ‘Test Home Page’ title again, and change this to be Heading 1 or. To do this, click on the Properties palette and then on Format Heading 1. 3. Change the appearance of the font used in your page. Click on CTRL-A to select everything on your page, then click on the Properties palette, and change it from ‘Default font’ to ‘Times New Roman’ from the font list box. Highlight the ‘Test Home Page’ title and change its size to 3 in the Size box. Re-save your work. 4. To change the colour of your text, select the required text and choose a colour from the Properties palette (the grey box on the right of the Size box). Note that these colours are “web- safe” i.e. supported by all browsers. 5. Highlight all of the text from ‘Headings’ to ‘Hyperlinks’. Convert these to either an ordered (numbered) or unordered (bulleted) list by clicking on the appropriate icon in the Properties palette, or click on Text List then selecting ordered or unordered list. Elizabeth Brown, February 2005 Page 3 of 4 6. You can change the appearance of your list by changing its properties. Click the right mouse button on any item in the list you want to modify, then select List Properties from the menu. You can then change the way the list looks. 7. You can also use the ‘Links’ box in the Properties palette to add in an email link to some text, or make a hyperlink from some text. Select the text that says “This is my email address” and in the ‘Links’ box of the Properties palette, type in mailto:username@cs.nott.ac.uk (where username is your CS username). Next, select the text that says ‘This is the web address of the University of Nottingham’ and type http://www.nottingham.ac.uk into the Links box. 8. Finally, insert a horizontal line between your first line (the title) and the rest of the text. Do this by placing the cursor at the end of ‘Test Home Page’ then clicking on Insert Horizontal rule or by clicking on the ‘Insert horizontal rule’ icon in the Objects palette. You can change the length, width and alignment of the line by changing its properties in the Properties palette. NB. The Objects palette contains several different panels: - the Characters panel contains special symbols such as the copyright symbol (NB. These may not display correctly on all browsers) - the Common panel contains the most commonly used objects - the Forms panel is for creating forms - the Frames panel contains common frameset structures - the Head panel contains buttons for adding various HEAD elements - the Invisibles panel contains buttons for creating objects that are not visible in the Document window, such as comments or named anchors - the Special panel contains buttons for inserting special items such as Java applets, plugins and ActiveX objects Using tables Tables are really useful for organising text, graphics and data on your web page, and also for positioning and page layout. You don’t have to have cell borders showing, and so the table itself does not have to be visible. There are several different ways to insert a table into your page. The quickest way to do this is using the Insert table icon on the Objects palette. 1. Start a new document in Dreamweaver and save it as tables.html under H:\public_html\test 2. Change the page title from ‘Untitled Document’ to ‘My tables page’ and re-save it. Type in some text that says ‘Tables page’ and set it to be Heading 1, font type Arial, size 3 and in bold. 3. Insert a new table, and set the number of rows to 3 and columns to 2. 4. Try adding or deleting columns or rows by clicking the relevant place in the table, then clicking on Modify Table and then either Insert row / Insert column, or Delete row / Delete column. When selecting table layout options, there are several properties you can change the values of: - you can select the width and height of a table in pixels or as a percentage of the browser window – this is not advisable however, since not all browsers support it, and it does restrict you somewhat - use the Align field to specify how the table aligns with other elements in the same paragraph Elizabeth Brown, February 2005 Page 4 of 4 - in the V space and H space fields, these specify the number of pixels of white space to leave above, below and on both sides of the table (again, not supported by all browsers) - use the Clear row heights and clear column widths to delete all row height and column width values from the table - use the Modify Table menu to do things like Convert table widths to percent to convert the current table width from pixels to a percentage of the browser window - in the CellPad field, specify the number of pixels between the cell content and the cell boundary NB. default value is set to 1 - in the CellSpace field, specify the number of pixels between each table cell NB. default value is set to 2 - in the Border field, the width of the border is specified in pixels – to have an invisible border, set this to 0. Working with graphics Dreamweaver can support both JPG and GIF images. Dreamweaver (and IE version 4.0 onwards, and Netscape Navigator 4.04 onwards) also support PNG images (PNG are the default file format for Macromedia Fireworks and are patent-free replacements for GIFs). When you insert an image into a Dreamweaver document, Dreamweaver automatically generates a reference to the file in the HTML code. Make sure there is a copy of this graphic in your current website folder, and that this reference is correct. Images should NOT be edited in Dreamweaver since they may be distorted and will still download the original image size. You should use something like Adobe Photoshop or Paint Shop Pro to edit your images. There are lots of freely available images on the Internet – try http://www.ncl.ac.uk/images/gifs4us/ if you want some to use in your test page. Right-click on the image, and select Save picture as then save it under H:\public_html/test. 1. To insert an image into your page, click on Insert Image or click on the Insert image icon in the Objects palette, and select the image you want to insert. Click on the Select button. 2. You should always provide some alternative text for your images – this text will be shown in the mouse-over text and provides support for visually-impaired users, or those users who will turn of the ‘display images’ feature in their browser to download pages faster. Click on the Alt title box in the Properties palette – underneath the image size and thumbnail – and type in 1-3 words which describe the image. Go to http://tinyurl.com/4nq8g for more details on visually-impaired users and how to use access technology to help disabled users. Testing and maintaining your site Remember to test your web site using the sites mentioned in the main lab sheet. You will also need to maintain and update your website, to keep the information on there, current and up-to-date. For this reason, you may wish to include a statement saying “Site last updated on DATE” (where DATE is the date you modified it last).