Bootstrap—the popular HTML, CSS, and JavaScript framework for building responsive mobile-first websites—has been fully integrated into Dreamweaver CC 2015. The combo puts responsive web design within reach of all Creative Cloud members. This project-based course will show you how to define a Bootstrap layout grid in Dreamweaver, and build a responsive webpage using Bootstrap components and Dreamweaver's column tools. Author David Powers also shows how to add a hero image to your front page, create placeholder content with the text editor Emmet, and go straight to the DOM to move page elements around, avoiding the need to restructure the HTML. Hi, I'm David Powers.
This tutorial provides you with a foundation for working with Adobe Dreamweaver page management. It is the second lesson in the Adobe Dreamweaver CC. Dreamweaver CC Tutorial - Part 17 - Styling HTML tags using CSS. Adobe Dreamweaver CC 2015 Tutorial| 014 Adding and manipulating images.
Welcome to Responsive Design with Bootstrap and Dreamweaver CC 2015. Bootstrap is the most popular HTML, CSS and JavaScript framework for building web pages that automatically adapt to the available screen width and it's fully integrated in the latest version of Dreamweaver CC. In this course, I'll show you how to create a customized Bootstrap layout grid, how to edit and style a navigation bar and then I'll show you how to layout the content of an attractive web page using Dreamweaver's visual tools including the visual media queries bar. You'll see how to create placeholder content quickly with Emmet, which expands CSS selectors into HTML.
And then I'll show you how to duplicate page elements in Live View. You'll also see how to use the DOM Panel to duplicate and move page elements without the need to dive directly into the underlying HTML. These are all techniques that you'll find useful building any type of web page, even if you decide Bootstrap's not for you. So let's get started with Responsive Design with Bootstrap and Dreamweaver CC 2015.
What you’ll learn in this Dreamweaver Tutorial:. Adding Pages This tutorial provides you with a foundation for working with Adobe Dreamweaver page management. It is the second lesson in the book. For more Adobe Dreamweaver training options, visit AGI’s. Adobe Dreamweaver Tutorial: Adding Pages in Dreamweaver Dreamweaver contains many features to assist you in building pages for your site. For example, you can define properties for pages, including titles, background colors or images, as well as default text and link colors.
The first step for creating a new page correctly was taken when you defined the site in the last exercise. By defining the root folder, Dreamweaver will always create new pages in your site automatically. These pages are now visible in the Files panel in the lower right of your screen.
The Files panel. If your Files panel does not look the same as it does here, choose Window Workspace Layout Reset ‘Compact’.2 Click the Folder icon ( ) to the right of the Local Site Folder text field to navigate to any pre-existing files. In the next step you will locate the lesson files we have provided for this chapter. 1 Choose File New. The New Document dialog box opens. Use the New Document dialog box to add a page to your site.
2 You can create a new page using a predesigned layout, or start with a blank page and build a layout of your own. In this exercise, you’ll start with a blank page while in later lessons you will get a chance to explore some of the other options.
Click the Blank Page category on the left side of the New Document dialog box. 3 In the Page Type column, you can select the type of page you want to create (for example, HTML, PHP, and so on). Select HTML if it is not currently selected.
In the Layout column, you can choose to base your page on a prebuilt design. These predesigned layouts fall into one of three categories: Fixed creates a layout with columns that do not resize based on the user’s browser settings. They are measured in pixels. Liquid creates a layout with columns that resize if the user resizes the browser window, but not if the user changes the text settings. HTML5 creates a fixed layout that uses the new HTML5 elements such as, and among others. 4 Click in the Layout column to build the page without using a prebuilt layout.
5 Click the DocType menu in the lower-right corner. This DocType drop-down menu defines the document type for different versions of HTML including XHTML 1.0 Transitional and HTML5. HTML5 is the default setting and is suitable in most cases, so be sure to bring it back to this option. Choose HTML5 as your DocType. If your Files panel does not look the same as it does here, choose Window Workspace Layout Reset ‘Compact’.2 Click the Folder icon ( ) to the right of the Local Site Folder text field to navigate to any pre-existing files. In the next step you will locate the lesson files we have provided for this chapter. 6 Click Create to create a new, blank HTML page.
You will learn more about Workspaces a bit later, but to make sure you are working as we are, choose Window Workspace Layout and choose Reset ‘Compact’. Your screen should now look like ours. (Although if you are in Code View, you should switch to the Design view now.) Your new, blank HTML page. Saving a page to your site You should get accustomed to saving pages to your local root folder early and often. It is very important that you store all your site’s resources in one main folder on your hard drive so that the links you set on your computer will work when your site is uploaded to a server. 1 Choose File Save. 2 In the Save As dialog box, Dreamweaver should have automatically opened your dw02lessons folder which was defined earlier in the Site Settings.
If this is not the case, navigate to your desktop and locate the dw02lessons folder. 3 In the Save As text field, name your file aboutus.html. Notice that even though the file is for the About Us page, you are naming it aboutus.html. When naming your files and directories, avoid using spaces, periods, slashes, or any other unnecessary punctuation, as doing so will likely cause the server to misdirect your files. 4 Click Save to save the page in your local root folder. In the Files panel note that the file aboutus.html has now been added.
Again, site settings are very important in Dreamweaver because files are automatically saved and organized based on having a site definition. Continue to the next.