Web design with HTML5 CSS3 ComprehensivehCD ROM 2

7 Improving Web Design with New Page Layouts • • • • • • • • • • • • Objectives HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02 200 203 Introduction Web design involves a daily pursuit of perfection in layout, function, and ef�ciency Every site you create expresses your personal creativity while balancing your customers’ demands with content and design that captures and holds the attention of your dynamic audience To.

Trang 1

7 Improving Web Design

with New Page Layouts

Trang 2

Web design involves a daily pursuit of perfection in layout, function, and efficiency Every site you create expresses your personal creativity while balancing your customers’ demands with content and design that captures and holds the attention of your dynamic audience To meet these requirements, you must constantly reevaluate your content and design and apply new technologies and innovations to keep your audience engaged and your customers elated

As you have learned, HTML5 provides new tools for improving webpage design, including semantic elements for specific types of content You have already integrated four semantic elements in a website: header, nav, main, and footer In this chapter, you will discover other HTML5 semantic elements and learn how to integrate them into webpages You will also learn how to improve your current design for mobile, tablet, and desktop viewports

Project — Use HTML5 Structural Elements

to Redesign a Website

In Chapters 5 and 6, you discovered how to create a responsive-design website In Chapter 7, you continue to improve the website design by modifying page layout and learning how to use additional HTML5 semantic elements

The owners of the Forward Fitness Club are rebranding their image and plan to launch a strategic marketing campaign to gain new clients As part of the rebranding process, they updated their logo and created a new look They ask you to apply the new look to the website Because the website is not yet complete, this is a good time to improve and redesign the site to fit the updated brand

The project in this chapter enhances a website with HTML5 semantic elements

to structure added content To complete this task, you create a new wireframe for the home and About Us pages Next, you integrate additional HTML5 semantic elements within the home, About Us, and Contact Us pages You also update and create style rules for the new and existing elements Next, you create a wireframe for the Nutrition page, a new webpage in the site After creating the Nutrition page using HTML5 semantic elements, add style rules for these elements to the style sheet You apply styles to the HTML5 elements on each page to give the site an enhanced look and feel. As you add styles to the style sheet, they immediately format the attached webpages when you open or refresh the pages in a browser Figure 7–1 shows the home page, Figure 7–2 shows the About Us page, and Figure 7–3 shows the Nutrition page, each for the mobile, tablet, and desktop viewports after the improvements are applied

Improving Web Design with New Page Layouts

7

Trang 3

Figure 7–1

(a) Home page in mobile

viewport

(b) Home page in tablet viewport

(c) Home page in desktop viewport

Figure 7–2

(a) About Us page in mobile

viewport

(b) About Us page in tablet viewport

(c) About Us page in desktop viewport

Trang 4

Figure 7–3

(a) Nutrition page in mobile

viewport

(b) Nutrition page in tablet viewport

(c) Nutrition page in desktop viewport

(b) Nutrition

Roadmap

In this chapter, you will learn how to create the webpage shown in Figure 7–1 The following roadmap identifies general activities you will perform as you progress through this chapter:

1 modifytheHome page

2 style the Home pageelements

3 modifytheaBout us page

4 style the aBout us pageelements

5 modify and style the contact us pageelements

6 create and stylethe nurtition page elements

At the beginning of step instructions throughout the chapter, you will see an abbreviated form of this roadmap The abbreviated roadmap uses colors to indicate chapter progress: gray means the chapter is beyond that activity; blue means the task being shown is covered in that activity, and black means that activity is yet to be covered For example, the following abbreviated roadmap indicates the chapter would

be showing a task in the 5 MODIFY & STYLE CONTACT US PAGE activity

1 MODIFY HOME PAGE | 2 STYLE HOME PAGE | 3 MODIFY ABOUT US PAGE | 4 STYLE ABOUT US PAGE

5 MODIFY & STYLE CONTACT US PAGE | 6 CREATE & STYLE NUTRITION PAGE

Use the abbreviated roadmap as a progress guide while you read or step through the instructions in this chapter

Trang 5

HTML Chapter 7

navigation system is contained within the <nav> and </nav> tags; likewise, footer

content is contained within the <footer> and </footer> tags

Use HTML5 semantic elements for specific types of content within a webpage

The name of the tag reflects its purpose Using semantic HTML5 elements provides

a standard naming convention for webpage content, making webpages more universal,

accessible, and meaningful to search engines

The Forward Fitness Club website contains the header, nav, main, and footer

semantic elements HTML5 includes several other semantic elements, some of which

you will learn about and use to complete this project Table 7–1 lists other HTML5

semantic elements

<article> … </article> Indicates the start and end of an article area of a webpage Contains

content such as forum or blog posts.

<aside> … </aside> Indicates the start and end of an aside area of a webpage Contains

information about nearby content and is typically displayed as a sidebar.

<details> … </details> Indicates the start and end of a details area of a webpage Contains

additional information that the user can display or hide Note that this element is not supported by all major browsers at the time of this publication.

<figure> … </figure> Indicates the start and end of a figure area of a webpage Contains

pictures and images.

<figcaption> … </figcaption> Indicates the start and end of a figure caption area of a webpage

Defines a caption for a figure element.

<section> … </section> Indicates the start and end of a section area of a webpage Contains

a specific grouping of content on a webpage.

<summary> … </summary> Indicates the start and end of a summary area of a webpage

Contains a visible heading for the details element on a webpage

Note that this element is not supported by all major browsers at the time of this publication.

<time> … </time> Indicates the start and end of a time area of a webpage Contains a

date/time on a webpage.

Table 7–1 HTML5 Semantic Elements

Article Element

The article element, as described by the W3C, is “a complete, self-contained

composition in a document, page, application, or site and that is, in principle,

independently distributable or reusable, e.g in syndication This could be a forum

post, a magazine or newspaper article, a blog entry, a user-submitted comment, an

interactive widget or gadget, or any other independent item of content.” The article

element starts with an <article> tag and ends with an </article> tag Content placed

between these tags will appear on a webpage as part of the article element

Articles may be nested within other HTML elements, such as the main element,

the section element, or other article elements Articles are commonly used

to contain news articles, blog and forum posts, or comments The article element

Trang 6

is supported by the major modern browsers The following is an example of three

article elements nested within a main element.

An example wireframe that uses the article element is shown in Figure 7–4

An example of a webpage that uses an article element is shown in Figure 7–5.

Trang 7

HTML Chapter 7

Figure 7–5

Aside Element

The aside element, as described by the W3C, is an element that “represents

a section of a page that consists of content that is tangentially related to the content

around the aside element, and which could be considered separate from that content.”

The aside element is used as a sidebar and contains additional information about a

particular item mentioned within another element, such as an article or section

element For example, if an article on a webpage contains a recipe and a list of

ingredients, you could include an aside element with more information about one

of the key ingredients, such as its origin or where to purchase it Aside elements can be

nested within article elements or within main or section elements Aside

elements are commonly used for pull-out quotes, glossary terms, or related links The

following is an example of an aside element nested within an article element.

An example wireframe that uses the aside element is shown in

Figure 7–6. An example of a webpage that uses an aside element is shown in

Figure 7–7

Trang 9

HTML Chapter 7

grouping of content The theme of each section should be identified, typically

by including a heading (h1-h6 element) as a child of the section element.” The

section element defines different parts of a webpage document, such as chapters

For example, in a webpage that contains a list of tutorials, Tutorials 1-3, each tutorial

can be placed within a section and include a heading element with an appropriate title,

Tutorial 1, Tutorial 2, Tutorial 3, followed by the tutorial content Be sure to include

a heading element within a section element or the page will receive a warning

from the W3C HTML validator Use a section element for content that naturally

contains a heading The W3C encourages designers to use article elements for

other types of subdivided content The W3C also states that the section element “is

not a generic container element When an element is needed only for styling purposes

or as a convenience for scripting, authors are encouraged to use the div element instead

A general rule is that the section element is appropriate only if the element’s contents

would be listed explicitly in the document’s outline.” The following is an example of a

several section elements nested within an article element.

<article>

<h1>Tutorials: Cooking Basics</h1>

<p>Watch our tutorials to learn the basics of good cooking.</p>

An example wireframe that uses the section element is shown in Figure 7–8

An example of a webpage that uses a section element is shown in Figure 7–9.

Trang 10

Figure and Figure Caption Elements

The figure element is used to group content, such as illustrations, diagrams, figure element is used to group content, such as illustrations, diagrams, figure element

and photos According to the W3C, the figure element “represents some flow tent, optionally with a caption, that is self-contained (like a complete sentence) and

con-is typically referenced as a single unit from the main flow of the document.” Though

the figure element is commonly used to contain images, it can also display a chart, graph, or table Do not confuse the figure element with the img element

Trang 11

HTML Chapter 7

<figcaption> tag as the starting tag and a </figcaption> tag as the ending tag The following

is an example of the figure element and the figure caption element.

<figure>

<figcaption>New York City Highlights</figcaption>

<img src="ny1.jpg" alt="Statue of Liberty">

<img src="ny2.jpg" alt="Central Park">

<img src="ny3.jpg" alt="New York at Night">

</figure>

An example wireframe that uses the figure and figure caption

elements is shown in Figure 7–10 An example of a webpage that uses the elements is

Trang 12

Figure 7–13

Can I use figure and figure caption elements to wrap image elements separately?

Yes You can wrap each image element within separate figure and figure caption elements.

Figure 7–12

Trang 13

HTML Chapter 7

identifying image.) Textual content is kept to a minimum Each website also takes

up the entire screen Both sites use HTML, CSS, and other web technologies to

accomplish their modern look and interaction

Some websites use sliding banners to showcase several products or promotions.

What is the difference between a logo and a banner?

A logo is a graphical representation of a business, used to promote the business brand and market presence A banner image is

used as a focal point on a webpage to capture the user’s attention.

Figure 7–13 also demonstrates the use of the CSS3 opacity property, which opacity property, which opacity

specifies the transparency of an element The default value of the opacity property is 1,

which does not make the element transparent An opacity property value of 0.50 makes

an element 50 percent transparent and a value of 0 makes an element completely

transparent Major modern browsers support this CSS3 property

The text-shadow property is another CSS3 property that applies a shadow text-shadow property is another CSS3 property that applies a shadow text-shadow

to text This property requires a minimum of two values: the h-shadow value, which

designates the horizontal position of the shadow, and the v-shadow value, which

designates the vertical position of the shadow Optional values include a blur radius and

a color Below is an example of a style rule that applies a text shadow to an element

h1 {

text-shadow: 0.2em 0.1em #292933;

}

In this example, a text shadow with a horizontal position of 0.2em, a vertical

position of 0.1em, and a dark gray color is applied to an h1 element

Redesigning the Home Page

Owners of the Forward Fitness Club have provided you with their new logo and

other marketing materials to show you how they have rebranded the business The

marketing materials use dark gray to emphasize a refined and contemporary look The

new logo is light gray You can incorporate these colors and updated design features in

the Forward Fitness Club website

Start by reviewing the existing wireframe for each viewport to determine how

to improve it You can keep the same wireframe for the home page mobile viewport

because it is basic, adaptable, and works well in limited space However, you can modify

the wireframes for tablet and desktop viewports because the additional space allows

you to include extra content, such as images in a figure element New wireframes for

the tablet and desktop viewports, which integrate a div for a banner image and a figure

element, are shown in Figures 7–14 and 7–15

Modern Website Design

Many of today’s modern websites use a combination

of HTML, CSS, and JavaScript JavaScript is commonly used to create a sliding banner, which consists

of three or more images that display new products, promotions, or other new content to stimulate user interest.

Web Content Strategist

A web content strategist is responsible for developing strategies for displaying content on a webpage

A web content strategist analyzes current content, performs in-depth research, and then drafts recommendations for content

to attract new clients

Trang 14

Header Navigation

Banner Div

Main Div Div Figure

Footer

Figure 7–14

Navigation Header

Banner Div

Main Div Div Figure

Footer

Figure 7–15

To Add a New div Element to the Home Page

Modify the home page by adding a new div element to contain the banner image

To begin, download the new images and save them in your images folder Next, open

the index.html file in your text editor and insert a div element for the banner image and add the banner image The following steps add a div id="banner" element

to the home page

1

2

enter

3 <! Home Page Banner >

Trang 16

To Add a figure Element

to the Home Page

Insert a figure element within the div class="desktop" element to contain three new images

and links Why? Use a figure element to group the new images together First, insert a new heading element with

call-to-action text Next, insert a figure element with three image elements that link to the Classes, Nutrition, and Contact Us pages The following steps add a heading and figure element to the home page.

html"><img src="images/group.jpg" alt="group fitness"></a>

src="images/nutrition.jpg" alt="good nutrition"></a>

src="images/signup.jpg" alt="sign up icon"></a>

2

•

Figure 7–18

Figure 7–19

Trang 17

HTML Chapter 7

3

•

enter

• margin-top:

-1.5em;

4 • 9D9D93

Q&A Q&A color and styles for the structural elements in the mobile viewport to reflect the rebranding of the Forward Fitness Club. The following steps modify the style rules for the mobile viewport 1 • • 1D1D1C

2

•

Figure 7–20

Figure 7–21

Figure 7–22

Figure 7–23

Trang 19

HTML Chapter 7

anchor elements within the main element and the second rule styles anchor elements within the footer Why?

Update the style of the anchor elements to be consistent with the new look of the website The following steps create style

rules for the mobile viewport

1

•

enter

• /* Style

for anchor elements

within the main

Trang 20

•

enter

• /* Style for

anchor elements within

the footer element */

To Update the Style Sheet for

the New Design in a Tablet Viewport

Update the style sheet for the tablet viewport Why? The new and modified styles update the list items in the

navigation element and refine the styles for the main element in the tablet viewport to reflect the rebranding of the Forward Fitness Club First, add new properties to the navigation list item style rule to remove the background color and

rounded corners Then, modify the styles for the main element to apply a top margin and to remove the margin and rounded corners The following steps modify the style rules for the tablet viewport

Trang 22

To Add New Style Rules

to the Tablet Viewport

You added heading and figure elements to the home page and now need to create style rules to format the elements Create three new style rules: one for the heading element and two for the figure element Why? Create

the style rules for the new elements to format them to suit the updated design First, create a new style rule for the

heading one element to center-align its content Next, create a new style rule for the images within the figure element to specify a background color, display setting, height, width, margin, and padding Finally, create a new style rule to style the anchor elements in the figure element The following steps create new style rules for the tablet viewport

color: #1D1D1C;

Trang 23

HTML Chapter 7

• /* Style

for anchor elements

within the figure

Trang 24

To Update the Style Sheet for the

New Design in a Desktop Viewport

Update the style sheet for the desktop viewport to apply the new theme colors and desired layout for the Forward Fitness Club Why? The new and modified styles reflect the rebranding of the Forward Fitness Club.

First, modify the style rule for the #container element to remove the width and to apply a background

color Next, modify the style rule for the navigation list item elements to remove the borders Then, modify the style rule for the navigation anchor elements to apply a text shadow Modify the style rules for the active and hover pseudo-classes by changing their color values, and then modify the style rule for the main element

by removing the currently properties and values and adding a background property and value Also modify the style rule for paragraph elements within the main element by removing the current properties and values

and adding a color, width, and margins Finally, modify the style rule for the body element by removing the

gradient background and applying a solid background color The following steps modify the style rules for the desktop viewport

1

•

color: #1D1D1C;

Trang 26

•

Figure 7–44

How big should I make my banner image?

The size of a banner image should be at least 1940 pixels wide to cover a large desktop screen If you are using a digital graph, select a high-resolution photograph, and then use a photo editor, such as Adobe Photoshop, to optimize the image for web use, as this will reduce the file size and reduce the time it takes to load the image on a page

To Add New Style Rules

to the Desktop Viewport

Create style rules to format the header and navigation elements so that both appear side-by-side, as indicated in the new wireframe Create other style rules to apply opacity to the figure element to give it a rich, interactive look In addition, create style rules to format the heading one element and the footer element Why?

The new style rules format the pages according to the design specified in the wireframe and for optimum desktop display.

First, create a new style rule for the header element to align the content to the left Then, create a new style rule for the nav element to specify a float, margins, and width Next, create two new style rules for the image

elements contained within the figure element to apply and remove opacity and to adjust the height of the image elements Create a style rule for the heading one element to format its color Finally, style the footer element

to apply a background color, margin, and padding The following steps create new style rules for the desktop viewport

Trang 27

HTML Chapter 7

• /* Style

for nav specifies a

float, margin, and width

Trang 28

4

•

enter

• /* Style

applies height and

opacity to images within

Trang 29

HTML Chapter 7

• /* Style

specifies a background

color, margin, and

padding for footer

element */

footer {

#2A2A2A;

Trang 30

Updating the About Us Page

The home page now displays the new look and design for the Forward Fitness Club Next, revise the About Us page to integrate additional HTML5 semantic elements and then style the page according to the new design

The About Us page contains groups of content that are not currently wrapped within a semantic element These groups of content include the Weights group, the Cardio group, and the Personal Training group Use a section element to group each

of these areas together The Common Exercises group is contained within a div element; however, change this from a div to a section element to integrate a

semantic element Once you have modified the About Us page, update the style sheet for tablet and desktop viewports

Break Point: If you want to take a break, this is a good place to do so You can exit the text editor now To resume at a later time, run your text editor, open the file called styles.css, and continue following the steps from this location forward.

To Add Section Elements

to the About Us Page

Add section elements to the About Us page to group content Why? Group content to improve semantic

design and search engine results Wrap each group of content on the page within a section element These

include the Weights group, the Cardio group, the Personal Training group, and the Common Exercises group

The following steps add section elements to the About Us page.

Trang 32

To Style the About Us Page

for a Tablet Viewport

Update the style sheet for the tablet viewport to format the section elements and to revise style rules

for the classes on the About Us page Why? Update the styles for the tablet viewport in the new design First, update

the style rule for the items and tablet classes Next, add a new style rule for a section element to apply

mar-gin and padding Then, create a new style rule to format heading one elements within a section Finally, create a style rule to format section anchor elements The following steps update the style rules for the tablet viewport

specifies bottom padding

for the section element

Trang 33

HTML Chapter 7

• /* Style

for h1 element within

the section element

Trang 34

specifies color and left

margin for the section

element */

section {

To Style the About Us Page

for a Desktop Viewport

Update the style sheet for the desktop viewport to format the section elements and to revise style

rules for the classes on the About Us page Why? Update the styles for the desktop viewport in the new design First,

remove the style rule for the items class Next, add a new style rule for a section element to apply color and

margin properties Then, create a new style rule to specify the color of anchor elements within a section The following steps update the style rules for the desktop viewport

Figure 7–62

Trang 35

HTML Chapter 7

• /* Style

for anchor element

within the section

Updating the Contact Us Page

The home page and About Us pages now display the new look and design for the

Forward Fitness Club Next, revise the Contact Us page elements and style the page

according to the new design

Figure 7–63

Figure 7–64

Trang 36

To Style the Contact Us Page

Update the style sheet for the tablet viewport to format heading two elements and the email link on the Contact Us page Why? Change the text color of the heading two element and remove the button appearance of the

email link, as this style is for the mobile viewport Create a new style rule within the tablet media query to style the

heading two element within the main element Then create a new style rule within the tablet media query to

style the contact class Specify a background color, color, and text decoration The following steps update the style rules for the tablet desktop viewports

To Modify the Contact Us Page

Wrap the telephone link and email link within separate paragraph elements on the Contact Us page

Why? Wrapping these elements within a paragraph element places each element within its own paragraph and subsequently

unblocks its surrounding content The following steps add paragraphs elements, add a class attribute and value, and

delete line breaks in the Contact Us page

to remove the button look of these elements

Figure 7–65

Trang 39

HTML Chapter 7

provides tips for good nutrition, guidelines for a healthy diet, and a featured recipe of

the week To have the new page follow the same design as the other pages in the site,

use the fitness template to create the page and then add HTML5 semantic elements

Style the page to be consistent with the other pages

You drafted a wireframe for the Nutrition page in tablet and desktop viewports,

which uses article and aside elements, as shown in Figures 7–70 and 7–71 This page

uses a three-column layout for tablet and desktop viewports The mobile layout will

remain the same as the other pages, a one-column layout Create the nutrition page

and then update the style sheet

Header Navigation Banner Div Main

Article Image Aside

Figure 7–70

Navigation Header

Banner Div

Footer

Main Article

Image Aside

Article Image Aside

Figure 7–71

To create the three-column layout, modify existing style rules and create new style

rules for tablet and desktop viewports Use the overflow property to specify how to overflow property to specify how to overflow property

manage content when it “spills over” into another element Similar to the clear property,

the overflow property can help resolve display issues related to a nearby floating element

To Create the Nutrition Page

Use the template, fitness.html, to create the Nutrition page After creating the

page, insert a banner image The following step creates the Nutrition page

1

2

enter

3 <! Nutrition Page Banner >

class="desktop">

Multiple Columns Using CSS3

You can create columns using the CSS3 property called column-count The value used for this property indicates the desired number

of columns Several other properties can be used with the column-count property, such as column-gap, column- width, and column-rule

Nutrition page wireframe for

tablet viewport

Nutrition page wireframe for desktop viewport

Trang 40

5 enter <img src="images/nutritionBanner.jpg" alt="nutrition banner image">

</div>

To Add article and aside

Elements to the Nutrition Page

Insert three article elements within the main element and add content to each Near the bottom of

each article, insert an aside element with additional content Why? The article elements will contain new page

content, including tips, guidelines, and recipes Inside each article element, add a heading element, an image element,

paragraph elements, unordered list elements, and an aside element The following steps add article elements to the Nutrition page

Tiêu đề	Improving Web Design with New Page Layouts
Trường học	Cengage Learning
Chuyên ngành	Web Design
Thể loại	Educational Material
Năm xuất bản	2017

Định dạng
Số trang	302
Dung lượng	13,71 MB