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

本次网页设计基于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. 在TextBox中敲击回车执行ASP.NET后台事件

    1.在TextBox中敲击回车执行ASP.NET后台事件   0.说明 页面中有一个用于搜索的TextBox,希望能在输入内容后直接回车开始搜索,而不是手动去点击它旁边的搜索按钮 但因为该TextBo ...

  2. SpringMVC 框架系列之初识与入门实例

    微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.SpringMVC 概述 (1). MVC:Model-View-Control Contr ...

  3. 分类导航菜单的制作（附源码）--HTML

    不多说,直接贴代码哈!有疑问,可追加评论哈! demo.html: <!DOCTYPE html><html> <head> <title>分类导航菜单 ...

  4. npm包管理器小节一下

    淘宝npm镜像cnpm设置 npm install -g cnpm --registry=https://registry.npm.taobao.org 更新npm的版本 npm install np ...

  5. 描述下@Component，@Repository，@Service，@Scope，@Autowired，@Inject，@Value标记的作用

    1.@Component为通用注解. 2.@Repository为持久层组件注解. 3.@Service为业务层组件注解. 4.@Scope为Bean的作用域注解. 5.@Autowired,@Inj ...

  6. 推荐一款有趣的APP-种子习惯

    在女朋友的影响下接触到了种子习惯的app,一开始不觉得它有多大魅力,只知道它有契约的功能,有很多人分享自己的习惯,记录生活中的点滴. 毕业回家的寒假,家里比较冷,每天起床都需要莫大的勇气,挣扎半天最终 ...

  7. python数据类型——字符串类型

    字符串(string) 字符串,就是字符连成一串,是由字符组成的序列.字符串有编码问题,在之前我已经讲过.本节主要讲字符串的使用. 创建字符串,不用多说: a='123abcd' b='diamond ...

  8. spring中的aop的xml配置方式简单实例

    aop,即面向切面编程,面向切面编程的目标就是分离关注点,比如:一个骑士只需要关注守护安全,或者远征,而骑士辉煌一生的事迹由谁来记录和歌颂呢,当然不会是自己了,这个完全可以由诗人去歌颂,比如当骑士出征 ...

  9. java设计模式-----14、桥接模式

    Bridge 模式又叫做桥接模式,是构造型的设计模式之一.Bridge模式基于类的最小设计原则,通过使用封装,聚合以及继承等行为来让不同的类承担不同的责任.它的主要特点是把抽象(abstraction ...

  10. mysql初步学习

    1.insert_select 的使用:从一个表复制数据给另一个表 INSERT INTO students(name,sex,LikeBooksNUM,LikesportNUM,average) S ...