Project 1

Get Your Web Hosting Up and Running

Grading Rubric

Step-by-Step Instructions

Overview

For this project, you will need a web hosting account and set up Dreamweaver to upload files to your site. You will then create your first webpage and save it in your project1 folder (in LocalRootFolder) and upload it to your hosting account. Your instructor will browse your site to ensure that it is operational and that there are no bugs.

About Web Hosting

I have set up hosting accounts for you on my webserver. You will use it to upload your assignments and I will then review and grade them. The purpose of this assignment is for you to learn how to use hosting on a webserver. This assignment is largely procedural. However, it may not be simple for people new to web design. To make it operational, you need to follow the Instructions below.

I will provide you with a simple website folder to hold your class projects and will demonstrate how to upload this folder to your hosting account during a lecture/demo activity in class. Be prepared to take notes as you complete the assignment because you will be using this procedure throughout the semester and it is very easy to forget all of the required steps in the procedure.

First Webpage

You will create your first webpage in Dreamweaver. For content, it needs to contain a short, personal bio and photo of you. See the rubric for specifics.

Step-by-Step Instructions:

  1. Download LocalRootFolder to desktop | Video
    (you will save all of this semester’s work into this folder)
  2. Configure Dreamweaver to connect to the web host.
  3. Create a Dreamweaver Site Shortcut (.ste) file | Video
  4. Type your name at top of the main homepage (page with links to Projects and Labs) | Video
  5. Create index.html file in project1 folder with personal bio writing assignment | Video
    • The page should contain your name, your photo, and personal bio
    • Specifics for this page:
      • Your personal bio needs to be approximately 250 words
      • Use at least these HTML tags: <h1>, <h2>, <p>, <a>, <ul> or <ol>, <li>, <img>
      • Insert a page title using the <title> tag
      • Create a link back to your main homepage (page with links to your projects)
      • Use CSS to style at least <h1>, <h2>, <p>, <a>, and fonts and page background
      • You can see my working (incomplete) sample page for MADT222 and MSP5
  6. Upload full Root Folder to the web server
  7. Review live HTML file to ensure it is the updated copy (click on your name/link on the class homepage to view your website)
  8. Once you have uploaded your assignment to the web server, you need to officially turn it in on Canvas. Watch this video to see how:

When working in the on-campus lab:

  • Always make sure to take your LocalRootFolder folder with you when done with class.
  • You should also have a copy of the Dreamweaver .STE file saved.

Things to know

  1. Purpose of an .STE key file in Dreamweaver
  2. Structure of HTML pages and relationships between/purpose of <DOCTYPE>, <html>, <head>, <body>, <style>, <p>, <ul>, <ol>,<li>, <h1> – <h6>
  3. A viewable website is simply a directory/folder on a computer accessible via the Internet by a web browser
  4. The hosted directory is going to be the exact same thing as your local directory on your desktop (root folder).
  5. Two primary technologies used in this class include HTML and CSS.
    • HTML imposes structure on information
    • CSS contains rules for the visual characteristics of the information
  6. What a link is and how you code a link <a href>
  7. For those without laptops, it is IMPORTANT to consistently do the following so that they can use Dreamweaver from any computer at home and in the lab:
    • Put local directory on desktop. Make sure it is always named the same.
    • Open Dreamweaver
    • Reset app windows
    • Double-click .STE file
    • When finished editing/uploading, put local directory back on USB drive
    • See videos
  8. Types of downloadable files. How different browsers handle downloadable files
  9. Basic web site organization (eg. put images in images/ folder, downloads, media, etc.)

Relevant Videos

<– ******************************** NO DISPLAY *************************************** –>
(Note that the following resources are directly from Adobe and that their project number does not match our project number)

<– ******************************** /.noDisplay **************************************** –>

Project 1 Rubric