《最新详细网页制作全过程》由会员分享，可在线阅读，更多相关《最新详细网页制作全过程（150页珍藏版）》请在金锄头文库上搜索。
1、,制作网页型课件,1HTML语言2Dreamweaver建立站点的方法4运用表格、层布局网页的方法3Dreamweaver制作网页时文字、超链接、行为、多媒体等的设置,本章知识点,第一节 Dreamweaver的基础知识,一、初识HTML（一）什么是HTMLHTML（Hypertext Marked Language），即超文本标记语言，是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。使用HTML语言描述的文件，需要通过WWW浏览器浏览文档的内容。,所谓超文本，就是加入图片、声音、动画、影视等内容的
2、文本文档。因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。,一、初识HTML,HTML标记符的特征是：内容 。两个标记符分别代表了一段描述的开始和结束，一般是成对出现的，去掉任何一个标记符都会出现错误。,（二）HTML格式,下面来看一段简单的HTML语言：这里是HTML页面的标题这里是页面内容,（二）HTML格式,1开始和结束标记 在它们中间，包含你的网页里的所有内容，可以是一段文字，也可以是一幅幅插图，也可以是美妙的音乐，。 2头部标记 头部里面一般包括注释、META和标题。,（二）HTML格式,Macromedia Dreamweaver MX 2004是Macromedi
3、a 最新开发的HTML编辑器，用于对Web站点、Web页和 Web应用程序进行设计、编码和开发。,二、认识Dreamweaver,（一）Dreamweaver的工作区设置 Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。 在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。用户可以选择面向设计人员的布局或面向手工编码人员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框，,二、认识Dreamweaver,工作区设置对话框,二、认识Dreamweaver,我们可以从中选择一种工作区布局。如果不熟悉编写代码，可以选择“设计者”。如果
4、以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如图所示。,二、认识Dreamweaver,首选参数对话框,二、认识Dreamweaver,（二）Dreamweaver的工作界面 Dreamweaver MX 2004提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到了一个应用程序窗口中。,二、认识Dreamweaver,应用程序窗口,二、认识Dreamweaver,各栏目操作如下：1插入栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滑动到按钮上时，会出现一个工具提示，其中含有该按钮的名
5、称。,二、认识Dreamweaver,2文档工具栏显示当前创建和编辑的文档。文档工具栏中包含多个按钮。这些按钮可以实现在文档的不同视图间快速切换，即在代码视图、设计视图和拆分视图之间切换；还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。,二、认识Dreamweaver,文档工具栏,二、认识Dreamweaver,3属性检查器用于查看和更改所选对象或文本的各种属性。4面板组是分组在某个标题下面的相关面板的集合。若要展开一个面板组，单击组名称左侧的展开箭头；若要取消停靠一个面板组，拖动该组标题条左边缘的手柄即可。,二、认识Dreamweaver,5文件面板用于管理在Dream
6、weaver站点上或在远程服务器上的文件和文件夹。文件面板还允许用户访问本地磁盘上的全部文件，类似于 Windows 资源管理器。6状态栏状态栏提供与用户当前创建的文档有关的其它信息。,二、认识Dreamweaver,状态栏,二、认识Dreamweaver,Dreamweaver作为专业的网页制作工具，主要完成两大工作。一是制作网页，二是管理网站。利用Dreamweaver的网页创建功能，可以向网页中添加各种内容，如文本、图像、表格、表单、多媒体等。,三、设置站点,把对象添加到网页中后，就能看见它在浏览器中的显示效果；利用网站管理功能使网页开发人员能够非常轻松的管理网站，并能保证在多人对网站进
7、行维护时不会产生冲突，通过“登记/注销”系统可对站点内的文件的状态进行管理，避免了多人同时修改同一文件的可能性，保证了合作开发的安全、正常进行。,三、设置站点,网页又称作HTML文件，是由HTML语言编写出来的，是一种可以在WWW网上传输，并能被浏览器认识和翻译成具有可读性的页面并显示出来的文件。Web站点是一组具有相关主题、类似的设计、链接文档和资源。网页是网站的重要组成元件，也是提供信息的舞台。一个网站一般都会拥有很多网页，这些网页各司其职，从而构成整个网站。,（一）什么是站点,Dreamweaver MX 2004 是一个站点创建和管理工具，使用它不仅可以创建单独的文档，还可以创建完整的
8、Web站点。网站建立的基本流程是：确认网站目的；资料收集和整理；网站结构的规划；网页内容的设计；发送到Web服务器；网站的更新与维护。,（一）什么是站点,在使用Dreamweaver制作网页时，首先要定义一个本地站点。定义本地站点就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。,（二）如何建立本地站点,在本地机器上创建并且做好本地网站后，在本地机上对网站进行测试完成后，再通过专用的软件把文件上传到网上的虚拟空间，即Internet服务器。下面主要介绍本地站点的建立、站点文件命名。,（二）如何建立本地站点,1新建站点执行“站点/管理站点”命令，也可以使用快
9、捷键F8打开站点面板来建立一个站点，然后单击“管理站点”按钮。执行命令后出现“管理站点”对话框，单击“新建”按钮，在弹出的菜单中选择“站点”。,（二）如何建立本地站点,管理站点对话框,（二）如何建立本地站点,2设置站点名称接着出现了一个建立站点的向导，设置好站点的名字后单击“下一步”按钮。（输入你想要的站点名称，这里输入home，其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！）,（二）如何建立本地站点,建立站点向导-1,（二）如何建立本地站点,3选择使用服务器技术接着询问是否使用服务器技术，根据实际需要作出选择，然后单击“下一步”按钮。,（二）如何建立本地站点
10、,4 选择文件上传方式接下来的对话框询问开发过程中如何处理计算机的文件，即开发过程是在本地编辑好后进行上传，还是利用FTP技术直接对服务器文件进行修改。要根据自己需求作出选择，然后单击“下一步”按钮。,（二）如何建立本地站点,建立站点向导-3,（二）如何建立本地站点,5选择服务器连接方式接下来询问服务器连接方式，目前最常用的是FTP。选择FTP ，这里要求输入FTP服务器的信息和登陆帐号及密码。,（二）如何建立本地站点,6系统总结出所有选项完成FTP设置后，还会询问是否允许多人同时编辑同一文件。设置好后，系统总结出所有选项复查。复查无误后站点建设完成。,（二）如何建立本地站点,第二节 Drea
11、mweaver创建网页及使用技巧,本节主要介绍如何应用Dreamweaver MX 2004创建自己的网页的方法及常用的使用技巧。,一、创建页面,（一）新建页面使用 Dreamweaver MX 2004创建新页之前，要先用站点管理器建立一个网站（根目录），为了制作方便，通常把要使用的图片收集到网站目录images文件夹内，其它的素材也要进行分类，存放到相应的文件夹中。,然后用起始页创建新页，或者选择“文件”-“新建”，创建自己的页面，弹出如图所示对话框。新建的空白页面如图。这样就可以向这个空白页添加表格和输入文本了。如果您要向页面添加图片或其它元素，应先保存这个空白页。,一、创建页面,新建页
12、面对话框,一、创建页面,新建空白页面窗口,一、创建页面,选择“文件”-“另存为” ，在“另存为”对话框中，找到站点的本地根目录文件夹，给页面重新起一个名字，如“index.htm”，填入文件名，保存退出。.htm既是文件的后缀，也是这个网页文件的类型说明，表示这个网页文件是属于静态的HTML文件。网页的后缀必须为htm或html，否则上传到服务器之后，浏览器无法正常打开。,一、创建页面,通常网站首页名字是index.html或index.htm。服务器默认搜索文件的顺序是：首先自动寻找 index.html文件，如果有就显示这个文件，如果没有，再寻找index.htm，再没有就很可能会显示错误
13、信息了。并且绝大多数的服务器都是遵循这个原则，一般用户无权修改这种设定。所以在制作网页时，最好将网站的首页命名为 index.html或index.htm。,一、创建页面,在正式开始制作网页前，需要对新建的页面进行一些必要的页面属性设置。双击打开新建的 index.htm，就自动转入编辑窗口。选择菜单“修改”-“页面属性”，将弹出页面属性设置窗口。,二、设置页面属性,设置页面属性,二、设置页面属性,1标题页面的标题会直接显示在浏览器的左上方，例如用浏览器打开网站，可以在浏览器的左上角看到该页的标题“搜狐首页”。标题不是网页必要的元素，但最好为每一页都设定一个标题，这既便于访问者的浏览，也有助于
14、在网页编辑的过程中区分不同的页面。,二、设置页面属性,2背景图像在背景图像的文本输入栏，点击“浏览”按钮，可以为网页添加背景图像。3背景颜色利用背景颜色可为背景添加颜色。默认为白色，点击颜色选择图标可以选择其他的颜色。后面“#FFFFFF”是以16进制形式显示的RGB色值。,二、设置页面属性,4文字的颜色假如不对背景及文字的颜色进行设置（此时RGB色值显示为空），那么浏览器在显示页面的时候，就会采用系统的默认设置。但因为不同的系统的设置都可能会有所区别，这样就会导致页面的显示效果也是千差万别。因此，为了更好地让页面体现出你的设计思想，别忘记设定页面的背景颜色及文字颜色。,二、设置页面属性,5左
15、右边距和上下边距设置左部及顶部的页边距，一般都设置为“0”以方便于网页的编辑。6链接利用超链接的属性设置窗口，可以对超链接的属性进行，设置设定超级链接的颜色，若不进行设定则默认为蓝色。设置好网页属性的其它选项，确保页面属性的设置正确后，点击“确定”结束。,二、设置页面属性,表格属性设置窗口,二、设置页面属性,打开一个网页文件，进入Dreamweaver页面编辑设计视图状态。我们可以像在其他的文字编辑程序中一样，直接输入文字。在一般情况下，编辑器默认左对齐，光标在左上角闪烁，光标位置就是插入点的位置。,三、在网页中使用文本,表格属性设置窗口,三、在网页中使用文本,修改文字属性。选中文字，在文字属性面板设置即可。修改文字颜色时，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取相应的颜色即可。,三、在网页中使用文本,文字属性设置面板,使用表格不仅可以清晰地显示列表的数据，而且可用于网页的定位上，尤其是对于使用非IE浏览器来说，使用表格定位的网页比使用图层定位的网页更具有优势。,四、用表格定位网页元素,（一）创建表格 1插入表格选择“插入”-“表格”命令，弹出表格设置窗口，设置表格的行数、列数、宽度，同时还可以设定表格的样式，根据自己的需要来设置表格的相应属性即可。,四、用表格定位网页元素,表格设置窗口,四、用表格定位网页元素,
