网页制作部分主要讲解三大部分：

1、HTML    超文本标记语言（ 全称：Hyper Text  Markup Language） 专门编辑静态网页

2、CSS      网页美化：是HTML控制的样式、格式的一部分

3、Javascript   脚本语言：主要是编写网页中动态效果的。

  第一部分   HTML

超文本标记语言专门用于编写静态网页。

1、打开Adobe Dreamwaver CS6

2、新建HTML文件：

3、编写网页文件：

最简单的方式是在记事本中编写

查看效果图：

一个< >代表一个标签，网页主要学习的是标签；

代码第一行代表引用国际标准

<html>代表网页的标签，表示一个网页的开始

</html>代表网页的结束

<head>.......</head> 代表一对，‘头部文件’表示用哪种编码方式，中间存放标题、样式的设定等等。

<title>.....</title>代表标题。

<boby>.....</boby>中间用于书写网页的内容

Boby中的属性：

1）Backgroud：不管是backgroud还是bgcolor在前，都是bacgroud覆盖bgcolor.

修改背景颜色：

修改背景图：文件路径倒着翻找文件夹，用.../.../来表示。

2）Text:设置boby中文本的颜色

3）topmargin=" 200" 上边距，文字距离网页顶部的间距，” ”中写间距数是多少

4）bottommargin=" "下边距

5）Left:左边距

6）Right：右边距，相当于word的长和宽

7）hidden="true" 隐藏整个网页

8）</br>换行，相当于回车

9）<strong> 你好</strong></br>  --加粗

10）<center>你 好</center>  ---居中

11）&nbsp;--空格

12）<b> 你好 </b>  --加粗

13）<i>你  好</i>  --倾斜

14）<u>你好</u>  --加下划线

15）<font>....</font> --字体修改（颜色、大小、字体更改）

color="#CC6699"

size="+5"

face="Times New Roman, Times, serif"  ---在<font内修改>

第二课时

1、处理文本的标签

1-6代表字号大小

<h1>标题1</h1>H1-h6字号依次变小

<p>.....</p> 段落，代表一段话

<ol> 列表(有序列表)

<li>行1<li>

<li>行2<li>

<li>行3<li>

<li>行4<li>

</ol>（有序列表）

<ul>(无序列表)

</ul>

2、超链接：<a  href >

<h1><a  href=“链接地址” target=”属性”>标题1</h1>

Target--打开方式

New/black--打开新的页面

parent--替换之前的页面

Self--在自身页面打开开

Top--在网页嵌网页时有区别

3、图片的属性：

1)<img src="图片的路径地址" width="30" height="100" />

2）name--图片的名字,不显示出来

3)width--宽度的设定

4）Height--高度的设定

5）Title--图片的标题，当鼠标放在网页显示的图片上时，会显示图片的标题。便于搜索引擎的查找。

6)loop--循环的意思

7）style--图片的样式、格式

4、表格（重点）

必备的三部分：

1）表格的开头和结尾：<table>.....</table >

2）表格的行：<tr>.....</tr>表示行

3）表格的单元格：<td>.....</td>表示单元格，没有列

<table>表格的属性：
1>width:宽度。可以用像素或百分比表示。常用960像素。

2>border:边框。常用值为0.

3>cellpadding:内容跟单元格边框的边距。常用值为0.

4>cellspacing:单元格之间的间距，常用值为0.

5>align:横向对齐方式。

6>bgcolor:背景色。

7>background:背景图片

<tr>中行的属性：

1>align 表示横向对齐方式三种（上、中、下）

2>bgcolor 表示背景颜色选择

3>bordercolor 表示表格边框的颜色选择

4>height 表示行的高度设置

5>hidden 隐藏

6>style:样式、格式的修改

7>title 代表标题的修改

8>valign 表示纵向的对齐方式三种（上、中、下）

<td>单元格的属性：

1>align 表示横向对齐方式三种（上、中、下）

2>valign 表示纵向的对齐方式三种（上、中、下）

3>bgcolor 表示背景颜色选择

4>bordercolor 表示表格边框的颜色选择

5>height 表示单元格的高度设置

6>width:表示单元格宽度设置

7>hidden 隐藏

8>style:样式、格式的修改

9>title 代表标题的修改

<th></th>表头，单元格的内容自动居中、加粗

align:单元格的内容的对齐方式

valign:单元格的内容的垂直对齐方式

width:单元格的宽度

height:单元格的高度

bgcolor:背景色

background:背景图片

【注意事项】：内容必须放在单元格中，单元格必须放在行里，行必须放在表格里。设置单元格的行高、列

高时，会同时影响对应的行或列。

单元格的合并（重点）：尽量用表格嵌套

colspan='n'  合并同一行单元格（后面写代码要减去相对应的列）

rowspan='n'  合并同一列单元格（从第二行开始减去相对应的列）

建立表格：

代码编写表格：

---Colspan=’2’代表单元格跨了2列

---rolspan=’3’代表单元格跨了3行

查看效果：

11-16网页基础--HTML的更多相关文章

  1. 9月5日网页基础知识 通用标签、属性（body属性、路径、格式控制） 通用标签（有序列表、无序列表、常用标签）（补）

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

  2. 【转载】webstorm11（注册，激活，破解，码，一起支持正版，最新可用）（2016.11.16更新）

    很多人都发现 http://idea.lanyus.com/ 不能激活了 很多帖子说的 http://15.idea.lanyus.com/ 之类都用不了了 最近封的厉害仅作测试 选择 License ...

  3. Beta周第7次Scrum会议(11/16)【王者荣耀交流协会】

    一.小组信息 队名:王者荣耀交流协会 小组成员 队长:高远博 成员:王超,袁玥,任思佳,王磊,王玉玲,冉华 小组照片 二.开会信息 时间:2017/11/16 17:03~17:17,总计14min. ...

  4. （3.11）mysql基础深入——mysql文件分类与配置文件管理

    (3.11)mysql基础深入——mysql文件分类与管理 关键词:mysql配置文件,mysql参数文件,mysql中的my.cnf 目录:mysql数据库文件分类: [1]参数文件:my.cnf ...

  5. 第28次Scrum会议(11/16)【欢迎来怼】

    一.小组信息 队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,阚博文小组照片 二.开会信息 时间:2017/11/16 17:20~17:42,总计22min.地点:东北师 ...

  6. 11-28 网页基础--JavaScript(DOM)

    网页基础 第二部分--HTMLDOM操作 一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 ...

  7. JSP技术基础（动态网页基础）

    前言:如果说html为静态网页基础,那么jsp就是动态网页基础,两者的区别就是jsp在html的前面多加了几行而已.当然,jsp里面对java的支持度更高.要明白,js只是嵌入在客户端的小程序小脚本而 ...

  8. 2018.11.16 浪在ACM 集训队第五次测试赛

    2018.11.16 浪在ACM 集训队第五次测试赛 整理人:李继朋 Problem A : 参考博客:[1]朱远迪 Problem B : 参考博客: Problem C : 参考博客:[1]马鸿儒 ...

  9. [11 Go语言基础-可变参数函数]

    [11 Go语言基础-可变参数函数] 可变参数函数 什么是可变参数函数 可变参数函数是一种参数个数可变的函数. 语法 如果函数最后一个参数被记作 ...T ,这时函数可以接受任意个 T 类型参数作为最 ...

  10. django 1.11.16之环境搭建

    django版本:django1.11.16  windows环境 python 3.6.3    !!!可先安装虚拟环境在进行环境搭建  1.安装django:pip install django= ...

随机推荐

  1. RPM和yum相关

    写在前面: 在这里可以知道rpm和yum的基本用法,找到更新本地yum源.搭建yum源的方法以及yum很琐碎的东西,包括yum源的优先级.用yum来安装或卸载CentOS图形界面包以及保存yum下载的 ...

  2. Jedis的八种调用方式（功能：事务，管道）

        1. packagecom.irwin.redis;     2.       3. importjava.util.Arrays;     4. importjava.util.List; ...

  3. 《Advanced Bash-scripting Guide》学习（六）：从/etc/fstab中读行

    本文所选的例子来自于<Advanced Bash-scripting Gudie>一书,译者 杨春敏 黄毅 ABS书上的例子: 代码块和I/O重定向 #!/bin/bash #从/etc/ ...

  4. 算法练习1---桶排序java版

    今天复习了桶排序. 例如现在有满分为10分的试卷,学生得分分别为2,8,5,3,5,7,现在要给这些分数按照从大到小输出,使用桶排序的思想:有11个桶,每个桶有一个编号,编号从0-10,每出现一个分数 ...

  5. ItelliJ IDEA下载及获取注册码详解

    Idea安装很简单: 官网地址下载:https://www.jetbrains.com/idea/ 注册码获取:http://idea.lanyus.com/   进入此网址,点击“获得注册码”复制使 ...

  6. 32 python 并发编程之协程

    一 引子 本节的主题是基于单线程来实现并发,即只用一个主线程(很明显可利用的cpu只有一个)情况下实现并发,为此我们需要先回顾下并发的本质:切换+保存状态 cpu正在运行一个任务,会在两种情况下切走去 ...

  7. LeetCode OJ：Binary Tree Level Order Traversal II（二叉树的层序遍历）

    Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...

  8. winform中的状态栏，以及在状态栏目上显示时间

    1:在winform上添加状态栏,并且在状态栏目上多添加几个label. step1:拖一个StatusStrip到winform上,名字默认为statusStrip1.找到statusStrip1的 ...

  9. nyoj-3-多边形重心问题（求多边形面积和中心）

    题目链接 /* Name:nyoj-3-多边形重心问题 Copyright: Author: Date: 2018/4/26 21:25:41 Description: ACM国际大学生程序设计竞赛 ...

  10. Python中类的约束

    如何在python中进行类的约束 使某些类必须有一些方法 1 python 的抽象类实现 === 约束性不高 Python是 解释性语言 from abc import ABCMeta from ab ...