Getting Started
- Set Prefs
- Edit > Pref > Access - Check all four under "Show when inserting"
- Use Classic view
- Help
- http://www.adobe.com/support/dreamweaver/ to download .PDF help file, I could not find it.
- Other resources on Adobe site
- Defining a site, default folders for images, etc.
- Welcome screen
- File > New > HTML > 2 fixed, left side, head and foot
- Save
- Code | Split | Design | Live View
- Modify Title, Headings, and insert text and images
- Window > Insert to show top menu
- Window > Properties to show bottom menu
- Italian hill town image "Class" set to "fltrt" in Prop window to float it to the right of the text and have text wrap around it.
- Three legged stool of HTML, CSS, and Java
- Window > CSS > Body > Edit > Background to white
- F4 for full screen view or restore panels
- select <div#sidebar1> to change background color independent of above.
- select <div#header> to change background color independent of above
- select <div#header><h1> to set background image independent of above
- seems weird to me, why not set image in header rather than h1, actually this is what I was supposed to do as I found out when re reading.
- select <div#header><h1> to set font to white
- Background image set to no-repeat without explanation of the repeat options
- Select "see Breck with us" <H1> then Window > CSS > Current > Cascade (icon) - no real explanation of cascade view but seems to be order of priority for rules
- <div id="container"> alter text
- Work with code | split | design | split code views (vertical and horizontal)
- Properties panel
- Better to use CSS than HTML for Bold and Italics, here we put it in the head rather than a separate .css doc
- Preview in live view and browsers
- #mainContent p em in head as shown by <style> in CSS window.
- Mention use of multiple .css applied to same file for different outputs : Screen, Print and , Handheld.
- Use Attach link for pre-existing .css file.
- Link for external, Import to put in head.
- Suggest using a _css folder for all style sheets
- CSS rules consist of a selector and one or more properties
- Use of more and less specific in New CSS rule panel
- # used for ID CSS
- Box is around element it effects. Negative numbers can be used.
- Can re-order rules in CSS window by dragging and dropping.
- . used for Class CSS rules
- Layout | Standard | Insert Div Tag - this was the only way I found to insert a div tag.
- In this exercise <span class="name"> applied to individual names, <div class="profile"> applied to profiles including photo, name and bio.
- Strikethrough in CSS widow indicates a conflict which we did not fix here. Mouse over strike for more info.
- .css file for print : View | Toolbars | Style Rendering - chose format for .css
- save existing .css file - File | Save As - in this case print .css
- attach (link) print.css to about.html
- remove unneeded styles leaving only a few. Lesson does not mention to preview in Live view but when I did it looked OK.
- This is one lesson that I did not fully get.
Lesson 3 - Working with text, lists, and tables
- Import text - formatted as <p>
- HTML tags create the semantic context for the page content: headings, paragraphs, lists, block quotes, tables, images, etc. CSS offers the style.
- Lists, ordered and unordered (check my done pages for bullets with spaces)
- Block quotes (what I think of as indent and out dent)
- CSS applied to above with Tag rule, no . or #
- Tables: no longer for page layout, rather just for rows and columns of data
- Insert | Layout | Table button
- ID used instead of Tag because only 1 table. Might also use ID so that different tables can be formatted differently. This could be done with any HTML element instead of using Tags. As could Tag be used here.
- Review <th> <td> <tr> tags.
- Applied CSS, no explanation of th, td rule - just did it.
- See border-collapse in table CSS rule.
- Spell check Commands | Check Spelling
- Inserted Spry Tooltip on "Oia" for pronunciation.
- On review could not figure out how to get the Spry properties to show in Properties window. Can modify in CSS window.
- Find and replace text - Edit | Find and Replace - pretty basic.
- Notes read: "Designer can target any amout of text - white space, hard returns, spaces, and other textual elements, - from a selection in the current document or the entire site. You can search just the rendered text, the underlying tags, or both. Advanced users can enlist powerful pattern-matching algorithams called regular expressions to perform the most sophisticated fine-and-replace operations.
- Insert image from A) Insert | Image B) Common | Image C) Window | Assetts D) Assetts Icon
- At least A and B have image placeholders
- Image placeholders shouldnot have spaces or special chacators in names
- Background image of line.gif added to .twoColFixLtHdr #container with repeat-y
- Not sure why this effect used a .gif instead of a Border and/or Box .CSS
- Edit image with Properties panel
- Quality of about 80% optimizes size vs. image quality
- Can use 2-up to see results of changing quality
- Can cut and paste a photoshop .psd file and will be prompted for all options.
- Adobe Bridge act as a bridge between all Creative Suite programs. I see no advantage when just using Dreamweaver and Photoshop.
- /naxos-church.jpg is a smart object which will update if any change is mad to it in PhotoShop.
- .psd file is the one inserted, changed to .jpg as part of import
- Shift-drag maintains the images original proportions when resizing.
- Warning symbol tells you when out of sync, right-click to update from original
- Make links relative to document, not site root, as site root only works on some servers.
- #footer p a effect all <A> tags in footer
- Drag to point to file in HTML properties window
- To prevent inked image from having a blue outline, set border = 0 in .css rule.
- Link within a page with #ID tag and named anchor, see above and top.
- Spry Menubar
- ul.MenuBarVertical li or ul.MenuBarHorizontal li rule to change dimensions
- ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule to change submenu positions
- ul.MenuBarVertical a to change background and link text color
- ul.MenuBarHorizontal ul li to change submenu dimensions
- # (Like on Italy and Greece) is not a real link but allows the entry of submenu items.
- Styles on and off to work in Spry box or as a buleted list
- Spry Tabbed Panels: Made by cut and pasting existing prifile <divs> into the content area up creation.
- TabbedPanelsTab, TabbedPanelsTabHover, TabbedPanelsTabSelected, TabbedPanelContentGroup changes from default appearence.
- File > Check Page > Links or Browser Compatibility (more info). We did not fix this page becuase not going online anyway
Lesson 6 - Adding interactivity (Spry, lesson not well explained)
- Window > Behaviors - Select page element to trigger behavior, choose behavior to apply, set setting or paramaters of behavior. Is Java/Spry based
- Mouse-over highlight and sort table are examples
- <h1 id="occ" added by hand, not much explination other that that spry would thne be added to ID. Target element of h1 "occ" then select in behavior window which is edited through the CSS window | Tag Inspector | Behaviors.
- Behaviors can be applied to any <div> or block level element and also upon page loading.
- To use Spry with datasets, they must be in XML format (clients.xml)
- Insert Panel | Spry | Spry Dataset | Spry Dataset Dialogue Box
- Set datatype to XML and leave default dataset name
- Browse to clients.xml for source and close source dialogue box
- Choose client in row element area
- Choose next to specify data type for each cloumn and set "Work" column to HTML
- choose next and in nest window choose to "insert table"
- Accept default settings in the insert table dialogue box
- Spry data types
- String: Alphanumeric
- Number: Numeric
- Date: A full date such as 4/13/2009 or April 13, 2009
- HTML: Marked up text.
- Spry Accordians
- Similar to the TAB spry effect. Cut and paste using code view to keep from missing anything.
- Edit appearance in the .CSS window.
Lesson 7 - Creating a page layout
- Two columns are created by floating one <div> to the right and the other to the left.
- In the travel pages we had the sidebar floated left and the main container using a wide margin left, only one floated element. Both styles use clear:both in the footer to push it to the bottom of the page. not sure why we do not do this in the header, perhaps becuase of images.
- <div>s create structure. .CSS gives appearance
- Create blank HTML page | Save
- New CSS Rule | Tag | body | this doc only (puts rules in head, move later) | - background white, text align center (this centers body on the screen in the browser) | Box | Padding and margin to 0 all (without a value, browsers add their own, seems to vary to me anyway)
- New Css Rule | ID | #wrapper | this doc only (puts rules in head, move later) | block text align left, box width 760 - margin top and bottom 0, left and right auto.
- Above width of 760 for a 800 pix screen, suggests leaving 40 pix for chrome.
- Left and right auto will center if there if screen is larger than 800 pix? I'm confused...
- Purpose of #wrapper is to set width. I have also seen #container used for this quite a bit.
- Layout | Inset Div Tag | Wrapper - At insert point |
- New Css Rule | ID | #header | this doc only (puts rules in head, move later) | box top and bottom margin to 12 pix
- width not set because a block element like a <div> tag will expand to fill the container, in this case the wrapper. More confused, then why set footers to float?
- New Css Rule | ID | #content | this doc only (puts rules in head, move later) | box top margin and padding set to 0 to push right up against the header.
- In .CSS window, right click #content, choose duplicate, name it #footer, OK. In properties window, enter clear both. This may have something to to with the fact that the footer is below floating elements whereas everything tin the header is above it.
- Insert <div> #header after start of #wrapper.
- Insert <div> #content after start of #header.
- Insert <div> #footer after start of #content.
- Give Title of Layout and save.
- New Css Rule | ID | #logo | this doc only (puts rules in head, move later) | box height 71 , bottom padding 12 | Insert <div> after start of header
- In .CSS window, right click #logo | duplicate | #nav | height 28 , padding (to trash with icon in .css properties window) | insert <div> after logo |
- Dup nav, create banner and inset after nav. Make height 200
- New .CSS #leftColumn | Box width 365 | float left | dup | #rightColumn | float right, width
- Insert <div> #left after start of #content, inset #right after end of #left.
- Insert place holders
- View | Code View Options
- Looking at expand and collapse code icons in code view and inserting comments
- Export .CSS rules: shift select rules in .CSS window, option menu, move to external style sheet, (in this case we choose new and name main.css)
- Using rullers and guides
- View > Rules > Show , View > Rules > Reset Origin
- Drag top left to reset 0 points, I could not get it exact against doc corner, used reset, my numbers different anyway
- Hold down CTRL with pointer between two guides, here I was easily able to get proper numbers between guides (241 pix from right edge to right-middle guide, 30 pix between middle guides, 489 pix from left edge to left-middle guide)
- Set left column width to 489 and right column width to 241
- File > Check Page > Browser Compatibility and Links
- File > Validate > Markup
- All fields within one <form> tag. Most of the direction said to use the basic Insert | Form button but then used the Spry buttons.
- Use View | Visual Aids | Invesible Elements to show form box
- Text Field lables before the field, radio button and check box lables after the field
- It all seems straight forwad enough except editing the Spry effect after it has been set, with Spry, may have to be sure to get it right the first time. .CSS editing and some other in the properties window at the bottom but can nt figure out how to get back to the initial tag set up window.
- Fieldsets: Insert | Form | Fieldset within the form: Contact info, online tools, your trip...Watch in code view that you are getting all of the code you need.
- <lable for "name"...</span></span>
- No spaces in list value names.
- Said that form processing is outside scope of this lesson, not sure how it knows what to do with info when submit button is pressed.
- Insert movie and flash banner. I need a flash editor to create the SWF banner. Movies can come from anywhere in .flv format.
- For banner: Insert > Media > SWF
- The Flash banner in this exercise will not loop, even if it is set to do so in Properties, no other expination
- This is a large banner example but could be anything, such as a menu button.
- Flash vid
- Progressive Download: Initial packet is downloaded, clip begins to play, and download continues as it does.
- Streaming: Play begins imediatly, requires special hosting, allows seekability.
- Insert > Media > FLV
- Easy, another tutorial vid used a different and better skin.
Lesson 10 - Templates, Library, Server-side Includes
- Tempates: Make an HTML page and save as a template. Then add or make editibale regions within the template.
- Insert > Template Objects > Editable Region. In this exercise pageName, and mainContent made into editible regions by putting cursor within <div> tag first. sidebarContent added in same way by putting cursor at insertion point.
- Several other options in the Insert > Template Objects > to learn about using help.
- Changes made to template will spread accross to child pages once you appove so. This allows work to be done in several sessions and spread accross all child pages at once. All pages must be uploaded to server after work has been done and spread.
- Child pages: File > New > Page From Template
- Template folder must be in root for the site. I had to copy file from DWCIB to Tutorials to get this to work since I change the site root after installing DWCIB. And even then, Dreamweaver did see .css and.js files. I had to open the Tutorials\DWCIB\Templates file then save it as a Tutorials\Templates file to get it to work.
- Library Items: Bits that can be reused throughout the site (Ex. images, tables, nav bars, copyright notices, paragraphs, etc.
- In example: choose <div> for menu, check in code view that all is highlighted, Modify > Library > Add Object (note, .CSS is not copied so it look different in assetts pannel)
- To use library item, place cursor where you want it, open the Assetts | Library window, highlight the desired item, and click the insert button.
- On second time through, all of the pages in exercise had been altered so I tried it here. This page did not have the .CSS attached so I did it manually. Still did not have .js file to make it work. So I added this through Insert | Common | Script button. Could also have gone Insert |HTML Objects | Scripts.
- In exercise, had to repeate for all pages, what a pain. I wonder if I could just have cut and pasted the following in the head:
- <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
- In the Library Item, exercise ended with me adding the following JavaScript Operator to the bottom of menubar.lib:
- <script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
- The above was copied from the naxos.html file around lines85 of the original file. I am lost on this one. Learn Java! But also look for cade added at the bottom of any page I add Spry as soon as I add it.
- Server-side Includes: Similar to above but "snippets" are kept on the server. Servers vary in the way these snippets are handled so must use server instructions.
- I wonder about SEO implications
- Exercise: File > New > Blank Page > Type:HTML > Layout:None > Create
- Copied footer out of another page, added ©, delete all code <head>, <body>, etc. except for :
<p>Here and Back Travel © 2008, All rights Reserved<br />
<a href="contact.html">Contact Us </a></p>
- Save as footer.html (in actual development, save to folder in root)
- Edit > Prefs > Invisable Elements > check "show contents of servier side includes"
- Insert | Server-side Include | goto lesson10\includes\footer.html and choose
Lesson 11 - Publishing to web
- Set-up: Site > Manage sites > Edit > Advanced > Remote Info for FTP
- Alot of this set up will depend on the server. Mine worked from begining.
- Cloaking: Files and folders that do not need to be transferd to servier.
- Files with certain extensions: Site | Mangage sites | Edit | Advanced | Cloaking | check and enter extensions
- Folders: In files window, right click files or folder to be cloaked and select.
- Putting: always put dependent files