Ten steps to building a web photo gallery with Adobe Dreamweaver CS6

Adobe Dreamweaver is a web production tool used to create. Websites and mobile applications using standard web technologies (HTML, CSS and JavaScript) Dreamweaver CS6 includes full support for HTML5 and CSS3, which allows you to fluid layouts, smooth transitions between content and content that is translated to create. In web and mobile applications

If you are new to building websites, or if you are an experienced developer, Dreamweaver is one of those tools that is hard to live without. Instead of a set of tools and utilities, you can use the visual characteristics prior coding tools and server-related tools in Dreamweaver to accelerate development.

In this article, I walk you through some of the new features in Dreamweaver CS6 and establishes a basic workflow to create a simple website. You will build a website photo gallery, including a home page, detail page, and a navigation bar (click Figure 1 for an example implementation) a template. Along the way, you will learn how to use the new feature. The fluid grid, CSS3 transitions and Dreamweaver templates

Figure 1. Liquid design example project is displayed on the desktop (left) and (right) cell sizes (click to explore the place).

Step 1: Planning the website

The first thing to do is to define the pages that should be included in the website and the visual theme of the pages is used for branding and design. This can be quite an elaborate process for complex web pages, but for the purposes of this tutorial, the gallery follow a very simple design (see Figure 2).

Figure 2. Overview of the design template website.

Being the gallery consists of a single model that is used to build. A homepage and detail pages The pages all follow the same design, it is a good idea to use. A Dreamweaver template

Step 2: Create a new site in Dreamweaver

Dreamweaver site organizes projects and displays the files and Assets panels so you can easily organize the content and distribution. In this step, you can configure the website folder and then a new site in Dreamweaver.

Before you begin:

1. Download the project files (ZIP, 9 MB) and unzip the file. Save the files to this folder and use the assets      of the project to follow. Steps of the tutorial

2. Download the complete project files (ZIP, 9 MB) to use as reference. You can deconstruct these files if     a problem occurs.

3. Download the free trial version of Dreamweaver CS6 and install the application if not already done. 

4. You can also use your Creative Cloud membership to download and install the product.

Create a new file and start the project:

1. Open Dreamweaver and choose Site> New Site.

2. In the Site Settings dialog box, enter the Photo Gallery Site Name field and click the folder next to the          field of the local folders to the site dwcs6_project folder, which is included in the project files find                  download only.

3. Click Save to create the site. Note that the lists and items panels are now reflect the content of the web project folder. Note that we have the content delivered by _source folders and images will use.

4. Before you begin, take a moment to the Dreamweaver workspace (see Figure 3) to explore. The main        area of ​​the screen changes depending on whether you are looking for in Code view, Design view, Split          view, or in Live View mode. This area is where you will find your work. The panel houses at the bottom of   the screen is context sensitive and displays properties of the selected objects. Files and active panels can       manage. Files on the website The CSS Styles panel allows you to manage through the website. Text and       formatting styles The size of the mobile, tablet size and scope desktop buttons at the bottom of the screen in   Design view, you can check your work in standard sizes.

5. Close the empty HTML file when you are finished.

Figure 3. Dreamweaver CS6 workspace.

Step 3: Place the web template with Fluid Grid Layout

The characteristic Fluid Grid Layout is new in Dreamweaver CS6. Provides an easy way to use to create page layouts. Liquids that can occur at any screen or device size CSS In this step, the base web template for you:

1. choose File> New Fluid design grid to the New Document dialog box. Note that the options include fluid grid layout adjustments for mobile, tablet and desktop sizes. The concept is that you set up a grid in a div tag on page fluent cover. Each of the three formats can be defined for each div tag. Your own CSS In this step you can change. The number of columns, line spacing and margins for each design

2.Change column width of 25% to 15%, and the configuration of the range of 90% for the three different sizes (see Figure 4) to change.

Figure 4. Options fluid grid in the New Document dialog box.

3. When you click the Create button, Dreamweaver generates a configuration file to the CSS CSS grid storage while you work. Click Create and save the CSS file named GalleryTemplate.css in the Assets folder.

4. Note that the design view updates, and now you see the grid layout in the size of the mobile screen.

5. Save the file to the root folder of the project called layout.html. Dreamweaver will ask you where you want the dependent CSS and JavaScript files that go along with the fluid grid page copy. You do not have to do with these files, but something should be included on the site. Search the Assets folder and click Copy.

At this point, the page that is displayed as a series of column guides and moisture distribution div tag to create a row of the grid.

Step 4: Add div tags and content placeholder

HTML is simply a tree of nested tags that defines the relationship of the content of a web page. In this example, the HTML code that appears in the browser starts the body tag, followed by nested <div> tags and closing </ body>. A div tag is an organizational element is used to group content on the page in a logical manner. CSS styles can be assigned to each div tag to format text and add design styles, such as the position, background and borders.

In this step, you create as rows in the grid and add content placeholder three div tags:

1. Select the text in the existing div tag and delete. This div tag big picture.

2. Place the cursor on the Add image type here as a placeholder for the template and the div tag.

3. Click the Split button in the upper left corner of the work area to both the Code and Design views give. It is often easier to edit and correct problems in the code view.

4. Add a div tag, select the LayoutDiv1 in code or by the tag selector (see Figure 5) and choose Insert> Layout Objects> Div Tag Fluid design grid, click OK to accept the default settings. Select previous div tag for entering the following div tag is an important step to ensure that the labels are beside each other in the hierarchy of the code.

Figure 5. Two ways to select. A div tag

5. Remove the text and type new div tag Add text here as a placeholder.

6. Add another fluid grid to add. Div tags to another row below the row of text This div will hold. A series of thumbnail images

7. Click Insert the new div tag and select> Image. Locate the file image1.jpg images / thumb folder and click OK. Enter text in the alt 1 when prompted and click OK. Repeat this process for the remaining nine thumbnails. You can also change the image to the div tag the files or the Assets panel, or you can add the images by copying and pasting the <img> in Code view while updating the reference file.

At present, the template has all the elements necessary to the pages of the site to produce, but could use some style format to refine the design (see Figure 6).

Figure 6. The design of the full div content placeholder.

Step 5: styles in the layout format

CSS styles to format text and visual presentation design div. Separating the layout definition defining the contents of the div tag design allows flexible workflow.

In this step, you format the background color, font styles, the div tag design styles and thumbnails styles to format the template:

1. Choose Modify> Page Properties to open. Properties page dialog Use Properties page to define. The General Settings page

2. Update the following properties in the Appearance category (CSS) and click OK:

• Page source: Trebuchet MS, Arial, Helvetica, sans-serif font or other
• Size: 16
• Text color: # FFF
• Background color: # 333

3 Add more styles of the body tag to center align the content and add some padding higher. To do this, click at the top of the CSS Styles panel give you the All button to make all style rules in place. Click the line <style> body under the tree control, the background-color style that just added to the page setup properties.

4 To add a property, click Add Property button, select the property from the menu and enter a value in the resulting field. Add the following properties:

• text-align: center
• padding-top: 20px

5. Fluid page design grid with a parent div tag with all other div tags. Add styles to select parent div in the code or click the design guide external CSS box in Design view. Click the button in the CSS Styles panel and add the following styles:

• border: 8px solid # 000
• background-color: # 000

Tips: The design of the fluid network is composed of three sets of CSS, one for each size of the device. You always want to start your design in cell size, because the styles you set here is taken over by the other two designs.

6. Click anywhere on the second div tag to select it. Please note that the styles of the div tag appear in the CSS Styles panel. Add the following styles:

• padding-top: 12
• padding-bottom: 12

7. Add some space to create the images by its style to spare. Click the thumbnail to select it and click the New CSS Rule button at the bottom of the CSS Styles panel. Click OK in the New CSS Rule dialog box. Add the following styles in the CSS Rule Definition dialog box, click the category OK to apply the style:

• border: 1px solid # 000
• Coverage: 0.75

8. Save the file.

At this point, layout.html page is ready to be converted into a Dreamweaver template (see Figure 7).

Figure 7. A website template built cell size CSS formatting applied.

Step 6: Creating a Dreamweaver template editable regions

This website is purposely designed to be very easy with the gallery pages that share the same. Design Rather than re-do all the work for each page or copy and paste code, you can create. A Dreamweaver template (DWT) A Dreamweaver template contains editable and non-editable regions that can be used to define. Consistent approach and branding available The template is connected to apply, making it easy to add. The global change from one location to each page

: In this step, a template layout.html File DWT with editable and non-editable regions can make

1. The file layout.html seen, choose File> Save as Template. Templates Save As dialog box.
2. Add a short description and change the Save as file name for Template Gallery.
3. Click the Save button to create the template. In the Files panel, you can see that a new folder with the name listed on the site templates, and the file is saved as GalleryTemplate.dwt.
4. Select the Add image here text and choose Insert> Template Objects> Editable Region. Does the New Editable Region dialog box. Enter the name of the image and then click OK.
5. Select Insert text here and repeat step 4. Name Area region editable text.
6. Save the file.

At this point, you are ready to the gallery pages using the DWT template (see Figure 8) to create.

Figure 8. Dreamweaver template editing mode.

Step 7: Creating web pages by adding images and text

The creation of the gallery pages is easy. All you have to do is create a new page with the template and place images and text in the placeholder areas.

In this step, template pages with details and create goods:

1. Choose File> New> Page from Template> Template Gallery and click Create. Discover the new page and see that only three editable regions can be changed.
2. Create a home page to save the file as index.html. Web servers automatically index.html page when navigating to the URL of the website.
3. Remove the template text in the image area and place the cursor in the editable field image area.
4. Choose Insert> Image and browse to the file in the _source HomePageImage.psd. Because the image is a Photoshop, Dreamweaver asks publish settings in the dialog image optimization. Click OK to accept the defaults publish in JPEG format and save the resulting image in the Pictures folder. If you happen to update the PSD file Dreamweaver the JPEG file is automatically updated. Enter the Home alt text when prompted.

Tip: Dreamweaver CS6 includes a basic set of image editing controls available in the Properties pane when you select an image. You can tasks like cropping, to perform resampling or adjust the brightness and contrast directly in Dreamweaver without image editing software in additional equipment.

Delete the text in the editable text area and type on a thumbnail to see the image.
Save the file.
Create a new page template and save the file with the name page1.html.
Remove the template text in the image area and replace it with image1.jpg Images / full map. Enter text in the alt 1 when prompted.
Delete the text in the text area and instead add a picture of the text.
Save the file.
Repeat steps 7-10 for each of the remaining images on the file name and the text on the number of the image in order to change. Match

At this point, the pages are filled with contents, which are ready to be joined together (see Figure 9).

Figure 9. The home page after the content is in a Dreamweaver template body.

Step 8: Create a navigation bar

Navigation bars are a common feature in website design and can take many forms. Create hyperlinks between pages on the site (or elsewhere), and provide a visual signal as a call to action. Essentially

In this step, you create a navigation thumbnails:

1. Back to GalleryTemplate.dwt (those from the Templates folder can be opened in the Files panel if necessary). We add the navigation links on the template for each of the application pages inherit the template update.
2. Click on the first thumbnail on the left (image1.jpg) to select it. Click the report next to the Link field present in the Properties panel and drag the cursor to the file you want to link in the Files panel (see Figure 10). You can manually enter each URL in the Link field but using the point to file ensures that the coupling of the template in the Templates folder is correct in the destination HTML page.

Figure 10. A hyperlink to the access to the file creation utility (click to enlarge).

Repeat step 2 each thumbnail image and an HTML file.

Save the file and choose update links when prompted.

Step 9: Add CSS3 page transitions

CSS3 transitions provide a new level of animation support HTML directly into the environment, causing flash-like effects using standard web technologies.

In this step you add CSS3 transitions overthrow miniatures to create a visually appealing experience:

• Back to GalleryTemplate.dwt if not already there.
• Select a thumbnail and choose Window> CSS Transitions to the CSS Transitions pane open.
• Click the Create New Transition (+) to the New Transition dialog box (see Figure 11) to open.
• Change the following parameters:

1.  Target: Rule. GridContainer.clearfix # LayoutDiv3 img
2. TRANSFER: Hover
3. Duration: 0.5 s
4. Delay: 0s
5. Time function: Ease out

• The rollover effect will add a touch of white light add to the edge of the miniature, and the image is completely visible. Click the button below the surface of the house and set the following styles and values:
• border-color: # FFF (white)
• Coverage: 1
• Click Create Transition transitional styles add the site.
• Save the file.

Tip: CSS transitions are compatible with the following browsers: Chrome 1.0, Safari 3.2, Firefox 4.0, Internet Explorer 10, and Opera 10.5.

At this point you have created a home page and detail pages, and added the final touches to the navigation with CSS3 transitions.

Figure 11. New Transition dialog.

Step 10: Preview and disseminate their work

It is a good idea to check your work often as you build the website. Dreamweaver CS6 offers multiple ways to preview, including the use of the Design view, with live view, with the provisional Multiscreen preview in a browser.

You will notice that the Design view and live view are the easiest ways to check before posting your work. Preview in the browser is a common task that his work shows in the default browser. Multiscreen Preview is useful for checking your work mobile and tablet sizes. In this step, you will explore the possibilities for an example of your work.

Check your work with Live View:

1. Click the button in the upper left corner of the Stage. Upon entering this mode you can get. Preview CSS3 and HTML5 features workspace
2. Click the button again to return to design view.
3. Save the file.

Check your work by previewing in a browser:

1. Select File> Preview in Browser to open the current page. Goal in the browser You can also start the page with the Preview / Debug in Browser button up design view.
2. The size of the browser window to resize the design himself fought to see.

Tip: It is a good idea to use instead of simply opening the page in a browser, this option because it saves all dependent files that store the CSS.

Check your work using multiscreen view by selecting Window> Multiscreen Preview.

Now the website is complete, then you upload it to a server for people who surf the Internet to see. You can use an FTP tool to accomplish this, but the Dreamweaver Files panel has built-in FTP capabilities. Dreamweaver CS6 includes performance enhancements so you can upload faster and more efficiently than before. Large files and large websites

Discover with Dreamweaver FTP function:

1. In the Files panel, click the Expand All button to show. Local and remote sites in the upper right corner This button expands to display on the remote server. The panel to the local file again
2. From the main menu, choose Site> New Site to Site Settings dialog box.
3. Click the plus button to add a new server.
4. Enter the name of the server, FTP address, user name and password, and click Save.
5. Save to save. Click the Settings dialog box, change the room
6. From here you can click on the Connect button on the server access to your FTP server. Then select the file to upload and click the Put Files button (up arrow). You can add, delete, and synchronize files, if needed.
7. Click the Expand All button to see (now Close) and click Show only local or remote site. Back to the edit view.

Tip: If you are new to building websites, you need a server to offer to buy a unique domain name and pay for a hosting service. The server host must be an FTP server address and a username and password to log in.

Where to go from here

This example project that you walk through a simple workflow for the creation of a website and learning the new features of Adobe Dreamweaver CS6. If you want to build a more advanced version of this gallery you likely to work in a single web page with JavaScript and XML to load.'s Image and text content Dreamweaver is a great tool for these technologies, as well.

As you progress, try to work with the design of the div and CSS. Experimenting with designs and moisture fixed network designs. Dive into the deep with the text format and experiment with adding web fonts using the new Web Font Manager. And working with JavaScript and CSS3 transitions to add extended functionality and design presents a link to your site.

You can follow us on Twitter, add us to your circle on Google+ or like our Facebook page to stay updated on the latest news from Microsoft, Google, Apple and the web. 

SHARE THIS