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

本次网页设计基于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. 【BZOJ4869】相逢是问候（线段树，欧拉定理）

    [BZOJ4869]相逢是问候(线段树,欧拉定理) 题面 BZOJ 题解 根据欧拉定理递归计算(类似上帝与集合的正确用法) 所以我们可以用线段树维护区间最少的被更新的多少次 如果超过了\(\varph ...

  2. [Luogu4149][IOI2011]Race

    BZOJ权限题qwq Luogu sol 树上路径当然是淀粉质辣! 考虑所有过重心的路径.开一个\(10^6\)大小的数组\(t\)表示某一路径长度的最小边数,初始化为\(inf(i>0)\), ...

  3. 洛谷 P1017 进制转换

    推荐洛谷 题目描述 我们可以用这样的方式来表示一个十进制数: 将每个阿拉伯数字乘以一个以该数字所处位置的(值减1)为指数,以10为底数的幂之和的形式.例如:123可表示为 1*10^2+2*10^1+ ...

  4. LeetCode之Easy篇 ——（7）Reverse Integer

    7.Reverse Integer Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: Out ...

  5. 【python学习笔记】2.列表和元组

    # 第二章:列表和元组   序列中,每个元素都有个一个序号,序号以0开始,最后一个元素序号为-1,倒数第二个-2 序列类型包括,列表,元组,字符串,unicode字符串,buffer, xrange ...

  6. 关于browser-sync(在多个设备上进行网页调试)的问题点总结

    最近在看响应式网站的开发视频,其中有一部分非常有用,就是在多个设备上进行网页调试,通过使用browser-sync来实现,具体的步骤可以参照官网(http://www.browsersync.cn/) ...

  7. 【前端单元测试入门04】Karma

    Karma 官方介绍 A simple tool that allows you to execute JavaScript code in multiple real browsers. 即一个允许 ...

  8. Spring OAuth2 GitHub 自定义登录信息

    # 原因 最近在做一款管理金钱的网站进行自娱自乐,发现没有安全控制岂不是大家都知道我的工资了(一脸黑线)? 最近公司也在搞 Spring OAuth2,当时我没有时间(其实那时候不想搞)就没做,现在回 ...

  9. 11 个简单的 Java 性能调优技巧

    大多数开发人员理所当然地以为性能优化很复杂,需要大量的经验和知识.好吧,不能说这是完全错误的.优化应用程序以获得最佳性能不是一件容易的事情.但是,这并不意味着如果你不具备这些知识,就不能做任何事情.这 ...

  10. web前端加载优化-减少HTTP请求 （细节与办法）

    减少HTTP请求. 因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个.a) 合并CSS.JavaScr ...