HTML静态网页的制作--.ppt
《HTML静态网页的制作--.ppt》由会员分享,可在线阅读,更多相关《HTML静态网页的制作--.ppt(98页珍藏版)》请在咨信网上搜索。
1、第第2章章 静态网页的制作静态网页的制作 Web编程实用技术教程编程实用技术教程学习目标学习目标了解网页制作工具(了解网页制作工具(Dreamweaver、Flash)的)的简单使用方法,用之制作静态网页;简单使用方法,用之制作静态网页;学会将学会将Dreamweaver作为开发作为开发Web程序的平台;程序的平台;掌握超级链接的创建;掌握超级链接的创建;学会利用表格和框架进行网页布局;学会利用表格和框架进行网页布局;学会使用学会使用HTML和和XML语言编制网页。语言编制网页。目目 录录 2.1 常用的网页制作常用的网页制作工具工具 2.2 制作第一个简单网页制作第一个简单网页 2.3 超文
2、本和超图像链接超文本和超图像链接 2.4 网页制作中的网页制作中的Flash动画动画 2.5 利用表格和框架制作网页利用表格和框架制作网页 2.6 HTML与与XML标识语言标识语言 Dreamweaver Dreamweaver是一套专业化的网页创作工具,它采用是一套专业化的网页创作工具,它采用“所见所见即所得即所得”的可视化编辑方式,能够快速高效地创建各种具有的可视化编辑方式,能够快速高效地创建各种具有专业水平的网页,不需要编写任何代码。如果需要在代码界专业水平的网页,不需要编写任何代码。如果需要在代码界面进行工作,只需进入面进行工作,只需进入HTMLHTML代码窗口或源代码检视器中,就代
3、码窗口或源代码检视器中,就能同步看到能同步看到DreamweaverDreamweaver生成的源代码。它支持最新的生成的源代码。它支持最新的DHTMLDHTML、CSSCSS标准及分层技术,具有极好的兼容性,适用于标准及分层技术,具有极好的兼容性,适用于各种平台和各种浏览器。各种平台和各种浏览器。2.1 常用的网页制作工具常用的网页制作工具 Dreamweaver 1.1.启动启动DreamweaverDreamweaver程序程序 在在“开始开始”菜单的菜单的“所有程序所有程序”中找到中找到“Adobe Adobe Dreamweaver CS3Dreamweaver CS3”,并单击该命
4、令。,并单击该命令。DreamweaverDreamweaver将立即启动,将立即启动,在在“文档文档”窗口内将打开一个空白文档,如下图所示。窗口内将打开一个空白文档,如下图所示。2.2.DreamweaverDreamweaver的用户界面的用户界面 DreamweaverDreamweaver由由页面编辑器页面编辑器和和站点管理器站点管理器两大部分组成。两大部分组成。下图所示的是下图所示的是DreamweaverDreamweaver的页面编辑器,包括页面编辑窗口的页面编辑器,包括页面编辑窗口和各种浮动面板。和各种浮动面板。(1)(1)页面编辑窗口:页面编辑窗口:页页面面编编辑辑窗窗口口由
5、由标标题题栏栏、菜菜单单栏栏、工工具具栏栏、文文档档编编辑辑区区和和状态栏等基本部分组成,各部分的功能如下:状态栏等基本部分组成,各部分的功能如下:标标题题栏栏:显显示示当当前前页页面面的的标标题题,括括号号中中显显示示对对应应文文档档的的路路径径和文件名。和文件名。菜单栏:包含所有的操作命令。菜单栏:包含所有的操作命令。DreamweaverDreamweaver共有共有1010个系统个系统菜单,分别为文件、编辑、查看、插入记录、修改、文本、命菜单,分别为文件、编辑、查看、插入记录、修改、文本、命令、站点、窗口、帮助。单击系统菜单,打开对应的下拉菜单,令、站点、窗口、帮助。单击系统菜单,打开
6、对应的下拉菜单,可选择下拉菜单中的操作命令。面板上的各个操作按钮基本上可选择下拉菜单中的操作命令。面板上的各个操作按钮基本上都有菜单操作命令与之相对应。都有菜单操作命令与之相对应。工工具具栏栏:放放置置常常用用工工具具。如如:左左边边第第一一个个按按钮钮用用于于切切换换到到HTMLHTML代代码码窗窗口口,第第二二个个按按钮钮切切换换到到HTMLHTML代代码码视视图图和和页页面面设设计计视视图图双双状状态态同同步步窗窗口口,第第三三个个按按钮则切换到页面编辑窗口。钮则切换到页面编辑窗口。文档编辑区:编辑网页的区域。文档编辑区:编辑网页的区域。DreamweaverDreamweaver启动启
7、动后,自动创建一个空白的网页文档等待编辑。后,自动创建一个空白的网页文档等待编辑。状状态态栏栏:显显示示当当前前网网页页的的有有关关信信息息。在在状状态态栏栏中中从从左左到到右右依依次次为为标签选择器、基本工具、窗口设置框和下载指示器。标签选择器、基本工具、窗口设置框和下载指示器。标标签签选选择择器器:编编辑辑网网页页时时,利利用用标标签签选选择择器器可可以以显显示示和和修修改改HTMLHTML标签,单击标签按钮可以选择网页中相应的编辑对象。标签,单击标签按钮可以选择网页中相应的编辑对象。基基本本工工具具:包包括括选选取取工工具具、手手形形工工具具、缩缩放放工工具具和和选选择择缩缩放放比比例例
8、列表框。列表框。窗窗口口设设置置框框:设设置置显显示示窗窗口口的的大大小小,单单击击设设置置区区右右侧侧的的小小按按钮钮,在在打打开开的的菜菜单单中中,可可以以根根据据显显示示器器屏屏幕幕的的分分辨辨率率选选择择不不同同的的显显示示尺寸。尺寸。下下载载指指示示器器:显显示示当当前前网网页页的的文文件件量量大大小小,以以及及网网页页被被下下载载所所需需要的时间,单位是要的时间,单位是*k/*k/*秒。秒。(2)(2)浮动面板:浮动面板:页页面面编编辑辑器器中中有有2 2个个常常用用的的浮浮动动面面板板:插插入入面面板板、属属性性面面板,以及放置其他面板的浮动面板集。板,以及放置其他面板的浮动面板
9、集。浮浮动动面面板板是是DreamweaverDreamweaver的的一一大大特特色色。利利用用浮浮动动面面板板对对网网页页进进行行属属性性设设计计,在在页页面面编编辑辑窗窗口口中中可可以以直直接接看看到到操操作作结结果果,真正实现了真正实现了“所见即所得所见即所得”的编辑功能。的编辑功能。浮浮动动面面板板集集也也是是DreamweaverDreamweaver的的一一大大特特色色。设设计计者者可可以以按按自自已已的的需需要要任任意意组组合合或或拆拆分分浮浮动动面面板板集集中中的的各各种种面面板板,也也可可以以用用鼠鼠标标拖拖拽拽浮浮动动面面板板的的标标题题栏栏来来移移动动浮浮动动面面板板,
10、用用鼠鼠标标拖拖拽拽浮动面板的边框来改变浮动面板的大小。浮动面板的边框来改变浮动面板的大小。(3)(3)站点管理器:站点管理器:站点管理器主要用于管理站点内的文件和目录,可对站点管理器主要用于管理站点内的文件和目录,可对站点内的文件进行改名、编辑和删除等基本操作,并可检验站点内的文件进行改名、编辑和删除等基本操作,并可检验对象的链接情况,自动修改其他页面指向这个对象的链接。对象的链接情况,自动修改其他页面指向这个对象的链接。利用模板和库,可以使站点内的部分页面应用相同的模板和利用模板和库,可以使站点内的部分页面应用相同的模板和库,从而使多个页面具有相同的风格,并且可以快速进行统库,从而使多个页
11、面具有相同的风格,并且可以快速进行统一更新。管理器还自带一更新。管理器还自带FTPFTP功能,能完成站点内文件的上传和功能,能完成站点内文件的上传和下载,进行站点的发布和远程管理。下载,进行站点的发布和远程管理。制作一个浏览效果如下图所示的简单网页。制作一个浏览效果如下图所示的简单网页。2.2 制作第一个简单网页制作第一个简单网页 实现步骤如下:实现步骤如下:首首先先启启动动DreamweaverDreamweaver,打打开开前前面面所所建建立立的的本本地地站站点点,接接着着在在页面中插入各种基本的网页元素。页面中插入各种基本的网页元素。一一、基基本本网网页页元元素素(文文字字、图图像像、水
12、水平平线线、日日期期和和时时间间)的的插插入入1.1.在页面中添加和处理文字在页面中添加和处理文字(1)(1)在页面中输入文字,操作步骤如下:在页面中输入文字,操作步骤如下:在在页页面面编编辑辑区区中中,按按照照页页面面的的设设计计内内容容输输入入文文字字,各各段段文文本的末尾按回车键,如下图所示;本的末尾按回车键,如下图所示;按按Ctrl+SCtrl+S键键保保存存网网页页。第第一一次次创创建建的的网网页页可可以以作作为为首首页页index.htmindex.htm文件保存,随后该首页将得到进一步的扩充和完善。文件保存,随后该首页将得到进一步的扩充和完善。注注意意:书书中中所所提提到到的的“
13、保保存存网网页页”都都是是指指将将网网页页保保存存到到本本地地站站点下点下。(2)(2)将将第第一一行行“计计算算机机工工程程系系”作作为为网网页页的的标标题题文文字字,操操作作步步骤如下:骤如下:选中选中“计算机工程系计算机工程系”,打开属性面板,如下图所示;,打开属性面板,如下图所示;在在“格格式式”下下拉拉选选项项中中选选择择最最大大标标题题“标标题题1 1”以以设设置置标标题题样式;样式;单击单击 按钮将字体变粗,单击按钮将文字居中显示。按钮将字体变粗,单击按钮将文字居中显示。(3)(3)接着,设置中文字体。接着,设置中文字体。在属性面板上单击字体按钮在属性面板上单击字体按钮 ,打开字
14、体下拉列表,选择想,打开字体下拉列表,选择想设置的字体。如果字体下拉列表中没有想设置的字体,如何添设置的字体。如果字体下拉列表中没有想设置的字体,如何添加中文字体呢?操作如下:加中文字体呢?操作如下:打开打开“编辑字体列表编辑字体列表”对话框,执行下列操作之一:对话框,执行下列操作之一:在属性面板上单击字体按钮在属性面板上单击字体按钮 ,打开字体下拉列表,选,打开字体下拉列表,选择择“编辑字体列表编辑字体列表”选项,如下图所示;选项,如下图所示;在菜单栏中选择“文本”“字体”“编辑字体列表”命令。在在“编辑字体列表编辑字体列表”对话框(如下图所示)中进行如下操对话框(如下图所示)中进行如下操作
15、:作:在在“编辑字体列表编辑字体列表”对话框中进行如下操作:对话框中进行如下操作:先在先在“字体列表字体列表”框中选定框中选定“在以下列表中添加字体在以下列表中添加字体”项;项;在在“可用字体可用字体”框中选择一种字体(如隶书);框中选择一种字体(如隶书);单单击击方方向向按按钮钮 ,选选中中的的字字体体添添加加到到“选选择择的的字字体体”框框中中,同时也出现在同时也出现在“字体列表字体列表”框中。框中。如如果果还还要要加加入入第第二二种种字字体体,则则单单击击按按钮钮 ,再再重重复复上上面面的的3 3步步即即可可。如如果果要要删删除除某某种种字字体体,则则在在“字字体体列列表表”框框中中选选
16、定定该该字字体体,单单击击按按钮钮 。还还可可以以单单击击按按钮钮 ,将将刚刚添添加的字体上移,便于以后的使用。加的字体上移,便于以后的使用。单单击击“确确定定”按按钮钮。此此时时,属属性性面面板板上上的的字字体体下下拉拉列列表表中已经添加了中已经添加了“隶书隶书”等字体。等字体。(4)(4)将第一段文本的颜色设置为红色,将第三段文本的颜色设将第一段文本的颜色设置为红色,将第三段文本的颜色设置为十六进制代码置为十六进制代码#3333#3333CCCC蓝色,将后面文本的颜色设置为十六蓝色,将后面文本的颜色设置为十六进制代码进制代码#FF00FFFF00FF的淡紫色。操作步骤如下:的淡紫色。操作步
17、骤如下:首先选中第一段文本;首先选中第一段文本;单击属性面板上的字体颜色按钮,在单击属性面板上的字体颜色按钮,在“颜色颜色”调色板中调色板中用吸管吸取红色即可,如下图所示。用吸管吸取红色即可,如下图所示。在在网网页页中中,每每种种颜颜色色都都可可用用一一个个十十六六进进制制代代码码表表示示。如如果果知知道道颜颜色色的的代代码码,可可直直接接在在“颜颜色色”文文本本框框中中输输入入该该颜颜色色的的十十六进制代码。六进制代码。用相同的方法设置下面文本的颜色。用相同的方法设置下面文本的颜色。(5)(5)将最后的将最后的5 5行文本组成一个项目列表,操作步骤如下:行文本组成一个项目列表,操作步骤如下:
18、首先选中最后首先选中最后5 5行文本;行文本;打开属性面板,单击按钮打开属性面板,单击按钮 ,则最后,则最后5 5行文字前便行文字前便增加了圆点式的项目符号增加了圆点式的项目符号“”,如下图所示。,如下图所示。(6)如果要为选中的段落前加上1、2、3式的项目编号,则单击 按钮即可。同样,项目符号的样式是可以更改的,单击属性面板上的“列表项目”按钮进行相应的设置。(7)(7)同同时时,还还可可以以让让“WelcomeWelcome”文文本本从从左左到到右右动动起起来来,操操作步骤如下:作步骤如下:首先选中首先选中“WelcomeWelcome”文本;文本;在属性面板上单击按钮在属性面板上单击按钮
19、 ,打开快速标签编辑器;,打开快速标签编辑器;在在光光标标处处直直接接输输入入“marqueemarquee”,或或稍稍等等一一会会,在在出出现现的的下下拉拉列列表表中中选选择择“marqueemarquee”选选项项,然然后后按按回回车车键键。此此时时,状状态栏上已多了一项加粗显示的态栏上已多了一项加粗显示的 marquee。按按F12F12键预览网页效果。键预览网页效果。2.2.在页面中插入和处理图像在页面中插入和处理图像(1)(1)将图像插入到页面中。操作步骤如下:将图像插入到页面中。操作步骤如下:在在“学学生生专专区区”项项目目符符号号“”前前按按回回车车键键,以以确确定定插入图像的位
20、置在第三段和第四段之间;插入图像的位置在第三段和第四段之间;单单击击插插入入面面板板中中的的 按按钮钮的的子子菜菜单单“图图像像”(或或者者在在菜菜单单栏栏中中选选择择“插插入入记记录录”“图图像像”命命令令),弹弹出出“选选择择图图像源文件像源文件”对话框,如下图所示;对话框,如下图所示;在在查查找找范范围围框框中中选选定定图图像像文文件件所所在在的的文文件件夹夹及及文文件件,单单击击“确确定定”按钮。按钮。弹弹出出“图图像像标标签签辅辅助助功功能能属属性性”对对话话框框,填填写写该该图图像像的的“替替换换文本文本”及及“详细说明详细说明”内容,单击内容,单击“确定确定”按钮。按钮。经经过过
21、上上面面的的操操作作,图图像像便便插插入入到到了了当当前前的的页页面面中中。按按F12F12预预览览网网页页,可可以以看看到到当当鼠鼠标标停停留留在在图图像像上上时时就就会会出出现现提提示示文文字字。这这样样做做的的好好处处就就是是当当浏浏览览网网页页时时,即即使使图图像像不不能能完完全全显显示示出出来来,提提示示文文字字也也能能让让浏浏览览者者了了解解图图像像的的内内容容或或主主题题。但但是是,此此时时的的图图像像并并没没有有按按照照页页面面设设计计的的要要求求放放置置,因因此此需需要要调调整整图图像像的的对对齐齐方方式式、周周边边间间距距及及图像的大小等。图像的大小等。(2)(2)调调整整
22、图图像像的的对对齐齐方方式式。关关于于图图像像,在在属属性性面面板板上上有有两两种种对对齐齐方式:图像在页面中的对齐方式及图像和周围元素的对齐方式。方式:图像在页面中的对齐方式及图像和周围元素的对齐方式。调整图像在页面中的对齐方式调整图像在页面中的对齐方式分分别别单单击击 3 3个个按按钮钮,可可以以看看到到图图像像分分别别位位于于页页面面的的左左边边、中中间间和和右右边边。再再次次单单击击相相应应对对齐齐按按钮钮,图图像像回回到到原原来来的的位置上。此时单击左对齐按钮。位置上。此时单击左对齐按钮。调整图像和周围元素的对齐方式调整图像和周围元素的对齐方式单单击击属属性性面面板板上上的的“对对齐
23、齐”按按钮钮,在在下下拉拉列列表表选选项项中中选选择择“左对齐左对齐 ”。(3)(3)调整图像的周边间距。操作步骤如下:调整图像的周边间距。操作步骤如下:选中图像,打开属性面板;选中图像,打开属性面板;在在“垂垂直直边边距距”文文本本框框中中输输入入1010,设设置置垂垂直直间间距距为为1010像像素;素;在在“水水平平边边距距”文文本本框框中中输输入入6060,设设置置水水平平间间距距为为6060像像素,按回车键。素,按回车键。可可以以看看到到图图像像与与上上、下下、左左、右右方方的的文文字字间间隔隔都都拉拉大大了了,如如下下图图所所示示。如如果果删删除除输输入入框框中中的的数数值值,则则图
24、图像像又又回回到到原原来来的的位位置。置。(4)(4)调整图像的大小。方法有两种:调整图像的大小。方法有两种:直接拖拽图像上的控点;直接拖拽图像上的控点;在在属属性性面面板板的的“高高度度”和和“宽宽度度”文文本框中输入相应数值(单位是像素)。本框中输入相应数值(单位是像素)。如如果果不不满满意意调调整整图图像像的的大大小小,则则可可以以单单击击属属性性面面板板上上的的“高高度度”和和“宽宽度度”标标志志,使使图图像还原为原始大小。像还原为原始大小。3.3.插入水平线插入水平线(1)(1)在页面中插入水平线。操作步骤如下:在页面中插入水平线。操作步骤如下:在在“WelcomeWelcome”文
25、文本本后后单单击击鼠鼠标标,以以确确定定插插入入水水平平线线的的位位置;置;在在菜菜单单栏栏中中选选择择“插插入入记记录录”|“HTMLHTML”“水水平平线线”命命令令,则则DreamweaverDreamweaver默默认认的的水水平平线线便便插插入入到到“WelcomeWelcome”和和第第三三段文字之间,如下图所示。段文字之间,如下图所示。(2)(2)修修改改水水平平线线,将将水水平平线线居居中中对对齐齐,且且其其宽宽度度为为浏浏览览器器窗窗口的口的80%80%,操作步骤如下:,操作步骤如下:选中上面所插入的水平线;选中上面所插入的水平线;在在水水平平线线属属性性面面板板的的“宽宽度
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 静态 网页 制作
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【胜****】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【胜****】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。