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

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

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

大体框架很明白，给定网页内容，根据规定排版，建立多种盒子，以及盒子各种属性的设置等，辅助完成设计，添加超链接、背景色等，再加上网页设计的语言也算不上编程语

言，所以学起来希望不会太难，凡事基础很重要，接下来逐步学习，总结，分享！

赐教！

网页设计入门<一>的更多相关文章

  1. HTML 5网页设计入门必读（书）

    今天看了一本由人民邮电出版社出版.邢薇薇 郭俊飞 王雪翻译的<HTML 5网页设计入门必读>,在此整理一下知识点,以及写一些自己的读后感. 本书的开章还是和大部分HTML 5书籍一样,用极 ...

  2. 新编html网页设计从入门到精通 (龙马工作室) pdf扫描版​

    新编html网页设计从入门到精通共分为21章,全面系统地讲解了html的发展历史及4.0版的新特性.基本概念.设计原则.文件结构.文件属性标记.用格式标记进行页面排版.使用图像装饰页面.超链接的使用. ...

  3. 新编html网页设计从入门到精通 (龙马工作室) pdf扫描版

    新编html网页设计从入门到精通共分为21章,全面系统地讲解了html的发展历史及4.0版的新特性.基本概念.设计原则.文件结构.文件属性标记.用格式标记进行页面排版.使用图像装饰页面.超链接的使用. ...

  4. 网页设计，Access入门 2010，数学

    网页设计(表格) 创建表格:插入---表格---设置表格大小---确定.(按Ctrl键可多选单元格) 插入图片在表格:光标在单元格---插入---图像---选择图像---确定. 表格属性:属性(屏幕下 ...

  5. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  6. HTML&CSS精选笔记_HTML与CSS网页设计概述

    HTML与CSS网页设计概述 Web基本概念 认识网页 网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频以及Flash等. 名词解释 Internet网络 就是通 ...

  7. HTML 5+CSS 3网页设计经典范例 (李俊民,黄盛奎) 随书光盘​

    <html 5+css 3网页设计经典范例(附cd光盘1张)>共分为18章,涵盖了html 5和css3中各方面的技术知识.主要内容包括html 5概述.html 5与html 4的区别. ...

  8. Dreamweaver Flash Photoshop网页设计综合应用 (智云科技) [iso] 1.86G​

    全书共15章,主要包括网页制作基础.Dreamweaver CC网页制作.Photoshop CC网页图像设计.Flash CC网页动画设计以及综合案例实战5个部分.通过本书的学习,不仅能让读者学会三 ...

  9. 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版

    网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...

随机推荐

  1. jquery 记住账号 记住密码

    <body> <label><input type="checkbox" onclick="loginBtn_user()" /& ...

  2. 用css以写代码形式画一个皮卡丘

    我的个人网站是通过写代码的形式来形成一个网站的,前一阵子在某个大神的github上看到他用写代码的形式来完成一个皮卡丘,于是心血来潮花了半个小时,也完成了一个作品. 这其中涉及到的知识点也不是很复杂, ...

  3. Bzoj4869: [Shoi2017]相逢是问候

    题面 传送门 Sol 摆定理 \[ a^b\equiv \begin{cases} a^{b\%\phi(p)}~~~~~~~~~~~gcd(a,p)=1\\ a^b~~~~~~~~~~~~~~~~~ ...

  4. [BZOJ2296] [POJ Challenge] 随机种子

    Description 1tthinking除了随机算法,其他什么都不会.但是他还是可以ac很多题目,他用的是什么呢?他会选择一个好的随机种子,然后输出答案.往往他选择的一个好的种子可以有99%的概率 ...

  5. ajax错误处理 500错误

    在使用ajax请求的时候 ,如果服务器返回的是500错误,或者其他非正常的http错误状态码时 会提示下面的错误  而我们需要把错误信息处理出来 $.ajax({ type:'get', url:&q ...

  6. sqlserver存储过程及临时表在统计中的应用

    use ResourceShare --统计使用情况 alter PROCEDURE StaSheryUse @start datetime, @end datetime, @orgId int AS ...

  7. java 向上转型与向下转型

    转型是在继承的基础上而言的,继承是面向对象语言中,代码复用的一种机制,通过继承,子类可以复用父类的功能,如果父类不能满足当前子类的需求,则子类可以重写父类中的方法来加以扩展. 向上转型:子类引用的对象 ...

  8. MSIL实用指南-局部变量的声明、保存和加载

    这一篇讲解方法内的局部变量是怎么声明.怎样保存.怎样加载的. 声明局部变量声明用ILGenerator的DeclareLocal方法,参数是局部变量的数据类型,得到一个局部变量对应的创建类LocalB ...

  9. iOS 神秘而又强大的传感器系统 (附demo)

    iOS中的各种传感器: 随着科技的发展,机器感知人的行为!Goole的无人驾驶汽车到李彦宏的无人驾汽车,都带入了各种计算及传感. 为了研究自然现象和制造劳动工具,人类必须了解外界的各类信息.了解外界信 ...

  10. WordPress菜单“显示选项”无法显示的解决办法

    比较新版本的WordPress会出现点击“外观”——“菜单”右上角的“显示选项”无法打开的问题,而老版本的就没有这个问题,后台的其他页面中的这个 功能都可以正常使用,看来问题是因为中文版WordPre ...