it2go – The IT Training Podcast

Follow us on Twitter

Like Us on Facebook

Add us on iTunes

To add a browser in Dreamweaver, you need to have it installed on your computer.  When Dreamweaver is installed, it attempts to locate all installed web browsers. However, you can also add browsers manually by following the instructions below.

First, you need to access the browser settings. To do so, on the Menu bar, click the File Menu, point at Preview in Browser and click Edit Browser List…

You will see the Preferences dialog box displaying the Preview in Browser op­tions.

Browsers that are already available in Dreamweaver are listed in this dialog box.

To find the browser you want to add, from the Preview in Browser options, click on the  button just above the list of Browsers.

You will see an Add Browser dialog box.

Click the Browse… button next to the Application field.

Depending on your operating system, you will see the Program Files or Program Files(x86) folder on a PC. On a Macintosh, you will see the Applications folder.

Now you will need to find the executable file for the browser you want to add. As far as I’m concerned, finding the executable file is the hardest part of adding a browser!

Here are the  file paths on Windows 7 (64 bit) for a few different browsers:

• Internet Explorer – C:\Program Files (x86)\Internet Explorer\iexplore.exe
• Mozilla Firefox – C:\Program Files (x86)\Mozilla Firefox\firefox.exe
• Opera – C:\Users\username\AppData\Local\Opera\Opera.exe
• Google Chrome – C:\Users\username\AppData\Local\Google\Chrome\Application\Chrome.exe

In the examples of Chrome and Opera above the username would be replaced with the name you are logged in to the computer with. Also, be aware that by default the AppData folder is hidden. If you need help to make hidden files visible, see Show Hidden Files and Folders in Windows 7 or Vista.

Here are the file paths on Mac OSX 10.74 (Lion) for a few different browsers:

• Safari – Macintosh HD:Applications:Firefox.app
• Firefox – Macintosh HD:Applications:Safari.app

Once you find the executable file, double click on it to selected it. You then see the Add Browser window again.

This time, the Name and Application fields contain values. Since my computer already had Internet Explorer and Firefox installed, this example shows Google Chrome being added. You can change the name to a more appropriate name if you want, or you can accept the default name. If you want to this browser to have a keyboard shortcut associated with it, click the checkbox for Primary or Secondary browser. Be aware that you can only have one Primary browser, and one Secondary browser.

To finish adding the browser, click the OK button at the bottom of the Preferences window.

To open a page in a browser, you can go to File, then point at Preview in Browser and click the browser name.

The page you were viewing in Dreamweaver will then appear in that browser.  If you set the browser to be a primary or secondary browser, you will see the shortcut keys you can use to open the browser after the browser name in Dreamweaver. If you are on a Mac and have trouble previewing your page using the shortcut keys, see our blog article Understanding Mac Keyboard Shortcuts.

Now, you can preview your web pages in any of the browsers you have set up using Dreamweaver.

it2go – The IT Training Podcast

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.

Feel free to comment on the podcast under this post. Enjoy!

Episode 10 – Dreamweaver Series

• creating web pages to be viewed on multiple devices
• creating mobile applications for Android and/or iOS
• working with HTML 5 and CSS3

Scott Fegette, the Senior Product Manager for Dreamweaver, gives an overview of the new and improved features:

Videos about the specific features can be viewed at:
http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/enhanced-html5-capabilities-in-cs55/

You can read more about the specific features at:
http://www.adobe.com/devnet/dreamweaver/articles/whats-new-dwcs55.html

You can attend in person on the IUB campus at the Kelley School, room CG1014 or on the IUPUI campus, in ICTC room IT497.

You can find an online link to the presentation here: http://webcommunity.iu.edu

Hope to see you there.

In this video, we will explore what version control is and how to use it when building a website in Dreamweaver CS4:

Screenshot of website created in Dreamweaver CS4, showing main navigation drop-down menus

Specifically, we use Show-Hide Elements to control when, and under what conditions, the navigation sub-menu should appear and disappear.  Show-Hide Elements is a fast and easy way to create drop-down menu items, but it can also be used, with a slight adaptation, to make pieces of content in the main part of a page appear and disappear based on the user’s behavior.  Read on to find out more…

The Use Case

Let’s say that you’re building a website where you need to display similar kinds of information about several related items:

• a Visit Us page for a company or organization that has several locations
• advertising a product that comes in several styles or colors

For the purposes of this post, let’s say we’re building a website for an artist and we’d like to show off a few of their works. The easiest solution is to create separate pages for each item. There are a few reasons why we might not want to do this, though:

1. Its a little jarring for the user to go from page to page
2. It can be difficult for the user to quickly compare different pieces
3. It could be a lot of duplication for us (copying and pasting copyright information to each page featuring an artwork, for example)

And, as a matter of fact, our client the artist has stated very strongly that she wants her artist’s statement to appear above every piece of art featured on the site. That means if we create a unique page for each piece of artwork, we have to copy and paste her artist’s statement each time. And then when she changes her artist’s statement (since we all know how fickle artists are , we’ll have to remember to change the statement on all the artwork pages.

BUT, if we put all of her artworks on a single page, the page will be very long and its possible that viewers of the page won’t scroll all the way down to see all of the items.

The Solution

There’s a number of ways to solve this condundrum. Today, we’re going to repurpose the Dreamweaver behavior Show Hide Elements to allow the user to select which pieces of art they look at, based on their title.

Here’s where we’re at:

1. We’ve already sketched out a site, including a Portfolio page.
2. At the top of the portfolio page, we’ve  inserted the artist’s statement.

Here’s what our site and Portfolio page looks like so far:

Basic Portfolio page

Now what we want to do is add a sort of mini-nav below the artist’s statement, where each item in the mini-nav is a link to a particular artwork:

Basic page with artwork navigation added

Instead of the link taking the end-user to another page, however, we want the artwork that the user clicked on to appear below the artist’s statement, like this:

User has clicked on one of the artwork titles

The nice thing about this approach is that the user stays on the same page, and as they click on the various artwork titles, an image of the artwork and a description appears below.

Step-By-Step Instructions

Here’s what you’ll need to know before watching the following demonstration:

1. Basic understanding of CSS (if you’ve taken Dreamweaver CS4: Creating Web Sites with CSS, you should be set)
2. Basic understanding of Dreamweaver Behaviors (if you’ve taken Dreamweaver CS4: Navigation, Templates, and Multimedia Integration, you should be set)

Here’s what the tutorial video will cover:

1. Manually adding <div>s and giving those <div>s names
2. Adding content to <div>s
3. Creating links to be used with Behaviors
4. Adding the Show/Hide Behavior so that clicking a link will show certain <div>s and hide others
5. Understanding the difference between CSS properties Visibility and Display
6. Modifying the Dreamweaver javascript manually to achieve the effect we want

One other thing:

1. Download the finished site (.zip format / 40MB)

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:

1. Set up an account: http://labs.adobe.com/technologies/incontextediting/
2. Create editable pages in Adobe Dreamweaver CS4.
3. Add a site to your account.
4. 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.