http://expression.microsoft.com/en-us/cc136535.aspx | http://by-expression.com/media/p/1300.aspx
To get Expression Web Free as an MCC student: Microsoft Expression through MSDN alliance
or try www.Dreamspark.com as an alternate way to download Expression Web online
-5 points for each day homework is late
Design
100 Pts
Due R Jan 22
1. Find 3 sites similar to your proposed site, then in a word processing document list the links to each of them. (10pts)
2. Go to your favorite of the three sites and tap [Alt] + [Print Screen] to do a screen capture of its home page and paste (Edit > Paste) the screen capture into your document (10pts).
3. Do a Typed Mockup perhaps with a Story Board of each of the 4 required pages (10 pts per pg)
4. On your design page show the Header and Content (10pts),
5. On your design page show either Top navigation or side Nav bars (10pts)
6. Show or describe the layout of Images (10pts)
7. Create a deadline and client signoff list (the client may be you for educational purposes) for approval as each section of each page is completed. (10pts)
8. List 10 web design guideline hints (10pts)- see book (p159) and Folders/2820Web/SamplesMockup/
Click for Online Textbook Tutorials: User name: WintersF and PW: fjw
Click for Online Web Tutorials: www.w3schools.com
10 Pts each
100 Pts total
There will be ten 10-point review quizzes, worth 10 points each, for a total of 100 points. They will be based on the lectures from the previous week and from the current chapter in the text book. Make sure you know the tags and terms shown under the quiz title before you start the quiz in Angel. You will have 10 minutes to complete each exam. These quizzes will be given on most Tuesdays at the beginning of class.
100 Pts
Chapt 1 & 2
Links
Due R Jan 29
Free Web Space/FTP
Alternative Editors
1. Appropriate description in the <title> tag. (10 pts)
2. In the Body tags include an appropriate centered heading <h1> (10 pts)
3. Add a line <hr /> under the heading (10 pts)
4. Display at least a couple of sentences (10 pts)
5. Create an id or anchor named "Top" immediately after the Body tag (10 pts)
6. Insert a link to the internal id/anchor somewhere on the page other than "Top" (10 pts)
Ex: <td id="Chapt2"> use with <a href="Chapt2">Chapter 2</a>
7a. Add a link to an external Web page on a different site using an absolute path (10 pts)
<a href="http://msn.com" target="_blank">MSN</a>
7b. Add a link to a Web Page in the same folder (10 pts)
<a href="resume.htm">My Resume</a>
8. Include a working link to your Email address. (10 pts)
Ex: <a href="mailto:myName@abc.com?Subject=Request Quote">Email Me</a>
9. Remember: roses are FF0000 and violets are 0000FF. Set at least two different colors and sizes. (10 pts)
<span style="font-size:18px; font-family:Arial; color:#FF00FF">Red & Blue</span>
10. This assignment will be finished next week when it is put live online (10 pts)
(See SimpleWebPage and HTMLTags). Email me (winterf@mccfl.edu) a link to your home page before class. Subject: Home page
QuickTutor)
http://faculty.mccfl.edu/WinterF/0ClassFolders/2820Web/BookTutorials User Name: WintersF | PW: fjw
100 Pts
Chapt 3
Color, fonts, images
Due R Feb 05
a. Free GIF Animators, Art Editors
b. Photoshop CS3 Animation
c. Image Ready Gif Animator
d. Accessibility
1a. <meta name="author, 1b. <meta name= "keywords, 1c. <meta name="description
2. include a <p> and a <br>
3. include a
4. set the body background to a light color.
5. use a serif, sans-serif, and a monospace font
6. use the <p> tag to set a subtitle to 18pt and a left margin to 15px, <p style="margin-left: 15px">
7. add an image with an Alt or Title to display an appropriate popup or screen tip when the mouse pointer
hovers over it; float the image the right of some text <img src="images/ZoeyAn.gif" alt="My Dog Zoey" style="float:right; margin: 10px 8px 10px 8px" />
OR in the CSS: #floatRight {float: right; margin: 10px 8px 10px 8px;} and use <div id="floatRight"> with the image. (I have to do this with xhtml, because float does not work right with xhtml Transitional.)
8. add a two hotspots and two image maps to your image (notice the Hotspot on the bridge in the top Header of this syllabus) (Intro to Dreamweaver to create the Hotspots) (In place of a Hotspot you can build an Internal Style Sheet.)
To add a Hotspot using Expression Web: Insert a picture. Select the picture > View > Toolbars > Pictures > click on Rectangular or Circle or Poly icon
9. center another fixed midsized image in the Body tag without repeating.
<body style="background-color:#FFFF00; background-image:url(images/BGimage.jpg); background-position: center; background-repeat: no-repeat">
10. create an Unordered list like the one shown immediately below, using any small image of your choice.
- Item One - you must know how to use Notepad for your Quizzes
- Item Two - but also find an alternative editor with Tag checking and Attribute prompting
100 Pts
Chapt 4
Tables
Due T Feb 17
1. Title (spanning all five columns): Contact Information For My Friends as a <H1> in Blue (10pts).
2. Make a Header in Row 2, using an <H2>: Name, Address, City, State, Phone. (10)
3. Set the Header background color of Row 2 to a distinctively darker color than the rest of the body (10pts).
4. In the two rows following the header, enter the name, address, city, state, and phone for you and one of your friends (10).
5. Set at least one of the columns to nowrap (10).
6. Set the table width to 760px, border to 2 px, border color to a distinctively darker color (10).
7. Set a background image to an image of your choice (10).
8. At the bottom of the table add 3 extra rows.
Add a Hyperlink to your favorite site in the middle column of the bottom row.
9. Merge the cells in the last column for the last 3 rows, using the rowspan command (10).
10. Add a photo in the merged cells in the lower corner of the table.
Valign the photo to the top of the column. (10).
See TableDemo to see what your table will look like. This assignment will be the basis of your hands-on Quiz.
100 Pts
Resume
Your Web Site
Due R Feb 19
Word Web Pages
1. Your resume will include a 3-column Table with a border (10 pts)
2. A light background color or background image (10)
3. A properly set page Title that appears in the title bar (10)
4. Include a link to your Email (10)
5. External hyperlink to another site & an internal hyperlink to an anchor somewhere on the page (10)
6. Span several cells to insert a logo image, with Alt text, to link to another Web site when image is clicked (10)
7. At least 3 major categories, such as Education and Employment, in Bold with a distinctive font and color (10)
8. Education and employment dates must be listed in inverse order (10)
9. FTP your files (the .htm and the images in the images folder) to your Web site (20 pts).
Email me a link to your Web site the day before class if it is different than your previous project. You can build your Resume in Notepad, Dreamweaver. Microsoft Expressions, or Microsoft Word. For step by step instructions on how to build your page in MS Word see:
http://faculty.mccfl.edu/WinterF/0ClassFolders/Common/ResumeOffice2003.doc (Office 2003)
http://faculty.mccfl.edu/WinterF/0ClassFolders/Common/ResumeOffice2007.doc (Office 2007)
For examples of online resumes see: winterf/Resume.htm or Brittany's Resume or Glenn's Resume.
100 Pts
Chapt 7
CSS
Due T Mar 10
Style Sheets
Sample CSS
Great Online Demo
CSS_Nav_Demo
MSDN Library
1. Include an Inline style to modify a one-time occurrence of a color, font-size and/or font-family. Ex:
<span style="color: blue">Note</span> or <p style="color: blue">Note</p>
2. In the <head>, include an Internal or Embedded <Style> called Important or Title or... Ex:
<style type="text/css">
.Important {color: #FF0000; font-weight: bold;}
</style>
</head>
In above style: .Important is now a custom Class. Note: it starts with a period. You can reuse a Class.
3. Use the custom class Important or Title somewhere on your Web page.
Ex: <span class="Important">Must Read</span> or <p class="Important">Must Read</p>
4. In your editor create your own personal External Cascading Style Sheet linked to your Home page and all your other pages (this new file has a .css extension and no HTML code). For instance, the following code is inside the <head> tags of this page and links to the .css file named Web.css:
<link href="Web.css" rel="stylesheet" type="text/css" />
(In DreamWeaver you can choose File > New and click Cascading Style Sheets to create some sample css templates - then modify the tag styles to meet your custom design and delete the .classes that you will not use.)
5. Set your default <body> background color or background image for all pages with one .css file.
6. In the .css modify the <p> tag attributes perhaps to set the margins or color, font-size and/or font-family.
Ex: p {font-size: 120%; color:#333399; margin-left: 10px}
7. In your .css, include your own custom styles named .Title & .subTitle, .formFields.
Ex: .Title {font-size:24px; font-weight:bold; color:#0066FF}
8. In the .css set your preferred List Item <ul> styles (such as list-style-type: square;).
9. Set your preferred a:hover attributes to create a link rollover that slightly changes color, but stays somewhat traditional:
Ex: a:hover {color: #0000CC; background-color: #FFFF00}
10. Define and use an ID (it starts with #, you cannot reuse IDs) such as #masthead or #nav or #headerRt
Example in the .css:
#masthead {background-image:url('images/Header.jpg');background-position:center}
Ex: in the .html page: <div id="headerRt">My Center Aligned Header</div>
Note: in Firefox if you install the Add-on web developer toolbar tap Ctrl + Shift + S to disable CSS
Note: in Internet Explorer 8 you can choose Page > Style > No Style to disable the associated CSS
100 Pts
Chapt 6
Forms
(skip Frames, ch 5)
Due T Mar 24
MSDN Library
1. Enter a nice personalize banner/masthead in the top row (like the one on top of this page).
2. Place the field labels in column one and
3. Place most of the control elements in column two: First Name, Last Name, City, ST, Zip, Email...
4. Set State (as a dropdown, default to FL, max length =2)
5. Radio buttons (male/female or something similar) in a Gender option group
<input type="radio" name="Gender" value="M" />M
<input type="radio" name="Gender" value="F" />F
6. Add Check boxes (such Education: H.S., College or something similar).
7. Add a Comment or Memo field (textarea)
8. Add a Reset Button and add a Submit button
9. Validate your form: in Dreamweaver, select the Submit button, choose Window > Behaviors > [+] > Validate Form to require at least 3 fields. Make sure email is both required and valid.
10. <form action="mailto:name@yourDomain.com" method="post" enctype="text/plain"> for Client Side (not recommended) OR
<form action="gdform.asp" name="contactForm" id="contactForm" method="post"> for Server Side (Server side is the best way to send form data)
The gdform.asp (or gdform.php) is a script name supplied by the hosting company (in this case Godaddy) to process forms. This will not work unless your Web page is uploaded to the Server (as in Server side). You will also have to go to the Control Panel and click on Form Mail and enter the email address for the form data to be sent to.
See HTMLformDemo-ClientSide.htm and other form demos in the same folder.
Optional - can be used in place of any low assignment. Graded at the end of the semester.
100 Pts
Chapt 12
Navigation
Due T Mar 31
On the bottom build a simple Nav with a:hover style attributes to produce a simple navigation bar like: 2. Create at least one Hotspot (image map) and two rollover (swap images) menu items or objects. Ex:
Step 1: create HomeOff.gif; then create HomeOn.gif
Step 2: Set the two gifs images up as Roll-over objects so that when user hovers mouse over HomeOff.gif it becomes HomeOnGif, which is a hyperlink to index.htm. Chapter 12 discusses how to do this in JavaScript.
Dreamweaver does Rollovers relatively easy: Insert > Interactive Images > Rollover Image
For Expression Web: Insert > Interactive Button OR
Insert a picture. Select the picture > in the Behaviors task pane (lower right hand corner) click on the Insert button > choose Swap Image from the drop down and choose the new image to replace the initial image for “onmouseover”...
For example, see the blue Home and Resume rollovers at left. (20pts).
3a. Create either a drop-down menu or pop-up menu item by using either the material in Chapter 12,
Or
3b. Do a Web search for existing JavaScript and just follow the associated directions to install it.
Or
3c. In DreamWeaver: highlight an existing menu link (it must have an a href), then Window > Behaviors > [+] > Show Popup menu. (20pts)
For a good example of a Navigation and Home page template:
Open DreamWeaver > File > New > Starter Pages > Travel - Home Page
4. Include a link to a slide show on your site showing off pictures or your Portfolio (20pts).
5. On the bottom of your Web page, add a last update that auto-updates the last save date. Ex:
Insert > Date > Check Update Automatically on Save box (10pts)
6. Use the same attractive theme throughout your entire site (10pts)
Assign9
100 Pts
Chapt 8
Multimedia
Chapt 12
Transitions/Filters
Due R Apr 09
A working Embedded You Tube window can be used in place of any of the 10 required items below.
You Tube videos typically show the Embed code on the right on the screen. Simply copy and paste it into your Web page.
Sample You Tube Embed code:
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/xyzdGG8&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/ xyzdGG8&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>
1. a link use <a href tag to a midi file. ex: Play music (6.8KB .Mid file)
2a. a link, use <embed> tag, to one of your favorite mp3 sound bites (10 pts)
(<embed> is being deprecated, works differently on different browsers, and slows load time)
<embed src="music.mid" autostart="false" hidden="false" height="25px"></embed>
OR
2b. a link, use <object> tag, to one of your favorite mp3 sound bites (10 pts)
(Do a search for free mp3 and .mov files on the web or search your computer for mp3 or .mov files)
3. a link, use the <embed src tag, to .mov video file. - autostart= false
4. a link to a .wmv video file using the <a href tag target="_blank" ex: Koi Pond (128KB .Mov),
5. add an applet to your page (see p462 in the book) (Note1: Java must be installed on your machine, Note2: By default DreamWeaver may make the Width and Height too small for the applet to display, so adjust these arguments if necessary.) (Search for "Free Applets" - one good source with a tutorial is: echoecho.com/freeapplets.htm),
6. add a scrolling marquee to your page.
7. create and add you own animated gif to your page,
8. add a photo gallery or a similar image gallery to your site (it can be a simple table or a javascript gallery)
9. Create a .swf file (Flash Directions) or find a sample .swf file on your hard drive or download a sample .swf file and use the <open tag to open it on your page (in Expression Web and Dreamweaver - Insert > Media > Flash),
10. build a second copy of your own personalized banner (like the one on top of this page) and then search the Internet and find some script to smoothly transition from one banner to the other. (If you have access to Flash you can build a .swf file instead. Or the transition can be an animated gif.)
Assign10
100 Pts
Chapt 9, 10, 12, 13
Due R Apr 16
From Chapter 10, in-class grade:
1. Add an Internal JavaScript (Internal scripts are usually in the Head) (30pts)
2. Add an External JavaScript (It has a .js extension and is stored in your folder like a .css file) (30pts)
Ex: The code below calls an External JavaScript routine named RotateHeaderFunction.js
<script src="RotateHeaderFunction.js" type="text/javascript" language="JavaScript1.2"></script>
(Your slide show for the previous assignment does not count as a JavaScript for this assignment)
Do not use one of the samples on my MCC Web site or syllabus (date sample below). Instead, see such sites as: http://www.dynamicdrive.com/ and http://hotscripts.com/ or from the Dreamweaver Code panel click the Snippets tab, and select JavaScript.
3. Add at least one Pop-Up Window (See Chapt 13 or Window > Behaviors > [+] > Popup Message or Window > Snippets > JavaScript > windows) (10pts).
4. Add at least one Dialog Box with an [OK] button (10 pts).
5. Add at least one Include file that is used with more than one page. (20 pts) (See sample PHP and CFM code in /2820Web/SamplesHTMLcode/IncludeFiles/)
100 Pts
Chapt 14, 13
Due R Apr 23
Simple Calc Form
Discuss XML
1. Add two or more working Calculated Field(s) to a new form or an existing form that is linked from your home page. Do at least two calculations that are relevant to your site. (40pts).
2. Add Data Validation for 1. a required field (20pts)
3. Validate an email address for a new form or an existing form. (20 pts)
4. Verify that the form data is submitted and received - send to your email & open your email. (20 pts)
You can use either client side mailto: or server side script (preferred) to submit your form data.
100 pts
400 Pts
R May 07 3:00
- Grade Scale: A:90-100, B:80-89, C:70-79, D:60-69
- -5 points for each day homework is late for 1st 5 days, -1 point for each additional day work is late
- Copying another student's assignment will result in a 0 for both students.
- The lowest 100 point grade will be dropped.
- Extra Credit
- The Final exam is required. There will be no makeup or substitution for the Final exam.
Links
Student Services: http://www.mccfl.edu/pages/242.asp
Virtual Library: Ask a Librarian at: http://www.askalibrarian.org/