Assignments

CIS 58.62C Dreamweaver Homework Assignments

Week One Homework Assignment- Setting Up (due January 22)

  1. Purchase textbook- Dreamweaver CS4 with CSS, Ajax, and PHP by David Powers, Friends of Ed, ISBN: 978-1430216100
  2. Install the following browsers and plug-ins on your computer at home:
    1. Web Browsers installed on your home computer:
      1. Firefox 2 or later (PC and Mac)
      2. Internet Explorer 6 or later (PC only
      3. Safari (Mac, PC optional)
    2. Firefox Add-ons (click on the links below to install into Firefox):
      1. Web Developer Toolbar
      2. Measureit
      3. Firebug
    3. Complete ALL the “Getting Started” steps on my homepage http://www.santarosa.edu/~jdiamond/index.php
    4. Complete the class-check-in procedures
    5. Read chapters 1 and 2 (pp.1-100)
    6. Read the article Setting Up a Student Account and create an account on student.santarosa.edu
    7. Read the article Defining your site in Dreamweaver
      OPTIONAL -- Watch Setting up an Account and Defining a Site (38 MB)
    8. Look at the homework one example page
    9. Create index.htm with the following links:
      • hw2.htm hw3.htm hw4.htm hw5.htm
        hw6.htm hw7.htm hw8.htm hw9.htm
        hw10.htm hw11.htm hw12.htm hw13.htm
        hw14.htm hw15.htm    
        Note: This differs with the original printed syllabus but makes more sense so please update your page names and links to match those listed in the table above.
    10. Upload your index.html page to your web site
    11. Insert a link to the student homework links page here

Week Two Homework Assignment- Creating a Web Page and Adding Content (due January 29)

  1. Read chapter 3 and complete all the exercises (pp.103-154)
  2. Watch the video on Smart Objects
  3. Look at the homework two example page and style your homework in a similar fashion
  4. Within this page include the following:
    1. A sentence describing yourself to the class
    2. An ordered list describing three new document options associated with the "File> New" menu item
    3. One definition list defining Photoshop Smart Objects within a blockquote tag
    4. One paragraph describing the recent changes related to inserting Flash movies on to web pages
    5. One paragraph describing how tables should be used in html pages.
    6. An image that has an image map with links to three different Dreamweaver tutorials (must contain alt text and title text attribute values)
  5. Upload your assignment as hw2.html. Do not send me email links. I will check all assignments from your index.html page
    Note: Do not style this page with CSS. We will save that for future assignment

Week Three Homework Assignment- Adding a Touch of Style (due February 5)

  1. Download the book files , unzip and place the folder inside of your Dreamweaver C site on your LOCAL machine.
  2. Look at the homework three example page and style your homework in a similar fashion
  3. Read and complete all exercises in chapter 4 (pp.155-194). Work with the file stroll.html (p.158) as your start file and answer ALL of the questions listed below. You can style the page with your own color scheme.
  4. How do you open the CSS Styles Panel?
  5. Provide definitions for three types of CSS selectors within defintion lists.
  6. Describe two different ways you can view Properties in the CSS Styles Panel.
  7. Provide a definition for Device Central within a definition list.
  8. Compare All and Current Modes
    1. Describe the two modes.
    2. Which is more powerful and why?
    3. Which is more complex and why?
  9. Describe two ways to move style rules
  10. Upload your assignment as hw3.html

Week Four Homework Assignment- Creating CSS Straight out of the Box (due February 19)

  1. Look at the homework four example page and style your homework in a similar fashion
  2. Read chapter 5 (pp.194-230) and complete all exercises.
  3. Read the article here and answer the questions below.
    1. Define four CSS layouts available from the New Document window
    2. Dreamweaver CSS Layouts have been tested and correctly in which browsers (name four)?
    3. How many different "Page from Samples" choices does Dreamweaver offer including Basic and Theme?
    4. Describe three aspect of the Find and Replace feature that make it useful.
  4. Upload your assignment as hw4.html

Week Five Homework Assignment- Working with Spry Objects (due February 26)

  1. Look at the homework five example page and style your homeworky in a similar fashion
  2. Read chapter 6 and complete all exercises (pp.233-254)
  3. Part One of this homework
    1. Create a blank html document (p.235)
    2. Complete the building of a Spry Menu bar like the one above.
    3. Upload the html page and necessary .js files to your server.
  4. Part two of this homework
    1. Read the article we will study for this assignment
    2. Build the spry sliding panel
    3. Save it as spryslidingpanels.html
    4. Upload the html, css, and js file
    5. Link your homework 5 to your spry sliding panel
  5. Sidebar Question- How do you remove a Spry Menu bar?
  6. Sidebar Blockquote- The Spry Menu bar is built with ___________ and ________.
  7. Upload your assignment as hw5.html

Week Six Homework Assignment- Using Spry Dynamic Effects and Components (due March 5)

  1. Look at the homework six example page and style your homework in a similar fashion
  2. Read chapter 7 and complete all exercises (pp.257- 305) Note: Exercises on pages 263- 273 deal with Spry Effects which you can do for extra credit (see homework examples page instructions)
  3. Add ALL three types of Spry panels to one page by beginning with step 1 from page 278.
  4. Add tooltips to two images that appear on your page.
  5. Upload all the necessary .js, .css files and hw6.html

Spring Break March 8-March 15 No Classes

Week Seven Homework Assignment- Going Beyond the Basics with Spry and AJAX (due March 19)

  1. Read chapter 8 (pp.308-369) and complete all exercises. Note: Completing these exercises first will make the steps below much easier to understand and complete. In addition, this chapter will be the basis of half of the questions on the midterm quiz due March 26.
  2. Thoroughly examine the homework seven examples page. All remaining instructions here are duplicated on that page.
  3. Create a Tabbed Panel set with the same tab names as the one below and answer the questions in the External Links tab.
  4. Select the fourth panel in the Property Inspector to be the Default Panel.
  5. Follow the steps on pages 337-8 and assume homework seven page as the "target page"
  6. Create a link from your original INDEX page that links to homework seven and targets the first tabbed panel below. Note: You will need to follow steps 1-7 on pages 339-340.
  7. Create a jQuery that shows and hides all the classes you have taken this semester vs. a list of five classes you have taken in past semesters and place that information into the second tabbed panel. Note: This will require you to complete pages 346-350 and link to the necessary spry files into the homework seven head
  8. In tab three use the jQuery dialog widget to view a larger version of an image on your page when you rollover the thumbnail. Note: You will need to have downloaded all the jQuery extensions here, reviewed the use of these widgets on page 358, and complete all the steps from page 360-365.
  9. If you cannot figure out where the necessary jQuery files are after you have installed the extension do the following:
    1. Create a new blank HTMl page
    2. Click on the jQuery dialog icon from the JQuery UI tab of the Insert panel
    3. Save the page as test.html
    4. This will copy all the necessary files to a folder at the root of your defined site
    5. You can now discard this test page. It has served its purpose.
  10. Upload all the necessary .js, .css files and hw7.html

Week Eight Homework Assignment- Building Online Forms and Validating Input (due March 26)

  1. Look at the homework eight example page and style your homework in a similar fashion
  2. Read chapter 9 (pp.372-422) and complete all exercises
  3. Select your homework 7 file strip out the tabbed panels and all associated Jquery and Spry js and css files
  4. Save it as hw8.php
  5. Create a form that incorporates all of the material from chapter 9
  6. Add Spry validators to all:
    1. text fields
    2. text areas
    3. checkboxes
    4. select fields (Note: You cannot apply to the multiple selection list/menu item)
  7. Add the php code from step 2 of page 384
  8. Test your form. when you click the submit button you should see the php data posted to the bottom of your page
  9. Upload all the necessary .css, .js and hw8.html files
  10. Complete online midterm (open March 19-26)

Week Nine Homework Assignment- Introducing the Basics of PHP (due April 2)

  1. Launch a secure shell telnet session. See image to the right as an example.telnet
  2. Connect and log into your account on the student.santarosa.edu server
  3. Type sudo sqlme
  4. Either write down or make a screen capture of all the passwords that are generated from this command. Note: You can recover this from your student email.
  5. Adjust your Dreamweaver Site Definition Testing Server category
    1. In Dreamweaver select Site> Manage Sites> Testing Server Cateogry
    2. In the Server model text field select PHP MySQL from the drop down menu
    3. In the Access field choose FTP from the pull down menu. All of the fields will be filled in as per your settings in the Remote Info category.
    4. In the URL prefix text field change the settings to http://student.santarosa.edu/~yourusername/yourpathfordreamweaverc/
    5. Select Test. You should get a message that states “Connection was made successfully.”
    6. Click OK and then click Done.
  6. Create A Database Connection
    1. Make sure any file within your site is open and the Database tab of the Applications panel is open (Select Window> Database)
    2. Click on the + sign and select MySQL Connection
    3. In the MySQL Connection dialog box fill out the fields as per the image below. Make sure to use the “yourusername_admin” password that was generated when you used the sudo sqlme command. You can recover this from your email.mysql
    4. Select Test. You should get a message that states “Connection was made successfully.”
  7. Look at the homework nine example page and style your homework in a similar fashion
  8. Read chapter 10 (pp.424-457) and complete all exercises
  9. Save and upload hw9.php

Week Ten Homework Assignment- Using PHP to Process a Form (due April 9)

  1. Read chapter 11 (pp.460-501) and complete all exercises
  2. Look at the homework ten example page and style your homework in a similar fashion making sure to complete the steps below.
  3. Identify and explain three different techniques the authors discusses that are used to block submissions of forms by Spam Bots.
  4. Test your form to make sure that it receives the email you send and that it meets these criteria that are exemplified in chapter 11:
    1. Preserves the user input when the form is incomplete
    2. Blocks email that contains phrases mentioned in step 2, page 487
    3. Has a working alert for the checkbox group where two items are required (step 6, page 494)
  5. Save and upload hw10.php

Week Eleven Homework Assignment- Reduce your workload with PHP Includes (due April 16)

  1. Read chapter 12 (pp.503-536) and complete all exercises
  2. Look at the homework eleven example page and follow the instructions for the specifics of this assignment
  3. Save and upload hw11.php and all the supporting include files

Week Twelve Homework Assignment- InContext Editing and Collecting Form Data (due April 23)

  1. Read chapter 13 (pp.540-580) and complete all exercises
  2. Watch the instructional video here that shows how to complete the assignment then complete the steps below.
  3. Practice InContext Editing in this simulation
  4. Sign Up for InContext Editing. Note: You need to create an account on the Adobe website if you do not have one already. This is free and will allow you to use InContext editing on as many sites as you want.
  5. Examine the homework twelve example pages
  6. Right-click on this feedback sql table, and save link as feedback.sql it to your desktop.
  7. Go to http://student.santarosa.edu/phpmyadmin/ and then upload feedback.sql to your database.
  8. Select feedback_spry_start.php from the chapter 9 folder in the examples folder of the textbook files and save it as hw12.php. This contains all the fields you will use to connect to your database table and later on pull into a Master page that will display all the entries made into your form.
  9. Modify the feedback form so it submits data to the feedback table you just uploaded to your database. Make sure to copy the code below and paste it into line 2 of your feedback form.

    <?php
    // if form has been submitted, convert $_POST subarrays to strings
    if (array_key_exists('send', $_POST)) {
    if (isset($_POST['interests'])) {
    $_POST['interests'] = implode(',', $_POST['interests']);
    }
    else {
    $_POST['interests'] = '';
    }
    if (isset($_POST['views'])) {
    $_POST['views'] = implode(',', $_POST['views']);
    }
    else {
    $_POST['views'] = '';
    }
    }
    ?>

  10. Create a Master page that collects all the records in the feedback table. Save it as hw12a.php
  11. Create a Detail page that filters the records based on the hyperlinked name message_id value passed to it from the master page. Save it as hw12b.php
  12. Create an editiable region in your hw12.php page which will allow for the use of InContext Editing Tools.
  13. Upload all the necessary pages including the entire ice directory to your website
  14. Upload the homework 12 files (12.php, 12a.php, 12b.php)

Week Thirteen Homework Assignment- Storing User Records in a Database (due April 30)

  1. Read chapter 14 (pp.584-635) and complete all exercises
  2. Examine homework thirteen example pages
  3. Make sure to apply CSS styles to all the pages within this assignment
  4. Upload the homework 13 files (13.php, 13a.php, 13b.php, and 13c.php)

Week Fourteen Homework Assignment- Validating Database Input and User Authentication (due May 7)

  1. Look at the homework fourteen example pages
  2. Read chapter 15 (pp.638-681) and complete all exercises
  3. Upload all the hw14 files

Week Fifteen Homework Assignment- Using XSLT to Display Live News Feeds and XML (due May 14)

  1. Look at the homework fifteen example page and style your homework in a similar fashion
  2. Read chapter 18 (pp.806-841) and complete all exercises
  3. Upload hw15.php

Week Sixteen Homework Assignment- Using Spry Datasets to Refresh Content (due May 21)

  1. Two part OPTIONAL EXTRA CREDIT assignment (5 extra credit points)
    1. Based on chapter 19 pp.870-878, create a Filtered Spry Gallery using your own image sets (minimum two sets of 6 images and save page as homework_ec1.php.
    2. Based on chapter 19 pp.879-886, create a Spry XML data set. You can reuse one set of your images from the first part of this assignment and save page as homework_ec2.php. Note: this page must validate based on the techniques used on pp.884-886.
    3. Upload and link these two pages to your index page.
  2. Review chapters 10-18 and complete online quiz
  3. Complete MTM Evaluation
  4. Bring a snack for our potluck.