以下是关于“网页设计制作试题及参考答案”的完整攻略：

一、准备工作

在开始制作前，我们需要完成以下几项准备工作：

确定设计风格和色彩搭配。
收集所需图片、文字等素材，并做好备份。
确定使用的网页制作软件，如Adobe Dreamweaver、Sublime Text等。

二、开始制作

下面是步骤：

1. 创建基础文件结构

在编辑器中新建HTML文件，并加入以下基础代码结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

2. 设计页面布局

根据设计要求，设计页面布局。在代码中使用HTML语言，采用块级元素和行内元素等标签完成页面结构的构建。CSS样式表用来管理页面的样式，使页面达到所需的视觉效果，为此，你需要手写一份CSS文件并在HTML文件中引入。

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">Header</div>
    <div class="content">
      <div class="sidebar">Sidebar</div>
      <div class="main">Main Content</div>
    </div>
    <div class="footer">Footer</div>
  </body>
</html>

.header {
  height: 100px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

.content {
  display: flex;
}

.sidebar {
  width: 300px;
  background-color: #fff;
}

.main {
  flex: 1;
  background-color: #f8f8f8;
}

.footer {
  height: 50px;
  background-color: #ccc;
}

3. 编辑页面内容

在页面结构中添加内容。根据设计要求，在制作过程中添加图片、文字、表格、链接等元素。

示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>网页标题</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">Header</div>
    <div class="content">
      <div class="sidebar">
        <ul>
          <li><a href="#">导航链接1</a></li>
          <li><a href="#">导航链接2</a></li>
          <li><a href="#">导航链接3</a></li>
        </ul>
      </div>
      <div class="main">
        <h1>欢迎来到我们的网站!</h1>
        <img src="images/banner.jpg" alt="广告横幅">
        <p>这是一个介绍我们产品的段落。</p>
        <table>
          <tr>
            <th>产品名称</th>
            <th>价格</th>
          </tr>
          <tr>
            <td>产品1</td>
            <td>58元</td>
          </tr>
          <tr>
            <td>产品2</td>
            <td>88元</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="footer">Footer</div>
  </body>
</html>