MP Spring 2004 - Lecture 1

1
Get your EX2 folder with all the work we did
last week off EDEN and on the computer you are
working on Define a Dreamweaver site for it
2
Housekeeping

• Hand in Exercise Two
• A LOT OF WORK TO DO TODAY!!!!!
• Any questions?

3
The Menu 10/18/04

• Finish Up Last Week
• Adding Interactivity to Navigation
• JavaScript Rollovers, Swap Image
• BONUS Opening a browser window w/ JavaScript
• External CSS
• Flash Text and Buttons
• Learn from Others
• The Dreamweaver Leftovers

4
Review Navigation

• No matter where the navigation is on the page,
  there are a few methods of construction
• Your navigation must be INTERACTIVE. Ways to make
  your nav interactive include
• CSS
• Roll-Over Images
• Flash Elements

5
This is what we have
6
Creating Roll-Over Navigation (1/6)

• Label each image that will be part of your
  navigation using the field on the left. This is
  just so you can distinguish the images
• Define an ALT tag for each image for picture-less
  browsing
• Create links to each page or just for now

7
Creating Roll-Over Navigation (2/6)

• Make sure all three fields are set for every
  navigation image.

8
Creating Roll-Over Navigation (3/6)

• Select the Pictures navigation image
• Choose the TAG panel from the left and select the
  BEHAVIORS tab.
• Click on the ()
• Choose Swap Image

9
Creating Roll-Over Navigation (4/6)

• You will see this dialogue box. This is why we
  labeled everything
• Select pictures from the list
• In the Set source to field, select Browse and
  choose your glowing pictures image.

10
Creating Roll-Over Navigation (5/6)

• When you find the glowing picture, select OK on
  both windows

11
Creating Roll-Over Navigation (6/6)

• When you click on the pictures navigation
  image, you should see this in the BEHAVIORS panel
  on the left.
• Make sure the settings are the same as in this
  screen shot
• Repeat for all Navigation items

12
About Dreamweaver Behaviors

• Macromedia Dreamweaver MX 2004 behaviors place
  JavaScript code in documents to allow visitors to
  interact with a web page to change the page in
  various ways, or to cause certain tasks to be
  performed. A behavior is a combination of an
  event with an action triggered by that event. In
  the Behaviors panel, you add a behavior to a page
  by specifying an action and then specifying the
  event that triggers that action.
• Note Behavior code is client-side JavaScript
  code that is, it runs in browsers, not on
  servers.
• After you attach a behavior to a page element,
  whenever the event youve specified occurs for
  that element, the browser calls the action (the
  JavaScript code) that youve associated with that
  event.
• A single event can trigger several different
  actions, and you can specify the order in which
  those actions occur.
• Note The terms behavior and action are
  Dreamweaver terms, not HTML terms. From the
  browsers point of view, an action is just like
  any other piece of JavaScript code.

13
Events Actions

• Events are, effectively, messages generated by
  browsers indicating that a visitor to your page
  has done something. For example, when a visitor
  moves the pointer over a link, the browser
  generates an onMouseOver event for that link the
  browser then checks to see whether theres some
  JavaScript code (specified in the page being
  viewed) that the browser is supposed to call when
  that event is generated for that link. Different
  events are defined for different page elements
  for example, in most browsers onMouseOver and
  onClick are events associated with links, whereas
  onLoad is an event associated with images and
  with the body section of the document.
• An action consists of pre-written JavaScript code
  that performs a specific task, such as opening a
  browser window, showing or hiding a layer,
  playing a sound, or stopping a Macromedia
  Shockwave movie. The actions provided with
  Dreamweaver MX are carefully written by
  Dreamweaver engineers to provide maximum
  cross-browser compatibility.

14
Open Browser Window with JavaScript (1/3)

• We will learn how to set a link to open in a new
  browser window in the Dreamweaver Leftovers.
• By using the Behaviors, we can do the same thing,
  only with greater control over the appearance of
  the window
• Set the link of the text or image to be only.
• Then select Open Browser Window from the
  Behaviors list

15
Open Browser Window with JavaScript (2/3)

• You will see this dialogue box. In the URL to
  display window, choose what page you want to
  display
• Set the browser width and height (this may take a
  little trial and error to get perfect)
• Select Attributes of your window
• NAME YOUR WINDOW!

16
Open Browser Window with JavaScript (3/3)

• Once you have it all set. Preview your effect in
  the browser, at home just press F12.
• At SCILS, you can either upload it to EDEN and
  view it that way or go to Internet Explorer and
  choose File gt Open gt Browse gt to find your
  file.

17

• FLASH TEXT!

18
Creating Navigation with Flash Text (1/4)

• Remember using Flash for your navigation is not
  going to be the most compatible across all
  browsers as roll-over images or CSS
• I recommend creating table cells to put each
  Flash Text nav item into for layout and
  alignment purposes
• All the steps to creating navigation with Flash
  Text are basically the same for Flash Buttons
• Re-save your blank.htm file and call it
  blank_flash_text.htm
• On this file, delete the images from your
  navigation leaving only the table with 4 cells

19
Creating Navigation with Flash Text (2/4)

• Ensure your cursor is where you want to insert
  the navigation item
• From the Common toolbar, choose Flash Text or
• Insert gt Media gt Flash Text

20
Creating Navigation with Flash Text (3/4)

• This dialogue window will open up.
• Choose your Font (no restrictions)
• Choose a font size and color
• Choose the Rollover Color
• In the Link field, enter the URL you would like
  to open when clicked
• Target _self to open in same window, _blank
  to open in new window
• You can choose a background color if you like
• NOTE Save as is where your flash text file
  will be saved, make sure you know where it is
  goingI recommend the images folder
• REPEAT THESE STEPS FOR EACH NAVIGATION ITEM

21
Creating Navigation with Flash Text (4/4)

• When you have all the text inserted, it should
  look something like this. The Pictures is
  shown in green to illustrate the rollover color.
• You can resize the text in the properties
  inspector. Since Flash is a vector based program,
  it should not get distorted.

22
External CSS

• In the following, we will go through creating a
  comprehensive external Cascading Style Sheet.
  There is much more CSS can do, but for this
  class, we will focus on only formatting the text.
• This sheet will be applied to all text on a page,
  including navigation.

23
External CSS (1/11)

• For this demo, lets make a simple page to
  illustrate the concepts
• Create a blank html page, add a quick line of
  text that will serve as the navigation bar
• Save the file, in the exercise 2 folder as
  css_example.htm

24
External CSS (2/11)

• Add signs to each item to create links.
• Leave all Formatting and Font info as Default
  or None

25
External CSS (3/11)

• Go up to the Design panel at the top of the
  screen.
• Click the New CSS Style icon, 2nd one from the
  left with the () sign on it.
• The window to the left will show up. Choose
• Selector Type Class
• Define in (New Style Sheet File)
• Name NEXT SLIDE!

26
External CSS (4/11)

• Naming individual styles in CSS.
• All styles are named and all begin with a (.)
• The names are to inform you of what style you are
  working with. For example, you may name your
  title style .title or your navigation style
  .nav or you main content style .contentas we
  did for exercise one. You can call them whatever
  you like, as long as you can distinguish between
  them
• For the first style in our new sheet, we are
  going to create our navigation style, so in the
  name field, type .nav
• Click OK.

27
External CSS (5/11)

• Since we are defining these styles in a new style
  sheet file, we need to create and name the new
  file.
• This file should be in the ex2 folder.
• This new file will be a style sheet file with a
  file extension of .css
• Name the file ex2_css.css
• Click OK

28
External CSS Why External? (6/11)

• An External Style Sheet simply means that there
  is a file with a .css extension that is linked to
  your html files
• Reasons
• By creating an external style sheet we can link
  this singe style sheet to all of our html files,
  creating consistency and saving time in defining
  each class style on every page
• This sheet, since it is external, can be edited
  and any changes will be reflected in every page
  it is attached to
• This sheet will be re-usable. You can simply cut
  and paste the sheet from one site folder to
  another, making whatever edits may be necessary
  along the way, saving you time and effort.
• Search engines cannot read external style sheets
  (trick to come for search engine placement later)

29
External CSS (7/11)

• Define our .nav style as shown. If you would
  like to use other colors, fonts, etcGo for it!
• Click Ok when you are done

30
External CSS (8/11)

• After you pressed OK, check out your panels.
• In your DESIGN panel, look at the tab with CSS
  Styles. It should have your CSS File name on the
  top and the one style class, .nav, below
• In your FILES panel, you should see the
  ex2_css.css file
• If you see both of those you are on track!

31
External CSS (9/11)

• Apply the style as we did for Exercise One to the
  Navigation
• Highlight the text
• From the Style menu of the Properties
  Inspector, Choose nav
• You should see results like these.
• Save your work

32
External CSS (10/11)

• Check out the Rule Panel. Here you can make
  changes to your styles. There are a TON of
  options, to learn what each of them do, use the
  Dreamweaver Help files, there are very good
  explanations of each if you are interested in
  learning more.

33
External CSS (11/11)

• Lets create a Main Content style for our page.
• Click the New CSS Style selector
• Call the new style .content
• Make sure you are defining the style in
  ex2_css.css
• Select your font styles and colors, etc.
• Click OK

34
External CSS

• Repeat the steps from the previous slide to
  create as many styles as you like, for example
• Title Style
• Header Style
• Footer Style
• Caption Style
• Emphasis Style
• ANYTHING you will have to adjust the appearance
  of your font, you can make a style for

35
CSS Link Styles (1/7)

• CSS can be used to create different link states,
  making it appear almost like a roll-over image.
• There are Four possible link states
• Link how a link will appear on the page
• Visited how a visited link will appear
• Hover how a link will appear with the mouse
  over it
• Active how a link will appear when being
  clicked.
• It is important that in the CSS, the link states
  appear in that order link, visited, hover,
  active.

36
CSS Link Styles (2/7)

• Open the CSS Sheet (ex2_css.css) in Dreamweaver.
• We are going to create the Four link states for
  each class.
• The page should look something like below

37
CSS Link Styles (3/7)

• Highlight everything from .nav all the way to the
  last .
• Copy the text and paste it below four (4) times
• Make sure to add a space or two in between each
  pasting.

38
CSS Link Styles (4/7)

• Now with your four .nav CSS states, you are
  going to add some text to each
• .nav alink
• .nav avisited
• .nav ahover
• .nav aactive
• This should give you a total of 5 .nav CSS styles
  and it should look like the screen shot.
• Now we can edit each state of link to appear how
  we want.

39
CSS Link Styles (5/7)

• Edits can be done by hand in the CODE view or can
  be done by using the RULE panel inside
  Dreamweaver.
• To edit in code view, simply delete the
  description you want to change back to the
  and then begin typing what you would like there,
  Dreamweaver will help you finish it
• Make sure to end with a

40
CSS Link Styles (6/7)

• To edit in Rules Panel
• Select the style you want to edit from the CSS
  panel on top
• Then adjust the settings as desired in the Rule
  panel as shown in the screen shot on the left.
• Both methods should yield the same results

41
CSS Link Styles (7/7)

• When you are done, preview your work in the
  browser.
• Repeat the steps to create the roll-over effects
  for you content navigation and save the file.
• You should be able to use this as a basis for you
  final project where you will need to have an
  external CSS.

42
Learn From Others

• If you see a page you like and wonder how they
  did something, you can save it to your computer
  and find out
• From Internet Explorer
• File
• Save As
• (make sure file type is Web page, complete)
• This will create an html page and a folder with
  associated elements.
• Open the html file in Dreamweaver and you can see
  all the tables, images, etc.

43
Dreamweaver Leftovers

• Each page should have a unique title
• Anchors
• Add the Date
• Alt tags for all images
• Linking an image
• Opening a link in a new window
• Email link (with subject)
• Tiling an Image
• Background Colors
• Expanded View
• Shim gif

44
Title Your Page Leftovers (1/11)

• Every page should have a unique title. To do so,
  simply type in a name for your page in the
  Title field on the open page window

45
Anchors Leftovers (2/11)

• Anchors are used to link to a specific place
  inside an html document. Most frequently used in
  long text documents to jump Back to Top or
  something like that.
• The Anchor tool is located on the Common Tool bar

46
Anchors Leftovers (2/11)

• Put your cursor on the page where you would like
  to drop your anchor
• Select the Anchor tool
• Choose a name for your anchor (no spaces)
• It creates a little anchor icon on the page (it
  will be invisible in the browser)
• Then to link to that anchor, highlight text
• On the same page, type nameofanchor in the
  link field
• To link an anchor on another page
  nameofpage.htmnamofanchor

47
Add the Date Leftovers (3/11)

• To add a date to your page, customarily used to
  indicate when the page was last updated, choose
  the Insert Date feature.

48
Add the Date Leftovers (3/11)

• Put your cursor where you want the date to appear
• Select Day Format
• Select Date Format
• Select Time Format
• Choose Update automatically on Save if desired
• OK

49
Alt tags Leftovers (4/11)

• Alt specifies alternative text that appears in
  place of the image for text-only browsers or for
  browsers that have been set to download images
  manually. For visually impaired users who use
  speech synthesizers with text-only browsers, the
  text is spoken out loud. In some browsers, this
  text also appears when the pointer is over the
  image.
• In the Alt field Type in the description of
  your image
• You are done.

50
Linking an Image Leftovers (5/11)

• To make an image into a link
• Select the image by clicking on it
• Type in the location you would like to link to in
  the link field
• Press Enter
• You are done.

51
Open Link in New Window Leftovers (6/11)

• Sometimes, especially when linking to an outside
  site, you would the link to open in a new browser
  window.
• To open a link in a new browser window
• After you have inserted the link,
• Choose _blank from the Target drop down menu
• You are all set.

52
Email Link Leftovers (7/11)

• To insert an Email link, highlight the text you
  would like to become the link (like usual)
• In the Link field type in mailtousername_at_domain
  .com
• This will create an email link on the page that
  will launch the default mail client of the
  computer
• TIP! gt To also automatically add the subject
  line, so you know where the person got your email
  from, type in a link like this
  mailtousername_at_domain.com?SubjectInformation
  Request

53
Tiling an Image Leftovers (8/11)

• Instead of making an image that is 800px wide
  that is all the same, you can tile it.
• Tiling can be used for background images and
  textures, it can be set inside of any table cell
• To insert a background image that will be tiled
• Place your cursor in the cell you want to insert
  the image
• In the Bg field, select the image from your
  images folder
• You are all set.

54
Background Colors Leftovers (9/11)

• You can add a background color to an individual
  table or to individual table cells. This can
  help to optimize your page for faster loading
• To set the background color of a table or cell
• Place your cursor inside the cell you want to
  change
• Select the Bg box at the bottom of the
  properties inspector
• Choose your color
• All good!

55
Expanded Table View Leftovers (10/11)

• When nesting tables, it can get a bit confusing,
  to make it easier to see where all your tables
  are and to edit a nested table, Dreamweaver has
  an Expanded view.
• Note The Expanded View will mess with the
  alignment while viewing in this modeDont worry,
  as long as it looks good in Standard mode, it is
  fine.
• To view in expanded mode Select the Layout
  Tool bar and choose Expanded

56
Expanded Table View Leftovers (10/11)

• Standard View Below
• Expanded View on Left

57
The Shim

• A Shim gif is a 1x1 pixel transparent image
• Its main use is in space holding, tables will not
  shrink smaller than about 10px normally, you can
  insert a shim and make them be as small as 1
  pixel high
• Shim can also be used as a spacer, to align text

58
The Shim

• Making a shim is easy and fun
• In Fireworks File gt New
• Select 1 px by 1px as the size and choose
  Transparent and the background Ok
• Filegt Export Preview
• Save as a .gif file, with the Alpha
  Transparency option selected
• Export
• You have got a shim!

59
Using a Shim

• Create a table with 3 rows
• Make the first row 10 px high
• Make the second 5 px high
• Make the third 15 px high
• Now insert the shim image in each and see what
  happens
• Inside on of the cell, add some textthen insert
  the shim in front of the text and adjust its
  width to align the text where you want it

60
Coming Attractions

• Next Week
• Class Discussion of Final Projects
• Be prepared to discuss what your site is about,
  how you are going to do it, and whyEveryone will
  discuss and give feedback to each other.
• Creating and Using a Dreamweaver Template
• Creating a PHP Contact Form!
• Discussion of Coding Languages
• Review of CSS