Dreamweaver

Hour 1 Dreamweaver

Hour2 Overview

Hour 3 Define a site

Hour 4 Makin a HTML page and adding Text

Hour 5 Hyperinks Anchors and Mail Links

Hour 6 Tables

Hour 7 Exploring HTML:

Hour 8 Displaying Images

Hour 9

Learning Divs

Learning Spry Effects


 

 

PDF
Hour 1 Dreamweaver:
XHTML(Extensible Hypertext Markup Language)   Dividing an image into smaller pieces is called slicing
Open http://www.floraphotographs.com/  click the search link.  You can download and use this same lightbox effect (called “lightview”) without writing a line of code!
Reusable code:
Web pages created from a template maintain a link to the original template, so when the original is updated, the changes can be propagated to all the web pages based on the template.
Like templates, library items maintain a link to the parent library item and can be updated throughout an entire website.
You can use Javascript  in the webdesign to make the webpage come alive with rollover, etc. 
Go to CSS Zen Garden and click some of the design links on the right side of the home page. Do you notice that the content in each design web page is the same? Only the CSS changes for each design. Pretty amazing!
Hour 2 Overview
Welcome Screen:  configure to show in edit,preferences, and general category to display the show welcome screen setting. 
Workspace:. You can configure the workspace to your liking or use the different workspaces in the dropdown menu on right side of menu bar.  Will be labeled Designer for me!!  To switch the workspace back to default, select window, workspace Layout, designer
Insert panel: working on Text us the dropdown to show the text category.  If you are working on a form, show the form category.  If in the common category and you push image dropdown, you get image, image placeholder, rollover image, fireworks html.
Menu bar: File, Edit, View,, insert, Modify, etc.   You can use the point and click or learn keyboard shortcuts if you use it enough.  Window menu is where the panels are at!
Command menu is where clean up word html , and check spelling command is at.
Insert Panel or menu dropdown Page 28 – 38   Common, layout, forms, data, spry, incontextediting, text, favorites. This is where you insert pictures, hyperlinks,  rules, etc  tons of stuff.   
Document window is where you do most of your work.  This is where the webpage appears and the code if you have the code editor open. 
Document toolbar is where the compatibility checker is and if you want to view just code or live view. 
the Preview/debug buttons are here. File management(getting files to and from a web browser are here. 
Status bar has the select arrow, the hand tool, magnification tool, window size(for making sure it looks good in different windows), file download time, and character encoding.  Page 41 of the PDF. Tag selector is good.  When you look at diff windows don’t forget the  real estate the buttons from the browser. They take up space.
Panels and inspectors:  Beside the document window.  Duplicates of the menu’s.  Panels are grouped in tab groups.     F4 toggles all panels to show and hide.    Insert, CSS Styles, Files, Assets are used frequently.
Property inspector: displays everything for the currently selected item. 
Context sensitive help. When you have an object selected (and you can see its properties in the Property inspector), click the Help icon in the Property inspector, shown in Figure 2.14, to go directly to information about that object.

Hour 3 Define a site
To Define a site, you go to site-->Manage site-->New.  This gives you a new site.  If a copy of the existing website exists in a folder on your hard drive, simply define a site in Dreamweaver which points to that folder.  The files will appear in the local files panel.  If you want to expand the files panel, click the Expand/Collapse button  See picture to right Click again to collapse.  Shows published files in remote files panel.  Right click to show the files panel context menu…new file and new folder are helpful. 
All the files should be under the root directory of the website.  If not, they may not transfer correctly when you publish. 
Edit a site: SITE-->MANAGE SITE…Select the site and click the Pencil icon(edit) to edit it.  You can change where the site is uploaded there!

Site:
Servers:  Where it is uploaded to.
Advance settingsàLocal Info…Default images, other options
Cloaking—Select files types to exclude from all operations in Dreamweaver
Design NotesSharing design Notes.
File Veiw Columns.. order of info in files panel such as size type, notes, and mod date. 
Contribute…Configure for rollback and event logging. 
Templates… Manage file ref paths when you use templates.
Spry…Select the folder where widgets are stored. 
Dreamweaver Expand/Collapse button

Hour 4 Making a HTML page and adding text

New document contains a Blank page, Blank template, Page from Template,  Page from sample and other. To create a noew HTML page FILE-->BLANK-->HTML-->NONE-->CREATE
.HTML is the normal convention now .htm is the old windows version before it supported longer extensions.

No spaces, punctuation, or special characters are allowed.  They may cause problems.  Use underscores, letters and numbers.  Some servers are case sensitive so make all names lower case.  Windows isn’t case sensitive so it will work fine in windows and fail on a Unix machine

  • None—This option removes any formatting styles currently applied to the selection.
  • Paragraph—This option applies paragraph tags (<p></p>) to the selection. This adds two carriage returns after the selection.
  • Heading 1 through Heading 6—These options apply heading tags to the selection. Heading 1 is the largest heading and Heading 6 is the smallest. Applying a heading tag makes everything on the line that heading size.
  • Preformatted—This option displays text in a fixed-width, or monospaced, font (on most systems, 10-point Courier). The text resembles typewriter text. You probably won’t use this format option too often

Copy and paste,  You can copy with and without formatting from word.  With formatting is the norm  ie Ctrl+c  Ctrl+v.
without formatting  Ctrl+c.  Then Select Edità Paste Specialà Text with structure.   to maintain the paragraphs, lists, tables, etc. 
If you find a certain way you like to paste, change default Paste command in Dreamweaver Preferences’ (Edit, Preferences) Copy/Paste category
Line break: Not a paragraph = Shift+Enter    Example, an address on diff lines.
Page Properties:  ModifyàPageProperties.  Appearance CSS and Appearance HTML are almost the same.  HTML are there for legacy purposes.  You almost always want to use CSS. 
When you pick colors out of the color picker, use any color on the screen.  It doesn’t have to be in the Dreamweaver window. 
If you mix a color in the system colors window and want to keep it, click the “Add to Custom Colors” button.
Margins: The amount of space between the contents of the page and the edges of the browser window.  If you set the left and top margin to 0 pixels, the page will be snug to upper-left.
Page title is what shows when a user bookmarks a page so it should be meaningful and useful.  MODIFYàPAGEPROPERTIESàTITLE make a descriptive title. 
CSS—When you change the Page Properties, you are making a CSS sheet.  They are redefined tag styles.  To view the styles in a web page, make sure that the All button is selected at the top of the CSS Styles panel and expand the list of styles by clicking the Expand/Collapse (+) button next to <style>.
A selector name is the unique identifier that refers to a CSS style.  That style can then be used over and over by choosing the selector name.  You can of course select the size also.  XX-small, medium large ems are relative sizes.  Enable to appear relative to the size settings the user configures on browser. 
Text: if you specify a font, the font should be selected from a group.  If the first font isn’t available in the users browser, the browser continues through the list. 
The Global Page properties (a CSS style) of course affect everything on the page.  The property inspector just does the part you’re looking at the time. 
Ems are a measurement based on the height of the capital letter “M”; 1em is equal to the height of M in the users default font size.  1.25 would be a quarter size bigger than the default font the user has set.  To review what styles you have, yo open the CSS styles panes by choosing Windowà CSS Styles.  Delete a style by right clicking itàdelete.
If you select the text and use the right justify icon in the property inspector, you must make a new CSS rule.  You can also click FormatàAlignàRight to do the same thing. 
Horizontal line—INSERTàCOMMON or insert panel.  Called a horizontal rule.   Properties are in property inspector.
Bullet list:  Called Unordered list in HTML.  A ordered list is a numbered list.  Type the list out using enter to end the lines.  Select all the lines.  Click the Unordered List button in property inspector.  To indent for a bullet list you use the indent button in the properties panel.  NOT TAB.    If you want to indent further, select the item and click the Indent button in property inspector.  The lists are indented on left and right so it might end up strange if you indent too many times.  (Pg 82)
<li> tag selector is for a list item. 
Test in Browser:   You must have browser set up on your machine.  The ones he suggested were Windows Explorer, Firefox, Safari, Chrome, Opera.  FILEàPREVIEW IN BROWSER.

Hour 5 Hyperlinks, Anchors and other Links

If a link goes to a file the browser can’t display (a .zip for ex) the browser usually asks whether to save it to the hard drive.
3 path types:  Absolute-reference a website.  Regardless from where it is referenced, it is always the same.  Like a house address.  Regardless where in the world referenced, always know where it is.   
Document Relative Path:  In relationship to page being viewed.  Relative to the file location.  Up one directory and in this directory.   How you reference in your own website normally.  These work the same wherever the paths are because they don’t go outside the root directory.  If the docs are in the same directory you simply name the file.  No path cause it doesn’t go outside the directory. 
Site Root-Relative: location of the file in relations to the root of the site…Always begins with forward slash(/).   To go up another directory, you put another ../  So
<link href="../../../CSS/les_notes_style.css" rel="stylesheet" type="text/css">      takes you up 3 directories and then into the css directory and les_Notes. 
Difficulty is if you are trying to make web for PCH, you must load the website every time at the site root.  You may not have access to the site root. 
A URL consists of up to five sections, as shown in Figure 5.2 and listed here:    

URL Sections

Hyperlinks:

In your website:  Select the text you want as Hyperlink.  Either drag the file from the files panel to the link box-(shown in picture) or click the folder icon to the right of the link box to browse for the file.   You can reset link colors if you don’t like the normal blue underline in  Page Properties dialog box as you set default text color. 
Named Anchor:  Three ways to create a named anchor hyperlink.  First you must create a named anchor by placing your curser in front of the word or area you want the anchor to go to.  INSERTàNAMED ANCOR or Ctrl+ALT+a  to Make the anchor.   Then make your hyperlink text. 

Document Relative Link
  1. Select the text you want to use as the hyperlink and type the named anchor in the property inspector - linkbox preceded by a # sign.
  2. You can also use the Point to File tool—Click+drag the “compass” next to the link box to the anchor icon you want the hyperlink to go to.  COOL. If the anchor is below what you can see on screen, drag to the scroll bar arrows and it will scroll the window.   Or you can type the name of the anchor in the link box with a hashtag preceding the word.  (Ex  #ClintonBookReport)  You can also link to an anchor in another file by first typing the filename in front of the named anchor.  ../jokes/jokes.html#Ethel     (this is on page 99)
  3. Alternatively, first select the text that will be the hyperlink and then scroll down the page (carefully so as not to click on the window anywhere and deselect the text). When you see the named anchor, grab the Point-to-File icon and drag the tool to the anchor.
  4. Or you can say InsertàHyperlinkàUse the down arrow in link to get a list of all the named anchors in the document.    

You can see invisible anchors by selecting VIEW-->VISUAL AIDS-->INVISIBLE ELEMENTS
Email link called a mail to link—Select some text, in the common panel of the insert panel click the email link object.  To avoid spam, use a email link obfuscator
Avoid spam:  1 Don’t enter address into guest books.  2Don’t respond to spam asking to be removed from a list.  3 Create throwaway email address that you change every so often and use only for website. 
Add a subject line in email link. In the Dreamweaver Email Link dialog box, add a question mark immediately after the email address (no space) and then type subject= and the subject that you want to appear. You can also add some text for the body of the email message by typing &body=. You can also simply edit the link in the Property inspector’s Link drop-down menu. The link looks like this:              mailto:Patti@swamusement.com?subject=Website Email&body=From Les's website:                   -- or --
mailto:jray@jraymail.com?subject=Sams Teach Yourself Adobe Dreamweaver in 24 Hours&body=I’m interested in discussing this book.

Hour 6 Tables

Insert a table through insert-->Table.  To change a table, right click just like word but most stuff is accessed through the table menu.  When table is selected Width is displayed at the top.
To select a row, click on the left border of the table(When cursor becomes arrow).  Same with Column, only above the column. 

Selecting Formating and Sorting

Select cells:

Select cells the same as word…

Cntl+click for several individual. 

Shift click for consecutive.  Drag across for consecutive.

Padding is space from inside of cell border to the text.  Spacing is from the outside cell border to the outside cell border adjacent.  Boarder is the border around the entire table(not just cell)

Sort a table: 

Select the table and select Commands-->Sort Table. Select a column to sort, whether you want alphabetically or numerically.  Sort includes the first row check box (unchecked) is for tables with headings. 

Use tab to go to the next cell and Shift+Tab to go back.

To export a table to a delimited list, select the table and File-->Export-->Table…select the delimiter you want to use (tab, semicolon, space, comma, colon.  Make sure the delimiter doesn’t appear in your data.  Select the line break.  Windows or Macintosh and click export.  Usually coma delimited end with .csv and tab delimited end with .txt.
The tag for a table is <table>, the tag for a table row is <tr>, and the tag for a table cell is <td>. The tag for a table header is <th>. 

Hour 7 Exploring HTML:

DW uses XHTML.  All code must be properly nested so In HTML, the browser renders the following code: <strong><em>Bold and italic text</strong></em>. But this code is not properly nested, and XHTML requires it to look like this: <strong><em>Bold and italic text</em></strong>.
All web pages have 2 sections, the head and the body.  The head is the metadata( Javascript, CSS Definitions, etc) and the body is what you actually see on the page. 
When you make changes in split view, the changes aren’t displayed in the other screen till you click refresh(in property inspector) or click into design view. 

Coding Toolbar:

Collapse selection:  mark text and it collapses whatever you have marked. 
Code inspector:  WindowàCode Inspector  shows window like the code window except floating.  Great for dual monitor setups. 
Quick Tag editor  Cntràt.  or ModifyàQuick Tag Editor.    3 modes Edit,  Wrap,  or  Insert.   You toggle through them by pressing Ctrl+t. 
Code Navigator: the ships wheel that is second on the coding toolbar.  It shows links in your webpage (Javascript, CSS, etc). 
Set code preferences:  EditàPreferences.    Code colors, setbacks, etc. 

ToolBar

Another setting is whether Dreamweaver should include a line break inside of TD (table data) tags. In some browsers, this can cause display problems, so leaving the setting Do Not Include a Break Inside the TD Tag is recommended.
select Commands, Apply Source Formatting to make everything tidy if you import a page from elsewhere. 
You can clean up garbage code left in word when you create a Webpage in word.  If you are not going to need to edit in word again, clean it up by saying CommandsàClean up Word HTML.  The word HTML dialog box is launched.  Look in Code view and see how many lines of code were removed from the original.
File-->Validation checks code to see if everything is OK. 
Reference.  Help--> Reference.  Great reference arrays. 
You can use tags that aren’t listed in the drop-down menu.   Edit--> Tag libraries.  DW doesn’t list all tags that are available so you may want to add some. 

Hour 8  Displaying Images.