Designing a Web Page Layout Using a Professional Bitmap & Vector Graphic Editing Suite 1IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 1 - Design the Base Layout Open your professional bitmap & vector graphic editor and select File  New. Set the canvas size to 850 x 600. Save the document as layout.png. 2IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 1 - Design the Base Layout Select File on the Application bar and choose Import. Locate the data files for this instruction and select background.png and click Open. A corner triangle appears for you to place the image; point to the top left corner of the canvas to place the image. If necessary, adjust the image with the Pointer tool to lay it over the canvas; it should fit exactly on the canvas. 3IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 1 - Design the Base Layout Select Windows on the Application bar and point to Extensions and select Kuler. In the Search field, type Red Hot Edited. The search results should show a theme of various shades of red that match the colors of our background imported previously. Click on the arrow next to Red Hot Edited and choose Add to Swatch panel; this adds this swatch to the Swatch panel. 4IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 1 - Design the Base Layout Import the graphic over the background image. With the Pointer tool, select the graphic and select Darken in the Properties Panel, and adjust the Opacity to 80%. Resize the image with the Scale tool so that the bridge lays over the bottom four stripes. 5IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 1 - Design the Base Layout Select the Text tool and type your site name. Move the title to the second bar from the top. With the title still selected, point to Filters in the Properties panel and select Live Effects. Check drop shadow and leave the defaults. Check Bevel and Emboss and set Style to Inner Bevel. Check Stroke and change the Stroke fill color to the Dark Red from the new swatches that were imported previously. 6IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 1 - Design the Base Layout With the Text tool, type the pages you would like for your site. In this example, I have used Home, About, Services, & Contact and have used bullets as separators. [Alt]-0149 is the keystroke to create the bullet. Font: Bodoni MT, Font Size: 26, Font Style: Bold, Color: Light Pink (new swatch colors) Move the new text to the upper left corner in the top stripe. 7IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 1 - Design the Base Layout Using the Text tool, type footer information and place it on the bottom right of the canvas in the lightest color stripe. i.e. Copyright © All Rights Reserved. Font: Times: New Roman, Font Size: 18 pt, Dark Red (new swatch colors) 8IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved. Copyright © All Rights Reserved.

Step 1 - Design the Base Layout Your layout should look something like this: 9IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 2 : Creating Website Pages In the previous page, we designed our base layout. All these elements are common elements that will be used in all the pages (i.e. background image, main graphic, site name, navigation, and footer). This will become the master page. In the Page panel, right-click on Page 1 and choose Set as Master Page. Double-click on Page 1 (Master Page) and rename layout. 10IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 2 : Creating Website Pages On the Pages panel, right-click and select New Page to create new pages. Create four new pages. Double-click on the Page name and rename the pages. In this example, I have used Home, About, Services, and Contact. 11IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 2 : Creating Website Pages None of the elements in the master page are editable in any of the other pages. They are locked. To edit these elements, you need to choose the master page. Now, you only need to concentrate on what is unique on each page, which is the content. Choose the page and type in your content in the blank space. Add placeholder text. 12IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 3 : Creating Slices and Linking Pages In the previous steps, we designed the base layout and created the website pages. Now we will link the pages together using slices and export. 13IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 3 : Creating Slices and Linking Pages Select the master page. Select the Slice tool in the Tools panel and create four slices over the page names at the top of the layout. The Slice tool basically creates images. Each slice will be exported as an image and behaviors like rollovers, link, drop down menus, etc. can be added to a slice. 14IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 3 : Creating Slices and Linking Pages Select the slice you have drawn over the first page name. In our example, it is Home. In the Properties Inspector, name the slice and alt tag, and choose the file name from the drop down. Repeat this for all four slices. 15IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

Step 3 : Creating Slices and Linking Pages Draw a slice over the elements that will not need editing. Draw a slice down the right side to create a slice of the background. In the Properties Inspector, name the slices. 16IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved.

To export as CSS, HTML, and images, you need to add slices to all the images and leave the editable text part without any slices. 17IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved. Step 4 : Exporting the Layout as CSS and Images

Choose File on the Application bar and choose Export. Choose CSS and Images (.htm) in the Export drop down menu. Check Put Images in subfolder. The second page that is exported will display an error; click OK. 18IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved. Step 4 : Exporting the Layout as CSS and Images

Open the file in your web page developer application. You will see that your bitmap & vector graphic editor has created a CSS style sheet, an html page, and the images folder with the images. Text is editable in your web page developer application. In the Page Properties, select the background and the background slice that was created, and click OK. 19IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas Education Agency, All rights reserved. Step 4 : Exporting the Layout as CSS and Images