webMapWorkshop-logo-01

Prerequisite: Websites Part 1 - Introduction to Web Pages, HTML, and CSS

Download workshop materials here.

This session builds on the concepts introduced in Intro to Websites (HTML/CSS) and covers how to use frameworks and templates to get you started, how to customize them by changing CSS, a tantalizing bit of Javascript, and how to reference a library. At the end of the lab, you will have the skeleton of an expandable, mobile-friendly portfolio page.

1. Templates and Frameworks

When developing a new web page, the best way to get ideas and learn is to look at other web sites and find things that inspire you. Look for page layouts, colors, interactivity, and structures you like, and implement them in your own site.

There is no reason to reinvent the wheel! For many tasks and layouts, templates will exist that you can download, modify, customize, and make your own. Most of them are even available open source at no cost. Templates provide code for you get started on your page. Frameworks are templates that provide the code for common components and tasks that users will want to complete on your website. Templates and frameworks are designed to be a base for you to modify and build on.

A couple template galleries:

(Many more exist, just get on Google!)

The Bootstrap Framework

The framework we are going to focus on today is called Bootstrap. Bootstrap is an exceedingly popular website framework built with HTML, CSS, and Javascript. A framework means that many page elements, common functions, and foundational components are already created for you to use and customize. You can use the pieces of the framework and customize the pieces and components for your own page, and even create your own. The components can be customized using HTML, CSS (for styling), and Javascript (for functionality, ie what happens when you click on something). Bootstrap was developed by Twitter, and is one of the most common frameworks for websites on the web today. More reading on Bootstrap, including lots of examples, can be found on the Bootstrap homepage.

Why Bootstrap?

Why are we focusing on Bootstrap? One of the most important is that Bootstrap is designed to be friendly on mobile, meaning your site will resize to be viewable on mobile devices. Another is that Bootstrap has an excellent grid system that allows us a nice ability to layout our site into columns and divisions. The grid system uses the div element (remember, these are containers for the elements on our page), and arranges them into rows. More on the grid system: http://getbootstrap.com/examples/grid/

The components provided by the Bootstrap framework and templates are on the Bootstrap components site. Tables, dropdown menus, panels, and dividers, oh my!. Don't worry if this is confusing or there are words you don't understand, we are just getting started. The point is to notice the HTML---you will recognize some elements!

i. Download a Bootstrap Template

This will all make more sense if we look through a template. Our first step will be to download a Bootstrap template, load it in our working space, and explore the code.

Today we are going to use a template found on StartBootstrap called 3 Col Portfolio. The files are included in the tutorial materials in a folder named startbootstrap-3-col-portfolio-1.0.2. The template looks like the following, which will be great for our site.

three-column-template

Right now, it is full of placeholders and default text. We can customize just about everything and populate it with our materials.

An Overview of the Materials Package

In the materials package, you will find the following folders and files. Keep them all in the same directory.

  • css: Folder containing stylesheets for our site.
  • js: Folder containing JavaScript used on the site.
  • images: Folder containing images for our site.
  • index.html: Our template index.html. Use this for the tutorial.
  • LICENSE: The use license for the 3-col-portfolio template.
  • README: A read me on the materials.

ii. View the File Structure

As we learned in Code your First Website, when you navigate to a webpage, you browser requests an index.html file, and there will be other files and folders on the server that contain items our website will use, such as images and CSS. Opening up 3-col-portfolio, you will notice a familiar structure... it is just a basic webpage!

bootstrap-file-structure

Test it out. Open index.html in a web browser and observe our template. This is being created from nothing but the files in our folder.

iii. View the Code

To investigate further, open up the index.html file in Sublime Text (or your text editor of choice). It is a HTML file, with tags, elements, style, and various links to other components. Notice the head, body, img, and div tags, among others.

index-html-screeny

Given that we have all the source files for this template, lets customize this to make it our own, adding our own images, text, and colors, along with any other additional flair we care to include.

2. Prepare for Editing

To edit our templates, we can open and change the code in our text editor (Atom, Sublime Text, Notepad++, etc.), save our file, then view locally in a web browser to see our code changes. This process will work just fine to customize our website!

Local and Network Files

The concept of local and network files is an important one when working with webpages. The goal is to never, ever edit the document you have live on your server. The reason for this that if you break something or make a change that does not work, you actually break your live website. For this reason, always work on your files locally, and when you are ready and satisfied with changes, put those files to your server.

Using a Text Editor

To complete this process using a text editor, simply keep a carbon copy of your website in a folder on a local drive. Make changes in your text editor, save, and view the changes by opening your document locally with your web browser. This will work for most components of simple static sites. You can also set up a localhost server. A localhost server is a folder that broadcasts as if it were on the internet, but is only on your local machine. There are a handful of option for doing this. If you have python on your machine, a good tutorial for doing this located here.

When you're happy with how your local files look and function, copy and paste them from your local folder to your actual web server.

3. Edit our Template

We can now begin editing our code and seeing the changes to our template. Lets customize our HTML to include our content and set up a CSS file that will style our page elements.

i. Customize the HTML

Customizing our HTML involves running through our code and getting a feel for its structure. Scan through and note the head section, body section, and various elements on the page. Note where the rows of images appear in our code (div class="row"), along with the navigation bar (navbar), and the various headings and paragraph tags. Lets modify some of the following to include our content. We have three images in our images folder in the materials we would like to turn into the first row of our portfolio, and we can get rid of the rest of the rows.

a. Change the title and navigation bar

Locate the title tag within the head part of your page.. Change this to state that it is your portfolio (ie "Eric's Portfolio").

<title>Eric's Portfolio</title>

Scan down to our body, here you see a number of items. The navigation bar, at the top of the bootstrap page, falls after the <!-- Navigation --> comment in our code. Here, locate "navbar-brand", it will look like the following, and change it from Start Bootstrap to Your Portfolio Website.

<a class="navbar-brand" href="#">Eric's Portfolio</a>

There are a handful of navigation links in our header (About, Services, and Contact) in a div with the id="bs-example-navbar-collapse-1". We can change these too! Eventually, we'll want to link to other pages on our site that contain this content. The block looks like the following. I changed mine to say Maps, Resume/CV, and Contact.

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
            <a class="nav-link" href="#">Home
							<span class="sr-only">(current)</span>
						</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
        </li>
				<li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
        </li>
    </ul>
</div>

Click save and refresh your page (of if you are in Dreamweaver, observer the changes). Not much changed, but we have customized the text on the header and navigation bar to work with our desired page.

b. Customize Page Content: Header and Projects

In the next section of the body HTML code, you see a comment that says <!-- Page Content -->. This signifies the start of the code for the page content, which includes our page heading and secondary text, and the rows of projects and images that we see on the page. The page content is all located within a single div element of class="container". Within this div, there are all the elements, including nested divs, a tags, headings, paragraphs, images, and more.


Page Heading

Locate the <!-- Page Heading --> comment. This signifies the location of our header. The page heading is contained in an h1 tag with the class="my-4". Change Page Heading to be your Name, and then modify the small Secondary Text to say Urban Designer and Planner (or pizza delivery specialist or whatever).

.
<!-- Page Heading -->
<h1 class="my-4">Page Heading
    <small>Secondary Text</small>
</h1>

Save and view your changes, your page will look something similar to the following.

header-change

Projects and Images

Locate the next comment, <!-- Projects Row -->. In our template, this is where the rows of images and projects are located. Note there are three rows of projects, so this comment and the following code is repeated three times. Edit the first one, it is the one that appears at the top of our screen. Lets add change the images to be the images found in our tutorial material package in the image folder, and adjust the name of the projects. Our goal will be a project row that looks like the following.

project-row

Place something like the following code in place of your first projects row. Make sure to get the whole thing! Don't miss any tags: this might break the code. Make sure the images folder is in the same folder as your index.html document. Note the modified img tags, and edited h3 and p elements. These are referring to the images in the images folder, and modifying the headings and text.

<!-- Projects Row -->
<div class="row">
    <div class="col-md-4 col-sm-6 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/boston.jpg" alt="">
        </a>
        <h3>
            <a href="#">Welcome to Boston!</a>
        </h3>
        <p>Boston is the capital and largest city of the Commonwealth of Massachusetts in the United States. Boston also serves as county seat of Suffolk County.</p>
    </div>
    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/mit.jpg" alt="">
        </a>
        <h3>
            <a href="#">Massachusetts Institute of Technology</a>
        </h3>
        <p>The Massachusetts Institute of Technology (MIT) is a private research university in Cambridge, Massachusetts that stresses laboratory instruction in applied science and engineering.</p>
    </div>
    <div class="col-md-4 portfolio-item">
        <a href="#">
            <img class="img-responsive" src="images/cat.jpg" alt="">
        </a>
        <h3>
            <a href="#">Grumpy Cat</a>
        </h3>
        <p>This cat is grumpy.</p>
    </div>
</div>
<!-- /.row -->

Note we are using alot of placeholders. All of the Project Rows contain a href="#" tags that are links. We can change the "#" to be the URL for another page, and we can link to them from our project listings.

Delete or populate the other project rows code blocks with content of your choice.

The next section is called <!-- Pagination -->. We aren't going to utilize this component, but if we had multiple pages of projects, we can organize them into separate pages set up links to those here. Delete (or comment out) this div from the code.


Footer

Towards the end of the document, our page contains a footer. It commented with <!-- Footer -->. Change the Your Website text to state your name.

footer

Javascript: JQuery and Bootstrap Core

Finally, at the end of the body tag, you will three lines of code with script tags. These import Javascript files from a location on our server, or a location on the internet. When we downloaded our template, these files were included in the folder called js. Bootstrap is driven by Javascript, a scripting language that increases the functionality of your site. For example, it can add interaction, such as popups, dropdowns; it can add 'events', such as what happens when you click; and loading of outside content, such as data, into your HTML code. The following lines import Javascript libraries into our document so that the website can use them. Javascript libraries are collections of functions and events.

<!-- Bootstrip core JavaScript -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
  • JQuery: JQuery is a Javascript Library for event handling, animation, and document manipulation. Read about it on the JQuery homepage.
  • Bootstrap Core: Bootstrap Core is the Javascript Library that defines the bootstrap elements, such as the grid system, what the classes mean, and how the site responds when the screen is resized. Read more about it on the Bootstrap Javascript homepage.
  • Popper: Popper is a a JavaScript library intended to make managing the position of interactive page elements like tool-tips and popovers painless.

Importing these libraries using the script tag the link to their locations allow us to use all of the features of the libraries in our website. Many mapping libraries are in Javascript, we will revisit this later.


ii. Style our Site: Edit the CSS

Next we can change the color and layout of the items on our page by editing the Cascading Style Sheets (CSS). When we download the Bootstrap template, it includes two CSS files, one is the Bootstrap CSS document, which styles the Bootstrap components, and the other is the Template CSS file, in our case 3-col-portfolio.css.

These CSS files are imported into our document in the head section with the following code. These are found in our file structure in the css folder.

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/3-col-portfolio.css" rel="stylesheet">

It is not recommended to modify the default Bootstrap CSS, so we are going to create a new CSS document for our custom styling.


a. Create and import a new CSS document

Again, modifying default documents is not recommended, best practice is to use a unique CSS style file custom to your site. The way the browser reads your file is from the top down. If there are duplicate lines of CSS, the last one the browser reads on your site will be the one used to style our elements. Therefore, we should create a new CSS file and call it custom.css. More reading on this here.

  • In your Text Editor, go to File -> New and create a blank CSS document.
  • In that blank document, copy and paste the following CSS code. It will style some of text, including the headers, and change the color of our links.
  • /* Body Styling properties example */
    body {
    	font-family: Garamond, ‘Book Antiqua’, Palatino, serif;
    	font-size: 16px;
    }
    
    h1 {
    	font-style: oblique;
    	font-size:48px;
    }
    
    h3 {
    	font-family: 'Franklin Gothic', sans-serif;
    	font-size:24px;
    }
    
    a {
    	color: #34576d;
    }
    
    a:hover {
    	color: #333333;
    }
  • Save this file as custom.css, and make sure it is saved in the css folder along with the other CSS files.
  • Import your custom.css document into your HTML. Use the following line of code in the head section of your document. Make sure you place it AFTER the other imported stylesheets.
  • <link href="css/custom.css" rel="stylesheet">

In our head section, our code for the CSS looks like the following:

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/3-col-portfolio.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

Save and refresh your page in your browser. The styling elements, properties, and values set in custom.css document will have been applied to our index.html. Adjust these and save again to view the changes.

Our Page

first-styling

b. Style the Navigation Bar

In order to style our navigation bar, we need to adjust the Bootstrap CSS. We will do this in our new custom.css file to not modify the default Bootstrap CSS file.

Use browser Developer Tools to locate the element we want to customize

In Firefox or Chrome (not Internet Explorer please!), refresh your site, and then right click on the name you gave your site in the navigation bar. Mine was "Eric's Portfolio Website". When you right click, select Inspect Element. The browser developer tools will appear. Note the box on the right, it is CSS!

developer-tools-highlighted

The color of the text in this location is under the selector .navbar-dark .navbar-brand. Double click on the color value, which is currently inherit; this means that the text inherits its color value from its parent element, a role played here by body. Let's make this text white. Adjust the color to be red by using the hex color code: #ff0000. The brand text changes in our browser window to white. This change is not permanent however, if we refresh it will return to what the server is sending it.

More reading on the browser developer tools.


Incorporate the Nav Bar change into your custom.css

If we want to make this change to the header on our site, we need to add this selector, property, and value to our custom.css. In your custom.css, add the following line of code.

/* Navigation Bar styling */
.navbar-dark .navbar-brand {
	color: #ff0000;
}

Save the custom.css document, and refresh your index.html. Note the change to your navigation bar.

updated-brand

Continue customization of your navigation bar

The following code snippet will change the color of our header, and then add a drop shadow. Copy and paste the following into your custom.css. Place it after the .navbar-inverse .navbar-brand selector.

.bg-dark {
	background-color: #34576d !important;
	border-color: #666666;
	-moz-box-shadow: 2px 2px 7px #000;
	-webkit-box-shadow: 2px 2px 7px #000;
}

Save your CSS document and refresh your browser to view the changes made by the CSS styling. Use the references let you know how to signify a selector, and then what properties and values are available for your customization. CSS references can be found at the following links.

Our Customized Page

customized-page

Put your webpage on your webserver

Save all of our files, making sure everything has stayed in the same directory. To make our website live, we have to put all of our documents, HTML, CSS, and Javascript, into our web folder that is serving to the internet. Use your FTP or a mounted Athena drive to place your files in your server folder. Instructions on connecting to FTP can be found here.

4. Whats this Javascript Business?

Above, we discussed how the Bootstrap framework and templates are built with HTML, CSS, and Javascript. We have gotten dirty with HTML and CSS to customize our page, but what about Javacript? We did not modify the Javascript in this exercise, but it is driving Bootstrap behind the scene. Remember, the Javascript libraries are imported at the bottom of the body section of our HTML code.

<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>

Modifying and customizing the Javascript on this website, or including other Javascript Libraries, can add additional functionality. This functionality includes what happens when we click on buttons, add animations, populates and changes code on the fly, and can load data and other outside information on to our webpage through the use of APIs and functions. Javascript will be covered during Part 4 of the Web Map Workshop series.

Let's make a map already, huh?!

Another question you might be asking, what does this all have to do with web mapping? The online mapping libraries we are going to use in subsequent sessions are built on Javascript, and incorporated and styled into our websites using HTML and CSS. We will introduce Javascript in the next session by utilizing a Javascript mapping library to add maps to our webpages, then expand upon it the session after, teaching fundamentals and concepts.

The map div element

Our web map will sit within the structure of our web page in a div element, we will call it the map div. This div element, like all other page elements, can then be styled, manipulated, and displayed. All of the content and functionality in the map will be specified using JavaScript. We will use a mapping library written in Javascript called Leaflet to perform all kinds of operations on this div element, including loading, displaying, and manipulating data, and use other elements on our page for contextual information and to control the map.

Next week: we move on to web mapping! We have learned some basics of websites, now its time to talk about how to turn one into a map. We will introduce the concepts and fundamentals of web maps, then walk through the creation of a basic Leaflet map, adding data and some interaction.

Ultimately, in the end, we will wrap this all together, and incorporate a rich, interactive web map right in to our web page! Next week, the lay of the land... and your first web map.



Return to DUSPVIZ tutorials page