Web Page Development: Part II Heather Rasmussen rasmussen@biology.utah.edu (801) 581-6414 Heather...

Web Page Development:Part II

Web Page Development:Part II

Heather Rasmussenrasmussen@biology.utah.edu

(801) 581-6414

Heather Rasmussenrasmussen@biology.utah.edu

(801) 581-6414

Quick ReviewQuick Review

• Building the package– Folder on Desktop titled “yourunid_Plants”

• Inside folder are three additional folders– “art”– “documents”– “images”

• “plants.css” file

• Building the package– Folder on Desktop titled “yourunid_Plants”

• Inside folder are three additional folders– “art”– “documents”– “images”

• “plants.css” file

Today’s Project: .htmlToday’s Project: .html

• Requirements– Content for each page

• Text with citations• Images with citations• Art• Other Documents

– Journal Articles in PDF

– Your prepared “package”

• Requirements– Content for each page

• Text with citations• Images with citations• Art• Other Documents

– Journal Articles in PDF

– Your prepared “package”

Page OrganizationPage Organization

• Page Elements– The Body Background– The Table– Header– Text– Images– Documents/Links

• Page Elements– The Body Background– The Table– Header– Text– Images– Documents/Links

The Body BackgroundThe Body Background

T

H

E

T

A

B

L

E

T

H

E

T

A

B

L

ETextText

HeaderHeader

ImagesImages

DocumentsDocuments

Building the .htmlBuilding the .html

• Open Dreamweaver CS5• From “File” click on “New”• Select Page Type “HTML” with a Layout

of “<none>”.• Save to the folder on your desktop titled

“yourunid_Plants”– Name file according to plant.

• Example: h_uniflora.html

• Open Dreamweaver CS5• From “File” click on “New”• Select Page Type “HTML” with a Layout

of “<none>”.• Save to the folder on your desktop titled

“yourunid_Plants”– Name file according to plant.

• Example: h_uniflora.html

Formatting the .htmlFormatting the .html

• Go to Format and select CSS Styles– “Attach Style Sheet…”

• Browse (find your plant.css file)– “Add as Link”

• If you had chosen a background, you should now be able to see the body background from the “Design” view.

• Go to Format and select CSS Styles– “Attach Style Sheet…”

• Browse (find your plant.css file)– “Add as Link”

• If you had chosen a background, you should now be able to see the body background from the “Design” view.

Row

Row

Row

Column

Home

Education

Experience

Accomplishments

Publications

Images

Contacts

Heather RasmussenHeather Rasmussen

Basic

Table

Layout

1000 px

The height will occur naturally as we add cells and content.

You can set the height if you are concerned about printing or viewing issues related to scrolling.

2 Columns Wide

3 Row

s Deep

Individual

Cells

Cellpadding:

The space between the content in a cell and the cell wall.

Cellspacing:

The space between cells and the table wall.

Merging Cells:

Here we will merge the two top cells together to form one cell that is one row deep and two columns wide.

This will be for our header.

Repeat this step for the footer.

2 Column Wide

1 Row Deep Cell

2 Column Wide

1 Row Deep Cell

1 Column Wide

1 Row Deep Cell

1 Column Wide

1 Row Deep Cell

1024 px

Heather RasmussenHeather Rasmussen

Mywebsite.com - Webmaster - 2010

Defined Spaces

Undefined Spaces:

Take up remaining space evenly.

Heather RasmussenHeather Rasmussen

Mywebsite.com - Webmaster - 2010

Home

Education

Experience

Accomplishments

Publications

Images

Contacts

My MusicGrowing up in the 1980s meant listening to Duran Duran, Madonna, and Tears for Fears.

I still love 80s music, which is a style coming back in artists like Adam Lambert.

Empty Spaces:

You may have spaces that are empty toward the bottom of your cells.

This is okay.

Heather RasmussenHeather Rasmussen

Mywebsite.com - Webmaster - 2010

Home

Education

Experience

Accomplishments

Publications

Images

Contacts

My MusicGrowing up in the 1980s meant listening to Duran Duran, Madonna, and Tears for Fears.

I still love 80s music, which is a style coming back in artists like Adam Lambert.

Creating a TableCreating a Table

• Once you have chosen your table layout, go to Insert and select “Table”

• Select your number of Rows and Columns.• Table Width = 1000 pixels• Border Thickness = 0• Cell Padding = 10• Cell Spacing = 10• Header = None• Click “OK”

• Once you have chosen your table layout, go to Insert and select “Table”

• Select your number of Rows and Columns.• Table Width = 1000 pixels• Border Thickness = 0• Cell Padding = 10• Cell Spacing = 10• Header = None• Click “OK”

Formatting your TableFormatting your Table

• Select areas to merge by dragging your mouse through them.– Select all of your top row to merge for your

header.• Once selected, go to Modify, Table, and select

“Merge Cells”• Repeat for any other cells you wish to merge.

This may also include your footer area where you will include your assignment information.

• Select areas to merge by dragging your mouse through them.– Select all of your top row to merge for your

header.• Once selected, go to Modify, Table, and select

“Merge Cells”• Repeat for any other cells you wish to merge.

This may also include your footer area where you will include your assignment information.

Adding ContentAdding Content

• Select your header cell by clicking inside of it.– Go to Insert, then select “Image”

• You will need to find your image in the Finder Window.– Click on it and say “OK”

• You may continue to add content in a similar fashion.– For text, click in the cell you wish and a

“Properties” box will appear on your screen. This allows you to choose the text formatting for that cell only.

• Select your header cell by clicking inside of it.– Go to Insert, then select “Image”

• You will need to find your image in the Finder Window.– Click on it and say “OK”

• You may continue to add content in a similar fashion.– For text, click in the cell you wish and a

“Properties” box will appear on your screen. This allows you to choose the text formatting for that cell only.

Adding a LinkAdding a Link

• Once you have completed entering all of your content for the page, you can go back and add all of your links to both internal pages or documents as well as external links (to the Internet).– Highlight the text or image you wish to

become the clickable link.• A “Properties” box will appear for that text or

image and allow you to enter a url.

• Once you have completed entering all of your content for the page, you can go back and add all of your links to both internal pages or documents as well as external links (to the Internet).– Highlight the text or image you wish to

become the clickable link.• A “Properties” box will appear for that text or

image and allow you to enter a url.

Submitting your workSubmitting your work

• You will need to submit the entire package.• You should be able to do this via WebCT.• You will need to submit the whole package

altogether, not broken into pieces.• We will know you turned it in by the name of

the folder (yourunid_Plants), and the plants you chose and signed up for.

• The pages will begin to be accessible from the class website as they are turned in.

• You will need to submit the entire package.• You should be able to do this via WebCT.• You will need to submit the whole package

altogether, not broken into pieces.• We will know you turned it in by the name of

the folder (yourunid_Plants), and the plants you chose and signed up for.

• The pages will begin to be accessible from the class website as they are turned in.