To create web pages that have a banner and a navigation menu.
Skills
- Photoshop
- create a new document
- layers: opacity, blend mode, using a layer mask
- gradients: color gradient
- gradients: layer mask fade gradient
- save pictures for the web (in JPG format)
- Dreamweaver
- create nagivation menus
Part 1: Photoshop - Prepare the Banner
-
Decide on a topic for the web page. If you can't think of a topic, pick something you studied this semester in one of your classes. If you still can't think of a topic, illustrate John 1:1-18 or Revelation 21.
-
Create a new web page folder to keep your files for this page in. By the end of this lab, you will have three pages in the same folder, linked together, all with the same basic layout.
-
Create a new document in Photoshop for the banner. (800 pixels wide by 200 pixels tall is a typical size, but feel free to make your banner thinner or thicker.)
-
Create the banner using layers. Be sure to include the following features:
-
at least one color gradient
-
at least three pictures
-
at least one picture has opacity reduced (to make the picture see-through)
-
at least one picture uses a blend mode other than Normal
-
at least one picture uses a layer mask fade gradient (to cause the edge of the picture to blend into the background)
-
a title using text with effects (like Bezel and Emboss)
-
some paintbrush strokes (visible in some way)
-
-
Save the banner in the new folder you created. (It will be a PSD Photoshop file.)
- On the File menu click Save As and, in the web page folder (not the banner folder), save the banner as a JPEG (quality 8 or higher, but the size should be less than 100 KB).
There is no need to turn anything in at this point.
Part 2: Dreamweaver - Navigation Menu
-
Open Dreamweaver and create a new web page. Save the new page in the web page folder, using a simple, one word name like luther.html.
-
Change the Document Title from Untitled Document to something suitable.
-
Change the background color to something other than white.
-
Create an AP Division and insert the banner at the top of the page (or wherever you want the banner).
-
Rename this AP Division from apDiv1 to banner on the AP Elements panel as shown below:
-
Create another AP Division for the Navigation Menu. (Make the rectangle for the new AP Division underneath the banner where the menu will go. You can adjust the position and size at any time as you work through the remaining steps.)
-
Rename this AP Division from apDiv1 to menu on the AP Elements panel as shown below:
-
Click inside the new AP Division, and then click Unordered List
on the Properties panel. Type a name for this first page, for example Luther. -
Press Enter, then type a name for the second page. Press Enter again, and type a name for the third page. (These last two pages don't exist yet, but you will make them later. The three names will be in a vertical bulleted list and will not be formatted the way you want. This is OK for now.) See below:
-
Highlight the first name on the list and click on the hyperlink button
. In the Link box, type in the name of this first page, including the .html extention (ie. luther.html, or whatever you saved it as). -
For the other two names on the list, also make them links the same way. In the Link box, type in a simple, one word name .html. For example, for Leo X, use leo.html or leox.html and for Council of Trent you could use trent.html. (These pages don't exist yet, of course. You will create them later.)
-
Now we need to make the list of links look like a menu. First, click on the <ul> tag on the lower part of the Dreamweaver Design window, where the red arrow is pointing in the picture above. (If the tag is not visible on that strip, click on one of the words in your menu.)
-
In the CSS Styles panel, click on the New CSS Rule button where the red arrow is pointing to below:
-
Be sure the New CSS Rule window for the Selector shows #menu ul. (Ask for help at this point if things don't look right.)
-
Click OK. On the left, click the List category and set the Type to none as shown below, and press OK.
-
In the CSS Styles panel, double-click on the #menu style (not the #menu ul style). Under the Background category as shown below, set the Background color to a color different than what you set for the page background. (This will make the menu stand out on the page.)
-
To change the color of the menu words, click on the <a> tag on the lower part of the Dreamweaver Design window (where the <ul> tag was). (If the <a> tag is not visible on that strip, click on one of the words in the menu.)
-
In the CSS Styles panel, click on the New CSS Rule button. The Selector should show #menu a. Click OK. Under the Type category set the Color to the color you want for the words and click OK.
-
To set the font for the menu words, in the CSS Styles panel, make sure the All button is depressed. Double-click on #menu a. Under the Type category set the Font to Veranda, Arial, Helvetica, sans-serif (or another one if you want, but stick to one of the pre-defined fonts). Also set the Weight to Bold and set the Size to whatever you want, as shown below:
-
You also want the words on the menu to change color when the mouse goes over them so that the user knows that the buttons are "live." Make sure the <a> tag is selected (ie. depressed) on the lower part of the Dreamweaver Design window.
-
In the CSS Styles panel, click on the New CSS Rule button. Change the Selector from #menu a to #menu a:hover.
-
Click OK. Under the Type category set the Color to the color you want the words to change to and click OK. (Note that you won't see this hover color until you view the page in a web browser.
-
Test the hover color by saving the web page and opening it in a web browser. Move the mouse over the menu words to see the hover color.
-
Now we need to set the menu items to be listed either vertically or horizontally, your choice. Click on the li tag on the lower part of the Dreamweaver Design window. In the CSS Styles panel, click on the New CSS Rule button. Be sure the New CSS Rule window for the Selector shows #menu li and click OK.
-
If you want the menu items to display horizontally in a row under the banner, under the Block category set the Display to inline.
-
If you want the menu items to display vertically in a column under the banner, under the Block category set the Display to list-item.
-
If you want to change left margin of the menu (ie. how far over the first option of the menu begins), in the CSS Styles panel double-click on #menu ul. Under the Box category, uncheck Margin: same for all and put in a number under Margin: left. (You can try 10 pixels and go from there.)
-
If you want to change the top margin of the menu (ie. how far down the first option of the menu begins), follow the previous step, but set the Margin: top.
-
If you want to change the spacing between the options of the menu, in the CSS Styles panel double-click on #menu li. Under the Box category, uncheck Margin: same for all and put in a number under Margin: right if your menu is horizontal or under Margin: bottom if your menu is vertical.
-
Once you are happy with your banner and menu, add content for the page using more AP Divisions to position text and graphics. Include the following content items:
- a page title (this is in addition the banner and the document title)
- at least one paragraph of text
- at least one picture
-
Once you have finished the first page, be sure to test it with a browser.
-
When you are sure your first page is completely finished and debugged, you can quickly make your second page from it. Do a Save As in Dreamweaver, and give it the second simple name you decided on earlier when creating the links in the menu (eg. leo.html).
-
Delete the content part of the page, leaving the banner and menu as is. Insert a new title, text, and picture(s) and save the page. All three pages should be identical except for the content area of each.
-
Repeat the previous two steps again for the third page (ie. for trent.html).
-
Test the three pages in a web browser by opening the first page and make sure you can click from page to page on your menu.
-
In BUBBS, create a new folder under the Web Publishing Folder for this page.
-
Upload your three linked pages, the banner, and all photos (except the PSD files) to the new folder.
There is no need to upload the PSD file as it will only waste your BUBBS space.
-
Make sure the published page works correctly by using a web browser and surfing to www.bubbs.biola.edu/~your.name/folder/filename.html
(use your own BUBBS name, and the file name of your folder and web page).NOTE: Do not remove any of the files for this lab from BUBBS until you have received your grade.
Submit the Page
-
Use the Drop Box to submit the URL address of your web page. Do not submit any files, only the link.
Fill in the fields for your Name (e.g. John Smith), the Assignment (e.g. Lab 12 Life) and the URL, which you should copy from the address line of your browser:
(e.g. http://www.bubbs.biola.edu/~john.smith/life/luther.html)
Grading
| banner uses layers | 1 pt |
| banner size less than 100K | 2 pts |
| banner has color gradient | 2 pts |
| banner uses three pictures | 3 pts |
| banner has opacity reduced on a layer | 2 pts |
| banner has blend mode changed on a layer | 2 pts |
| banner has brush strokes | 2 pts |
| banner uses layer mask fade gradient | 2 pts |
| banner has title with text effects | 2 pts |
| web pages have document title | 1 pt |
| web pages have background color other than white | 1 pt |
| web pages are identical except for content area | 3 pts |
| web pages have different text in content area | 3 pts |
| web pages have different pictures in content area | 3 pts |
| web pages have different page titles in content area | 3 pts |
| menu navigates correctly between all three pages | 6 pts |
| menu items change color on mouseover | 3 pts |
| web page published on BUBBS (or other server) | 6 pts |
| link submitted correctly | 3 pts |
Total: |
50 pts |
