网页设计与制作入门_网页设计基本步骤
大家好，又见面了，我是你们的朋友全栈君。
个站网页设计
首页_码到城攻码到城攻分享但不限于IT技术经验技巧、软硬资源、所闻所见所领会等，站点提供移动阅读、文章搜索、在线留言、支付打赏、个人中心、免签支付等功能
俗话说：技多不压身。实习周，网页设计是之一，边学边总结。。。
本次网页设计基于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 href="#">United States</a><span class="STYLE1"> ]</span></li>
<li>[ <a href="#">Canada</a><span class="STYLE2"> ]</span></li>
<li>[ <a href="#">China</a> <span class="STYLE3">]</span></li>
<li>[ <a href="#">Austrila</a> ]</li>
<li>[ <a 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://javaforall.cn/190931.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年9月21日 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
图片处理
图片处理（Image Processing，IP）是由腾讯云数据万象提供的丰富的图片处理服务，广泛应用于腾讯内部各产品。支持对腾讯云对象存储 COS 或第三方源的图片进行处理，提供基础处理能力（图片裁剪、转格式、缩放、打水印等）、图片瘦身能力（Guetzli 压缩、AVIF 转码压缩）、盲水印版权保护能力，同时支持先进的图像 AI 功能（图像增强、图像标签、图像评分、图像修复、商品抠图等），满足多种业务场景下的图片处理需求。