Assignment Web Site Creation-Expression Web 4

Summary of steps
Common Problems
Sample HomePage


Before you begin:

For this project you must have Expression Studio 4 installed on your computer.
It is available at no charge.
You will use Expression Web 4 (EW4) to build your web site.
It is a component of Expression Studio 4
Expression Studio

To access your website files you must be logged onto the WSU network.
From off-campus you must first establish a VPN connection.
Note: Proficiency with web editing software is a valuable skill.
Feel free to make use of the Atomic Learning tutorials or the W3Schools web site to improve your web design skills.

Grading criteria:

This assignment is worth 100 points, and is graded based on the following criteria.
Grading is done only once, there is no awarding of points past the due date.
You are expected and required to have your web site working correctly during the entire semester.

1. (20) Assignment web site home page url submitted to database correctly using form in step 17.b.
2. (20) Web site url of the correct format: <YearTerm+CourseIdentifier>/<UserName>
3. (5) Student's Name at top of Assignment template
4. (15) Feedback email address url with correct format, such as: mailto:<UserName>
5. (10) Confirming email received by professor-per step 14.g.
6. (20) First assignment hyperlink correctly formed, with correct folder structure such as:
'<YearTerm+CourseIdentifier>/<UserName>/Assignment01/Assignmentxx.htm' - per step 11
7. (10) Miscellaneous issues-which means not following items listed in these instructions, poor grammar or spelling.
Make sure to refer to the Sample Home Page in order to see what a completed web site will look like when you finish this project.
8. You will continue to lose points from this and individual assignments if you do not link assignments correctly, or do other things that prevent me from being able to grade your assignment.
In effect, at the end of the semester you can end up with zero points for this assignment.


Figure 1 : You will create one web site for each class you take with Professor Paulson.
Your web site’s root folder is <Course> and contains your web site home page, default.htm 
Each assignment will be a “subfolder” of this root folder. 
Graphics files and screen shots are saved in the "Assignmentxx_files" folder.
Your folder structure must look like this:

             File, folder structure

Preliminaries- To Customize These Instructions For Your Web Site Complete The Following Steps:

    1. Replace <SemesterYear> with current semester and year, e.g. Fall2012
    2. Replace <Course> with the course, e.g. MIS362
    3. Replace <Section> with the appropriate course section, e.g. 01
    4. Replace <YourName> with your name, e.g. Joanne Smith
    5. Replace <UserName> with your WSU network username, e.g.jrstudent2134
    6. Replace <CourseIdentifier> with the six digit course ID, e.g. 000561
    7. Replace <YearTerm> with the current academic year identifier.  Academic year starts in summer (1) and includes fall (3) and spring (5).
      Current YearTerm is 20133  (Fall2012)
    8. Do not use spaces or non standard characters in your folder or file names!  Only use a-Z, 0-9 and ‘_’ (underscore) Why not?    Bookmark example!
    9. It is easier to work with files if you can see the file extensions.  In Windows Explorer select View>Details from the menu. Then choose Tools>Folder Options, select the Views tab, under ‘Advanced Settings:’ clear the box titled ‘Hide extensions for known file types’.  Click on the ‘Apply to All Folders’ button, then click OK.
    10. You must have a WSU username and password, be registered for the class and have an Internet connection to complete these steps.

  1. Creating Your Assignment Website – first you need to create your site

In Expression Web 4, a site consists of two parts: a collection of files and folders on a local computer (the local site),
and a remote web server where you upload the local files and folders to so that the professor can view them (the remote server).

    1. Open Expression Web 4.  You will see panels on the sides and your main workspace in the middle.
    2. Select Site>New Site...  A dialog box will open.
    3. In the middle column click on 'EmptySite'. 
      new empty site
    4. In the 'Location:' box type create a new folder under D:\Data\Documents\My Web Sites\<Course>. The new <Course> folder will be added to the Managed List.
    5. Select Site>Publishing Settings... and the 'Site Settings' dialog box will appear.
      site settings

    6. On the 'Publishing' tab click the 'Edit...' button and the 'Connection Settings' dialog box will appear:
      connection settings

    7. In the Name field type in <Course>
    8. In the Connection Type field choose'File System'.
    9. In the Location field type \\store\classes\20133000xxx\<username> where '20133' is the current year/term and '00xxxx' is the six digit course code.
      Course Days Time \\store\classes\Year/term + CourseID\
      MIS362 T/Th
      MIS342 T/Th
      An ALTERNATE method for the location for PC users is to use the dfs URN: examples below
      \\\dfs\Students\ClassStorage\<YearTerm + CourseID>\<UserName>
    10. Click the 'Save' button, then click the 'OK' button.
    11. You will see your site in the Folder List on the left side of the screen.
    12. You have your site setup – now you will create the folders and pages that make the actual site.

  1. Create Folder Structure
    1. Right click the top most (root) folder, select New>Folder.
    2. Name the folder ‘Assignment01’.  Press Enter Key.   
    3. Repeat above step and add Assignment02, Assignment03….one for each assignment.
        i.      Assignment01, Assignment02, Assignment03… are referred to as sub folders.
    4. Minimize Expression Web 4.

  2. Download Home Page File
    1. Viewing these instructions using IE9 or later, locate your course in the table below.
      Click the appropriate hyperlink in the 'Template' column.
      From the menu choose File>Save As...'
      Make sure the 'Save As Type' is set to 'Web page, complete (*.htm ; *.html)'
      Save the file as 'default.htm' in  D:\Data\Documents\My Web Sites\<Course>\  
      If you are in more than one course, repeat these steps for each course.
    Course Template
    MIS362 MIS362Template.htm
    MIS342 MIS342Template.htm
    MIS399 MIS399Template.htm
    BUSA399 BUSA399Template.htm
    1. Go back to Expression Web 4 (click on icon in Taskbar).
    2. On the left you should see your default.htm under your course in the folder tree.

                                                               i.      If you do not see the file, press F5 to REFRESH – default.htm should appear.

  1. (Fall 2012-Needed for MIS342. Not needed for MIS362) Set up the Attendance Page
    1. In your IE9+ browser, from the menu click File>Save As... and save as 'Attendance.htm'
      Make sure the 'Save As Type' is set to 'Webpage, complete (*.htm ; *.html)'
    2. Save in D:\Data\Documents\My Web Sites\<Course> 
      If you are in more than one course with Professor Paulson, repeat these steps for each course.
    3. Go back to Expression Web 4 (click on icon in Taskbar, then press F5).  Double click on 'attendance.htm' so that it opens.
    4. Double-click the 'First Name' TextField control, and in the 'Text Box Properties' dialog box that appears, in the 'Initial Value' field, type your first name.
    5. Repeat step 4.d. for your Last Name and SID.  Note- the SID for this class is a set of alphanumeric character you choose for your convenience in checking on your assignment, ICE and attendance submissions. Do not use anything important for your course SID, it is not securely stored.  It is suggested that you use the same SID for Attendance, assignments, ICE and submitting your url.  If you are in more than one course with Professor Paulson, you can use the same SID in all of them.  Using the same SID in all courses will make things easier for you.
    6. Double-click the 'Class' ListMenu control, and in the 'Drop-Down Box Properties' dialog box, double-click the appropriate class and set the radio button for the 'Initial State' to 'Selected'. Click the 'OK' button twice to close the dialog boxes.
    7. Repeat step 4.f. in order to select your section.   Save the attendance.htm file.
    8. Create a hyperlink to this file on your <Course> home page in the space provided for this purpose.  Do this by opening default.htm, right-click the text 'Attendance' and choose 'Hyperlink' from the shortcut menu to open the 'Insert Hyperlink' dialog box. Select the 'Attendance.htm' file from the list, the file name will then appear in the Address field. Click the 'OK' button.    Make sure to save default.htm
  1. Configure Your Homepage
    1. Open Default.htm. (Double-click on it in the FILES Local View Panel)
    2. On first line change “Your Name” to <YourName>.
    3. Right-click on the default.htm page and choose Page Properties... from the shortcut menu.
    4. In the 'Page Properties' in the Title field change Title to “YourName <Course> Assignment Web Site” and click on OK.
    5. Save the file.
  2. Create Assignment Feedback E-mail Hyperlink 
    1. Select “Email to YourWebMailAccount” and change this text to "Email to YourName"
    2. Right-click the text "Email to <yourself>" and select "Hyperlink Properties". In the Email address field replace 'username' with your WSU network/email username. 
    3. Make sure that the Subject field has the following format.  When done, click the OK button.


    4. Select File>Save and save your work.
  1. Save Assignments
    1. Open your browser, IE9+.
    2. Browse to <Course> Syllabus, such as<SemesterYear>/<Course>/default.htm.
      IMPORTANT: DO NOT right click the hyperlink and choose Save Target As... because this will not save any graphic images on the page
    3. Click on the appropriate assignment so that the page displays in your browser.
    4. Choose File>Save as.
    5. Navigate to D:\Data\Documents\My Web Sites\<Course>\Assignment01 or appropriate assignment folder.
    6. Save as File Name: Assignment01.htm (or appropriate Assignmentxx.htm)
    7. Make sure Save as type: is set to WebPage, complete (*.htm; *.html)  
      (IE7,8 warning-DO NOT save as Web Archive, single file (*.mht)-
      this file type cannot be edited in Expression Web 4.)
    8. Repeat these steps to save the remaining assignments.  Make sure to put Assignment02.htm into folder D:\Data\Documents\My Web Sites\<Course>\Assignment02, and put Assignmentxx.htm into folder D:\Data\Documents\My Web Sites\<Course>\Assignmentxx
    9. If you are in more than one course with Professor Paulson, you must do this for each assignment for each course.

  2. Finding Assignments
    1. Open Expression Web 4.
    2. Press F5 to refresh.
    3. Expand folder list under \Assignment01\
    4. Double click Assignment01.htm.
    5. The assignment to be completed will open.
    6. Other assignments that have been saved will be found under the appropriate folder, i.e. Assignment02.htm will be under the folder \Assignment02\

  3. Completing Assignments
    1. Double-click the white field beside  ‘First Name’ to open the 'Text Box Properties' dialog box. The  ‘Name’ field will have ‘FirstName’ in it – Leave this alone.  Fill in ‘Initial Value’ field with your first name and press 'OK'.
    2. ‘Last Name’ , ‘SID’ and other TextField boxes (including questions in blue text) are filled out the same way.  Do not modify any Name field, which is at the top of the dialog box.  Only place your text in the ‘Initial Value’ field.
    3. The 'Section' and 'Assignment' ListMenu controls should be already filled out correctly.
    4. For questions with black text click on the answer block and type in the answer.  You will fill out the rest of your Assignment that contains questions with black text this way.
    5. For questions that require you to link a file within your assignment:
      1. First complete the assignment using Excel, Access, VB....
      2. Save the file with the required file name.
      3. Place a copy of this file in the folder for that assignment-see Figure 1 and note the location of the Assignment02.xls file in MIS312
      4. Working in Expression Web 4, within the assignment .htm file, select the text where you are instructed to place the hyperlink
      5. Right-click and choose Hyperlink... from the shortcut menu, make sure the Link to: choice is set to 'Existing File or Web Page', then browse to the folder containing the file from step 9.e.3.
      6. Click on this file, then click OK.
      7. Make sure the hyperlink (blue text) appears, if not, try again.
    6. Make sure to save your work frequently.
    7. When you are finished go to File>Save to save your work.

  4. Adding Screen Shots To Assignments

    For the easiest screen shots-use the Snipping Tool! Or do the following series of steps...
    If you are asked for a screen shot remember the following tips
    1. Pressing the ‘PrtScrn’(Mac running Fusion may be different) button copies all contents of your screen/monitor to the clipboard.
    2. Pressing ‘Alt + PrtScrn’ (Mac running Fusion may be different) copies only the contents of the active window to the clipboard.
    3. Place the cursor where you want the screen shot to appear in your Expressions Web document.
    4. Choose Edit>Paste and the 'Accessibility Properties' dialog box appears. Fill in a descriptive phrase in the 'Alternate Text:' box. Click OK, a new image will appear.
    5. Choose Edit>Paste and the screen shot will appear.
    6. Choose File / Save.  The 'Save Embedded Files' dialog box will appear. Navigate to your website (D:\Data\Documents\My Web Sites\<Course>\ / etc …) and choose the appropriate assignment folder to save to-most likely the suggested location is correct.  Choose an appropriate file name (example:  Assignment1Q1Graphic). Click OK.
  1. Updating Home Page Hyperlinks
    1. These steps need to be done each time an assignment is completed.
    2. Open Default.htm in Expression Web 4.
    3. Select “Assignment01’ in the 'Assignments’ column. (Note: some assignments do not require hyperlinks, they will be so noted on the homepage.)
    4. Right-click and choose Hyperlink... The 'Insert Hyperlink' dialog box appears.
    5. Under the left side column 'Link to' make sure 'Existing File or Web Page' is selected. 
    6. ‘Look in’ box should now show “<Course>”
    7. Open the ‘Assignment01” folder by double-clicking it.
    8. Select ‘Assignment01.htm’ and click OK.
    9. Save your work.
    10. You will do the same procedure in order to link the text ‘Assignment02’ on your home page to the file Assignment02.htm and the text 'Assignmentxx' on your home page to the file Assignmentxx.htm … as needed.

  2. Local Web Site Check
    1. Open Windows Explorer.
    2. Navigate to D:\Data\Documents\My Web Sites\<Course>\default.htm.
    3. Double-click on ‘Default.htm’ and your browser will open and display your ‘homepage’.
    4. Remember F5 to refresh.
    5. In the menu, make sure View>Status Bar is checked.
    6. On Default.htm, move cursor over the “Assignment01VBA” hyperlink.  The Status Bar will show the hyperlink as file:///D:/Data/Documents/My Web Sites/<Course>/Assignment01/Assignment01.htm.
    7. Click the hyperlink to display the page.
    8. Your “Assignment01” page appears. Check to make sure the page appears correctly. If not, go back into Expression Web and make the necessary changes.

  3. Web Site Publishing
    1. Go back to Expression Web 4 – make sure your web site is displayed. 
    2. If you are opening Expression Web 4 and your web site is not open- you will find your web at Site>Open Sites>.  Click on your site’s name and then click on Open.  Your files will appear on the left. 
    3. To publish your web site, click the 'Publishing' tab at the bottom of theSite View workspace.
    4. Click in a blank area in the left side window of 'Site View', then press 'Ctrl + A' to select all the files and folders.
    5. Between the 'Site View' windows find and press the blue arrow pointing to the right. This will send all files and folders to your web site. If you need to publish fewer items, only select the items that you want to publish, then press the blue arrow.

  4. Internet Web Site Check
      1. In your browser navigate to:<YearTerm + CourseID>/<UserName>/
    1. Your ‘default.htm’ web page should display.
    2. Verify that each Assignment hyperlink works correctly, i.e. displays the proper page on your web site.  If not, you must return to Expression Web 4 and correct your hyperlinks.
    3. You must check your email hyperlink for proper operation by clicking on it while viewing it in your browser.
    4.  You are strongly advised to use Outlook for your email program. It will be autoconfigured when you start it up while you are logged onto the WSU network.
    5. If the email hyperlink does not work correctly, that is, does not open Outlook with an email addressed to your webmail account, with a carbon copy (cc:) to my email account, and the proper subject line-then go back to step 6 and review and fix any problems.
    6. When satisfied that your web site is correct, and your email hyperlink is correctly formatted, click on the email hyperlink. Outlook should start up and create a new email that is addressed to you, with a cc: to me.
    7. In the body of the email type "I have finished my Project 1 web site and everything appears to work OK."
    8. Press the send button.
    9. Verify that you have successfully received this email in your WSU email account.
    10. Do not worry if you send this email several times.
    11. Realize that the copy of this email is your proof of completing this assignment on time. If it does not work correctly, or a copy is not sent to me, you have not proven that your assignment is complete.
    12. Each time you do an assignment, make sure to check for proper operation of the hyperlinks on your web site home page (default.htm), and that your assignment and all the screen shots are functioning properly. Remember that if you make any changes to a assignment or screen shot, you must republish those files. Then you must make sure to recheck the web site, using your browser. Be aware that you may need to press the F5/Refresh button to view the latest file. Alternatively, you can set your browser to request a new web page each time you view a url. (Tools>Internet Options>Browsing History>Settings)
      browser cache
  1. Submit Assignment Pages
    1. The submit button is on each assignment page. Your assignment is not considered done until you have completed the submission process and received confirmation of your submission.
    2. If not already at your homepage:

                              i.      Open your browser and navigate to:<YearTerm + CourseID>/<UserName>/.

                             ii.      Your ‘default.htm’ webpage should display.

                            iii.      Navigate to your Assignmentxx page.

                            iv.      Make sure that your assignment is completed.  Check that screen shots display properly, all answers are completed, and your name and assignment information is filled in.  If not, go back to Expression Web 4 and complete or correct any problems or errors.

                             v.      When you are satisfied with your assignment, click the Submit button to submit your assignment.

                             vi.      You will see a confirmation page telling you that your assignment was submitted.  There will be a lot of other info on there that you probably will not understand – just ignore.  It is a good idea to save this confirmation page.  Click File>Save As….  Choose an appropriate folder to store these pages.  A possibility is D:\Data\<Course>\ConfirmationPages\

If instead of a confirmation page you see a warning or error message, then your assignment did not submit and you will not receive credit for it. Save a copy of the page containing the warning/error. If you cannot figure out what went wrong (such as not being connected to the Internet), then email this page to the instructor before the assignment is due. Make sure the email subject line contains at least the course, section and wording "Assignment Submission Problem".

                            vii.      Click on the Homepage hyperlink to go back to the professors's web site… or click the Back icon in the menu to go back to yours.

  1. AssignmentInquiry – Review what assignment you have already submitted and when it was submitted.
    1. On click on Inquiry.
    2. You will need to enter your Last Name and your SID Number.
    3. Press the ‘List Submissions!’ button.
    4. You will see what you submitted and when.  This is handy if you cannot remember what you have done so far for the class or to make sure your assignment was turned in on time!
    5. Click on ‘Paulson’s Course1 Homepage’ to return to Prof. Paulson’s site.

  2. Submit your URL – You will use a FORM to do this.
    1. These steps need to be done only once at the start of the semester.  If for some reason you change the URL to your web site (name change or submitting a new social security number will cause a username change) make sure to notify your professor.  See if they want you to repeat this step.
    2. Using your broswer, navigate to the form used to submit your URL to Professor Paulson- it is at
    3. The name of the form is Studentwebs Assignment Website URL Submission Form.
    4. Fill out form with the term, campus, class, your last name, your first name, your SID (also use the same SID for assignment and attendance) and your website address.  You will fill out this form the normal way by just clicking in the fields and entering your information.
    5. Press the SUBMIT button.
    6. Your will receive a confirmation page telling you that your website URL was submitted successfully.  It will also tell you the time and date you submitted it.
    7. Next make sure that the url that you submitted works by going to the form shown below, entering your  last name and SID, and then click on 'Check URL'.  Your assignment web site home page should be displayed.  If not, I cannot see it either, and there is a problem with your web site.  You must correct any problems!

  3. URLInquiry – Confirm that your website URL has been submitted correctly.
    1. On click on URLInquiry.
    2. You will need to enter your Last Name and your SID Number.
    3. Press ‘Get URL!’ button.
    4. You will see what you submitted and when.  Check to make sure information is correct.  If you are in multiple classes with Professor Paulson, information for all your web sites will be listed.
    5. Click on Check URL in the Hyperlink column.  This should display your home directory for your web site.  If you get a 'page not found' type of message there is something wrong with the URL that you submitted. Recheck your information and resubmit your url. Or stop by Somsen 207 and ask one of the STARs for assistance. Or see Professor Paulson.
  1. Summary-Completing Assignments- Completing an assignment consists of the following steps.
    1. Making sure you have downloaded the assignment to your web site.  See Step 7.
    2. Complete the assignment.  See steps 9,10, 11 and 12.
    3.   Publish your assignment.  See step 13.
    4. Verifying your assignment.  See step 14.
    5. Submitting your assignment.  See step 15 and 16.
  1. Recomnended care and maintenance-
    1. Add links to your browser toolbar to access your studentwebs site quicker.
    2. Make periodic backups of your web site to CD-R or CD-RW, DVD, or USB key or your personal network storage space.
    3. Create another web site to experiment with and learn about the technology (such as 'studentwebs')

    ----- Common Assignment Web Site Problems ------

    1. Wrong class/section- The most common mistake is that students do not change from the default MIS999 class when submitting their url.  See 17.d.
    2. Incorrect email hyperlink- Another common mistake is that students do not create the correct email hyperlink on their assignment web site home page. See step 6.
    3. Change to username- If you obtain a new WSU network username (<UserName>) during the semester, this can cause problems.  Reciving a new network username will occur if you submit a name change to WSU, or if you submit a social security number.  If you are going to do either, make sure to have a complete and accurate backup copy of your web site.  There can be problems accessing your new network accounts and web site. Having a backup copy of the web site will allow you to get your assignment web site installed at its new location very quickly and conveniently.  Please notify me of either of these events, because I will have to change your assignment web site home page in my database.
    4. Exceed disk space- If you have had more than one class with me, or you publish a lot of materials to your studentwebs site, you may run out of web storage space. As a precaution only publish Assignment assignments to your web site. Do not use it for general purpose storage, otherwise you will exceed your disk quota. When this happens, you will no longer be able to connect and/or publish Assignment to the server. The error message that you receive will in no way reflect this fact, it is very ambiguous!
    5. Hard drive re-imaged- If your hard drive is re-imaged you may lose your Expression Web 4 web site settings.You then must reconfigure your web site by repeating step 1.
    6. Incorrect screen shot hyperlinks- If you see this image in either Expression Web 4, or while viewing your assignment page from the studentwebs server (NOT from your local machine), there is something wrong with the way you inserted the image into your page.  Review step 10.
      page does not exist at this location
      ftp password problems

    7. Password change - If you see this message:
      Login Failure
      It is most likely because you recently changed your network password or username.

      If you have changed your WSU network password you will not be able to publish any files to your studentwebs site until you update your password in Expression Web 4.  To do this from the menu choose Site>Manage Sites...  Select your web site from the list and then click 'Edit'.  From the Advanced tab select 'Remote Info'.  You will see this dialog box:
      ftp access
      Type in your new password and/or login.
      Press the 'Test' button and you will should see a message telling you that you have successfully connected to your web site.

    8. Directory Listing Denied?-You hyperlinked to a folder and not to a file.
      Check out the status bar in your browser.
      If you hyperlinked to a folder, the file extension (.htm, .png) will not be displayed.
      If you hyperlink to a folder which does not contain a file named index.htm or default.htm (like your hompage), you will receive one of the following errors, depending on the browser you are using.

      access denied IE6

      access deniedIE 7

      Directory listing denied FireFox2

      Try it, Click Here!

      Solution: See step 11.i.
      Make sure you are linking to a file-usually it will have an extension of .htm; but some assignments require you to link to .exe; .xls or other files.
      Also note that you will not get this error if you link to a folder that contains a file named index.htm or default.htm
      Those files are automatically displayed instead.
      Here is an example. Default.htm

    9. Page Note Found- Most likely there is an error in your file or path name.
      page not foundIE8

    10. Assignment Submission Problem- if you press the submit button and receive this message, there are network or server problems beyond your or my control.
      Please send a copy of the message via email to alert me as soon as possible.
      SQL error

    11. JavaScript error:

      If you get a pop up dialog box with the following error message delete the appropriate .dat file as detailed below:

      While executing onLoad in_onOpen.htm, the following JavaScript error(s) occurred: In file "_onOpen": onOpen is not defined

      (Delete the WinFileCache-7A9586CB.dat, MacFileCache-BFE7CE2E.dat, or FileCache.dat file from the Dreamweaver user configuration folder. It is recommended to delete the FileCache.dat file if you are experiencing a JavaScript error related to "dwscripts" or if you are receiving a "translators were not loaded" error message. The string of characters after "FileCache-" may differ on your machine. The location of the FileCache.dat file depends your operating system and your version of Dreamweaver. Note that on Windows, the Application Data and AppData folders are hidden by default, so verify that your Windows Explorer folder options are set to View Hidden Folders. )

      Delete from Dreamweaver CS3 on Windows XP:  C:\Documents and Settings\[username]\Application Data\Adobe\Dreamweaver 9\Configuration