Introduction to Dreamweaver

1
Introduction to Dreamweaver
2
Building Your Site

• Before you do anything else make sure that you
  have assembled all the resources you need for
  your site graphics, sound, video etc.
• Create a folder on your local disk that contains
  all the files for your site.
• Create and edit documents within that folder.
• Allows you to test changes in the local site
  before making them publicly viewable.

3
Building Your Site

• Put related pages into the same folder. Use
  subfolders where necessary.
• Decide where to put items such as images and
  sound files.
• Designers sometimes place all of the non-HTML
  items to be used on a site in a folder called
  Assets.
• That folder may contain other folders eg., an
  Images folder, a Shockwave folder, and a Sound
  folder.

4
Building Your Site

• Make sure your style sheet is within your folder.
• Make sure your content is completely ready. Check
  spelling punctuation etc.
• Now take your template and add the content. Save
  under a new name.
• Keep checking the changes in your browser.

5
Creating Sites in Dreamweaver

• For best results, design and plan your site
  before you create any of the pages that will
  populate it.
• The first step in creating a Web site is
  planning.
• The next step is to set up the basic structure of
  the site.

6
Creating Sites

• Create a folder on your local disk that contains
  all the files for your site.
• Create and edit documents within that folder.
• Periodically copy those files to a Web server
  that allows other people to view the site.
• Allows you to test changes in the local site
  before making them publicly viewable.

7
Planning Site Structure

• Break down your site into categories put related
  pages into the same folder.
• Use subfolders where necessary.
• Decide where to put items such as images and
  sound files.

8
Planning Site Structure

• Designers sometimes place all of the non-HTML
  items to be used on a site in a folder called
  Assets.
• That folder may contain other folders eg., an
  Images folder, a Shockwave folder, and a Sound
  folder.

9
Planning Site Structure

• Use the same structure for local and remote
  sites.
• Your local site and your remote Web site should
  have exactly the same structure.
• If you create a local site using Dreamweaver and
  then upload everything to the remote site,
  Dreamweaver ensures that the local structure is
  precisely duplicated in the remote site.

10
Creating a Local Site

• A local sitethe local storage area for your Web
  site's filesrequires a name and a local root
  folder where you plan to store all of the site's
  files.
• Create a different local site for each Web site
  you work on.

11
Creating a Local Site

• The local root folder of your site should be a
  folder you set up specifically for that site.
• Don't use your disk as the site root, and don't
  use the Dreamweaver application folder.
• One good organizational approach is to create a
  folder named Sites, and then create local root
  folders inside that folder, one local root folder
  for each site you're working on.

12
Creating a Local Site

• To create a local site
• Choose Site gt New Site.
• In the Site Definition dialog box that appears,
  the Local Info category is selected.
• Enter the following options
• In the Site Name field, enter a name for the
  site. The site name appears in the Site window
  and on the Site gt Open Site submenu. The name can
  be anything you like.

13
Creating a Local Site

• In the Local Root Folder field, specify the
  folder on your local disk where site files,
  templates, and library items will be stored.
  Click the folder icon to browse to and select the
  folder, or enter a path and folder name in the
  text field.
• For the Refresh Local File List Automatically
  option, indicate whether or not to automatically
  refresh the local file list every time you copy
  files into your local site.

14
Creating a Local Site

• In the HTTP Address field, enter the URL that
  your completed Web site will use.
• For the Cache option, indicate whether or not to
  create a local cache to improve the speed of link
  and site management tasks.
• Click OK.

15
Site Management

• After creating your local site you then associate
  your local site with a remote server.
• When you transfer files between local and remote
  sites, Dreamweaver maintains parallel file and
  folder structures between your local and remote
  sites.
• If needed folders do not yet exist in the site
  that the files are being transferred to,
  Dreamweaver automatically creates those folders.

16
Site Management

• You can also synchronize the files between your
  local and remote sites Dreamweaver copies files
  in both directions as necessary, and optionally
  removes unwanted files as appropriate.
• Dreamweaver includes a number of features for
  structuring a site and transferring files to and
  from a remote server.
• To make collaborative work on a Web site easier,
  you can check in and check out files on the
  remote server others can then see when you're
  working on a file and know not to edit that file
  at the same time.

17
Setting Up a Remote Site

• Determine where the site will be located - what
  server the site will be served from.
• In particular, determine whether to use FTP to
  connect to the server, or whether you can instead
  mount the server as a network-accessible disk
  drive from your desktop.
• If you're connecting using FTP, find out the name
  of the FTP server.

18
Setting Up a Remote Site

• To associate a remote server with an existing
  local site
• Choose Define Sites from the current sites pop-up
  menu in the Site window, or choose Site gt Define
  Sites
• A dialog box appears listing currently defined
  sites select an existing site and click Edit.
• In the Category list at the left, click Web
  Server Info.

19
Setting Up a Remote Site

• Choose one of the following Server Access
  options
• Use None if you do not plan to upload your site
  to a server. Then click OK and skip the rest of
  this procedure.
• Use Local/Network if your Web server is mounted
  as a network drive (Windows) or as an AppleTalk
  or NFS server (Macintosh), or if you are running
  a Web server on your local machine. Browse and
  select the folder where your site files are
  stored on the server. Click OK and skip the rest
  of this procedure.
• Use FTP if you connect to your Web server using
  FTP.

20
Setting Up a Remote Site

• Enter the host name of the FTP host to which you
  upload files for your Web site.
• Your FTP host name is the full Internet name of a
  computer system, such as ftp.mindspring.com or
  www.shell16.ba.best.com.
• Enter the name of the host directory at the
  remote site where documents visible to the public
  are stored (also known as the site root). this
  may be the login directory (in which case this
  field should be left blank).

21
Setting Up a Remote Site

• Enter the login name and password that you use to
  connect to the FTP server.
• Select appropriate firewall options for your
  site
• Select the Use Firewall option if you are
  connecting to the remote server from behind a
  firewall.
• Some firewalls require use of passive FTP, which
  lets your local software set up the FTP
  connection rather than requesting the remote
  server to set it up. Select the Use Passive FTP
  option if your firewall configuration requires
  it. If you're not sure whether to use this
  option, check with your local firewall
  administrator.
• Click OK.

22
About the Site Window

• Use the Site window for standard file maintenance
  operations
• creating new HTML documents,
• moving files,
• creating folders,
• deleting items
• for site navigation layout with the site map
• for transferring files between your local and
  remote sites.

23
About the Site Window

• By default, the remote site (or site map) appears
  in the left pane, and the local site appears in
  the right pane. You can change this setting in
  the Site FTP preferences.

24
Using Site Window Controls

• Site Files View displays the file structure of
  the remote or local site (default view).
• Site Map View displays a visual map of your site
  based on how the documents are linked to one
  another.
• Current sites pop-up menu lists sites you've
  defined. To switch sites, choose a different site
  from the list. To add a site or edit the
  information for an existing site, choose Define
  Sites from the bottom of the list.

25
Using Site Window Controls

• Connect/Disconnect (available with FTP setting
  only) connects to or disconnects from the remote
  site. By default, Dreamweaver disconnects from
  the remote site if it has been idle for more than
  30 minutes.
• Refresh refreshes the local and remote directory
  lists.

26
Using Site Window Controls

• Get copies the selected files from the remote
  site to your local site.
• If Enable File Check In and Check Out is on, the
  local copies are read-only the files remain
  available on the remote site for other team
  members to check out.
• If Enable File Check In and Check Out is turned
  off, getting a file transfers a copy that has
  both read and write privileges.
• Note that the files copied are the ones selected
  in whichever pane of the Site window is currently
  active.
• If the Remote pane is active, the selected remote
  files are copied to the local site
• If the Local pane is active, the remote versions
  of the selected local files are copied to the
  local site.

27
Using Site Window Controls

• Put copies the selected files from the local site
  to the remote site.
• Note that the files copied are the ones selected
  in whichever pane of the Site window is currently
  active.
• If the Local pane is active, the selected local
  files are copied to the remote site
• if the Remote pane is active, the local versions
  of the selected remote files are copied to the
  remote site.

28
Using Site Window Controls

• Check Out transfers a copy of the file from the
  remote server to your local site (overwriting the
  existing local copy of the file, if any) and
  marks the file as checked out on the server. This
  option is not available if Enable File Check In
  and Check Out is turned off for the current site.
  
• Check In transfers a copy of the local file to
  the remote server and makes the file available
  for editing by others. The local file becomes
  read-only. This option is not available if Enable
  File Check In and Check Out is turned off for the
  current site.

29
Testing your Site

• Make sure your pages function as expected in the
  browsers you're targeting and that they "fail
  gracefully" in other browsers. Choose File gt
  Check Target Browsers.
• Your pages should be legible and functional in
  browsers that do not support styles, layers, or
  JavaScript.
• For pages that will fail badly in older browsers,
  consider using the Check Browser behavior to
  automatically redirect visitors to another page.

30
Testing your Site

• Check your site for broken links (and fix them).
  Also, Dreamweaver generates a list of links to
  external sites when you run a link check
  periodically follow these links to make sure
  they're still valid. Choose Site gt Check Links
  Sitewide.
• View your pages in as many different browsers and
  on as many different platforms as possible. This
  gives you an opportunity to see differences in
  layout, color, font sizes, and default browser
  window size.

31
Testing your Site

• Keep an eye on the size of your pages and the
  time they take to download. Keep in mind that for
  pages that consist of one large table, visitors
  will see nothing until the entire table has
  finished loading.
• The size and estimated download time of the
  current page appear at the bottom of the Document
  window. Dreamweaver calculates size based on the
  entire contents of the page, including all linked
  objects such as images and plugins.
• Dreamweaver estimates download time based on the
  connection speed entered in the Status Bar panel
  of the Preferences dialog box. Actual download
  time varies depending on general Internet
  conditions.

32
Testing your Site

• To set download time and size preferences
• Choose Edit gt Preferences and then click Status
  Bar.
• Choose a connection speed with which to calculate
  download time.
• The average connection speed in the United States
  is 28.8.
• If you are designing for an intranet, you may
  want to choose 1500 (T1 speed).

33
Introduction to Dreamweaver

• A WYSIWYG editor (for What-You-See-Is-What-You-Get
  ).
• Lets you make Web pages in an easy drag-and-drop
  fashion.
• makes basic HTML a little easier,
• writes clean code
• Also creates cascading stylesheets, dynamic HTML,
  and JavaScript.

34
Introduction to Dreamweaver

• The first thing to look for when you start up
  Dreamweaver is the three default palettes
• The Properties palette
• The Insert/Objects palette
• The Launcher palette
• From here you can either control the content on
  your page or launch other palettes that can
  further modify your page.

35
Introduction to Dreamweaver

• The Properties palette
• Here you will find all sorts of ways to modify
  your HTML objects.

36
Introduction to Dreamweaver

• The Properties palette
• Do this by highlighting or double-clicking a word
  and then adjusting the relevant property.
• Bold and italics
• ltbgtlt/bgt ltigtlt/igt

37
Introduction to Dreamweaver

• The Properties palette
• Fonts
• ltfont facearial"gtlt/fontgt

38
Introduction to Dreamweaver

• The Properties palette
• Size
• ltfont size""gtlt/fontgt

39
Introduction to Dreamweaver

• The Properties palette
• Color
• ltfont color"RRGGBB"gtlt/fontgt

40
Introduction to Dreamweaver

• The Properties palette
• Link
• lta hrefindex.htmlgtlt/agt

41
Introduction to Dreamweaver

• The Properties palette
• Most tags concerning the look of your text are
  located in the Properties palette.
• You can also modify a block of text from the
  Properties palette the alignment of the
  paragraph, style of list, indentation, and
  headings.

42
Introduction to Dreamweaver

• The Properties palette
• Alignment
• ltp alignleft"gtlt/divgt
• Lists
• ltulgtltligtlt/ligtlt/ulgt ltolgtltligtlt/ligtlt/olgt

43
Introduction to Dreamweaver

• The Properties palette
• Indentation
• ltblockquotegtlt/blockquotegt
• Format
• lthgtlt/hgt

44
Introduction to Dreamweaver

• Each of the functions directly corresponds to a
  tag or group of tags.
• As you insert the tags, you insert raw HTML tags
  that behave in Dreamweaver as they behave in your
  browser.
• DW just puts HTML on your page, rendering the
  HTML as you see it.
• So, what you see is what you get (WYSIWYG).

45
Introduction to Dreamweaver

• To prove this, take a look at the Launcher
  palette.
• The Launcher palette controls the task-specific
  palettes, the Site, Library, Styles, Behavior,
  Time Line, and HTML palettes.
• You will notice that the same icons you find in
  the Launcher are also at the bottom of the
  document window, in the second divider of the
  Windows menu, and bound to keys F5 to F10.

46
Introduction to Dreamweaver

• Launcher Palette
• Open the HTML palette to get

47
Introduction to Dreamweaver

• This is the source of your HTML page.
• If you keep it open while you work in
  Dreamweaver, you can see the HTML dropping in as
  you type.
• Try typing in some text with HTML coding into
  this window, then click back to the main document
  palette just as you typed it right?

48
Introduction to Dreamweaver

• Objects Palette
• You will also need images, applets, forms,
  plug-ins, scripts, and all the other elements
  that makes HTML a bit more exciting.
• This is where that long vertical Objects palette
  comes into play. From there you can insert other
  HTML objects.

49
Introduction to Dreamweaver

• Objects Palette

50
Introduction to Dreamweaver

• Objects Palette
• The most common form of object is an image.
• You can insert one by clicking on the insert
  image icon in the Object palette.
• Click on it to invoke a pop-up window that asks
  for the URL of the image you wish to embed.
• You can do this either by typing it in or
  browsing to it on your file system.

51
Introduction to Dreamweaver

• Once you insert an image, you will see it on the
  page with an outline around it and three black
  boxes.
• You can grab any of the three "grippers" on the
  image and change the size of the image.
• The gripper on the right changes just the width,
• The gripper on the bottom changes just the
  height,
• The one in the bottom right corner can change
  both.

52
Introduction to Dreamweaver

• Try stretching the image all out of proportion.
  As you do so, notice that the UI for the
  Properties palette has completely changed.
• The controls for tags that modify the text have
  been replaced with a new set of controls designed
  to allow you to edit the Image tag.

53
Introduction to Dreamweaver

• Type some new number values in the W or H field
  in the image and the dimensions of the image will
  change.
• Click on the label of these two fields to return
  the image to its original size.
• You can add or modify most every attribute of an
  Image tag.To access the additional attributes,
  click on the button at the lower right of
  the palette.

54
Introduction to Dreamweaver

• If you play around with all the fields and then
  check the Image tag in your HTML editor. Again
  you'll notice that you're just making changes to
  the various HTML tags.
• Dreamweaver is just an easy-to-use interface that
  generates the same old HTML - nothing too
  exciting going on.
• It is all about contextual menus. The area you
  select on the page will determine what the
  Properties palette will show, and what menu you
  get when you right-click on a PC or option-click
  on a Mac.

55
Introduction to Dreamweaver

• Not everything is available in the Objects menu
  initially. Mostly you'll find structural (divs
  and tables ) and replaced elements (images and
  plug-ins and applets ).

• Click on the arrow in the upper left of the
  palette to access any of the groups of insertable
  objects in Dreamweaver. By default these
  categories are Common, Forms, Head and
  Invisibles. (So far we've been working with
  elements in the common grouping.)

56
Introduction to Dreamweaver

• One important tag that you won't find as an icon
  or a menu item is the ltbodygt tag.
• Look in the Modify menu and select Page
  Properties, which will be the first item
  available.
• This allows you to modify the ltbodygt tag, setting
  things such as the text and link colors, the
  background, and also the lttitlegt tag for your
  page.

57
Introduction to Dreamweaver

• Tables in Dreamweaver
• A lot of Web design frustration stems from
  forcing a tag that was designed to display
  nothing but tabular data to act as a layout
  engine.
• Using DW you can insert a table simply by
  clicking on the tables icon in the objects
  palette.

58
Introduction to Dreamweaver

• Tables in Dreamweaver
• As with most Dreamweaver Properties palettes,
  the UI is focused on the alteration of tag
  attributes.
• The table properties, however, contain some extra
  tools to help you manipulate a complex table
  layout.
• The table palette, and its tools concentrate on
  the attributes that affect the whole table.

59
Introduction to Dreamweaver

• To manipulate specific portions of the table,
  right-click (option-click on the Mac) inside the
  table to get this menu.
• From here you can insert or delete
• Entire rows and columns. You can
• also get the properties of the cell,
• column, or row modify the colors
• of the border or background of the
• cell or set the alignment of the
• content of the table.

60
Checking Your Pages

• Make sure that
• You have used the right tag for the job.
• All HTML tags and atrributes are properly
  spelled.
• All HTML tags use the correct syntax. Watch out
  for attribute values which do not have quotation
  marks at each end and tag angle brackets in the
  wrong place or missed entirely.

61
Checking Your Pages

• All URLs, absolute and relative, must point to
  the correct address. In particular, watch out for
  URLs which are valid on your own compute. A link
  such as
• lta hrefassets/mypicture.jpggt
• is a valid link, while one like
• lta hreffile//c/web_pages/assets/mypicture.jpggt
• is not because once the page has been uploaded
  to a Web server, the folder paths included will
  not apply.

62
Checking Your Pages

• Make sure every HTML opening tag has a closing
  tag.
• All nested tags are in the correct order
  remember last on first off.

63
Testing your Site

• Check your site in different browsers. At the
  very least check the site in the latest versions
  of Netscape and Internet Explorer.
• Check that your pages look good at both 1024x768
  and 800x600.
• Check that all your links are working and that
  your images are appearing.

64
Creating a Form Using Dreamweaver

• Place the insertion point where you want the form
  to appear, and choose Insert gt Form OR
• Place the insertion point where you want the form
  to appear, and click the Form button on the Forms
  panel of the Object palette.
• Drag the Form button to the desired location on
  the page.
• If there is no visible result, check that View gt
  Invisible Elements is on.

65
Creating a Form Using Dreamweaver

• Select the form and set form properties in the
  Property inspector. Choose from the following
  options
• Form Name assigns a name to the form. Naming a
  form makes it possible to control it with a
  scripting language, such as JavaScript or
  VBScript.
• Action identifies the server-side application
  that processes the form information, specified as
  a URL. Click the folder icon to locate the
  application, or enter the application's path.

66
Creating a Form Using Dreamweaver

• Method defines how the form data is handled.
• Get appends form values to the URL and sends the
  server a GET request. Because URLs are limited to
  8192 characters, don't use the GET method with
  long forms.
• Post sends the form values in the body of a
  message and sends the server a POST request.
• Default uses the browser's default method
  (generally GET).

67
Adding an Object to a Form Using Dreamweaver

• To add an object to a form
• Place the insertion point inside the form
  boundary, and choose an object from the Insert gt
  Form Object menu
• OR
• Place the insertion point inside the form
  boundary, and click an object button on the Forms
  panel of the Object palette.
• Drag an object button to the desired location
  inside the form boundary.

68
Adding an Object to a Form Using Dreamweaver

• Specify the properties for the object in the
  Property inspector (choose Window gt Properties to
  display the Property inspector if it is not
  already open).
• Text fields accept any type of text, alphabetic
  or numeric. The entered text can be displayed as
  a single line, as multiple lines, or as bullets
  or asterisks (for password protection).
• Buttons perform tasks when clicked, such as
  submitting or resetting forms. You can enter a
  custom label for a button, or use one of the
  predefined labels.

69
Adding an Object to a Form Using Dreamweaver

• Image fields can be used in place of Submit
  buttons.
• Checkboxes allow multiple responses in a single
  group of options.
• Radio buttons represent exclusive choices.
  Selecting a button within a group deselects all
  others in the group.

70
Adding an Object to a Form Using Dreamweaver

• List/menus present a set of values from which
  users can choose. The object can present a pop-up
  menu, which appears only when the user clicks the
  object's name (and which accepts only a single
  choice), or a list box, which always displays the
  values in a scrolling list (and which accepts
  more than one choice).
• File fields let users browse to files on their
  hard disks and upload them as form data.

71
Adding an Object to a Form Using Dreamweaver

• Hidden fields let you store information (such as
  the recipient of form data or the subject of the
  form) that is not relevant to the user but that
  will be used by the application that processes
  the form.
• Jump Menu lets you insert a menu in which each
  option links to a document or file.
• Type a label or descriptive text, if desired,
  next to the object.
• You can apply text formatting to form object
  labels.

72
Text Field Properties

• To display text field properties in the Property
  inspector, select a text field in a form.
• Text Field assigns a name to the field. Every
  text field must have a unique name.
• Char Width sets the maximum number of characters
  that can be displayed in the field.

73
Text Field Properties

• Max Chars/Num Lines sets the maximum number of
  characters that can be entered in the field for
  single-line text fields and sets the height of
  the field for multiple-line text fields. Use Max
  Chars to limit zip codes to 5 digits, limit
  passwords to 10 characters, and so on.
• Init Value assigns the value displayed in the
  field when the form first loads.

74
Text Field Properties

• Type designates the field as a single-line,
  multiple-line, or password field.
• Single-line
• INPUT tag with its TYPE attribute set to TEXT.
• Char Width setting maps to the SIZE attribute
• Max Chars setting maps to the MAXLENGTH attribute.

75
Text Field Properties

• Password
• INPUT tag with its TYPE attribute set to
  PASSWORD.
• Char Width and Max Chars settings map to the same
  attributes as in single-line text fields.
• Multi-line
• TEXTAREA tag.
• Char Width setting maps to the COLS attribute.
• The Num Lines setting maps to the ROWS attribute.

76
Button Properties

• To display button properties in the Property
  inspector, select a button in a form.
• Button Name assigns a name to the button.
• Two reserved names, Submit and Reset, tell the
  form to submit the form data to the processing
  application or script and to reset all the form
  fields to their original values, respectively.
•  
• Label Determines the text that appears on the
  button.  

77
Button Properties

• Action determines what happens when the button is
  clicked.
• Selecting Submit Form automatically sets the name
  of the button to Submit.
• Selecting Reset Form automatically sets the name
  of the button to Reset.
• None means that neither a submit nor reset action
  will occur when the button is clicked.

78
Image Field Properties

• To display image field properties in the Property
  inspector, select an image field in a form.
• Name assigns a name to the image field. (Enter a
  name in the unlabeled text field on the far left
  side of the Property inspector.)

79
Image Field Properties

• Src sets the source file for the field. Click the
  folder icon to browse to an image file on your
  hard disk.  
• Alt specifies alternative text that appears in
  place of the image for text-only browsers or for
  browsers set to download images manually. In some
  browsers, this text also appears when the pointer
  is over the image.

80
Checkbox Properties

• To display checkbox properties in the Property
  inspector, select a checkbox in a form.
• CheckBox Name Assigns a name to the checkbox.
•  
• Checked Value Sets the value of the checkbox when
  it is selected (checked). This is the value that
  is sent to the server-side application (for
  example, a CGI script) when the user submits the
  form.
•  
• Initial State specifies whether the checkbox is
  selected or unselected when the form first loads.

81
Radio Button Properties

• To display radio button properties in the
  Property inspector, select a radio button in a
  form.
• RadioButton assigns a name to the button. All
  radio buttons in a group must have the same name.
  
• Checked Value sets the value of the radio button
  when it is turned on.
• This is the value that is sent to the processing
  application (for example, a CGI script) when the
  user submits the form.
• Assign different values to each radio button in a
  group.

82
Radio Button Properties

• Initial State determines whether the button is
  turned on or off when the form first loads. Only
  one button in a group can have an initial state
  of On.

83
List/Menu Properties

• To display list/menu properties in the Property
  inspector, select a list or pop-up menu in a form
  
• List/Menu Assigns a name to the list or menu.
  This field is required, and the name must be
  unique.
• Type Indicates whether the object is a pop-up
  menu or a scrolling list.

84
List/Menu Properties

• For a list, you can set the height (the number of
  items displayed at once) and indicate whether the
  user can select multiple items from the list.
• List Values Opens the Initial List Values dialog
  box so you can add items to the list or pop-up
  menu.
• Each item in the list has a label (the text that
  appears in the list) and a value (what is sent to
  the processing application if the item is
  selected).
• If no value is specified, the label is sent to
  the processing application instead.

85
List/Menu Properties

• Use the plus () and minus (-) buttons to add and
  remove items in the list.
• Items are in the same order as in the Initial
  List Values dialog box.
• The first item on the list is the selected item
  when the page is loaded in a browser.
• Use the up and down arrow buttons to rearrange
  items in the list.

86
File Field Properties

• To display file field properties in the Property
  inspector, select a file field in a form.
• FileField Name assigns a name to the field. This
  field is required, and the name must be unique.
• Char Width sets the maximum number of characters
  that can be displayed in the field.
• Max Chars sets the maximum number of characters
  that can be entered in the field. Use this
  property to limit the length of file names.

87
File Field Properties

• Note
• Confirm with your server's administrator that
  anonymous file uploads are allowed before using
  the file field.
• If you insert a file field with Dreamweaver, you
  must manually insert ENCTYPE"multipart/form-data"
  into the FORM tag to ensure that the file is
  encoded properly.

88
Hidden Field Properties

• To display hidden field properties in the
  Property inspector, select a hidden field in a
  form.
• If you cannot see hidden fields, choose Edit gt
  Preferences, select Invisible Elements, and
  select the Hidden Form Fields option.
•  
• HiddenField assigns a name to the field. This
  field is required and the name must be unique.
• Value Sets the value of the field.

89
Dreamweaver Style Sheets

• Save the html page.
• Choose Window gt CSS Styles to open the CSS Style
  palette.
• In the CSS Style palette, click the New Style
  icon. A New Style dialog box appears.
• Select the Redefine HTML Tag option, and choose
  h2 from the text field's pop-up menu. Click OK.

90
Dreamweaver Style Sheets

• A Style definition for h2 dialog box appears.
  Make sure Type is selected in the Category list
  on the left.
• From the Font pop-up menu, choose Arial,
  Helvetica, sans-serif.
• From the Weight pop-up menu, choose 700. Font
  weights can be defined using words like bold,
  bolder, or lighter they can also be defined on a
  scale of 100 to 900. The normal weight is 400
  700 is bold 900 is extra bold.

91
Dreamweaver - Style Sheets

• From the Size pop-up menus, choose 16 and points.
  You can define a style with any type size you
  like, using any of several measurespoints, mm,
  pixels, and so on.
• Note Because the screen resolution on many PC
  monitors is different from that of Macintosh
  monitors, fonts may appear significantly larger
  on Windows computers. If you're creating pages in
  Windows, you may want to use slightly
  larger-than-normal fonts to improve readability
  on the Mac if you creating pages on the Mac, you
  may want to use slightly smaller fonts so they
  won't look huge on Windows.

92
Dreamweaver Style Sheets

• Point to the color box and drag to select your
  favorite shade of green, or enter 006600 in the
  Color text field.
• Click Apply.The results are now visible in the
  Document window. If you like what you see, click
  OK. If not, make adjustments and click Apply
  again.
• Repeat this procedure to define styles for TD and
  A . Make the font for TD Courier New, Courier,
  mono. Don't define any other attributes. For A ,
  set only the Decoration Select the none option
  to prevent links from being underlined.

93
Dreamweaver Style Sheets

• A CSS selector style can apply to a particular
  tag when it occurs inside another particular tag.
• To create a selector style
• If the Edit Style Sheet dialog box is not
  showing, click the Open Style Sheet button in the
  CSS Style palette to open it.
• Click New, select the Use CSS Selector option,
  and type TD CODE in the text field. Make sure
  that there is a space between TD and CODE . Click
  OK.

94
Dreamweaver Style Sheets

• A Style definition for TD CODE dialog box
  appears.
• In the Color option, point to the color box and
  drag to select a dark red, or enter 990000 in
  the Color text field.
• Click Apply.The results are now visible in the
  Document window. If you like what you see, click
  OK. If you prefer a different color, make
  adjustments and click Apply again.

95
Dreamweaver Style Sheets

• To create a class style
• If the Edit Style Sheet dialog box is not
  showing, click the Open Style Sheet button in the
  CSS Style palette to open it.
• Click New, select the Make Custom Style (class)
  option, and type footer in the text field. Click
  OK.
• From the Font pop-up menu, select Arial,
  Helvetica, sans-serif.

96
Dreamweaver Style Sheets

• From the Size pop-up menus, select 9 and points.
  Click OK.
• Clicking Apply has no visible result in the
  Document window because you have only defined the
  class style thus far. You haven't yet designated
  which tags or ranges of text the style will apply
  to.
• In the Edit Style Sheet dialog box, click Done.

97
Dreamweaver Style Sheets

• To apply a class style
• Click anywhere in the footer text.
• In the tag selector at the bottom of the Document
  window, click the ltpgt tag. The entire footer is
  selected.
• In the CSS Style palette, click footer . (If the
  Auto Apply checkbox isn't selected, click the
  Apply button.)

98
Dreamweaver Style Sheets

• The footer text appears in 9-point Arial.
• In the above procedure we selected an entire
  paragraph and applied a class style to it. If you
  open the HTML Source inspector (Window gt HTML
  Source), you can see that Dreamweaver added a
  class"footer" attribute to the footer's P tag.
• You can also apply the footer style to any other
  tag on the page, and the text enclosed by that
  instance of that tag will take on the attributes
  of the footer class.

99
Dreamweaver Linked Style Sheets

• To create or link to an external CSS style sheet
  
• Choose Window gt CSS Styles, or click the CSS
  Styles icon in the Launcher.
• In the CSS Style palette, click the Open Style
  Sheet icon.
• In the Edit Style Sheet dialog box, click Link.

100
Dreamweaver Linked Style Sheets

• In the Link External Style Sheet dialog box, do
  one of the following
• Click Browse (Windows) or Choose (Macintosh) to
  browse to an external CSS style sheet, or type
  the path to the style sheet in the File/URL box.
• Create a new external CSS style sheet by entering
  a new file name (one that doesn't already exist
  at the specified location). The file name must
  end in the .css extension.

101
Dreamweaver Linked Style Sheets

• Select the Link or Import option to specify and
  create the tag used to attach the external CSS
  style sheet to the document, and then click OK.
• Import brings the information in the external CSS
  style sheet file into the current document, while
  Link accesses and relays the information without
  transferring it.While both Import and Link call
  all styles in the external CSS style sheet into
  the current document, Link offers more features
  and works in more browsers.
• The name of the external CSS style sheet appears
  with the identifier (link or import) in the list
  of styles in the Edit Style Sheet dialog box.

102
Dreamweaver Linked Style Sheets

• In the Edit Style Sheet dialog box, select the
  name of the external style sheet and click Edit.
• The Edit Style Sheet dialog box appears for that
  style sheet.
• Click New to define styles in the external CSS
  style sheet.
• In the New Style dialog box, define the new
  style.
• Click Save when you have finished defining styles.

103
Editing a Linked CSS style sheet

• When you edit a CSS style sheet that controls the
  text in your document, you instantly reformat all
  of the text controlled by that CSS style sheet.
  Your edits affect all the documents linked to the
  style sheet.

104
Editing a Linked CSS style sheet

• To edit an external CSS style sheet
• Open any document that is linked to the external
  CSS style sheet you want to change.
• Do one of the following
• Choose Window gt CSS Styles or click CSS Styles in
  the Launcher. Then click the Open Style Sheet
  icon in the CSS Style palette.
• Choose Text gt CSS Styles gt Edit Style Sheet.

105
Editing a Linked CSS style sheet

• In the Edit Style Sheet dialog box, select the
  name of the external style sheet and click Edit.
• A second Edit Style Sheet dialog box appears that
  displays the styles in the external style sheet.
• Edit the styles.
• Click Save when you have finished editing styles.

106
Edit (CSS) Style Sheet Dialog Box Options

• Choose any of the following options in the Edit
  (CSS) Style Sheet dialog box to edit, create,
  link, duplicate, and remove styles
• Link Attaches or creates an external style sheet.
  
• New Creates a new style.
• Edit Opens the selected style for editing.
• Duplicate Makes a copy of the selected style.
• Remove Deletes the selected style.
• Style Definition Displays the attributes of the
  current style if a style is selected, or lists
  the styles defined by an external style sheet if
  a linked style sheet is selected.

107
Style Definition Type Panel

• Use the Type panel of the CSS Style Definition
  dialog box to define basic type settings for a
  CSS style.
• To open the Style Definition dialog box, choose
  Window gt CSS Styles and click the Open Style
  Sheet icon.
• In the dialog box that appears, choose a CSS
  style and click Edit. Click Type on the left side
  of the dialog box. Leave any of the following
  attributes empty if they are not important to the
  style

108
Style Definition Type Panel

• Font Sets the font family (or series of families)
  for the style.
• Size Defines the size of the text. You can choose
  a specific size by selecting the number and the
  unit of measurement, or you can choose a relative
  size.
• Style Specifies Normal, Italic, or Oblique as the
  font style. The default setting is Normal.

109
Style Definition Type Panel

• Line Height Sets the height of the line on which
  the text is placed. Select Normal to have the
  line height for the font size calculated
  automatically, or enter an exact value and select
  a unit of measurement. This attribute is not
  supported by current browsers and causes problems
  in Internet Explorer 3.0 browsers.
• Decoration Adds an underline, overline, or
  line-through to text, or makes the text blink.
  The default setting for regular text is None. The
  default setting for links is Underline.

110
Style Definition Type Panel

• Weight Applies a specific or relative amount of
  boldface to the font. Normal is equivalent to
  400 Bold is equivalent to 700.
• Variant Lets you select a variation of the font,
  such as small caps. Dreamweaver does not display
  this attribute in the Document window.
• Case Capitalizes the first letter of each word in
  the selection or makes it all uppercase or
  lowercase. Dreamweaver does not display this
  attribute in the Document window.
• Color Defines the color of the text.

111
Style Definition Background Panel

• Use the Background panel of the CSS Style
  Definition dialog box to define background
  settings for a CSS style.
• To open choose Window gt CSS Styles and click the
  Open Style Sheet icon.
• In the dialog box that appears, choose a CSS
  style and click Edit. Click Background on the
  left side of the dialog box. Leave any of the
  following attributes empty if they are not
  important to the style

112
Style Definition Background Panel

• Background Color Sets the background color for
  the element.
• Background Image Sets the background image for
  the element.
• Attachment Determines whether the background
  image is fixed at its original position or
  scrolls along with the content. Note that some
  browsers may treat the Fixed option as Scroll.
  Dreamweaver does not display this attribute in
  the Document window.

113
Style Definition Background Panel

• Repeat Determines whether and how the background
  image is repeated, as follows
• No Repeat displays the image once at the
  beginning of the element.
• Repeat tiles the image horizontally and
  vertically behind the element.
• Repeat-x and Repeat-y display a horizontal and
  vertical band of images, respectively. Images are
  clipped to fit within the boundaries of the
  element.

114
Style Definition Background Panel

• Horizontal Position and Vertical Position Specify
  the initial position of the background image in
  relation to the element.

115
Style Definition Block Panel

• To open choose Window gt CSS Styles and click the
  Open Style Sheet icon.
• In the dialog box that appears, choose a style
  and click Edit. Click Block on the left side of
  the dialog box. Leave any of the following
  attributes empty if they are not important to the
  style

116
Style Definition Block Panel

• Word Spacing Adds extra space between words.
• Letter Spacing Adds extra space between
  characters.
• Vertical Alignment Specifies the vertical
  alignment of the element.
• Text Align Determines how text is aligned within
  the element.

117
Style Definition Block Panel

• Text Indent Specifies how far the first line is
  indented.
• Whitespace Determines how white space within the
  element is handled. Choose from three options
• Normal collapses white space
• Pre handles it as if the text were enclosed in
  PRE tags (that is, all white space, including
  spaces, tabs, and returns, is respected)
• Nowrap specifies that the text only wraps when a
  BR tag is encountered.

118
Style Definition Box Panel

• Use the Box panel of the CSS Style Definition
  dialog box to define settings for styles that
  control the placement of elements on the page.
• To open choose Window gt CSS Styles and click the
  Open Style Sheet icon.
• In the dialog box that appears, choose a style
  and click Edit. Click Box on the left side of the
  dialog box. Leave any of the following attributes
  empty if they are not important to the style

119
Style Definition Box Panel

• Width and Height Determine the size of the
  element. Dreamweaver displays this attribute in
  the Document window only when it is applied to
  images or layers.
• Float Moves the element out of the page flow and
  places it at either the left or right page
  margin. Other elements wrap around the floating
  element as usual.
• Clear Defines the sides that do not allow layers.
  If a layer appears on the clear side, the element
  with the clear setting moves below it.

120
Style Definition Box Panel

• Padding Defines the amount of space between the
  content of the element and its border (or its
  margin if there is no border).
• Margin Defines the amount of space between the
  border of the element (or the padding if there is
  no border) and any other element.

121
Style Definition Border Panel

• Use the Border panel of the CSS Style Definition
  dialog box to define settings for styles
  controlling borders around elements.
• To open choose Window gt CSS Styles and click the
  Open Style Sheet icon.
• In the dialog box that appears, choose a style
  and click Edit. Click Border on the left side of
  the dialog box. Leave any of the following
  attributes empty if they are not important to the
  style

122
Style Definition Border Panel

• Width Sets the thickness of the element's border.
  
• Color Sets the color of the border. You can set
  each side's color independently, but the display
  depends on the browser.
• Style Determines the style of the border, but the
  display depends on the browser.

123
Style Definition List Panel

• Use the List panel of the CSS Style Definition
  dialog box to define list settings in styles.
• To open choose Window gt CSS Styles and click the
  Open Style Sheet icon.
• In the dialog box that appears, choose a style
  and click Edit. Click List on the left side of
  the dialog box. Leave any of the following
  attributes empty if they are not important to the
  style

124
Style Definition List Panel

• Type Determines the appearance of bullets or
  numbers.
• Bullet Image Lets you specify a custom image for
  bullets. Click Browse (Windows) or Choose
  (Macintosh) to browse to an image, or type the
  image's path.
• Position Determines whether the list item wraps
  to an indent (outside) or to the margin (inside).

125
Style Definition Positioning Panel

• The Positioning style attributes change the tag
  or block of selected text into a new layer using
  the default tag for defining layers as set in the
  Layer preferences.
• To open choose Window gt CSS Styles and click the
  Open Style Sheet icon.
• In the dialog box that appears, choose a style
  and click Edit. Click Positioning on the left
  side of the dialog box. Leave any of the
  following attributes empty if they are not
  important to the style

126
Style Definition Positioning Panel

• Type Determines how the browser should position
  the layer as follows
• Absolute places the layer using the coordinates
  entered in the Placement boxes relative to the
  top left corner of the page.
• Relative places the layer using the coordinates
  entered in the Placement boxes relative to
  object's position in the text flow of the
  document. This option is not displayed in the
  Document window.
• Static places the layer at its location in the
  text flow.

127
Style Definition Positioning Panel

• Visibility Determines the initial display
  condition of the layer. If you do not specify a
  visibility property, by default most browsers
  inherit the parent's value.
• Inherit inherits the visibility property of the
  layer's parent.
• Visible displays the layer contents, regardless
  of the parent's value.
• Hidden hides the layer contents, regardless of
  the parent's value.

128
Style Definition Positioning Panel

• Z-Index Determines the stacking order of the
  layer. Higher numbered layers appear above
  lower-numbered layers. Values can be positive or
  negative.
• Overflow (CSS layers only) Determines what
  happens if the contents of a layer exceed its
  size, as follows
• Visible increases the layer's size so that all of
  its contents are visible. The layer expands down
  and to the right.

129
Style Definition Positioning Panel

• Hidden maintains the layer's size and clips any
  content that doesn't fit. No scroll bars are
  provided.
• Scroll adds scroll bars to the layer regardless
  of whether the contents exceed the layer's size.
• Auto makes scroll bars appear only when the
  layer's contents exceed its boundaries.

130
Style Definition Positioning Panel

• Placement Specifies the location and size of the
  layer.
• The default units for location and size are
  pixels. For CSS layers, you can also specify the
  following units pc (picas), pt (points), in
  (inches), mm (millimeters), cm (centimeters), or
  (percentage of the parent's value). The
  abbreviations must follow the value without a
  space for example, 3mm.
• Clip Defines the part of the layer that is
  visible. If you specify a clipping region, you
  can access it with a scripting language such as
  JavaScript and manipulate the properties to
  create special effects such as wipes.

131
Style Definition Extensions Panel

• The Extensions style attributes control features
  that are not supported by most current browsers.
• To open choose Window gt CSS Styles and click the
  Open Style Sheet icon. In the dialog box that
  appears, choose a style and click Edit.
• Click Extensions on the left side of the dialog
  box. Leave any of the following attributes empty
  if they are not important to the style

132
Style Definition Extensions Panel

• Pagebreak Forces a page break during printing
  either before or after the object controlled by
  the style. This option is not supported by any
  4.0 browser, but support may be provided by
  future browsers.
• Cursor Changes the pointer image when the pointer
  is over the object controlled by the style. Only
  Internet Explorer 4.0 supports this attribute.
• Filter Applies special effects to the object
  controlled by the style, including blur and
  inversion. Choose an effect from the pop-up menu.
  Only Internet Explorer 4.0 supports this
  attribute.

133
Introduction to Dreamweaver

• DIVs and Layers
• DIVs can be inserted into your page from the
  Common collection in the Objects palette.
• Instead of the standard dialog box, your cursor
  will pop up a marquee-like icon .
• Use it to draw a rectangle on the page. You
  should now have a bold rectangle with grippers
  and a little handle icon.

134
Introduction to Dreamweaver

• DIVs and Layers
• To insert HTML into the DIV, click inside the DIV
  and drop it in, just as you would in a document.
• To edit the DIV itself, click on its gripper.
  This will call up the DIV UI in the Properties
  palette.
• From here, you can set the style properties of
  the DIV for all selectors, which will work in
  both Netscape and Internet Explorer.

135
Introduction to Dreamweaver

• DIVs and Layers
• The first attribute is set by default The ID
  will be labeled with the DIV number that you
  inserted into the document. You can replace a
  more mnemonic name. (But be careful! Giving it a
  reserved name in JavaScript, such as "this", will
  cause both Dreamweaver and your browser to go
  nutzoid.)
• This name will appear in any of the interfaces
  that reference Divs. Other attributes in the
  Properties palette allow you to position the Div
  and modify its size.