web前端——网页设计

最新推荐文章于 2025-10-07 09:37:22 发布

原创最新推荐文章于 2025-10-07 09:37:22 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #dreamweaver

本文档描述了一项任务，要求使用DreamweaverCS6建立一个名为mydreamhouse的站点，并创建一个名为house.html的HTML文件，设定特定的文档标题。页面需参照05.pdf的指南设计成时尚楼盘网页样式，但针对字体设置需使用HTML的基本font标签，而非CSS。完成后，需提交代码和网页截图，并按指定格式命名文档。

要求：

使用Dreamweaver CS6创建mydreamhouse站点，创建名为“house.html”的html文档，设置文档标题为包含自己姓名的文本，如：张三的美好家园，并将images资源文件夹拷贝如站点文件夹中；
根据“05.pdf”中的操作说明，将“house.html”设计成如图1所示时尚美庭居楼盘网页效果；
设计完毕后将house.html的代码和网页效果截图填写到本文档中，将本word文档的名称改为“完整学号-姓名-作业1”；

特别注意：由于05.pdf中Dreamweaver版本与CS6略有差别，且文本字体设置时涉及到CSS（还未学习），在house.html的设计过程中，凡是与文本字体设置有关的请在html代码中使用课上学习的font和相关字体标签进行设计，而不要按05.pdf文档说明来操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,td,th {
	font-size: 12px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
}
</style>
</head>

<body>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
  <td rowspan="3"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr></tr>
    <tr>
      <td rowspan="3"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="303"><img src="images/img_01.jpg" width="303" height="48" /></td>
          <td width="177" rowspan="4"><img src="images/img_02.jpg" width="177" height="565" /></td>
          <td>&nbsp;</td>
        </tr>
        <tr>
          <td rowspan="3"><img src="images/img_04.jpg" width="303" height="517" /></td>
          <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="34" bgcolor="#EFEBE2"><font size="4"><b>精品楼盘</b></font><font color="green"><b>个人投资项目推荐</b></font></td>
            </tr>
            <tr>
              <td height="75"><p>小户型主场5日开盘&nbsp;两居室6日开盘&nbsp;海景房7日预售</p>
              <p>阳光大户型推荐&nbsp;实用一居室推荐&nbsp;双层复式楼盘推荐</p></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td><img src="images/img_05.jpg" width="320" height="224" /></td>
        </tr>
        <tr>
          <td height="183"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td height="34" bgcolor="#EFEBE2"><font size="4"><b>时尚美庭居</b></font><font color="#001191"><b>SHISHANG</b></font></td>
            </tr>
            <tr>
              <td height="75"><p><font color="#007400" size="2"><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;绿色&nbsp;&nbsp;环境&nbsp;&nbsp;人文</b></font></p>
                <p> &nbsp;&nbsp;楼盘位于北京商业中心最密集区域，该区域商业面积超过  CBD商业总面保积60%。与国贸、嘉里中心、京广中心等商  档酒店、写字楼及使馆区为邻。&nbsp;</p><p>&nbsp;&nbsp;大规模小商铺，商业密集度高，布局合理，易于聚拢人  气，商业氛围浓厚。 </p></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td height="15" colspan="3"><table width="800" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td><img src="images/img_07.jpg" width="434" height="35" /></td>
              <td><img src="images/img_08.jpg" width="366" height="35" /></td>
            </tr>
          </table></td>
          </tr>
      </table></td>
    </tr>
  </table></td>
</tr>
</table>
</body>
</html>

测试结果截图：