退彩票捕鱼机多少钱

書名： The HTML and CSS Workshop
作者名： Lewis Coulson Brett Jephson Rob Larsen Matt Park Marian Zburlea
本章字數： 646字
更新時間： 2021-06-11 12:54:59

Wireframes

When working on commercial projects, it is common for web page designs to be provided to web developers in the form of a wireframe. A wireframe is a low-fidelity design that provides enough information about a page for the developer to start coding. Usually, they will not include much visual design information and are focused on the main structure of a page. The following figure is an example of a wireframe for a new home page:

Figure 2.12: Example of a wireframe

Activity 2.01: Video Store Home Page

Suppose you are a frontend developer working for a tech start-up. You have been asked to build a home page for the online video store. You have been given the following wireframe from the UX designer:

Figure 2.13: Wireframe as per the UX designer's expectation

Using your newly acquired HTML5 knowledge, you can start to convert the wireframe into working HTML code. At this stage, you should just be concerned with writing the structural HTML tags and shouldn't worry about content right now.

The aim will be to achieve a web page similar the following output screenshot:

Figure 2.14: Expected output of video store home page

The steps are as follows:

Create a file named home.html in VSCode.
Use the following code as a page skeleton. Again, do not worry about not understanding the styling part of the code:
<!DOCTYPE html>
<html>
    <head>
        <title>Video store home page</title>
        <style>
          header,
          nav,
          section,
          footer {
            background: #659494;
            border-radius: 5px;
            color: white;
            font-family: arial, san-serif;
            font-size: 30px;
            text-align: center;
            padding: 30px;
            margin-bottom: 20px;
          }
          header:before,
          nav:before,
          section:before,
          footer:before {
            content: '<';
          }
          header:after,
          nav:after,
          section:after,
          footer:after {
            content: '>';
          }
        </style>
    </head>
    <body>

    </body>
</html>
Start adding the HTML5 structural elements inside the body tag one by one, the same as we did in Exercise 2.01, Marking up the Page.
As with Exercise 2.01, Marking up the Page, we will just add the tag name for content such as header and footer.

If you now right-click on the filename in VSCode on the left-hand side of the screen and select open in default browser, you will see the web page in your browser.

Hopefully, you are now getting a feel for the process of putting basic web pages together. We will build on this knowledge in the coming exercises.

Note

The solution to this activity can be found on page 580.

We are now ready to start making our web pages more realistic by learning some CSS page layout techniques.

官术网_书友最值得收藏!

The HTML and CSS Workshop

Wireframes

Activity 2.01: Video Store Home Page