This is default featured slide 1 title

This is default featured slide 1 title

You can completely customize the featured slides from the theme theme options page. You can also easily hide the slider from certain part of your site like: categories, tags, archives etc. More »

This is default featured slide 2 title

This is default featured slide 2 title

You can completely customize the featured slides from the theme theme options page. You can also easily hide the slider from certain part of your site like: categories, tags, archives etc. More »

This is default featured slide 3 title

This is default featured slide 3 title

You can completely customize the featured slides from the theme theme options page. You can also easily hide the slider from certain part of your site like: categories, tags, archives etc. More »

This is default featured slide 4 title

This is default featured slide 4 title

You can completely customize the featured slides from the theme theme options page. You can also easily hide the slider from certain part of your site like: categories, tags, archives etc. More »

This is default featured slide 5 title

This is default featured slide 5 title

You can completely customize the featured slides from the theme theme options page. You can also easily hide the slider from certain part of your site like: categories, tags, archives etc. More »

 

Adding widgets to your Dreamweaver CS6 site

Dreamweaver has a few ways of adding effects to your site that would ordinarily take longer to code using Javascript or Jquery.  By adding widgets, spry or behaviours to your site you can circumvent having to uise these more complicted languages. Most of these effects can be customized after you've added them and some can even be customized before adding them to your code.

For this article, we'll add a zoom feature that will allow users to zoom in to see a product on a site. To get started, place the cursor where you want the effect added in your Coding window and then locate the 'Widget…' command under Insert at the top of the Dreamweaver workspace:
widget1

This will open up a window prompting you to either insert a widget or open the widget browser. Click the blue 'Widget Browser' option to open up a gallery to select a widget:

widget2

After you select that blue text, a large browser window should open up that shows you a list of widgets you can add to your site. In this window be sure to click the 'Adobe Exchange' option at the top of this screen beside the 'My Widgets' text:

widget3

In this browser you have the option of searching for various effects. We want to use the 'jqzoom' effect so we'll select that one. Doing so will open a screen that shows you a preview of how this effect will look once you add it to your website. On the side, you also have opens to customize the effect before adding it to yout site by clicking the 'Configure' option. Below the preview window you can also save this Widget as a preset for when you wish to insert it on your website. We'll name ours 'Zoom 1' to find it more easily:

widget4

Now that we've saved our preset, we'll close this window off and return to Dreamweaver. Next we'll go back into the 'Widget…' command under Insert and under the Widget option select the 'jqzoom' effect and under Preset select the 'Zoom 1' preset and press ok:

widget5

This will insert the effect on our page. Now it's just a matter of switching the image names with our own images. You'll need a small image for the regular view and a larger on for the zoom effect to work:

widget6

And now we have our finished zoom effect for a drumstick product:

widget7

In case you're wondering where the magnifying glass came from, we simply added that icon onto the smaller image in Photoshop before saving the image. It lets anyone viewing the image know that they can zoom in to see more detail.  You can also tweak a bit of the commands that the widget inserted into your html window. In here you can change the zoom speed, zoom box size, etc:

widget8

 

 

Adding Spry effects in Adobe Dreamweaver CS6

Like widgets and behaviours, spry effects are another great way of adding engaging devices to your website that convey information in a non linear fashion.  They work similar to widgets in that they're easy to install and can be fully customized to your liking.

With spry effects you can easily insert tabbed options, accordion effects, collapsible panels, form elements and simple tool tips. In this article we'll take a look at how to add these effects and what they look like.

To add your first spry effect, place your cursor where you want the effect to be included in your code and then locate the Spry option under Insert at the top of Dreamweaver CS6:

spry1

In here you'll see a list of several spry options you can add to your page. Here are some screenshots of what the basic effects looks like.

Spry Menu Bar – An easy way of adding a standard menu bar to your website. You have the option of inserting either a horizontal or vertical menu.

spry2

Spry Tabbed Panels – Tabbed panels are a great way to include more information on your page without making the page look too content heavy. You can add as many tabs as you want for the user to cycle through and can include anything you would have on a regular site such as images, video, tables, forms, etc.

spry3

Spry Accordion – Similar to tabbed panels, accordions are another useful way of organizing lots of content on websites instead of having a long page full of text and other content.

spry4

Spry Collapsible Panels – Collapsible panels hide and show information depending on when the tab is clicked. These are usually used to provide additional information about something such as a product.

collap
Spry Tooltips – Tooltips are a simple way of adding more information about something on your page when a user hovers over it.

spry5
Spry Validation Options – Spry also contains a series of validation options you can use to build a form quickly and easily in Dreamweaver. These work similar to the other form options we covered in an earlier article and help to validate user inputed content.

spry5b

When you insert a spry effect into your project, Dreamweaver will let you know that it's placing some new Javascript files in your root folder. Make sure to leave these where they as moving them can cause errors with your effects. You'll also notice that Dreamweaver will add several new stylesheets to your site as well as some additional style information to your code. Adjusting these will enable you to tweak the color, size shape, font or any other adjustible parameter of your spry effect:

spry6

spry7

We suggest adding the various effects and testing them out on your page. It's a good idea to be careful of how many you use however: Using too many can sometimes cause errors with javascript and jquery. It's more common to use one or two effects tastefully throughout a website than to use multiple spry effects on one page. Just remember that anything you add can be completely customized to match the palette and style of your website.

How to use HTML 5 semantic markup in your website (Part 2/2)

In our last article we broke down some of the most commonly used semantic markup tags you'll see on the web. In this article we'll build a basic blog page that contains several of these markup tags in action so you an see how they work in a web building software such as Dreamweaver CS6 (which is what we're using). It will help if you have the last article handy as well to reference our descriptions for the different markup tags.

The page below is a basic page we built using semantic markup language and lorem ipsum text. We also broke down the various elements you see to help you better understand why we decided to place content in certain sections.

1

1a

If we deconstruct the site above, we decided to build the top portion (That includes the title "How to build a semantic markup website") into a main <header> tag that includes a <nav> tag nested within it. Nesting semantic markup is useful for proper html 5 structure. On the left hand side of the page, the larger box (that surrounds the smaller box containing "A brief article" text) is an <article> tag and the smaller bo inside at the top is another <header> tag since it's the heading of a main article.

Along the right-hand side of the page we have an <aside> tag that's the larger box and nested within this box is the <section> tag since it contains a section of thematically related content (in this case, an about us section and a small menu).

For the bottom image, the large box surrounding the Learn More, Discuss, Share and larger About the Author section is a <footer> tag since it contains a lot of information a user would expect to see on the bottom of a webpage. The very bottom of the page is a separate <footer> class that contains a copyright. We could have contained both of these elements together in one <footer> tag but decided it would be easier for sreen readers to dissect the contents if they read from one <footer> tag to the next. And finally the right-hand side element (the newseletter and job board) is nested in the <aside> and <section> portion we mentioned in the first image.

Here's some screen captures of the html code and CSS we did as well so you can see how similar these elements look to using regular divs:

2

3a

How to use HTML 5 semantic markup in your website (Part 1/2)

HTML 5 has introduced a new method of structuring your webpage based on what type of content you have in a section. This new type of coding called "Semantic markup" is used to help web developers structure a page that will assist screen readers locate sections on a webpage more easily than before. Search engines may also place more importance on certain sections of semantic markup over others.  Semantic markup is a newer way of coding that's been getting more popular over the last few years. It's starting to replace some sections of code that used to be organized with a div class – a lot of developers think semantic markup and divs will be used in tandem on websites of the future.

Semantic markup aims to structure the page based on different content. As of right now, the most common types of semantic markup are (in no particular order): <header>, <nav>, <aside>, <article>, <form>, <section>, <table>, <img>, <fig>, <figcaption> and <footer>.     As you can see these titles clearly identify the content contain within.  It's important to note that certain browsers such as Internet Explorer have difficult rendering certain portions of a marked up site but solutions are being worked on currently to mitigate this for the future.

A breakdown of the following elements is as follows:

<header> – This tag would contain elements that sit in a common website head such as contact details, a logo or anything excluding the nav.

<nav> – As you might have guessed this includes the main nav portion of a website.

<aside> – This is for elements that add importance to the main page but could be found on multiple pages. Think sidebars or newsletter signup boxes here.

<article> – This tag would include articles such as blogs or written pieces on a website.

<form> – A way to organize the contents of a web form.

<section> – One of the most common semantic markups, a section is a collection of related content that usually has a heading. For example, this would be the main part of your website underneath a main banner – it could contain keyword rich content, buckets, etc.

<table> – A way of grouping table elements together.

<img> – A way of indicating that an image is contained within the tag.

<fig> – This tag usually contains images or videos. It's content that isn't as important as something found in say, the <section>.

<figcaption> – This contains a caption if necessary for he <fig>. For example it may include text describing a photo.

<footer> – This is content in the very bottom of the site such as copyright information or a secondary nav, sitemap, etc.

These elements will usually appear in enwer browsers; however to ensure that they display properly in older browsers the display property for the stylesheet should be set as "block". In the next article we'll look at building a basic webpage with a few of these semantic elements.

Setting up a responsive design website in Dreamweaver CS6 part 2/2

When working with responsive design in Dreamweaver, it's crucial that you keep track of where you place your styles. The html build of a given page should stay the same but you'll be changing the sizes of text sizes, divs, etc for each stylesheet. In our setup we created the mobile stylesheet first so both the tablet and desktop viewports will inherit all sizes from this stylesheet unless you change these manually. To demonstrate what we mean, in the screenshot below you can see three different stylesheets (you don't touch the main 'styles' sheet in responsive design).

MQa1

In this image we're currently on the mobile stylesheet and it shows we have some styles defined for the mobile version of our page. If we were to look at these same styles for the tablet for example, the sizes would change because all of the elements for these given style would have to increase. It would look like this:

MQa2

Something else important to keep in mind when you're building a responsive project is that the majority of styles used for mobile will be built using percentages (%). This is because there are so many mobile devices and using a percentage will help your site render more correctly than it would if you used pixels. Using pixels could make your site render an incorrect size as it wouldn't have enough flexiblity.  This means that when you build divs, widths, heights, images, etc in your mobile stylesheet, these should all be based on the percentage of how much that particular style takes up on your page. For example, if in your Photoshop mobile design your page is 100% and you have a logo that's 35% of the page (you can use the Info panel and ruler in Photoshop to get these measurements) than you might have a wrapper set to 100% and a logo set to 35% in your mobile stylesheet.

Text sizes are also set using ems in the mobile stylesheet; like the percentages, these will ensure your text size will adapt to various mobile devices. Some people also use percentages for the text sizes too.

Using imagery in responsive design is a bit more tricky; it's a good idea to reduce the amount of images in your responsive site where possible – particularly backgrounds that can overstretch and become pixelated. If you do have to use images, try to make sure the image maintains the same size throughout your different sizes. Also consider hiding the image from the mobile viewport and then having it visible when the screen grows.

Lastly, remember that you'll be able to start using pixel-based measurements in your tablet and desktop viewports since these sizes are more constant (there are much more mobile device sizes which is why we used percentages for that stylesheet). Just remember that building a responsive project can be tricky; it's important to keep track of which stylesheet you're working on. Also plan ahead in your design and think about where you want certain elements of the page to sit in each viewport. Doing so will save you time in the long run.