Using CSS for Site Design

Style Sheets (no video at this time)
NVU Instructions

  1. Create a folder called homework10 under your public_html/comw100 folder
  2. Create two web pages with your own story(s) for this assignment using the directions I have provided below for mine.
  3. Create a new web page in dreamweaver that looks like the following (inside the border):
    My Story

    The Beginning

    My story begins in the small town of Anyville. Anyville is located on the Anyriver in the wonderful state of Any. I spent most of my childhood fishing for freshwater Walleye Shark. My fishing adventures were always quite disappointing because there were no freshwater Walleye Shark in Anyriver or anywhere for that matter. This was probably the biggest disappointment of my adult life.

    My Adult Life

    Since my adventures in fishing did not work out for me, I decided to join the service. The service sure wasn’t what my grandfather told me it was going to be. He said going in the service would allow me to climb up in rank, get respect, and become a man. I’m thinking maybe I joined the wrong service because Clown Service sure didn’t get me any respect. It actually got a pie thrown in my face twice per day.

  4. On the right hand side of your screen, click CSS
  5. Right-click in the grey area and select ‘new’
  6. In ‘name’ text box, enter ‘Title_Style”
  7. Click OK
  8. When prompted to save, save the CSS as “MyStyle.css” and save to your homework10 folder
  9. When prompted
    1. Font: ‘courier ….’
    2. Weight: ‘bold’
    3. Size: ‘large’
    4. Color: ‘green’
  1. Click OK
  2. Click on ALL on the right hand side
  3. Right-click and select ‘New’
  4. In the ‘name’ text box, enter ‘Heading_Style”
  5. Click OK
  6. When prompted
    1. Font: ‘courier ….’
    2. Weight: ‘bold’
    3. Size: ‘medium’
    4. Color: ‘red’
  7. Click OK
  8. Click on ALL on the right hand side
  9. Right-click and select ‘New’
  10. In the ‘name’ text box, enter ‘Body_Style”
  11. Click OK
  12. When prompted
    1. Font: ‘courier ….’
    2. Stylet: ‘italic’
    3. Size: ‘small’
    4. Color: ‘blue’
  13. Click OK
  14. Highlight “My Story”
  15. Select “Title_Style” from the Style combo box
  16. Highlight “The Beginning”
  17. Select “Heading_Style” from the Style combo box
  18. Highlight “My Adult Life”
  19. Select “Heading_Style” from the Style combo box
  20. Highlight the other sections of text
  21. Select “Body_Style” from the Style combo box
  22. Your page should now look like the following:
    My Story

    The Beginning

    My story begins in the small town of Anyville. Anyville is located on the Anyriver in the wonderful state of Any. I spent most of my childhood fishing for freshwater Walleye Shark. My fishing adventures were always quite disappointing because there were no freshwater Walleye Shark in Anyriver or anywhere for that matter. This was probably the biggest disappointment of my adult life.

    My Adult Life

    Since my adventures in fishing did not work out for me, I decided to join the service. The service sure wasn’t what my grandfather told me it was going to be. He said going in the service would allow me to climb up in rank, get respect, and become a man. I’m thinking maybe I joined the wrong service because Clown Service sure didn’t get me any respect. It actually got a pie thrown in my face twice per day.

  23. Save your page as css1.html in your homework10 folder
  24. Create a second web page that looks like the following
    Time For A Family

    It was time for me to leave the service. Congress passed the Clown Bill that enabled me to get a loan to purchase a home. I didn’t want just any home, but I most certanily wanted it to be in Anyville on the Anyriver. I met a gal who wasn’t like any gal I had ever met before. We wed and had two children, Annie and Eny.

  25. Right-click under CSS on your second page
  26. Select ‘Attach Style Sheet’
  27. When prompted, browse for MyStyle.css in your homework10 folder
  28. Highlight “Time For A Family”
  29. Select “Heading_Style” from the Style combo box
  30. Highlight the remainder of your text
  31. Select “Body_Style” from the Style combo box
  32. Save your page as css2.html in your homework10 folder.
  33. Your page should now look like the following
    Time For A Family

    It was time for me to leave the service. Congress passed the Clown Bill that enabled me to get a loan to purchase a home. I didn’t want just any home, but I most certanily wanted it to be in Anyville on the Anyriver. I met a gal who wasn’t like any gal I had ever met before. We wed and had two children, Annie and Eny.

  34. Add links from css1.html to css2.html and css2.html to css1.html.
  35. HERE’S THE FUN PART!!!!!
  36. On the right hand side of your screen, your CSS file should be showing
  37. Click on .Title_Style
  38. In the box below, click ‘Add Property’
  39. Select ‘color’ from the drop down box
  40. Select purple as the color
  41. Take a look at css1.html and see the title
  42. NOW THE EVEN BETTER PART!!!!
  43. On the right hand side of your screen, your CSS file should be showing
  44. Click on .Body_Style
  45. Change the color property to orange
  46. Take a look at css1.html AND css2.html to see the body
  47. CSS enabled you to make changes to both pages with a simple click to the CSS (you can change an entire site this way)
  48. Upload css1.html, css2.html, MyStyle.css to your homework10 folder in your web space
  49. Make sure you link this to your home page

If you are using NVU, you can find information regarding CSS at http://nvudev.com/guide/1.0PR/ugs04.htm

Advertisements

Comments are closed.

%d bloggers like this: