实验二静态Web网页的制作

合集下载

相关主题

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

六个学科门类的普通高等学校，由原隶属财政部的中南财
经大学和原隶属司法部的中南政法学院于2000年5月26日合并组建而成。
</body> </html>
主体（body）
‹#›
文档头部
➢ 文档头部：<head>……</head> 该部分包含页面的标题、序言、说明等内容，它
的内容不用以显示，而是影响整个网页的显示效果。 ➢ 主要标记：
<</D/DDD>><</B/BOODDYY>><</H/HTTMMLL>>
‹#›
② 换行标记 (单标记)
强迫文本换行（另起一行显示），后面不产生空行。但连Hale Waihona Puke Baidu
续多个 可产生多个空行的效果。
例 L4-3.htm ：
<html> <head><title>文字转行 </title></head>
<✓/hea该d>部分包括网页中实际显示的内容。可以包含 <body文> 字、图片、表格等各种内容。 <和✓fo国nt教在c育o文lo部r档=直#主属ff3体的30一中0>所还中以南可经财以济经添学政加、法法许大学多学、<属/管fo性n理t（>学是如为中主华干人，民兼共有文学、ba哲ck学g、ro理un学d等、六te个xt学、科l门eft类m的ar普g通in高等等）学，校，用由来原设隶属财政部置的网<页a h背ref景=“、htt文p:/字/ww、w页.zn边ufe距.ed等u.。cn”>中南财经大学
服务器端
‹#›
1. 相关概念（续）
网页中的常用术语：
✓ 浏览器：用于阅读网页中信息的一种软件工具，如 Internet Explorer（IE）、腾讯TT浏览器、谷歌的 Chrome、360浏览器等。
✓ 统一资源定位符（URL）：用来指定协议（如HTTP或 FTP）以及对象、文档、万维网网页或其他目标在 Internet的位置和存取方式。其格式为：协议://服务器地址/路径/文件名
✓ 超链接：实现网站中网页之间或者网站之间的连接，是网页中最常用的元素之一。
‹#›
2. Dreamweaver 2004 MX的基本操作
① 启动：双击桌面DW图标或者通过”开始” →”
应用程序”的方式启动
Dreamweaver 操作界面
② 文档的创建：文件→新建，按”创建”按钮
③ 文档的保存：文件→保存
正文区，放置网页中所显示信息的标志和属性
‹#›
例1：一个简单的网页文件L2-1.htm
<html>
头部（head）
<head>
<title>中南财经政法大学简介</title>
</head>
<body>
中南财经政法大学是中华人民共和国教育部直属的一所以
经济学、法学、管理学为主干，兼有文学、哲学、理学等
⑤ 执行HTML文件：使用”在浏览器中预览/调试” 图标或者在资源管理器中直接选择执行
⑥ 退出：文件→退出
‹#›
Dreamweaver 2004 MX首选参数的修改
在DW菜单中，选“编辑”→“首选参数”，在 “首选参数”对话框中： a) 选“分类”中的“常规”，把“用和 代替和”以及“使用CSS而不是 HTML标签”前的对话框复选框不选中。 b) 选“分类”中的“代码格式”，选中“自动换行”。
</a>和原隶属司法部的中南政法学院于2000年5月26日合并组建而成。 </body> </html>
‹#›
③ 标记属性
标记属性：指为了明确元素功能，在标记中描述元素的某种特性的参数及其语法。标记的语法格式：
<标记名属性名1＝“属性值1” 属性名2＝“属性值2”……> …… <／标记名>
‹#›
2. HTML基本语法
① HTML标记
➢ HTML标记实际上就是规定了各种内容的显示方式，例如有标记<html>、</html>、<head>、 </head>、<body>等。
➢ 标记写法：双标记、单标记
✓ 双标记：<标记名>…… </标记名> ✓ 单标记： <标记名>
➢ 起始标记和终止标记之间的部分，连同标记在内，称为HTML的元素。
HTML标记中，可以有多个属性，中间用空格隔开即可。另外，不同的标记一般有不同的属性，但也有一些属性是通用的，如left、right、color等。
‹#›
④ 注释语句
注释语句：又称为注释标记，在浏览网页时不会显示，只是在编辑文件时可以看到。适当使用注释语句，可以让网页的维护和更新变得十分方便。注释语句的格式： 
‹#›
3. Dreamweaver 2004 MX管理站点的建立
① 启动DW，在菜单栏中选择站点→管理站点。在弹出的管理站点对话框中，点击新建，然后输入站点的名字。
② 按下一步，选择“是，我想使用服务器技术”。因建立的是一个静态站点，在“哪种服务器技术？”，选择“无”
③ 按下一步，选择“在本地进行编辑和测试”，然后选择文件存贮位置。
‹#›
网页的制作既简单又复杂
使用各种所见即所得的网页制作软件，可以在完全不懂任何HTML规则或略知一、二的基础上设计出相当精美的网页。
但如果要对网页进行精细的调整，必须对 HTML语言有相当的认识才行。
HTML文件可以使用记事本、FrontPage、 Dreamweaver等任何文本编辑器编辑。本实验使用Dreamweaver 2004 MX 软件
常用的文字格式标记：段落、换行、预排版常用的文字样式标记：标题、文字、物理字符
‹#›
① 段落标记
英文段落标记： …… （可以是单标记）
✓ ：段落开始，且首行无空格；
✓ ：段落结束，且后面自动添加一空行。
✓ 连续多个的并不会产生多个空行。
✓ 段落有多种属性，常用的有：
‹#›
1. 相关概念（续）
网页的分类：
a) 按所处位置分：主页和子页
网页按所处位置分类
➢ 主页：进入一个网站的开始网页 ➢ 子页：所有非主页的网页
b) 按表现形式分类：静态网页和动态网页
✓ 静态网页：网页文件只有HTML标记，没有程序代码。
其网页文件后缀常为 .htm、.html等。
静态网页的工作原理
align= #
#取值：left ；center ；right。
中文段落标记： <dd> …… </dd>
✓ <dd>：段落开始，首行空两格； ✓ </dd>：段落结束，后面无空行。
例：
L4-2.htm：
L4-2.htm代码：
<<HHTTMMLL>><<HHEEAADD>> <<ttititlele>>段段落落标标记记<</t/tititlele>><</H/HEEAADD>><<BBOODDYY>> <<HH11>>钢钢铁铁巨巨人人的的ee化化之之路路<</H/H11>> <<DDDD>>位位于于美美国国宾宾夕夕法法尼尼亚亚州州BBeetthhlelehheemm的的BBeetthhlelehheemm钢钢铁铁公公司司，，…… ……实实现现销销售售收收入入4422亿亿美美元元。。<</D/DDD>> <<PP>>11．．参参股股在在线线交交易易市市场场<</P/P>> 如如同同许许多多传传统统经经济济巨巨头头一一样样，，…………3300倍倍的的增增长长，，成成效效甚甚佳佳。。 22．．部部署署电电子子采采购购系系统统参参股股投投资资，，…………平平台台与与网网络络的的支支持持。。………… 44．．人人力力资资源源管管理理与与客客户户服服务务人人力力资资源源…………以以使使其其能能够够在在新新兴兴的的电电子子商商务务市市场场继继续续保保持持领领先先优优势势。。 <<PP>>问问题题讨讨论论：：<</P/P>> <<DDDD>>11．．伯伯利利恒恒公公司司的的EE转转型型…………其其最最成成功功之之处处是是什什么么？？<</D/DDD>> <<DDDD>>22．．有有一一种种观观点点认认为为：：在在信信息息时时代代，，…………义义的的解解决决方方案案？？
<body> 抢在时间前面的7条捷径： 制定计划，明确目标 把重点放在关键结果领域 遵守强制增效规律 事先准备 发现限制元素 自我激励 现在就做 
</body></html>
‹#›
③ 预排版标记<pre>
<pre>可使显示效果完全按源文件中编排的格式输出。
‹#›
② HTML文件的基本结构
<HTML>
网页文件格式：表示是HTML文档
<HEAD>
文档头，可加入：网页标题、作
<TITLE>
文档标题
者信息、版本信息
</TITLE>
</HEAD>
<BODY>
网页标题：<TITLE>…</TITLE>
文档的正文内容加在<HEAD>中
</BODY> </HTML>
实验二静态Web网页的制作
参考资料
➢HTML和Dreamweaver相关书籍 ➢网上HTML和Dreamweaver相关
资料
‹#›
在本地机完成如下工作
1. 创建子目录，例如：d:\html 2. 在“Internet 信息服务”界面中，为
子目录创建虚拟目录，例如为 d:\html创建html虚拟目录名
例： 
‹#›
⑤ HTML的有关约定
a) HTML源代码文件名定义最好用英文，其后缀必须是“.htm”或“.html”
b) HTML标记的大小写是等效的 c) “<”和“>”中间的标记元素中不能有空格 d) 标记符号，包括尖括号、标记元素、属性项等必
HTML不是一种编程语言， HTML所定义的范围仅局限于如何表现文字和图片，以及如何建立文件之间的超级链接。因此由HTML构成的文件不会因时间、地点的变化而改变，所以， HTML构成的是静态网页。
实现动态网页需要编写程序。 HTML文件可以使用记事本、FrontPage、 Dreamweaver等任何文本编辑器编辑。本实验使用Dreamweaver 2004 MX 软件
须使用半角的西文字符，不能使用全角字符。
e) 若标记之间的文本中包含有多个空格和回车，均等效为一个空格。
‹#›
三．HTML基本元素
文字列表图像表格超链接字符实体
‹#›
1. 文字
文字设置：一般包括文字格式和文字样式。
✓ 文件格式：即文字的位置、段落等属性。 ✓ 文字样式：指文字的颜色、字体大小等。
客户端
发出请求发回网页
1. 接受请求 2. 找到静态网页
3. 发送网页服务器端
✓ 动态网页：网页文件不仅含有HTML标记，而且含有程序
代码，其文件后缀常为.asp、.php、.jsp等。
动态网页工作原理
客户端
发出请求发回网页
1. 接受请求 2. 找到动态网页 3. 运行程序代码，
生成静态网页
4. 发送网页
‹#›
一．Dreamweaver简介
1. 相关概念
网页：由HTML或者其他语言编写，通过浏览器显示的页面，又称为Web页，可包含文字、图像、表格、动画和超级链接等各种网页元素。分为静态网页和动态网页。网站：就是指在因特网上，根据一定的规则，使用HTML 等工具制作的用于展示特定内容的相关网页的集合。如门户网站、职能网站、专业网站、个人网站等。超链接：实现从一个网页转跳到另一个网页。
盘上的物理目录（或文件夹）
‹#›
二．HTML基础知识
超文本标记语言（Hyper TextMarkup Language ）
———制作Web页的核心语言
HTML 是一种标记性语言，它用一些特殊的标记控制文档中某些信息的展示方式，或与其他信息建立链接。
‹#›
1. HTML简介
✓ <title>……</title>：网页标题 ✓ <meta> ：提供有关页面的元信息 ✓ 其他标记（比如<link>和<style>标记）
‹#›
例：l2-1-1.htm 文档主体
<html>
<➢head文> 档主体：<body>……</body>
<title>中南财经政法大学简介</title>
④ 按下一步，输入测试的URL。在IIS中创建的虚拟目录名
⑤ 按下一步，在出现的对话框中选择“否”。 ⑥ 按下一步按钮，显示站点定义总结，按完成按钮，则一个
站点即建立完成
‹#›
虚拟目录和DW站点设置的关系
IIS设置虚拟目录别名
虚拟目录对应的物理目录
DW站点设置站点名（任意）
文件存储位置
站点测试URL http://localhost/别名/

实验二 静态Web网页的制作

实验二静态Web网页的制作