Create css3 responsive website in dreamweaver

Error: You must enable a payment gateway to use Easy Digital Downloads

Error: No checkout page has been configured. Visit Settings to set one.

Error: No checkout page has been configured. Visit Settings to set one.

Hi All,

Today’s topic is on,

How to create css3 responsive website in dreamweaver!

Want to make a responsive website in dreamweaver?

CSS3 Responsive website in the sense – One website is built in a way that it will be displayed on multiple devices like Desktop computers, Mobile devices and Tablets. The same website will accommodate itself into the Mobile devices as needed using media query break points.

 

Want to get started with responsive website tutorial?

Here you go!

For this tutorial, we will need a good Responsive Website template. You’ll get lots of them online while you search for them. But, for this tutorial I have created a template on my own.

Here is the agenda for today’s tutorial:

  1. Creating/downloading a good looking css3 responsive website template
  2. Create markup using HTML4 or HTML5, CSS2 and CSS3 as required
  3. Apply Styles to turn the website to be responsive
  4. Validate the markup according w3 standards

Here are the steps to accomplish the task:

Step1: I have already create my own template as I told you earlier.

Here is the regular template

How to create css3 responsive website in dreamweaver - Pepfry.com

How to create css3 responsive website in dreamweaver

Description & contents: This is simple and yet a good looking website template create by me. Below are the contents of this template.

Main areas in this template

  1. Logo, Site title and description
  2. Banner section
  3. Simple Navigation menu
  4. Content section
  5. Footer containing a Small version logo and Copyright information

Responsive version of the template

How to create css3 responsive website in dreamweaver mobile version - Pepfry.com

How to create css3 responsive website in dreamweaver mobile version

Description & contents: This is the responsive version of the above template which is again created by me. This has undergone few modifications considering mobile devices.

Main areas in the responsive version of the template

  1. Logo -> Removed
  2. Site title and description -> Retained
  3. Banner section -> Removed
  4. Simple Navigation menu -> Converted to vertical position
  5. Content section -> Retained
  6. Footer containing Smaller logo and Copyright information -> Retained

Now that we’re ready with a beautiful and simple CSS3 responsive website template.

We’ll move on with the 2nd step

Please note: I’ll create the markup for the regular version of the template first and then convert the same to its responsive version then and there. So that, you won’t be in a situation at the end of the tutorial as to what was done earlier above.

Step2: Creating markup

Basic code structure for this website

What you have to do now?

  1. Create a new HTML page using Dreamweaver or any other HTML editors of your choice
  2. Paste the above code after the </head> tag in your HTML page.

Don’t know to create a new HTML page using Dreamweaver? View my previous tutorial on how to create HTML pages using Dreamweaver.

Basic Styles for the code structure above:

What you have to do now?

  1. Create a new Style sheet using Dreamweaver or any other HTML editor of your choice
  2. Paste the above Styles within that style sheet which you just created
  3. Attach/add the style sheet to the web page that you created earlier

Don’t know to attach CSS file? Visit this tutorial on – How to attach a CSS file or a Style sheet in your HTML file.

Please note: When you consider a CSS3 Responsive website – One big thing you have to keep in you mind is that – You need to apply the <meta> tag in the <head> section of your HTML page, that tells the browser about the device on which your Website is displayed and information like device-width and initial scale/Zoom etc…

So, I advice – you all consider applying the following <meta> tag before your </head> tag.

<meta name=”viewport” content=”width=device-width; initial-scale=1.0“> 

Responsive Styles for the code structure above:

What you have to do now?

  1. Just add the above responsive Styles below the regular styles that you already pasted.
@media screen and (max-width: 480px)

The above is the CSS3 media query and the break-point used to provide response to the website when viewed on Mobile devices.

Guys, if you where successfully able to put up the above markup and styles together in your HTML file and Style sheet – then, you might be lucky enough to see that stunning output. See below screenshot, it has already taken our template’s shape.

How to create css3 responsive website in dreamweaver layout taken its shape - Pepfry.com

How to create css3 responsive website in dreamweaver layout taken its shape

Great then, guys if you saw the above view in your browser - we’ll move forward creating the inner contents for the above created basic structure.

From now on – I won’t elaborate things too much, that might just make you feel boring ;-)  I’ll be right to the point, “Hitting the nail exactly on top of its head without miss”.

1st comes the Header section:

Header again has 3 more section within it:
  1. Logo holder
  2. Banner
  3. Navigation menu

1. Logo holder:

Markup

What you have to do now?

  1. Just place the above markup within the following comments <!– Header –> and <!– Header –> which you already have it in your HTML page. You have to copy and paste markup starting from <!– Logo holder –> up to <!– Logo holder –> as shown above.

Regular Styles

Responsive Styles

What you have to do now?

  1. Just replace the old styles with the above new styles. The new styles comes updated with new responsive roles like:
    • Hiding logo when viewed on Mobile devices and Tablets

Change observed:

a. #Logo

b. #Tagline

2. Banner:

Markup

Regular Styles

Responsive Styles

What you have to do now?

  1. Paste the above code to your regular style spot and the responsive styles to its respective place below other responsive styles in your style sheet.

2. Navigation:

Markup

Regular Styles

Responsive Styles

What you have to do now?

  1. Paste the above code to your regular style spot and the responsive styles to its respective place below other responsive styles in your style sheet.

As this ends our Header section – we’ll need to have a look at our HTML page on browser. If you guys have managed to assemble the above piece of codes – then, you might see the desired out put as shown below:

 Regular version

How to create css3 responsive website in dreamweaver header and nav - Pepfry.com

How to create css3 responsive website in dreamweaver header and navigation completed

Responsive version

How to create css3 responsive website in dreamweaver header and nav mobile version - Pepfry.com

How to create css3 responsive website in dreamweaver header and navigation completed – mobile version

2nd comes the Content section:

Markup

What you have to do now?

  1. Replace the previous markup starting from <!– Content –> to <!– Content –> with the above updated markup.

Regular Styles

Responsive Styles

What you have to do now?

  1. Paste the above code to your regular style spot and responsive styles to it respective place below other responsive styles.

As this ends our Content section – we’ll need to have a look at our HTML page on browser. If you guys have managed to assemble the above piece of codes – then, you might see the desired out put.

 3rd comes the Footer section:

Markup

What you have to do now?

Replace the previous markup starting from <!– Footer –> to <!– Footer –> with the above updated markup.

Regular Styles

Responsive Styles

What you have to do now?

  1. Paste the above code to your regular style spot and responsive styles to it respective place below other responsive styles.

 Last and final step is: Validation

You need to validate the code according to W3 standards. If you have Dreamweaver with you – then you can validate the markup locally using Dreamweaver’s built-in validate tool. If not, you can get some program online that can do the job for you.

Guys, as said earlier – I feel that I haven’t dragged this too much and have kept it quite simple. If you all were able to understood what I did – then you might have been successful in accomplishing this task. If that’s the case – You should see a complete website page as seen above at the beginning.

Great then – Here is the gift: Download responsive website tutorial free download.

 

Want to learn?

Should you have any Queries – just write back to me or leave a comment below in the comment section. I’ll get back to you asap.

2 thoughts on “Create css3 responsive website in dreamweaver

Leave a Reply to Rajeshwari Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">