Date post: | 31-Dec-2015 |
Category: |
Documents |
Upload: | basil-harper |
View: | 222 times |
Download: | 1 times |
Web Page Development:Part II
Web Page Development:Part II
Heather [email protected]
(801) 581-6414
Heather [email protected]
(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.