Step 1: Plan the website
The first thing to do is define the pages that will be included in the website and the visual theme the pages will use for branding and layout. This can be quite an extensive task for complex websites, but for the purposes of this tutorial, the photo gallery will follow a very simple design.
Essentially the gallery is composed of a single layout used to build a home page and detail pages. Since the pages will all follow the same design, it's a good idea to use a Dreamweaver template.
Step 2: Create a new site in Dreamweaver
Dreamweaver organizes projects by website and provides the Files and Assets panels so you can easily organize and deploy content. In this step, you'll set up the website folder and then create a new site in Dreamweaver.
Before you get started:
1. Download the project files (ZIP, 9 MB) from http://download.macromedia.com/pub/inspire/1012/dwcs6_project.zip and unzip the archive. Save your published files in this folder and use the project assets to follow the steps in the tutorial.
2. Download the completed project files (ZIP, 9 MB) from http://download.macromedia.com/pub/inspire/1012/dwcs6_project_completed.zip to use as a reference. You can deconstruct these files if you run into any problems.
3. Download the free trial of Dreamweaver CS6 from http://www.adobe.com/go/trydreamweaver/ and install the application if you haven't already done so. You can also use your Creative Cloud membership (sign-up at http://www.adobe.com/go/creativecloud/) 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 Setup dialog box, enter Photo Gallery in the Site Name field and click the folder next to the Local Site Folder field to browse for the dwcs6_project folder, which is included in the project files you just downloaded.
3. Click Save to create the site. Notice that the Files and Assets panels now reflect the content inside the website project folder. Note that you'll use supplied content from the _Source and Images folders.
4. Before you get started, take a moment to explore the Dreamweaver workspace.. The main area of the screen changes depending on whether you're looking at the Code view, Design view, Split view, or Live View mode. This area is where you'll see your work. The Properties panel on the bottom of the screen is context sensitive and displays properties for any selected object. The Files and Assets panels enable you to manage files in the website. The CSS Styles panel enables you to manage text and formatting styles throughout the website. The Mobile Size, Tablet Size, and Desktop Size buttons on the bottom of the screen in Design view enable you to check your work at standard sizes.
5. Close the blank HTML file when you are done.
Step 3: Lay out the website template using Fluid Grid Layout
The Fluid Grid Layout feature is new to Dreamweaver CS6. It provides an easy way to use CSS to create fluid page layouts that can size themselves to any screen or device. In this step, you'll create the foundation for the website template:
1. Choose File > New Fluid Grid Layout to launch the New Document dialog box. Notice that the Fluid Grid Layout options include settings for mobile, tablet, and desktop sizes. The concept is that you'll lay out content in a grid of div tags set to fluidly span the page. Each of the three sizes can define its own CSS layout for each div tag. In this step, you can change the number of columns, spacing, and margins for each layout.
2. Change the column width from 25% to 15% and change the margin setting to 90% for all three sizes.
3. When you click the Create button, Dreamweaver will generate a CSS file to save your grid CSS settings as you work. Click Create and save the CSS file with the name GalleryTemplate.css in the Assets folder.
4. Notice that Design view updates, and you now see the grid layout in the mobile screen size.
5. Save the file in the root of the project folder with the name layout.html. Dreamweaver will ask you where you'd like to copy the dependent CSS and JavaScript files that go along with the fluid grid page. You don't need to do anything with these files, but they need to be included with the site. Browse for the Assets folder and click Copy.
At this point, the page appears as a series of column guides and one fluid grid layout div tag creating a row in the grid.
Step 4: Add div tags and placeholder content
HTML is simply a tree of nested tags that defines the relationship of content on a web page. In this example, the part of the HTML you see in a browser starts with the <body> tag, followed by nested <div> tags and a closing </body> tag. A div tag is an organizational element used to group content on the page in a logical way. CSS styles can be assigned to each div tag to format text and add layout styles such as position, background, and border.
In this step, you'll create three div tags as rows in the grid and add placeholder content:
1. Select the text in the existing div tag and delete it. This div tag will hold the large image.
2. Place the cursor in the div tag and type Add image here as a placeholder for the template.
3. Click the Split button on the top left side of the workspace to display both Code view and Design view. It's often easier to edit and fix issues in Code view.
4. Add another div tag by selecting the LayoutDiv1 tag in the code or along the tag selector and choose Insert > Layout Object > Fluid Grid Layout Div Tag. Click OK to accept the default settings. Selecting the previous div tag before inserting the next div tag is an important step to make sure the tags are next to each other in the code hierarchy.
5. Delete the text in the new div tag and type Add text here as a placeholder.
6. Add another fluid grid layout div tag to add another row below the text row. This div tag will hold a series of thumbnail images.
7. Click inside the new div tag and choose Insert > Image. Browse for the image1.jpg file from the Images/Thumb folder and click OK. Enter the alt text Image 1 when prompted and click OK. Repeat this process for the remaining nine thumbnail images. You can also drag the images to the div tag from the Files or Assets panel, or you can add the images by copying and pasting the <img> tag in Code view while updating the file reference.
Right now, the template has all the elements needed to produce the website pages, but it could use some style formatting to refine the layout.
Step 5: Add styles to format the layout
CSS styles enable you to format the text and visual presentation of the div tag layout. Separating the formatting definition from the definition of the content in the div tags allows for a flexible design workflow.
In this step, you'll format the background color, font styles, div tag layout styles, and thumbnail image styles to format the template:
1. Choose Modify > Page Properties to open the Page Properties dialog box. You can use Page Properties to define global settings for the page.
2. Update the following properties under the Appearance (CSS) category and click OK:
Page font: Trebuchet MS, Arial, Helvetica, or another sans-serif font
Size: 16
Text color: #FFF
Background color: #333
3. Add more styles to the body tag to center-align all the content and add some top padding. To do this, click the All button at the top of the CSS Styles panel to show all the style rules in the site. Click the body rule below the <style> tree control, which shows the background-color style you just added in the Page Properties settings.
4. To add a property, click the Add Property button, choose the property from the menu, and enter a value in the resulting field. Add the following properties:
text-align: center
padding-top: 20px
5. The fluid grid layout page always appears with a parent div tag that contains all your other div tags. Add styles to the parent div by selecting it in the code or by clicking the outermost CSS layout guide box in Design view. Click the Current button in the CSS Styles panel and add the following styles:
border: solid 8px #000
background-color: #000
Tip: The fluid grid layout is composed of three sets of CSS, one for each device size. You always want to start your layout in the mobile size because the styles you define there will be inherited by the other two layouts.
6. Click anywhere in the second div tag to select it. Notice that the div tag's styles appear in the CSS Styles panel. Add the following styles:
padding-top: 12
padding-bottom: 12
7. Add some spacing to the images by adjusting their margin style. Click one of the thumbnail images to select it and click the New CSS Rule button on the bottom of the CSS Styles panel. Click OK in the New CSS Rule dialog box. Add the following styles in the Box category in the CSS Rule Definition dialog box and then click OK to apply the style:
margin: 5 px (same for all)
8. Notice that the new CSS rule appears selected in the CSS Styles panel. Click the Add Property button and add the following properties:
border: solid 1px #000
opacity: .75
Save the file.
At this point, the layout.html page is ready to be converted to a Dreamweaver template.
Step 6: Create a Dreamweaver template with editable regions
This website is purposefully designed to be very simple with the gallery pages sharing the same layout. Rather than redoing all the work for each page or copying and pasting the code, you can create a Dreamweaver template (DWT) file. A Dreamweaver template contains editable and non-editable regions that can be used to define consistent approaches to layout and branding. The template remains linked to each page you apply it to, which makes it easy to add global changes from a single location.
In this step, you'll create a DWT template from the layout.html file with editable and non-editable regions:
1. With the layout.html file still in the view, choose File > Save As Template. The Save As Template dialog box appears.
2. Add a brief description and change the Save As filename to GalleryTemplate.
3. Click the Save button to create the template. In the Files panel, you can see that a new folder named Templates appears in the site, and the file has been saved as GalleryTemplate.dwt.
4. Select the Add image here text and choose Insert > Template Objects > Editable Region. The New Editable Region dialog box appears. Enter the name Image Area and click OK.
5. Select Add text here and repeat step 4. Name the editable region Text Area.
6. Save the file.
At this point, you're ready to create the gallery pages using the DWT template.
Step 7: Create the website pages by adding images and text
Creating the gallery pages is easy. All you have to do is create a new page using the template and drop the supplied images and text into the placeholder areas.
In this step, you'll create the detail pages using the template and supplied assets:
1. Choose File > New > Page From Template > GalleryTemplate and click Create. Explore the new page and notice that only the three editable regions can be changed.
2. Create a home page by saving the file with the name index.html. Web servers will automatically show the index.html page when you browse to the URL of the website.
3. Delete the template text in the Image Area and place the cursor in the Image Area editable region.
4. Choose Insert > Image and browse for the HomePageImage.psd file in the _Source folder. Because the image is a Photoshop file, Dreamweaver asks for publish settings in the Image Optimization dialog box. Click OK to accept the default publish settings in JPEG format and save the resulting image in the Images folder. If you happen to update the PSD file in Photoshop, Dreamweaver will automatically update the JPEG file. Enter the alt text Home Page when prompted.
Tip: Dreamweaver CS6 includes a simple set of image editing controls available in the Properties panel when an image is selected. You can perform tasks such as cropping, resampling, or changing the brightness and contrast directly in Dreamweaver without needing additional image editing software on your computer.
5. Delete the text in the Text Area editable region and type Click a thumbnail to view the image.
6. Save the file.
7. Create another new page from the template and save the file with the name page1.html.
8. Delete the template text in the Image Area and replace it with image1.jpg from the Images/Full folder. Enter the alt text Image 1 when prompted.
9. Delete the text in the Text Area and add the text Photograph 1 in its place.
10. Save the file.
11. Repeat steps 7 through 10 for each of the remaining images to change the filename and text to match the image number in the sequence.
At this point, your pages are filled with content, and they are ready to be linked together.
Step 8: Create a navigation bar
Navigation bars are a common feature in website design and can appear in many forms. Essentially they create hyperlinks between pages in the website (or elsewhere), and they provide a visual cue as a call to action.
In this step, you'll convert the thumbnail images to a navigation bar:
1. Return to the GalleryTemplate.dwt page (which you can open from the Templates folder in the Files panel if you need to). You'll add the navigation links to the template so each of the pages implementing the template inherit the update.
2. Click the first thumbnail on the left (image1.jpg) to select it. Click the Point To File icon next to the Link field in the Properties panel and drag the cursor to the file you want to link to in the Files panel (see Figure 10). You can manually enter any URL in the Link field, but using the Point To File feature ensures that the link from the template in the Templates folder to the target HTML page is correct.
3. Repeat step 2 for each thumbnail image and HTML file.
4. Save the file and choose update links when prompted.
Step 9: Add CSS3 page transitions
CSS3 transitions provide a new level of animation support directly to the HTML environment, enabling Flash like effects using web standard technologies.
In this step, you'll add CSS3 rollover transitions to the thumbnail images to create a visually engaging experience:
1. Return to the GalleryTemplate.dwt page if you're not already there.
2. Select a thumbnail image and choose Window > CSS Transitions to open the CSS Transitions panel.
3. Click the Create New Transition button (+) to launch the New Transition dialog box (see Figure 11).
4. Change the following parameters:
Target Rule: .gridContainer.clearfix #LayoutDiv3 img
Transition On: Hover
Duration: .5s
Delay: 0s
Timing Function: Ease-Out
5. The rollover effect will add a white highlight to the border of the thumbnail image, and the image will become completely visible. Click the Plus button under the Property area and set the following styles and values:
border-color: #FFF (white)
opacity: 1
6. Click Create Transition to add the transition styles to the site.
7. Save the file.
Tip: CSS transitions are supported in the following browsers: Chrome 1.0, Safari 3.2, Firefox 4.0, Internet Explorer 10, and Opera 10.5.
At this point, you've created the home page and detail pages, and you've added the finishing touches to the navigation bar with a CSS3 transition.
Step 10: Preview and deploy your work
It's a good idea to preview your work often as you build the website. Dreamweaver CS6 provides several ways to preview, including using Design view, using Live View, using Multiscreen Preview, and previewing in a browser.
You'll find that using Design view and Live View are the easiest ways to check your work before publishing. Previewing in a browser is a common task that shows your work in your default browser. Multiscreen Preview is useful when checking your work for mobile and tablet sizes. In this step, you'll explore your options for previewing your work.
Check your work using Live View:
1. Click the Live button at the top left of the workspace. Once you enter this mode, you can preview CSS3 and HTML5 features in the workspace.
2. Click the Live button again to return to Design view.
3. Save the file.
Check your work by previewing in a browser:
1. Choose File > Preview In Browser to launch the current page in the target browser. You can also launch the page using the Preview/Debug In Browser button above Design view.
2. Change the size of the browser window to see the fluid layout resize itself.
Tip: It's a good idea to use this option as opposed to simply opening the page in a browser because it saves all the dependent files where the CSS is stored.
Check your work using Multiscreen Preview by choosing Window > Multiscreen Preview.
Now that the website is complete, you'll need to upload it to a server so that people surfing the Internet can see it. You can use any FTP tool to accomplish this, but the Dreamweaver Files panel has FTP capabilities built into it. Dreamweaver CS6 includes performance improvements so you can upload large files and large websites faster and more efficiently than before.
Explore using the Dreamweaver FTP tool:
1. In the Files panel, click the Expand To Show Local And Remote Sites button in the upper right. This button expands the panel to show the file system locally and on your remote server.
2. From the main menu, choose Site > New Site to bring up the Site Setup dialog box.
3. Click the Plus button to add a new server.
4. Enter your server's name, FTP address, username, and password, and click Save.
5. Click Save in the Site Setup dialog box to save the change.
6. From here, you can click the Connect To Remote Server button to log into your FTP server. Then select files to upload and click the Put Files button (up arrow). You can add, remove, and synchronize files as needed.
7. Click the Expand To Show button (now called Collapse) and click Show Only Local or Remote Site. Return to editing view.
