web publishing: basics - information systems &...

Web Publishing Basics


Jeff Pankin MIT Information Services and Technology

Macromedia Dreamweaver CS3

v.1I modified: 1/03, 1/04, 9/05, 1/06, 5/06, 11/06, 2/07, 4/08, 2/09


Table of Contents

Part I: HTML Basics ....................................................................................................... 1

Mapping Your Web Site .......................................................................................................................... 1 Naming Web Files .................................................................................................................................. 2

Setup for Day One ........................................................................................................................... 3 Useful Shortcuts ............................................................................................................................... 3

Parts of an HTML Document .................................................................................................................. 4 Common HTML tag structures ............................................................................................................... 4 Every HTML document consists of the following html tags which provide structure to the document: .. 4

Some commonly used basic html paragraph level formatting tags: ................................................ 5 Exercise 1: Creating the member.html Page .......................................................................................... 7

Membership Page ............................................................................................................................ 7 Exercise 1 - HTML Solution ............................................................................................................. 9

More Basic Text Markup ....................................................................................................................... 10 Character-Level Tags ..................................................................................................................... 10 Special Characters ......................................................................................................................... 11

Additional Paragraph-Level Tags ......................................................................................................... 12 Bulleted or Numbered lists ............................................................................................................. 12 The Comment Tag ......................................................................................................................... 12

Exercise 2: Adding Text Features ........................................................................................................ 13 Draft 2 - Browser View ................................................................................................................... 13 Draft 2 - HTML Source Code ......................................................................................................... 14

Formatting Using Cascading Style Sheets (CSS) ................................................................................ 15 Web Standards .............................................................................................................................. 15 About Styles ................................................................................................................................... 15

Basic CSS Syntax................................................................................................................................. 16 Adding Color to Web Pages ................................................................................................................. 17 Exercise 3: Adding Color ...................................................................................................................... 19

Draft 3 - Browser View ................................................................................................................... 19 Draft 3 - HTML Source Code ......................................................................................................... 20

Adding Graphics to Web Pages ........................................................................................................... 21 Alignment ....................................................................................................................................... 22 Pathnames ..................................................................................................................................... 23 Relative versus Absolute references ............................................................................................. 24

Same folder .......................................................................................................................................... 24 Exercise 4: Adding Images ................................................................................................................... 25

Draft 4 - Browser View ................................................................................................................... 25 Draft 4 – HTML Source Code ........................................................................................................ 26

Adding Links to Web Pages ................................................................................................................. 28 Relative versus Absolute links ....................................................................................................... 28 Example link ................................................................................................................................... 28 Code for using an image as the link ............................................................................................... 28 Create a link for an email address ................................................................................................. 29

Exercise 5: Adding Links ...................................................................................................................... 31 Draft 5 - Browser View ................................................................................................................... 31 Draft 5 – HTML Source Code ........................................................................................................ 32

Using Tables ......................................................................................................................................... 33 Additional Table Attributes ............................................................................................................. 34 Formatting table cells and text using styles ................................................................................... 35


Part II: Using Design mode to Create Web Pages .................................................... 37

More about Dreamweaver? .................................................................................................................. 37 Setting Up Dreamweaver CS3 ....................................................................................................... 37

Preferences Setup ................................................................................................................................ 38 Creating HTML Documents in Dreamweaver ....................................................................................... 38

Working with Text ........................................................................................................................... 38 Creating a New File / Entering Text ............................................................................................... 38 Copying Text into Dreamweaver .................................................................................................... 39 Naming Your Document ................................................................................................................. 39 Changing Text Features................................................................................................................. 39

Working with Styles in Dreamweaver ................................................................................................... 40 Open the CSS Panel and click on All to see your styles. .............................................................. 40

Exercise 6: Creating the index.html Page ............................................................................................ 41 Working with Images ............................................................................................................................ 42

Common sources for images ......................................................................................................... 42 Common image file types for the web ............................................................................................ 42 Inserting images in your Dreamweaver files .................................................................................. 42 Image Size Considerations ............................................................................................................ 43

Defining a Site in Dreamweaver ........................................................................................................... 43 Creating a Site Definition ............................................................................................................... 43

Creating a Watercolor Site ................................................................................................................... 44 Adding Links ......................................................................................................................................... 45 Working with Tables ............................................................................................................................. 45

Creating a Table ............................................................................................................................. 45 Row and Column Spans ................................................................................................................ 46 Common problems with tables in Dreamweaver ........................................................................... 47

Exercise 7 – Working with Tables ........................................................................................................ 48 President’s Message - Browser View ............................................................................................ 48

Exercise 8: Page Design – using a layout table ................................................................................... 49 Using a Page as a "Template" for Other Pages ................................................................................... 50 Exercise 9: Creating the "Template" File .............................................................................................. 50 Exercise 10: Applying the "Template" design to New Pages ............................................................... 50 Exercise 11: Adding Tables/Named Anchor Links/Graphics to a Page ............................................... 52 Upload Your Files to a Web Server Securely Using Dreamweaver 8 .................................................. 54

Set up Dreamweaver 8 on your computer to use Secure FTP ...................................................... 54 Viewing the Final Product on the Web ........................................................................................... 55

Web Publishing Basics – Resources .................................................................................................... 56

Copyright © 2009 by Massachusetts Institute of Technology. All Rights Reserved.


Page 1

Part I: HTML Basics

Mapping Your Web Site

Home Page (Table of Contents)

About Club (contact info)

Monthly Archive

President's Message

Gallery of Art

Monthly Archive

News Articles

Archive?

Club Officers

Separate Home Pages?

Membership Info

Application Form

Calendar of Events

Archive?

Club Committees

Separate pages

Separate pages


Page 2

Naming Web Files

Special Naming Conventions to Remember: Avoid spacebar spaces and special characters such as these when naming your html files: / \ @ & $ + * ? . To avoid confusion and user error, use all lower case letters as UNIX systems view upper and lower case as different characters.

Home Page (Table of Contents)

About Club (contact info) about.html

Monthly Archive

President's Message

presmsg.html

Gallery of Art gallery.html

Monthly Archive

News Articles news.html

Archive?

Club Officers officers.html

Separate Home Pages?

index.html

Membership Info

member.html

Application Form

application.html

Calendar of Events

calendar.html

Archive?

calendar_06_01jan.html calendar_06_02feb.html calendar_06_03mar.html

Club Committees committees.

html

Separate pages

Club Committees committees.

html

Separate pages


Page 3

Setup for Day One

1. Change Preferences

Mac users: Dreamweaver menu > Preferences Windows users: Edit Menu > Preferences

• General – deselect Use CSS instead of HTML • Code Hints – Close Tags: Never; Enable code hints: uncheck • Fonts – Code view: 12pt • Preview in Browser – Internet Explorer or Firefox (Windows); Safari (Mac)

Close Preferences.

2. Create a new document – File Menu > New > General tab > Category: Other > Text

3. View Menu > Hide Panels (F4)

4. View Menu > Toolbars – deselect the Document & Coding toolbars

5. Mac users: click green button to maximize window

Useful Shortcuts

Shortcut Windows Mac

Copy Ctrl-C -C

Paste Ctrl-V -V

Undo/Repeat Ctrl-Z / Ctrl-Y -Z / -Y

Preview in Browser F12 option-F12

Switch Programs – Dreamweaver/browser

Alt-Tab -Tab

move mouse to bottom of screen to show Dock then click program icon


Page 4

Parts of an HTML Document

Tags give structure to an HTML document. They create sections using headings, paragraphs and tables. Tags allow visually impaired people using screen readers to quickly skip over content. Formatting is accomplished using Cascading Style Sheets (CSS).

Common HTML tag structures

<tag> data </tag> All tags with the exception of the <br />, <hr /> and <img /> tags must be entered in pairs of an open and a close tag as shown here.

<tag attribute="value"> data </tag>

Some tags require attributes while with others may include attributes that are optional for designating things like alignment, color or size.

<img /> <hr /> A few tags are single tags which require a space and forward slash at the end.

Every HTML document consists of the following html tags which provide structure to the document:

<html> </html> This pair of tags is used at the very start and close of every html document. The html tag signals to the browser which encoding scheme is required to display the page content.

<head> </head> The head tag pair is used to mark a section of the html document that is purely instructional rather than part of the viewable web page. The head tag can hold comments as well as tags such as the <title> tag described below.

<title> </title> The title tag pair should be nested inside the head tag. Enter the text that you wish to have appear in bookmarks, on the title bar of a browser’s window. In addition the text within the title tags is also generally used by search engines as a means of helping prioritize and index your page.

<body> </body> The body tags are used at the opening and close of the visual regions of your web page. Any text or image that you wish to make visually available to viewers must be nested somewhere in between the body tags.

Separate pages


Page 5

Some commonly used basic html paragraph level formatting tags:

The following formatting tags apply to an entire paragraph.

<h1> </h1> <h1> through <h6>

These tags are referred to as heading tags--not to be confused with head tags described above. Heading tags can be used to make text on your web pages stand out size wise relative to a browser’s default text.

The smaller the h tag number the larger the text size. Use <h1> tags for example to display a main heading on your web page. Use <h2> tags for subheadings. Heading tag text sizes are set with relation to a browser’s default text size.

The use of heading tags allows screen reading devices to skip sections of content.

<p></p> In order to mark the beginning and end of paragraphs, use paragraph tags. Wherever a <p> tag is used, a browser will insert a line of empty space between text.

<br /> The break tag is used to insert line breaks (not paragraph) breaks. <br /> tags do not create an extra line of white space between text lines. One of three exceptions, the <br /> tag does not have a corresponding close tag.

<hr /> If you would like to insert a line between sections of your web page, you can use the horizontal rule tag. Like the <br /> tag, the <hr /> tag does not have a close tag.

<blockquote> </blockquote>

The <blockquote> tag indents a paragraph of text from the right and left margins. It’s useful to set apart a block of text from what comes before and after.


Page 6

Sample of a basic html page

<html>

<head> <title>MIT Watercolor Club: Home</title> </head>

<body> <h1>MIT Watercolor Club Home Page</h1> <hr /> <h2>Mission Statement</h2> <p>The MIT Watercolor Club is dedicated to promoting….</p> </body>

</html>

How this page might look in a browser:


Page 7

Exercise 1: Creating the member.html Page

Membership Page

1. Open the source.txt document. 2. Open the template.html document 3. Save the template.html document as member.html 4. Copy lines 120-136 from the source.html document 5. Paste into the <body> of the member.html document

The MIT Watercolor Club Membership The MIT Watercolor Club is committed to offering every member of the MIT Community the opportunity to create beautiful and fulfilling works of art with a minimum of training and expense. We want to help artists meet each other, share their work, and socialize. Who Can Join? Anyone can be a member of the Club, providing you are somehow affiliated with MIT, such as an administrative or support staff member (including part-time), a faculty or teaching staff member, a student (graduate or undergraduate), an alumnus/a, or a spouse or family member of any affiliate. How to Join If you are interested in joining, send email to [email protected]. You can also drop by our offices at W20-605 (the roof of the Student Center) and fill out an application.


Page 8

Modify your HTML so the page looks like the screen shot below. Follow these steps:

1. Add heading and paragraph tags to give structure to the document 2. Add the horizontal rules 3. Add blockquote tags 4. Add a title 5. Save member.html


Page 9

Exercise 1 - HTML Solution

<html> <head> <title>The MIT Watercolor Club: Membership</title> </head> <body> <h1>The MIT Watercolor Club</h1> <hr /> <h2>Membership</h2> <blockquote> <p>The MIT Watercolor Club is committed to offering every member of the MIT Community the opportunity to create beautiful and fulfilling works of art with a minimum of training and expense.</p> <p>We want to help artists meet each other, share their work, and socialize.</p> </blockquote> <h3>Who Can Join?</h3> <blockquote> <p>Anyone can be a member of the Club, providing you are somehow affiliated with MIT, such as an administrative or support staff member (including part-time), a faculty or teaching staff member, a student (graduate or undergraduate), an alumnus/a, or a spouse or family member of any affiliate.</p> </blockquote> <hr /> <h2>How To Join</h2> <blockquote> <p>If you are interested in joining, send email to [email protected].</p> <p>You can also drop by our offices at W20-605 (the roof of the Student Center) and fill out an application.</p> </blockquote> </body>

</html>


Page 10

More Basic Text Markup

Character-Level Tags

The following tags apply formatting to text within a paragraph. Strong <strong></strong> vs. bold <b></b> tag option Both the strong <strong></strong> and the bold <b></b> tags will make your html coded text appear bold in a browser. If the reason that you are adding bold to your web page is to enhance the meaning of something that you have written, we would recommend that you use the <strong> tag instead of the simple <b> tag. The <b> tag should only be used where the look of the text as bold is more important than the extra weight or meaning that bold might carry. For someone who encounters your pages through a text reader rather than through a graphical display, the addition of strong tags suggests that the information nested in those tags is of greater importance than other text on the page. Sample of the strong and bold tags in code view

<p>In <strong>EXAMPLE ONE</strong> we use a strong tag to stress show a particularly important relationship between what will be said here and example one </p> <p><b>In</b> the next example we use the bold tag to visually mark a start of a paragraph but the bold does not add any more meaning to the page than a paragraph tag.</p>

How these strong and bold tags would appear in a browser In EXAMPLE ONE

we use a strong tag to stress show a particularly important relationship between what will be said here and example one.

In

the next example we use the bold tag to visually mark a start of a paragraph but the bold does not add any more meaning to the page than a paragraph tag.


Page 11

Emphasis <em></em> vs. italic <i></i> tag option Not unlike the distinction between strong and bold we make the similar distinction between the emphasis <em></em> and the <i></i> tags. Sample of the emphasis, italic and bold tags in code view

<p>Nietzsche often speaks of <em>sui generis</em> in his writing on Wagner. <p> <p><i><b> Why do you think this is? </b></i></p>

How this code would appear in a browser Nietzsche often speaks of sui generis

in his writing on Wagner.

Why do you think this is?

Special Characters

To add a special character such as those shown in the table below, use inline tags as shown in the right-hand column. Instead of having angle brackets, special characters are nested between ampersands and semicolons.

character html tag © © < < > > & & ® ® Á Á ü ü blank space

Sample html code using the copyright tag <p>Copyright© MIT 2002</p> Result in browser Copyright© MIT 2002


Page 12

Additional Paragraph-Level Tags

Bulleted or Numbered lists

Bulleted lists are created by using a set of companion tags with a pair of <li></li> list item tags at beginning and ending each item in the list and nested inside a single pair of either <ul></ul> unordered list (for bulleted lists) or <ol> </ol>ordered list (for numbered lists) tags. Sample html code for a bulleted list

<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

Result in browser

• item 1 • item 2 • item 3

The Comment Tag

To place a comment within HTML code use the following tag: < ! - - “place comment text here" - - >

e.g., <! - - The data entry code begins here - - >


Page 13

Exercise 2: Adding Text Features

Modify member.html, using the HTML tags for bulleted lists, special characters, and boldface. Your result should look similar to the example below when viewed in a browser.

Draft 2 - Browser View


Page 14

Draft 2 - HTML Source Code

<html> <head> <title>The MIT Watercolor Club: Membership</title> </head> <body> <h1>The MIT Watercolor Club</h1> <hr /> <blockquote> <h2>Membership</h2> <blockquote> <p>The MIT Watercolor Club is committed to offering every member of the MIT Community the opportunity to create beautiful and fulfilling works of art with a minimum of training and expense.</p> <p>We want to help artists meet each other, share their work, and socialize.</p> </blockquote> <h3>Who Can Join?</h3> <blockquote> <p>Anyone can be a member of the Club, providing you are somehow affiliated with MIT, such as:</p> <ul> <li>an administrative or support staff member (including part-time)</li> <li>a faculty or teaching staff member</li> <li>a student (graduate or undergraduate)</li> <li>an alumnus/a</li> <li>a spouse or family member of any affiliate.</li> </ul> </blockquote> </blockquote> <hr /> <blockquote> <h2>How to Join</h2> <blockquote> <p>If you are interested in joining, send email to [email protected].</p> <p>You can also drop by our offices at W20-605 (the roof of the Student Center) and fill out an application.</p> </blockquote> </blockquote> <hr /> <p><em>Copyright © 2003 by <strong>The MIT Watercolor Club</strong><br /> For general Club information, send mail to [email protected].<br /> Last modified: May 15, 2006 </em></p> </body> </html>


Page 15

Formatting Using Cascading Style Sheets (CSS)

Web Standards

Originally the web was used by academics to share scientific papers. HTML tags were designed to give structure to these papers. As the web came to be used commercially developers wanted to use fonts, color and other kinds of formatting. Microsoft and Netscape added the <font> tag to their browsers to allow formatting to be embedded in HTML documents. The World Wide Web Consortium (W3C) the international standards body for the web created standards for styles and stylesheets in 1996. Styles are meant to facilitate a uniform approach to formatting for designers. Stylesheet definitions provide consistent formatting for a web page or an entire site. After introducing CSS, the W3C recommended that certain formatting tags in HTML (e.g., the <font> tag) be phased out and replaced by styles.

About Styles

1. A style is a collection of formatting (e.g., bold, blue, 24px). By applying a style to content all the formatting in the style is applied at once.

2. When the formatting of a style is changed all content with that style gets updated

automatically.

3. Styles may be located in the <head> of a web document available only to that document. Or they may be kept in a separate file and used by some or all the pages in a web site.

A style definition contains three parts: a selector, a property and a value.

selector 1. the name of a tag (tag style) 2. a name you create (class style)

h1, p, body .mystyle, .align-table

property the attribute you wish to change font-size, font-family, color

value what the attribute will change to 24px, “times new roman", blue

Note: 1) class style names begin with a period

2) values with more than one word are in quotation marks


Page 16

Basic CSS Syntax

The style tag including the type attribute is placed in the <head> of the document. A single style declaration may include multiple property/value pairs separated by a semicolon.

<style type="text/css"> selector {property: value} selector {property: value; property: value}

</style> Examples of Properties and Values

Property Values color (text color) blue, #44AA77

background (background color) blue, #44AA77

font-family arial, “times new roman”, sans-serif

font-size 24px, 200%

text-align (apply to a block level tag e.g., <p> or <h2> etc.)

left, right, center

vertical-align top, middle, bottom

Block level tag: has a line break before and after; may contain other blocks

Inline tag: occurs in the flow of text Tag style formatting is applied when the tag is used. Class style formatting must be applied by

you. Apply a class style to a block level tag. <p class=”bluetext”>Welcome to the MIT Watercolor Club Home Page</p> Apply a class style to inline content using the <span> tag. <p>Welcome to the <span class="bluetext">MIT Watercolor Club</span> Home Page.</p> Note: We drop the period from the name of a class style when it is applied.


Page 17

Adding Color to Web Pages

There are 16 color names in the CSS2 standard. aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,

white, and yellow

To practice with color we will use styles. To change the color of the <h1> tag modify the style in the <head> of your document by adding the color property. For the value try color names and then hexadecimal codes. Save the file after each change and preview it in your browser.

<style type="text/css">

h1 {color: blue or color: #0000FF} body {background: silver} .mystyle {color: maroon}

</style>

Specify color using 6-digit hexadecimal code

Colors are given in RGB as hexadecimal codes (“#RRGGBB", e.g. "#C0FFC0") which are used inside other tags as attributes for whatever text or object is involved. In this six digit code the first two digits specifying the red value, the middle two the green value, and the last two the blue value. There are up to 16 different possible values for each of the six places. The values range from 0-9 and then from A-F. Quite the opposite of printed color, when working with projected colors, black is represented by the absence of color or #000000 as shown below. White then would be represented as #FFFFFF.

Color Code Red Green Blue red #FF0000 FF 00 00 green #00FF00 00 FF 00 blue #0000FF 00 00 FF black #000000 00 00 00 white #FFFFFF FF FF FF gray #888888 88 88 88 yellow #FFFF00 FF FF 00 cyan #00FFFF 00 FF FF

Some useful color sites: http://www.w3schools.com/html/html_colornames.asp - (source of color names)

http://www.visibone.com/colorlab/big.html - (click to try different colors) http://kuler.adobe.com/ - (select color schemes) http://www.uxmatters.com/MT/archives/000069.php - (article about color theory) http://www.vischeck.com - (test for color accessibility)


Page 18

1. To change the text color for all the text on a page change the color property in the body tag: body {color: blue} 2. To change the background color for the entire page change the background property in the body tag: body {background-color: silver} When using multiple properties to define a style separate them with semi-colons. 3. To color some but not all text define a class style for the color (or other formatting). Then apply the style using the <span> tag.

.mystyle {color: maroon} <p>Welcome to the <span class="mystyle">MIT</span> Watercolor Club.

Remember that the name of a class style is defined with a period in front of it, but the period is dropped when actually applying the style.


Page 19

Exercise 3: Adding Color

Modify member.html such that the word MIT in the main header is maroon, and the overall text color and background color are different from the default.



Page 20

Draft 3 - HTML Source Code

<html> <head> <title>The MIT Watercolor Club: Membership</title> <style type="text/css">

body {color: blue; background: silver} .mystyle {color: maroon}

</style> </head> <body> <h1>The <span class="highlight">MIT</span> Watercolor Club</h1> <hr /> <blockquote> <h2>Membership</h2> <blockquote> <p>The MIT Watercolor Club is committed to offering every member of the MIT Community the opportunity to create beautiful and fulfilling works of art with a minimum of training and expense.</p> <p>We want to help artists meet each other, share their work, and socialize.</p> </blockquote> <h3>Who Can Join?</h3> <blockquote> <p>Anyone can be a member of the Club, providing you are somehow affiliated with MIT, such as:</p> <ul> <li>an administrative or support staff member (including part-time)</li> <li>a faculty or teaching staff member</li> <li>a student (graduate or undergraduate)</li> <li>an alumnus/a</li> <li>a spouse or family member of any affiliate.</li> </ul> </blockquote> </blockquote> <hr /> THE REST OF THIS PAGE'S HTML CODE IS OMITTED


Page 21

Adding Graphics to Web Pages

The image <img /> tag is used whenever graphics are needed on a web page. The image <img /> tag is one of the exception tags that does not have an open and a close tag. All image tags include an additional attribute src="" specifying the source name of the graphics file. In addition, because not all visitors will be viewing your pages graphically, use of the alt=" " attribute which allows you to enter descriptive information about the image. Use of the alt attribute is required at MIT in compliance with the Americans with Disabilities Act (ADA). Sample of an image tag in code view

<p>Here is a picture of my dog. <img src="dog.gif" alt="picture of Fido" /> She's great, isn't she?</p>

How the above code would appear in a browser:

Here is a picture of my dog. She's great, isn't she? This is an example of image with <alt> tag displayed in browser view on Windows computer. My cat Felix is very special to me.

picture of Felix


Page 22

Alignment

Images align vertically on the baseline of the surrounding text. To align images differently we use styles. For example, notice how the text around Felix aligns to the middle of the image of Felix. To accomplish this we create a new style class using the vertical-align property and apply it to the <img> tag.

.align-image {vertical-align: middle} Apply to <img> tag. <p> My cat <img src="felix.gif" alt="picture of Felix" class="align- image" /> Felix is very special to me.</p>

Why don't we simply change the style of the <img> tag? To center an image on a page we could create a class style using the text-align property. But the text-align property doesn’t work on an <img> tag. However, if we place a <p> tag around the <img> tag we can then place the style in that <p> tag.

.align-center {text-align: center} Apply to <p> tag. <p class="align-center"> <img src="felix.gif" alt="picture of Felix" /> </p>


Page 23

Pathnames

1. When the image is located in the same directory (folder) as the page just refer to the file name.

2. When the image is located in a subdirectory other than the page you must specify the

pathname. e.g., images/dog.gif e.g., images/pets/dog.gif

Best practice

1. Let Dreamweaver create the pathname for you (we'll see this tomorrow).

2. Keep all your site graphics together in one directory.

3. When the image is located in a directory above the web page Dreamweaver will show the notation as ../dog.gif


Page 24

Relative versus Absolute references

If the document that you name in the src attribute is contained within the same directory as the current document the path name need only include the file name. This is called a relative reference. If, however, the document you are referencing is located in another directory or even on another computer, you must enter the pathname in the src attribute. This is called an absolute reference. Note the reference shorthand.

Same folder

index.html begonia.gif

<img src=”begonia.gif” />

Different Folders

index.html

images folder

begonia.gif

<img src=”images/begonia.gif” />

Different Folders

begonia.gif

other folder

index.html

<img src=”../begonia.gif” />


Page 25

Exercise 4: Adding Images

Modify member.html to include two graphics: 1. pic-wine.gif (a file in the root folder) 2. mit-redgrey-footer3.gif (downloaded from web.mit.edu/psb and saved in the root folder)


Picture is “pic-wine.gif”

Picture is: "mit-redgrey-footer3.gif"


Page 26

Draft 4 – HTML Source Code

<html> <head> <title>The MIT Watercolor Club: Membership</title> <style type="text/css"> body {color: blue; background: silver} .highlight {color: maroon } .align-imaget {vertical-align: middle} </style> </head> <body> <h1>The <span class="highlight">MIT</span> Watercolor Club <img src="pic-wine.gif" alt="club logo" class="align-image" /> </h1> <hr /> <blockquote> <h2>Membership</h2> <blockquote> <p>The MIT Watercolor Club is committed to offering every member of the MIT Community the opportunity to create beautiful and fulfilling works of art with a minimum of training and expense.</p> <p>We want to help artists meet each other, share their work, and socialize.</p> </blockquote> <h3>Who Can Join?</h3> <blockquote> <p>Anyone can be a member of the Club, providing you are somehow affiliated with MIT, such as:</p> <ul> <li>an administrative or support staff member (including part-time)</li> <li>a faculty or teaching staff member</li> <li>a student (graduate or undergraduate)</li> <li>an alumnus/a</li> <li>a spouse or family member of any affiliate.</li> </ul> </blockquote> </blockquote> <hr /> <blockquote> <h2>How to Join</h2> <blockquote> <p>If you are interested in joining, send email to [email protected].</p> <p>You can also drop by our offices at W20-605 (the roof of the Student Center) and fill out an application.</p> </blockquote>


Page 27

</blockquote> CONTINUED FROM PREVIOUS PAGE <hr /> <p><img src="mit-redgrey-footer3.gif" alt="MIT logo" /> <em>Copyright © 2003 by <strong>The MIT Watercolor Club</strong><br /> For general Club information, send mail to [email protected].<br /> Last modified: May 15, 2006 </em></p> </body> </html>


Page 28

Adding Links to Web Pages

The anchor <a> </a> tag is used to create links to other web pages or to locations within a page. The open and close <a> </a> tags surround the content which will be the link on the page. The link tag is always used in conjunction with the href="" attribute which indicates exactly the link destination. There are three link types that will be covered here:

1. links to other web pages within your web site (relative links) 2. links to remote web pages (absolute links) 3. links to email addresses

Relative versus Absolute links

If the document that you are linking to is contained within the same directory as the document you are linking from, the path name need only include the file name. This is called a relative link. If, however, the document you want users to be able to link to is located in another directory or even on another computer, you must enter the full URL or pathname in the <a> tag. This is called an absolute link.

Example link

<p>Click to find out <a href="more.html"> more about this deal! </a> </p>

On the live web page clicking on more about this deal! would open the page more.html.

Why is the above better than... "Click here to find out more about this deal!"?

Code for using an image as the link

If you would like to make an image into a link, surround the <img /> tag with open and close <a> </a> tags as shown below.

<p> To learn more about one of these animals, click on the appropriate picture. <a href=" http://en.wikipedia.org/wiki/Dog"> <img src="dog.gif" /> </a> <a href=" http://en.wikipedia.org/wiki/Cat"> <img src="cat.gif" /> </a> </p>


Page 29

Create a link for an email address

Links can be used to launch a default email program and paste an address in the to: field of a new message. Instead of entering a file name or url, the syntax for sending email is: <a href="mailto:email-address"> email address here too! </a> Sample code view

<p> To find out more, send email to: <a href="mailto:[email protected]"> [email protected] </a>.</p> How this would appear in a browser

To find out more send email to: [email protected].

Or perhaps more accessible

To find out more send email to: [email protected].

mailto:[email protected]�


Page 31

Exercise 5: Adding Links

Modify member.html to include three links: 1. application.html - link to application.pdf (a relative reference) 2. MIT logo - link to http://web.mit.edu/ - (an absolute reference) 3. [email protected] (an email address)


Link to “application.pdf”

Link to: “http://web.mit.edu/” Use “mailto:” link here


Page 32

Draft 5 – HTML Source Code

THE TOP OF THIS PAGE'S HTML CODE IS OMITTED <h2>How to Join</h2> <blockquote> <p>If you are interested in joining, send email to [email protected].</p> <p>You can also drop by our offices at W20-605 (the roof of the Student Center) and fill out an <a href="jeff.html">application</a>.</p> </blockquote> </blockquote> <hr /> <a href="http://web.mit.edu"><img src=”mit-redgrey-footer3.gif" alt="MIT home page" /></a> <em>Copyright © 2003 by <strong>The MIT Watercolor Club</strong><br /> For general Club information, send mail to <a href="mailto:[email protected]">[email protected]</a><br /> Last modified: May 15, 2006 </em></p> </body> </html>


Page 33

Using Tables

Tables can be extremely helpful when you are trying to layout your web pages. Tables are constructed row-by-row and cell-by-cell using a combination of tags listed here.

<table> The table tag is used to open and close the entire table. <tr> The table row tag is used at the beginning and close of each row. <td> The table data tag is used for the construction and content of each cell in a

table. <th> The table header tag is used for the top row of a table. It is placed within

the overall table construction much like the <td> tag. Values inside the <th> tags will automatically be centered and bolded.

Tables can also have attributes such as alignment and size specifications just as other tags can. Code for a simple two column table:

<table> <tr> <th>Year</th> <th> Vacation</th> </tr> <tr> <td>Summer 2005</td> <td>Cape Cod</td> </tr> <tr> <td>February 2005</td> <td>Disney World</td> </tr> </table>

Sample table as it would look in a typical browser


Page 34

Additional Table Attributes

border

bordercolor

The border attribute requires pixel size specification and can be included within the <table> tag. Borders are the external lines that outline tables. If borders have been selected, cellspacings will be included by default around the interior cells of a table.

cellspacing Cellspacing is an attribute that, like the border attribute, is specified in pixels. Cellspacing controls the thickness of the space between the cells.

cellpadding Cellpadding is the space between the contents of a table and the table borders and cellspacing lines.

width Width can be used as an attribute inside the table tag or within a td tag to hardcode the width of the entire table or a single column using either percentages or pixels

height

as measurement values

Can be used inside the table tag to hardcode the height of the entire table using either percentages or pixels as measurement values

colspan

Use this attribute within a <td> tag to have cell span across a designated number of columns in the table.

rowspan Use this attribute within a <td> tag to have cell span across a designated number of rows in the table.

bgcolor Use with color name or 6 digit number preceded by a # sign. HTML code for a table including table header tag, width and colspan attributes.

<table width="80%" border="1"> <tr> <th>Year</th> <th> Vacation </th> </tr> <tr> <td>Summer 2005</td> <td>Cape Cod</td> </tr> <tr> <td>February 2005</td> <td>Disney World</td> </tr> <tr><td colspan="2"> <em>The family loved Disney! </em> </td> </tr> </table>

This is how it would appear in a typical browser.


Page 35

Formatting table cells and text using styles

Most table attributes are available as style properties as well. Formatting tables through the use of styles ensures consistency among all tables on all pages in a site.

<head> <style type="text/css">

.align-center {text-align: center}

.gray {background: gray} table {width: 80%}

</style> </head> ……………………… <table>

<tr class="gray"> <th> Year</th> <th> Vacation </th> </tr> <tr> <td>Summer 2005</td> <td>Cape Cod</td> </tr> <tr> <td>February 2005</td> <td>Disney World</td> </tr> <tr><td colspan="2" class="align-center"> <em> The family loved Disney! </em> </td> </tr>

</table>

The result in a browser.


Page 37

Part II: Using Design mode to Create Web Pages

More about Dreamweaver?

For the beginning web publisher, Dreamweaver is essentially a page layout program that automatically writes the HTML code necessary to display your pages on the web. Many of Dreamweaver's content-handling features (e.g., the way you indent or align text, or how you make text bold or italic) are similar to those found in standard word-processing packages such as Microsoft Word.

Setting Up Dreamweaver CS3

Because it tries to pack in so many web-publishing features, Dreamweaver is a rather complicated product to use, especially for a beginner. Advanced features are listed right next to basics, and it's hard to know what to use to accomplish various results. To make your life easier, consider the following tips. Screen Setup When you start Dreamweaver for the first time, you usually get an overwhelming array of Panels on your screen. The default view of a Dreamweaver 8 screen for Windows is shown below. Panels are grouped together and docked around the document editing window, but panels can be unlocked and moved independently by grabbing the left-hand edge of a panel’s title bar with your mouse. Panels can be minimized or expanded by clicking on the white arrow to the left of the panel name.

Document Editing Window in Design View

Properties Panel

Insert Panel

Expand/Minimize Properties Panel

Files Panel showing files in the watercolor site Click panel name to

Expand/Collapse

Select this tool to view your work in html code. The adjacent button to right will split the screen, showing both the design view and the html code view.


Page 38

Preferences Setup

A few additional preferences for today. In the General category:

• Check - Use <strong> and <em> in place of <b> and <i> • Uncheck – Use CSS instead of HTML tags

In the Invisible Elements tab check all the boxes.

Creating HTML Documents in Dreamweaver

Working with Text

Handling text is one of the most frequent activities of the website publisher, and it's fairly intuitive in Dreamweaver. But there are a few quirks.

Creating a New File / Entering Text

If you already have an HTML file created, open Dreamweaver and select File >> Open to open the file. Dreamweaver can open any existing HTML file. To create a new document, choose File >> New and select HTML from the Basic Page options list. This will open up a new “untitled" document in design view.

<!DOCTYPE> The doctype tag is used for a Document Type Declaration (DTD). It is a single tag which tells the browser which version of html you are using. For more information see the section on Web Standards earlier in this document. Below is an example of a full doctype tag stating that XHTML 1.0 Transitional is the version of HTML being used. MIT supported browsers support XHTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Page 39

Copying Text into Dreamweaver

To copy text into a Dreamweaver document from elsewhere (e.g., from a mail message, a Word file, etc.), select it in the other application, copy it there (e.g., use Edit >> Copy), put your cursor in the Dreamweaver document where you want to paste, then use Edit >> Paste. Imported text sometimes requires some clean up before Dreamweaver will accurately render it as desired in html. To copy text from another Dreamweaver file, open the document in Dreamweaver, select the text, use Edit >> Copy, put your cursor at the location in the destination file, and use Edit >> Paste.

Naming Your Document

When you create any html file, you will have to give the file a name when you save the file. We recommend following exactly the same naming conventions as stated in the html section of this course. Always use the file extension ".html". You may see pages named with the ".htm" extension on the web but it is not used here at MIT. In addition, to naming the file it is good practice as explained earlier to include a <title> in every html document. Dreamweaver makes this easy by giving you a box to enter the title on the tool bar.

Changing Text Features

To change the features of a block of text, or of a specific string, select the unit of text you're interested in. The Properties Panel changes to show text-editing features. Use the options in the palette to apply the features you want.

Dreamweaver applies block-level changes (paragraph, header, blockquote) to a whole block of text, even if you have selected only a portion of the text.

Headings

Font (HTML formatting)

CSS Styles Link Destination

Color (HTML formatting)

Alignment (HTML formatting)

Blockquote

Bulleted/Numbered List

Expand/Collapse


Page 40

Working with Styles in Dreamweaver

Use the Style pop-up menu-up menu to apply or remove styles or to attach an external style sheet.

To export styles from a document to a separate file

Choose: Text Menu > CSS Styles > Export Be sure to name the file with the .css extension. Save it in the folder with your site files. Delete the styles from the original document and then attach the new style sheet to the original document and any new documents.

Open the CSS Panel and click on All to see your styles.

To create a new style

Click on the New Style icon to create a new style definition.

Choose class or Tag for the selector. Define new styles in the external stylesheet file.

To modify an existing style Double click a style to open the CSS Rule Definition dialog box for that style. Modify the style by making choices in that dialog box.


Page 41

Exercise 6: Creating the index.html Page

1. Create a new html document 2. Open the file source.txt 3. Copy lines 10-39 from the source.txt document and paste into new document 4. Give the document a title (e.g., MIT Watercolor Club: Home) 5. Save the document as index.html in the Class folder 6. Attach the watercolor.css file to this document 7. Format the content adding heading and paragraph tags, indentation. 8. Change the color of MIT in the h1 using a class style. 9. To preview your document in your assigned web browser, use the F12 key (Windows)

or Option-F12 (Mac) Your screen should look something like this. Your font, size and color choices may be different.


Page 42

Working with Images

Images can enhance a site — or make it look unprofessional. Creating effective images is an art in itself, with its own learning curve. Be prepared for the time it will take.

Common sources for images

Images you create yourself (e.g., via scanning, Photoshop, Illustrator, etc.) Clip Art (usually line-art images you take from a collection, often low quality but free) Stock Photos (similar to clip art, but usually superior quality and often expensive)

Common image file types for the web

GIF format (especially good for images with few colors, such as line art; limited to 256 colors) JPEG format (especially good for images with varieties of colors, such as photographs)

Inserting images in your Dreamweaver files

Place the cursor where you want the picture to appear. Select the Image icon from the Insert Panel (or use Insert > Image). You are asked to specify the source (i.e., location) of the picture. If the picture is on your computer, use the file browser to locate it. If the picture is on the web, specify the URL. Note that pictures that are out on the web will not be displayed in Dreamweaver, although room will be left for them — you need to preview the file in a browser before the image will appear. When you inert the image the Image Tag Accessibility Attributes box will appear asking for alternate text for the image. This will be placed in the <alt> attribute of the image tag. After you enter alt text and click ok the picture becomes the currently selected object, and the Properties Panel changes to reflect the options you have for working with images:


Page 43

Image Size Considerations

When you are editing a page with images, it may be tempting to resize the image by dragging the images handles out or in. This is not recommended as this will potentially distort an image, and can slow down the time it takes for your web page to load. If you would like to change an image’s size to better fit on your page, you can use the handles to manually display the image at the desired size and then note the width and height references in the properties panel. Edit the image in a picture editing program such as Photoshop saving a copy of the image that conforms to the desired target size for your web page. Use the new copy in your web page.

Defining a Site in Dreamweaver

Dreamweaver allows you to define a set of related web files as a "site", providing you with a site window where you can perform file operations such as naming and moving files from directly within Dreamweaver. When you modify site files from within Dreamweaver, the program automatically updates files affected by the changes. It is helpful to create your site at the same time that you create your first html file or, even better, just after you have created the index.html file that will act as your home page. Creating a site requires identifying a folder in your operating system that will be used to hold all of your related pages. Before you begin working in Dreamweaver, you should put all pre-existing image and text files that you intend to work within the designated site folder. Using the site feature, you can rename linked files from within Dreamweaver, and the program will automatically update the links to the other pages within the site folder. (If you renamed a file out on the operating system, you would break the links with no recourse but to go into each broken file and fix the links yourself — that is if you can find them.)

Creating a Site Definition

To create a Dreamweaver site, use the Site >> New Site option and choose the Advanced tab. The Site Definition panel has two parts. In the Local Info dialog box enter a name for the site. Identify the directory/folder (Local Root Folder) on your operating system that marks the root of the site. Your index.html (your default home page) file should be saved at the top level of this root directory and all your other html pages either in the root or subfolders within the root folder.


Page 44

Creating a Watercolor Site

1. From the Site menu choose New Site. 2. Select the Advanced tab. 3. Name the site watercolor. 4. Use the browse tool in the Local Root folder box to select the Class folder on your

hard drive as the root directory. Open the Class folder and be sure you see Select:Class at the bottom of the dialog box. Click the Select button.

5. Click OK. and then click Done. 6. Your site files should be available now in the Files Panel. To see an expanded view of

your site files, click on the Expand/Collapse button at the top right of the Files Panel. Click on the Expand/Collapse button again to return to Design view.


Page 45

Adding Links

You can make any element in a document into a link — if the user clicks on that element in a browser, the browser will load a new document in place of the current one. To add a link:

1. Highlight the area (this includes text and/or images) to be linked. 2. Enter the destination URL for the link in the Link box in the in the Properties panel.

To create email links simply type the email syntax into the link box:

mailto:watercolor.mit.edu

Working with Tables

Creating a Table

You can include a table in a document by selecting the Table icon from the Common tab in Insert panel (or using Insert > Table). This places the table wherever the cursor is, so be sure to place the cursor where you want it first. Dreamweaver asks you to define the initial settings for the table:

Rows/Columns how many rows and columns the table should have

Width how wide the table should be (in pixels or as percent of browser width)

Border whether to show the grid and, if so, how thick to make the outer border (in pixels)

Cellpadding how much buffer space to include between cell walls and cell contents (in pixels)

Cellspacing how thick to make the grid line between cells (in pixels)


Page 46

Once you place the table, you can include any content you want in any of the cells of the table.

In general, you can't rely on Dreamweaver's table presentation: use F12 to see the table in a browser to view how your table will really look when published. Given that, it is typical for new users to try to resize the table cells by directly grabbing the row/column separators and moving them where they think the cell dividers should go. Don't do this! Doing this hard codes width/height values for the table cells and defeats one of the key features of web-based tables — that they resize themselves based on the contents of their cells. If you accidentally set cell width/heights, you can erase these settings using the Clear Row Heights or Clear Column Widths buttons shown above in the table Properties panel.

Row and Column Spans

One of the most powerful features of tables is that they need not be restricted to a plain grid of equally-sized cells. You can merge cells to form a single larger cell that spans several columns or rows. To do this:

1. Highlight the cells you want to merge. (The lower panel of the Properties panel changes to show cell options.)

2. Select the Merge Cell option from the Properties panel, or use Modify >> Table >> Merge Cells, or just type the letter M at your keyboard.

Clear Column/Row

Heights

Merge/Unmerge Cells

Alignment Options (HTML formatting)

Background Color (HTML formatting

Border Color (HTML formatting


Page 47

Common problems with tables in Dreamweaver

While extremely powerful, the interface for working with tables in Dreamweaver leaves a little something to be desired. It's difficult to select parts of the table or the table as a whole. Some ways to select an entire table:

1. Go to the upper left corner of the table and look for the hand or crosshairs symbol, then click; or

2. Click anywhere in the table, then go to the HTML tag listing shown at the bottom of the editing window and click on the <table> tag.

When a table gets beyond a certain size and complexity, Dreamweaver seems to be a little buggy. For instance, it can't delete blocks of cells reliably in a complex table. (You may need to go into the HTML code and fix things if they get very broken...) Don’t drag corners to resize your table. Use the W (width) and H (height) boxes in the properties panel to specify a width or per cent.

Table with cells selected and ready to merge


Page 48

Exercise 7 – Working with Tables

For this exercise you will need to get the content text from the source.txt file lines 143-169 and paste it into the body of a new html file.

1. Insert a new table above the text (use a Header for the Top row) 2. Move the content to the appropriate cells of the table 3. Format the page to make it look like the table below using tags and styles. 4. Save it as presmsg.html.

President’s Message - Browser View

table width = 80%


Page 49

Exercise 8: Page Design – using a layout table

Revise your index.html file to include graphics, links, and a table-based layout: 1. Insert the pic-wine.gif image from the Class folder into the main header. (Insert > Image) 2. Create a 3 by 2 table with no border and a width: 80%. (Insert > Table) 3. Merge the top row so it spans two columns. Merge the bottom row so it spans two

columns. (Modify > Table > Merge Cells) 4. Move your previous content into the appropriate cells. Use the Tag Selector bar to

select content to cut and paste. 5. Copy the title as a smaller version into the bottom row which is spanning 2 columns. 6. Create blank files named calendar.html, presmsg.html and gallery.html. Right-click or

Control-click (Mac) on the site folder in the Files Panel and choose New File. 7. Add the new navigation items Home, Calendar, Gallery, Membership, President’s

Message and Contact Us in the middle row, left column to make a Nav Bar. 8. Link Home to the index.html file, Membership to the member.html file, President's

Message to the presmsg.html file. Link Calendar and Gallery to the blank files you created in step 6.

9. Create a mailto: link for Contact Us. 10. Save the index.html file.

You should produce something like this:


Page 50

Using a Page as a "Template" for Other Pages

Dreamweaver lets you manage an entire site’s look and feel globally through its Template feature, which creates a true template file used to create new files with a pre-designed look and feel. However, it is also possible to use any regular file you’ve created as a master and simply use it to make new files that use the same look and feel. Of course, if you decide to make any changes to your page design later, you will need to make the changes by hand in each of the files you created as copies of your original master file.

Exercise 9: Creating the "Template" File

Finalize your design work on the index.html file (remember: you won’t want to make changes to the design once you start using it as a template for future files).

1. Save the index.html file one last time. (File > Save). 2. Create a "template" file by saving a copy of this file using the name template.html. (File >

Save As). Replace any existing template.html file. 3. You are now working in template.html, not index.html. To avoid confusion close the

index.html file. 4. Delete the content in the right hand cell of the second row. New text will be pasted

into this content cell. 5. Save template.html (File > Save). Note: You now have a finished index.html file and a template.html file ready to be used to create other pages.

Exercise 10: Applying the "Template" design to New Pages

You can now create new pages for your site using the template.html. Each time you will save a copy of the template file with a new name and then add new content for the new page. You’ll use text in the source.txt file in the Class folder as source text for the pages pasting it into the right, middle cell – the content cell. Then apply appropriate headings to the text to make it consistent with your site design. Remember to give the file a Title, e.g., "MIT Watercolor Club: Calendar".

1. Create a Calendar Page: Open the source.txt file. Copy the text from lines 47-97 in the source.txt file for the Calendar page and paste into the content cell of the table. Then, choose File > Save As and name the file calendar.html. Replace the old calendar.html file. Format the content consistently with the other pages.

2. Create a Membership Page: Open the template.html file. Copy the text from the

Membership page created yesterday and paste into the content cell of the table. Then, choose File > Save As and name the file member.html. Replace the old member.html file. Format the content consistently with the other pages.


Page 51

3. Create a President's Message Page: Open the template.html file. Copy the text from the President’s Message page or the source.txt file lines 143-169 and paste into the content cell of the table. Then choose File > Save As and name the file presmsg.html. Replace the presmsg.html file if one exists. Format the content consistently with the other pages.

Here’s an example of the Calendar page using the design from the template.


Page 52

Exercise 11: Adding Tables/Named Anchor Links/Graphics to a Page

1. Open the template.html file and save it as gallery.html. Replace any existing gallery file. 2. Using the picture shown below as a guide, create a table (2 columns by 3 rows) inside

the content cell of the larger layout table. 3. Enter the text as shown below into the new table. (Don’t add the links or the images

quite yet.) 4. Place your cursor at the top of the cell into which you will eventually put the begonia

image. From the Insert Panel, Common Tab, choose Named Anchor. 5. In the Anchor dialog box enter “1" as the Anchor Name. 6. Repeat this step using consecutive numbers for the other two cells in this column. 7. Select the word Begonia at the top of the table and make it a link using “#1" as the

reference. 8. Insert the begonia image (begonia.gif) from the class folder into the top cell as shown

below. 9. Repeat steps 6 and 7 for the other two images (catmint.gif and rabbit.gif). 10. Create a “back to top" link in the right-hand column, linking the words “Back to Top" to

the gallery.html file itself. This seemingly circular link to itself will refresh the page and by default reorient the page at the top left corner each time it is selected.

11. Save gallery.html and test your links by previewing the page in a browser.


Page 53

Insert begonia.gif image here.


Page 54

Upload Your Files to a Web Server Securely Using Dreamweaver

Dreamweaver has a built-in, secure FTP program making it easier to connect securely to a remote web server folder, and to conduct any business on the remote machine. Below are the settings for Dreamweaver for both Windows and Macintosh computers. Full instructions for configuring connections with Dreamweaver are also available online at http://itinfo.mit.edu/article.php?id=7980.

Set up Dreamweaver on your computer to use Secure FTP

1. From the Site menu choose Edit Sites. 2. Select the desired site, and click Edit.... 3. Click on the Advanced tab -- if not already there -- and select Remote Info from the

Category list on the left. 4. On the Remote Info dialog, select or enter the following:

FTP Host ftp.dialup.mit.edu Host Directory Note the use of the first letter for an org locker and the first two letters and the additional www for

[example path for department locker] /afs/athena.mit.edu/org/c/chemistry [example path for personal locker]


Page 55

a user locker. /afs/athena.mit.edu/user/s/a/sallyjones/www

Login Kerberos username Password Leave blank Use Passive FTP Check this option. Use Firewall Uncheck this option. Use Secure FTP (SFTP) Check this option.

5. Click OK.

In the Site window within Dreamweaver, click on the small plug icon to connect. Result: You can now move files securely between the remote site, specified in the Host Directory field above, and your local site. Note: The path to a site will differ depending on the location holding the files -- whether it is your personal locker, a course locker or an organization locker. If you are not sure how to determine the locker type and/or its path, contact Help at x3-1101.

Viewing the Final Product on the Web

When you have finally uploaded your pages, you can go to a browser that is connected to the Net and view your pages using either your org or personal URL. Your URL will follow the convention shown here: Organization URL: http:// web.mit.edu/org name (e.g. http://web.mit.edu/watercolor/a1) Personal URL: http://web.mit.edu/yourusername/www (e.g. http://web.mit.edu/sallyjones)

http://web.mit.edu/yourusername/www�


Page 56

Web Publishing Basics – Resources

Dreamweaver Help menu Offers help on using the features of Dreamweaver On-line:

W3 Schools http://www.w3schools.com/ Tutorials on html, CSS and other web design tools A List Apart http://www.alistapart.com/ Check out the articles by Topic (see right-hand column)

Books:

Dreamweaver CS3 The Missing Manual – David McFarland Excellent book on Dreamweaver with great explanations and examples to try.

Spring Into HTML and CSS - Molly E. Holzschlag Excellent book for beginners on HTML and CSS

At MIT

MIT Information Services and Technology Web Publishing pages http://web.mit.edu/ist/topics/webpublishing The gateway to information and resources about web publishing at MIT. MIT Departmental Consulting and Application Development (DCAD) Offers consulting and project direction for MIT web communication initiatives. http://web.mit.edu/ist/services/consulting/web.html Usability@MIT Offers a range of services to assist designers and developers in creating usable and accessible web sites. http://web.mit.edu/ist/usability/ MIT Publishing Services Bureau http://web.mit.edu/psb/ Source for MIT logos, photos and assistance.