Dreamweaver 网页基础--HTML

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

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行

查看效果:

时间: 2024-10-13 07:30:42

Dreamweaver 网页基础--HTML的相关文章

Dreamweaver 网页基础--表单 及框架

1.3.2 表单 一.作用:表单(Form)作为网页与用户接触最直接.最频繁的页面元素,其在网站用户体验中占有最重要的位置.而表单也常常用于用户注册.登录.投票等功能,用于吸引新用户,留住新用户的重要工具.如果表单设计用户体验不高,无疑将会对网站用户粘性大大降低. 可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 表单包括两个部分:一部分是HTML源代码用于描述表单(例如,域,标签和用户在页面上看见的按钮),另一部分是脚本或应用程序用于处理提交的信息(如CGI脚本).不使用处理

网页设计Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

网页设计 Dreamweaver网页制作 商业网站建设案例课程 ASP.NET基础实例教程 淘宝开店教程 更多&gt;

热门推荐电脑办公计算机基础知识教程 Excel2010基础教程 Word2010基础教程 PPT2010基础教程 五笔打字视频教程 Excel函数应用教程 Excel VBA基础教程 WPS2013表格教程 更多>平面设计PhotoshopCS5教程 CorelDRAW X5视频教程 Photoshop商业修图教程 Illustrator CS6视频教程 更多>室内设计3Dsmax2012教程 效果图实例提高教程 室内设计实战教程 欧式效果图制作实例教程 AutoCAD2014室内设计 Aut

Dreamweaver网页设计代码大全

Dreamweaver网页设计代码大全Dreamweaver网页设计HTML语法大全由51RGB小编Q群162542073整理分享: 网页设计视频网站链接http://www.51rgb.com/mproductzh.aspx?classid=31 <!> 跑马灯 <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scro

《The Django Book》实战--第二章--动态网页基础

这章演示了一些最基本的Django开发动态网页的实例,由于版本不一样,我用的是Django 1.,6.3,有些地方按书上的做是不行的,所以又改了一些,写出来让大家参考. 这是一个用python写的一个显示当前时间的网页. 1.开始一个项目. 在命令行中(指定要保存项目代码的盘或文件夹下)输入 python ...\django-admin.py startproject djangobook  (虽然在环境变量Path中加入了django-admin.py的地址,但是在前面还是要加上路径名,不知

网页基础知识

网页基础知识 一.HTML 超文本标记语言 二.分类 1.静态页面(页面内容是代码写死的) 格式:.hrml  .htm 2.动态页面(页面内容是从数据库读的) 格式:.php   .aspx (.net) .jsp(java) 三.DW(工作区) 1.代码界面 2.设计界面 3.拆分 四.基础语法 1.最小单元成为标签 2.双标签元素 (1)两个标签构成 (2)格式:<标签名 属性>内容</标签名> (3)作用:主要作为内容容器 3.单标签元素 (1)有一个标签构成 (2)格式:

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

网页基础 第二部分--HTMLDOM操作 一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 1)通过id查找元素(document.getElementById();) <div id="d" ></div> var x=document.getElementById("d"); 2)通过标签名查找元素 <div id=&quo

第三章 动态网页基础

第三章   动态网页基础 一.概述 使用HTML开发静态网页,静态网页内容时固定的. 1.什么是动态网页 动态网页是指在服务器端运行的使用程序语言设计的交互式网页,它们会根据某种条件的变化,返回不同的网页内容. 1.    动态网页的优势 1.       交互性 网页会根据用户的要求和选择而动态改变和显示内容. 2.       自动更新 无需改变页面代码,便会自动生成新的页面内容,可以大大节省工作量. 3.       随机性 当不同的时间,不同的人访问同一网址时会产生不同的页面效果. 3.

爬虫基础 2.2 网页基础

2.2 网页基础 ????浏览器浏览的网页,均是浏览器根据超文本,CSS,以及,JS,的解解析规则,对服务器返回的数据进行解析加载,进而变成我们所见的页面. ? 2.21 网页的组成 ????1 HTML 构成网页的框架 定义网页的内容 ????2 CSS 构成框架中的元素的样式 规定网页的布局 ????3 JavaScript 对网页行为进行编程 动画,酷炫的效果等 ? ????1 HTML ????网页 括文字.按钮.图片 视频等各 复杂的元素,其基本就是 HTML . 不同类型的文字通过不