《振动与波》PPT课件.ppt

兰州大学信息科学与工程学院,第8章 网页制作基础,兰州大学信息科学与工程学院,兰州大学信息科学与工程学院,8.1 概述,back,8.1.1 基本概念,网页（Web Page） 网页是一种可以在WWW上传输，并能被浏览器解释和呈现的文件。 是网站最基本的组成单位。 网页可分为静态网页和动态网页。 都可以包含各种视觉动态效果，区别在于客户端与服务器之间是否发生交互行为 静态网页的扩展名通常为.htm或.html等。 动态网页的扩展名较多，如.asp、.jsp、.aspx和.php等。,8.1.1 基本概念,网站（Web Site） 网站是相关网页的集合，这些网页之间通常具有一定的链接关系。网站由域名、网页和主机空间组成，用户通过浏览网页来访问网站。 如果访问者在浏览器的地址栏里输入网站的域名或IP地址，浏览器将会自动打开网站的默认首页（又称主页）。,8.1.1 基本概念,统一资源定位地址（Uniform Resource Locator，URL） 统一资源定位地址完整地描述Internet上网页和其他资源的地址，主要用于指明通信协议和地址，例如 URL的一般格式为： 协议:/IP地址或域名/路径/文件名,8.1.1 基本概念,超链接（Hyperlink） 超链接是组成网站的基本元素，通过它可以在网站内部网页或资源之间建立链接，也可以与其他网站的网页或资源之间建立链接。 超链接是网页的一部分，它记录了链接目标的URL。当访问者单击已经创建超链接的文字或图片后，链接目标将自动打开。,8.1.1 基本概念,超文本（Hypertext） 超文本是一种包含网页元素和效果，具有超链接功能的网状文本。 超文本通常使用超文本置标语言（HTML）进行编辑，它能够对网页的内容、显示效果及超链接进行描述，形成HTML文档。,8.1.2 常用网页制作工具,文本编辑器：Notepad、UltraEdit 可视化网页编辑软件：Dreamweaver、FrontPage 图像处理软件：Photoshop、Fireworks 音频处理软件：Adobe Audition、GoldWave 视频处理软件：Adobe Premiere、会声会影 动画制作软件：Flash,8.1.3 Dreamweaver介绍,Dreamweaver是Adobe公司的集网页制作和网站管理于一身的可视化网页编辑器。,8.1.3 Dreamweaver介绍,工作界面,8.1.4 案例介绍,案例是一个关于现代诗“再别康桥”欣赏的网站，网站名称为“zbkq”。,8.1.4 案例介绍,兰州大学信息科学与工程学院,8.2 创建和管理站点,back,8.2.1 创建本地站点,站点就是放置网站文件的一个文件夹，每一个网站都要有一个自己的站点，以便方便有效地管理站点中的各种资源。 本地站点：在本地开发时使用的文件夹。,8.2.1 创建本地站点,创建演示案例的本地站点，操作步骤如下： 选择菜单命令【站点】【新建站点】，弹出“站点定义向导”对话框，输入站点名称“zbkq”。 单击【下一步】按钮。选择“否，我不想使用服务器技术”。 单击【下一步】按钮。选择第一个选项，然后指定文件存储在本地硬盘的位置为“D:zbkq”。 单击【下一步】按钮。从下拉列表框中选择【无】。 单击【下一步】按钮。 单击【完成】按钮，站点创建完成，站点zbkq将显示在“文件”面板中。,8.2.2 向站点中添加内容,向站点中添加网页文件index.html和zzjs.html 打开站点zbkq，在面板中单击鼠标右键，从弹出菜单中选择【新建文件】命令，新建一个网页文件。 新建网页的默认名称是untitled.html，将untitled.html命名为index.html。 使用同样的方法添加网页zzjs.html。 在index.html上单击鼠标右键，从弹出菜单中选择【设成首页】命令，将其设置成主页。 添加文件夹的方法与添加网页的方法类似，在站点zbkq中添加两个文件夹images和media。,8.2.3 管理本地站点,Dreamweaver 8提供了强大的站点编辑和管理功能。 选择菜单命令【站点】【管理站点】，弹出“管理站点”对话框。,兰州大学信息科学与工程学院,8.3 使用表格布局网页,back,8.3.1 插入表格,向index.html中插入一个表格，操作步骤如下： 打开index.html。 选择菜单命令【插入】【表格】，或者在“插入”工具栏的“常用”选项卡中，单击“表格”按钮，弹弹出“表格”对话框。 在“表格”对话框设置行数为2，列数为1，表格宽度为300像素，边框粗细、单元格边距和单元格间距均为0。,8.3.1 插入表格,向index.html的表格中嵌入两个表格，操作如下： 将光标定位到表格的第一个单元格，插入一个表格，表格属性为：行数1，列数2，表格宽度100%，边框粗细1，单元格边距0，单元格间距1。 将光标定位到表格的第二个单元格，插入一个表格，表格属性为：行数4，列数2，表格宽度100%，边框粗细1，单元格边距0，单元格间距1。,8.3.2 选择表格元素,1. 选择表格 单击表格中任一单元格，然后在“标签选择器”中选择“”标签。 单击表格中任一单元格，然后选择菜单命令【修改】【表格】【选择表格】。 2. 选择行或列 将鼠标指针移动到行的左边缘或列的上边缘。 当鼠标指针变为选择箭头或时，单击以选择当前行或列。 按住鼠标左键进行上下或左右拖动，可以选择相邻的多个行或列。 选择不相邻的行或列，可以在按住Ctrl键的同时选择行或列。,8.3.2 选择表格元素,3. 选择单元格 选择单个单元格，执行下列操作之一： 单击单元格，然后在“标签选择器”中选择“”标签。 按住Ctrl键，然后单击单元格。 选择一行或矩形的单元格块，执行下列操作之一： 从一个单元格拖到另一个单元格。 单击一个单元格，然后按住Shift键单击另一个单元格。这两个单元格定义的直线或矩形区域中的所有单元格都将被选中。 选择不相邻的单元格，可以在按住Ctrl键的同时单击要选择的单元格。,8.3.3 设置表格属性,表格和单元格分别有各自的属性面板，可以分别进行参数设置。 选择index.html中第一个插入的表格。指定表格ID为table0，宽为777像素，对齐为居中对齐，背景图像为images/table_bg.gif。 选择table0的第一行后。设置垂直对齐方式为顶端，高度为162像素。,8.3.3 设置表格属性,选择第一个嵌套表格，指定ID为table1，高为156像素，边框颜色为#0099CC。选择table1的第一个单元格，指定宽度为568像素。 选择第二个嵌套表格，指定表格ID为table2，边框颜色#0099CC。选择table2的第一行的两个单元格和第三行的两个单元格，指定高度为28像素，背景图像为images/table_title.gif。选择table2的第二行，指定高度为240像素，第一列宽度468像素。选择table2的第四行，指定高度为80像素。,8.3.4 添加及删除行和列,在index.html中table2的最后添加一个新行，操作步骤如下： 单击table2的最后一个单元格。 选择菜单命令【修改】【表格】【插入行或列】，弹出“插入行或列”对话框。 选择“行”，设置“行数”为1，位置为“所选之下”，单击【确定】按钮，新的一行出现在表格中。 选择新添加的行，指定高度为36像素。,8.3.4 添加及删除行和列,删除某行或列，执行下列操作之一： 单击要删除的行或列中的一个单元格，然后选择菜单命令【修改】【表格】【删除行】或【修改】【表格】【删除列】。 选择完整的一行或列，然后选择菜单命令【编辑】【清除】或按Delete键。,8.3.5 拆分和合并单元格,拆分index.html中table2中的单元格，操作步骤如下： 选定table2的第三行的第一个单元格。 在“属性”面板中单击“拆分单元格”按钮，或者选择菜单命令【修改】【表格】【拆分单元格】，弹出“拆分单元格”对话框。 在“拆分单元格”对话框中，指定拆分成两列。 单击【确定】按钮，完成单元格的拆分。 使用同样的方法将table2的第四行的第一个单元格拆分成两列。,8.3.5 拆分和合并单元格,合并index.html中table2中的单元格，操作步骤如下： 选定table2的最后一行的两个单元格。 在“属性”面板中单击“合并单元格”按钮，或者选择菜单命令【修改】【表格】【合并单元格】，完成单元格合并。 至此，index.html的结构布局已设计完成。,兰州大学信息科学与工程学院,8.4 编辑网页,back,8.4.1 新建网页,Dreamweaver 8还提供了一种使用菜单命令创建网页文件的方法。 选择菜单命令【文件】【新建】，弹出“新建文档”对话框中。在“新建文档”对话框中选择“基本页”类别，从“基本页”列表中选择“HTML”，点击【创建】按钮，创建一个网页文件。 选择菜单命令【文件】【保存】，将网页文件保存到站点zbkq下，文件名xzbj.html。,8.4.2 设置网页属性,网页的基本属性包括网页中的默认字体、网页的背景颜色或背景图像、页边距、网页的标题、网页编码等。 可以使用“页面属性”对话框设置网页的属性。 打开index.html，选择菜单命令【修改】【页面属性】，或者单击属性面板中的【页面属性】按钮均可打开“页面属性”对话框。 选择“分类”中的“外观”类别，在外观选项中指定页面字体为“宋体”，大小为12，背景图像为images/bg.gif。 按F12键在IE浏览器中打开网页。,8.4.2 设置网页属性,再次打开“页面属性”对话框，设置背景颜色为#DEEBF3，重复为“横向重复”，上边距0像素。 再次在IE浏览器中打开index.html网页。 使用同样的方法设置zzjs.html和xzbj.html的背景图片为images/bg.gif，重复为“横向重复”，背景颜色为#DEEBF3，字体为“宋体”，大小为12。,8.4.3 添加文本,文本是网页设计最常用的元素，是网站内容的集中体现。 添加文字 在Dreamweaver中有两种换行方式：“分段换行”和“段内换行”。 添加特殊字符 如版权符号、注册商标符号，以及一些特殊的数学符号等。 添加空格 Dreamweaver默认不支持连续输入多个空格，可以将输入法切换到全角状态输入。 添加水平线 水平线有利于组织信息，可以使用一条或多条水平线以分隔文本和对象。,8.4.3 添加文本,设置文本属性 选择zzjs.html中的“徐志摩介绍”，设置格式为“标题1”，字体颜色为#FFFFFF，居中对齐。 选择xzbj.html中的“再别康桥写作背景”，设置格式为“标题1”，字体颜色为#FFFFFF，居中对齐。 设置index.html中表格标题文字为“粗体”，颜色为#FFFFFF，版权符号为Arial字体，版权文字居中对齐，设置table2第二行第一个单元格中的“再别康桥”为“标题1”格式。,8.4.3 添加文本,为实现index.html中“再别康桥”诗词内容的自下向上滚动效果，可进行如下操作： 选中table2的第二行的第一个单元格，将文档窗口切换到“拆分”视图。 在代码窗口当前选中的内容中找到“”，在其后输入“” 从当前位置向下，找到第一个“”，在其之前输入文字滚动的结束标记“”。滚动效果要在浏览器中打开网页时才能看到。,8.4.4 添加超链接,1. 超链接分类 内部链接：同一站点内资源之间的链接。 外部链接：不同站点资源之间的链接。 锚记链接：同一网页或不同网页指定位置的链接。 Email链接：发送电子邮件的链接。,8.4.4 添加超链接,2. 绝对路径和相对路径 （1）绝对路径 “ （2）文档相对路径 “gaoji/preferences.html”是一个文档相对路径，它省略了当前文档和所链接文档URL的相同部分。（3）站点根目录相对路径 “/gaoji/preferences.html”是一个站点根目录相对路径，它表示网页“preferences.html”位于站点根目录（/）下的“gaoji”子文件夹中。,8.4.4 添加超链接,3. 网页超链接 网页超链接就是指向其他网页或资源的超链接，访问者单击这样的超链接时将跳转到相应的网页或资源。 4. 锚记链接 锚记链接常用于包含大量文字的网页，通过点击锚记链接，能够快速跳转到网页的特定位置，便于访问者查看网页内容。 5. 电子邮件链接 在网页上创建电子邮件链接，当访问者单击该链接时，可打开浏览器默认的电子邮件处理程序。,8.4.5 添加图像,图像是一种重要的网页素材，网页中常用的图像格式是GIF、JPEG和PNG。 在index.htm中table1的第二个单元格中插kangqiao.jpg，设置图像的宽为200像素，高为150像素。,8.4.6 添加音频和视频,常用的音频文件有WAV、MIDI和MP3，常用的视频文件有MPEG、WMV、RMRMVB、ASF等。 1. 嵌入视频文件 在index.html的table2的第二行的第二个单元格中嵌入“男声朗诵.wmv”。 2. 链接到音频文件 在index.html的table2的第四行的第三个单元格中链接“林宥嘉-再别康桥.mp3”。,8.4.7 添加Flash动画,添加Flash动画就是将Flash动画直接嵌入到网页中，要求访问者安装有相应浏览器的Flash播放插件，才能播放Flash文件。 在index.html中的table1的第一个单元格中插入head.swf。 在“属性”面板中设置Flash插件的宽度为568像素，高度为150像素。,兰州大学信息科学与工程学院,8.5 发布站点,back,8.5.1 测试站点,Dreamweaver的站点测试功能可以检查站点中是否存在孤立文件，是否有断掉的链接，以及存在的外部链接等。 测试站点zbkq，操作方法如下： 在“文件”面板中打开站点zbkq，在站点文件夹上单击鼠标右键。 从弹出快捷菜单中选择【检查链接】【整个本地站点】命令，打开“结果”面板。 修复错误的链接，删除孤立文件。,8.5.2 设置远程信息,将站点发布到Internet上，供人们浏览观看，就必须有可访问的域名和主机空间。 完成站点的测试之后，还需要设置站点的远程信息，之后才可以上传站点。,8.5.3 上传站点,上传站点可以利用Dreamweaver 8自带的上传功能，也可以用相应的FTP工具。,8.5.4 浏览网页,站点上传完毕后，打开IE浏览器，在地址栏中输入站点远程主机的域名或IP地址，浏览器将自动打开站点的主页。,兰州大学信息科学与工程学院,8.6 动态网页技术介绍,back,8.6.1 表单,表单是实现动态网页的一种主要网页元素，是HTML网页与浏览器实现交互的重要手段。 表单在网页中供访问者输入信息，然后将信息提交服务器处理，实现网页交互功能。 Dreamweaver 8提供了大量的表单元素，如按钮、文本框、下拉列表框、单选按钮、复选框。 可以使用“插入”工具栏的“表单”选项卡，或者选择菜单命令【插入】【表单】插入表单元素。,8.6.2 脚本语言,脚本语言是一种描述性语言，用于编写嵌入到网页中的脚本程序，既可以用于静态网页，也可以用于动态网页。 脚本程序由浏览器负责解释和执行，可以在网页上产生动态的显示效果和实现与用户交互的功能。 脚本程序代码放置在HTML文档的和标记之间。 最常用的两种脚本语言是VBScript和JavaScript，,8.6.3 服务器端处理程序,服务器端处理程序就是在服务器端执行数据处理的脚本程序，在形式上与客户端脚本程序没有太大的差别，常用的服务器端处理语言有PHP、ASP和JSP。 PHP（PHP: Hypertext Preprocessor）具有开源、跨平台、简单易学、性能优越等特点，是目前十分流行的服务器端编程语言之一。 ASP（Active Server Pages）是微软的开发的一种动态网页技术，它没有提供自己的编程语言，默认使用VBScript脚本语言，也可以使用JavaScript语言。 JSP（Java Server Pages）是Sun公司推出的一种动态网页技术。JSP技术以Java语言作为脚本语言，普遍认为JSP的执行效率比PHP和ASP都高。,兰州大学信息科学与工程学院,第8章 网页制作基础,The end Thank you,