俗话说：技多不压身。实习周，网页设计是之一，边学边总结。。。
本次网页设计基于Adobe Dreamweaver CS6开发平台，根据实习老师的暴力指导，为什么说暴力呢？
没有基础，没有预告，打开软件就开始指导，上边说的风声水起，下边听的云里来雾里去，但是既来之，则学之，接受完暴力指导，就有如下代码：
以下为代码前半部分，文字不算注释，只是辅助理解加上去的：
<html><head><title>Chance Wen</title> /*网页标题*/<style type="text/css">body{margin:0px; /*外边距*/padding:0px; /*内边距*/background-image:url(images/background.gif); /*背景图片*/background-repeat:repeat-x; /*背景图片按X轴复制展开*/background-color:#cc9;} /*背景颜色*/#con{width:700px; /*在body下的一个盒子，背景中最大的一个盒子，可以存放本例中所有内容*/margin:60px auto 0px; /*60px是外边距，auto400px是上下自由，测试，似乎是下变化*/position:relative;} /*相对左上角，上下自由增加，基本就是下增加了*/#pro{ /*装四张图片的盒子*/list-style-type:none; /*去掉照片的点*/padding:0; /*内外边距相对于CON的盒子来说*/margin:0;}#pro li{ /*盒子中图片的属性处理*/float:left; /*水平图片*/padding:4px;} /*图片之间的内边距为8*/#pro li.last{ /*pro盒子中最后一个图片处理*/position:absolute; /*绝对可覆盖*/right:0;}h1{ /*插一张图片*/background-image:url(images/logo.png);background-repeat:no-repeat;height:191px;width:137px;position:absolute;top:100px;left:270px;}#intro{ /*装了文字的盒子，后有<div>...</div>之间的东西*/width:180px; /*设置盒子属性*/position:absolute;right:100px;font-size:12px; /*字体大小*/line-height:17px; /*行距*/font-family:Arial, Helvetica, sans-serif;} /*字体*/#mainmenu{ /*有超链接的盒子属性*/list-style-type:none;margin:0 0 0 20px;padding:0;font-size:12px;}#mainmenu a{ /*盒子中的内容，颜色，粗细，下划线*/color:#FFFFFF;font-weight:bold;text-decoration:none;}#mainmenu a:hover{ /*内容聚焦，以及聚焦以后的颜色是黑色*/color:black;}
以下是完整代码：
<html><head><title>Chance Wen</title> <style type="text/css">body{margin:0px; padding:0px; background-image:url(images/background.gif); background-repeat:repeat-x; background-color:#cc9;} #con{width:700px; margin:60px auto 0px; position:relative;} #pro{ list-style-type:none; padding:0; margin:0;}#pro li{ float:left; padding:4px;} #pro li.last{ position:absolute; right:0;}h1{ background-image:url(images/logo.png);background-repeat:no-repeat;height:191px;width:137px;position:absolute;top:100px;left:270px;}#intro{ width:180px; position:absolute;right:100px;font-size:12px; line-height:17px; font-family:Arial, Helvetica, sans-serif;} #mainmenu{ list-style-type:none;margin:0 0 0 20px;padding:0;font-size:12px;}#mainmenu a{ color:#FFFFFF;font-weight:bold;text-decoration:none;}#mainmenu a:hover{ color:black;}</style></head><body><div id="con"><ul id="pro"><li><img src="images/photo-1.jpg"/></li> <li><img src="images/photo-2.jpg"/></li> <li><img src="images/photo-3.jpg"/></li> <li class="last"><img src="images/photo-4.jpg"/></li></ul><h1></h1><div id="intro"><p>For more than 20 years, Chance Wen's photographs have brought incredible images of landscape to people around the world.</p><ul id="mainmenu"><li>[ <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">United States</a><span class="STYLE1"> ]</span></li><li>[ <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">Canada</a><span class="STYLE2"> ]</span></li><li>[ <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">China</a> <span class="STYLE3">]</span></li><li>[ <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">Austrila</a> ]</li><li>[ <a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="#">United Kingdom</a> ]</li></ul><p>Hardcover with jacket. More than 200 color photos.</p><p>Tel:+86-10-98765432<br />Fax:+86-10-98765432</p><p>e-mail:support@artech.cn</p></div></div></body></html>
以及得到的网页效果展示：
大体框架很明白，给定网页内容，根据规定排版，建立多种盒子，以及盒子各种属性的设置等，辅助完成设计，添加超链接、背景色等，再加上网页设计的语言也算不上编程语
言，所以学起来希望不会太难，凡事基础很重要，接下来逐步学习，总结，分享！
赐教！
转载于:https://www.cnblogs.com/melons/p/5791813.html