你的第一个多画面结构网站

创造你自己的结构与内容

对任何网站来讲, 网站的内容一直都是最重要的因素。因此,我们应该为了内容而设计而不是由设计决定内容。在这个指南中,我们先确定我们需要的内容,在此内容的基础上创建一个页面结构,然后在简单的能够适应任何宽度的线性布局中进行展示。

创建页面结构

我们需要展示:

  1. 一个文本域,能够在高层次描述我们的产品 “CS256: 移动web开发” 教程
  2. 一个表单,收集对我们产品有兴趣的用户的信息
  3. 一个深度的介绍和视频
  4. 使用中的产品的图像
  5. 一个数据表格,用来支持描述的信息

关键要点

  • 首先确定你需要的内容。
  • 为宽和窄的视区勾画出信息架构 (注:Information Architecture, IA)。
  • 使用内容创建页面的框架,但不添加样式。

我们也为宽和窄的视区画了粗略的信息架构和布局。

Narrow Viewport IA Wide Viewport IA

这样可以很容易的转换为在下面的项目中使用的粗略的框架页面。

    <!doctype html>
    <html>
      <head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>CS256: Mobile Web development - structure</title>
      </head>
      <body>
        <div id="headline">
          <h1></h1>
          <h2></h2>
          <div id="blurb">
            <p></p>
            <ul>
              <li>
            </ul>
          </div>
          <form method="post" id="register">
          </form>
        </div>
        <div id="section1">
          <h2></h2>
          <p></p>
          <ul>
            <li>
          </ul>
          <video></video>
        </div>
        <div id="section2">
          <h2></h2>
          <p></p>
          <div id="images">
            <img>
          </div>
        </div>
        <div id="section3">
          <h2></h2>
          <p></p>
        </div>
        <div id="footer">
          <p></p>
        </div>
          </body>
    </html>
查看完整示例

向页面添加内容

网站的基本结构已经完成。我们知道我们需要的部分,在这些部分中要展示的内容,以及在整个信息架构中的位置。我们现在可以开始构建出这个网站了。

注意

  • 样式稍后再加

创建标题和表单

标题和请求通知的表单是我们页面的关键组件。这些必须要立即展示给用户。

在标题中,添加一些简单的内容去介绍课程。

    <div id="headline">
      <h1>Mobile Web Development</h1>
      <h2>Building Mobile Web Experiences</h2>
      <div id="blurb">
        <p>So you've heard mobile is kind of a big deal, and you're not
        sure how to transform your traditional desktop-focused web apps
        into fast, effective multi-screen experiences.</p>
        <p>This course is designed to teach web developers what
        they need to know to create great cross-device web
        experiences.</p>
        <p>This course will focus on building mobile-first web apps,
        which will work across multiple platforms including:</p>
        <ul>
          <li>Android,
          <li>iOS,
          <li>and others.
        </ul>
      </div>
      <form method="post" id="register">
      </form>
    </div>
    
查看完整示例

我们还需要完成这个表单。它是一个简单的表单,来收集用户名,电话号码和一个适合给他们打电话的时间。

所有表单都应该有标签(label)和占位文字(placeholder),方便用户能快速锁定焦点,明白他们应该如何填写,以及帮助辅助工具理解表单的结构。

我们将添加语义类型,使其能在移动设备上快速简单的让用户输入内容。例如,当输入一个电话号码时,用户只应该看到一个拨号键盘。

    <form method="post" id="register">
       <h2>Register for the launch</h2>
       <label for="name">Name</label>
       <input type="text" name="name" id="name"
          placeholder="Thomas A Anderson" required>
       <label for="email">Email address</label>
       <input type="email" name="email" id="email"
          placeholder="neo@example.com" required>
       <label for="tel">Telephone</label>
       <input type="tel" name="tel" id="tel"
          placeholder="(555) 555 5555" required>
       <input type="submit" value="Sign up">
    </form>
    
查看完整示例

创建视频和信息部分

内容中的视频和信息部分会包含更深入的信息。它会包括一个我们产品特性的项目符号列表,也会包含一个视频的占位符,其中展示我们的产品正在为用户工作。

    <div id="section1">
      <div class="container">
        <h2>What will I learn?</h2>
        <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p>
        <p>You'll understand what it takes to:</p>
        <ul>
          <li>build great web experiences on mobile devices</li>
          <li>use the tools you need to test performance</li>
          <li>apply your knowledge to your own projects in the future</li>
        </ul>
        <video controls poster="udacity.png">
          <source src="udacity.mp4" type="video/mp4"></source>
          <source src="udacity.webm" type="video/webm"></source>
          <p>Sorry your browser doesn't support video.
             <a href="udacity.mov">Download the video</a>.
          </p>
        </video>
        <br>
      </div>
    </div>
    
查看完整示例

视频通常用一种更加互动的方式来描述内容,通常用来展示一个产品或概念。

通过遵循最佳实践,你可以很容易的在你的网站上集成视频。

  • 添加 controls 属性让人更方便的播放视频。
  • 添加 poster 图像给用户视频内容的预览。
  • 基于支持的视频格式,添加多个 <source> 元素.
  • 添加备用文字让人下载,如果他们不能在窗口内播放。
    <video controls poster="udacity.png">
      <source src="udacity.webm" type="video/webm"></source>
      <source src="udacity.mov" type="video/mov"></source>
      <p>Sorry your browser doesn't support video.
         <a href="udacity.mov">Download the video</a>.
      </p>
    </video>
    
查看完整示例

创建图像部分

没有图像的网站会显得有点无聊。网站上有两种类型的图像:

  • 内容图像 — 内联在文档中的图像,用来传递关于内容的额外信息。
  • 样式图像 — 用来让网站看起来更好看的图像;通常是背景图像,图案和渐变。我们将会在下一篇文章中介绍.

图像部分是我们会在产品中用到的内容图像的集合。

内容图像对传递网页的含义是至关重要的。联想一下报纸文章中使用的图像。 我们所用的图片是这个项目的导师们,Chris Wilson, Peter Lubbers 和 Sean Bannet。

    <div id="section2">
      <h2>Instructors</h2>
      <p>The worlds leading mobile autorities</p>
    
      <div id="images">
        <img src="chriswilson.png" alt="Chris Wilson Course Instructor">
        <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor">
        <img src="seanbennett.png" alt="Sean Bennet Course Developer">
      </div>
    
      <br>
    </div>
    
查看完整示例

图像缩放设置为屏幕宽度的100%。这会在移动设备上工作良好,但在桌面上则没那么好。我们将在响应式设计部分解决这个问题。

添加表格化数据部分

最后的部分是一个简单的表格,用来显示关于产品的具体产品统计。

表格应只用来展示表格数据,如信息模型。

    <div id="section3">
      <h2>Mobile. Why should I care?</h2>
      <p>It is huge.  Everywhere.</p>
      <table>
        <caption>
          <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p>
        </caption>
        <thead>
           <tr>
             <th>Country</th>
             <th>Desktop share</th>
             <th>Tablet share</th>
             <th>Mobile share</th>
           </tr>
        </thead>
        <colgroup>
           <col span="1">
           <col span="1">
           <col span="1">
           <col span="1">
        </colgroup>
        <tbody>
         <tr>
            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td>
            <td data-th="Desktop share">32%</td>
            <td data-th="Tablet share">1%</td>
            <td data-th="Mobile share">67%</td>
          </tr>
          <tr>
            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td>
            <td data-th="Desktop share">69%</td>
            <td data-th="Tablet share">13%</td>
            <td data-th="Mobile share">18%</td>
          </tr>
          <tr>
            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td>
            <td data-th="Desktop share">69%</td>
            <td data-th="Tablet share">9%</td>
            <td data-th="Mobile share">22%</td>
          </tr>
          <tr>
            <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td>
            <td data-th="Desktop share">86%</td>
            <td data-th="Tablet share">4%</td>
            <td data-th="Mobile share">10%</td>
          </tr>
        </tbody>
      </table>
      <br>
    </div>
    
查看完整示例

大多数网站需要一个footer来展示某些内容,比如免责声明,使用条款,以及其他的一些不应该放在主导航栏的内容。

在我们的网站上,我们只链接了使用条款,联系页面,以及一个社交媒体简介页面。

    <div id="footer">
      <div class="container">
        <p>We always need a footer.</p>
      </div>
    </div>
    
查看完整示例

总结

我们已经创建了网站的大纲,我们已经确定了所有的主要结构元素。我们也确保我们准备好了所有相关的内容来满足我们的业务需求。

Content

你会注意到现在的页面看起来很糟糕;这是故意的。内容是任何网站中最重要的方面,我们需要确保我们有一个良好坚实的信息架构和密度。本指南已经给我们了一个很好的构建基础。我们将会在下个指南中添加内容的样式。

除非另有说明,本网页的内容采用知识共享署名3.0许可和代码示例都基于Apache2.0许可。如需详细资讯,请参阅我们的网站政策

回到顶部