Designing Web Site Layout Using Fireworks Web Technologies Designing Web Site Layout Using Fireworks NOTE: Prior knowledge of basic HTML and tables is required for this lesson. © UNT in partnership with TEA Trade & Industrial Education

Page Design Concepts Before designing a webpage layout, you must understand what makes a good page design. A pages appearance is sometimes called aesthetics Aesthetics refers to a page’s visual appearance. A well designed page should be appealing to the visitor. © UNT in partnership with TEA IT: Web Technologies: Fireworks

Page Design Concepts Proximity Refers to the relationship among the various components on a page. Related objects should be placed closer to each other. There should be some distance between unrelated items. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Page Design Concepts Proximity Example Title Information Title The example on the left illustrated poor proximity. The visitor may have a difficult time relating the information to the title and it is difficult to tell which text the image belongs to. The example on the right illustrates good proximity. The information is positioned next to its title and the related information can be easily related. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks] Trade & Industrial Education

Page Design Concepts Alignment Refers to the positioning of text and objects on a web page. Alignment Options Left Right Center Justified (aligned on both left and right) © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks] Trade & Industrial Education

Page DesignConcepts Alignment Headings and Titles Generally headings and titles can be left, right, or centered on the page. Content text and Paragraphs The main content text and paragraph text should be left or justified. It is generally difficult and unnatural to read paragraph text that is centered or right aligned. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks] Trade & Industrial Education

Page Design Concepts Repetition Repetition refers to the consistency of your design. All the text categories (headings, content, etc)should have the same style. The same color scheme should be carried out through your entire site. The same layout should be used on each page of your site. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Page Design Concepts Contrast Contrast refers to the degree of difference in the various objects on your web page. You want to make sure your visitor can distinguish each element of your web page. Objects to similar may blend together. If the text color is too similar to the background, the visitor may not be able to see it. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Fireworks Fireworks is a graphic editor. Designers can use a graphic editor such as Fireworks to design a webpage in graphic format. The image can be sliced up into different parts. Fireworks to Create Navigation You can create Image Map navigation on your image © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Graphical Layout Benefits Downside You can design more creative layouts The permanent fonts can be embedded onto the design so they will show even if the visitor does not have them installed. Downside The graphic design makes for larger web page files. Difficult to update & change the design © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Sample Page Layout Trade & Industrial Education This is a sample view of a page layout created in Fireworks. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks] Trade & Industrial Education

Image Maps The Image Map tool is at the bottom of the toolbar. The Image Map tool will allow you to identify each hot spot and specify where it should take the visitor when they click it. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Image Maps Using the Image Map tool, select the first hotspot area on your image. The home section was selected as the first hotspot. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Image Maps At the bottom of the Fireworks window, you can enter the properties for the hotspot. Link: page or URL where you want the link to point. Alt: A text alternative for the link. Target: Frame to target the link to. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Creating the Image Map An Image Map is a navigation tool on a solid image. An Image Map contains hot spots that will take you to a specific page or location when you click on it. The sample layout contains a navigation menu on the left side. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Creating the Image Map You should apply the hotspot to all the link titles on the image. All the hotspots will be indicated with the aqua color shade. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Slicing the Image Once the navigation is complete, you can slice the image. The Slice Tool The slice tool will allow you to cut your image into different parts. Select the portion of the image you want to slice away. Fireworks will apply the slice so that the image can be reconstructed into a table. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Slicing the Image The content area was selected so it can be removed from the image and replaced with text. Fireworks applied the slice so the image could be reconstructed in a table. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Exporting as a Web Page Fireworks will create the webpage template for you with your graphic image assembled inside a table when you export the image. From the File menu, select Export. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Exporting as a Web Page Navigate to where you want to save the page. Enter a name for the page. From the Save as type options, select HTML and Images. Click Save © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Exporting as a Web Page Fireworks will create the web page with all the image slices in the folder you specify. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Editing the Layout When the page is opened in the browser, you will see your image just as you created it assembled into a web page. We will replace the Content Area image with our own content. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]

Editing the Layout You will need your text editor to modify the layout. Open the web page in your text editor and replace the sliced image you want to remove with your content. We removed the slice, filled in the background color of the cell, and added some filler text. The background color of the cell should be set to #0071f4 © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks] Trade & Industrial Education

Editing the Layout Additional formatting can be applied to change the text color and the background color of the document to. Style sheets can be used to add more advanced formatting. © UNT in partnership with TEA IT: [Web Technologies] – [Page Layout with Fireworks]