Web Page Development: Part II Heather Rasmussen (801) Heather Rasmussen (801)

Quick 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:.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 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 Background THETABLETHETABLE THETABLETHETABLE Text Header Images Documents

Building the.html Open Dreamweaver CS5 From “File” click on “New” Select Page Type “HTML” with a Layout of “ ”. 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 “ ”. Save to the folder on your desktop titled “yourunid_Plants” –Name file according to plant. Example: h_uniflora.html

Formatting 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 Column

Home Education Experience Accomplishments Publications Images Contacts Heather 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 Rows 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 Rasmussen Mywebsite.com - Webmaster Defined Spaces Undefined Spaces: Take up remaining space evenly.

Heather Rasmussen Mywebsite.com - Webmaster Home Education Experience Accomplishments Publications Images Contacts My Music Growing 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 Rasmussen Mywebsite.com - Webmaster Home Education Experience Accomplishments Publications Images Contacts My Music Growing 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 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 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 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 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 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.