Download Create the Calendar file

Intermediate Web Publishing
Jeff Pankin
Information Services & Technology
Table of Contents
Introduction ..................................................................................................................................... 1
Course Topics .............................................................................................................................. 1
Set the Preferences ..................................................................................................................... 1
Define a Site ................................................................................................................................ 2
Set up Dreamweaver to Upload Files.......................................................................................... 2
Note: Dependent files include page images and linked stylesheets. ......................................... 3
How to View Your Pages on the Web ......................................................................................... 3
Create the First Web Page .......................................................................................................... 3
The dev.html web page so far! ................................................................................................... 4
Cascading Style Sheets (CSS) ........................................................................................................... 5
About Styles ................................................................................................................................ 5
The CSS Panel .............................................................................................................................. 6
Create a Tag Style........................................................................................................................ 6
The Rule Definition Dialog Box.................................................................................................... 7
Text Properties ............................................................................................................................ 7
Editing h2 and body Styles .......................................................................................................... 8
Background Properties................................................................................................................ 8
Create a Class Style ..................................................................................................................... 8
Apply a Class Style to a Tag ......................................................................................................... 9
Apply a Class Style to Selected Text ............................................................................................ 9
To Center Text ............................................................................................................................. 9
Link to an External Style Sheet .................................................................................................. 11
Create and Format a Layout Table ............................................................................................ 11
Center the Layout Table ............................................................................................................ 11
Add Text to the Navigation Cell ................................................................................................ 12
Define the .cellheader Style ...................................................................................................... 13
Adjust the Image ....................................................................................................................... 13
Define the .cellnav Style............................................................................................................ 13
Define the .cellmain Style ......................................................................................................... 14
Define the .cellfooter Style ....................................................................................................... 14
Styles for Navigation Links ........................................................................................................ 14
Create a Division with the <div> Tag......................................................................................... 14
Create a Contextual Style for the Navigation Buttons .............................................................. 15
Templates ...................................................................................................................................... 16
About Templates ....................................................................................................................... 16
Create a Template from an Existing File ................................................................................... 16
Create a New File from a Template .......................................................................................... 16
Create the Calendar file ............................................................................................................ 17
Apply a Template to an Existing File ......................................................................................... 17
Complete the Membership and President's Message Pages .................................................... 17
Modify a Template .................................................................................................................... 18
Cloak and Upload Files .............................................................................................................. 18
Photoshop ..................................................................................................................................... 19
Sources of Images ..................................................................................................................... 19
Image Resolution and Size ........................................................................................................ 19
The Photoshop Work Area ........................................................................................................ 20
Photoshop Tools........................................................................................................................ 21
For Help with Tools ................................................................................................................... 21
Note: You can leave the Help window open during your session. ........................................... 21
Using the Crop tool ................................................................................................................... 22
Note: The Tab key will hide or show the palettes, including the Tool palette. ........................ 22
Quick Image Adjustments ......................................................................................................... 22
File Types................................................................................................................................... 23
Save an Image for the Web ....................................................................................................... 24
Add the Image to President's Message Page ............................................................................ 24
Create a Graphic for the Page Header ...................................................................................... 24
Using the Polygonal Lasso ......................................................................................................... 25
The Magic Wand Tool ............................................................................................................... 25
Work with Layers ...................................................................................................................... 25
Apply Transformations .............................................................................................................. 26
Transformations (remember you can use ctrl/command-Z to Undo) ...................................... 26
Add Text .................................................................................................................................... 27
Change the Background Color (on background layer) .............................................................. 27
Use Trim to Tighten Image ........................................................................................................ 27
Save the Brush Image for the Web ........................................................................................... 28
Add the Brush Image to the Template Page Header ................................................................ 28
Forms ............................................................................................................................................. 29
A Typical Form Page .................................................................................................................. 29
Types of Form Tags ................................................................................................................... 30
The <form> Tag ......................................................................................................................... 30
The <input> Tag......................................................................................................................... 30
Attributes for the <input> Tag .................................................................................................. 31
The <textarea> Tag ................................................................................................................... 31
Labeling Your Inputs.................................................................................................................. 32
Add the Correct CGI Script ........................................................................................................ 33
Create the E-mail Template File ................................................................................................ 33
Example of the email-template.txt File..................................................................................... 34
Link the Contact Us Navigation Button to the new contact-us.html page ............................... 34
Create a Success Page ............................................................................................................... 34
Add MIT Google Search............................................................................................................. 35
Paste into Dreamweaver Code ................................................................................................. 35
Format Form Fields for Google Search ..................................................................................... 35
Additional Form Features ......................................................................................................... 36
Grouping Your Inputs ................................................................................................................ 36
Drop Down Lists ........................................................................................................................ 37
Setting the Initial State.............................................................................................................. 37
Resources ...................................................................................................................................... 38
Introduction
Course Topics
 Cascading Style Sheets (CSS)
 Dreamweaver Templates
 Preparing graphics using Photoshop
 Forms [Google, cgi email]
Set the Preferences
General
 Check Use <strong> instead of <b> and <em> instead of <i>
 Uncheck Use CSS tags instead of HTML tags
Invisible Elements
 Check all
New Document
 Default document: HTML
 Default extension: .html
 Default Document Type (DTD): XHTML 1.0 Transitional
Preview in Browser
 set up browser if necessary
Intermediate Web Publishing
Page 1
Define a Site
We define a site in Dreamweaver to identify the location of our web files. This allows
Dreamweaver to track and automatically update links when we change a file name or
move a file. Also, when we define a site we can use Dreamweaver's secure FTP to move
our files to our Athena locker.
Step 1 - create or choose a local root folder
Step 2 - in Dreamweaver choose Site menu > New Site
Step 3 - name your site (could be anything; best practice: use same name as root
folder)
Step 4 – use the Browse icon to show Dreamweaver your local root folder
Set up Dreamweaver to Upload Files
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 then Click OK.
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.
FTP Host
Host Directory
ftp.dialup.mit.edu
example path for department locker
/afs/athena.mit.edu/org/c/chemistry
example path for personal locker
/afs/athena.mit.edu/user/p/a/pankin/www
Note the use of the first two letters for user
name but first letter only for org name.
Login
Kerberos username
Password
Leave blank
Use Passive FTP
Check this option.
Use Firewall
Uncheck this option.
Use Secure FTP (SFTP)
Check this option.
Intermediate Web Publishing
Page 2
Click the Expand/Collapse button
to switch to a split view of your Remote files and
Local files. Click
to return to the normal Files panel view.
In the split view click on the small plug icon
to connect. You can now move files
securely between the remote site and your local site.
Note: Dependent files include page images and linked stylesheets.
How to View Your Pages on the Web
When you have uploaded your pages, you can go see them in a browser by typing the
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 or http://web.mit.edu/ist)
Personal url: http://web.mit.edu/yourusername/www
(e.g., http://web.mit.edu/pankin/www)
Create the First Web Page
1.
2.
3.
4.
5.
6.
7.
8.
Create a new Basic HTML page
Open the file "source.txt"
Copy lines 10-39 and paste into your new document
Format headings and blockquote
Add a title
Save as dev.html
Add horizontal rules and copyright information
Preview, upload, view live page
Intermediate Web Publishing
Page 3
The dev.html web page so far!
Intermediate Web Publishing
Page 4
Cascading Style Sheets (CSS)
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. Internet Explorer
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 styles and stylesheets in 1996 at the time they released the standards for HTML
4.0.
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.
CSS gives more control over font size, background images, placement of items, layout of
pages and the way links function! Also we can apply styles to one area and not another.
Without the use of CSS browsers may interpret html individually.
Intermediate Web Publishing
Page 5
The CSS Panel
You can control all styles activity through the CSS panel. Close the Files panel to allow
more room in the panel area for the CSS panel.
(at cursor location)
Create a Tag Style
1. Click the New CSS Rule icon (#7)
2. Choose Define in: (New Style Sheet File)
3. For Selector type: choose Tag
4. Select h1 from the pop-up menu
5. Click OK
6. Type watercolor.css for the stylesheet name and click Save
Note: Tag is a block level style. Class is an inline style (i.e., you must select the content
then apply a class style). Tag and Class styles are defined in the same way but applied
differently.
Intermediate Web Publishing
Page 6
The Rule Definition Dialog Box
The Rules Definition Dialog box is a convenient place to choose properties and attributes
for a style definition. Clicking a category brings into view properties associated with
that category.
Text Properties
Property
Font
Size
Weight
Style
Variant
Line Height
Case
Decoration
Color
Intermediate Web Publishing
Value
Verdana, Arial, Helvetica, sans-serif
30px
leave blank [Note: only Bold has been
implemented in browsers]
leave blank [Note: only Italic has been
implemented in browsers]
leave blank [Note: won't show in
Dreamweaver; Preview in Browser to see]
leave blank [Note: HTML does not provide a
means to control this property]
leave blank
underline confuses with link
none – we'll use with link to take out underline
to create button
choose from picker or enter # six digit code
Page 7
Editing h2 and body Styles
1. Create a style for the h2 tag. You decide the formatting properties.
2. Create a style for the body tag. You decide the formatting properties.
3. Close the Rule Definition dialog box and choose ALL on the CSS panel to see
all styles defined.
4. Double click any style name to open Rule Definition dialog for that style.
5. Edit one of your styles and click the Apply button to see your changes in the
window behind the dialog box.
Background Properties
Choose Background from category list
Property
Background color
Background image
Repeat
Attachment
Horizontal position
Vertical position
Value
use the color picker pop-up or type in a
color code [e.g., #3388FF]
select an image for the background –
default position is upper left corner
repeats the background image
throughout the page or on the X or Y axis
use fixed to prevent the image from
scrolling
left, center, right or amount in pixels
top, center, bottom or amount in pixels
Create a Class Style
1. Create a new class style named .copyright - (a class style is different only in how
we apply it not in how we define it)
2. Choose - Size: 12 pixels, Style: italic, Color: red
3. Exit the dialog box and apply the style .copyright
Intermediate Web Publishing
Page 8
Apply a Class Style to a Tag
To apply a class style to a tag, click on the tag and select the style from the pop-up menu
on the Properties panel.
Tag selector bar
<p.copyright>
Code View
<p class="copyright">Copyright 2007 MIT </p>
Apply a Class Style to Selected Text
Tag selector bar
<span.copyright>
Code View
<span class="copyright">MIT</span>
To Center Text
Use the property value pair “text-align: center" in the Block category.
Note: This is a block level property. It will not work if text is selected.
Intermediate Web Publishing
Page 9
The CSS Panel
Click any location on the page.
ALL
CURRENT
Summary for Selection
Properties for “stylename"
Icons at bottom left of panels
Intermediate Web Publishing
Shows every style in use in the document
Shows style properties and values applied
where cursor is CURRENTLY located
Shows the properties and values of style
Live access to change values without
opening the Rule Definition dialog box
Control how properties and values are
displayed
 shows all in categories
 shows all alphabetically
 shows only for style selected
Page 10
Link to an External Style Sheet
 Notice the <link> tag in the <head> of the HTML
 To link to an existing stylesheet open the Style popup menu on the Properties
Panel and choose Attach Style Sheet.
Create and Format a Layout Table
1. Create simple 3 row x 2 column table with the following attributes
a. 800 pixels width
b. 1 border and 0 spacing
c. 20 pixels padding
2. Merge the cells as shown to create page sections
merge
header
nav
content
footer
merge
3. Move the content into the appropriate cells
Tip – Select blocks by clicking the tag in the Tag Selector bar
Tip - Turn off Table Widths – View Menu > Visual Aids
Center the Layout Table
Add this style to the watercolor.css stylesheet file, and then apply this style to the layout
table.
In style sheet:
.centered-table
{margin-left: auto;
margin-right: auto;}
Intermediate Web Publishing
In CSS dialog box:
Box > Margins
□ Same for all (uncheck box)
□ Right: auto (check this box)
□ Left: auto (check this box)
Page 11
Add Text to the Navigation Cell
1. Add text to the Navigation cell – [Home, Membership, Calendar, President's
Message, Contact Us].
2. Create dummy files for these pages and link the navigation text to the files
[Home will link to a new file named index.html. Contact Us will be a mailto:
link].
Tip – Right click (Windows) or Control click
(Mac) on the Local Root folder name in the
Files panel to bring up this menu. Then
choose New File.
Intermediate Web Publishing
Tip – Use the Point to File icon to create
the links to the new “dummy" files.
Page 12
Define the .cellheader Style
1. Create a class style named .cellheader with the following properties and values
Category
Background
Property: Value
Background color: your choice
Background image: pic-wine.gif
Horizontal position: right
2. Apply .cellheader to the top row <td>.
Adjust the Image
1. Notice the image repeats by default
2. Change the Background property Repeat to the value: no-repeat
3. Enter a value in pixels for the Horizontal position property [use trial and error
on the value until it looks good to you]
4. Change the Background color of the .cellheader style to white – why?
5. Set the Block property Vertical alignment to middle - [must preview in
browser to see]
Define the .cellnav Style
1. Create a class style named .cellnav with the following properties and values
Property Category
Background
Block
Box
Property: Value
Background color: your choice
Vertical alignment: top
Width: 125px
2. Apply .cellnav to the middle row, left cell <td>.
Intermediate Web Publishing
Page 13
Define the .cellmain Style
1. Create a class style named .cellmain
2. Choose a background color, text color and text size which looks good to you
3. Set the Block property Vertical alignment: to top.
4. Apply .cellmain to the middle row, right cell <td>.
Define the .cellfooter Style
1. Create a class style named .cellfooter.
2. Choose a background color, text color and text size which looks good to you.
3. Apply .cellfooter to the bottom row <td>.
4. Remove the class style .copyright.
Styles for Navigation Links
 we want fancy links that have a different graphical appearance
 we don't want to apply this appearance to all text in the nav bar nor to all links in
the nav bar
 we will create a special section, or division (<div>) inside the navigation cell
around the links and then we will apply a new style to that <div>
Create a Division with the <div> Tag
1. Highlight the words in the navigation cell
2. From Insert panel choose Common then click on the Insert Div Tag icon [fifth
from left]
3. In the dialog box leave the option for the <div> tag to Wrap around the
selection
4. In the ID: box type nav to name this division
5. Click OK and note the div tag on the tag selector bar named #nav
Intermediate Web Publishing
Page 14
Create a Contextual Style for the Navigation Buttons
1. Click the New Style button in the CSS panel
Because we still have the text selected in the division, in the navigation cell,
Dreamweaver suggests Advanced for the selector type and offers a
suggested name as well.
2. Delete the contents of the Selector: box and type - #nav a:link, #nav
a:visited
Note: We begin the name with #nav to associate the style with the division.
We are also defining 2 styles at once because they will have the same
definition. The normal link and the visited link will look the same.
3. Enter the following properties and values
Property Category
Type
Background
Block
Box
Border
Property: Value
Size: 12px
Weight: bold
Line height: 25px
Color: your choice
Decoration: none
Background color: your choice
Whitespace: nowrap
Display: block
Padding: 3px
Width: 125px
Style: solid
Width: 1px
Color: your choice
Tip – make the border a color darker than
the background color
4. Increase the Box Width value to accommodate President’s Message.
5. Define a style: #nav a:hover with a different Background color and/or Type
color.
Tip - For a beveled edge – make the right and bottom borders black and the
left and top borders a shade lighter than the button color.
Intermediate Web Publishing
Page 15
Templates
About Templates
 Templates create a consistent look across multiple pages in a site
 A template allows you to designate areas of the page which are locked and areas
of the page which are modifiable
 Template files (.dwt) are native to Dreamweaver
Create a Template from an Existing File
1. Save the dev.html file.
2. Delete the content and stray tags from middle row, right column.
3. Click in the content cell (middle row, right column). From the Insert Panel
choose Common > Templates > Editable Region.
Tip – you may need to choose Show editable regions in the View menu
4. You will get the message "Dreamweaver will automatically save this as a
template" - click OK.
5. Name the region content. Click OK.
6. From the File menu choose Save as Template. Enter the name watercolor
and click Save. Say Yes to Update links.
Note: Dreamweaver adds the .dwt extension to the file name and saves it in
a folder labeled Templates.
Create a New File from a Template
1. From the File menu choose New. In the New Document window click on the
Templates tab.
2. Select the watercolor template from the middle column and click Create.
Note: The only place you can enter content is in the Editable region labeled
“content".
3. Open the file named source.txt, copy lines 12-39 and paste into the editable
region in the new template file.
4. Save the file as index.html overwriting the empty version created earlier.
5. Format the content. Add a page Title.
Intermediate Web Publishing
Page 16
Create the Calendar file
1. Open the empty calendar.html file.
2. Copy the source text lines 47-97 and paste into the calendar.html file.
3. Add a page title and Save the file.
Tip - Don't format the content yet. The watercolor template we will apply
already has styles.
Apply a Template to an Existing File
1. From the Modify menu choose Templates > Apply Template to Page.
2. The Site should say watercolor. Select watercolor in the Templates box. Be
sure the box is checked to Update page when template changes.
3. Click Select.
4. The Inconsistent Region Names dialog box appears. We will tell
Dreamweaver where the content in the current document should go in the
template.
5. Click on Document body.
6. In the Move content to new region pop-up menu-up choose content. Click
OK.
7. Format the content and Save.
Complete the Membership and President's Message Pages
You will create these two pages as we created the Calendar file. Drop the appropriate
text into the member page then apply the watercolor template. Do the same for
presmsg.
1.
2.
3.
4.
5.
For the member.html page use lines 120-134 from source.txt.
For the presmsg.html page use lines 141-165 from source.txt.
Apply the watercolor.dwt template.
Format the content. Add a page title.
Preview your pages and edit them for consistency.
Intermediate Web Publishing
Page 17
Modify a Template
1. To make a change to a template first Save All then Close All.
2. Open the template file and make your edits.
3. Choose Save from the File menu. Click Update to pass the change in the
template to all files where this template has been applied.
4. Click Close in the Update Pages dialog box.
5. Preview your changes
From the Modify > Templates menu you can…
 remove [Detach] a template from a page
 apply a template to the current page
 open the template file which has been applied to the current page
 update the template applied to this page
 update the template throughout the site
Cloak and Upload Files
1. Expand the File view.
2. Create a new folder named extras.
3. Move the source.txt file into the extras folder.
4. Right click the extras folder and select Enable Cloaking then select Cloak to
prevent the files in this folder from uploading.
5. Upload the files.
Intermediate Web Publishing
Page 18
Photoshop
Sources of Images
1. Publishing Services Bureau - web.mit.edu/psb
2. Stock photo services
a. www.istockphoto.com
b. www.gettyimages.com
c. www.corbis.com
3. Your camera
Image Resolution and Size
Digital images are made up of tiny colored squares called pixels. There is a difference
between image size and image resolution.
Image size
(Print size)
The actual height and width of an image
if it were printed.
Image Resolution
A measure of output quality. Usually
measured in ppi (pixels per inch)
although sometimes referred to as dpi
(dots per inch).
The greater the resolution the more dots per inch there are to work with. A higher
resolution allows more detail and more gradations of color to be visible. Therefore, you
get a crisper or higher quality image.
However, the quality of an image is only as good as the resolution an output device can
display.
Computer Monitor
Laser printers
High-end image setting printer
72 ppi
300-600 ppi
1200-2400 ppi
An image with a resolution of 72 ppi will be fine for display on the web but will not print
with very high quality. But, with web pages we are concerned about load time so a 72
ppi image is appropriate for the web. With Photoshop, we can even remove pixels from
our final web image to improve load time, without sacrificing much quality visible to the
naked eye.
Intermediate Web Publishing
Page 19
The Photoshop Work Area
The image above shows the key areas in the Photoshop work area. The toolbox on the
far left allows you to switch tools by clicking your desired tool. You can also use single
key shortcuts. Selecting a tool will bring into view various options for that tool. The
options bar provides additional choices for a tool and in some cases has the button to
complete an operation.
The image itself is shown in the middle of the work area. Notice we are only seeing
66.7%, or two-thirds of the image size. It is possible to view multiple images at a time.
On the far right you see the palettes. Palettes help you track changes and modify
images. You can choose which palettes are visible. By default, palettes appear stacked
together in groups.
Photoshop has an excellent set of Help pages accessible through the Help menu. It is
worth spending some time with this resource.
Intermediate Web Publishing
Page 20
Photoshop Tools
Find out more about tools in Photoshop's Help pages.
Photoshop tools allow you to easily select
portions of an image, crop images to a
smaller size, touch up images, add color,
lines or text, and change the background
and foreground color.
You select a tool by clicking its icon in the
toolbox. A small triangle at the lower
right of a tool icon indicates hidden tools.
Positioning the pointer over a tool displays
a tool tip with the tool's name and
keyboard shortcut.
Pressing the shortcut key repeatedly
toggles through hidden tools.
Selection Marquee (M)
Crop (C)
Hand (H)
Text (T)
Full Screen (F)
Another useful keyboard shortcut to know
is Ctrl/Command-D to deselect.
For Help with Tools
1. From the Help menu, choose Photoshop Help.
2. From the Contents, open the Workspace section, then open the Tools section.
3. The About Tools page has a printable graphic with all the tools listed.
4. For more details about a tool select the appropriate tools gallery.
5. For specific instructions type a tool name into the Search bar and press Enter.
Note: You can leave the Help window open during your session.
Intermediate Web Publishing
Page 21
Using the Crop tool
1. Open the image to be cropped and click the Crop tool (or press C).
2. Press and drag to create a selection area on your image, or
3. Preset the size of the selection area by typing amounts into the Options bar.
4. Be sure to include px for the size in pixels.
5. Once an area of your image is selected, you may resize or move the selection
area.
6. To complete the crop, double-click inside the selected area or click the check on
the Options toolbar.
7. To cancel the crop, click the circle with the slash on the Options bar or press ESC.
If you have already completed the crop you may Undo the last move or use the
History palette.
Note: The Tab key will hide or show the palettes, including the Tool palette.
Quick Image Adjustments
Photoshop offers many options for adjusting images. An efficient way to begin is to use
Photoshop's auto adjustment features.
Intermediate Web Publishing
Page 22
From the Image menu choose Adjustments. Notice the choices for Auto Levels, Contrast
and Color.
Auto Levels
Auto Contrast
Auto Color
looks at contrast, brightness, color
spectrum, pure white point, pure black
point and adjusts across the image
doesn’t affect color
doesn’t effect contrast
Note: Sometimes the Auto adjustments don't work well. Use Ctrl/CommandZ to undo and redo each adjustment to decide if you like the changes. You
can delve into the Levels, Color Balance, Brightness/Contrast, and
Hue/Saturation to make finer adjustments. The History palette tracks your
full history of changes from the time a file is opened and allows you to go
back to any point.
File Types
Images may be saved in a variety of formats each for a different purpose.
Some file formats:
File Type Extension
.psd
.gif
.jpg
.png
.tif
Intermediate Web Publishing
File Type and Description
Photoshop format: proprietary Adobe
Photoshop format
Graphics Interchange Format: a format
useful for line art or images with few
colors and areas of low contrast
Joint Photographic Experts Group: a
format useful for saving photographs
with many colors and areas of high
contrast
Portable Network Graphics: an
alternative to .gif but not supported by all
browsers
Tagged-Image File Format: a format
which allows saving large documents (4
gb) – it preserves high resolution
documents
Page 23
Save an Image for the Web
1. From the File menu choose Save for Web.
2. Choose 4-Up on the tab in the upper left corner.
3. From the preset: popup menu choose a different level of GIF or JPEG for each
panel to compare quality, file size, and load time.
4. Use the Zoom popup in the lower right corner to get a close up look at the
quality differences
5. Select your final choice and click Save
6. Enter a filename (and file type extension), choose a location and click Save
7. IMPORTANT: when you return to the Photoshop work area close your image
document without saving to preserve the original
Add the Image to President's Message Page
1. Return to Dreamweaver
2. Open presmsg.html
3. Create a table with 1 row x 2 columns with padding of 10
4. Insert the president's head image into the left cell
5. Select the title text using the tag selector bar and move into the right cell
6. Save your page and preview in browser
Create a Graphic for the Page Header
The brush image was created by placing a real brush on a scanner protected by plastic.
1. Open brush_orig.psd
2. Move the image using hand tool so that it is fully visible
We now want to cut the image of the brush and paste it onto a separate layer. This will
give us greater flexibility for formatting and adding text.
To do this we will use the Polygonal Lasso tool to select the brush. A few ideas which
may prove useful:



Make the image large.
Use the Tab key to show/hide the palettes for more screen room.
Press the spacebar to temporarily suspend the current tool allowing you to press
and drag the image to see a new area.
Intermediate Web Publishing
Page 24
Using the Polygonal Lasso
1. Select the Polygonal Lasso tool from the Tool palette.
2. Each time you click the mouse you create an anchor point.
3. Create as many anchor points as you need, moving around the object (create
many anchor points as you slowly move over the white spot on the brush).
4. Press the Delete key to delete the last anchor point you created, then continue
clicking.
5. When you return to the starting point, or you wish to stop, double-click to
complete the selection.
The Magic Wand Tool
This tool is more efficient because our background is a solid color. The Magic Wand
selects pixels of continuous color.
1.
2.
3.
4.
5.
6.
7.
Select the Magic Wand tool (W).
Set the Tolerance level to 100.
Click in white background.
From the Select menu choose Inverse.
Cut the brush portion of the image.
Select All then press Delete.
Paste the brush image being held in the clipboard.
Work with Layers
Notice the new layer in the Layer palette.
1. Click the eye icon to hide/show a layer – you are not deleting a layer.
2. Double-click the layer name to rename a layer.
Intermediate Web Publishing
Page 25
Apply Transformations
The commands under the Transform submenu let you scale, rotate, skew, distort or
apply perspective. You can also choose Free Transform to apply any transformation
using modifier keys while dragging.
1. Click the brush layer in the Layers palette.
2. From the Edit menu choose Free Transform – or press Ctrl/Command-T.
3. Press and drag with or without modifier keys (Control/Command, Alt/Option,
Shift).
4. When you are ready press Enter/Return to accept the changes or ESC to
cancel.
Transformations (remember you can use ctrl/command-Z to Undo)
Scale
Scaling enlarges or reduces an item
relative to its reference point. You can
scale horizontally, vertically, or both
horizontally and vertically.
Rotate
Rotating turns an item around a reference
point. By default, this point is at the center
of the object; however, you can move it to
another location.
Drag a handle. Press Shift as you drag a corner handle
to scale proportionately
Move the pointer outside of the bounding border (it
becomes a curved, two-sided arrow
, and then
drag. Press Shift to constrain the rotation to 15°
increments.
Distort relative to the center point
Distorting lets you stretch an item in all
directions.
Press Alt (Windows) or Option (Mac OS), and drag a
handle.
Distort freely
Press Ctrl (Windows) or Command (Mac OS), and drag
a handle.
Skew
Skewing lets you slant an item vertically
and horizontally.
Press Ctrl+Shift (Windows) or Command+Shift
(Mac OS), and drag a side handle. When positioned
over a side handle, the pointer becomes a white
arrowhead with a small double arrow .
Perspective
Perspective lets you apply one-point
perspective to an item.
Press Ctrl+Alt+Shift (Windows) or
Command+Option+Shift (Mac OS), and drag a corner
handle. When positioned over a corner handle, the
pointer becomes a gray arrowhead .
To change the reference point
Drag the center point. The center point can be outside
the item you want to transform.
Intermediate Web Publishing
Page 26
Add Text
1.
2.
3.
4.
5.
Choose the Text tool (T)
Choose the font, size and alignment
Click in the image and type: The MIT Watercolor Club
Select the Move tool (V)
In the Layers palette select the new text layer
Tip: You can delete any unwanted text layers you may have created.
6. Select Edit > Free Transform or press Ctrl/Command – T
7. Change the height, width, slant by dragging
8. Select the Text tool (T) – with the mouse held outside of existing text the
cursor is ready to create another text box. With the mouse held over existing
text it's ready to select all or part of that text.
9. Select "MIT" then select a color
10. Select all text and apply other fonts
11. Move (V) the text down so it overlaps the top of the brush
12. Change the order of the text and brush layers by dragging
Change the Background Color (on background layer)
1. Return to Dreamweaver
2. Open the watercolor.css file
3. Note the hexadecimal number of the background color of the cellHeader
style
4. Return to Photoshop
5. On the toolbar click the foreground paint square
6. In the dialog box enter the color number in the box at the bottom next to the
#
7. In the Layers palette select the background layer
8. In the Toolbox select the paint bucket
9. In the Options bar be sure the settings are
a. Fill: Foreground
b. Mode: Normal
c. Opacity: 100%
10. Click in the white background
Use Trim to Tighten Image
We can get rid of extra space to decrease load time since we set the background color
of the brush to match the background color of the cellheader.
1. From the Image menu select Trim.
2. Choose Based On: Top Left Color Pixel.
3. Choose Trim Away: in all directions.
Intermediate Web Publishing
Page 27
Save the Brush Image for the Web
1. From the File menu choose Save for Web.
2. In the right hand column choose Image Size.
3. The table in Dreamweaver is 800 pixels.
4. Enter 700 px for the width.
5. Compare JPEG medium and GIF 32 dithered.
6. Zoom to 300% and compare the brush end.
7. Save in the Images folder as header.gif.
Add the Brush Image to the Template Page Header
We can add the brush image to the style as the background image or add the image to
the template.
1. In the CSS panel open the cellheader style.
2. In the Background category add the header.gif as the Background image.
3. Remove the Horizontal position and change it to center.
4. Add Vertical: center. Change the height to 100px.
5. Make sure the background color is the same as the color of header.gif.
6. Open the template watercolor.dwt and remove the text from the header
area.
7. Save the template and update pages.
8. From the File menu choose Save All.
9. Preview in browser.
10. Expand, connect and upload files.
11. Check the live web pages.
Intermediate Web Publishing
Page 28
Forms
Forms provide a mechanism for you to collect data from your users. We’ve all used
forms before to:
 do a Google search
 make a purchase from Amazon
 make benefits choices
 answer a survey
A Typical Form Page
[name=”required-firstname”]
[name=”required-lastname”]
[name=”required-email”]
[name=”media”]
[name=”message”]
[name=”info”]
Intermediate Web Publishing
Page 29
Types of Form Tags
The two key tags we use are <form> and <input>. Each has several important attributes
and values which allow us to control how data is entered and what happens to the data.
The <form> Tag
The entire form is surrounded by an open and close form tag which includes the action
attribute. The action attribute points to the script which handles the input data. The
method attribute which may also be present tells how data will be sent. The default
value get appends information to the url. You may also see the use of method="post" to
hide data.
<form method="post" action="http://web.mit.edu/bin/cgiemail">
</form>
The <input> Tag
The input tag controls the particular data you desire from the user and includes several
attributes.



your html code will be mostly input tags.
the input tag has no close tag and therefore ends with />.
the input tag uses several attributes to accomplish its work which are listed on
the next page.
Intermediate Web Publishing
Page 30
Attributes for the <input> Tag
type
Determines the type of input mechanism - e.g., check
boxes, radio buttons, or text box.
<input type="checkbox" />
<input type="radio" />
<input type="text" />
name
Identifies the field. It’s the name of the container
which holds the value being transmitted.
<input type="radio" name="gender" />
Note: use required- attached before a name to make
it a required field
value
Sets the value for this field. It’s not needed with the
text type of input but may be used to set the initial
value – see below.
<input type="radio" name="gender"
value="male" />
Note: we use the same name for multiple input tags when we have different values
possible for the same field
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
The <textarea> Tag
Another tag which gathers data is the textarea tag. This tag is basically, a large textbox.
It requires a rows and cols attribute which specify how many columns wide and how
many rows deep the textarea is displayed.
<textarea name="message" rows="5" cols="20"></textarea>
Intermediate Web Publishing
Page 31
Labeling Your Inputs
Labels inform the browser that text should be associated with a form element. It also
provides a larger clickable area and is important to screen readers.
Embed your <input> tag within a label tag and place your descriptive text before or after
the input tag.
<label>Male<input type="radio" name="gender" value="male" /></label>
<label> <input type="radio" name="gender" value="male" / > Male </label>
Screen readers expect the label tag before the input tag. With radio buttons and check
boxes screen readers expect the label after the input tag.
Submit and Reset Buttons
Two other input types are submit and reset which create buttons on the screen. Click
submit to send the collected data to the script for processing. Click reset to empty the
fields of any information and reset initial values.
<input type="submit" name="submit" />
<input type="reset" name="reset" />
Use the value attribute to change the text which appears on the button.
<input type="submit" name="submit" value="Send form now" />
<input type="reset" name="reset" value="Reset this form" />
Intermediate Web Publishing
Page 32
Add the Correct CGI Script
1. From the MIT home page search for "faq web form".
2. Click on the first link – Frequently Asked Questions
(web.mit.edu/ist/web/reference/create/faq/forms.html)
3. Notice the open form tag in “How do forms work…" The action attribute in
one long URL specifies –
a. a cgi script located at /bin/cgiemail
b. the location of your web directory
c. a .txt file named comments.txt
<form method="post" action=
"http://web.mit.edu/bin/cgiemail
/afs/athena.mit.edu/org/i/ist
/comments.txt">
4. Copy the example open form tag and paste into the Code view of the new
page over the word content.
5. Type the end form tag </form> on the next line in the code view and click the
Refresh button in the Properties panel below.
6. Change the location part of the action url to your watercolor/a# and rename
comments.txt to email-template.txt, a more accurate description of the
functions of this file.
<form method="post" action="http://web.mit.edu/bin/cgiemail/
afs/athena.mit.edu/org/w/watercolor/a4/
email-template.txt">
Create the E-mail Template File
1. From the File menu select New then Other and then Text to create a new
text file.
2. Save this file as email-template.txt
3. This file acts as a template for the email messages sent when a user clicks on
the Submit button. Enter text, and field names in brackets [] in the order you
would like them to appear in the email message.
4. Leave a space between the email message header and the message content.
5. See the example below.
Note: The form will not work as a preview on your local computer. You must
upload the contact-us.html file and the comments.txt file and then
troubleshoot. For testing purposes you might want to use your email
address. The line in the example file is just formatting.
Intermediate Web Publishing
Page 33
Example of the email-template.txt File
From: [required-email]
To: [email protected] [to test the form use your [email protected]]
Subject: Contact Us Response
-------------------------------First name: [required-firstname]
Last name: [required-lastname]
Preferred media: [media]
Wants member info? [info]
Message: [message]
Link the Contact Us Navigation Button to the new contact-us.html page
1. Save and close all files
2. Open the watercolor.dwt template file
3. In the navigation td, highlight the words Contact Us
4. Link the text to the contact-us.html page
5. Save the template page and update all files
6. Open a file and preview in browser to make sure the link works
7. Upload the main page files to the server
Create a Success Page
A success page is used to communicate that data from a form has successfully been
submitted. Add this code between the open and close form tags in the Code view of the
contact-us.html file.
<input type="hidden" name="success"
value="http://web.mit.edu/watercolor/a2/success.html" />
The success page - success.html - is a page you must create and upload which contains a
message like, "Thank you. Your information has been received."
Intermediate Web Publishing
Page 34
Add MIT Google Search
1. From the MIT home page type "Google search" in the search box.
2. Click MIT IS&T: Google Search Engine.
3. Click Add a search box on your site.
4. Notice the gray box with html code.
Paste into Dreamweaver Code
1. Copy form code from IS&T web page.
2. Paste in watercolor.dwt after the close div tag before the close td tag.
3. Switch to Design view to see search input box, search button and shields
representing hidden input types.
4. Now we can use Dreamweaver to format.
Format Form Fields for Google Search
The gold shields represent tags and attributes related to HTML forms. There are four
parameters we might change –




the size of the text entry field
the visible name of the button
the stylesheet used to format the output from the search
the directory (scope) of the search
Change the Attributes
1. Click on the text field named "q" (for query) and set the character width – try
18 or 20
2. Click on the “Search" button named "btnG" (this button submits the data)
and change the value to “Start Search".
3. We will leave the default stylesheet for the output rather than creating one.
4. Click on 5th gold shield named "as_dt" – the value should be "i" for include.
5. Click on the last shield – change "your_URL" to "ist".
Intermediate Web Publishing
Page 35
Additional Form Features
Grouping Your Inputs
A visually helpful way to group your inputs can be achieved by using the <fieldset> and
<legend> tags.
The fieldset tag will place any embedded input tags into a block with a border around it.
The legend tag gives the block a name.
Here is some sample html code. I have used the <p> tag rather than the <label> tag to
keep the example code more readable. I would always use the label tag when building a
real page.
<fieldset>
<legend>Name</legend>
<p>First name <input type="text" name="firstname" /></p>
<p>Last name <input type="text" name="lastname" /></p>
</fieldset>
<fieldset>
<legend>Address</legend>
<p>Address1 <input type="text" name="address1" /></p>
<p>Address2 <input type="text" name="address2" /></p>
<p>Zip code <input type="text" name="zipcode" /></p>
</fieldset>
And here is how it looks in a browser.
To make the border width narrower, change the style definition of the fieldset tag by
changing the width value to 200px or whatever looks right to you.
<style type="text/css">
fieldset {width: 200px}
</style>
Intermediate Web Publishing
Page 36
Drop Down Lists
One final input variation is the drop-down list. To create a drop-down list use the
<select> tag with the embedded <option> tag. This tag has the same format as the ul
tag with the li embedded tag. Add the name attribute to the <select> tag to provide a
field name for the group.
<select name="language">
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="french">French</option>
</select>
To give the user the ability to make multiple selections using the Control key add the
attribute multiple in the select tag.
<select name="language" multiple="multiple">
Setting the Initial State
Several options exist for setting the initial state. For a text box simply add the value
attribute.
<input type="text" value="Enter text here" />
For check boxes and radio buttons add the checked attribute to the appropriate input
tag but do not add a value.
<input type="checkbox" name="medium" value="watercolor"
checked="" />
<input type="radio" name="answer" value="yes" checked="" />
When using the select and option tags add the selected attribute to the appropriate
option tag with the value “selected".
<select name="select">
<option value="watercolor">Watercolor</option>
<option value="oil">Oil</option>
<option value="acrylic" selected="selected">Acrylic</option>
<option value="pen and ink">Pen and Ink</option>
</select>
Intermediate Web Publishing
Page 37
Resources
Books
Dreamweaver 8 (or CS3 or CS4) The Missing Manual - David Sawyer McFarland, 2006,
O'Reilly Media, Inc.
Spring into HTML and CSS -Molly E. Holzschlag, 2005, Addison Wesley
Head First HTML with CSS & XHTML - Eric Freeman and Elisabeth Freeman, 2005,
O'Reilly Media, Inc.
CSS The Definitive Guide - Eric A. Meyer, 2006, O'Reilly Press
Eric Meyer on CSS: Mastering the Language of Web Design - Eric A. Meyer, 2002,
New Riders
Web Sites
MIT Web Publishing Reference Pages http://web.mit.edu/ist/web/reference/index.html
MIT Web Publishing http://web.mit.edu/ist/topics/webpublishing/index.html
MIT DCAD Departmental Consulting and Application Development
http://web.mit.edu/ist/dcad/
A List Apart - http://www.alistapart.com/
HTML Dog - http://www.htmldog.com/
W3C Schools - http://www.w3schools.com/default.asp
Intermediate Web Publishing
Page 38