This document provides an overview and instructions for an ARTDM 171 web basics and group projects class. It includes directions to put project files in a Dropbox folder labeled with the student's last name and initial. It also instructs students to create an "html" folder in Week3 and open Dreamweaver. The document outlines how to define a new site in Dreamweaver and expand/collapse files. It discusses local and remote sites, directory structure, index.html files, URLs, and how to create links and include images and stylesheets on web pages. It also covers absolute and relative URLs. The document informs students to form groups for group projects and provides deadlines. It instructs students to fill out a group project description form and

1. ARTDM 171, Week3:
Web Basics + Group
Projects
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/artdm-171/

2. Put your files in my dropbox
• Put them in a folder with your
lastname and first initial
• Example:
einstein-a
chapter3.html

3. Create a new folder in
Week3 called html

4. Open Dreamweaver

5. Site Management
• Define a new site using the Advanced
mode.
• Set the html folder as the local root

6. When do you want to setup a
new site?
• Whenever you start a new project
• Whenever you change computers (such
as from home to school)
• Whenever you want your files to work
together

7. Expand/Collapse
• When you setup a site definition,
your files appear in the Files Panel
• Use the expand button to view your
files on the server and on your
computer in a larger window side by
side

8. Your Local Site and Your
Remote Site

9. Directory Structure
•

10. The Magical index.html
File

11. URLs - Universal Resource
Locators
• URLs are used to locate Web pages
and external files and images

12. Creating a link to another
Web page
a web
page
<a href="URL">a great resource</a>

13. Including an image on a Web
page
an image
<img src="URL" />

14. Including an external
stylesheet
a css file
<link rel="stylesheet" href="URL"
type="text/css" />

15. Absolute URLs
http://www.mysite.com/folder/filename.html
• Begins with http://
• Could be a file on your own site or
someone elseʼs site

16. Relative URLs
• filename.html
‣ Tells the browser to look for a file in the same folder
• folder/filename.html
‣ Tells the browser to look one level deep, within a
folder for the file
• ../folder/filename.html
‣ Go up a level, then down into the folder for the file
• /filename.html or /folder/filename.html
‣ Go to top (root) of the site and look for the folders
or files

17. Group Projects
Form groups
No less than 3 to a group

18. Group Project Files
Get them from the materials drive

19. Group Project Deadlines
• Due next week:
‣ Description (fill out form)
• Next three weeks:
‣ Work on Group Projects
• March 9:
‣ Presentations of completed projects

20. Turn in a description of
your Group Project
Fill out the Group Project Form

21. Homework, due February 16
• Read and follow along with Chapter 4
‣ Create a Web page using text from Project Gutenberg:
 Copy text and use paste special, p92
 Add headings, p94
 Apply HTML text styles, p99
 Add a preformated text, p100
 Indent text, p102
 Add a list, p105 and nested lists, p108
 Add special characters, p109
• Turn in Group Project answers

22. Thank You