Build Out Your Site

This lesson will take a look at how to build out a website. The site will be an image gallery, where you navigate to various photo albums, and then view individual photos in the albums.

Use the code from the lesson where you build the un-collapsed navigation bar, and modify it as follows:

<!– start un-collapsed navbar –>
<div class=”collapse navbar-collapse” id=”main_navbar”>
++<ul class=”nav navbar-nav”>
++++<li class=”active”><a href=”index.html”>Home</a></li>
++++<li><a href=”albums.html”>Albums</a></li>
++++<li><a href=”photos.html”>Photos</a></li>
++ </div>
<!– stop un-collapsed navbar –>

 

Files for WebsiteNow your navbar has links for the home, albums, and photos. Also, the href attribute specifies the correct file name for these pages, but you have not made those pages yet. That is the next thing to do. Simply make copies of our index.html file, and change the name of each copy respectively. Your website folder should contain the files as shown.

The photo1.html page was also added, because this is where you will show individual photos. However, it will not be in the navbar.

Now you can add photos to your albums page. Place the photos under the closing </nav> tag.

<div class=”container”>
++<h1>Photo Albums</h1>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_1.jpg” alt=”graffiti image”></a>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_2.jpg” alt=”english breakfast”></a>
++++<a href=”photos.html”><img class=”album_cover” src=”./images/img_3.jpg” alt=”lots of cheese”></a>
</div>

Notice each image links to the photos.html page.

The class “album_cover” will resize the picture, but you will need to add a styles.css sheet and use the following code:

.album_cover {
++++width: 25%;
++++border: 5px solid black;
}

Make sure you add <link href=”css/styles.css” rel=”stylesheet”> to your all your new html pages!

This resizes the photo with CSS3. The other option would have been to use a photo editor to make thumbnail size photos, and use thumbnails for your album covers. On a small mobile device, your albums page should now look like the photo shown below.

Wk2Albums

Add Pictures to the Photo Page

Now you can add pictures to your photos.html page. Use the code shown below.

<div class=”container”>
++<h1>Photos</h1>
++++<a href=”photo1.html”><img class=”photo_list” src=”./images/img_1.jpg” alt=”graffiti image”></a>
++++<img class=”photo_list” src=”./images/img_2.jpg” alt=”english breakfast”>
++++<img class=”photo_list” src=”./images/img_3.jpg” alt=”lots of cheese”>
</div>

Notice the href for the <a> tag links to the photo1 page. This allows the user to view a larger size of the image.

The CSS3 for the class “photo_list” can be:

.photo_list {
++++width: 25%;
}

It does not make sense that our photos page is just a list of the same photos of the album cover page, but this example is just for demonstrative purposes. you can add your own distinct photos, and your photo pages for each album. However, you can use the code in this example to guide you.

Finally, add the appropriate image to your photo1.html page.

<div class=”container”>
++<h1>Graffiti Photo</h1>
++++<img class=”single_photo” src=”./images/img_1.jpg” alt=”graffiti image”></a>
</div>

The CSS3 for the “single_photo” class can be:

.single_photo {
++++width: 75%
}

This code in the stylesheet will display a larger version of the image.

 

CSS3 Format Examples to Change Layout

CSS3 format commands control the display of fonts, links, colors, etc. Use the “class” construct to format the layout of tags you label with a particular class.

Name a class anything you like, and there can be multiple classes. For example, an HTML5 <p> tag can have class named indent.

<p class="indent">This is a paragraph</p>

 

Then make a CSS3 format command that indents every tag of the class indent.

.indent  {

margin-left: 10px;

}

 

Span the CSS3 Format

Use the </span> tag to limit indentation to only the first line. Simply wrap the first word of a paragraph in the <span> tag.

<p><span class="indent">This </span>is a paragraph</p>

 

Add Margins to the CSS3 Format

.gap_below {

margin-bottom: 25px;

}

 

Then add the “gap_below” class to the desired HTML tag.

<p class="gap_below"><span class="indent">This </span>is a paragraph</p>

 

Special Constructors for CSS3 Format

Dynamic changes to the style when a user hovers over an element is a powerful, attention grabbing effect. Filter this effect by first selecting a “class”, and then select a “constructor”.  The hover constructor is often used.

.orange_link:hover {

color: orange;
background: gray

}

 

 

CSS3 Tricks to Exaggerate Your Links

Use CSS3 tricks to exaggerate your links. While HTML5 has basic defaults that make your links noticeable, CSS3 can be used to make them grab the user’s attention.

Remeber that your HTML5 links are shown in the <a> tags. Use the following CSS3 to change all the link color, and remove the underline:

a {
++++color:  red;
++++text-decoration:  none;
}

 

Tray an effect that will pop-out and grab the user’s attention. The CSS3 hover “selector” styles a link when a user hovers over it.

a:hover {
++++color: white;
++++background: red;
}

 

Visit this CSS3 link styling site for many more examples. Please share this page if it was useful. Thanks!

 

Cascading Style Sheet Language CSS3

A Basic Introduction

Cascading Style Sheet language CSS3 is a companion language to HTML5. While HTML controls the content of a webpage, an externally linked CSS file controls how the content is displayed.

CSS3 is the latest version of CSS. It is used in companion with HTML5.

Change Background with Cascading Style Sheet Language CSS3

To change the background color of a <body> tag, for example,  the code is:

body { background: blue; }

 

CSS files are typically saved with a name like “styles.css“.

Connect Cascading Style Sheet Language CSS3 to HTML5

 

In order for stylings to be seen on a page, the CSS file must be meta-linked to the HTML file to apply the stylings. The code to link the file should be placed in inside the <head> tags.


<!DOCTYPE html>
<html lang="en">

<head>

<title>Page Title</title>

<link href="css/styles.css" rel="stylesheet">

</head>

<body>

</body>
</html>

 

The above code example creates a meta-link. The href attribute must point to the correct name and path of the CSS file. It is common practice to keep CSS files in a folder named “css“.

One of the key features of CSS3 is that only one file is needed per web application. Once you link that style sheet to all the desired HTML pages, then all those pages will be changed according to the CSS3 commands.

Change Text Color with Cascading Style Sheet Language CSS3

Another simple command is changing the text color of the body.


body {
background: blue;
color: green;
}

 

Sufficient practice with CSS3 commands will allow any designer take control of how content is displayed.