Bootstrap Template Designing in Adobe Dreamweaver

People are making money through template designing because you can sell your themes online. There are lots of markets, you can join theme and Envato market is one of them. But the question is this, how to design a professional and beautiful template. For this, you need to learn first some languages like Html, CSS, javascript and PHP. If you have professional grip in these languages then you can design an awesome and fabulous template. But here I will show you how to design a template or theme with Bootstrap. Now, first of all, we should know what is actually Bootstrap.

What is Bootstrap

Bootstrap is a HTML, CSS, and javascript framework. So even if you have basic knowledge of these languages you can easily learn Bootstrap and after learning Bootstrap you can create a theme. In bootstrap, there are lots of components which we can use in our web pages.

Download Bootstrap

We can download bootstrap from the official websites of bootstrap and the website is http://getbootstrap.com.

Software Selection

There are lots of software you can use for this purpose, but the software that I like most of all we will use and the software name is Adobe Dreamweaver CC 2015. There are previous versions also available of Adobe Dreamweaver like CS4, CS5, CS6 but we will use CC 2015. Why am I using this software? There are lots of reasons. For example, you don’t need to download bootstrap from the website. It’s already included in Dreamweaver. CSS designer of this software is awesome. You can start from scratch or you can select one basic template also and these basic scratch templates are also already included in the software.

Create a new folder in your desktop of computer and then open adobe Dreamweaver cc 2015. Now click site option from the menu and then select new site as you can see in this image.

define website

A new window will appear to fill the information according to your folder. Site name you can choose any name, I have created my template. Local site folder you will select the folder which is existing in your desktop of the computer. When you define the folder of your website now what will happen? Your web pages will save in that folder means all of the files and assets which you use in your website.

define site folder

As I told you bootstrap is already included in Dreamweaver, therefore, you don’t need to open the bootstrap official website just create a new file in Adobe Dreamweaver. Click new in file option and then click new document in right side. There are total three options you can see and these are

  1. New Document
  2. Starter Templates
  3. Site Templates

Documents types you can use here and these are

  • HTML
  • CSS
  • LESS
  • Sass
  • SCSS
  • JavaScript
  • JSON
  • PHP
  • XML
  • SVG
  • HTML template
  • PHP Template
  • Fluid Grid (legacy)

Select HTML here then in right side you can see two options under framework option and these are

  • None
  • Bootstrap

Select bootstrap, CSS of the bootstrap first option should be Create new CSS. Don’t attach any existing file now because in next lessons you will come to know about this thing that how you can use custom CSS files. There is another option also in this window by default it’s enabled. Basically, this option is if you want to include a pre-built layout. Right now disable that option. Then disable last option also where you can see this message.

“Use Extract to build your page from photoshop comps”. See this image

bootstrap in dreamweaver

Now click on create button. Just save this current file as index.html and then open the folder. You can see there are three more folders automatically has been created which are necessary folders of bootstrap and these folders are

  • JS
  • Fonts
  • CSS

There is one file in the CSS folder, two files in js folder and some fonts are in the fonts folder. See this image

bootstrap folder

Now you should have a good practice on Bootstrap components for this you can read our Bootstrap Tutorials. In Dreamweaver, you can easily add bootstrap snippets in your web page. For this, you can also visit my youtube https://www.youtube.com/playlist?list=PLecU1Zegiqg4JBOTGIDWoD06oy_97KlPB bootstrap training.

How to Find Snippets in Adobe Dreamweaver

Now the question is this from where you can enable these snippets so then you will able to insert bootstrap snippets just with a small drag n drop. You can go to Window menu and click snippets or simply you can use this keyboard shortcut key Shift + F9.  Once this will enable then you can set the position of this panel according to your requirements.

bootstrap snippets

There are different bootstrap components and you can add just by drag and drop in your page. The details of these components are

  • Alerts
  • Badges
  • Breadcrumbs
  • Button Dropdowns
  • Button Groups
  • Containers, Rows, and Columns
  • Dropdowns
  • Forms
  • Images
  • Input Groups
  • Jumbotron
  • Labels
  • List Groups
  • Media Objects
  • Navbars
  • Navs
  • Page Header
  • Pagination
  • Panels
  • Progress Bars
  • Responsive Embed
  • Tables
  • Thumbnails
  • Wells

Now click on navbars you can see there are five options in drop down and these options are

  • Default Navbar
  • Navbar Inverted
  • Navbar Static Top
  • Navbar Fixed to the Bottom
  • Navbar Fixed to the Top

As you know there are Four view options in adobe Dreamweaver and these are

  • Code
  • Split
  • Live
  • Design

Activate code view and after body opening tag drag and drop Default Navbar. You can see in the image how it will look the code.

bootstrap default navbar

Now press F12 on your keyboard because F12 is the keyboard shortcut key to preview in browser. You can see automatically navigation has been added to your page.

bootstrap navigation

Now we will remove both drop down menus and search field from this navigation because the template we are going to create we will not use drop down menus right now but in future definitely we will use. To remove the search field you will delete these lines from code.

navbar search html code

To remove the navigation right side links we will remove these codes from lines.

navbar right

To remove drop down links we will remove this code.

navigation drop down menu

Now if you see the preview in your browser navigation will look like this.

bootstrap main navigation

Now we will add some links in navigation you can see as i have added the links codes on my page.

navbar links

Now if you see navigation will look like this. We have proper links name there. Hyperlink references we will apply later.

navigation links

Now we will apply some CSS styles to our bootstrap HTML elements we have already one bootstrap.css file but it’s better to create a new blank CSS file so let’s create a new CSS file and the name of this file will be custom.css. Press Ctrl + N on your keyboard to create a new file and save this file in CSS folder.

css file

Now we will link this file with style HTML tag in our HTML page so whatever styles we will apply in our CSS page will implement to HTML elements in the webpage. How to link a CSS file in HTML page you can see in the image. Open index.html click on files panel then click on the CSS folder, then drag and drop custom.css file after title tag in the head section. Or just type the code as you can see in the below image after title tag.

link css file in html

Our nav class is “navbar-default” so we will type .navbar-default in our custom CSS file and then we will apply some CSS styles to our navigation. Before applying these CSS styles please open COLOURlovers website then click on trends and websites you can see in the image below.

colour lovers

Now here you can see different color combinations according to different websites select one of them and use those colors in your website bootstrap template.

Open your custom CSS file now and apply some styles to navbar-default as you can see how i have applied.

.navbar-default {
background-color:#EFEACC;
border-radius:0px;
border:none;
}

Now open index.html there are different links in our navigation Click on one of them like this you can see in the image.

css to navigation links

Now click on CSS Designer panel and then custom.css in the sources section.

select css file

Then click on the + icon in selector section you can see Dreamweaver will automatically add CSS property for navigation.

selector css

 

Now in your CSS page apply some CSS styles to navigation list. As you can see below what styles i am using in my custom CSS file. Remove class active from the first link in HTML.

.nav.navbar-nav li a {
color:#000000;
font-size:18px;
}

Now you can see how your navigation will work in your HTML page.

bootstrap nav links preview

Awesome! Now we will apply some styles to navigation links on mouse hover. To create CSS hover property just copy the “.nav.navbar-nav li a” and then add after this “:hover”. So which styles I am using you can see below.

.nav.navbar-nav li a:hover {
background-color:#A23607;
color:#EFEACC;
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;
}

Now you can see navigation is really looking beautiful when you move the cursor of your mouse so animation takes 1 second to change the background color because i used transitions CSS.

nav links with hover

Now finally your navigation is ready but the logo is still pending. So in next lecture IN SHA ALLAH, I will explain about the logo, jumbotron, and more things. So just wait for the next tutorial which I will add very soon.

By | 2017-10-23T05:26:51+00:00 October 31st, 2016|Adobe Dreamweaver CC, Bootstrap|2 Comments

About the Author:

mm
I have professional 10 years experience in Web Development, Web Designing, Graphics Designing, Video Editing & Composition, Search Engine Optimization, Mobile Application Development, Social Media Marketing and Digital Media Marketing.

2 Comments

  1. rafomac November 4, 2016 at 3:55 pm - Reply

    Excellent article to start with Expecting more posts like this.

  2. Ali... April 8, 2018 at 1:07 am - Reply

    so helpful
    thank you

Leave A Comment