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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *