www.youtube.com/watch?v=-DjA2_0veJ4

Note: this tutorial assumes that you already know the basics of using the Flexi CSS Layouts Dreamweaver extension.

Creating the index page

Create a new empty html file in Dreamweaver. Save the file as “index.html” then find the Flexi CSS Layouts tab and open the Template Gallery. Select the full templates category and select one of the home page templates (for example “Software Product – Home page”). Press “Insert” to add the layout in the page or “Customize layout” if you want to make changes.

Read the tutorial here.

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.

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.

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.

]]> http://www.extendstudio.com/blog/2010/05/changes-in-dreamweaver-cs5/feed/ 2 http://www.extendstudio.com/blog/2010/03/how-to-create-spry-tabs-with-dreamweaver-and-div-content/ http://www.extendstudio.com/blog/2010/03/how-to-create-spry-tabs-with-dreamweaver-and-div-content/#comments Wed, 31 Mar 2010 09:24:07 +0000 iliuta http://www.extendstudio.com/blog/?p=735 When you have lots and lots of things to show on a Webpage to the point it becomes unreadable what do you do? You try to split the content on several pages. The old way to do this was to create separate pages and the user could browse and open various content sections in new pages. The new way to do this is to create a single page that shows the first section of content and hides the rest. Viewing the rest of the content sections is possible without reloading the page, which makes things very fast. Dreamweaver’s Spry Tabs are an easy way to display several content sections without refreshing the page. To give you an example, have a look at this page were you can browse through samples of Vertical, Tabbed and Dropdown menus without reloading the page. Sweet isn’t it? Let me show you how I did the sample page (tutorial explains also how to do the 2 columns DIVs that hold the screenshots).

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.

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.