Posts in Category "Dreamweaver"

Dreamweaver FAQ : How do I center align a web page in Dreamweaver?

Purpose of this tutorial

Create a page in Dreamweaver and center-align the contents of the page. If you are looking for the code to center your page, dive directly to the section “Center the Content”. However, if you are new to web design and are getting started with Dreamweaver, I suggest that you go through every step of this tutorial.

Can I do it without knowing CSS?

No. If you aren’t conversant with CSS, I advise you to take a quick class on CSS and come back. You don’t have to go into a lot of depth, just read the essentials. It should not take you more than an hour or a couple of hours at the most.

How do I center a page?

You create a container (DIV) for the other DIVs on the page. When you center-align the container DIV, the rest of the content gets center aligned as well. Simple! While it is not necessary that you use Dreamweaver for the tutorial, some of the steps that are mentioned are very specific to the use of this software. If you are conversant with HTML and CSS, you will do just fine without these steps using the editor of your choice.

Create a new site

Before we proceed to create a page that centers itself with respect to the display, we will first create a site to store all the files we will be creating hereafter.

Before you proceed, create a folder or directory on your computer called FAQ_Tutorials. I am on a Windows computer, and I have created this in my C drive.

  1. Select Site > New Site.
  2. In the Dialog Box that appears, enter the following information.
    1. Site Name: Tutorials on FAQs
    2. Local Site Folder: Click the Browse or Folder icon. Navigate to the FAQ_Tutorials folder on your computer. Click Select Folder.
  3. Click Save.

lesson1_site_creation

That was simple! You now have created a Site with the name Tutorials on FAQs, and the files for this site will reside in the FAQ_Tutorials folder. Great job!

Create a new page

We will now create a web page that we will save in the FAQ_Tutorials folder.

  1. Just to make it easier to manage your files, create a subfolder called “FAQ1_center_webpage” in the FAQ_Tutorials folder.
  2. In Dreamweaver, select File > New. Ensure that the options Blank Page, HTML, and <none> are selected in the New Document Dialog that is displayed.
  3. Click Create.
  4. Select File > Save As.
  5. Navigate to the FAQ1_center_webpage folder.
  6. Save the file with the file name “centering_a_webpage”
  7. Click OK.

Create the Container and Header

For the web page, we will create a container div that will hold the contents of the page. When we center the container, all the contents inside get centered as well.

In the container, we will include three DIV tags: Header, Body, and Footer.

  1. In Title, replace “Untitled Document” with “Centering a web page”
  2. In the Insert panel, select Structure from the menu.
  3. Click Div.
  4. In the Insert Div dialog, enter container in the ID field. Click OK.
  5. Delete “Content for id “container” Goes Here”.
  6. Ensure that the cursor is within the Div. Click Header in the Insert panel.
  7. In ID, select Head and click OK.

You now have a parent container with the Header div tag inside it. Great going!

Style the Header Tag

Let’s style the Header tag so that we can differentiate it from the other Div tags that we are going to create. And for this, you guessed it right; we are going to need some CSS love.

We will style the header to give it a blue background color with white text.

  1. Just after the Title tags in the code view, we will enter the style tags <style></style>.
  2. In between the tags, we will enter this piece of code:

#head{

                    background-color:blue;

                    color:white;

                    }

  1. Click in the Design view. Do you see a blue box with white text in it? Good!

Create the body and the footer

Let’s go ahead and create the other two DIVs below the header.

  1. Ensure that the cursor is after the closing div tag for the header (</header>).
  2. Click Div in the Insert panel.
  3. In the Insert Div dialog, select After Tag and <header id=”head”> from the Insert options.
  4. In ID, enter body, and click OK.
  5. In the Insert Panel, click Footer.
  6. In the Insert Footer dialog, select After Tag, and <div id=”body”> from the Insert options.
  7. In ID, enter foot, and click OK

You have now created a container DIV with three child DIVs (Header, body, and Footer). When you center the container DIV, all the three child DIVs get centered as well.

Style the body div and the footer tag

Follow the procedure described for Header in “Style the Header Div” to add styles for the body and footer Divs. Add the styles below the style for the header.

#body{

                    background-color:yellow;

                    color:black;

                    }

#foot{

                    background-color:red;

                    color:black;

                    }

You should now see three boxes blue, yellow, and red one below the other. If you don’t, go back and see where you went wrong.

Center the content

Now that we have the contents ready, we are going to center them with respect to the browser they are displayed on.

This is what we will do: Define a width for the container, set the top and bottom margins to 0, and the left and right margins to auto. This clears the space to the left and right of the margin allowing the browser to calculate the margin.

While you can add the style for the container tag anywhere, I suggest that you put it above the style for the header because this is the parent tag.

#container{

                    width: 980px;

                    margin:0 auto;

                    }

Preview the page in a browser

  1. Select File > Preview in Browser.
  2. Select the Browser in which you want to preview the page.

The contents of the page should now be center-aligned. Some of the older versions of Internet Explorer might not work with this code. As a workaround you might have to create a class for the body and center-align text. Unless there is a real necessity to support really older versions of browsers, this step is not necessary.

body {                          

text-align:center;

                    }

 

Some useful notes on linking CSS files

In this tutorial, we have used CSS on the same page as that we have designed. However, it is not a good idea to have CSS on every web page if your website has many pages. A better idea is to create a single or few CSS files and link it to the HTML pages. That way, you can make changes at one location and have them reflected across multiple pages.

For example, you can create a CSS file called theme.css and link it to your HTML page.

<head>
<link rel=”stylesheet” type=”text/css” href=”theme.css”>
</head>

Here, the theme.css is the name given to the CSS file. You can choose any name you want. The CSS file here is on the same path as the page to which it is linked. However, if your CSS file is within a folder called CSS, you will have to specify the path as say, “href=/css/theme.css”. See http://compugoddess.com/relative-vs-absolute-links/ for information on relative paths.

FTPS support in Dreamweaver CS5.5

FTPS (FTP over SSL) provides both encryption and authentication support as compared to SFTP that offers only encryption support.

When using FTPS for data transfer, you can choose to encrypt your credentials, and also the data being transmitted to the server. In addition, you can choose to authenticate the server’s credentials and connections. The credentials of a server are validated against the current set of trusted CA server certificates in the Dreamweaver database. Certificate Authorities (CAs), which include companies like VeriSign, Thawte, and so on, issue digitally signed server certificates.

For more information, see http://help.adobe.com/en_US/dreamweaver/cs/using/WSee8adad8a8c1990b-6cb1a36e1266d204f20-8000.html#WSeffff8bffc802084-1de4b49712def0f4ecb-8000

Dreamweaver’s integration with jQuery Mobile and PhoneGap

Dreamweaver’s integration with jQuery Mobile and PhoneGap helps you create and package web applications for deployment on Android™ and iOS-based devices.

To create a mobile application for Android or iPhone™ mobile stores, do the following:

  • You can use any of the starter pages to create your Web application. However, if your web application, when deployed as a mobile application, accesses features native to mobile devices, use the jQuery Mobile (PhoneGap) page.The jQuery Mobile (PhoneGap) starter page contains the phonegap.js file in addition to the other jQuery Mobile files. The phonegap.js file contains the APIs required to work with the native mobile features such as GPS, accelerometer, camera, and so on.
  • Create a package of the application. Dreamweaver uses PhoneGap SDKs to create the package (.apk file for Android/.xcodeproj for iPhone/iPad).
  • Use the APK or XCODEPROJ file to deploy your web application to multiple platforms.

For more information, see

http://help.adobe.com/en_US/dreamweaver/cs/using/WSeffff8bffc80208478c8d43312e240fe0ad-8000.html

www.adobe.com/go/dw_mobileapp_sampleapp

Using Dreamweaver with jQuery Mobile to create web applications

Dreamweaver’s integration with jQuery Mobile helps you quickly design a web application that works on most mobile devices while adapting itself to the dimensions of the device.

For more information, see http://help.adobe.com/en_US/dreamweaver/cs/using/WSeffff8bffc802084-16bff63f12dbccd7e7c-8000.html

What’s new in Dreamweaver CS5.5

Dreamweaver CS5.5 provides a bouquet of features that help make it very simple for you to transition your current site to mobile platforms and devices.  Increased support for CSS3, FTPS support for better security, and W3C validation support are the other wonderful features that make Dreamweaver CS5.5  a must buy.

For more information on features that are new to Dreamweaver CS5.5, see:

http://help.adobe.com/en_US/dreamweaver/cs/using/WSe8b0455615e2dc47-1c751e8b12f0330ea27-8000.html

http://www.adobe.com/devnet/dreamweaver/articles/whats-new-dwcs55.html

Media query and Dreamweaver CS5.5

There was a time in the history of computers when users did not have too many monitors to choose from.  That was very good for web designers because there were only so many resolutions to cater to. The rules ensured that that their sites catered to the least possible resolution and extra spaces were filled up with beautiful backgrounds as users switched to higher resolutions. As monitor sizes increased and users’ preferences for resolutions changed, the rules changed too. Nothing dramatic – loosening a nut here, tightening a bolt there, and it was all done.  And Dreamweaver pretty much had the design aspect covered on all fronts.

With the advent of Web 2.0, the websites got way more smarter than their static HTML ancestors. There was more coding than what a designer could probably handle. Most designers either took to coding, or started working with teams that helped bring intelligence to design.  It was but natural for Dreamweaver to provide increased support for developers in the code view. ColdFusion, ASP, JavaScript, database connectivity – Dreamweaver tried to accomodate developers of all hues.

From design to code and back to design – the advent of mobile devices changed the rules yet again.  While designers were well accustomed to designing for increasing resolutions, with mobile devices they had to contend with shrinking monitor sizes. The websites not only had to display well on desktops but equally well on mobile devices that had no standard monitor size.  It would have been neigh impossible, if not downright foolhardy,  for designers to create a website for each resolution.

It was pretty obvious that the way forward was going to be driven by style sheets.  You create a different style sheet for different monitor size resolutions to help customize display on various devices.  But how would a browser know the CSS to use for displaying the site? Enter Media Query, a piece of code on the site that specifies the CSS to be used for a range of resolutions.  Media Queries use the reported dimensions of the monitor size to specify the CSS for the device.

It is but obvious that a website will look very different on the devices that it is displayed on – tablets, desktops, and mobile phones for now.  With media queries, you can have a single functional website that works the same but looks very differently on the devices that it is used. In Dreamweaver, you can create a site using media query, and also preview the site as it appears in devices with various resolutions. Dreamweaver helps ensure that when your site goes live, it looks and behaves exactly the way it did when it was previewed.

For information on using media queries in Dreamweaver CS5.5, see http://help.adobe.com/en_US/dreamweaver/cs/using/WSeffff8bffc80208443aaa2ab12db791fb9b-8000.html

Applying border image to objects in Dreamweaver CS5.5

Using the border-image property in CSS, you can use a single image to generate a border for a box object.

Out of the five properties specified by the W3C for border-image, Dreamweaver supports the following three:

  • Image Source : Location of the image.
  • Image slice:  Treating the image as sliced into 9 sections.
  • Repeat-x and Repeat-y: 
    • Repeat – Repeats/tiles the image across the edge
    • Stretch – Stretches the image across the edge
    • Round – Tiles the image so that only a whole number of images fit. If a whole number cannot be accommodated, the image is stretched

The border-image property has the following format (webkit – supported by Dreamweaver Live View):

-webkit-border-image: url[border image-source] [border image –slice] [border image-repeat]

Example: -webkit-border-image: url(border-image.png) 50 50 50 50 repeat round;

Note that the pixels are specified without px being suffixed. For percentage, you must add the suffix “%” to the values.

The border-image property has the following format (Mozilla support):

-moz-border-image: url[border image-source] [border image –slice] [border image-repeat]

Example: -moz-border-image: url(border-image.png) 50 50 50 50 repeat round;

  1. In the CSS Styles panel, click Add Property.
  2. Select border-image from the menu.
  3. Click the “+” icon.
  4. Specify the source of the image.
  5. Specify the image slice values.
  6. Specify how the image has to be added to the edges using the Repeat-x and Repeat-y values.

Using border-radius CSS3 property in Dreamweaver CS5.5

You can apply rounded corners to box objects using the border-radius property. Specify the corner radius for all the corners of the box to create a rounded box.

The border-radius property has the following format:

border-radius: [corner radius – top left] [corner radius – top right] [corner radius – bottom right] [corner radius – bottom left];

Example: border-radius: 5px 6px 7px 8px;     

Dreamweaver Live View supports the W3C implementation of this property.

  1. In the Border category of the CSS Styles panel, click Add Property.
  2. Select border-radius from the menu.
  3. Click the “+” icon.
  4. Enter values for the corner radius for the four corners of the box. Select Same For All if you want to apply the same value to all the corners of the box.

Using box-shadow CSS property in Dreamweaver CS5.5

The box-shadow property in CSS allows you to apply single and multiple drop shadows to box objects.

Specify the following parameters for the box shadow property:

Color : Color of the shadow
Offset : Position of the shadow with respect to the text object.
Blur radius (optional): Creates an authentic feel for the shadow.
Spread radius (optional): Allows the shadow to scale to the size of the box object. A positive value causes the shadow shape to expand in all directions, while a negative value contracts the shadow shape. 

For more information, see the W3C website.

The box-shadow property has the following format (webkit – supported in Live View):

-webkit-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -webkit-box-shadow: 2px 1px 5px 7px #0C0; 

The box-shadow property has the following format (Mozilla support):

-moz-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -moz-box-shadow: 2px 1px 5px 7px #0C0;

In addition, CSS3 supports the inset property. The ‘inset’ value, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it). 

The box-shadow property has the following format (webkit – supported in Live View):

-webkit-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -webkit-box-shadow: 2px 1px 5px 7px #0C0;

The box-shadow property has the following format (Mozilla support):

-moz-box-shadow:  [x-offset] [y-offset] [blur radius] [spread radius][color];

Example: -moz-box-shadow: 2px 1px 5px 7px #0C0;

In addition, CSS3 supports the inset property. The ‘inset’ value, if present, changes the drop shadow from an outer shadow (one that shadows the box onto the canvas, as if it were lifted above the canvas) to an inner shadow (one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it).

To apply the box-shadow property to an object, do the following:

  1. In the Border category of the CSS Styles panel, click Add Property.
  2. Select box-shadow from the menu.
  3. Click the “+” icon.
    Enter values for X-Offset, Y-Offset, Blur Radius, Spread Radius, and Color. For color, you can use the color palette to choose a color.

Using Text-shadow in Dreamweaver CS5.5

The text-shadow property allows you to apply single and multiple drop shadows to text objects. For more information, see the W3C website.

Specify the following parameters for the text-shadow property:

Color: Color of the shadow.

Offset: Position of the shadow with respect to the object. The X-offset specifies the horizontal distance. Negative values place the shadow to the left of the text. The Y-offset specifies the vertical distance. Negative values place the shadow to the bottom of the text.

Blur-radius (Optional): Creates an authentic feel for the shadow.

The text-shadow property has the following format:

text-shadow: [x-offset] [y-offset] [blur radius] [color];

Example: text-shadow: 2px 2px 4px #066;

You can apply the text-shadow property more than once to the same object.  In this case, the CSS panel displays only the first instance of the property although both instances are applied.

Example: text-shadow: 2px 2px 4px #000, -2px -4px 4px #099;

To apply Text-shadow using the CSS Styles panel, do the following:

  1. In the Show Only Set Properties View of the CSS Styles panel, click Add Property.
  2. Select text-shadow from the menu.
  3. Click the “+” icon.
  4. Enter values for X-Offset, Y-Offset, Blur Radius, and Color. For color, you can use the color palette to choose a color.