DREAMWEAVER ANCHOR LINKS
DREAMWEAVER ANCHOR LINKS

What are links? Links are clickable items that connect to other documents on the web.(web pages, media files such as video, audio, pdf files, etc.) Commonly, underlined text or image buttons are used as links. Links draw the users eye to the navigable sections of the page.

What are anchors? Invisible section bookmarks within a page are called named anchors. They can be used to link to sections of a page. The URL (web address) to an anchor becomes a #name at the end of a document name. i.e. links.html#anchors Try out How to create anchor links to read more about them. (You will jump down the page to that section.)

What can a hyperlink connect to?:

Web pages on the Internet (http://www.rit.edu)
other HTML documents you create (resume.html)
sections within a document (resume.html#education)
images (me.jpg or me.gif)
application files for download (i.e. spreadsheet such budget.xls)
multimedia (sound.wav, movie.mov, realmovie.rm)
Mailto links: Contact e-mail links

Naming Style: Name your text links as short phrases that describe what they connect to not by such names as "click here".
Use short descriptive text. Note that your eyes are drawn to the links.
Good Example 1: RIT Library
Bad Example 2: Click here to go to RIT Library


Keep linkable text short for clear destinations and easy reading
Good Example 3: RIT Library at the RIT in Rochester, NY
Bad Example 4: RIT Library at RIT in Rochester, NY (What will this connect to?)


Do not overuse links in text. It confuses navigation and reduces importance and clarity of each link.
Good Example 5: RIT Library at RIT in Rochester, NY
Bad Example 6: RIT Library at the Rochester Institute of Technology in Rochester, NY


Links within blocks of text should be underlined and allowed to change color when visited. Otherwise they may be hard to find and navigate within a paragraph.
Good Example 7: RIT Library is a link.
Bad Example 8: RIT Library is not underlined and has black as the link color. How will the user know it is linked?

External, Internal and Image Link Illustration


--------------------------------------------------------------------------------

There are 4 kinds of links covered by this tutorial:

1. External links: Clickable underlined text that connects to web sites you did not create.
i.e. From your web page, link to Yahoo search directory at http://www.yahoo.com

Creating External Links:

1a. Type the text for the link in the Document window and highlight it.

1b. In the Properties Inspector type the entire URL (web address) of the site if it is out on the Internet on a different server. (The http:// or ftp:// part must also be included.)

1c. Click in a blank section of document window to see the underlined link.



To re-edit the link, select it in the page and make corrections through the property inspector link box.

Try these links:
RIT at http://www.rit.edu
RIT Library at http://wally.rit.edu
Academic Research Databases: http://wally.rit.edu/electronic/electronic.html
RIT Library Catalog or Electronic Reserves: http://albert.rit.edu/
RIT Directory at http://www.rit.edu/Phone
Yahoo at http://www.yahoo.com
Altavista at: http://www.altavista.com
Computer Based Training at RIT https://www.rit.edu/cbt
Technology Workshops at RIT http://design.rit.edu:591/instruction/default.htm
What if the web address is really long and difficult to type? Copy it from the web browser location bar and paste it into Dreamweaver using short-cut keys.
Be sure that there are no spaces after the end of the link. They will be translated by the web server into characters like %20 and create a broken link.

Open Netscape and go to a web page you want to link.
Highlight the web address in your web browser location box.
On a PC, Hold the Control Key down and type the C key to copy the address.
(Control-C)
On a Mac, Hold the down the Command (Apple) key and type the C key to copy the address (Command-C)
Back in Dreamweaver, Type the name of the site in your Dreamweaver document.
Highlight the site name text.
Click the cursor, in the Link box of Property Inspector.
On the PC, Use the Control-V combination to paste the address.
On the Mac, Use the Command-V combination to paste the address.
2. Internal links: Clickable underlined text that links to content or files on your web site that you create and maintain. i.e. A course web page called index.html contains a table of contents with a link to course syllabus, syllabus.html Both web documents are stored in the same directory/folder. The index.html page might also link to other local files for download such as assignment.xls (an excel file) or videoclip.mov (Quicktime video to view using a plug-in program)

Creating Internal Links:

2a. Create a new document by selecting File>New. Set the Page Properties for it and choose Save As and name it. (i.e. calendar.html) Be sure the document or file you will link to is in the same directory as the document you are working on. It can also be in a sub-directory.

2b. Type the link text in the Document window and highlight it. In the Properties Inspector, click the yellow folder next to link.

2c. Navigate to the location of the file and click on it. Click the Select button

2d. The address that appears in the blank will be the file name (i.e. syllabus.html) or a folder name followed by the file name. (ii.e. course1/syllabus.html)

2e. Click in a blank section of document window to see the underlined text.




3. E-mail Links: Clicking this type of link will launch an e-mail screen that can be filled in and sent to the web author. Note: A mailto link will only work if the browser supports e-mail and is setup to work with a local e-mail system.

On your main web page and optionally at the bottom of every web page it is important to have a way for students or colleagues to contact you.

Remember to check your mail regularly. People will become easily frustrated if they send you e-mail and you do not answer or acknowledge it.

Creating E-mail Links:

3a. In the Document window, type your contact information..(i.e. Contact Prof. Abby Cook at abc1234@rit.edu)

3b. Choose Insert > E-mail Link or click this object in the Objects Palette. Fill in the label for the link and the email address it should go to.

E-mail Link illustration

3c. Click in a blank section of document window to see the underlined mailto link.

Example E-mail Link and Property Inspector view



Note: In the Properties Inspector a mailto: followed by the e-mail address appears. There are no spaces between the colon and the e-mail address. (i.e. mailto:abc1234@rit.edu where abc1234 is replaced by your e-mail address.)

Use e-mail addresses to create a contact list: Creating a mailto link for each of member of group is a good way to enable members to contact each other for group work or study groups.

You can look RIT community members up by name with the RIT Directory system (LDAP) at http://www.rit.edu/Phone

4. Links to Page Sections (Anchors): Clicking these kinds of links will jump the user to a specific section of the page.

Creating anchors and linking to them:
To make links to sections of a web page you will need to use named anchors.

4a. Place your cursor in the section of the page you want to link to. (i.e. a subsection of the page that you have to scroll down to see)
4b. Choose Insert > Named Anchor and type a one word short descriptive name and click OK.(the name of the section) A yellow anchor icon will appear. Click on the icon, if you need to reedit the anchor.
4c. Create a link to the anchor from the top of the same page by selecting text you want to be the hyperlink. Then, in the link box of the property inspector type a # sign followed by the same name as you gave the named anchor.



i.e. If the named anchor was named syllabus, the link would be #syllabus or as in the dialog boxes illustrated, anchor and #anchor respectively.

To link across pages to a section on another page, the link name would be the name of the document it is in followed by the # sign and the anchor name.

i.e. To link to this anchor from another page. links.html#anchor would end the URL web address.

Checking Links: This will open a copy of your web page off the disk so that you can see it in a browser and check the links without publishing it first.

Choose: File > Preview in Browser, select a Web Browser and click through the links.


OR

Choose File > Check Links to check the links in the document you are working on.


OR

Choose Site > Check Links Sitewide if you have set-up a site.

To Re-edit a broken link, select it in the page in Dreamweaver and make corrections through the property inspector link box. Choose File >Save and File > Preview in Browser again.

Check boxes and Input boxes
Mood:  a-ok
Now Playing: COunting bodies like sheep to the rythm of the wardrums
Check boxes


If chkchocolate.value = 1 then
curtopping = curtopping + .50
Else
curtopping = curtopping - .50
End if
If chkstrawberry.value = 1 then
curtopping = curtopping + .25
Else
curtopping = curtopping - .25
End if

lblToppingcost.caption =curtopping
--------------------------------------------

Input boxes

Public strName As String
Public strNumber As String

to get the input boxes to come up when the form loads, type the input box code in the
form load procedure:
strName = InputBox("What is your name?", "Name Request")
strNumber = InputBox("Tell us your phone number please?", "Number Request")


Private Sub cmdShow_Click()
lblName.Caption = "Your name is " & strName
lblNumber.Caption = "You can be reached at " & strNumber
End Sub

lblInfo.Caption = "Your name is " & frmOne.strName & " your phone number is "
& frmOne.strNumber

Call MsgBox("Thank you for visiting " & frmOne.strName & " we will call you at
" & frmOne.strNumber & " when your order is ready.", vbOKOnly, "Goodbye")
frmTwo.Hide
frmOne.Show

MORE LINKING
MORE LINKING:

Links
Its easy to link pages together using Dreamweaver. You can test your links by hitting F12, and previewing your pages in the browser. Remember that when previewing in the browser Dreamweaver is displaying pages saved on your hard drive. Save often to avoid changes not displaying when previewed.

When linking, you will first need something for the user to click on. Links can be text, or images. To select text for linking, type the text and highlight it, just like you would in a word processor. To select an image for linking, simply click the image.

After selecting the click-able area (text or image), set the link on the Properties Palette:



Setting Links With-in Your Site
To link one page to another in your site:

Select the click-able text or image
On the Properties palette, click the yellow folder next to the "Link" field. The yellow folder allows you to browse your site to choose the desired page.


Find the appropriate page, and select it.

For example, this link: web design course links to our homepage.
Setting Links to the World Wide Web
To set links on the World Wide Web, simply type the web address in the "Link" Field. Remember to type the entire address.



Setting Mail Links

When setting mail links, select the click-able object, and type the email address, preceded by "Mailto:" in the Link field.



Linking Within a Page
Sometimes you may wish to link to a particular part of a page. You can link to different areas in the current page, or to set areas in a different page. When linking to a specific area, you must first set an "anchor". The anchor will specify and hold the area that you will link to later. You will set the anchor at your links the destination pointwhere the user will end up. You can name the anchor whatever you want, but youll have to remember it later.

To set an anchor:

INSERT-> NAMED ANCHOR



To link to the anchor within a page, type "#" and the anchors name in the Link Field



To link to an anchor in another page:

Link to the other page as you normally would.
Manually add "#" and the anchors name at the end of the file path in the Link window.

GRAPHICS TERMS
Mood:  a-ok
GRAPHICS TERMS

Antialias: The blending of the pixel colours along the edges to eliminate the stair-stepping look
of curved and slanted lines.

Bezier Curve: A smooth curve with anchor points and direction handles at both ends used to
reshape it.

Bitmapped Image: An image composed of an array of small squares, called pixels, arranged in
rows and columns. Each pixel has a specific colour value and location.

Blur: Reduces areas of high contrast and softens the appearance of an image.

BMP: Stands for Bitmap. A standard Microsoft Windows image format.

Canvas Size: The size of the area within an image window that can be edited.

Clone: To duplicate a portion of an image.

CMYK: Stands for Cyan/Magenta/Yellow/Black. The four standard ink colours used in printing.

Colour Wheel: The circular colour spectrum from which you can pick & create a custom colour.

Compression: The process by which some of an image's data is either stored in patterns or
eliminated in order to reduce file size.

Contrast: The difference between the light and dark areas of an image.

Decompression: To reverse the compression software algorithm to return data to its original size
and condition. For files compressed with lossy compression, some data will not be restored.

Deformation: To change an image's appearance by moving data from one area to another. The
result is a deformed version of the original image.

Dithering: A process that mixes monochrome with coloured pixels or pixels of two or more
colours to display colours that are not available. The process produces shading and highlighting.

DPI: Stands for Dots Per Inch. A unit used to measure the resolution of a printer. The more dots
per inch, the sharper an image appears.

Emboss: An effect that causes the foreground to appear raised from the background by
suppressing colour and tracing the edges in black.

Feather: Fades an area on both sides of a selection marquee over a specified number of pixels.

Filter: A tool that applies special effects to an image.

GIF: Stands for Graphic Interchange Format. This is a file format commonly used on the
Internet. It uses lossless compression and creates images in 8-bit colour.

Gradient Fill: A fill created by a gradual blending of colours together.

Greyscale Image: A greyscale image is an 8-bit image whose palette contains 256 shades of
grey.

Grid: An equally spaced series of vertical and horizontal lines to help you align your artwork and
arrange image elements symmetrically. The grid spacing can be set at any size.

Handles: Control points attached to vector nodes that control the shape of line segments on
either side of a vector node

Hexadecimal Colour System: Describes colour code values by means of different combinations
of sixteen numbers and letters (0-9 and A-F) as part of the colour palette.

HSL (Hue/Saturation/Lightness): A method for defining colours in an image.

Hue: The shade or tint of a colour.
Image Resolution: The number of pixels per unit of length in an image. It is often referred to as
ppi, or pixels per inch.

Interlacing: Interlacing places a rough, blurry copy of the image at the beginning of the data
stream, which allows people viewing the image on the Internet to see that copy first. The file
gradually sharpens as the image loads.

JPEG: Stands for Joint Photographics Experts Group. A compression technique that supports
24-bit images and can reduce a file’s size by as much as 96%. It removes some colour
information, while retaining the brightness data.

JPG File Format: An image format commonly used on the web. It uses JPEG lossy compression
and creates images up to 24-bit colour. It does not support layers, transparency, or alpha
channels.

Kerning: The distance between characters of text. Measured in units of 1/300th of an em.

Layer: A discrete level of an image that can be edited independently from the rest of the image.

Lossless Compression: Compression method that retains all of the original image data and
reduces the file size by storing patterns of pixels in the image.

Lossy Compression: Compression method that eliminates data top reduce the file size.

Mask: A device used to protect and isolate an area of a layer from changes applied to the rest of
the layer.

Matting: To clean a selection or an image border by removing excess pixels.

Mirroring: Used to reverse the selection, layer, or image horizontally. What was the left side
becomes the right side, and vice-versa.

Noise Filter: A grainy pattern created by the random re-colouring of pixels.

OLE: Object Linking and Embedding. A Windows feature that enables two or more programs to
work together and share files.

Opacity: The density of a colour or layer. A colour or layer with an opacity of 0 is transparent; a
colour or layer with an opacity of 100 is complete opaque (solid).

Optical Resolution: The actual number of pixels per inch at which a scanner is capable of
capturing an image.

Pixel: Stands for picture element. One of the individual squares that make up a raster image and
the smallest element that can be assigned a colour.

Posterize: To reduce an image’s colours or shades of grey to the lightest shade, darkest shade,
and a few shades in between.

Raster Image: A bitmapped graphic, or an image composed of an array of small squares, called
pixels, arranged in rows and columns.

Resample: To change the resolution of an image. To resample down is to decrease the
resolution. To resample up is to increase the resolution.

Resize: To change the width and height of an image or layer.

Resolution: The purity of a hue or the amount of grey it contains.

RGB (Red/Green/Blue): Primary Additive Colours, when combined they make white.

Saturation: The purity of a hue or the amount of grey it contains.

Screen Capture: A picture of the screen or a section of the screen.

Sharpen: To bring an image into better focus and increase the detail by increasing the contrast of
adjacent pixels.

Skew: A deformation that tilts an image or selection along its horizontal or vertical axis up to
45% in either direction.

Thumbnail: A small representation of a larger image.

Toggle: To switch an item back and forth from one state to another, such as hiding and
displaying a palette.

Transparent Colour: An image palette colour that is designated to allow the background to
show through.

Vector Graphic: An image composed of a set of instructions for drawing objects such as shapes,
lines, and text.

Watermark: Embedded information in an image. It can include such items as copyright and
author information. It is imperceptible to humans, but readable by computers.

JUST LONGER FORM OF INPUT BOXES
Mood:  a-ok
JUST LONGER FORM OF INPUT BOXES


• the information typed into the Input Box by the user will be used through the project
• since this information varies depending on who is using the form, the information is
called a variable
• since the words are strings of letters or numbers (that will not be used for calculations) we
call them strings and the proper name starts with str to indicate that it is a string of
characters
• to make sure the variable can be accessed by any form in the project, we must tell it to be
Public
• in the General Declarations area of the code window, type the following as shown:
Public strName As String
Public strNumber As String
• to get the input boxes to come up when the form loads, type the input box code in the
form load procedure:
strName = InputBox("What is your name?", "Name Request")
strNumber = InputBox("Tell us your phone number please?", "Number Request")
• the first input box will ask for the user’s name;
• note how the code shows up on the input box
"What is your name?" "Name Request"
Input Boxes Instructions by Joe Crocker, STU
• the second input box will ask for the user’s number
• we have the information about the user but we need to display it on the form
• to get the input box information to show up in two labels as shown,
• we put that code in a Show Labels command button by clicking on the button and adding
this code:
Private Sub cmdShow_Click()
lblName.Caption = "Your name is " & strName
lblNumber.Caption = "You can be reached at " & strNumber
End Sub
• when the Show Labels button is pressed, the labels display the information
Input Boxes Instructions by Sally MacDonald, KISH
• to get the information to show up on the next form we have to create a second form and
add this code to the Show on Next Form button to get the first form to hide while the
second form shows:
Private Sub cmdNext_Click()
frmOne.Hide
frmTwo.Show
End Sub
• the second form looks like this when it is
designed:
• to get the input box information to show up in the label of the second form, we put that in
the form load procedure of the second form:
Private Sub Form_Load()
lblInfo.Caption = "Your name is " & frmOne.strName & " your phone number is "
& frmOne.strNumber
End Sub
• the second form looks like this when it plays (note where each part of the code shows up
in the final form):
•
• to get the input box information to show up in a message box, and to hide the second
form and get the first one to show when the Go Back button is pressed, this code goes in
that button. (note where each part of the code shows up in the message box):
Private Sub cmdBack_Click()
Call MsgBox("Thank you for visiting " & frmOne.strName & " we will call you at
" & frmOne.strNumber & " when your order is ready.", vbOKOnly, "Goodbye")
frmTwo.Hide
frmOne.Show
End Sub

Passwords
Mood:  a-ok
Topic: p-words
PASSWORDS:

You can create a project which requires a password to run. If the password is not correct, the user
cannot play the project.
Create a form which looks like this (the white boxes are text boxes):

have a username label, and a textbox for the username without text
have a password label, and a textbox for the password without text

and which will look like this when you try to enter the program:


username textbox has certain letters
password textbox has letters that turn into "*" when you type them in, simulating a password look


Notice that
1. the username shows up,
2. that the password shows as * and
3. the password is only six characters long, no matter how much is typed

When the WRONG user name OR password are entered, this message box shows up and when
you click on OK, the text boxes in the first form clear and you can start again.
When the CORRECT user name AND password are entered, the next form loads:

Calls a message box which says: (Title:wrong password, message: sorry you entered wrong password or username, try again)


All this happens as a result of pressing the OK button on the main form after entering a username
and password. This is the code for that button:

Private Sub cmdOk_Click()
If txtUser.Text = "s" And txtPassword.Text = "p" Then
frmMain.Show

Else

Call MsgBox ("Sorry you have entered the wrong username or password",
vbOKOnly, "Wrong Password")

txtPassword.Text = ""

txtUser.Text = ""

End If
End Sub

Clear the text boxes to
start again.

The ELSE means if they are not
correct, then do the next action
Make a message box that says
they entered the wrong
information
This code checks for the
username and password and
if they are BOTH correct,
then the main form loads.