8.3 Iteration C3: Use a Helper to Format the Price 8.1 Iteration C1: Create the Catalog Listing
Demonstrate layouts.
Modify the application layout
edit app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Pragprog Books Online Store</title>
<%= stylesheet_link_tag "scaffold" %>
<%= stylesheet_link_tag "depot", :media => "all" %><!-- <label id="code.slt"/> -->
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %><!-- <label id="code.csrf"/> -->
</head>
<body id="store">
<div id="banner">
<%= image_tag("logo.png") %>
<%= @page_title || "Pragmatic Bookshelf" %><!-- <label id="code.depot.e.title"/> -->
</div>
<div id="columns">
<div id="side">
<a href="http://www....">Home</a><br />
<a href="http://www..../faq">Questions</a><br />
<a href="http://www..../news">News</a><br />
<a href="http://www..../contact">Contact</a><br />
</div>
<div id="main">
<%= yield %><!-- <label id="code.depot.e.include"/> -->
</div>
</div>
</body>
</html>
Modify the stylesheet
edit public/stylesheets/depot.css
/* Styles for main page */
#banner {
background: #9c9;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 2px solid;
font: small-caps 40px/40px "Times New Roman", serif;
color: #282;
text-align: center;
}
#banner img {
float: left;
}
#columns {
background: #141;
}
#main {
margin-left: 13em;
padding-top: 4ex;
padding-left: 2em;
background: white;
}
#side {
float: left;
padding-top: 1em;
padding-left: 1em;
padding-bottom: 1em;
width: 12em;
background: #141;
}
#side a {
color: #bfb;
font-size: small;
}
Show the results.
get /
Pragmatic Bookshelf
Professional programmers develop a knack of unerringly zeroing in on the root cause of a bug. They can do that because they've written a lot of buggy code and then gained experience fixing it. This book captures all this experience -- use it, and you'll find you write fewer bugs, and the ones you do write will become easier to hunt down.
Ruby is the fastest growing and most exciting dynamic language out there. If you need to get working programs delivered fast, you should add Ruby to your toolbox.
Web Design for Developers will show you how to make your web-based application look professionally designed. We'll help you learn how to pick the right colors and fonts, avoid costly interface and accessibility mistakes -- your application will really come alive. We'll also walk you through some common Photoshop and CSS techniques and work through a web site redesign, taking a new design from concept all the way to implementation.
8.3 Iteration C3: Use a Helper to Format the Price 8.1 Iteration C1: Create the Catalog Listing