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

本次网页设计基于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. Postgresql与Oralce常用用法区别总结

    日期操作 1. 操作当前日期和时间 oracle Select SYSDATE FROM dual; PostgreSQL Select CURRENT_DATE; Select NOW();返回日期 ...

  2. Android动态类生成预加载-dexmaker使用

    一.dexmaker简单介绍 dexmaker是运行在Android Dalvik VM上,利用Java编写,来动态生成DEX字节码的API.如果读者了解AOP编程的话,应该听说过cglib or A ...

  3. 清橙A1212：剪枝

    题面 清橙 Sol 一种新的树上\(DP\)姿势 从左往右按链\(DP\) 做法: 维护两个栈\(S1\),\(S2\) \(S1\)存当前的链 \(S2\)存分叉点以下要改的链 \(Dfs\),弄一 ...

  4. Marriage Match IV HDU - 3416

    题意 给你n个点,m条边,要求每条边只能走一次的S到T的最短路径的个数 题解 在我又WA又TLE还RE时,yyb大佬告诉我说要跑两遍SPFA,还说我写的一遍SPFA是错的,然而 啪啪打脸... 而且他 ...

  5. 百度定位一直出现4.9E -324的问题解决方法

    问题:华为mate10一直在申请百度定位的时候出现此问题并且定位权限和定位服务都打开的情况也是返回这个参数 明显没有定位成功,其他手机暂时没有出现(只要打开定位权限就会立即定位成功) 解决:在定位之前 ...

  6. Java 多线程之哪个对象才是锁？

    问题背景 在感觉正常的使用ArrayList的迭代删除的操作的时候,发现了如下的崩溃日志: Caused by: java.util.ConcurrentModificationException a ...

  7. DevExpress中GridControl自定义汇总列值（有选择性的汇总）

    今天碰到有同事遇到这个方面的需求,贴一下吧. private void gvTop_CustomSummaryCalculate(object sender, CustomSummaryEventAr ...

  8. 【python学习笔记】4.字典：当索引不好用时

    [python学习笔记]4.字典:当索引不好用时 字典是python中唯一内建的map类型 创建: key可以为任何不可改变的类型,包括内置类型,或者元组,字符串 通过大括号: phonebook={ ...

  9. SublimeText3插件安装及使用

    之前写过一篇文章讲了安装PackageControl,这里就不做赘述了,需要的朋友移步到这篇文章:Sublime Text安装package control 安装插件方法:通过preferencs-- ...

  10. 5分钟spark streaming实践之 与kafka联姻

    你:kafka是什么? 我:嗯,这个嘛..看官网. Apache Kafka® is a distributed streaming platform Kafka is generally used ...