1

GRC 175 Assignment 3

Create a hobby website

Tasks:

1. Create index.html

2. Create a transparent background graphic in Photoshop

3. Add an external CSS to index.html

4. Create a consistent layout to use for all 3 pages

5. Add a main navigation to the page

6. Create gallery.html and contact.html by duplicating index.html

7. Add a picture gallery to gallery.html

8. Add borders to thumb images in gallery using a CSS class

9. Add unique content to each page

10. Check all your web pages for validation

11. Upload all pages using Dreamweaver’s built in FTP

2

Assignment overview:

This week we will be creating a new website that contains a minimum 3 pages about one

of your hobbies or interests. Do not reuse pages or content from previous assignments.

You must save your files into a new a3 folder within your 175 folder. We will use

Dreamweaver and CSS in order to complete this assignment. Using Dreamweaver we

will begin creating our index page, add an external CSS, create a page layout, add a main

navigation, add content and more. In addition, we will add a gallery with six thumb

images that link to larger images. We will create a CSS class in order to add a border to

our thumb images. And finally we will use DW to validate our pages and then upload to

our web host account. You do not have to follow these steps exactly as long as you meet

the minimum assignment requirements.

3

Requirements:

• Pages encoded using HTML5

• Use the same external stylesheet CSS on all pages

• Must have a style for your body, defining font, size and color, background image

and bg color

• Create a partially transparent graphic in Photoshop and use as your background

image

• Must also have a body background color that appears through the partially

transparent background image

• Create a page layout using html semantic tags and div’s and use for all 3 pages

• Must have a consistent main graphical navigation on each page

(use the exact same main nav on all your pages, exact same location, same size)

• Add a picture gallery to gallery.html with a minimum 6 thumbnails (sized

approximately 90x68). Thumbnails should link to larger pictures (larger pictures

should be sized 640x480 or larger and it is recommended you have them open in

a new window using target _blank)

• Images in the gallery must have an added border using a CSS class

• All pages must pass validation

• Upload to your web host

• Add link on cmp.html for a3. A3 links to index.html within the a3 folder

4

DW Manage Sites:

• Reminder: you must click on Site> Manage Sites and pick your site name every

time you open Dreamweaver!!! This is how Dreamweaver knows which site it

will be managing and where to upload your files to, and how to define hyperlinks.

• Every different computer that you attempt to use Dreamweaver for managing

your website(s) you will need to have your site info set up again using Site> New

Site or import the site info created in the step shown below, Site> Manage Sites>

Import (pick the .ste site file)

ü Once you have set up your site onto a computer using DW you can then

export the site info:

Site> Manage Sites> Export (pick the back up my settings option)

DW will create an .ste file that can be imported via the manage sites

window on any new computer with Dreamweaver

5

Step 1 – Create index.html

For this assignment we will be creating a hobby or interest website with at least 3 pages.

You should name your files index.html, gallery.html, and contact.html (or name whatever

you want to name). Make sure to save files into an a3 folder within your 175 site folder.

In the following instructions we will create index.html, add an ext CSS, create a layout,

add a nav bar, add thumb images to a gallery and finally add a class which adds borders

to the gallery images. Once the index page has the layout and a nav bar then it is easiest

to do a Save>As option in DW in order to create the other pages, gallery and contact.

• Open up DW (Dreamweaver).

• Make sure you have selected your site Site> Manage Sites, then select your site

and click Done.

• Create a new page, File > New .

• Select Blank page, HTML, None (layout), HTML5 (DocType).

• A blank html page should open.

• Make sure to save page File>Save.

• Save first page as index.html within a new folder named a3 inside of your 175 site

folder.

• Before adding the external CSS we first want to create a background graphic with

some transparency.

Step 2 – Create a transparent background graphic in Photoshop

In this step we will create a partially transparent graphic in Photoshop and use as your

background image for all 3 pages. Our pages will also have a body background color that

appears through the partially transparent background image. You can create the bg

graphic any way you choose as long as it has some transparency, the following is just one

method of creating a transparent bg graphic.

• Open up Photoshop.

• In Photoshop create a new document sized approximately 10 pixels wide by 700

pixels high. Resolution approx. 72 pixels/inch. Color mode RGB 16 bit. Make

sure to select the background transparent option.

6

• Once your document opens you should see a grey checkerboard showing, this

represents the transparent areas with no color or content.

• Create a graphic that maintains some transparency meaning you still have some

portions where you can see the grey checkerboard.

• For this example I like to demo using the gradient tool. I create a gradient fill

using the color to transparency option. However you can create the background

graphic however you are most familiar with.

• Using the gradient option select the gradient tool(G) on the toolbar, then select

the gradient option (box) located on the gradient toolbar at the top left, located

directly under the image menu option.

• Within the Gradient Editor window that opens select the Foreground to

Transparent option located under Presets.

• Select the bottom left color stop and then select a desired color by clicking on the

solid color stop (at the bottom) and pick your desired color.

• The gradient will go from this color to transparent. Optional adjust the second

color stop on the right or add additional color stops by clicking below the line and

change the color of each added color stop.

• The color being displayed should have the appearance of going from a solid color

on the left stop to transparent on the right. Click on Ok.

• In order to add a gradient fill to your document click near the top and while

holding the mouse button drag down towards the bottom of your document and

then let go of the mouse button.

• You should see a gradient fill appear. It should go from your Foreground color to

transparent. The areas that are transparent must show the grey checkerboard.

• If you want to undo the fill click on command+Z (mac) or cntrl+Z (pc).

• If your gradient is not filling with the transparency option then go and check your

gradient options again.

• Once you are happy with your graphic and there is some area which shows

transparency (grey checkerboard) then we are ready to save the bg image for the

web.

• Click on File>Save for Web…

7

• Select the PNG-24 option and make sure the transparency option is selected or

checked. Click on Save.

• Save inside your a3 folder within your 175 site folder.

• Recommended you save inside an images folder

• Save as type: Images Only (. Png) and Settings: Default Settings.

• Click on Save.

• File>Save and save the .psd photoshop document file in case we need to edit our

bg.

• Exit Photoshop.

Step 3 – Add an external CSS to index.html (for older non CC versions)

*Adobe DW CC users skip down to page 9 for instructions

Next we are going to add an external CSS to index.html. You usually choose either an

internal CSS or an external CSS. It is not recommended you use both on a page, however,

you are allowed to have both. External CSS is the preferred method for websites because

you only have to update one CSS file and the changes will affect the entire site that is

referencing that one CSS file.

• First we need to first create an external style sheet to attach to index.html.

• Make sure you are back in DW.

• The following screenshots represent the older version of DW

• Find the CSS Styles window, if necessary. open via Window> CSS Styles.

8

• In order to add a new CSS Style Sheet to our current page click on the New CSS

Rule button, icon with + (plus sign).

• Type/select the following:

Selector Type: Tag

Select Name: body

Rule Definition: New Style Sheet File

Click OK

• Next, when prompted make sure to save your style sheet within your a3 folder,

give it a name like a3.css. (If using DW CS3 you will need to type the desired

name under URL.)

• Select Type and select a Font, Size and Color .

• Click on Background and select a Background color .

• Click on Browse next to Background image and the select your transparent

background image inside your a3 folder and click Ok.

• We have just created a rule/style for the body tag and added it to a new ext CSS.

• You can always re-edit the body rule by double clicking on body listed under all

rules (within CSS Styles panel, in All display).

9

• Save and view f12 (pc) or File>Preview in Browser>pick a browser .

• The index page should show your transparent background image along with a

background color showing through the transparency.

Step 3 – Add an external CSS to index.html (for CC versions)

For Dreamweaver CC users only please follow the following instructions

Next we are going to add an external CSS to index.html. You usually choose either an

internal CSS or an external CSS. It is not recommended you use both on a page, however,

you are allowed to have both. External CSS is the preferred method for websites because

you only have to update one CSS file and the changes will affect the entire site that is

referencing that one CSS file.

• CSS is defined in the CSS Designer window, open via Window> CSS Designer

• Under CSS Designer>Sources

• Click on the + (Add CSS Source)

• And then select Create A New CSS File

10

• Within the new window click on Browse and define the location where you want

to save the file, save in our root 175 folder/directory. Make sure to type a name

like: 175website.css

• We are creating an external CSS file, named with the .css file extension

• Click on Save and then Ok

• Next click on + Add Selector (under Selectors tab)

11

• A body (tag style) should now appear under selectors

• Select body and under Properties tab you will see many options for styling the

body (tag)

• Scroll down and find background-

• Select a Background color using the color picker

• Screenshot shown on the next page

12

• The following is the CSS code for the style we just created for our body. This

example defines a “rule” or style for our <body> html tag. Anything located

within our body will inherit this style, in this case a webpage background color of

silver. This code is located in the external CSS file.

body { background-color: #FFFFCC; }

13

• Note: you can even edit the external stylesheet file either inside DW or with a text

editor, just like a web page. If you want to view the CSS code view of an external

CSS file click on the CSS file name next to Source Code, named 175site.css in

my example. After viewing switch to Source Code or click Design view.

• The following page shows an example of the code reference inside our HTML

page that shows the link to the external style sheet, link appears in the head. This

is the code DW automatically writes which links our web page to the external

CSS file. External CSS is the preferred method in web design since one style

sheet can update your entire site, external will be the required method for our

website.

Code view of link to ext CSS file

<title>To Do GRC 119 Fall 2008 Adam Valentiner</title> <link href="175site.css" rel="style sheet" type="text/css" /> </head>

• Next , within our external style sheet add a repeating background image.

• Please note: You must first find a graphic image to use as a background and copy

it into our class website folder or find its absolute URL! It is recommended you

put inside an images folder within the 175 root folder.

• Under selectors make sure body is still selected

14

• Under Properties scroll down to background-image

(located right below the background property you prev created)

• Select your desired image, needs to be located somewhere in the 119 folder, and

click Ok.

• The following example of the code view for our body rule in our 119site.css file.

In this example the bg image is in an images folder and inside this folder there is a

file named background.gif. Optional: You can edit your style sheet in code view

by clicking on the style sheet name listed

body { background-color: silver; background-image: url(images/background.gif); }

• Next we will add font, size and color to our body tag style also called a rule.

• Select body and under properties scroll down and add font, size and color.

• The following is an example of the code view for our updated body rule in our

175site.css file.

body { background-color: silver; background-image: url(images/background.gif); font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 12px; color: #333333; }

• Just to review, the body style or rule we just created is known as a tag style or rule

because it is styling the html tag body.

• File>Save All

• Preview in browser f12

• Note: if you want to view the CSS code view of an external CSS file click on the

CSS file name next to Source Code, named 175site.css or similar in my example.

After viewing switch to Source Code or click Design view.

15

Step 4 Use HTML5 structure tags and div containers to control layout

• Next, we will use some of the new HTML5 structure tags as well as div

containers to hold your page content.

• These new structure tags are referred to as semantic elements or tags

http://www.w3schools.com/html/html5_semantic_elements.asp

• We will use the same layout for all of our pages.

• HTML5 semantic elements are supposed to make it easier to understand how

content is organized. Some of these new semantic tags are header, nav, footer, etc

• The Div tag is part of HTML and is not considered to be semantic.

• If used a div must have an opening and closing tag. <div></div>

• The <div> tag defines a division (container or content section) in your webpage.

• Div tags are referred to as containers and are useful for identifying various

content sections and then use CSS to style a div and help create a layout for a

webpage.

• The <div> tag can be used to group block-elements to format them with styles.

• Div’s can be styled using a class (or id). In CSS, a class is a custom style which

be created in Dreamweaver by clicking on the new rule button on the CSS panel

and creating a class.

• Use the following HTML5 structure tags and Div tags to create a “Div style

layout” (aka tableless layout)

16

• Please note: You can change the following code using some of the new semantic

elements if you choose.

• Or copy and paste the following code inside your body in the code view

• In DW, go to the HTML code view, click on code, remember to paste into your

body

<div class="container"> <header> </header > <nav> </nav <article> </article> <footer> </footer> </div> OR may be instead you use a mix of semantic and non semantic tags <div class="container"> <header> </header > <nav> </nav <div class="main_content"> </div> <footer> </footer> </div>

17

• The extra tab and spacing in the above examples help show the HTML5 structure

tags and the container div which contains all the structure tags and other divs. The

extra spacing is ignored in HTML.

Note: An alternative way to insert div tags is to instead insert a div at a

cursors location by selecting Insert>Common>Insert Div tag. At the

Insert Div tag window type a classname for the div. The classname

will be used to style that div. For example, create a div with a class

container.

• Next we need to create a style for the HTML5 stucture or semantic tags so they

act like block elements in the older browsers. Header, nav, footer, article may

display as inline elements in older browsers, meaning they display next to each

other instead of beginning on a new space or line, just like every new paragraph

does.

• Copy and paste the following code into your external CSS.

• In DW you can view stylesheet code by clicking on mt.css (or whatever you css is

name) css source option located next to source code at top of page near tab

index.html.

header, nav, article, footer {

display: block;

}

• File>Save All

This exact same layout must be used on all 3 pages of our hobby website.

• Next we want to create a style for our container div.

• On the CSS Styles panel click on the New CSS Rule button (+).

• Create a Class, name container, and make sure it goes in the external css previously created.

18

• Click on the category Background and for Background Color select White or a similar color.

• Next select the category Box and then add a width of 800 pixels. Next under Margin uncheck

the same for all option. For the Left select auto and for the Right select auto. This will add a

width to the container div which contains all the pages content and setting the left and right

margins to auto will center the page.

• Optional add a Padding of 20 to all the padding values. Padding will add space or padding just

inside the edges of the container div. Try also adding a border, click on Border category.

• Optional repeat steps and create classes for header, main_content and footer

Note: An alternative to the above example of copying and pasting the div tags is to

instead insert a div at a cursors location by selecting Insert>Common>Insert Div tag.

At the Insert Div tag window type a classname for the div. The classname will be used

to style that div. For example, create a div with a class container. Then within this div

add 3 more divs. Header, main_content, and footer. Your code would look similar to

the example on the previous page.

Step 5 – Add a main navigation to the page

Next, add a nav bar to the very top of the page. A nav bar is the main navigation for the

website that appears at the top of the page. The nav bar will provide hyperlinks to the

three pages we will create for this assignment. You can create any type of nav bar as

long as you use the same nav on each page. There are various types of nav bar styles like

text, graphical, CSS, and more.

• Recommended copy and paste the code on the next page into the body. Paste code

inside the header div if using the div style layout.

19

<table width="400" cellpadding="10" align="center"> <tr> <td> <a href="index.html">Main </a> </td> <td> <a href="gallery.html">Gallery</a> </td> <td> <a href="contact.html">Contact</a> </td> </tr> </table>

• Modify table to your liking. For example, you might create a class called header

in order to style everything within the header div to have a particular style.

• Optional add a title for each of your hyperlink. It may or may not appear when

you mouse over it, must go in the opening hyperlink tag. Title help describe the

hyperlink and the page it will be taking us to. You will have to go to the code

view and add inside your hyperlink tag.

<a href="index.html" title=" Main Homepage ">Main</a>

• Save and preview in a web browser

Step 6 – Creating gallery.html and contact.html by duplicating index.html

In order to create our gallery and contact pages with the exact same layout and same ext

CSS it will be easiest to make copies of the index.html page.

• Make sure the index.html page is still open in DW.

• File>Save As, gallery.html and make sure to save inside a3 folder.

• Repeat step for contact, File>Save As, contact.html

• Open index.html and gallery.html by double clicking on each file listed in the

Files window.

• You should now have all three pages open in Dreamweaver.

• Begin to add unique content to each page.

20

• File>Save All

• Test website File>Preview in Browser>pick a browser

• Make sure the main nav works on all pages and does not shift location from page

to page.

Step 7 – Adding a picture gallery to gallery.html

Next, we want to add a picture gallery to gallery.html with at least 6 thumbnail images

sized approximately 90x68. The thumbnails will link to larger pictures sized 640x480 or

larger. It is recommended that the larger pictures open in a new window using target

_blank. In this example we will also use Photoshop to automate the creation of our two

different sized images, thumb and large.

• We will need six images to use for our gallery. The images should relate to the

content of your website, your hobby or interest.

• Place your six images inside a folder called gallery_images within your a3 folder.

• Images need to be sized 640x480pixels or larger.

• We will use a batch automation within Photoshop in order to automate the

creation of the larger version and our thumbnails.

• Open up Photoshop and then click File>Scripts>Image Processor

• Click on Select Folder and select the gallery_images folder

• Next for the save option Select Folder option and click on Make a New Folder

then type a name like 640.

• For file type select Save as JPEG quality 5 and select the Resize to Fit option and

add W:640px H:480px .

(this represents the max height and/or width for the new picture)

• Click on Run.

• Photoshop will run a batch process creating 6 new images sized max 640x480,

images will be put into a folder called JPEG inside the 640 folder inside the

gallery_images folder.

• Next we want to run the step again in order to create the thumbnails.

• Click File>Scripts>Image Processor

• Click on Select Folder and select the gallery_images folder.

21

• Next for the save option Select Folder option and click on Make a New Folder

then type a name like thumbs.

• For file type select Save as JPEG quality 5 and select the Resize to Fit option and

add W:106px H:80px

• Click on Run.

• Exit Photoshop.

• Navigate to the gallery_images within your a3 folder and verify there are two

new folders. Verify that the images were resized approximate to sizes of 640x480

and 106x80, sizes will not match exactly.

• Photoshop likes to put the images inside a JPEG folder. Recommended you move

images directly into the 640 folder and the thumb folder. If possible move these

two folders into your existing images folder located inside a3. Make sure to keep

the two separate folders called 640 and thumb since the files inside these are

named exactly the same or rename images to desired new name and place in your

existing images folder.

• Return to Dreamweaver and edit gallery.html

• If using the div layout you should be putting the gallery content inside the

main_content div

• Note, you may want to add a table to hold the images in our gallery Insert>Table

• Decide where you want your gallery to appear on the page and then select

Insert>Image and select the first thumbnail inside your thumb images folder

within the a3 folder/gallery_images/thumbs/ or wherever you decided to save

them.

• After inserting, select thumb on the page, make sure you are in the Design view.

Once the thumb is selected on the Properties window find Link and click on the

folder icon (Browse for File).

• Select the larger version of this image within the 640 folder, gallery_images/640/

or wherever you decided to save them.

• The filenames for the thumb and 640 will probably be the same but they are

probably stored in different folders, take care to pick the correct version/size.

• Recommended, under Target select the _blank option.

22

• Adding a Target _blank is not required, however, it is recommended since this

will open a new blank window when someone clicks on the thumb image.

• Repeat steps for the remaining images, you are required to have at least six

thumbs which link to larger versions.

• If you do not see the Target option, located on the 3rd row down, then expand the

Properties window by clicking on the down triangle on the far right side of

window.

Step 8 – Adding borders to thumb images in gallery using a CSS class

Next, we will add a border around each thumb image in our gallery. We will add a border

by creating a class in CSS. A class is a custom style that we define in our CSS that allows

you to apply the custom style as many times on a particular page or pages. Our class will

add a simple border around whatever it is applied to, in our case we will apply the class

to the thumbs.

• Make sure CSS Styles/CSS Designer window is open, if nec. open via Window>

CSS Styles/CSS Designer

• In DW CC click on new rule + under the Selectors section

• Type the name for this style like .thumbBorder

(must include the period at beg of name in order for it to be a class)

• In older versions of DW, in order to add a class click on the New CSS Rule

button, icon with a +.

• Type or select the following:

Selector Type: Class

Selector Name: thumbBorder

(type anyname you want but with no spacing)

Rule Definition: yourfilename.css

(this will display what your ext css is named)

Click Ok

23

• Select Border under Category.

• Recommended settings

Style Solid

Width 5 pixels

Color Black

The Same for all option will automatically be selected for each of these

options, adding the same settings to all sides

• Select Box under Category.

• Add a Margin of 15 pixels to all sides.

• Margin adds space around our border, padding would add space inside of the

border.

• Click on Ok.

• Next we want to apply the class to each of the thumbs.

• Select the first thumb, then on the Properties window for Class select the name of

your class like thumbBorder.

• Repeat same steps for each of your thumbs.

• You can always edit the class by double clicking on the classname listed under all

rules, listed on the CSS Styles panel, make sure you are on the All selection.

• Save and view f12.

Step 9 – Add unique content to each page

• Make sure to add unique content to each page.

• If using the div layout you should be putting most of the content inside the

main_content div

24

Step 10 – Optional Check all your web pages for validation

• Because DW wrote our HTML code you shouldn’t have any validation problems,

at least critical errors

• Next, we can try and validate our pages to see if there are any problems with our

code.

• First, make sure all three pages are open in DW.

• Use DW to check all your pages to see that they properly validate

File> Validate>Markup • Note, if the above step is not available in your version. You can instead use the

following:

http://validator.w3.org/

• Make sure to fix any critical errors.

• You can find the error, shown in the code view, by clicking on the error

displayed.

• When validating it is often difficult to understand the errors since it provides little

explanation. Try and fix as best you can and get help during the lab from the

Instructor.

• Certain errors like table height can be ignored but other errors like forgetting to

close a tag may be critical to having your page display.

• Repeat the validation step for each of the pages.

• You should fix all the critical errors before continuing to the upload step.

25

Step 11 – Upload all pages using Dreamweaver’s built in FTP

• Make sure you have added links on your cmp.html (course management page) to

a3, should link to the index.html page within the a3 folder.

• Save all your pages, File> Save All

• Upload all pages and necessary files (images, CSS file) to your web host using the

put files command (up arrow) in the files window. You can select the a3 folder

and select put. If Files window is closed open via Window> Files.

• Make sure each page was converted to HTML5 and you have validated and fixed

any crucial errors.

• Show to Instructor in lab if there is time for an “official” critique.

• Make sure to send an email with your assignment URL to the Instructor when you

have uploaded and are ready to be graded.

• Make sure you have met the minimum requirements first and then go back and get

fancy if you wish. You can also experiment with adding additional styles to your

CSS file, ask me how.

26

Grading Criteria

All pages

q Use HTML5 use external stylesheet CSS

q body rule and various custom styles using classes

q Partially transparent bg with also a bg color

q Create a page layout using HTML5 semantic tags and use for all 3 pages

q Consistent main graphical navigation

q Picture gallery with 6 thumbnails with a border linking to larger pictures

q Validated and uploaded to your web host account