Web Design & Publishing

Objective: Use the features of HTML, CSS, and jQuery  to make a photo slideshow.

Due: April 6, 9 p.m.
Email your URL to the instructor. Ex. http://www.yoursite.com/foldername/
Email subject must be: MC4315 Photo Slideshow Your Name

Grading: Content: 30%, Design: 30%, Use of Technology: 40%

• Example: Trip to Chicago
• Download the template (this template was downloaded from http://slidesjs.com/, then modified for this class).

Overall Requirements:

1. Use the features of HTML, CSS, and jQuery discussed in class to create the entire site, not with any other software or online templates.
2. You must use at least one button for navigation (i.e. “Next” and “Prev”).
3. Use 10-15 of your own photos that can tell a story.
4. You must use a stylesheet to control typography and links.
5. Missing any of the previous four requirements of the “Overall Requirement” will result in a failing grade. So please follow the guidelines and requirements.

Content Requirement:

1. For your photos, you MUST optimize and size them properly in Photoshop BEFORE starting working on the slideshow.
2. Buttons that navigate between photos must fully function.
3. All photos must have a caption.
4. Create a new banner image (ex: 900 x 70 px).
5. Include date, email, copyright and license info (i.e. at the bottom of the page).
6. Include a link to your assignment page (Project 2).
7. On your assignment page (Project 2), link to this project.

Understanding the Template Files:

1. After you downloaded the template from here, you will have a zip file “slide.zip.” Unzip the file, and you will have a folder “slide” on your desktop. Name the folder to be something related to your topic. (I’m naming it “chicago”).
2. In the folder, you will find a slide.html and three folders: css, img, js. CSS folder has a css file that controls the look (style) of the slideshow. JS folder has a JavaScript file that makes the slideshow work. IMG folder is where you put all your image files in.
3. The photos are 600×450 px.

Understanding the “slide.html”

1. First, in the head of slide.html, you will see a link to the css file <link rel=”stylesheet” href=”css/global.css”>.
2. Second, we have some JavaScript in the head section too, including three sets of code starting with <script>.
3. In the body of slide.html, you have the photo slideshow.

Steps I: Get your files ready. 

1. Create a new project (new site) in Dreamweaver. Make this slide folder your root folder.
2. In the root folder, in addition to all the files you already have (slide.html and three folders), put in a index.html and a style.css in the folder (you can download it from the course website or duplicate from your previous project).
3. Open both slide.html and index.html in Dreamweaver.
4. In the head of slide.html, copy the 1 css and 3 script codes. Paste them into the head of index.html.
5. Delete the content you have in <section> of index.html.
6. In the body of slide.html, copy all the codes (from <div id=”container1″> all the way till </div>). Paste them into the <section> of index.html.

Steps II: Get your photos ready. 

1. Optimize all your 10-15 photos in Photoshop, including color, contrast, and size, etc.
2. Your image size has to be 600×450.
3. Name your photos sequentially (i.e. 1.jpg, 2.jpg…..10.jpg).
4. Put all the photos in your IMG folder in your root folder.

Steps III: Adding photos and captions into index.html 

1. In <section> of index.html, you will find the following:
   <div class=”slide”>
   <img src=”img/1.JPG” width=”600″ height=”450″ alt=”Slide 1″>
   <div class=”caption” style=”bottom:0″>
   <p>In summer 2009, I went to Chicago for a conference.</p>
   </div>
   </div>
2. <img src=”img/1.JPG” width=”600″ height=”450″ alt=”Slide 1″>
   This is where you put the file name of the first photo.
3. <p>In summer 2009, I went to Chicago for a conference.</p>
   This is where you put the caption of the photo.
4. This code set is the code for your first photo. If you have ten photos, you have to duplicate the code ten times. For each code set, have the correct file name and copation.

Objective: Use Dreamweaver and Photoshop to make a site for a hobby or an organization

Due: March 9 (Friday), 9 p.m.
Email your URL to the instructor. Ex. http://www.yoursite.com/foldername/
Email subject must be: MC4315 Project 4 Your Name

Grading: Content: 30%, Design: 30%, Use of Technology: 30%, Written Supplement 10%

Before you start, check

• Steps to Designing a Web Page
• Pick a template

Overall Requirements:

1. Talk to the instructor about your idead and finish your Web Design Sketch Sheet before you start working on your home page (index.html).
2. You will use the Web editor, Dreamweaver, the graphics program, Photoshop in designing this project. Any other online/offline templates or Web authoring software/applications are not allowed.
3. Use an external stylesheet. Internal and inline CSS are not allowed at this point, unless you discuss with the instructor in advance.
4. Use blocks and/or divs for formatting each page.
5. Missing any of the previous four requirements of the “Overall Requirement” will result in a failing grade. So please follow the guidelines and requirements.

Content Requirement:

1. Site must have a total of at least five pages. Pages can represent separate areas of the site, like home, about, contact, links, etc.
2. Decide on an appropriate navigation strategy. You must use CSS for link styles. That is, set link colors and text-decoration for a:link, a:visited, a:hover, and a:active.
3. Must have a title (using the title tag).
4. Design a site logo or banner image using Photoshop (or Illustrator if you know how to). If the organization has a logo, you may use it, but then you will be required to make another graphic somewhere else in the site.
5. Include at least one or more appropriate photos or graphics on your website.
6. Include at least three external links to relevant sites. External links must open in a new window (target=”_blank”).
7. Make sure you include your email address somewhere in the site.
8. Add a date to the bottom of the home page. Update this every time you make a change. Example: Last Updated: October 2, 2011.
9. Make sure you save all pages with a .html extension.
10. Upload the “whole folder” into your public_html folder, including all html files, image files, and style.css.
11. Make sure you have this project linked on your Assignment page (from Project 2). To do that, open your assignment.html from Project 2. Select the text of “Project 3″ and link it to your URL for this project (i.e http://www.yourURL.com/foldername/).

Quick Tips:

1. Complete Web Design Sketch Sheet.
2. Create a folder and name it related to your topic (i.e guitar or music or food) and create a “New Site” in Dreamweaver.
3. Download index.html and style.css from course site.
4. Work on your home page (index.html) and modify your style.css according to your Web Design Sketch Sheet.
5. Finish your home page.
6. Save your home page.
7. Create your second page, third page, and fourth page from the home page.

Objective: Use Dreamweaver and Photoshop, to design your personal website

Due: Feb. 17  (Friday), 9 p.m. Email your URL to the instructor.
Email subject must be: MC4315 Project 2 Your Name

Grading: Content: 30%, Design: 30%, Use of Technology: 40%

Before you start, check

• Steps to Designing a Web Page
• Pick a template

Overall Requirements:

1. You will use the Web editor, Dreamweaver, and the graphics program, Photoshop, for this project. Not with any other online/offline templates or Web authoring software/applications.
2. For this and all future projects, you must attach a stylesheet to each page (external CSS, i.e. style.css).
3. Site must have a total of at least five pages.
4. Missing any of the previous three requirements of the “Overall Requirement” will result in a failing grade. So please follow the guidelines and requirements.

Requirements:

1. Use divs for formatting each page.
2. Site must have a total of at least five pages. Pages can represent separate areas of the site, like home, about, contact, links, etc. You must add one additional page to the site that you did not already have, something to do with a specific hobby or interest.
3. Your pages should be between 800-1000 px wide.
4. Decide on an appropriate navigation strategy, with four <a> states (a:link, a:visited, a:hover, a:active). For example, you can use a list, a table, a jump menu, or a pop-up menu.
5. Include at least one or more appropriate photos or graphics. Photos must be optimized with Photoshop. Have appropriate file format (jpg, gif, or png), file dimension (i.e. 900×70 px), and file size (no more than 100 kb for each image, unless there is a specific reason to do so).
6. Design your own graphics, such as site logo, in Photoshop.
7. Include at least three external links to relevant sites. External links must open in a new window (target=”_blank”).
8. Make sure you include a title for your website (using title tag) and your email address somewhere on the site.
9. Add a date to the bottom of the home page. Update this every time you make a change.
10. Make sure you save the page with a .html extension.
11. Upload all associated files to the main directory of your Web site (this will overwrite the files from the first project).

Project 1- Student Bio Page: Due Friday, Feb 3, 9 pm

Objective: Use the basics of html to make a personal Web site.

Hand in your Assignment:

• E-mail the link to the instructor at jacieyang@txstate.edu or jacieyang@gmail.com
• Subject line of the e-mail must be: MC4315 Project 1 HTML Your Name
• Your URL should look like: http://www.yourURL.com

Overall Requirements:

1. You must hand-code this assignment entirely using html, not with any web-authoring software/applications, or any pre-designed templates. Failing this requirement will result in an F for this assignment.
2. Use TextEdit (on a Mac) or Notepad (on a PC) to insert the proper html tags. Use appropriate headings to structure each of your pages.
3. Site must have a total of at least four pages (i.e. index.html, bio.html, work.html, and assignment.html).
4. Pages can represent separate areas of your personal site, like home page, interests, contact.
5. One page has to be the assignment page that will link to all other future projects. For now, just list out future projects on this the assignment page without linking to anything (use either ol tag or ul tag).

Content Requirements:

1. Have appropriate content on each page. Content is VERY important!!
2. Each page should have at least a couple of paragraphs of content (using p tags)
3. Decide on an appropriate navigation strategy. For now, do not worry about creating buttons. Just use text links in a list.
4. Include one GOOD photo of you (using image tag). Don’t worry about modifying the image in Photoshop yet. We will do that for Project 2 and you can include more photos at that time.
5. Include at least one list or table (using ordered list tags, unordered list tags, or table tags).
6. Include at least three external links to sites of interest. These external links must be opened in new windows (use target=”_blank”).
7. Make sure you include your email address somewhere on the site (you do not have to use a mailto link, but can if you wish to- just make sure the text on the page is your actual email address).
8. Add a date to the bottom of the home page. Update this every time you make a change.
9. Make sure you save the pages with .html extension. Your home page has to be index.html.
10. Upload all associated files using Fetch to your server. On your server, find “public_html” folder and upload all your files (html files and image files) into that folder.