网页制作详细讲解

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

网页设计应考虑的因素
❖网页的尺寸同一个网页在不同大小的显示器中的显示效果是不一样的，设计网
页时要考虑到这个问题。
❖网页的布局制作网页时，要考虑页面的整体布局，让页面的各种元素和谐、美
观地呈现，而不是杂乱的堆砌。
❖ 网页的色彩不同的内容需要搭配不同的色彩，只有使用了符合内容的色彩才能
设计出优秀的网页，杂乱无章的色彩堆砌反而会降低展示效果。
网页制作
Contents
1. 网页制作的基本概念、语言和工具 2. 网页制作的基本步骤和原则 3. 利用DreamWeaver制作网页 4. 站点发布与管理
第2页
基本概念
❖ 万维网（World wide Web）简称WWW(3W)，它是一种体系结构，通过它可以访问遍布于 Internet主机上的链接文档。
- 当客户向URL所指定的Web服务器发出请求时，Web服务器根据请求的程序返回相应的内容至客户端，按HTTP协议进行交互。
第5页
基本概念
❖URL（Uniform Resource Locator，统一资源定位器）：用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等
- 语法是：
➢ <A>标记 <A href="URL" name="text">文字</A> 超文本标记，也称为超链接
第25页
网页制作语言
➢ <Table>表格标记
HTML中最为复杂，同时又是应用最为广泛的标记之一。
主要使用在网页布局设计上。
一般形式是：宽度
背景色
背景图案
<TABLE WIDTH=" … " BGCOLOR=" … " BACKGROUND=" … "
第6页
基本概念
❖站点与网站 - 与某一主题相关的网页一般是集中存储在同一服务器的空间中的，服务器软件对该文件夹中的网页进行管理，并能使其他用户通过超链接或主页地址访问到该文件夹的网页，这样的文件夹可称为站点。而多个相关的站点，则可组成更大范围的网站。
❖HTML （Hypertext Markup Language）是超文本标记语言的缩写，它是构成网页的主要工具。 ❖动态HTML可以允许使用常规HTML、脚本文件、文档对象模块、绝对定位技术、动态央视、多媒体过滤器和各种其他技术。 - 最常见的应用：运行在浏览器端的各种脚本程序。
❖ 网页(Web页)：是纯文本格式的HTML文件，用任何文本编辑器都可以打开编辑。它也是一种可以在WWW网上传输，并被浏览器认识和翻译成页面显示出来的文件。
❖ 网站：是由一个一个页面构成的，是网页的有机结合体。 ❖ 主页：是网站的第一页，浏览者可以通过主页链接到网站的其他页。
第3页
基本概念
网页通常成组出现，并且这组网页之间通过超链接相互组织成为反映某个主题的网站。
➢ <LINK name="text" rel="text" href="URL"> 在当前文档和另一文档之间建立链接关系。
➢ <META NAME="text" CONTENT="text"> 描述与网页本身有关的信息。
第21页
网页制作语言
<BODY>定义页面最基本的属性
<BODY bgcolor=#ffffff text=#000000 link=#0000cc alink=#ff0000 >
17
18 19 20 21
HTML代码 <html> <head>
<title>兰菊</title> </head> <body background="images/bg.gif">
背景属性：
➢ BGCOLOR ➢ BACKGROUND ➢ BGPROPERTIES
背景色背景图案，该图案在页面内平铺若设置成FIXED，则背景图案不滚动
文字属性：用于设置文字的颜色
➢ TEXT
正文文字的颜色
➢ LINK
链接文字的颜色
➢ ALINK
当前激活的链接文字的颜色
➢ VLINK
已访问链接文字的颜色
第16页
网页设计应考虑的因素
❖弹出窗口尽可能少的使用弹出窗口。
❖互动与广大浏览者进行互动，以便根据收集的意见和建议来进一步改善
网站。
第17页
网页制作语言
❖超文本标记语言HTML (hyper text markup language)是一种描述文档结构的标注语言 ❖用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，Windows等） ❖HTML文档是一个纯文本文档，一般由控制语句和显示内容两部分组成，控制语句用来说明文字、图形、动画、声音、表格、超链接等。它以标记形式出现在文档中，所有标记用一对尖括号“<>”括起来。 ❖书写格式：<标记>指定内容</标记> ❖HTML语言不区分大小写，可以使用任何文本编辑器创建和编辑。 ❖HTML是由浏览器解释执行 ❖后缀名为“ .html ”或者“ .htm ”
第7页
基本概念
WEB网页的基本元素
❖ 文本 ❖ 图像 ❖ 导航栏（Navigation）
- 相当于网站的目录，通过一定的技术手段，为网站的访问者提供一定的途径，使其可以方便地访问到所需的内容。 - 导航条可以是按钮、文本或图像。 ❖ 表格 - 控制网页页面布局的有效方法 ❖ 表单 - 供浏览者提交填写的信息的交互网页
Align：单元格水平对齐方式 Valign：单元格垂直对齐方式 RowSpan：单元格的行跨度 ColSpan：单元格的列跨度
第27页
网页制作语言
【例】用HTML语言编写网页，网页中的表格第一行制作滚动字幕，在表格中放入图像并输入文字，如图所示。
行号 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
➢ <TD>表格中的单元格标记一般形式是：<TD WIDTH="…" HEIGHT="…" ALIGN="…" VALIGN="…" BGCOLOR="…" BACKGROUND="…" ROWSPAN="…" COLSPAN="…"> … …</TD>
Width：单元格宽度 Height：单元格高度 BGCOLOR：背景色 BACKGROUND：背景图案
第18页
网页制作语言
所有的HTML文档都应该遵循以下模板
<HTML>
<HEAD> </HEAD>
<BODY> </BODY>
</HTML>
HTML文档的第一个标记，表示该文档开始文件头：网页的标题等信息文件体：网页的主体区域 HTML文档的最后一个标记，表示该文档结束
网页制作语言
<HTML>
例如：申请邮箱时在网上填写的各个页面就是表单
第8页
基本概念
WEB网页的基本元素
❖ 超链接 ❖ 多媒体及特殊效果
- 声音、动画、视频等多媒体元素，以及悬停按钮、java控制、 ActiveX控件等。 ❖ CSS（Cascading Style Sheets）是层叠样式表的简称。 -主要功能：灵活地控制网页的样式、定位。 -常见应用：设置字体大小、设置字体在点击时变色、定位行高等。
第12页
网站的基本结构
❖ 线性网站：用于组织本身是线性顺序形式存在的信息，可以引导浏览者象翻阅书籍一样按顺序浏览整个网站。 ❖ 树状网站：类似目录系统的树型结构。 ❖非线性网站：线性网站和树状网站的结合。
第13页
网页制作的基本步骤
第14页
网页的制作步骤为： 1、决定主题、规划内容和建立网站架构图； 2、收集素材； 3、制作网页； 4、浏览和测试； 5、申请服务器空间并上传； 6、网站的维护和更新。
<服务类型>://<主机IP地址或域名>/<资源在主机上的路径> 例如：http://metc.sandau.edu.cn/index.asp
❖超链接：指站点内不同网页之间、站点与Web之间的链接关系，由链接载体（源端点）和链接目标（目标端点）两部分组成，可以使站点内的网页成为有机的整体，还能够使不同站点之间建立联系
<HEAD> <TITLE>简单的HTML例子</TITLE> </HEAD>
<BODY BGCOLOR=“#000000” TEXT=”FFFF00”> 欢迎光临无名的主页 这就是我 <IMG SRC=“images/wuming.gif”> 我常去的网站， <A href=“http://yahoo.com”> Yahoo! </A> </BODY>
留白属性：
➢ LEFTMARGIN ➢ TOPMARGIN
页面左侧的留白距离页面顶部的留白距离
第22页
网页制作语言
<BODY>中包含的常用标记：
➢ 标记定义文字的格式，可定义文字的颜色等属性。
➢ 颜色有三种表达的方式：颜色名码：文字 十六进制的颜色代码：文字 十进制的颜色代码：文字
行 BORDER=" … " CELLSPACING=" … " CELLPADDING=" … ">
<TR> …
边框
间距
边距
<TD> … </TD>
<TD> … </TD>
…
</TR>
单元格
</TABLE>
第26页
网页制作语言
➢ <TR>表格中的行标记一般形式是：<TR ALIGN="…" BGCOLOR="…">… …</TR>
第11页
NOTEPAD
网页制作工具
“所见即所得”的网页编辑工具：
FrontPage易学易用，适合于网页设计的初学者；
Dreamweaver强调的是更强大的网页控制、设计能力及创意的完全发挥，适合专业的制作人员使用。
其它网页制作工具：
包含在集成开发环境中，如IBM Websphere集成开发环境中的 Web应用工具，利用该工具可以交互的调试客户端和服务器端的代码，无需编程或较少编程就能够构造相关的数据驱动网页，由此简化了网站的开发过程。
……
Web服务器
提高下载速度超文本地址引用方便 Web页没有固定的长度
第4页
基本概念
❖FTP（File Transfer Protocol，文件传输协议）：是在计算机和网络之间交换文件的最简单的方法。
- FTP的主要功能是上传、下载文件，查询文件目录，更改文件名称及删除文件等。
❖Web服务器：放在网络中某个节点上的计算机，装有某种服务系统，拥有独立的IP地址。
➢ 标记在文本中强制换行
➢ <HR>标记水平线
第24页
网页制作语言
<BODY>中包含的常用标记：
➢ <Marquee> 标记滚动字幕，可设置背景色及字幕内容等。
➢ <IMG>标记 <IMG src="URL" alt="text" align=TOP/MIDDLE/BOTTOM> 把图像插入到网页中
第15页
网页设计应考虑的因素
❖网页减肥网页应尽量小，以便让网页的下载速度尽可能快。只有让用户尽快
地看到网页内容才能留住用户。
❖导航栏不论浏览者位于网站的哪个页面，都要能够保证浏览者快速跳转到
其下一个需要浏览的页面。
❖ 超链接设置超链接的格式设置与非超链接的格式不同，从而使超链接部分更为
明显。
第9页
基本概念
❖ Web网页的常规类型：
- 静态网页
URL通常以.htm、.html、.xml等形式为后缀
- 动态网页
URL一般以.asp、.jsp、.php、.perl和.cgi等形式为后缀
第10页
网页制作工具
可利用任何一种文字处理软件编辑Web文档（推荐：记事本） Web文档以纯文本格式存放，取名为*.html或*.htm。其中插入的HTML语言只有用浏览器才能被解释翻译，最终在浏览器窗口中呈现为图文并茂的网页
Fra Baidu bibliotek
➢ 文字格式的设置： 文字 文字
黑体斜体
第23页
网页制作语言
<BODY>中包含的常用标记：
➢ <H> 标记 <H#>文字</H#>：把括起来的文本作为标题，#从1到6，数字越
小标记的标题越重要，相应的字号也越大。
➢ 标记标识文本主体中两个段落之间的间隔。有两种方式表示,一般以第一种形式使用，作为段落的分隔符。 1) 文字文字 2) 文字
</HTML>
一个HTML文件总是由文件头（HEAD）和文件体（BODY）两部分组成。标记<HTML>和</HTML>用来说明本文件是一个HTML文件。
HTML语言在浏览器中被解释
第20页
网页制作语言
<HEAD>中包含的最为常用的元素有：
➢ <TITLE>标题文本</TITLE> 网页的标题，即显示在浏览器左上方的标题。