Unit 15 – Web Authoring Web Authoring Project

Unit 15 – Web Authoring Lesson Overview Outcomes Time Task 1Animated Content Task 2Rollover Buttons Task 3Content into Tables Objectives Understanding the positive design features of a website. Understand how to create appropriate content (including rollover & animated images) in suitable software. Understand how to export and import files into suitable software. Understand how to create and apply simple CSS text and list styles. Understand how to create internal and external hyperlinks.

Unit 15 – Web Authoring Refer to Template Content Size Template Size – You can change the Colours Animated Content height: 150px; width: 850px Rollover Buttons height: 100px; width: 170px;

Unit 15 – Web Authoring Task 1 – Create Animated Content Fireworks 1.Set the Canvas Size (Refer to chosen template) 2.Create a minimum of 5 States. 3.You can either place a separate image or move a image on the different states. 4.Include appropriate text. 5.Set an appropriate speed (50) for each state. 6.Using Export Wizard >> Export the animation as a Gif.

Unit 15 – Web Authoring Task 1 – Import Animated Content Dreamweaver 1.Using the code view click in-between >< tags for the header tag (Delete any text). 2.Click on Insert >> Image 3.Select the animated Gif. 4.You can add alternative text if the image does not show. Preview the animated gif in either live or in the browser view.

Unit 15 – Web Authoring Task 2 – Create Rollover Buttons Fireworks 1.Set the Canvas Size (Refer to chosen template) 2.Refer to your design and create your first button. Include the button name and a suitable image. 3.Save the 1 st button as a jpeg with a suitable name. 4.Create another button (save as) and make a change for the rollover effect: Apply greyscale Change background image, Text, colours etc. 5. Save the 2 nd button as a jpeg with a suitable name.

Unit 15 – Web Authoring Task 2 – Import Rollover Buttons Dreamweaver 1.Using the code view click in-between >< tags for the 1 st rollover image. 2.Click on Insert >> Image objects >> Rollover Image 3.Select the original and then the rollover image. Preview the rollover button in either live or in the browser view

Unit 15 – Web Authoring Task 3 – Content into Table Images 1.Check the column width (200) of the table cell you would like to place the image. 2.Resize the image in Fireworks maintaining the aspect ratio. 3.Save the image and insert into the table cell. You could resize the column width in the properties panel.

Unit 15 – Web Authoring Completed Home Page