| 
  • If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • You already know Dokkio is an AI-powered assistant to organize & manage your digital files & messages. Very soon, Dokkio will support Outlook as well as One Drive. Check it out today!

View
 

Luke Vrotsos

Page history last edited by lvrotsos 8 years, 10 months ago

Entry #6: Bootstrap Tutorial

 

Bootstrap is a valuable resource that many web designers use. It allows one to create a visually attractive and highly functional web page without needing to code the entire page. 

 

Step 1: Go to Download on the Bootstrap page, and select Download Bootstrap. Bootstrap will download as a .zip file. Unzip the folder and create a root folder from it. The default name of the folder should be "bootstrap-3.3.4-dist", and it should contain three subfolders titled "js", "css", and "fonts". 

 

Step 2: In order to make a site, though, more than just this basic folder will be needed. Go to Examples, and pick one that you would like to model your site after. This tutorial will be using the Carousel template, but any template should work. Select the template you would like to use, right-click the page, and select View Page Source. Create a new HTML file in Dreamweaver, and save it into the root folder created in Step 1. Copy and paste the source code from the example into this document. 

 

Step 3: The file paths for many of the .css and .js files used in Bootstrap many not be correct at this point. Fix them as needed based on how your root folder is organized. All the necessary files should be contained when Bootstrap is downloaded.

 

Step 4: Edit the code! Customize it with your own colors, images, text, and code flourishes. Bootstrap should be a starting point, not an ending point. 

 

Example of the Carousel Template (not customized):

 

 

Example of a customized site created using the Carousel template. 

 

 

Resource

 

http://getbootstrap.com/ (Of course!)

 

Entry #5: CSS and HTML Dropdown Menu

 

Dropdown menus create a more sophisticated and attractive appearance than the usual, boring navbars. They are a perfect way to enhance your website. See the HTML and CSS below to create a dropdown menu. Place the CSS  It uses CSS to change the styling on the links and create an interactive appearance. Remember to manipulate the code to suit the site you are creating - replace the link names with more appropriate ones, add more links if needed, change the background color, etc. 

 

Menu created with combination of CSS and HTML:

 

 

HTML: 

 

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Dropdown Menu</title>

<link href="/dropdown.css" rel="stylesheet" type="text/css">

</head>

<body>

<ul>

  <li>

    Link 

    <ul>

      <li>Dropdown 1</li>

      <li>Dropdown 2</li>

      <li>Dropdown 3</li>

    </ul>

  </li>

  <li>Link 2</li>

  <li>Link 3</li>

</ul>

</body>

</html>

 

CSS: 

 

body {

  padding: 20px 50px 150px;

  font-size: 13px;

  text-align: center;

  background: #E3CAA1;

}

 

ul {

  text-align: left;

  display: inline;

  margin: 0;

  padding: 15px 4px 17px 0;

  list-style: none;

}

ul li {

  font: bold 12px/18px sans-serif;

  display: inline-block;

  margin-right: -4px;

  position: relative;

  padding: 15px 20px;

  background: #fff;

  cursor: pointer;

}

ul li:hover {

  background: #555;

  color: #fff;

}

ul li ul {

  padding: 0;

  position: absolute;

  top: 48px;

  left: 0;

  width: 150px;

  box-shadow: none;

  display: none;

  opacity: 0;

  visibility: hidden;

}

ul li ul li { 

  background: #555; 

  display: block; 

  color: #fff;

  text-shadow: 0 -1px 0 #000;

}

ul li ul li:hover { background: #666; }

ul li:hover ul {

  display: block;

  opacity: 1;

  visibility: visible;

}

 

Source

http://cssdeck.com/labs/another-simple-css3-dropdown-menu (The code was simplified from this resource.)

 

Entry #4: JavaScript Countdown

 

Using JavaScript, a designer can insert a countdown into a website. Simply insert the code below into the appropriate div inside the body section of your website! 

 

script type="text/javascript">

 

today = new Date();

 

BigDay = new Date("June 22, 2015");

msPerDay = 24 * 60 * 60 * 1000 ;

timeLeft = (BigDay.getTime() - today.getTime());

e_daysLeft = timeLeft / msPerDay;

daysLeft = Math.floor(e_daysLeft);

e_hrsLeft = (e_daysLeft - daysLeft)*24;

hrsLeft = Math.floor(e_hrsLeft);

minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);

document.write("The last day of school is only <b>" + daysLeft + " days, " + hrsLeft +" hours, and " + minsLeft + " minutes </b> away!<P>");

 

</script>

 

The finished product should look like - 

 

 

Note: You may want to change the date or time that is being counted down to, or the text that is displayed. Keep the date in the same format as above, and change the text as desired.

 

Source

http://www.computerhope.com/j6.htm

Entry #3: Adobe Photoshop's Filter Gallery

 

Although not fully mentioned in the Photoshop book, the Filter Gallery is a useful tool for creating interesting and creative images in Photoshop. It is reached through Filter > Filter Gallery, which will open a new window. From here, the user can choose among dozens of filters, and adjust each filter's settings as needed. See an example with one filter below. 

 

Original Image:

 

After selecting Filter > Filter Gallery, choose Brush Strokes, then Ink Outlines. Adjust the three sliders until reaching the desired appearance.

 

 

Enjoy the new image! 

 

 

Resource

http://www.peachpit.com/articles/article.aspx?p=1823362&seqNum=4

 

Entry #2: Youtube Video

 

Attempting to host a video by yourself on a site is messy and difficult, forcing the designer to deal with different browsers and file formats. As a result, many people don't bother, instead embedding a Youtube video into their websites. Simply go to the Youtube Video that you would like to embed, select Share, then Embed. Copy and past the code from the box into the div on your site that you would like to place the video in.

 

The code should look like: <iframe width="560" height="315" src="https://www.youtube.com/embed/Lkcvrxj0eLY" frameborder="0" allowfullscreen></iframe>

 

This is the code from Youtube needed to embed.

 

 

This is an example of an embedded Youtube video in a website.

 

Source:

 

http://www.w3schools.com/html/html_youtube.asp

 

Entry #1: Whitespace

 

Although it is tempting to cram as much content into a webpage as possible, good designers recognize the importance of whitespace (blank space between a website's elements). Also known as negative space, whitespace is not necessarily white. It can be any solid color, such as light gray or green, as long as the color is not distracting. Whitespace draws the viewer's attention to important elements, creating a visually clean look and improving comprehension. Designers must always be careful not to create a "busy" website, which is packed with text and images, because this distracts the reader from the most important elements and can seem chaotic. Also, white space's purpose must be carefully planned and considered. 

 

"Bad" Example

 

 

 

This website is jam-packed with content, including unnecessary and obvious information like the date and time. As a result, the site appears busy and chaotic, making it unclear which articles or images are most important. The little whitespace present is haphazardly tacked on to the side margins, adding nothing meaningful to the page.

 

"Good" Example

 

 

Google draws the viewer's attention directly to the main focus of the site-the search bar. All other elements are much smaller, and on the edges of the screen. While this may not be a good idea for all websites, it creates a highly effective search tool. 

 

Sources

 

https://boagworld.com/design/why-whitespace-matters/

http://alistapart.com/article/whitespace

Comments (5)

Lori said

at 12:18 pm on Feb 24, 2015

Entry #1, 4/4. All required elements are provided. Great job posting knowledgable information on design but in the future post on something which provides directions on how to complete an action.

Lori said

at 8:26 am on Mar 17, 2015

Entry #2: 4/4. Thank you for posting but try to post on more advanced topics (we learned this in Intro.) All required elements are provided in the post.

Lori said

at 8:36 am on Mar 31, 2015

Entry #3: 3/4. All required elements are provided in your post. I love Photoshop filters! Try to post on more advanced topics, we covered Photoshop filters in Intro. Web Design.

Lori said

at 9:03 am on Apr 9, 2015

Entry #4: 4/4. Great post. Your directions were easy to read and follow with a few additional tips.

Lori said

at 8:10 am on May 20, 2015

Entry #5: 4/4
Entry #6: 4/4

Both of these are very useful and Adv. 1 level entries. I really like the bootstrap post.

You don't have permission to comment on this page.