Requirements for this tutorial:

• Adobe Dreamweaver CS3, CS4 or CS5
• Flexi CSS Layouts Dreamweaver extension

Flexi CSS Layouts is an easy to use Dreamweaver extension that helps you create table-less HTML layouts without coding, in less than 5 minutes. You can simply create the page structure directly from the interface and the extension will automatically create the divs and CSS for your layout. Or choose from a wide range of embedded templates for your layout, then customize the layout with your own CSS rules.

Read the tutorial here.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

It’s easier than you think if you don’t use URL rewrite permalinks.

• copy the slideshow “/includes” files from the Dreamweaver location to the Wordpress folder (Image Show Pro creates a folder called “includes” in the Dreamweaver site);
• you will need to manually edit the header.php file (location /wp-content/themes/[your template name]/header.php) and add the 3 JavaScript include files to the head section (please copy the ones from Dreamweaver, below are just samples).

<script type=”text/javascript” src=”/includes/ImageShowPro/flash_detect_min.js”></script>
<script type=”text/javascript” src=”/includes/ImageShowPro/xtdProBanner1.js”></script>
<script type=”text/javascript” src=”/includes/ImageShowPro/xtdProBannerLayout.js”></script>

• edit the file where you want the slideshow to appear and add the rendering script (for example if you want to replace the typical Wordpress theme with the slideshow, edit the header.php file and add the rendering script there (again, below it’s just a sample):

<!– Banner xtdProBanner1 begin –>
<div id=”xtdProBanner1″ style=”width:760px; height:200px; overflow:hidden;”> <img src=”/slides/picture1.jpg”/> <img src=”/slides/picture2.jpg”/> <img src=”/slides/picture3.jpg”/> </div>
<!– Banner xtdProBanner1 end –>
<!– Banner xtdProBanner1 rendering scripts start –>
<script type=”text/javascript”> xtdProBannerLayout(“xtdProBanner1″,”") </script>
<!– Banner xtdProBanner1 rendering scripts end –>
</div>
<!– BannerPro render begin –>
<script type=”text/javascript” > render_xtd_ispro(); </script>
<!– BannerPro render end –>

If you use URL rewrite permalinks (Day and name, Month and name, numeric or custom) you need to use absolute URLs

You need to change the relative paths to absolute paths (that’s the quickest way to make sure the slideshow will work on all page types: category, post detail, page). Short version: copy the files from Dreamweaver in the Wordpress folder and change the paths to the included JavaScript files and the rendering script with absolute paths; then in one of the JavaScript files, you need to change the paths to the images you use for the slideshow with absolute paths as well.

That’s not very complicated either, but I did write a full tutorial that will go through the Wordpress installation part (just like any good Wordpress fan would do).

You can read the full tutorial here.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

So what have changed after the new CS5 splash screen?

The new Dreamweaver CS5 loading image

New layout for the working environment, better tools for code inspection and testing in CS5

The split view is now vertical by default; it looks a bit unusual if you are used with the old horizontal split view, but from our tests you get used to it fairly quickly as it has the great benefit of showing more code without having to scroll. To help even more, CS5 comes with great additional tools to inspect the code:  a search bar, the CS Live option on the top right part of the interface before the minimize button and next to the Live view we have the Inspect button which is a cool new feature. It’s like having Firebug installed directly into Dreamweaver.

We also have some new tabs in the right panel that also have to do with the way you code: one is Adobe BrowserLab that can be found after clicking on the CS live button.

The CS live button from the top right is a new feature of Dreamweaver CS5 and it has the following : Adobe BrowserLab with the Preview in BrowserLab and BrowserLab home. In order to use these features you need an Adobe account. I think that in the near future we will do more and more testing online and also we’ll create web pages online:

Another addition is Business Catalyst which helps you to manage your online businesses. With Business Catalyst you can build powerful online stores, amazing websites and it has many other cool features.  Using the flexible content management you can insert the BC modules into your design. With the in-context editing tool BC is one step closer to your clients, making the editing much easier for your clients. So now you don’t have to worry if you’re hard-coding a client’s website. You can learn more from their website.

And take a look at the new CSS Styles Tab that was improved as well. You can see a better organization for your CSS styles:

Dreamweaver CS5 new layout

Adobe BrowserLab – the quick way to test your page in multiple browsers

BrowserLab is an online tool from Adobe (you don’t have to install any third party applications). It comes embedded in the new Dreamweaver CS5 and in order to use it you just have to sign in with your Adobe account. BrowserLab helps you deliver quality web pages that are compatible on a wide variety of browsers. All you have to do is select which type of browser you want to test your design, it doesn’t matter if it’s Internet Explorer 6, Firefox 3 or any other browser that you want to test it on. BrowserLab is even better than a paid service that allows you only to test on different types of browsers because it also lets you choose the operating system. So you can test from IE6 on a Windows XP to Firefox 3.5 on a OS X operating system. You can even use side by side viewing on your design, or even better you can use the onion skin which overlays two screenshots on top of each other so you can easily spot any discrepancies between the screenshots.

Working with CSS in Dreamweaver CS5

I was telling you before about this new cool feature -CSS Inspect mode- that is like having Firebug into Dreamweaver. Well, in order to use it you have to start the Live View and then press  Inspect. While you hover with your mouse over your design, you can see how different elements are highlighted and the CSS Panel starts to show their rules. And the cool feature is that this is in real time. To edit,  go to the CSS Panel and start modifying the rules that you like. The border, margin and the padding rules have a different color than the color for your element that you have selected or hovered. You can even see the CSS rules for your JavaScript navigation or slideshows.

The new CSS Styles

Using the Inspect Mode with the Live View helps you focus better on the CSS rules. So if you want to hide a border or a padding for an element that you have selected, now you can hide those rules or temporarily disable them from the CSS Panel, using the “No” symbol. It’s like using Inspect mode from Firebug directly into Dreamweaver. When you are satisfied with the results you can use Dreamweaver to save your changes and to make those modifications permanent by removing those rules.  So in the end, you’ll get a clean CSS file.

Enhanced code hinting

The hand coding experience from Dreamweaver has been improved big time. You now get hinting for core and extended functions, custom classes, applications and frameworks, live documentation and more. You get hinting even from your own custom classes and libraries.

Setup Window

Site setup settings and testing environment in CS5

With the new site setup settings, you can easily define more than one server for your design. It doesn’t matter if it’s a remote or a testing server you can change these settings whenever you like.

To wrap things up, Dreamweaver CS5 brings a new interface that is smoother and more streamlined. I think Adobe team is getting closer to creating a good website developing product, all there is to do now is to test your skills with the new Dreamweaver CS5.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

Requirements

• Flash CS3 or CS4
• Creative Flash Scroller AS3 (you can download a free trial)

To make it work, you just need a bit of AS3 code. Here is the tutorial to guide you through.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

Locating the Spry Menus in Dreamweaver

First thing to do is to open Dreamweaver, define a site, or open an existing project and create new HTML file. In the upper Dreamweaver menu, in the Insert tab go to Spry, select Spry Tabbed Panels.

Working in Design View

In the Design view, you will see 2 files added: SpryTabbedPanels.js and SpryTabbedPanels.css which contains the JavaScript for the navigation and the CSS for the spry tabs. In the properties, you can change the name for Tabs, the default name is TabbedPanels1, where you have Tab 1 and Tab 2, and the default start tab is set to Tab 1.

Working in Code View

If you change to code view, you can see inside the body tags, the code for the spry tabs. The spry tabs are inside the div with the id “TabbedPanels1” which are a part of the class “TabbedPanels”.  An id tag can be attributed to only one object, while a class attribute can hold more than one object. After the div containing the spry tabs, Dreamweaver puts the JavaScript code in order for the spry tabs to work. It is best that the JavaScript code should be placed at the bottom of the page, right before the body end tag. This is an optimization webpage tip, we will cover some optimization tips in a future tutorial. In the head section are the links for the JavaScript file and out external CSS file.

I have renamed the file to spry_tabs, and changed the tabs name. In order to change the names for the tabs, you can go in the code view and where you find the following line of code :

<li class=”TabbedPanelsTabs” tabindex=”0″>Tab 1</li>

Change the “Tab 1” to whatever you like for the tab 1 name. Do the same for the tab 2. Or you can go in the design view, place your mouse over a tab and when you see an eye icon, click it and you can set there the new tab’s name. Also I have added a new tab, you can do that from properties, after you press the blue line which has the “Spry Tabbed Panels: TabbedPanels1” line, go and press the plus button where it says Panels, it should be a tooltip telling you “Add a new tab”. You can change the order of the tabs by pressing the triangle buttons.

Adding content to each Tab

I need a 700px spry tab panel, so go to code view, select the SpryTabbedPanels.css file,  and go to .TabbedPanels and where it says “width:100% “ instead of the 100% enter the number of pixels you desire, in my case I need a 700px width, so it will look something like in the picture below. In the .TabbedPanelsContentGroup, go to background-color and change it to #CCC (this is the hex code for the white color) (I’ve done this in order to have a gray background inside the spry Tabs).

Optimization tip

We can remove the default comments from the CSS file, by compressing it at :

http://www.cssdrive.com/index.php/main/csscompressor/

Select Compression mode : normal and for the Comments handling select strip all comments, go to your SpryTabbedPanels.css copy all text (CTRL+A and Copy) and Paste it in the link, and press compress-it! It will show you the new css rules compressed, copy it and overwrite the SpryTabbedPanels.css and it should look something like in the picture below.

You should see the compression details at the link, below the highlight code, something like “Savings: 6834 bytes (82%)”. We will cover about this tip in a future tutorial.

Creating the DIVs that contain the pictures

You can add any type of content in the Tabs, but for the samples page I needed a 2 columns layout to hold the screenshots and their title. To do this, you need a container div for every row which will have a div for the left image and another div for the right image (both divs should have style=”float:left”). I’ve also added a secondary div for the image title. The code looks like this :

<!– start first row with a container–>

<div class=”container”>

<!– start left container that includes the picture and title text–>
<div class=”image_left” >
<!– the first div includes the picture, the second div includes the title that will appear below–>
<div class=”sample_text” ><img alt=”" src=”" style=”border:1px solid #999″ /></div>
<div class=”sample_text”>Picture title</div>
</div>
<!–left container ends here–>

<!– start right container –>
<div class=”image_right”>
<div class=”sample_text”><img alt=”" src=”" style=”border:1px solid #999″ /></div>
<div class=”sample_text”>Picture title right column</div>
</div>
<div style=”clear:both”>&nbsp;</div>
<!– right container ends here–>

</div>

<!– end first row –>

I’ve inserted some html tags “<!– comments goes here –>” to help you see the code easier. You have to set your own alt text for the images, and also set the correct path in your src=””. To make more rows, simply copy the code more times.

The CSS

Ok, now we have to work a bit on the SpryTabbedPanels.css file to make the DIVS to appear on 2 columns as in the sample page. Add this code to the end of the file:

.container {width:700px;height:auto;}

.image_left{width:330px;padding:10px;float:left;}

.image_right{width:330px;padding:10px;float:left;}

.sample_text{font-family:Tahoma, Geneva, sans-serif; font-size:14px; color:#666; width:330px; float:left;}

With these set  you’re spry tabs should look something like in the picture below.

Need better looking Tabs with Flash effects?

If you don’t need the content to load without reloading the page but you need something fancy you can have a look at the Creative DW Menus Pack. It’s a Dreamweaver menu extension that makes animated menus a breeze. Here is a short tutorial on how to make a Vertical menu with the extension.

If you encounter any difficulties or you have any other problems with the creation of the Spry Tabs comment below. Hope you enjoyed the tutorial.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

Locating the Site settings menu

Open Dreamweaver, and in the upper menu, go to Site, select New site (like in the picture below):

Basic tab

In the Basic tab enter the name for your site and leave everything else on default; don’t write anything to the http address, just leave it like it is and press Next.

On the next step select “No, I do not want to use a server technology”. Because we are building just a simple site we do not need a server technology (PHP). We have covered the server side setting in this tutorial. Press next.

Editing files

Now we are at Part 3, Editing files, just select Edit local copies on my machine, then upload to server when ready. This is the simpler way; if you select edit directly on server you have to set the details for ftp connection and it’s a bit annoying as each time you want to test you need to upload the files on the live server.

The next thing you have to change is the folder where you want to store the files for your site, I’ve created a folder on my desktop with the same name as the site “creative dw menus”, browse for the folder, press open, then press select. Make sure the path for the folder is correct and press Next.

On the next step, how do you connect to your remote server select None from the drop down, and press Next.

Summary details

Dreamweaver will show a final window, with the summary details, showing you the local info, the site name, the local root folder, the remote info, should be “Acces: I’ll set this up later.”, the testing server should say the same thing. If everything is correct press Done.

Dreamweaver will start building the cache files, if you already have any files in the folders (like in my example).

Hope you enjoyed it and managed to create your first site in Dreamweaver.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

Do you need to create dynamic sites, for example generate menus or web charts based on database values or save a contact form in the database ?  To run dynamic web applications you need a server (Apache) a server-side language (PHP) and a database (Mysql). These are provided by the hosting companies for the live application (you should check yours) but if you build dynamic webpages using Dreamweaver then you’re also going to need a local testing server so you could test the application on your machine before deployment on the live server.

The hard way to create a WAMP testing environment on your PC

A PHP&MySQL server installed on a PC is called shortly WAMP (Windows-Apache-MySQL-PHP). You can install them manually: if you need just Apache you can get it from http://www.apache.org/ . But if you need also the MySQL database, you should download it and install it manually and the same goes for PHP.

The easy way to create a WAMP testing environment on your PC

The good news is that there are some one step installation programs that include Apache, MySQL and PHP. You also get phpMyAdmin – an easy to use interface for the database management.

XAMPP for Windows

Now if you’re on a windows environment you can try  XAMPP for Windows: http://www.apachefriends.org/en/xampp-windows.html

The latest XAMPP 1.7.3 includes:

• Apache 2.2.14 (IPv6 enabled) + OpenSSL 0.9.8l
• MySQL 5.1.41 + PBXT engine
• PHP 5.3.1
• phpMyAdmin 3.2.4
• Perl 5.10.1
• FileZilla FTP Server 0.9.33
• Mercury Mail Transport System 4.72

XAMPP has many features, it even tells you how secure are your web pages and your database. Normally, you don’t have a password for the database, so it’s advisable to set a password for that, and a password for the working folder (accomplished via a .htacces file)  so your web pages won’t be visible in the network unless you provide the password.

After you set a password for the root admin user, for your web pages, and for the phpMyAdmin you can save them. Under the security tab in XAMPP you’ll see something like in the picture below:

WAMPSERVER 2.0

Another solution for installing Apache, PHP and MySQL without any headaches is the WAMPSERVER 2.0:

The latest release of WampServer 2.0i [07/11/09] includes :
- Apache 2.2.11
- MySQL 5.1.36
- PHP 5.3.0
The difference can be seen quickly, it’s much simplified than XAMPP but you don’t have Perl, FileZilla  installed or the possibility to add the Tomcat add-on.

Wampserver it’s build for the beginner user to get use to dynamic web pages.

Also you don’t have the security verification, because wamp doesn’t check for security issues so your web pages and your databases and exposed to users from your network.

MAC alternative – MAMP

If you are on a Mac environment you can try the MAMP: http://www.mamp.info/en/index.html.

The MAMP includes Apache, Mysql and PHP. MAMP installs a local server environment in a matter of seconds on your Mac OS X computer.

Setting up the dynamic testing server in Dreamweaver

OK, if you did install one of the above solutions you have the testing environment set up. Now you need to setup Dreamweaver to work with dynamic sites.

Define a site

You need to have folder on your computer where the site files will be and in this folder you should create a new folder for each site. Let’s define a site in Dreamweaver.

Open Dreamweaver, go to Site, select “New Site…”, select Advanced, under Local Info, enter the name for your website. In Dreamweaver, under the local root folder enter the name of the site folder or simply browse for the folder you have created for the site.

Go to the “testing server” tab, select server model : PHP MySQL, then from the Access drop down: Local/Network. The Testing server folder is the place where you’re files are going to be stored on the testing folder, so it’s best that you go to the default www folder inside the XAMPP or WAMSERVER installed. In XAMPP you can find the www folder in C:\Xampp\htdocs\. For WAMPSERVER go to c:\wamp\www . In the default www folder create a new folder and for the usability sake, give it the same name as the site.

In the URL prefix the  location should be http://localhost/your_folder. If you misspelled the name of the site, Dreamweaver will show a popup window telling you that the name of the site doesn’t match with the URL prefix, like in the picture below.

Creating a MySQL database connection in Dreamweaver

I will assume you have created a database via PhpMyAdmin – you can access PhpMyAdmin via XAMPP or WAMPSERVER interface.

Select from Dreamweaver “window” and then “databases” or press CTRL+SHIFT+F10 in order to display the databases tab. Press the + icon and select the MySQL Connection. A popup window will appear where you have to set the following items: connection name (put the site name there), MySQL server (default should be localhost), user name for the MySQL login, (usually the root user) and the password for the user. Dreamweaver tests the connection, and if everything is alright it should show you a popup window to select your database, like in the picture below. After that, press ok and you’re done.

Creating the first PHP file

In the upper Dreamweaver menu go to File, select New file, select PHP, in the Layout: select <none>. Save the file “index.php” in your local folder “D:\local_folder\demo_site”.

Select view code, set the HTML title “First PHP Test Page” (between the <title> tags and in the body (between the <BODY> tags), enter the following code :

Let’s explain the code. In order to use PHP we have to place it in PHP tags, <?php   (your code goes here)  ?>, or  <?   (your code goes here)   ?> . The echo tag simply displays what you write inside the qoutes, in our case a simple Hello World text. In the end you have to put “;” in order to display the text, else it will give you an error. (Parse error: syntax error, unexpected T_ECHO, expecting ‘,’ or ‘;’ ). See the picture below.

Now press F12 and in your browser you should see in the adress bar “http://localhost/demo_site/index.php” and the text should be like in the picture below.

Advanced PHP&MySQL applications

You are all set now to create dynamic applications in Dreamweaver and test them locally. You should learn how to create SQL queries to retrieve information from the database, and how to output the result using PHP. If you want a quick jumpstart you can use Dreamweaver extensions that generate PHP&MySQL code; for example here is a tutorial on how to create a simple menu using Creative DW Menus and a tutorial about creating a simple web chart with FusionCharts for Dreamweaver.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

Issue: previewing Flash in a local browser (MAC or Windows) security warning

The good news is that the Extend Studio products have a warning system built in that throws a quite explicit error message if you don’t have the necessary Flash Player local settings. On both MAC or Windows the  warning message in your browser looks like in the picture below.

Solution

To make the correct Flash Local settings to locally test your Flash in a webpage, follow the link in the browser, and follow the steps:

• In the Adobe Flash Player Settings Manager, select global security settings, select  Always Allow.

• In the “Always trust files in these locations” go to edit locations -> add locations->browse for  folder.

• Select the folder where you have the files, or simply select the hole drive where the files are stored, in my case I`ve selected the hole drive C:\ on windows, and on mac I`ve selected the root “ / ” . On mac it should look like in the picture below.

• On windows, it should look like this:

• After that  go to your page and refresh it, it should work like the picture below.

That’s all! If you have any other questions, you can always send an e-mail at : support@extendstudio.com

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend

Read the slideshow tutorial.

• Bookmark on Delicious
• Digg this post
• Recommend on Facebook
• Buzz it up
• Buzz it up
• Share on Linkedin
• share via Reddit
• Share with Stumblers
• Tumblr it
• Tweet about it
• Subscribe to the comments on this post
• Tell a friend