Oregon Film Festival site

This is the third part of a multi-part project related to the fictional Oregon Film Festival site.

The owner of the Oregon Film Festival would like to see a concept Web page for their site. This concept page you create will contain the color scheme (minimal CSS style), some text and an image, but no structure (i.e., this means it's just text and image content sitting in the body of the page, but not inside boxes or div tags).

Here is what the finished About page should look like:

On-Your-Own Assignment 3 finished page (a)On-Your-Own Assignment 3 finished page (b)

Part 1 - Preparation

  1. From the Course Files link for this course, copy the images from the assets folder under the oregonff folder and paste them into your assets folder. These files are in a .zip format with a file name oyo-assets.zip, so be sure to decompress the zipped files into the assets folder in the same folder structure that you see contained in the Zip file. Do not include the Zip file in your assets folder. After copying the files out of the Zip file, it can and should be deleted. Also, be sure that you do NOT have an assets folder within an assets folder. The assets folder inside the Zip file is meant to represent the one you already created.
  2. Create the concept Web page for the site: about-oregon-film-festival.html
  3. Save the about-oregon-film-festival.html page directly into your oregonff folder (not into the assets subfolder).

Instructor Note:
In Web-lingo, "assets" are all the images, videos, sound files, and even cascading style sheets related to your website. Anything that links to a Web page, but isn't itself a Web page or a server-side script file (not covered in this course) is usually considered an asset.

Part 2 - Text Content

Text content can be inserted (copied and pasted) into Web pages in Dreamweaver Design view, and Dreamweaver will do its best to create the tags of that content. It's often more efficient to use Dreamweaver Design view when you deal with text content, since Dreamweaver will usually accurately create the underlying tags of that content. Dreamweaver isn't perfect at duplicating the tags, as you'll soon find out.

Create the content of the about-oregon-film-festival.html page by following these steps:

  1. Open the about-oregon-film-festival.html page if it isn't already.
  2. Give the page a title "About our festival and mission | Oregon Film Festival" (no quotes).
  3. Open the Word document, the-oregon-film-festival-story.docx file that's in the oregonff folder in the Course Files for this course. If you have a much older version of Word, you may want to use the file the-oregon-film-festival-story.doc (also in the Course Files folder). If you don't have access to any version of Word, you can use the file the-oregon-oregon-film-festival-story.htm (also in the Course Files folder) and open this up in any browser (NOT in Dreamweaver) -- this Web page (.htm file) was created using Word and contains very irregular and non-industry standard HTML.
  4. Copy all the text from the Word document.
  5. Paste the copied text into the about-oregon-film-festival.html page in Dreamweaver Design view.
  6. Note how the Web page content looks in Design view:
    On-Your-Own Assignment 3, Part 2, Step 6
  7. Notice how all the headings appear to be the same size. Switch over to Code view. You'll see that they've all come in as h1 tags from Word. This is because they were all established as the same heading size in that program, therefore Dreamweaver interprets them the same way, too. Since there should be only one h1 on the page, and the first and main title of this page makes the most sense as the h1, you'll change all the others to h2 or h3.
  8. For every subheading (The Early Days, Timeline of Events, Founder, Mission and Goals, Judging Procedures) set those as h2 tags. For example, you can click anywhere on the words "The Early Days" (you don't have to select the whole phrase) and use the Format option pulldown menu in the Properties panel in Design view to change them from Heading 1 (h1 tag) to Heading 2 (h2 tag).
    On-Your-Own Assignment 3, Part 2, Step 8
  9. After you set all the subheadings to h2, set the month/years under Timeline of Events to Heading 3 (h3 tags) using the same method.
  10. Then, one after another, select the lines of text under each month/year h3 and set them as bulleted lists (one ul tag with li tags). You can select the text, then click the Unordered List button in the Properties panel in Design view. Note that it may only make the first line into a bulleted list. This is because of the way it was set up in Word -- Dreamweaver viewed each list item as belonging to a single paragraph (one p tag only) with break tags in between to separate them. You can see this in Code view. To fix this problem, the fastest solution is to get to the end of every line, hit Delete (or Delete right on a Mac), then press Enter (or Return) to re-establish the bullets. Do this for every list item in that section.
  11. Under Judging Procedures h2, set the unordered list as a numbered list (one ol tag with li tags). Since this was set up correctly in Word as a list, it's easy to just select those list items, then press the Numbered List button in the Properties panel in Design view.

Part 3 - Minimal Styling

Normally, styling will be done using the CSS Styles panel (All tab) to the upper right of the Design view window in Dreamweaver or using CSS directly in Code view. Since we haven't gotten into CSS in great detail yet in this course, we'll just do minimal styling using Page Properties... in the Properties panel in Dreamweaver Design view. This will create CSS and we'll work with this in more depth in On-Your-Own Assignment 4.

Follow these steps to do minimal styling on your page:

  1. Open about-oregon-film-festival.html if it isn't already.
  2. Switch to Design view if you aren't already.
  3. Click the Page Properites... button in the Properties panel.
    On-Your-Own Assignment 3, Part 3, Step 3
  4. Using Appearance (CSS) the first item on the left at the top of Category, set the Background color to black (#000) and the Text color to white (#FFF). The Appearance (CSS) window should look like this:On-Your-Own Assignment 3, Part 3, Step 4

    Instructor Note:
    Never use Appearance (HTML) in Category. It gives you HTML style which is deprecated (really out-dated) and should no longer be used in modern Web design. Note also that you can change the Doctype using Title/Encoding, which is the item farther down on the list in Category.

  5. You can click Apply at this point to see how the page starts to look with the new style, but don't leave this window. (If you did click OK and left the window, just click Page Properties... again in the Propeties panel to return to it.)
  6. Click on Headings (CSS) in the Category column. Set the Heading font to Verdana..., the font-weight to bold (B button next to font), and the Heading 1 as x-large, color #FF0, Heading 2 as large, color #FC3, and Heading 3 as medium, color #FC9. The Headings (CSS) window should look like this:
    On-Your-Own Assignment 3, Part 3, Step 6
  7. Click OK. Your page should look very much like the example linked to the top of these instructions.
  8. Switch to Code view and note the updates you made with style created a style tag in the head area of your Web page and CSS code in that section. It should look like what is in this image (yellow highlighted area added to emphasize this section):
    On-Your-Own Assignment 3, Part 3, Step 8
  9. Style that is placed in the head area of your Web page like this is referred to as embedded style. Eventually, we'll move this style to it's own page (a .css file) during On-Your-Own Assignment 4. Right now though, since we are only working with this one page, it's alright to use embedded style like this when you are first starting your site.

Part 4 - Inserting Image Content

The last step is to insert the image of the founder (founder.jpg) that you should have saved from Part 1 - Preparation (above) into your oregonff/assets folder.

Follow these steps to insert the image into your page:

  1. Drag the founder.jpg image from the assets folder and drop it just before the first letter in the paragraph just below the Founder h2.
  2. After you release the image, you'll see another window appear asking for Accessibility information. It looks like this:
    On-Your-Own Assignment 3, Part 4, Step 2
  3. For Alternate text, type in the name of the founder that you see in that paragraph under the Founder h2.

    Instructor Note:
    It's critical that you always include alternate text or alt text with all your images. It's used by screen-readers -- programs that read Web pages for people who are visually impaired and cannot see them. It's also used by search engines, like Google, to determine your page ranking. If you don't have alt text for each image on your page, Google will likely lower your search engine ranking!

    As for the long description, if you can't fit everything you want to say about the image in the alt text, you can link in this long description box either a text file or Web page that includes only text that describes the image in more detail. It's not common to do this, but some images need more explanation than others...

  4. Click OK.
  5. Note that the image is sharing the same paragraph as the text. This is awkward. Click between the image and the first letter in that paragraph, and press Enter (Return) to separate the image into it's own paragraph.
  6. Save the page.
  7. Be sure to examine Code view for the image tag that you just inserted. Note how the alt attribute contains the text you typed in the Alternate text box.
Upload all files to the SWS using the Site Definition we created in class -- the Web page should go directly in the oregonff folder and the image should go in the assets folder under the oregonff folder. Always remember to avoid, file management chaos.

Mail your instructor using D2L email with a subject like CAS 111d OYO3 Uploaded Your Name (where Your Name is your actual name)

Instructor Note:
Be sure to use a browser (or more than one browser) to check your Web pages (or document) is on the SWS.