In this exercise, we'll set up the grid template for the page shown in FIGURE 16- 37. We'll place the grid items into the grid in EXERCISE 16-5, So for now just pay attention to setting up the rows and columns.

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question
100%

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Black Goose Bakery Grid</title>
<link href="https://fonts.googleapis.com/css?family=Stint+Ultra+Expanded" rel="stylesheet">
<style>

html {
  box-sizing: border-box;
}
* {
  box-sizing: inherit;
}
body {
  font-family: Georgia, serif; 
  font-size: 100%;
  background-color: white;
  margin: 0;
}

/* GRID STYLES START HERE */
#layout {
  margin-left: 5%;
  margin-right: 5%;
    
}

 

/* VISUAL STYLES START HERE */

/* link styles */
a:link, a:visited { color: #DC6903; }
a:focus, a:hover, a:active { color: #F9AB33; }

a {
  text-decoration: none;
  border-bottom: 1px dotted;
  padding-bottom: .2em;
}

 

/* nav styles */
nav, footer {
  font-family: verdana, sans-serif;
  background-color: #783F27;
}
nav ul li a:link, nav ul li a:visited {
  color: #F9AB33;
}
nav ul li a:focus, nav ul li a:hover, nav ul li a:active {
  color: #fff;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
}
nav ul li {
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .2em;
}
nav ul li a {
  display: block;
  border: 1px solid;
  border-radius: .5em;
  padding: .5em 1em;
  margin: .5em; 
}


/* main styles */
main {
  font-family: 'Stint Ultra Expanded', Georgia, serif;
  background-color: white;
  line-height: 1.8em;
  color: #555;
  padding: 1em;
  border: double 4px #EADDC4;
  border-radius: 25px;
}


/* misc styles */

figure {
  margin: 0;
  padding: 0;'
   /* clears browser styles for figures */
}

footer {
  color: #EADDC4;
  text-align: center;
  font-size: .8em;
  padding: .5em;
}

</style>
</head>

<body>
<div id="layout">

<nav>
  <ul>
    <li><a href="">Menu</a></li>
    <li><a href="">News</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>  

<main>
  <h2>Introducing: Breads of the World!</h2>
  <p>It seems as though every region of the world has its own special take on this staple of humankind. From crusty french baguettes to table-sized Afghan flat-breads, breads can come in all shapes, sizes, and textures.</p>
  <p>Each month, we feature a bread that is the specialty of a particular culture or part of the world. Some will be made in-house by our bakers who travel around the world learning regional techniques in order to bring them back for you to try. Other breads will be provided by local bakeries that have been making bread for their communities for generations.</p>

  <p>When you are in the bakery, we encourage you to give our featured Bread of the World a try. If you can't make it to the shop, many of our breads will be available for purchase online.</p>
  <p>Providing you with fresh, unique breads is one of the things that makes Black Goose Bakery proud.</p>
<!--
<p>Our breads are made daily from highest-quality whole grain flour, water, salt, and yeast or sourdough starter. Simply and naturally, and never any preservatives. Patience is key to achieving the proper level of fermentation and baking each loaf to perfection. Available in whole grain, sourdough, olive loaf, classic rye, and potato-onion.</p>
-->
</main>

<figure id="figA"><img src="images/uzbek_150.jpg"></figure>
<figure id="figB"><img src="images/bread_150.jpg"></figure>
<figure id="figC"><img src="images/braided_150.jpg"></figure>

<footer>
  <p><strong>Black Goose Bakery</strong> | Seekonk, MA <br>
Monday &ndash; Friday: 5am to 3pm | Saturday &amp; Sunday: 6am to 4pm</p>
</footer>

</div>
</body>
</html>

 

In this exercise, we'll set up the grid template for the page shown in FIGURE 18-
37. We'll place the grid items into the grid in EXERCISE 16-5, so for now just pay
attention to setting up the rows and columns.
NOTE
You will need to use a browser that supports grids for this exercise.
I am using Firefox in order to take advantage of the Grid Inspector
tool. Supporting browsers are listed earlier in this section. See the
"Firefox Grid Inspector and Layout Panel" sidebar for instructions
on how to open the tool.
This page is similar to the bakery page we've been working on, but it has a
few more elements and whitespace to make things interesting. The starter
document, grid.html, is provided with the exercise materials at
learningwebdesign.com/5emateriais. Open it in a text editor, and you'll see that all of
the styles affecting the appearance of each element are provided.
Зет
20рх
Introducting Breade of the Worldi
150рх
300px
ndthe
yuy
Sem
1fr
150px
150px
150px
20рх
20рх
20px
FIGURE 16-37. The Breads of the World page that we will create using Grid Layout.
1. Start by turning the containing element, the #layout div, into a grid con-
tainer by setting its display mode to "grid":
#layout { - display: grid;}
2. FIGURE 16-37 shows the row and column tracks required to accommodate
the content in the desired layout. Start by defining the rows as specified
in the sketch, using the grid-template-rows property. There should be
five values, representing each of the five rows. (Spoiler alert: we'll be
tweaking these values when we get to the next exercise. This is just a
starting point.)
#layout {
display: grid; grid-template-rows: 3em 20px 1
Transcribed Image Text:In this exercise, we'll set up the grid template for the page shown in FIGURE 18- 37. We'll place the grid items into the grid in EXERCISE 16-5, so for now just pay attention to setting up the rows and columns. NOTE You will need to use a browser that supports grids for this exercise. I am using Firefox in order to take advantage of the Grid Inspector tool. Supporting browsers are listed earlier in this section. See the "Firefox Grid Inspector and Layout Panel" sidebar for instructions on how to open the tool. This page is similar to the bakery page we've been working on, but it has a few more elements and whitespace to make things interesting. The starter document, grid.html, is provided with the exercise materials at learningwebdesign.com/5emateriais. Open it in a text editor, and you'll see that all of the styles affecting the appearance of each element are provided. Зет 20рх Introducting Breade of the Worldi 150рх 300px ndthe yuy Sem 1fr 150px 150px 150px 20рх 20рх 20px FIGURE 16-37. The Breads of the World page that we will create using Grid Layout. 1. Start by turning the containing element, the #layout div, into a grid con- tainer by setting its display mode to "grid": #layout { - display: grid;} 2. FIGURE 16-37 shows the row and column tracks required to accommodate the content in the desired layout. Start by defining the rows as specified in the sketch, using the grid-template-rows property. There should be five values, representing each of the five rows. (Spoiler alert: we'll be tweaking these values when we get to the next exercise. This is just a starting point.) #layout { display: grid; grid-template-rows: 3em 20px 1
3. Do the same for the seven columns. Because I want the text column to
grow and shrink with the available space, I've specified its width in frac-
tional units (1fr). The remaining columns create 150px-wide cells for
three images and 20px of space before them.
You can write them all out like this:
grid-template-columns: 1fr 2epx 150px 20px 150px 20px 150p
However, because the last six columns are a repeating pattern, it would
be easier to use the repeat() function to repeat the spaces and figure
columns three times:
grid-template-columns: 1fr repeat(3, 20px 15epx);
4. Finally, let's assign names to the grid lines that border the grid area
where the main content element should appear. The names give us some
intuitive options for placing that item later. The main area starts at the
third row track, so assign the name "main-start" to the grid line between
the second and third row track measurements:
grid-template-rows: 3em 20px [main-start] 150px 300px 5em;
The main area extends into the last row track, so assign the name
"main-end" to the last grid line in the grid (after the last row track):
grid-template-rows: 3em 20px [main-start] 150px 300px 5em [m
5. Now do the same for the grid lines that mark the boundaries of the col-
umn track where the main content goes:
grid-template-columns: [main-start] 1fr [main-end] repeat (3
I've saved my work and looked at it in Firefox with the Grid Inspector turned
on (FIGURE 18-38). Because I haven't specified where the grid items go, they
flowed into the cells sequentially, making the mess you see in the figure.
However, the grid overlay reveals that the structure of the grid looks solid.
Save the file and hold on to it until the next exercise.
Transcribed Image Text:3. Do the same for the seven columns. Because I want the text column to grow and shrink with the available space, I've specified its width in frac- tional units (1fr). The remaining columns create 150px-wide cells for three images and 20px of space before them. You can write them all out like this: grid-template-columns: 1fr 2epx 150px 20px 150px 20px 150p However, because the last six columns are a repeating pattern, it would be easier to use the repeat() function to repeat the spaces and figure columns three times: grid-template-columns: 1fr repeat(3, 20px 15epx); 4. Finally, let's assign names to the grid lines that border the grid area where the main content element should appear. The names give us some intuitive options for placing that item later. The main area starts at the third row track, so assign the name "main-start" to the grid line between the second and third row track measurements: grid-template-rows: 3em 20px [main-start] 150px 300px 5em; The main area extends into the last row track, so assign the name "main-end" to the last grid line in the grid (after the last row track): grid-template-rows: 3em 20px [main-start] 150px 300px 5em [m 5. Now do the same for the grid lines that mark the boundaries of the col- umn track where the main content goes: grid-template-columns: [main-start] 1fr [main-end] repeat (3 I've saved my work and looked at it in Firefox with the Grid Inspector turned on (FIGURE 18-38). Because I haven't specified where the grid items go, they flowed into the cells sequentially, making the mess you see in the figure. However, the grid overlay reveals that the structure of the grid looks solid. Save the file and hold on to it until the next exercise.
Expert Solution
steps

Step by step

Solved in 4 steps with 6 images

Blurred answer
Similar questions
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY