Tutorial Step 2

 Return to WS 5.0 Home Page

Step 2: Make the banner and basic page design

We will choose a banner and then make a large rectangle that goes over the background. All of the information on our website will be positioned on this rectangle. The background will fill the browser when the website is on the internet.

 

 

Choose a banner  

• Click on the Graphics tab to open the Graphics Gallery.
• Scroll through and choose a banner.
• Drag and drop it onto the page.
• Drag the banner to position it in the upper left corner of the dotted Page Guide lines.

 

Change the color of the banner

You can change the color of any graphic on the page by using the Change Colors Command in the Photos Group of the Create Tab. We are going to adjust the color of the banner.

• Click to select the banner.
• Click on Create Tab>Photos Group>Change Colors. This opens the Hue Saturation Luminance dialog.

 

• Move the sliders in the dialog and see the changes in the Preview window. 
• Click Reset Colors to go back to the original colors so you can start again. Click Cancel if you want to keep the original colors and discard any changes.  
• Click OK when done. The banner is changed to the colors you chose in the dialog. 

 

 Make a large Rectangle shape to match the banner

• Click on Draw Tab>Shapes Group>Rectangle. A rectangle is placed on the page with selection handles.
• Click on Draw Tab>Colors Group>Fill Color. This opens the Color dialog.
• Click on More Colors at the bottom of the dialog. This brings up the custom color section. We will match a color from the banner to fill our rectangle.

 

 

• Click on the Select button (the one with the eyedropper). This changes your cursor to look like an eyedropper.
• Now move your eyedropper/cursor over a color in the banner that you want to match and then click on it.
• Look at the New color in the preview window.  It should match the color you chose.
• Click OK. The color fills the shape.
• Let’s get rid of the border on the rectangle. Click to select the rectangle and then click Draw Tab>Borders & Lines Group>Width>No Line.
• Using the selection handles, drag the shape to resize it and then position it under the banner.

 

Make the banner and the large rectangle to be equal width

• Click on the banner to select it.
• Hold down the Shift key and then click on the large rectangle.
• Leave the objects selected and click on Page Layout Tab>Make Equal Group>Width.

 

Make a vertical design line

We are using the rectangle to make a line.

• Click on Draw Tab>Shapes Group>Rectangle. This places a rectangle on the page.
• Click on Draw Tab>Colors Group>Fill Color.  This opens the Colors dialog
• Click on More Colors and then click on the Select color button. The mouse changes to an eye dropper.
• Click the eye dropper over a color on the banner
• Click OK. This changes the color of the rectangle.
• Use the selection handle to resize the rectangle.
• Position the shape on the page.

   

 

Tutorial Steps

Quick Start Tutorial

Tutorial Sample Site

Step 1 Start a new Project and choose a background

Step 2: Make the Banner and Basic Web Design

Step 3. Add Banner Text

Step 4. Preview the Page

Step 5. Add a Page, Rename a Page

Step 6. Add Photos to the Home Page

Step 7. Add Shapes and Text to the Home Page

Step 8. Add Buttons

Step 9. Complete the Contact Page

Step 10. Create an Email Link

Step 11. Link Pages

Step 12. Preview the Website