Join Sue Jenkins for an in-depth discussion in this video Create a Bootstrap file, part of Designing Websites from Photoshop to Dreamweaver.
- [Instructor] As you may know, Bootstrap is a free, open source front end framework for creating responsive mobile first websites. It was originally developed by a couple of developers at Twitter in 2010, to help designers and developers of all skill levels more easily and quickly create sites that will adapt to fit all devices. The framework includes all kinds of customizable, dynamic elements like navigation menus, buttons, panels, and image carousels. There are also tons of free jQuery plugins that extend the features and functions of Bootstrap, making it one of the most popular frameworks available today.
Dreamweaver not only lets you create your own Bootstrap templates from scratch, but also lets you customize templates from third party sources, and provides a handy set of free starter templates to get you started. For this project, we're going to build a new page from scratch, but we'll also take a look at Dreamweaver's prebuilt layout option to get a better sense of how Bootstrap pages and components are constructed. One thing to note before we begin is that Bootstrap requires a few extra files to function properly, and these files must be saved into your managed site at the start of the project.
For this reason, let's manage a site right now to the exercise folder. To create a managed site, choose site, new site. We'll put in the name of the client, Topsy Turvy. Then click the folder icon to navigate to the desired folder. So into the exercise folders, then HTML, then project 4-1. Now click save, and our managed site is ready to go. You can see the name of the managed site here at the top of the files panel, and you'll also see that I've already nested an images folder, filled with all the optimized web graphics needed for this project.
The first thing we'll do is select file, new, to open the new document dialogue box. Under starter templates and Bootstrap templates, you'll see a handful of sample page template files. Definitely explore these on your own to see example layout options that you might be interested in borrowing. For now, click the new document category, make sure HTML is selected as the document type, and click the Bootstrap tab.
Under Bootstrap CSS, make sure create new is selected, and make sure to put a check mark next to include a prebuilt layout. Next, click customize to view the grid and breakpoint values. The default layout is set to use 12 columns with a 30 pixel gutter, and the default screen sizes are set to 768, 992, and 1200. Within this layout, the default grid container measures 1170 pixels wide, with 15 pixels of padding on either side.
This makes the inside of the container 1140 pixels, which perfectly matches our Photoshop mock-up. Next, click the create button. As the new file opens, notice in the files panel that Dreamweaver automatically adds some folders to the managed site, filled with style sheets, fonts, and scripts. As I mentioned before, all of these files are necessary for the Bootstrap pages to display and function properly. To save this sample page, select file, save, and save it with the file name sample.html.
We'll use some of the components from this file in a few upcoming lessons, so let's take a quick look at its structure. Bootstrap files open in live view mode. All of the rows are highlighted using gray dashed lines with rounded corners. Inside the rows, you'll see that the columns are highlighted using blue dashed lines. Selected rows display with a solid blue border around them, along with offset and resize column handles, tag, class, and ID style indicators, and duplicate and add column buttons.
All of these indicators help make working with Bootstrap in Dreamweaver a breeze. One more thing before we finish up. Let's also create a blank Bootstrap file by selecting file, new. And this time, when the dialogue box opens, we'll deselect the include prebuilt layout option before clicking create. When this new file is open, we'll save it into the managed site as index.html. Let's also give this document a title by typing into CodeView.
We'll call it Topsy Turvy Cake Design. We now have everything we need to get started converting our Photoshop mock-up into a Bootstrap webpage. In the next lesson, we'll create rows for all our content.
- Setting up the Photoshop and Dreamweaver workspaces
- Planning a site and defining site goals
- Making a site mockup
- Deciding on branding and content
- Adjusting color and fonts
- Slicing graphics
- Optimizing graphics for the web
- Creating a favicon
- Working with Bootstrap files
- Creating a navigation menu
- Using the Photoshop extractor
- Coding for SEO
- Making sites accessible
- Checking for errors with the Validator tool
- Using the Clean Up HTML tool
- Using the Link Checker panel
- Building pages with HTML
- Styling pages with CSS
- Making site galleries and carousels