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

本次网页设计基于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. 彻底禁用Chrome的“请停用以开发者模式运行的扩展程序”提示

    前言 作为一个前端程序员,难免会有一些专属自己的小扩展,没必要每一个都发到Chrome应用商店去,虽然可以勾选"开发者模式"来运行本地插件,但是每次启动都会有一个烦人的" ...

  2. 【BZOJ4566】找相同字符（后缀数组）

    [BZOJ4566]找相同字符(后缀数组) 题面 BZOJ 题解 后缀数组的做法,应该不是很难想 首先看到两个不同的串,当然是接在一起求\(SA,height\) 那么,考虑一下暴力 在两个串各枚举一 ...

  3. BZOJ4321: queue2

    题面 传送门 Sol 先设一个套路的状态:\(f[i][j]\)表示到第\(i\)个人,有\(j\)对冲突 但是我们不能确定\(i-1\),所以不好决策i的位置 所以再加一维\(0/1\),\(f[0 ...

  4. 流量操控技术---rinetd

    应用场景 实验机器:monomall防火墙,windows xp ,kali , windows 2003 场景假设,公司对你的办公电脑做了限制只允许53端口出去不能访问互联网. 突破思路:见上图 下 ...

  5. php类中双冒号和->的区别

    就是为了区分对象的方法和属性,和是访问类的静态方法和静态变量,类的静态方法和静态变量是类公用的,不需要实例化也能访问,而对象的方法和属性是每个对象特有的,因此必须先实例化.其他语言如C++,JAVA等 ...

  6. 微信小程序学习笔记（阶段一）

    一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...

  7. 使用Mifare卡加密数据 笔记

    Mifare 是最常用的射频卡,具体介绍网上太多,我就不说了.,很多城市的最早的地铁公交卡都是用这种卡,后来被破解后都换成智能卡了. 但是由于技术成熟,使用方便,成本低,现在很多小区门禁卡,停车卡,食 ...

  8. 百度API地图的标注不居中显示，而显示在左上角

    前言:今天弄个百度地图,弄了半天就是不居中,之前使用一直没有遇到这个问题.所以就一直在找原因. 百度地图对地图所在的div做了显示隐藏之类操作,标注就不再居中显示,而显示在左上角. 查了很久,有人提出 ...

  9. 动画:UIViewAnimationOptions类型

    动画 1.常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:动画过程中保证子视图跟随运动.**提交动画的时候布局子控件,表示子控件将 ...

  10. zabbix自定义key监控mysql主从同步超简单！

    原理:利用在slave上运行show slave status获取Slave_IO_Running和Slave_SQL_Running的值 1.在zabbix客户端配置文件中加入: 首先要对mysql ...