As handheld devices become more and more common, users will be viewing web content on smaller screens which means web developers must have a way of building webpages that can be viewed across multiple devices. Enter responsive design: A way to code a website so that it will shape to fit various screen sizes. Responsive design isn't just about designing a completely different website though; it's more about deciding what you need to keep for the viewer to see when the screen size minimizes.Â Some websites have a totally different mobile site than their desktop counterparts – responsive design is more about adjusting a current desktop website so that it segues smoothy into a smaller site such as for a mobile device.
The basic setup of a responsive design website in Dreamweaver has one primary html file per page that pulls CSS styles from however number of devices you wish to have your site resize too. In this example, we'll start a build for a site that has three common devices: Desktop, Tablet & Mobile. We'll also setup our stylesheets in order to accommodate the different sizes for these devices.
To begin, it's a good idea to setup your media queries and link these to your CSS files. This will ensure that you can build the site in one html document and have the site change and adapt as the user switchs sizes. To do this, choose Insert > Media Queries in Dreamweaver.
This should open up a screen that looks like the one below:
From here, click the button for site-wide media query file and select 'Specify' and create a new stylesheet in your CSS folder (we called ours css/styles.styles). Before doing this though be sure to check the 'Force devices to report actual width' box so that the mobile styles render correctly after you begin to code your site.Â After defining this stylesheet it's time to begin adding media queries which will ensure your site can be edited in different stylesheets that will instruct your code to resize based on the user's viewing device. This is done by clicking the '+' button.
Doing so will enable you to enter more information about this query in the panel below. Define a min/max setting as this tells Dreamweaver that the device will have to fall within these size numbers to show a particular view of the site.Â Also name the query with something that will help you identify which one it is. Here are some standard sizes you can use for the three viewports (mobile, tablet & desktop):
Mobile: max-width 767 px
Tablet: min-width 768 px
Desktop: min-width 992 px
For example, as soon as the user's device begins viewing the site at anything beow 767 px, the site will reflect whichever styles you specified in the mobile stylesheet. Be sure to link a new style sheet for each query as well. Example, css/tablet.css.
Here is a screenshot of what we entered for mobile. Be sure to click the add button and not the OK button at the bottom when you add the other viewports though or it close off this screen.
Here you can see we've finished adding our three viewports:
Now there's one last step to do in the initial setup: We have to edit the site wide media queries so that we don't repeat ourselves in each layout. This means that if you made all of the site layouts start with the mobile information, then you will only have to change the styles for a given size. Otherwise this would make our job quite hard. To set this up, close the media queries screen and go into the main stylesheet for the entire website. In here remove the text highlighted below and be sure to leave the semi colon.
It should now look like this:
In our next article we'll continue to build on working with responsive designs by looking at how to work with sizing web elements for responsive websites.
To begin programming the behaviours, we'll open up the behaviours panel under Window > Behaviours at the top of Dreamweaver. Depending on the type of workspace you're using in Dreamweaver, this should open up the behaviours panel on the far right-hand side.Â We're using the 'Classic' workspace for our example. It may already be open as well, with a tab at the top of this panel:
Now we'll click the first thumbnail image below the large image, then click the "+" button in the behaviours panel to bring up a list of commands. In here is a plethora of various effects you can add to elements on your webpage. For the gallery we'll be using the 'Swap Image' command so select that one which opens up a screen like this:
In here we want to make sure our thumbnail image (remember we labelled it with an ID of "T1") will pull up its' larger image counterpart when a user hovers their mouse over the thumbnail. To do this we'll make sure we select the "Main"image under 'Images' and we'll also browse our folders to locate the larger image we want to be displayed.Â This is telling Dreamweaver that the main image should display the large image we select when a user hovers over the smaller thumbnail. Also be sure to keep both options checked in the panel:
After doing this, some instructions will appear in the Behaviours panel telling Dreamweaver how to display this image. Currently the command is that when a user places their mouse over the image, it will show the larger image on the screen:
You can also click the arrows on these commands to change the effect if you wish. For our gallery though, the mouse over effect is what we want so we'll leave it as is. Again, we'll keep going and select the second thumbnail "T2", go into the Behaviours panel and select 'Swap Image' and in here we'll select the Image 'Main 2'. We'll then click browse again and find the large image that corresponds with the 2nd thumbnail. After we've completed going through each thumbnail we have our finished gallery which allows users to hover over an image to display it larger in the main display window:
In the gallery above, you can see there is a one main image in the center and some smaller thumbnails in the squares below. We want our users to be able to hover over one of the smaller thumbnails and then have the larger image show up in the main display window. The trick to starting this is that you'll need two versions for each image you wish to include in your gallery: One larger image and one smaller image that will act as a thumbnail.
An easy way to organize galleries on your webpage is to use a table. To insert a table, go to Insert> Table on the top of Dreamweaver which will open up a screen like the one below:
In here you must specify the amount of columns and tables required to create the table. For ours, we used a width of 600 pixels, adjusted the cell padding to 1 pixel to give some added space between the photos and used an 8 row and 3 column format. We used 8 rows because we're going to merge some of the top cells together to contain the larger image. 3 columns worked for this gallery because we have 12 smaller images we need to accommodate and these will fit well into 12 columns. After pressing OK the table is inserted into our page:
To merge the upper rows, we'll highlight all of the ones we want to merge and in the bottom panel select the merge option (highlighted in red below) to merge these rows together. In the large space now created, we'll then insert the large image of a car:
Then in the smaller table boxes below, we'll place a thumbnail in each box:
Now that all of our images are in place, we need to code the Behaviour. But before doing this, it's important to give each image an ID tag so that when we begin coding the Behaviour, we'll be able to find each image. To give an image an ID tag, look for the ID space in the Properties panel at the bottom of Dreamweaver:
Right now the large image has an ID of "Main" because we selected our main large image and then labelled this as Main to separate it from the smaller images. Similarly our thumbnails have ID's of "T1, T2, etc" to denote these as thumbnails. This ID isn't the same thing as the image name however; it's just the ID we name it in Dreamweaver. Our images still retain the same names we gave them when we saved them in our images site folder.
In our next article we'll look at how to program this behaviour so that hovering over one of the smaller thumbnails will pull up the larger image in the larger display area.
In our last article we showed you how to create a basic web form using HTML 5 in Dreamweaver. In this article we'll expand further on that knowledge by showing you a few other common form elements used on websites.
Forms are a useful way of gathering information about your users. Another common way of gathering information is by using buttons, lists and selection boxes that prompt a user to make a selection. This selection then gets sent over to the server with the options they select. Below is the code for a basic radio button form asking the user for a bit of information. The "type" tells Dreamwever that you wish to display a form comprised of radio buttons. You'll recall from the last article that the "name" attribute is sent to the server with the value the user selects. The "value" attribute tells the server which option the user can select and which one has been selected. Finally, we used an additional attribute of "checked" for one of our options so that when the user first visits the screen he/she will see that they're able to select options.
Of course, you can also use checkboxes too. In the example below, all we did was change the input type to "checkbox" instead of the previous radio option and you'lls ee the options now become checkboxes instead. Checkboxes are sometimes more useful than radio buttons as they grant the user the ability to uncheck options or to check multiple options instead of just one.
In your websites you may also want to use dropdown lists on your forms. For this you'll need to use a "Select" element that contains option elements. These option elements are what the user can select from your drop down list. Giving it a name will also help the server to identify your dropdown list.
Another useful form input isÂ "type=file" which can allow your users to upload a file with their form. This is done by adding an input type of "file"Â and "submit" which ensures the file will be sent to the server. Also important to not here is that in order to use this form input, you must also specify a method of "post" since sending files via the HTTP method will not work.Â Below we added a simple browse box to our previous dropdown menu.
The last form input we'll cover in this article is the popular search box which is common on many websites. The search input is created by using an input type of "search" and the "submit" type again as well.Â In our example we also added placeholder text that will let users know they can type search queries into the box.
Of course, these forms can also be styled to make them look completely different. We'll look at styling the forms we made in both articles with CSS in a future post.
Forms are a useful way to collect information from users who visit your webpage. They may be as simple as a search box or e-mail form or as complicated as an application with multiple options for the user to select. Forms can be styled with CSS like any other element on your page and can be used on any page in any area of that page.
Below is an image of a basic form we used on a website as well as the HTML we used to style this form. In this article we'll look at how we coded this form using basic HTML 5 and in the next article we'll look at some other commonform elements as well as other common form attributes and styles.
As you can see, the HTML for our form contains a few important pieces of information:
1. It contains an opening <form action> and closing </form> tag that will contain all elements we use to structure the form.
2. Our form carries the important "action" attribute that's used to indicate which page will receive the information once the form gets submitted. In this case, we used a sample site but you'll probably have a database setup on your own hosting server.
3. We also used a "method" attribute to indicate we wanted to use "get" which means the values submitted by the user get added to the end of the URL in the action attribute and sent to that site.Â Another common method is the "post" method which is used to data where a user uploads a file, enters password information or enters data in a long form.
4. Our form also conatins input controls which help to clarify the type of form being used. Our type is "text" which means a user can enter text in the field. We also used a "name" attribute. This is important because when your form gets sent to the server, the name will help you identify which form was sent (a website may contain multiple forms all retrieving different data). We named our form "fullname2" for the time being.
5. The "placeholder" attribute is used if we want to have a name automatically appear in one of the fields (such as asking a user to enter their e-mail as seen in our example) and the "max length" attribute controls the maximum amount of characters a user can enter in at one time.
6. Our form also includes a select element that states we want to have a dropdown box in our form. This is will allow users to select pieces of information with an arrow and is broken into "option value" attributes that each contain a piece of data (see screenshot below)
7. Our form has a comments box as well to allow users to enter information in when they submit the form. We coded this by adding a "<text area>"element that states we wish to use a comments box with a max length of 600 characters. This ensures the user will have enough space to enter in their necessary comment.
8. Finally our form wouldn't be complete without a "submit" input type that will allow our form to be submitted to the server. We also used a value of "submit" to ensure that text is understood by the user and the browser.