网页设计与制作同名27042Word下载.docx
- 文档编号:15214250
- 上传时间:2022-10-28
- 格式:DOCX
- 页数:8
- 大小:20.75KB
网页设计与制作同名27042Word下载.docx
《网页设计与制作同名27042Word下载.docx》由会员分享,可在线阅读,更多相关《网页设计与制作同名27042Word下载.docx(8页珍藏版)》请在冰豆网上搜索。
1.4HTML的概念:
HTML是一种用来制作超文本文档的简单标记性语言。
1.4.3HTML标签
标签表示:
<
标签名称属性>
1.<
标签>
元素<
/标签>
标签的作用范围:
→<
.例:
h2>
demo<
即将demo这段文本以2号标题来显示,这对标签之外的文本不受这组标签影响。
2.<
标签属性名=”属性值”>
一个标签可以包含多个属性属性之间无先后次序,用空格分开。
例:
bodybackground=”back_ground.gif”text=”red”>
hello<
/body>
其中background属性用来表示HTML文档的背景图片,tect属性用来表示文本的颜色。
3.<
空标签:
标签单独出现,只有开始标签而没有结束标签。
(1)<
html>
和<
/html>
在最外层,表示这对标签里的代码是HTML语言。
(2)<
head>
/head>
标签里是网页中的头部信息,如网页总标题,网页关键字等。
无头部信息可不要这对标签
(3)<
title>
/title>
.在<
这对双标签的中间还包含着<
这对标签,网页标题的内容,标题出现在IE浏览器窗口。
考点:
p>
/p>
.文本段落的标签。
br>
:
换行符。
标签是空标签(它没有结束标签,因此这是错误的:
/br>
)。
快捷键:
F12预览网页;
Shift+Enter分段(行间距小);
前景色、背景色的调整:
前景色是alt+del背景色是ctrl+del前后交换是X
1.4.4HTML文档的基本结构p18-p19
一个简单的网页<
(头部信息)
(网页内容:
文本、链接、图像、动画等)
h1>
欢迎光临<
/h1>
frontsize=”5”face=”华文行楷”color=”red”>
这是我的第一个主页,欢迎大家的访问!
<
/front>
Ps:
去掉第6、7、8、10行是HTML的基本结构。
第2章DreamweaverCS5基础
2.1.2Dreamweaver软件界面P23图2-3
2.1.4视图模式种类及其适应情况
1)代码视图(写代码,主要用于这个,利用Dreamweaver工具编辑网页代码),
2)拆分视图(编写代码边看视图,直观地编辑网页中的元素,又可以观察到相关的代码)
3)设计视图(可视化设计,以所见所得的方式编辑网页)
第3章制作网页内容
1.创建超链接的方法:
给文字创建超链接;
给图片创建超链接;
添加email链接,mailto:
(冒号后不能空格)电子邮件地址;
添加空连接。
2.创建超链接的路径:
1)绝对路径:
是被链接文档的完整URL,包括所使用的传输协议(网页通常是:
http:
//)。
在创建外部链接时必须使用绝对路径。
2)文档相对路径:
就是以以前文档所在位置为起点到被连接文档经由的路径。
主要用于创建内部链接。
如:
images/google.gif
3)站点根目录相对路径:
是指所有路径都开始于当前站点的根目录。
站点根目录相对路径以一个正斜杠开始,该正斜杠表示站点根文件夹,如/images/google.gif.移动含有根目录相对连接的文档时,不需要更改链接。
4.DW新建CSS规则选择器的类型及其特点。
1类:
定义的时候前面必须加点(.),格式是.xxx,可以在一个页面中调用多次;
2.ID(用于任何HTML元素)名称以“#”开头,一般中只用在网页中的一个元素上
3.标签(重新定义HTML元素)可以实现用CSS重新定义HTML标签外观的功能。
4.复合内容(基于选择的内容):
a:
link超链接的正常状态,无任何动作
a:
visited访问过的超链接状态
a:
hover鼠标指针指向超链接的状态
active选中超链接状态
第4章CSS样式表
CSS样式表:
内部用于当前网页内部;
外部连接到多个网页上
1.创建内部CSS样式表:
(1)用DW打开网页文档4.3.1.html
(2)单击“样式表”面板中的“新建CSS规则”按钮,弹出“新建CSS规则”对话框
(3)在“选择器类型”下拉列表中选择“类(可用于任何HTML元素)”在“选择器名称”文本框里输入要定义的CSS样式的名称.ziti,在“规则定义”下拉列表中选择“仅限该文档”
(4)单击“确定”按钮,在“.ziti的CSS规则定义”对话框中,设置完成后,单击“确定”按钮,此时,可以在“CSS样式”面板里看到增加了一个.ziti的CSS样式
或
(1)执行“窗口“l"
CSS样式”命令.打开“CSS样式”面板。
(2)在“CSS样式”面板中单击“新建CSS样式”按钮。
在“CSS样式,面板的底部的按钮功能如下。
.“附加样式表”按钮:
在HTML文档中链接一个外部的CSS文件。
二
.“新建CSS样式,按钮:
编辑新的CSS样式文件。
.“编辑样式表’按钮:
编辑原有的CSS规则。
.“删除CSS样式”按钮:
删除选中的CSS规则。
(3)弹出“新建Css规则”对话框。
(4〕在对话框中如果设置“选择器类型’为“标签“,则在“选择器名称”下拉列表中选择一个HTML标签,也可以直接插入这个标签。
在“新建CSS规则’对话框中可以进行如下设置。
.选择器名称:
用来设里新建的样式表的名称。
.选择器类型:
用来定义样式类型,并将其运用到特定的部分。
如果选择“类”选项,要在“选择器名称”文本框中翰人自定义样式的名称,其名称可以是字母和数字的组合,如果没有输入符号“.”Dweaver会自动输入;
如果选择“标签”选项,需要在“选择器名称”下拉列表中选择一个HTML标签,也可以直接摘人这个标签;
如果选择“复合认”选项,需要在“选择器名称.下拉列表中选择一个选择器的类型.上海网站建设也可以直接输入一个选择器类型。
.规则定义:
用来设置新建的CSS语句的位置。
CSS样式按照使用方法可以分为内部样式和外部样式。
如果想把CSS语句新建在网页内部.可以选择“仅限该文档”选项.
(5)如果选择“复合内容”,则在对话框中的“选择器类型”下拉列表中选择“复合内容”选项.在“选择器名称’下拉列表中选择一个选择器的类型.也可以直接输人一个选择器类型。
(6)在此选择“选择器类型’下拉列表中的“类”选项.然后在“选择器名称’文本框中输入body。
由于创建的是css样式内部样式表,所以在“规则定义”中选择“仅限该文档”。
(7)单击“确定”按钮.弹出“body的css规则定义”对话框.在对话框中将“Font-family"
,设置为宋体,“font-size"
设置为12像素,"
Line-height"
设置为200%,"
Color"
设置为#000000。
(8)单击“确定”按钮.在"
Css样式"
面板中可以看到上海网站建设新建的样式表和属性。
2.外部样式表
(1)在开始页的“新建”列表中选择CSS选项新建一个外部CSS文件,将其保存为mycss.css
在“选择器类型”下拉列表中选择“类(可用于任何HTML元素)”在“选择器名称”文本框里输入要定义的CSS样式的名称.text,在“规则定义”下拉列表中选择“仅限该文档”
(3)单击“确定”按钮,在“.text的CSS规则定义”对话框中,设置完成后,单击“确定”按钮,此时,可以在“CSS样式”面板里看到增加了一个.text的CSS样式
(4)将上面创建的外部CSS样式表文件,连接到某个网页上,在DW中打开网页文件4.3.1.html
(5)在“CSS样式表”面板中单击“附加样式表”弹出的“连接外部样式”对话框中的“添加选项区域中”选中“链接”按钮,然后单击浏览按钮,选择创建的外部链式表文件mycss.css
(6)单击“确定”按钮,返回“链接外部链式表”对话框
(7)单击“确定”按钮,外部链式表文件mycss.css就会自动连接到网页中
内部样式表与外部样式表的区别
首先它们都是CSS,美化修饰网页的,其中:
内部样式表是写在HTML的<
里面的,内部样式表只对当前所在的网页有效;
如果很多网页需要用到同样的样式(Styles),用外部样式表,将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式的网页里引用这个CSS文件即可,较方便。
使用外部样式表,相对于内部样式的,有以下优点:
1、样式代码可以复用。
一个外部CSS文件,可以被很多网页共用。
2、便于修改。
如果要修改样式,只需要修改CSS文件,而不需要修改每个网页。
3、提高网页显示的速度。
如果样式写在网页里,会降低网页显示的速度,如果网页引用一个CSS文件,这个CSS文件多半已经在缓存区(其它网页早已经引用过它),网页显示的速度就比较快。
第5章网页布局
1.利用表格进行网页布局p104-105
tablewidth=”500”height=”200”border=”2”cellpadding=”1”cellspacing=”1”bordercolor=”#000FF”bgcolor=”#999999”>
tr>
tdbgcolor=”#999999”>
设置单元格背景<
/td>
td>
灰色背景<
黄色背景<
/tr>
&
nbsp;
tdalign=”center”>
居中对齐<
tdalign=”left”>
左对齐<
/table>
2.
body>
tablewidth=”760”boder=”0”cellspacing=”0”ceiipadding=”0”>
.&
rowspan=”2”>
5.2.4用表格布局网页图5-17p105
5.3框架
框架集定义了解P110
框架集<
frameset>
/frameset>
frame/>
框架可以进行拆分和删除
框架集建立后是否可以添加移动删除?
5.4.2DIV+CSS布局原理、特征p123
利用DIV+CSS布局网页是一种盒子模式的开发技术,通过由CSS定义的大小不易的盒子和盒子嵌
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 同名 27042