1. Web Page Development I Heather Rasmussen heather.rasmussen@utah.edu (801) 581-6414 Heather Rasmussen heather.rasmussen@utah.edu (801) 581-6414

2. Getting Started Components Package Aesthetics Research Project Components Package Aesthetics Research Project

3. Understanding the Components Folders Images Art Links Files Folders Images Art Links Files

4. Building the Package On the desktop –Yourunid_Plants (example: 00145761_Plants) –“art” –“documents” –“images” On the desktop –Yourunid_Plants (example: 00145761_Plants) –“art” –“documents” –“images”

5. Building the Package Place your created web art (the.ai and.jpg or.gif files on your desktop) into the “art” folder. Place the “art”, “documents”, and “images” folders into your unid_Plants folder. This is the beginning of the package. Place your created web art (the.ai and.jpg or.gif files on your desktop) into the “art” folder. Place the “art”, “documents”, and “images” folders into your unid_Plants folder. This is the beginning of the package.

6. Thinking Aesthetics High quality images Background Header Layout –Pieces of a puzzle High quality images Background Header Layout –Pieces of a puzzle

7. Performing Research Web Pages v. Research Papers –Citations (at least four links to external sites) –Images –Maps –Text Use multiple types of resources - including images you create. Web Pages v. Research Papers –Citations (at least four links to external sites) –Images –Maps –Text Use multiple types of resources - including images you create.

8. Today’s Project Developing a Cascading Style Sheet –.css These can be developed in two ways –Internally (within the.html page code) –Externally (as an independent document) We will be developing an external.css that will be used for your site. Developing a Cascading Style Sheet –.css These can be developed in two ways –Internally (within the.html page code) –Externally (as an independent document) We will be developing an external.css that will be used for your site.

9. Cascading Style Sheet Open Dreamweaver CS5 Select from the File menu “New” Under Page Layout, select “CSS” –The Layout should be blank. Save your new.css file. –Name the file plants.css –Save to your unid_Plants folder. Open Dreamweaver CS5 Select from the File menu “New” Under Page Layout, select “CSS” –The Layout should be blank. Save your new.css file. –Name the file plants.css –Save to your unid_Plants folder.

10. Cascading Style Sheet The file should be opened using the “Code” option toward the top of your screen. Beginning on line 4, we will enter the formatting preferences for our web pages. The file should be opened using the “Code” option toward the top of your screen. Beginning on line 4, we will enter the formatting preferences for our web pages.

11. We want all of our web pages to have a similar look and feel. Let’s start by declaring what we want to be different from the default. links body headers font table We want all of our web pages to have a similar look and feel. Let’s start by declaring what we want to be different from the default. links body headers font table

14. Cascading Style Sheet About.css a = links or anchors body = the entire background of the web page h1, h2, h3 = headers of different sizes font = all text, when requested table = the visual body of the web page About.css a = links or anchors body = the entire background of the web page h1, h2, h3 = headers of different sizes font = all text, when requested table = the visual body of the web page

15. Cascading Style Sheets a {color:#60; text-decoration:none} body {background-image:url(art/plant_bg.jpg)} h1 {color:#900} h2 {color:#900} h3 {color:#900} font {font-family:”Comic Sans MS”, cursive} table {background-color:#FFF} a {color:#60; text-decoration:none} body {background-image:url(art/plant_bg.jpg)} h1 {color:#900} h2 {color:#900} h3 {color:#900} font {font-family:”Comic Sans MS”, cursive} table {background-color:#FFF}

16. Cascading Style Sheets Save your plants.css file –You will not see the effects of the style sheet until you create your.html files and link these two documents together. Save your plants.css file –You will not see the effects of the style sheet until you create your.html files and link these two documents together.

17. From here… You are free to use the rest of the time to work on your projects. –Research –Designing background imagery and headers Next Week –Linking your plants.css to your.html files. –Designing and developing your web pages. –Continuing to work on your projects as needed. You are free to use the rest of the time to work on your projects. –Research –Designing background imagery and headers Next Week –Linking your plants.css to your.html files. –Designing and developing your web pages. –Continuing to work on your projects as needed.