预览加载中，请您耐心等待几秒...

网页制作与开发教程第1章网页制作基础.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共91页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

网页制作的基本步骤建立本地站点本章首先对一些与网络相关的概念做了概要的阐述，介绍了网页制作的基本知识，使读者对Internet传递信息的基本原理有所了解。然后，介绍网页制作的基本步骤，对HTML（超文本标签语言）的基本知识进行入门性的阐述，对Dreamweaver的操作环境进行介绍，并将介绍如何使用Dreamweaver建一个最基本的网站和网页，从而为后续章节的学习打下基础。1.1网页制作基础知识图1-1网上冲浪网页中可以包含多种类型的内容，这些内容成为网页的“元素”。最基本的是文字，此外，还可以使用图片、动画，以及声音、视频等多媒体文件。制作网页的目的之一，就是要给访问者留下深刻的印象，展示有价值的信息。1.1.1网页的分类1.1.2网页制作中的基本概念2．超链接3．URL图1-3超链接的作用图1-4输入URL4．HTML图1-5网页的HTML源文件5．上传与下载6．域名7．网站8．IP地址1.2网页制作的基本步骤1.3HTML入门当浏览器接收到HTML文件后，就解释HTML文件内的标签符，根据标签符去执行相应的显示功能或实现某些功能。注意这些标签符必须用小于号（“<”）和大于号（“>”）括起来。1.3.1HTML标签符的基本格式例如，HTML文件中的“<b>”和“</b>”标签符用来定义HTML文件中的文字为粗体字。就是说，在这一对标签中的内容都以粗体的格式在浏览器中显示。例如在文件中有“<b>Hello，World!</b>”，那么在浏览器中将显示出粗体字“Hello，World!”。 HTML的概念很简单，就是写入什么样的标签符，浏览器就会相应执行该标签符所能实现的功能。不过有一点要注意，我们最常用的Netscape和InternetExplorer浏览器并不完全兼容，即有的标签只能被其中一种浏览器识别。就目前的情形来看，InternetExplorer已经取得了很大的优势，但在制作网页时最好还是二者兼顾。另外，Dreamweaver已经充分考虑到了兼容性的问题，尽可能地使制作出的网页在两个浏览器上都能正确显示。 1.3.2简单的HTML文件【例1-1】最简单的HTML文件 <html> <head> <title>这是测试文件</title> </head> <body> HTML文件的内容就写在这里...... </body> </html>图1-6用Windows的“记事本”编辑源文件图1-7Windows“记事本”中HTML文件的保存图1-8打开浏览器的窗口后的效果注意这个文件中有以下4对标签。 1．HTML标签 “<html>”标签放在HTML文件的开头，告诉浏览器，这个文件是HTML文件。而在文件的结尾，是“</html>”结束标签。2．文件头标签3．文件标题标签4．文件体标签1.3.3进一步认识标签图1-9加入标题字的效果【例1-2】“标题”标签示例 <html> <head> <title>这是测试文件</title> </head> <body>HTML文件的内容就写在这里...... <h1>这是H1标题字</h1> <h2>这是H2标题字</h2> <h3>这是H3标题字</h3> <h4>这是H4标题字</h4> <h5>这是H5标题字</h5> <h6>这是H6标题字</h6> </body> </html> 2．“对齐”属性每个属性都可以设置一个“属性值”，例如“align”属性可以有3种属性值：“left”（左对齐）、“center”（居中对齐）或者“right”（右对齐）。图1-10对齐效果【例1-3】“对齐”属性示例 <html> <head> <title>这是测试文件</title> </head> <body> HTML文件的内容就写在这里...... <h3align=left>文本左对齐</h3> <h3align=center>文本居中对齐</h3> <h3align=right>文本右对齐</h3> </body> </html> 1.4Dreamweaver的操作环境图1.11Dreamweaver8的主界面1.4.1文档窗口1.4.2“插入”工具栏图1-12“插入”面板1.4.3“属性”面板图1-13文字对象的“属性”面板1.4.4其他面板和工具条图1-14文档工具条图1-15“文件”面板组1.5建立本地站点在Dreamweaver主界面上选择菜单“站点→管理站点”命令，这时会出现“管理站点”对话框，如图1-16所示，单击“新建”按钮，再选择“站点”命令，打开“站点定义”对话框。 该对话框中有“基本”和“高级”两个选项卡，在这里先选择“基本”，它采用向导式的设置方法。在“您打算为您的站点起什么名字？”下面的框中输入给网站起的名字，如图1-17所示。图1-16管理站点