网页制作基本代码.docx
- 文档编号:30496081
- 上传时间:2023-08-15
- 格式:DOCX
- 页数:16
- 大小:280.30KB
网页制作基本代码.docx
《网页制作基本代码.docx》由会员分享,可在线阅读,更多相关《网页制作基本代码.docx(16页珍藏版)》请在冰豆网上搜索。
网页制作基本代码
复习提纲目录
第1章网页入门
1.1.1网页基本知识
1.什么是网页
由浏览器识别的用于显示信息的文件(信息包括:
新闻、微博、购物、邮件等)
2.什么是网站
由众多网页组成的一个群体(网页之间可以相互调用实现信息查看)
3.构成网页的元素:
文本、图像、动画、表格、其他。
1文本:
用于描述信息的文字
2图像:
增强信息的生动性和直观性
3动画:
强烈视觉冲击效果
4表格:
布局的合理性
5其他:
视频、背景音乐等
4.访问网页的三个要素
→网站的存储空间
⏹服务器用于网页的存放
→网站的域名
⏹通过域名指向需要访问的网页
→网页的访问地址
⏹通过域名访问,通常打开的是默认页面
⏹通过域名+网页名称进行访问
5.Dreamweaver工具的特点
1开发环境完备、简单易用
2所见即所得、支持可视化操作
3代码提示功能
4编写代码边看效果
6.编辑模式
三种编辑模式
1代码模式
2拆分模式
3设计模式
第2章图像与超链接
1、图像的应用场合
1)新闻图片
2)产品说明
3)LOGO设计
4)Banner设计
5)广告宣传
2、图像的作用:
图文并茂、直观、生动
3、图像路径的几种情况:
1)图像与网页在相同的目录下,直接写文件名称
2)图像位于网页目录下的某个子目录,先写子目录名字再写文件名称
3)图像位于网页目录之上,../文件名
4、图像的相关属性
图像的基本属性(图像地址、图像尺寸、可替换的文本)
5、图文混排的属性设置
边距(水平和垂直边距)
对齐方式(左对齐、右对齐、居中对齐)
6、超链接——使相互独立的页面可以互相访问。
目标窗口主要有两种:
_blank;(在新窗口中打开)
_self;(在原始窗口打开)
7、超链接的种类
1)电子邮件链接:
mailto:
jone@
代码:
jone@”target=”_blank”>jone 2)书签标记(锚链接) 先“命名锚记”再“创建链接” 代码: 3)空链接# 4)图像链接 5)文本链接 第3章列表 1、无序列表—
1)
属于项目列表
2)列表项之间无顺序之分
3)每个列表项前均有一个项目符号
2、无序列表的类型
通过type属性设置列表显示符号类型
1)disc:
实心圆点
2)square:
实心方框
3)circle:
空心圆点
3、有序列表
- —
1)属于项目列表
2)以数字作为列表项符号
4、有序列表的类型
1)1:
数字
2)A:
大写英文
3)a:
小写英文
4)i:
小写罗马字符
5)I:
大写罗马字符
5、定义列表
- —
- —
→用于具有特殊要求的列表显示
第4章网页中的表格
1、表格的作用
→页面布局整齐、美观
2、表格的基本结构
→单元格:
表格的最小单位
→行:
一个或多个单元格横向堆叠形成了行
→列:
一个或多个单元格纵向划分形成了列
3、表格的属性
宽度边框对齐方式单元格的填充
间距
“填充”效果“间距”效果
4、表格的行列关系
→表格由行列组成
→一行可以包含多列
→列由一个或多个单元格组成
5、单元格的属性
宽高背景色水平对齐垂直对齐
…… 跨行跨列
注意:
水平对齐(left、right、center)
垂直对齐(top、middle、bottom、baseline)
第5章网页中的表单
1、表单的典型应用
→登陆
→注册
→网上购物
→
问卷填写
→搜索信息
2、表单的属性
→表单ID
→动作
→方法
代码:
3、表单的主要元素
1)单行文本框(元素名称、字符宽度、最多字符数、初始值)
2)密码框
3)单选按钮
4)复选框
5)下拉列表
1997 6)按钮
按钮的类型(提交按钮、重置按钮、普通按钮)
7)文件域
8)隐藏域
9)多行文本域
4、设置表单元素的功能属性
→只读属性:
readonly
→禁用属性:
disabled
第7章使用CSS样式美化网页
1、什么是CSS
→CSS:
CascadingStyleSheets层叠样式表
→用于确定网页格式控制的规则
2、CSS的作用
→内容和样式的分离
→样式复用
→页面的精确控制
→搜索引擎的收录
3、Dreamweaver与CSS样式
1)标签导航器
→通过标签可以快速定位需要设置样式的位置
2)CSS选择器
→标签选择器:
以标签名作为样式名称
→类选择器:
以“.选择器名称”来表示样式,能实现套用
→ID选择器:
以元素id作为样式名
3)CSS属性面板
→CSS规则
→编辑规则
4、字体样式
字体修饰的内容
属性名称
说明
font-family
字体名称
font-size
字体大小
color
字体颜色
line-height
行高
5、文本对齐方式的设置
→属性:
text-align
→方式:
left、center、right
6、样式表修饰背景
背景修饰的内容
属性名称
说明
background-color
背景颜色
background-image
背景图像地址
background-repeat
背景图像平铺属性
background-position
背景图像位置
第9章HTML总结
1、常用的HTML标签
名称
说明
HTML的基本标签,所有的HTML内容都是放在该标签中的
HTML文档的头部,一般用于定义网页的全局属性,如标题、网页编码等
位于
标签内,用来设置网页的标题HTML文档的主体部分,与内容相关的HTML标签都是放在该标签中的
⏹全局标签
⏹文本与段落
名称
说明
段落
换行
~
一级标题~六级标题
加粗
斜体
水平线
⏹
特殊字符
名称
说明
空格
<
<
>
>
&
&
©
©(版权符号)
⏹图像标签及相关属性
名称
属性
说明
src
图像地址
alt
图像替代文本,当该图像无法显示时,在图像左上角显示该文本
width
图像宽度
height
图像高度
align
图像对齐方式,常用的可选值有:
left、right和absmiddle,分别表示左对齐、右对齐和绝对居中对齐
hspace
水平边距
vspace
垂直边距
⏹超级链接
名称
属性
说明
href
超级链接地址一般直接填写对应的页面地址即可,如果要设置电子邮件链接,则填写:
mailto:
邮箱地址
target
目标窗口设置为_self或者不进行设置,表示在本窗口打开,设置为_blank,表示在新窗口打开
⏹有序与无序列表
名称
说明
创建一个列表项
该标签位于
- 或
创建定义列表中的项目该标签位于
创建定义列表中项目的解释与
- 标签并列位于
- 的下方,可以出现多次
⏹表格
名称
属性
说明
width
表格宽度
border
表格边框
cellpading
单元格内填充
cellspacing
单元格间距
align
表格对齐方式可以使用的值有left、center和right,分别表示左对齐、居中对齐和右对齐。
如果不设置align属性,表示默认状态
⏹单元格属性
名称
属性
说明
width
单元格的宽度
height
单元格的高度
bgcolor
单元格的背景颜色
align
单元格水平对齐方式
可以使用的值有left、center和right,分别表示左对齐、水平居中对齐和右对齐
valign
单元格垂直对齐方式
常用的值有top、middle和bottom,分别表示顶端对齐、垂直居中对齐和底部对齐
⏹
表单及常用标签
名称
说明
- 内部,可以使用多次用来表示多个列表项
⏹定义列表
名称
说明
创建一个定义列表
- 内部
- 的内部,一般位于
创建一个无序列表
创建一个有序列表