是我正在尝试使用Dreamweaver CS6设计的网站。
当我定位并对齐所有内容时，我基本上使用我的1920x1080分辨率全屏预览Chrome，并使用了大量硬像素值而不是div尺寸和图像尺寸的百分比等。但是现在，我是如果你从一个较小的分辨率或一个较小的显示器上看它，它会害怕并且非常确定整个页面会严重破坏吗？在Dreamweaver中的所有视图（如桌面，平板电脑和手机视图）中，所有视图都会因为彼此重叠而严重破坏。
现在，我将尝试回过头来更灵活地展示一切，用div和媒体查询等方式包装好东西，但它有点压倒性。我应该怎么开始？我需要使用流体网格布局吗？如果我用Fluid Grid布局开始一个新项目并将所有内容复制过来，也许会更容易？
现在，我的攻击计划是将索引html划分为3个div（左上角1个，右上角1个，主要内容1个）并从那里开始。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Terry Bu - Portfolio Website</title>
<link href="_css/main.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="_css/mquery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="_javascript/sound-mouseover.js"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
</head>
<body>
<div id="kyoto_image">
<img class="bottom" src="_images/kyoto_crossfade.jpg" width="350" height="450">
<img class="top" src="_images/kyoto.jpg" width="350" height="450">
</div>
<div id="logo">
<img class="bottom" src="_images/logo_remake_crossfade.jpg" width="290" height="140">
<img class="top" src="_images/logo_remake_nocross.jpg" width="290" height="140">
</div>
<div id="hello">
<p>Hi, I'm Terry Bu, an aspiring web/app developer & programmer residing in Astoria, NY. </p>
<p>Thank you for visiting. <em>Dreamweaver CS6 was used for the design of this website. </em></p>
</div>
<nav>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a> </li>
<li><a href="#" class="MenuBarItemSubmenu">PORTFOLIO</a>
<ul>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="android.html">Android</a></li>
<li><a href="java.html">Java</a></li>
<li><a href="ruby.html">Ruby on Rails</a></li>
</ul>
</li>
<li><a href="http://terrybu.blogspot.com" target="blank">BLOG</a> </li>
<li><a href="contact.html">CONTACT</a></li>
<li><a href="misc.html">MISC.</a></li>
</ul>
</nav>
<div id="connect" class="rotate">
<span class="sns">got Social? </span>
<a href="http://www.facebook.com/schooloftruth" target="_blank"><img src="_images/icon_facebook.png" width="45" height="45" alt="terry fb"></a><a href="http://www.linkedin.com/in/terrybu" target="_blank"><img src="_images/icon_linked.png" width="45" height="45" alt="terry linkedin"></a><a href="http://www.quora.com/Terry-Bu" target="_blank"><img src="_images/icon_quora.png" width="45" height="45" alt="terry quora"></a><a href="https://twitter.com/burownrice/" target="_blank"><img src="_images/icon_twitter.png" width="45" height="45" alt="terry twitter"></a>
</div>
</div>
<div class="contentDiv">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel1.open(); return false; " >TECHNOLOGY</div>
<!--onmouseout="CollapsiblePanel1.close(); return false;"-->
<div class="CollapsiblePanelContent">
<p>As impressed as we already are with the fast advancement of technology, with inventions like Google, Facebook, Twitter and smartphones changing world culture, I believe we have only scratched the surface. </p>
<p>Technology will continue to be the glue that binds information and knowledge across all areas including education, science, public health, government, and private sector.</p>
<p>There is little doubt that the world's need for engineers, developers and programmers will continue to rise exponentially within the next several decades.</p>
<br>
</div>
</div>
<div id="yourchoice">Click, Hover, Your Choice</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel2.open(); return false;" >EDUCATION</div>
<div class="CollapsiblePanelContent"><p>I am self-taught in front-end web design (HTML,CSS, Dreamweaver) and in the basics of Java, Eclipse (Android App Development), Ruby and Python.</p>
<p>I graduated with a B.S. in Business Administration with a minor in Japanese from UNC - Chapel Hill. </p>
I am still in the process of teaching myself JavaScript, Ruby on Rails, PHP, MySQL and other skills necessary to build a powerful, functioning web application.
<br>
<br>
</div>
</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel" >
<div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel3.open(); return false;">Work Experience</div>
<div class="CollapsiblePanelContent">
<p>I come from a background in marketing and sales. I've always had an interest and passion for studying technology, and recently made the commitment to switch fully into the world of computer programming and web development in early 2014. </p>
<p>As for my technical work experience, I worked as a B2B Account Executive in the IT solutions industry, working closely with Cisco networking. I also have experience working as an Online Community Manager for a small business.</p>
<p>Please refer to <a href="http://www.linkedin.com/in/terrybu" target="_blank">http://www.linkedin.com/in/terrybu</a> for more detailed information on my work experience.</p>
<br>
</div>
</div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="playclip();"onmouseover="CollapsiblePanel4.open(); return false;">Vision</div>
<div class="CollapsiblePanelContent">
<p>Emerging resources available for self-education have allowed many people including myself to pursue new careers in technology. To give back to the people who made this possible, I want to help create free, high-quality self-education resources for people all over the world, following examples like Khan Academy. To ensure steady progress in future of society, I believe more knowledge should be free and accessible.</p>
<p>I also hope to gain enough expertise in coding so that I can impact a variety of different areas like public health, science, local government, education and nonprofit through channels like Github and Code for America. </p>
<br>
</div>
</div>
</div>
<div id="leftharsh">
<img src="_images/leftharsh.png" width="37" height="30">
</div>
<div id="leftarrow"><img src="_images/left-diag.png" width="37" height="30"></div>
<div id="rightarrow">
<img src="_images/right-diag.png" width="37" height="30">
</div>
<div id="rightharsh">
<img src="_images/rightharsh.png" width="37" height="30">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
</script>
<audio>
<source src="_sound/click.mp3"></source>
<source src="_sound/click.ogg"></source>
</audio>
<div id="sounddiv"><bgsound id="sound"></div>
<script type="text/javascript">
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
</script>
</div>
</body>
</html>
@charset "utf-8";
@import url("../webfonts/gotmilk/stylesheet.css");
/*#wrapper{
width:90%;
margin:20px auto;
max-width:960px;
}*/
/* Create a series of empty pseudo-elements... */
html:before,html:after,body:before,body:after{
content:"";
background: rgba(0,0,0,.7);
position:fixed;
display:block;
z-index:5;
}
/* ...and position them! */
html:before{
height:10px;
left:0;
right:0;
top:0;
}
html:after{
width:10px;
top:0;
right:0;
bottom:0;
}
body:before{
height:10px;
right:0;
bottom:0;
left:0;
}
body:after{
width:10px;
top:0;
bottom:0;
left:0;
}
#yourchoice {
position: absolute;
left: 45%;
top: 50%;
margin-top: 20px;
max-width: 300px;
max-height: 24px;
z-index: 7;
font-family: gotmilk;
font-size: 36px;
}
.rotate img {
-moz-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.rotate img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
h1 {
font-family: gotmilk;
font-size: 50px;
color: rgba(0,0,0,1);
}
#connect{
position: absolute;
top: 10px;
right: 5px;
width: 330px;
z-index: 6;
}
span.sns{
font-family: gotmilk;
font-size: 48px;
}
#android_images {
position: absolute;
top: 15px;
left: 20%;
float: right;
}
#android_images img{
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
@-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
45% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}
#android_images img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 5s;
-webkit-animation-direction: alternate;
}
#kyoto_image {
position: absolute;
top: 15px;
left: 25%;
float: right;
}
#kyoto_image img {
position: absolute;
left: -46px;
border-width: 5px;
border-style: solid;
border-color: rgba(0,0,0,1);
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
top: 31px;
}
#kyoto_image img.top:hover {
opacity:0;
}
#logo {
position: absolute;
left: 60%;
top: -5px;
width: 282px;
height: 134px;
z-index: 1;
}
#logo img {
position: absolute;
left:0;
top: 60px;
width: 282px;
height: 134px;
z-index: 1;
opacity: 1;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#logo img.top:hover {
opacity:0;
}
#hello {
position: relative;
top: 185px;
left: 50%;
margin-left: 30px;
width: 700px;
height: 102px;
z-index: 3;
text-align: left;
text-shadow: 1px 1px 10px rgba(0,0,0,0.4);
font-size: 19px;
}
nav {
position: relative;
left: 48%;
top: 187px;
width: 800px;
height: 39px;
z-index: 2;
background-color: #FFFFFF;
text-align: right;
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgba(102,102,102,1);
}
#technology {
position: absolute;
top: 542px;
left: 276px;
width: 411px;
max-height: 65px;
z-index: 5;
overflow: hidden;
-webkit-transition: max-height .5s ease;
-moz-transition: max-height .5s ease;
-ms-transition: max-height .5s ease;
-o-transition: max-height .5s ease;
transition: max-height .5s ease;
}
#education {
position: absolute;
top: 545px;
right: 300px;
width: 411px;
max-height: 400px;
z-index: 5;
}
#career {
position: absolute;
left: 902px;
top: 912px;
width: 752px;
max-height: 400px;
z-index: 5;
background-color: rgba(153,153,153,.5);
border-radius: 0px 30px 0px 30px;
}
#vision {
position: absolute;
left: 124px;
top: 1189px;
width: 584px;
max-height: 400px;
z-index: 6;
}
#video {
position: absolute;
top: 55%;
left: 30%;
overflow-style: auto;
overflow: hidden;
width: 600px;
}
#mapCanvas {
position: absolute;
top: 55%;
left: 30%;
border: 1px solid rgba(0,0,0,1);
}
#contactTerry{
position: absolute;
left: 50%;
margin-left: 50px;
top: 51%;
margin-top: 25px;
font-family: "MS Serif", "New York", serif;
font-size: 36px;
font-style: normal;
font-weight: bolder;
text-shadow: 2px 2px 2px rgba(214,214,214,1);
overflow: hidden;
width: 870px;
}
#js1 {
position: relative;
top: 350px;
margin-left: 35%;
width: 800px;
background: rgba(0,0,0,1);
text-align: left;
overflow: hidden;
margin-bottom:: -5px;
}
#gaptext {
position: relative;
top: 315px;
margin-left: 50%;
margin-top: 50px;
margin-bottom: -70px;
font-weight: bold;
font-size: large;
}
#js2 {
margin-top: -5px;
position: relative;
top: 400px;
margin-left: 35%;
width: 800px;
height: 600px;
background: rgba(0,0,0,1);
border: rgba(0,0,0,1), solid, 2px;
}
#codeAcademy{
color: rgba(255,255,255,1);
text-align: center;
padding: 10px;
overflow: hidden;
}
#sun {
position: absolute;
/* Positions the top-left corner of the image to be *
/* in the middle of the box */
top: 50%;
left: 50%;
border-color: red;
border-width: 1px;
border-style: solid;
border-radius: 50%;
box-shadow: 0 0 222px red;
/* Play with these numbers to see what it does */
height: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#earth {
position: absolute;
top: 0%;
left: 25%;
/* Style your earth */
height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
}
#earth-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
border-width: 1px;
border-style: dotted;
border-color: white;
border-radius: 80%;
-webkit-animation: spin-right 10s linear infinite;
-moz-animation: spin-right 10s linear infinite;
-ms-animation: spin-right 10s linear infinite;
-o-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
#apDiv1 {
position: absolute;
left: 46%;
top: 510px;
width: 196px;
height: 24px;
z-index: 7;
}
#leftharsh {
position: absolute;
width: 23px;
height: 27px;
z-index: 8;
left: 20%;
top: 517px;
}
#leftarrow {
position: absolute;
width: 23px;
height: 27px;
z-index: 8;
left: 40%;
top: 517px;
}
#rightarrow {
position: absolute;
width: 23px;
height: 27px;
z-index: 8;
left: 60%;
top: 517px;
}
#rightharsh {
position: absolute;
width: 23px;
height: 27px;
z-index: 8;
left: 80%;
top: 517px;
}
答案 0 :(得分：1)
我强烈建议重新开始。无论如何，您似乎正在进行网站学习，因此重新设计网站以提高响应速度将比尝试强制适应现有设计更有价值的学习体验。
我通常发现将非平凡布局的设计从固定宽度设计更改为响应式设计比创建空白纸张和思考更加困难 响应能力从一开始;对于初学者来说，如果你试图开始将固定宽度转换为流体布局，你最终可能会不断调整属性而不知道为什么这样可行而不是那个然后发现它实际上都不起作用，这会妨碍你的学习
答案 1 :(得分：1)
像Lie Ryan所说，我的建议重新开始。我知道，在你已经完成的所有工作之后听起来很糟糕，但相信我 - 尝试调整一个糟糕的基础最终会导致越来越多的不必要的复杂性，最终你会更加不堪重负，并且坚持使用一个摇摇晃晃的网站，这可能看起来不错，但<h1>中的一个字符太多而整个事情都崩溃了。
我将这种情况与设计房间进行比较。你开始设置所有东西然后你意识到床的位置使你不能适合你的桌子，你记得你想在这里的某个地方放钢琴，你需要一个地方来做你的瑜伽，你不能到达墙上的干擦板，因为梳妆台挡路等等。
选项一是去那里并开始移动东西;带上钢琴并试着把它挤进去，把你的瑜伽垫放下来，这样你就知道它需要多少空间并试着绕过它，为干擦板带上一个画架，这样它就不会落在梳妆台。换句话说，试图破解设计以使用您已有的东西。但是在这一点上，房间太乱了，你几乎无法移动。
选项二重新开始。将所有东西带出房间，直到它空着，裸露。现在你可以看看空荡荡的房间，然后看看所有会进入的东西，并提出一个更好的设计，考虑到你第一次忽略的所有事情。一次引入一个项目比尝试清理杂乱的空间要容易得多。
您的网站也是如此。重来。再次设计它，这次知道你在第1版中学到的所有东西 - 我保证，你的代码会更干净，你的网站看起来更好，功能更好，未来的维护/更新会更容易。
当您（如果）开始设计时，请从最小的屏幕开始。将浏览器窗口的大小调整为320像素，让您的网站看起来很漂亮。然后展开窗口，直到站点崩溃 - 添加断点并设计为正确。然后再次展开，直到网站中断。然后添加一个断点并设计它。继续前进，直到你有一个完全响应的设计。
我读了一篇最近名为7 Habits of Highly Effective Media Queries的文章。在其中，作者引用了Stephen Hay的一份声明，我认为它总结了良好的响应式设计，并强调它的真实性是多么简单：
＆＃34;首先从小屏幕开始，然后展开直到看起来像狗屎。是断点的时候了！＆＃34; - Stephen Hay
最后的想法：尝试使用和学习尽可能多的直接CSS。 WYSIWYG编辑器很好用，也很方便，但如果你知道代码，你会得到更好的服务。
答案 2 :(得分：0)
你最好重新开始。想象你是一名建筑师，你知道你想在你正在建造的房子里滑动墙壁，但是你首先用固定的墙壁建造房屋。那是怎么回事？ 这就是我在普通尺寸显示器上看到您网站的方式：http://prntscr.com/3iirfk
建立一个响应式网站不是你放在固定宽度的网站之上的东西。这是你开始项目的事情。
从一个流畅的网格开始，在你的设计＆＃34;裂缝时添加断点＆＃34;并阅读了大量有关响应式网页设计的文章和最佳实践。
我建议你阅读这个家伙所写的一切：http://bradfrostweb.com/
祝你好运！