我正在制作一个非常简单的网站，只是为了练习，因为我打算进入这个领域。我有一个 27 英寸的桌面显示器，网站看起来很棒。当我在我兄弟的 19 英寸笔记本电脑上查看它时，它看起来很糟糕，因为宽度不适合屏幕。所以我更改了代码并输入了 width="100%" 。虽然该页面在每台计算机显示器上看起来都不错，但链接不可点击。我认为这是由于我添加到代码中的图像映射。
由于我对 HTML 编码相当陌生，因此我希望从知道自己在做什么的人那里获得有关此站点的一些帮助。
我的问题：如何更改我的代码以适应所有屏幕尺寸以及不更改图像映射以使链接可点击。这是我的代码：
<center>
<font face="verdana" size="1" color="black">
<img src="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/googlefrive.jpg" width="100%" usemap="#ImageMap1">
<div id="inlineframe" style="width:1274px; height:944px; position:absolute; left:289px; top:203px; z-index:1; overflow:auto;" usemap="#ImageMap1">
<iframe src="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/index.html" name="inlineframe" width=100% height=100% border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe>
<map id="ImageMap1" name="ImageMap1">
<area shape="rect" coords="54,216,261,338" href="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/info.html" target="inlineframe" />
<area shape="rect" coords="44,553,264,678" href="" target="inlineframe" />
<area shape="rect" coords="41,961,261,1084" href="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/specialmessage.html" target="inlineframe" />
</map>
</font>
</center>