Indiana University: IT Training Tips Blog » Web Basics

it2go Episode 38 – Dreamweaver Page Properties

Andy Hunsucker — Mon, 02 Apr 2012 19:10:15 +0000

On this week’s episode, we’re talking about how to update Page Properties in Dreamweaver. We also talk a little bit about Adobe Days, coming up on April 17th at IUB and April 19th at IUPUI.

it2go – The IT Training Podcast

Using JavaScript to create a dynamic tab-based webpage

Chabane Maidi — Mon, 26 Sep 2011 11:13:14 +0000

Have you ever been to a web page where you can click on buttons or tabs that swap content on the page without having to load an entirely separate web page? Have you ever wondered how to make your own page have similar behavior?
Well, there’s good news and bad news. The bad news is that you’re going to need to write a bit of javascript to get this to work, and if you don’t know javascript, I can understand your reflex to just close this tutorial right now– but hold on! The good news is that it’s simple and doesn’t require an in-depth understanding of javascript to get this working.

Prerequisites for this tutorial:
A moderate understanding of XHTML and CSS

In order to get started, create a new xhtml document using your favorite xhtml editor, and save it as anything you like (make sure it has either an htm or html file extension!), and copy the following code into your blank document:





Test Page







  
    Click a button to see each page
    
      
        Home
        Contact
      
    
  
 
  
  Welcome to Gary's tent shoppe
    Hi, my name is Gary Gertmertin, and I love to sell tents. Ever since I was a wee lad, tents were beautiful pieces of human innovation to me. Over the years, I've slept in at least fifteen tents. Don't get me wrong, I hate camping, I just love tents.
    
    We sell all kinds of tents. There are doggy tents and tent mansions, complete with a swimming pool. If you want to know what types of tents we sell, then go to the contact information tab on this site, and shoot me an e-mail. We don't give out pictures, so don't bother asking.
    
  
  
    How to contact Gary
    I refuse to use telephone technology. So don't ask for any telephone numbers.
    
      Gary Gertmertin

      e-mail: gertymerty@example.com
    
  
  
    copyright 2011

From here on out, only add code that is bold and italicized.
Don’t worry if you don’t understand what all the CSS is doing; for this tutorial, what’s important to be aware of here is that there are multiple divisions (as coded with div elements, and in this example there are only two) that are intended to represent different sub-pages of this xhtml document, namely, a div element uniquely identified (with the id attribute) as “contentHome” and another with the id value “contentPage.”
Important: elements that you intend to control individually with javascript have to be referred to by the id attribute of the element, because unlike the class attribute, the id uniquely identifies the element and thus prevents ambiguity in the reference.
Go ahead and view the newly created page in a browser. You should see that both the home page and the contact page (the dashed line boxes in the periwinkle content area) are visible, stacked on top of each other. If there were more sub-pages, then there would be even more boxes here. There is a small bit of xhtml and css groundwork that we need to take care of before getting to the javascript. First, we’re going to prepare the “buttons.”
We want the user to be able to click on the “Home” and “Contact” “buttons” in the header section of the page to access the different sub-pages. Normally we would opt for anchor elements, but since we’re not actually leaving this page, we can just make the table data element behavior resemble anchor elements using css.
First, add the following declaration to the “table#buttons td” style rule in the embedded stylesheet:

 
table#buttons td 
{
  border: 1px solid #769185; 
  margin: 0px 20px; 
  width: 200px; 
  height: 50px; 
  cursor: pointer;
}

Note: the “pointer” value does not work on IE4-5.5. Add “pointer: hand;” as well to accomodate those browsers.
Now, when the cursor moves over those table data elements, it becomes the hand which signifies a clickable area. We can improve this further by giving an even more pronounced visual cue. Anchor elements aren’t the only elements that the hover pseudo-selector works for. Let’s create some style for when the user hovers over a button. Type in the following style rule:

 

td:hover 
{ 
  background-color: #a1e2c6;
}

You can add additional properties as you like to truly have a customized appearance. The user should now be given adequate visual cues that these table data elements are dynamic.
We’re almost ready to start writing some javascript to get the desired functionality to work. As it stands, all the sub-pages are visible onto the content pane when the webpage is accessed. We only want a sub-page to be visible if the corresponding button is clicked. Let’s use CSS to start hiding all the sub-pages by default.
To do this, add the following declaration to the “div.contentPage” style rule:

 
div.contentPage 
{ 
  width: 700px; 
  margin: 0px auto; 
  border: dashed 1px #769185; 
  padding: 10px; 
  font-size: 120%; 
  visibility: hidden; 
}

If you refresh your page in the browser window, you’ll notice that while the sub-pages have been successfully hidden, they still take up the space in the content pane they did while they were visible. This will become especially problematic as the sub-pages become longer, or more sub-pages are added. To fix this problem, we have to separate the sub-pages from the standard document flow.
To remove an element from the document flow, we can change its position property using css. Add the following declaration to the “div.contentPage” style rule:

 
div.contentPage 
{ 
  width: 700px; 
  margin: 0px auto; 
  border: dashed 1px #769185; 
  padding: 10px; 
  font-size: 120%; 
  visibility: hidden; 
  position: absolute; 
}

When you refresh the browser, the page should look as if it has no sub-pages. Now that these sub-pages are hidden away, we need to be able to get them back on command by clicking the buttons. This is where the javascript comes in. Are you ready?
Javascript is a fairly advanced topic, and this tutorial isn’t designed to lay down foundational knowledge for it. Rather, you should be able to learn just enough javascript to be able to integrate this functionality in your own site, and tweak it to your liking.
Add the following attribute to each opening td tag:
onmouseup="">Home onmouseup="">Contact
onmouseup is an example of an event attribute. It will allow us to call javascript code when the user lets go of the left-click button on his or her mouse while the cursor is over a button. Other examples of event attributes are onclick, onmouseover, and onmouseout just to name a few. Clever use of these events will allow you to create a creative and dynamic website.
Write the following code as the value for the onmouseup attribute for the first td element:
Home
and the following for the second td element:
Home
Now, this shouldn’t really make any sense yet. Just recognize a couple facts here: showHide is the name of a function, and we are calling it here while passing in two, what are called, arguments– the strings “contentHome” and “contentContact,” which just so happen to be the names given to the buttons by their id attributes.
The showHide function works by passing in the element (by its id attibute value) you want to make un-invisible as the first argument, and whatever elements you want to hide or remain hidden are however many final arguments you want to pass, whether it’s the second argument, or third or fourth and so on. So in this case, when the user clicks the Home button, the contentHome div element becomes visible, and the contentContact becomes hidden or remains hidden, and vice versa for clicking the Contact button.
There’s only one problem though, and that is that the showHide javascript function does not exist yet. We have to write it, and that is just what we are going to do next. First, we are going to create an embedded javascript document within the head element of this page.
Scroll up to your head element where your embedded stylesheet exists. Add an opening and closing “script” tag pair somewhere directly within the scope of the head element.

Start off by writing the following code within the script element:
function showHide() {

}
The function keyword allows you to create a new function. We’ve named this function “showHide.” Everything between the curly brace pair will be executed when this function is called. Just assume that the parenthesis pair after “showHide” are required boilerplate code to get the function to work.
Inside of the curly braces type the following code:


function showHide() 
{ 
  var d = document; 
}

We’ve now created a shorter name for document. Whenever we have to write “document,” we can simply write “d” instead. Each statement in javascript must be ended with a semicolon. Now, type the next line of code:
var d = document; var args = showHide.arguments;
Like the previous line of code, we’ve assigned a shorter name for a longer sequence of characters to not only make typing more efficient, but more meaningful as well. By typing “showHide.arguments” we are accessing the list of arguments passed into the showHide function. The new variable “args” will now represent that list. We will now grab the first item from the list. Type the following line of code:
var d = document; var args = showHide.arguments; var idName = args[0];
We’ve successfully grabbed the first item of the list (item 0), and stored it in the variable “idName.” This is the name of the of element we wish to “show,” but not the element itself. We have to first retrieve the element, by writing the following line of code:
var d = document; var args = showHide.arguments; var idName = args[0]; var elementToShow = d.getElementById(idName);
We are passing our idName string into the getElementById function to grab the actual element we want to make visible, and we are storing it within the new variable we have named “elementToShow.”
Now that we have the element we’re looking for, to make it visibile, type the following code on a new line:
var d = document; var args = showHide.arguments; var idName = args[0]; var elementToShow = d.getElementById(idName); elementToShow.style.visibility = 'visible';
At this point, the buttons should be able to make their respective sub-pages visible, but we have a couple problems. First, the sub-page made visibile will still be outside the document flow, which won’t work for this webpage design (the footer needs to be able to be pushed down). Second, we have no way of hiding any other sub-pages that might already be visible. Let’s address these problems now.
Type in the following code next:
var d = document; var args = showHide.arguments; var idName = args[0]; var elementToShow = d.getElementById(idName); elementToShow.style.visibility = 'visible'; elementToShow.style.position = 'static';
The default css position property value is “static,” so this should now pop the sub-page back into the document flow. Excellent, the “show” part of the showHide function is now complete. It is now time for the “hide” part.
We will first start by declaring a new variable we plan to store the element we want to hide:
var d = document; var args = showHide.arguments; var idName = args[0]; var elementToShow = d.getElementById(idName); elementToShow.style.visibility = 'visible'; elementToShow.style.position = 'static';

var elementToHide;
This part is a little trickier. For this specific webpage, since there are only two sub-pages, we could just do something very similar to what we did to show the elementToShow, but that would limit this function for webpages with only two sub-pages. We need to make this function more scalable, so as to allow any number of these sub-pages.
We will achieve this with a loop. For each iteration of the loop, we will hide the next argument in the list of arguments until the list is finished. To create this loop, write the following code:
var elementToHide; for (var i = 1; i < args.length; ++i) {

}
Without having explained the logic and syntax behind this code, the important thing to understand is that with this code, starting from the second argument, everything between those curly braces will be executed exactly as many times as there exist arguments remaining in the args list.
We will add three statements to this loop:

 
var elementToHide; 
for (var i = 1; i < args.length; ++i) 
{ 
  elementToHide = d.getElementById(args[i]);
  elementToHide.style.visibility = 'hidden';
  elementToHide.style.position = 'absolute';
}

This should look similar to the code used to show the first argument. This time around, we are grabbing each of the remaining elements from the list, and overwriting the elementToHide variable each iteration with the next element in the list. Each element is set to be hidden again or remain hidden, and escape the document flow.
At this point, if all went well, you should be able to refresh the webpage in the browser window, and the dynamic functionality of the page should be complete.
If you want further practice, then try adding additional sub-pages, and buttons that correspond with them. The real challenge will come when you try to adapt this code to your own project. Hopefully this tutorial will have made the otherwise daunting javascript language manageable enough to create your own show/hide behavior to add to your website.

Creating an animated Gif in Photoshop CS5

Stephanie Watters Flores — Tue, 23 Aug 2011 19:26:47 +0000

There are many different ways and programs you can use to go about creating a fun and interesting animated gif for the web. For this tutorial I will show you one quick and easy way to create an animated gif using Photoshop CS5. I am working on a Mac, but a PC will do just the same.

You can check out a preview of what the completed animated gif can look like by visiting this link. Keep in mind, this is a web page I designed to showcase the animated gif created for this specific tutorial. Uploading your completed animated gif directly to the web will not result in the animation being centered on the web page.

To begin with, I used Photoshop to create a series of images of which I kept in one folder. These images will act as the states for my animated gif. It is not necessary to use Photoshop to do this. You can create an animated gif with a series of photographs or a group of illustrations created in Illustrator in much the same way. Really, as long as you can open your files with Photoshop, you can create an animated gif out of virtually anything. The important thing to note is that each layer, or state, should be the same dimensions and resolution and will need to have something different, whether that change is slight or dramatic.

To start, we will open the first image in Photoshop.

Then, drag the other images over top the open Photoshop file and release. You can select all the images at once using the Shift command (holding down Shift while selecting individual images).

Once released, an “X” will appear over top the image. This is a short cut way to use the Place command. Use the Enter key to accept the position of each image (essentially, just press Enter until every layer is placed).

You can also use the Place command located under File on the Menu bar to place each image one at a time if you feel more comfortable doing so.

You will notice the Layers panel is now full with every image acting as a new layer. Be sure to unlock the Background layer (the original image we first opened) by double clicking it and selecting OK. We can now open the Animation pane and get started.

The Animation pane is located under Window on the Menu bar.

The Animation pane will appear below the canvas window and will fill up with a series of icons representing whatever layer you had selected at the time of opening the pane. This is okay. This is the Frame Animation view. We will need to turn on the Timeline view for just a moment so that we can automatically create our frames from our layers.

To switch to Timeline view, click the button located in the lower right hand corner of the Animation pane.

Your Animation pane should change views. Notice the original button clicked to change views also has a new look. We will click this button again in a moment to change back to Frame view.

The reason for changing views was for the Make Frames from Layers command that is only accessible in Timeline view. It is located in the Animation pane fly out menu. To select the command, press on the fly out menu button (upper right hand corner of the pane window) and choose Make Frames from Layers.

Notice the canvas view has changed. Change the Animation pane view back to Frame view by clicking the button located in the lower right hand corner of the pane window.

Now the Animation pane makes a little more sense where each layer is represented by an icon in Frame view giving us a better idea of how our animation will work.

To test the animation, click the Play button on the bottom of the Animation pane. The animation moves extremely fast. We’ll want to slow that down somewhat and also add a few more frames by duplicating existing frames. To stop the animation, click the stop button.

To duplicate an existing frame, select the frame and click the Duplicate frame button located on the bottom of the Animation pane.

To move the new frame into a different location in the timeline, press and drag it and drop it where you want the new frame to sit.

You can also duplicate a series of frames at the same time by selecting all the frames using the Shift command and clicking Duplicate. Play around with the order of the frames and how many frames of each image your animated gif will contain. Frequently test the animated gif using the play function.

There are a couple of different ways to set the time for each frame. You can set the time for all frames at once or each frame individually. Notice that at the bottom of each frame there is an option to set a time delay. To change the time delay, press the drop down arrow and choose a time that you feel comfortable with. Use the Play command to determine if it is too fast or too slow.

To change the time delay for all frames at once, select all the frames using the Shift command or by choosing Select All Frames in the Animation Pane’s fly out menu. Then, on any one frame, use the Time Delay drop down to choose a time.

Once you have your frames in the order that you want and your time delays to where you are satisfied, there is only one more step before exporting as an animated gif. On the bottom of the Animation pane, be sure to choose Forever under looping options. By default, Once will be chosen. To change that, press the drop down arrow and choose Forever.

To save the animated gif, choose Save for Web and Devices under File on the Menu bar. In the Save for Web and Devices window, be sure that GIF is selected and click Save.

Locate your animated gif and press and drag it into a browser window for full effect.

Quick Tip: Why Does My Page Look Funny in Internet Explorer?

Tom Mason — Fri, 24 Jun 2011 17:00:45 +0000

Have you ever visited a page that looked fine in Internet Explorer one day, and then the next it looks like a web page designed by a monkey?

If so, you are suffering from a disease I’ve come to call “Compatibilitus Brokenus.” Better known as “Compatibility View broke my web page.”

By default, Microsoft Internet Explorer switches between normal browser mode to compatibility view when it finds a code error of some kind on the page. Sometimes, it gets stuck in Compatibility View after moving from the page with the suspect code, causing the rest of the web to be viewed in this mode.

The fix for this is simple, yet somewhat hidden:

To open the Developer Tools in Internet Explorer,
Press F12
To disable Compatibility View,
Click
,
Click Internet Explorer #
To close the Developer Tools,
Press F12

And presto! Back to normal!

Create a website with rollovers using Illustrator and Dreamweaver

Stephanie Watters Flores — Sun, 12 Jun 2011 03:40:16 +0000

Knowing the basics of Illustrator and very little Dreamweaver, it has become very easy to create an interesting and fun website, complete with rollovers without knowing any code. Here’s an example of what can be accomplished. I used CS5 on my iMac, but you can use a PC and Adobe versions as old as CS2 just as well.

To Start with, create a new Folder on the Desktop (or wherever you plan to save your website) and title is “website.” This will provide a location where all your files for this particular website will be saved. It is important to keep all web files for one website in one location.

Launch Illustrator and create a New Document: Document Profile: Web (this will assure that your document will be set to a resolution of 72 ppi, optimized for web); document Size: 1024 x 768 (standard web dimensions). Dimensions are set in pixels. Save your new file as “website” in the Illustrator (.ai) file format inside the “website” folder. Saving your original .ai file will allow you to make changes accordingly and easily if needs be.

Designing different states on different layers while maintaing surrounding elements will result in consistency and flow when the site is completed. Under special circumstances you may need to have more than two layers, however, you will definitely need at least two layers to create the rollover effect. Another approach to this process would be to create one bottom layer where the overall design would be placed, with two upper layers that would hold rollover effects. Regardless, designing in layers is VERY important in maintaining exact dimensions when slicing different elements, especially states of rollovers. Keep in mind that you do not need concern yourself with elements that fall outside the artboard as Illustrator will only export what is inside the artboard.

Do add an uppermost layer that will hold guidelines for slicing as well as act as the slicing layer. You will only have to slice your artboard once using this layer. This will be a third layer.

Once the design of your website and states is completed, press and drag Guidelines on the guideline (uppermost) layer. Guidelines work well inside of Illustrator because the slice tool will snap to the guidelines by default which will help you to avoid unnecessary slices. The Slice Tool and Guidelines can only draw straight lines which means your slices will be rectangular in shape. Keep this in mind when placing guidelines where your intended slices will fall.

Once your guidelines are in place, use the Slice tool to begin slicing with only the State One layer and the guidelines layer visible, using the guidelines as guides. Keep in mind: for every one slice made, Illustrator will automatically determine the next slice so the pieces of the artboard remain as a whole. When slicing your page, turn caps lock on for the Slice Tool icon to appear as a cross hair.

After all slices are made, choose Save for Web and Devices under File on the Menu Bar.

In the Save for Web and Devices dialogue box, choose the 2-up tab. From here you will be able to determine the best quality in format and file size taking into consideration download time and optimal visuals. You can save each slice as individual file formats if needs be. It is a good idea to check Interlaced because this will build your image a line of pixels at a time when being viewed in any web browser. Basically, with users who have very slow connections, this will allow them to see that an image is being created rather than requiring them to stare at a blank page as the website loads.

Once each slice is optimized, click the Save button. The Save Optimized As dialogue box will appear. Locate the Folder initially created titled “website” under Location. Under Format, select HTML and Images. Under Slices select All Slices. Click Save.

You will be returned to Illustrator. Illustrator will automatically generate the code required to create an HTML page that you can upload and view online. If you;d like, you can check the “website” folder. You should see inside the folder: website.ai, website.html and an images folder which will contain all slices. If this does not exist, repeat steps starting with Save for Web and Devices, making sure you designate the “website” folder for the location of which your files will be saved.

In the Illustrator window, turn off all other layers except the next visible state (state two). Choose Save for Web and Devices under File on the Menu bar, choosing Two-Up in Save Fore Web and Devices dialogue box.

Unlike the first time, you will need to only optimize secondary states for rollover elements and disregard all slices that remain the same in both initial and secondary states. To do that, hold down Shift to select all slices to be optimized at once. Click Save. In the Save as Optimized dialogue box, locate the “website” folder for location and save as “rollover.” Under Format, choose Images. Under Slice choose Selected Slices Only and click Save.

You will be returned to the Illustrator window. Check the “website” folder to be sure that the “images” folder now contains “rollover” images. If the “rollover” images do not exist, repeat steps.

You are now done with Illustrator! Save and close.

Launch Dreamweaver. In the Dreamweaver welcome screen, under Open, choose “website.html” from inside your “website” folder; “website.html will open.”

Inside of Dreamweaver, choose Classic for interface and then the Design view on the Control panel.

Notice you are able to click on each slice in the Dreamweaver window. Select the first rollover element and locate the Place Image icon on the control panel. Use the drop down menu and select Rollover Image.

The Rollover Image dialogue box will appear. Name the element. Under Original Image locate state one of the rollover element in the “images” folder inside the “website” folder (this may be titled something like “website_01.png”). Under Rollover Image, locate the corresponding rollover image (something like “rollover_01.png”). Note: it is VERY important that all these elements are in the correct locations; without these correct locations, your website will break.

Notice that you have an opportunity to add a link connected with the rollover element. We will not be adding a link in this tutorial. You are also able to add alternate text at this point as well. It is always a good idea to add a description in the alternate text field. Click Okay.

By default, Dreamweaver will place the rollover element aside the original image selected. This will make your website appear broken and may be somewhat alarming. Simply delete the original image. Sometimes you will need to then “refresh” the window to see the changes made. You can do this by changing views on the control panel.

Under File on the Menu bar, choose Preview in Browser. To preview in browser, you will need to Save the file. Click Save. If the rollover effect does not work, chances are that you deleted the rollover image instead of the original image when placing the rollover. This is a common mistake. All you need to do it repeat the steps.

Repeat steps for all other rollover elements. Keep in mind that Dreamweaver, by default, should automatically target the last location used. Be sure that your state one images are named “website” and secondary images are named “rollover.” Preview the site in a browser window by choosing Preview in Browser under File on the Menu bar. Be sure to save often. Once completed, close Dreamweaver.

Revise Web Pages Directly from a Browser with Adobe InContext Editing

Carol Rhodes — Tue, 08 Dec 2009 20:40:57 +0000

As a web designer, developer, or administrator, are you constantly managing simple requests to change page content for nontechnical team members ? If so, you may find Adobe InContext Editing useful. InContext Editing gives clients and nontechnical team members the ability to update website content without having to learn any HTML. Potentially, this could save you a lot of time in updating web pages, providing time-consuming training, or recovering from user mistakes.

InContext Editing is an online service that designers may use to allow content editors and publishers to update website content directly through their browsers — without compromising design integrity. Your team members won’t need to learn HTML, nor even install extra software. And for now, it is free.

For an overview of InContext Editing, see:

http://www.adobe.com/products/incontextediting/

How can I get started with InContext Editing?

There are four steps to get started:

Set up an account: http://labs.adobe.com/technologies/incontextediting/
Create editable pages in Adobe Dreamweaver CS4.
Add a site to your account.
Set up your content contributors.

Learn how to set up your pages for InContext editing:
http://tv.adobe.com/watch/adc-presents/getting-started-with-adobe-incontext-editing/

and learn more about it at:
http://www.adobe.com/devnet/dreamweaver/incontext.html

Note: If you use Dreamweaver Templates, the editable regions will need to be entered into the template, and all linked pages updated.

To manage or edit your pages, log into http://incontextediting.adobe.com/

How much does InContext Editing cost?

Adobe InContext Editing is currently available as a free preview. It will remain free through the end of 2010. In early 2011, Adobe plans to offer the service as a subscription of $10-20USD per month, which will also include Adobe BrowserLab (also becoming a paid release in early 2011).

When will InContext Editing be available for subscription?

The Adobe InContext Editing service is available now as a free preview for users in the United States only. This free preview program gives the community an opportunity to provide feedback, help identify bugs, and suggest feature additions before launch of the paid service.

What is the difference between InContext Editing and Adobe Contribute?

Adobe Contribute is a companion software application to Dreamweaver and, like InContext Editing, it also enables site administrators to restrict the types of modifications that content managers can make. However, Contribute is more robust; it provides content approval mechanisms, audit trails, versioning, scheduled publishing, rich media support (multimedia such as SWF or FLV files), and advanced user permissions. Visit the Adobe content editing solutions comparison page for an in-depth comparison of InContext Editing and Adobe Contribute software.

Web Standards Smackdown: XHTML2 vs. HTML5

Amy Neymeyr — Mon, 21 Sep 2009 20:20:18 +0000

Way back in July, the W3C (the governing organization of web standards) announced that it was not going to renew the charter of the XHTML2 working group. In non-bureaucracy speak, that means the W3C has stuffed XHTML2 standards development into a bottle and chucked it out to sea, where it will spend the rest of eternity bobbing on the waves and following the thermal currents. The W3C did this so that it could focus all of its attention on developing HTML5.

“Wait a minute, ” one might shout on hearing this news, “I thought XHTML was the wave of the future, and HTML was what Cro-Magnons used to code their web pages??? What’s going on?”

Its easy to be confused, and, yes, even a little bit alarmed by this news. But, in essence, the labels here don’t really represent what you think they do: XHTML2 isn’t really XHTML as you know it, and HTML5 encompasses a lot more than HTML4.01. Here’s what you need to know about both of these standards:

XHTML2 was a radical departure from XHTML1, was not designed to be backwards-compatible, and no major browser maker supported it.
Yes, you read that right. XHTML pages you’ve been building up until now would not be grandfathered in under XHTML 2 and may actually break. Why? In both the Dreamweaver and XHTML workshops, we explain that XHTML is a mostly happy marriage between the web-oriented HTML tags and the exacting syntax of XML. While this is theoretically true, in practice, browsers do not actually interpret XHTML1-formatted pages as XML. Why not? The biggest reason is that XML is an unforgiving standard – XML parsers will stop processing the document at the first error. We want web browsers to be more permissive than that, so that even if we forget to close a tag, the browser will still display our page as best it can. XHTML2 would force browsers and other clients to parse XHTML2 as XML, which potentially means that one error in a page’s structure would result in a broken page.

Even thought XHTML2 is no longer, there were some cool aspects to the XHTML2 standard, including granting every XHTML element special powers like the ability to behave like a hyperlink and reference external media such as images.

HTML5 is both XHTML and HTML, with new deluxe features to support what web developers want to do with web pages.
Are you familiar and comfortable with XHTML-style- formatting, where your page is well-formed, code is in lowercase, and tag attributes are quoted? You won’t have to change a thing for HTML5. And for those who prefer loosey-goosey HTML4.01 style syntax, where tags are closed, or not, and maybe sometimes in mixed-case? You won’t have to change a thing for HTML5. This aspect of the HTML5 standard is quite controversial, as there are many who argue that allowances for sloppy HTML syntax will make a mess of things behind the scenes. I would personally strongly recommend sticking with the fussier XHTML syntax for several reasons:

XHTML syntax is widely accepted and used
the rules (once you learn them) are consistent and easy to remember
you leave less to the browsers to interpret (and possibly mess up)
XHTML will make your pages more easily understandable to other developers

Some of the new exciting deluxe features in HTML5 are:

HTML5 will give you energy and help you lose weight! No, not really.
New structural tags to help you avoid the overuse of the one-size-fits-all div tag: header, nav, section, and footer, to name a few.
New semantic tags, like time, figure, and aside
Features for more advanced web developers including the ability to store data in the web browser, send and receive messages across multiple documents, and drag-and-drop

Thanks to a schoolyard row among Apple, Google, Mozilla and Opera, there sadly will be no simple video or audio tag in HTML5.

For further reading, check out:

Extending STEPS with lynda.com: Dreamweaver CS4

Amy Neymeyr — Mon, 24 Aug 2009 18:16:09 +0000

IT Training and Education currently offers three workshops on Dreamweaver CS4:

Dreamweaver CS4: The Basics covers the Dreamweaver environment and building a publishing a simple web site using tables.
Dreamweaver CS4: Creating Websites with CSS concentrates on how to build a website using Cascading Style Sheets to control the layout.
Dreamweaver CS4: Navigation, Templates & Media Integration covers how to create pop-up menus for navigation, build Dreamweaver templates to simplify site maintenance, and include multimedia on your web sites.

While these workshops provide an excellent platform on which to start exploring web design and development using Dreamweaver, they are by no means exhaustive. And, there may be certain concepts (especially related to CSS) for which you’d like additional reinforcement. This is where lynda.com can come in. Remember that from now until Dec. 20, IU community members get FREE access to lynda.com. As of this writing, lynda.com has 8 Dreamweaver CS4 series, for a total of almost forty additional hours of training on Dreamweaver CS4. Awesome! And when we retire, we’ll actually have time to watch all of it.
Here’s a chart to help you narrow down which lynda.com Dreamweaver CS4 videos cover the topics you’re interested in:

lynda.com Dreamweaver CS4 Tutorials	Target audience for this lynda tutorial
Dreamweaver CS4 Getting Started	If you’ve heard of Dreamweaver, but have no idea why you’d use it; this would be a good prerequisite for taking the STEPs workshop Dreamweaver: The Basics.

Dreamweaver CS4 Essential Training	You’re ready to build your first web page or web site using Dreamweaver. Covers much the same ground as Dreamweaver: The Basics, with additional coverage of CSS.
Web Site Planning and Wireframing: Hands-On Training

Dreamweaver CS4 with CSS Essential Training	You’ve got basic web concepts like tables and images under your belt, and you want to learn how to make attractive, usable, easily-maintainable sites with CSS. Is an excellent refresher course after taking the STEPs workshop Dreamweaver:Creating Websites with CSS.
Creating a CSS Style Guide: Hands-On Training

Dreamweaver CS4 New Features	You’ve got prior experience using Dreamweaver to create CSS-based websites, and you’d like to start building dynamic pages based on data from a database, create forms, or add advanced client-side interactivity using Javascript. These lynda tutorials cover areas of more advanced web development not covered in STEPs workshops.
Dreamweaver CS4: Introduction to Spry
Dreamweaver CS4 Dynamic Development

See a more detailed chart after the jump…

Here’s a more detailed chart that covers more detailed aspects of web design and development, and which lynda.com Dreamweaver tutorials cover them. If you’re interested in a particular aspect of web design and development, this chart will help you figure out which lynda tutorials will meet your needs.
(Click graphic to see larger version)