In this tutorial, we'll take a brief look at Dreamweaver's CC starter templates.
I'll start by switching to the Design workspace.
You can create a new file from a starter template the same way you'd create any other new file.
Choose File, New..., then select the Starter Templates option on the left of the New Document dialog box.
Notice that you see a Responsive Starters folder containing 5 template options to choose from.
About page, Blog post, eCommerce, Email and Portfolio.
As the folder name would suggest, each starter template includes a responsive design built with semantic HTML.
Click on the templates to see their preview and description on the right.
I'll choose the About page template then click on the Create button to create the page.
Notice that a pop up appears asking where to save the new web page.
I'll save the file into the Project folder with the name "about.html".
Click Copy when prompted about saving the dependent files.
Let's take a look at the Files panel, where you'll notice that I've already set up a site pointing at the Project folder.
The site now contains the "about.html" page and supporting files.
The About page is also viewable in Split view.
Take a look at the template code in Code view.
As I scroll through, you can see that structure using standard HTML5 markup.
Move in the Live view, select Design Elements and notice the updates in Code view.
You can easily work with the HTML blocks that compose the template, by adding, removing and duplicating elements.
And finally, select the .css file to view the page styles and media queries.
The styles at the top define the foundation of the layout and the media query sections towards the bottom, define the style modifications at different screen sizes.
I'll choose File, Preview in Browser to take a look at my work.
Notice that the responsive template design adjusts to the width of the screen.
Customizing a starter template is easy using Dreamweaver's CC coding and visual tools.
In CSS Designer, select "aboutPageStyle.css" in the Sources area, select the body tag in the Selectors area, and click on the Background shortcut in the Properties area.
I'll change the background color to black.
Then I'll add a tile image and set the background to be fixed.
Over in Live view, select the Text element and change the color to white using CSS Designer.
You can change any of the text attributes using the same method.
From here, the process is simple.
Either it styles visually, using CSS Designer or work directly in code in Code view.
Next, I'll replace an image by simply selecting it in Live view, then using the HTML attributes pop up to browse for a new image.
My Project folder already contains images, so I'll select the "feature_259x259.png" file.
And now you can see the new design starts to take shape.
And when working with text, simply copy and paste your content or type directly into Live view or Code view.
And if you need to add or remove elements, feel free to do so.
The templates are designed in a way where you can work with HTML blocks as starting points.
From here, I'll continue with my edits until the design is complete.
And now, looking at the final design, notice that I deleted many of the HTML blocks in the original template, only using the elements needed for the design.
I'll choose Preview in Browser to take another look at my work.
The finished design sizes itself to screen and that's it.
It's that easy to create a web page from a starter template.
Take some time to explore each of the starter templates and feel free to repurpose them in any way that you need to.
Give it a try and speed your way through starting your designs.
