11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
Recitation I – Introduction to Web Page Creation with
Dreamweaver
First, a brief history of the WWW
In 1989 while at the Conseil Européenne pour la Recherche Nucleaire (CERN) in
Geneva, Switzerland, Tim Berners-Lee wrote a hypertext editor program on a
NeXT machine to link documents over a network so physicists could share
information on their research. He called the program WorlDwidEweb. He ran the
program on a “web server” at CERN. Three new technologies were incorporated
into his web server idea. Briefly, they were HTML (HyperText Markup Language)
used to write the web documents, HTTP (HyperText Transfer Protocol) to
transmit the pages, and a web browser client software program designed to
receive, interpret data and display results. An important concept in the web
server idea was the fact that the client software program's user interface would
be consistent across all types of computer platforms so that users could access
information from many types of computers. A line-mode (i.e., text only) user
interface was completed in 1989. By May 1991 the first information-sharing
system using HTML, HTTP, and a client software program (called www) was fully
operational on a multi-platform computer network at the CERN laboratories in
Switzerland.
Educational institutions and industry took notice of Berners-Lee’s web server
concepts. In 1993 Marc Andreesen an undergraduate student at the University
of Illinois at Urbana-Champaign was working on a project for the National Center
for Supercomputing Applications (NCSA) when he led a team that developed the
graphic interface browser called Mosaic. Following the release of a beta version
of Mosaic early that year, Version 1.0 of Mosaic was released in September 1993
for the Windows, Macintosh and the X Windows System platforms. Popularity of
the graphical user interface (GUI) browser was immediate. People without
computer expertise were able to use the graphical interface and just point and
click to navigate the World Wide Web. The WWW grew quickly. Marc
Andreesen left NCSA in March 1994. He and Jim Clark formed a company later
known as Netscape Communications Corporation.
Berners-Lee decided to form the World Wide Web Consortium in September
1994, with a base at MIT in the USA, INRIA in France, and also at Keio
University in Japan. (The above brief history was copied nearly verbatim from the following source:
http://www.hitmill.com/internet/web_history.asp “History of the Web: Beginning at CERN” by Cheryl Gribble).
Prior to the above developments, in the late 1950s the U.S. federal government
created a research group called the Advanced Research Projects Agency
(ARPA). By 1969, ARPA, along with the Department of Defense and various
universities across the country, had built a computer communications network
called ARPANET, intended to keep communities connected in case of nuclear
attack. The first two nodes were at UCLA and the University of Utah. By 1971
there were 23 nodes, and by 1977 there were 111 nodes. This infrastructure
1
11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
facilitated the tremendous growth of Berners-Lee’s WWW in the U.S. By 1994
there were 4 million nodes. (The ARPANET information was taken from
http://www.dei.isep.ipp.pt/docs/arpa.html “History of ARPANET” by Michael Hauben and
http://smithsonian.yahoo.com/internethistory.html “Birth of the Internet.”)
Archived websites…at first it was text only.
Take a look at the first web site in Japan. click here.
Archived sites (1996): MIT | Yahoo! | White House
Basics of web page creation in Dreamweaver
1. Start Dreamweaver by clicking Start -> Programs-> Macromedia ->
Macromedia Dreamweaver MX.
The Dreamweaver document window is surrounded by the toolbar, insert bar,
panels, status bar and properties inspector, as well as the usual pulldown menus.
Pulldown menus
Panels
Insert bar
Toolbar
Blank workspace
to create your web
page
Status bar
Properties
Inspector
One way to find out the function of any button on the toolbars is to hold the
mouse arrow over the button icon. The name or function of the button will
appear.
2
11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
2. When you are done exploring, start a new web page by selecting File->
New. Then select Basic Page in the Category column and HTML in the
Basic Page column.
Type in some text
1. Open the Property inspector and select the font or heading type.
2. Click the Align Center icon and type in the text you would like to see in
your first web page.
3. The first three buttons on the Toolbar are “Show Code View,” “Show
Code and Design Views,” and “Show Design View.” When in “Show
Design View” Dreamweaver will show your web page as it may appear in
a web browser. Switch between Design View and Code View to see the
difference between the HTML code and the interpretation of the code by a
browser.
HTML tags
Paragraph tags and break tags
Paragraph tags <p> are paired tags that surround a block of text and place two
carriage returns after the block.
A break tag <br> is a single tag that places a single carriage return anywhere.
Shift+Enter inserts a break tag.
Click here to view a list of HTML tags.
To see the HTML code for any web page:
1. Click on the Internet Explorer icon to open the MIT web page (or any web
page).
2. Right-click on the page and choose View Source.
Save your web page
1. Look in My Computer and find your www folder on the H: drive where
your home directory resides. The terms folder and directory mean the
same. Everyone has a folder called www in their home directory.
2. Suggestion for organizing your working files…..Create a new folder in your
www folder. Call the new folder “testfiles.” After creating the first page of
your web site save the document as "index.html" in your www\testfiles
folder. Index.html is the default file name for the initial opening file on web
servers. If you open http://web.mit.edu/, you are actually opening
3
11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
http://web.mit.edu/index.html. You should not keep the index.html file in
www while it is under construction. When you have refined your site and
are ready to put it up on the web you can copy all of the contents of
www\testfiles into www (provided your file references, i.e., pathways, are
relative…more about this later).
Change the document title and page properties
1. Give your document a meaningful title, especially if you want the major
search engines to find it. You can change the document title several
ways:
a. Type a name in the space in the toolbar,
b. Pull down the Modify-> Page Properties menu and type a new
name, or
c. Right-click on any part of the white space in the document
window and choose Page Properties.
2. In the Page Properties window you can also change the text color,
margins, etc.
3. Or, select the text you typed in earlier and experiment with the format
choices in the Text Properties Inspector. In the future, Cascading Style
Sheets (CSS) text specifications will be the approved way of applying
fonts and font sizes by the W3C (the Web standards organization).
What we can put on a website
Images, text, tables, video, links, scripts and more!
Some things to know about images
Images are separate files called by the HTML program and inserted by the
browser when you view the Web page. Most new browsers support the two
standard image formats and one newer image format. The standard image
formats are GIF and JPEG. The newer format is PNG. GIF is better for images
that have blocks of continuous color, like drawings. JPEG is better for
photographic images and images that do not have blocks of continuous color,
e.g., images that have a color gradient. PNG is a replacement for the GIF
format.
Let’s find an image we can insert in our web page
1. We’ll start out by searching the web for an image you like. In the future,
your images should be your own.
2. When you find an image from the web that you would like to use on your
web page, place the cursor over the image and click on the save icon.
If you don’t see any icons just right-click on the image and choose
“Save Target As…”
4
11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
3. Navigate through the directories until you find your www\testfiles folder.
Create a subfolder, name it images, and save the image in this subfolder.
Insert an image
1. To insert an image in a web page place the cursor where you want the
image to appear.
2. Pulldown Insert-> Image.
3. Find the www\testfiles\images folder where you saved the image.
4. Click on the image file name.
Creating lists
1. Type a list of items and hit enter after each item.
2. Select all lines and choose the Unordered List button in the Properties
Inspector to format the list with bullets.
Add a separator line
1. Click on the page where you want to add a separator line.
2. Click on the Common tab in the Insert Bar and the click on the
Horizontal Rule button.
Create a hyperlink
A web site can be made up of many web pages. Hyperlinks allow you to open
additional web pages (as well as, other files) from within any web page. The
underlined blue URLs (Uniform Resource Locator) in the “Save your web page”
section above are hyperlinks, meaning when you click on them additional web
pages open. You can link to many kinds of files in your web page, but only some
file types, such as supported image formats, HTML, plug-in applications, and a
few other specialized types of files, will display in the browser.
1. Create another web page document and save it in your www\testfiles
folder OR find an existing page on the web to link to, such as
http://web.mit.edu/.
2. Create a hyperlink to http://web.mit.edu/ (SHOULD START WITH http://)
by clicking on the place in your web page where you would like the
hyperlink.
3. The click Insert->Hyperlink.
4. Type in the text that will hold the hyperlink.
5. Type in the URL of your link.
6. Consider opening the hyperlinked web page in a new window. Use the
"_blank" target option. Click OK when you are done.
5
11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
Preview your page in a browser
1. First save your work by choosing File->Save.
2. Choose File->Preview in Browser and then Edit Browser List.
3. Dreamweaver may have already located a browser program and put it on
the list during its installation process. If not, click on the + button to add a
browser, usually iexplore or Netscape. You will have to locate the .exe file
for the browser in the Programs directory.
4. You can also open your first web site.
Now you have your own web site!
Question for you to answer:
The following web page is named mypage.htm, located in your www folder.
Which files would also need to be in www for it all to appear on the internet?
<HTML><HEAD><TITLE>My Page</TITLE></HEAD>
<BODY BACKGROUND=”clouds.gif”>
<IMG SRC=”me.jpg” ALIGN=”right”>
<H1>My Web Page</H1> I have a page on the Web!<P>
<A HREF=”otherpage.htm”>Click here to see my other page.</A>
</BODY></HTML>
Web design analysis
• Use 11.204 site as an example.
• What "functions" and "contents" should this site have? What are missing?
• What are the major "design elements" found in this web site?
• What suggestions for improvement would you make?
How to design your web portfolio…Project #1
• Ponder on the overall framework of your "portfolio."
• Just usePAPER AND PENCIL! That's what real web designers do… an
example of a layout sketch.
• Prepare two things: Site Map and Design Template
Site Map
• Consider the hierarchical structure. Make it logical. Avoid creating "a
messy web."
6
11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
BELOW IS A SAMPLE FRAMEWORK - USE YOUR CREATIVITY!
•
Terminology: Web Page versus Web Site.
Design Template
• You are allowed to use only static text and a few simple images.
• Technical elements of page design:
Text (fontsize/font-face)
Image
Alignment (Left, Center, Right)
Background (Color/Image Pattern)
Color
Table
• Operational elements of page design:
Title
Navigation
Viewer should be able to recognize where they are in the site.
Index
Contents
Identity/footnotes
Resources
MIT logo web site http://web.mit.edu/graphicidentity/
7
11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
Use Dreamweaver’s Site Definition Wizard to design and organize your
website. This wizard helps you organize your working files while you are creating
your site. Then Dreamweaver can help you upload your finished files to the
server all at once. In Dreamweaver, go to Site->New Site to start the Site
Definition Wizard.
Additional thoughts:
What is your "role" in web site development?
As a planner, you need to understand all viewpoints.
As consultant:
Web strategist: suggest information presentation strategies that help your
client achieve their goals.
Web designer: compose in HTML, apply design principles, etc.
As client:
Decision maker: review and guide what your team develops.
Project leader: manage your team and develop the web site with help from
professionals.
As user:
In your experience what works, what doesn’t?
Elements of Web Development
• Strategy - marketing, target segment, media-mix, positioning,
differentiating from competitors.
• Structure - hierarchical, horizontal, database, search feature.
• Technology - HTML, Flash, Streaming video.
• Design - color scheme, top page, templates, navigation.
Your task is to develop your portal site
Strategy -> Structure -> Technology -> Design
•
•
•
•
•
•
•
Organize your thoughts... use pencil and paper!
Who is your audience?
What is the purpose of your portal site? What is the message?
What information is essential to your message?
What is your SWOT?
Which technology do you employ? Will you try flash, video
components?
What kind of design scheme will you apply? (again, what will your
target viewers like?)
8
11.204 Planning Communications and Digital Media - Recitation 1
Fall 2004
Reminders:
•
Your WWW-related files should eventually be saved in the H:/www/
folder on AFS. When your opening page is saved in your H:/www/
folder as index.html, you can view the file in IE or Netscape.
•
To edit the "index.html" file start Dreamweaver, and open the file using
the "File->Open" menu. Do not double-click on the index.html file to
edit it in Dreamweaver because it will be launched in your browser.
•
If you want to place images on your page:
o
create a folder named "media" in the "www" or your “www/testfiles”
folder.
o
save (or copy) image files into the media folder.
o
on Dreamweaver, use "Insert"->"Image" function. You need to
specify the location of the image files you want to embed in your
page.
•
If you want to start working on other contents (like a bio page...).
Create a new document from "File"->"New" (Basic HTML file). Save
your new file in the "www" folder or your working directory with a name
OTHER THAN index.html. Please remember the name. Write it down
on your site map/design template.
•
To create a hyperlink in your top page, select the text where you want
to attach the hyperlink. In the "link" box on Dreamweaver, type the
name of the file to link to (you don’t need "http://www..." in this case,
just the file name like "bio.html"). You need http://www... if you want to
make hyperlinks to external web sites.
•
To test a revised index.html file on IE or Netscape. If it remains
the same (does not reflect your work), press the "Refresh” button
(looks like a recycle logo) to reload the page in the web browser.
If you have more specific questions once you start working on Dreamweaver,
please contact your TAs for help. Next week we will spend most of our time on
the mechanics of Photoshop. The third recitation will include more skills for
Dreamweaver and Photoshop.
Also, if you are coming to the next recitation session, and have a notebook PC
loaded with Dreamweaver, please bring it with you.
9