网页设计与制作入门_网页设计基本步骤

全栈程序员站长

发布于 2022-11-08 17:26:17

2.2K0

发布于 2022-11-08 17:26:17

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

个站网页设计

首页_码到城攻码到城攻分享但不限于IT技术经验技巧、软硬资源、所闻所见所领会等，站点提供移动阅读、文章搜索、在线留言、支付打赏、个人中心、免签支付等功能

https://www.codecomeon.com/

俗话说：技多不压身。实习周，网页设计是之一，边学边总结。。。

本次网页设计基于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>

以及得到的网页效果展示：