Using CSS for Site Design

March 28, 2010

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


Using Templates for Design

March 28, 2010

Templates (video)

  1. Create a folder called homework9 under your public_html/comw100 folder
  2. Locate a free web template (google: free web templates)
  3. Download a free template that you like to your homework9 folder (these are vague directions because every site is different on this process)
  4. Unzip the file that you downloaded
    1. right-click on the file
    2. select extract all
  5. Click into the folder and open up the main web page (default.html, or index.html)
  6. Modify the page to include your header information, any images that you want changed
  7. Create links to the pages that you haven’t created yet (about me, contact, etc.)
  8. Save your web page
  9. Copy your web page once for each link you created
    1. Name the copies the same as the links you created
  10. Modify each additional web page
  11. Upload this site to your web space
  12. Make sure you update your home page to link to this assignment.

The objectives of this assignment:

  1. Explore free template sites on the Internet and use them as a tool for your own site creation
  2. Modify someone elses site
  3. Use the first page of a site as a template for all additional pages to save on development time

Adding Flash to web pages

March 28, 2010

Flash (video)

  1. Create a folder called homework8 under your public_html/comw100 folder
  2. Copy or save an image into your homework 8 folder
  3. Create a blank web page in your homework8 folder named index.html
  4. Open a web browser and go to: http://www.coffeecup.com
  5. Click on Products & Downloads
  6. Click on Trial Download for Flash Firestarter
  7. Click Download the Trial Version Now!
  8. Click the button that says Click Here to Download
  9. Save the setup.exe file to your computer
  10. Run setup.exe and follow all setup defaults
  11. Start the program on your computer
  12. Set the movie height and the movie width boxes to what you need (consider making this the same as your image size)
    * remember that you should not go larger than 800 x 600 because that is the most common monitor resolution
  13. Click OK
  14. Click the Add New Image button
  15. Select the image you placed in your homework8 folder
  16. Click the T in the toolbar to add some text
  17. Drag the text box to the position that you desire
  18. In the task pane on your right, enter your desired text in the text box
  19. Change the font, size, and/or color as you desire
  20. To animate your image:
    1. Click on the image
    2. Click on Add Special Effect (looks like a wand)
    3. Click on Action Effect
    4. Select an effect that you desire
    5. Click OK
  21. To animate your text:
    1. Click on your text box
    2. Click on Add Special Effect (looks like a wand)
    3. Click on Action Effect
    4. Select an effect that you desire
    5. Click OK
  22. You can move when your animations occur by dragging the purple box on the bottom to the correct location
  23. If you do not want the item (image or text) to appear or after the animation:
    1. Click Add a Blank Space
    2. Drag it to where you want it
    3. You can expand this space to suit your needs by moving your mouse to the right or left edge of it and drag it to the desired size
  24. Click File
  25. Click Save Fire Project
  26. Save it to your homework8 folder
  27. The program will now give you the HTML code needed to make it operate on a web page
  28. Copy the code
  29. Paste it to the desired area (in code) on the web page you created in Dreamweaver
  30. Save your page (public_html/comw100/homework8/index.html).
  31. Test your web page in a browser (it may give you a yellow bar to accept the control with when running locally)
  32. Upload this page to your web space
  33. Make sure you update your home page to link to this assignment.

NOTE: What you just did is create a Flash file using CoffeeCup Firestarter. This program runs nothing like the true Flash program. It is merely a tool that you can use to create quick and easy animations for items such as logos.


Meta Tags

March 28, 2010

Meta Tags (video)

  1. Create new basic HTML page in Dreamweaver
  2. Click the align center button
  3. Type ‘Things To See In Michigan’
    ***********The topic of this page is up to you. Michigan is our example ***********
  4. Highlight the previous line and make it bold
  5. Hit Enter
  6. Type Return Home
  7. Highlight Return Home
  8. Click the link icon
  9. Select index.html (public_html/comw100/index.html)
  10. Click OK
  11. Insert a horizontal rule (insert, html, horizontal rule)
  12. Insert an image of something in Michigan (click insert, image, select your image location)
    ** make sure you place the images in the same folder as your homework assignment prior to linking them
  13. Save your page as metatags1.html
  14. Click on Code View to see your HTML code
  15. Create a blank line above the <title> tag
  16. Type <meta http-equiv=”refresh” content=”3; url=metatags2.html” />
  17. Save your page again
  18. Close Dreamweaver
  19. Using Windows Explorer, copy your metatags1.html page twice
    1. Name the first copy metatags2.html
    2. Name the second copy metatags3.html
  20. Using Dreamweaver, open metatags2.html
  21. Change the image to something different
  22. Click on Code View to see your HTML code
  23. Change the tag that you entered on your other page to open a different page (metatags3.html) <meta http-equiv=”refresh” content=”3; url=metatags3.html” />
  24. Using Dreamweaver, open metatags3.html
  25. Change the image to something different
  26. Click on Code View to see your HTML code
  27. Change the tag that you entered on your other page to open a different page (metatags1.html) <meta http-equiv=”refresh” content=”3; url=metatags1.html” />
  28. Save All pages
  29. Upload pages to your webspace
  30. Link this assignment to your home page

Create Websites with Frames

March 28, 2010

Create Websites With Frames (video)

Alternative instructions for NVU | Change MainFrame page to an existing page or site

  1. Open Dreamweaver
  2. Click ‘File’
  3. Click ‘New’
  4. Click ‘Page From Sample’ on the left hand side
  5. Click ‘Frameset’ from the center
  6. Click ‘Fixed top, Nested left’ on the right
  7. Click ‘Create’
  8. Click ‘OK’
  9. Click ‘File’
  10. Click ‘Save All’
  11. Create a new folder called ‘homework6’
  12. Save the frameset as index.html
  13. Save the main body as home.html
  14. Save the left bar as navigation.html
  15. Save the top as header.html
    *************I WILL CREATE THIS PAGE FOR DETROIT MICHIGAN**************
    ********************you can create this page for whatever you like********************
  16. In the header:
    1. Type ‘Welcome to Detroit’
    2. Center the header
    3. Change the font to x-large
    4. In page properties, change the page background to dark grey
    5. Change the font color to white
  17. In the left hand navigation bar:
    1. Type ‘Home’
    2. Hit enter
    3. Type ‘Things To See’
    4. Hit enter
    5. Type ‘Places To Stay’
    6. Highlight the three lines of text and select ‘B’ for bold
    7. In page properties, change the page background to dark grey
    8. In page properties, click ‘Links’ on the left hand side
    9. Change links, visited links, rollover links, and active links colors to white
    10. Highlight ‘Home’ and make it a hyperlink to home.html
      1. Under target select ‘main frame
    11. Highlight ‘Things To See’ and make it a hyperlink to see.html (this page hasn’t been created yet)
      1. Under target select ‘main frame’
    12. Highlight ‘Places To Stay’ and make it a link to stay.html (this page hasn’t been created yet)
      1. Under target select ‘main frame’
  18. Drag the verticle frame line to the right by left clicking on it and pulling it to the right. Do this until all text is visible on one line (per item).
  19. Add some text and images to the main frame (home.html)
  20. Add the Things To See page
    1. Click ‘File’
    2. Click ‘New’
    3. Click ‘Blank Page’
    4. Click ‘HTML’
    5. Click ‘Create’
    6. Add some content to the page, but no links!
    7. Save the page as see.html
  21. Add the Places To Stay page
    1. Click ‘File’
    2. Click ‘New’
    3. Click ‘Blank Page’
    4. Click ‘HTML’
    5. Click ‘Create’
    6. Add some content to the page, but no links!
    7. Save the page as stay.html
  22. Click ‘Save All’
  23. Open index.html and view it in your browser. All secondary pages (home.html, see.html, and stay.html) should appear in the main body portion of your page with the header and navigation bar displayed as well.
  24. Create a link to homework6/index.html from your homework page (comw100/index.html).
  25. Upload your homework6 folder and your index.html file to your web space.

Remember that you can create this on any topic that you desire and design it (colors, fonts, pictures) any way you wish.


Create Pages Using Tables

March 28, 2010

Create Pages Using Tables (video)

  1. Open Dreamweaver
  2. Click ‘File’
  3. Click ‘New HTML’
  4. Click the center align button
  5. Click the table button
    1. Enter 3 rows
    2. Enter 1 column
    3. Enter 700 pixels (not percent)
    4. Click ‘OK’
  6. Go to row two
    1. Right-click
    2. Select ‘Table’
    3. Select ‘Split Cell’
    4. Enter 3 for cells
    5. Select ‘Columns’
    6. Click ‘OK’
  7. In row 2, column 1, type Home
  8. Hit enter
  9. type Admissions
  10. type Athletics
  11. In row 2, column 2, type “Mott Community College is the leading educational institution in Genesee County for high school graduates and returning students.”
  12. From Mott’s website, locate a logo image and three images for your other pages
  13. Save the images to a new folder called ‘homework5’ that is in your ‘public_html/comw100’ folders
  14. Save your page as index.html to the homework5 folder
  15. Insert the Mott logo in cell 1
    1. Click the image button on your toolbar
    2. Select the image
    3. Left-align the image if it isn’t already
  16. Highlight ‘Home’
  17. Click hyperlink from the toolbar
  18. Select index.html (the page you are working on)
  19. Highlight ‘Admissions’
  20. Click hyperlink from the toolbar
  21. Type ‘admissions.html’ (do not get creative here as we will reference this again!)
  22. Highlight ‘Athletics’
  23. Click hyperlink from the toolbar
  24. Type ‘athletics.html’ (do not get creative here as we will reference this again!)
  25. Insert your home page image on row 2, column 3
    1. Click the image button on your toolbar
    2. Select the image
    3. Right-align the image
  26. Using your mouse, drag column 1 until it is 135 pixels wide
  27. Change the background color of your page
    1. Click ‘Page Properties’
    2. Select the background color of your choice
  28. Change the background color of your table
    1. Click on <table> below your content area
    2. Select the background color of your choice
  29. Save your page again
  30. Save your page as ‘athletics.html’ (do not get creative here!)
  31. Save your page as ‘admissions.html’ (do not get creative here!)
  32. Change the image in row 2, column 3 on the two new pages
  33. Change the content in row 2, column 2 on the two new pages
  34. Save each page
  35. Copy your homework5 folder to your web space
  36. Link your assignment from your homework page.

You now have created a page using tables. The first page became your template and the additional pages were very simple changes. You are encouraged to change the content and images to something that interests you.


Adding images, sound, and motion to web pages

March 28, 2010

Sight, Sound, and Motion! (video)

  1. Find and download a sound file from the internet (free files only!). This can be .mp3, .wav, or any other type you desire
  2. Locate a video file of your choice on YouTube.com and copy the HTML code that they provide to you
  3. Create a new basic HTML page in Dreamweaver
  4. Click align center
  5. Type ‘Sight, Sound, and Motion!’
  6. Highlight the text
  7. Click “B” for bold
  8. Click align left
  9. Type ‘Sight’
  10. Hit enter
  11. Add a bullet
  12. Type ‘Animaniacs’ (preferrably something of your choice – band, cartoon, children)
  13. Hit enter
  14. Type ‘Pinky and the Brain’ (preferrably something of your choice – band, cartoon, children)
  15. Hit enter twice
  16. Type ‘Sound’
  17. Hit enter
  18. Add a bullet
  19. Type ‘Homer Simpson’ (something to match your sound file)
  20. Hit enter twice
  21. Type ‘Motion’
  22. Highlight ‘Sight’ click ‘B’ to make it bold and ‘I’ to make it italicized
  23. Highlight ‘Sound’ click ‘B’ to make it bold and ‘I’ to make it italicized
  24. Highlight ‘Motion’ click ‘B’ to make it bold and ‘I’ to make it italicized
  25. At the bottom of the page, click align center
  26. Type ‘Return Home’
  27. Save this file
    1. Click save
    2. Create a new folder called homework4 within your public_html/comw100 folder
    3. save this file as index.html in the public_html/comw100/homework4 folder
  28. Highlight return home
  29. Click the link in the toolbar
  30. Select the yellow folder
  31. Select your homework page (public_html/comw100/index.html)
  32. Create a new basic HTML page
  33. Click align center
  34. Type ‘Animaniacs’ or what you selected
  35. Insert a table that is 2 rows and 2 columns in size
  36. Save this page as animaniacs.html (or what you selected) in the public_html/comw100/homework4 folder
  37. At the top of your page below ‘Animaniacs’ type ‘Return Home’
  38. Highlight the text
  39. Click the link in the toolbar
  40. Select your homework 4 page (public_html/comw100/homework4/index.html)
  41. Insert images into each of the four cells
    1. You must first find four images of whatever topic you selected for this page and save them to the public_html/comw100/homework4 folder
    2. In cell one
    3. Click the image button in your toolbar
    4. Select an image of your choice
    5. Repeat steps 3 & 4 for each of your images
  42. Click save
  43. Repeat steps 30 – 40 for your second topic
  44. On the homework 4 page (public_html/comw100/homework4/index.html), create links to the two pages you just created
  45. Copy the sound file you located earlier to your homework4 folder (public_html/comw100/homework4)
  46. Highlight ‘Homer Simpson’ (or what you selected) under sound
  47. Click the link button in the toolbar
  48. Select your sound file
  49. Click ok
  50. Place your cursor below the text that says ‘Motion’
  51. Click ‘Split’
  52. Copy the code given to you by YouTube.com and paste it to the top pane (HTML code) of your winow
  53. Save your homework 4 page
  54. test your page in Internet Explorer
  55. Open the homework page (public_html/comw100/index.html)
  56. Highlight ‘Homework #4’
  57. Click the chain or link in the toolbar
  58. Select your homework 4 page by clicking the yellow folder (page is public_html/comw100/homework4/index.html)
  59. Click save
  60. Upload the following files to your web space
    1. public_html/comw100/index.html (because you changed this file)
    2. public_html/comw100/homework4 (new folder including all contents)