网页制作课件_第1页
网页制作课件_第2页
网页制作课件_第3页
网页制作课件_第4页
网页制作课件_第5页
已阅读5页，还剩52页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第9网页制作基础学习HTML语言,掌握网页制作的基础技术。中山大学计算机科学系第网页制作基础学习HTML语言,掌握网页制作的基础技术。中山第九章网页制作基础概述网页制作工具配置WEB服务器HTML制作基础级联样式表（CSS）技术使用多媒体网页布局技术中山大学计算机科学系第九章网页制作基础概述中山大学计算机科学系9.1概述9.1.1基本概念一、WebWeb是以HTML语言和HTTP协议为基础、提供面向Internet服务、具有一致用户界面的全球信息网络，具有交互性、动态性和多平台等特性。Web访问流程：中山大学计算机科学系9.1概述9.1.1基本概念中山大学计算机科学系9.1概述二、HTTP协议超文本传输协议（HyperTextTransferProtocol，简称HTTP）是Web浏览器和Web服务器用来交换信息的一种Internet协议，该协议允许用户使用一个客户端程序（如Web浏览器）通过URL在Web服务器上检索文本、图形、声音等信息。三、超文本超文本（Hypertext）也是普通的文本，但是可以通过标记控制文本的显示格式，也可以嵌入链接、图形和其他多媒体信息，因此超文本也常称为超媒体（Hypermedia）。中山大学计算机科学系9.1概述二、HTTP协议中山大学计算机科学系9.1概述四、超链接超链接（(Hyperlink）是指从一个网页指向另一个目的端的链接。五、HTML语言HTML是HyperTextMarkupLanguage的简称，用来描述Web页面。HTML通过在正文文本中嵌入各种标记，使普通正文文本具有超文本的功能。HTML文件的扩展名：“.htm”或“.html”生成方式：手工直接编写自动转换由Web服务器上的程序动态生成中山大学计算机科学系9.1概述四、超链接中山大学计算机科学系9.1概述六、DHTML语言动态HTML（简称DHTML）是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。DHTML有3个主要特征，即动态样式、动态内容和动态定位。动态样式是指改变网页的外部显示特征，动态内容是指更换显示在页面上的文本或图像，而动态定位是指移动页面上的文本和图像DHTML技术：脚本语言（如JavaScript）、文档对象模型（简称DOM）和级联样式表（简称CSS）等。中山大学计算机科学系9.1概述六、DHTML语言中山大学计算机科学系9.1概述9.1.2网页制作步骤（1）收集、整理资料（2）规划、创建站点（3）制作网页(构建页面框架、导航条、返回首页链接）（4）站点测试（5）站点的更新与维护中山大学计算机科学系9.1概述9.1.2网页制作步骤中山大学计算机科学系9.1概述9.1.3网页制作原则（1）整体规划（2）站名有创意（3）主题鲜明（4）网页通用（5）导航要明朗（6）动画不宜过多（7）图像优化（8）定期更新中山大学计算机科学系9.1概述9.1.3网页制作原则中山大学计算机科学系9.2网页制作工具Microsoft公司的FrontPageMacromedia公司的网页制作“三剑客”：Dreamweaver、Flash和Fireworks它们都提供了一个可用于创建、设计和编辑Web站点及其相应页面的“所见即所得”的制作环境。中山大学计算机科学系9.2网页制作工具中山大学计算机科学系9.2网页制作工具9.2.1网页制作方式HTML方式：使用纯文本编辑器（如“记事本”）直接编写页面的HTML代码。可视化方式：使用可视化制作工具和环境（如FrontPage、Dreamweaver），以“所见即所得”的直观方式设计页面内容，制作工具将自动生成相应的HTML代码。两种方式各有优劣、相辅相成：先用可视化方式设计页面布局和内容，然后用HTML方式检查、修改自动生成的HTML代码。中山大学计算机科学系9.2网页制作工具9.2.1网页制作方式中山大学计算机科9.2网页制作工具9.2.2FrontPage制作初步FrontPage2002工作界面中山大学计算机科学系9.2网页制作工具9.2.2FrontPage制作初步9.2网页制作工具网页创建示例例9.1制作一个如图9.4所示的带滚动字幕“欢迎进入网页世界!”的简单页面。中山大学计算机科学系9.2网页制作工具网页创建示例中山大学计算9.2网页制作工具创建站点创建站点就是创建一个文件夹，然后将有关文件放入这个文件夹中。例9.2使用FrontPage的“个人站点”模板创建一个“个人主页”网站。中山大学计算机科学系9.2网页制作工具创建站点中山大学计算机科9.2网页制作工具打开网页FrontPage可打开当前站点中的网页或本地文件系统中任意位置的网页文件，甚至打开Web上的远程网页例9.3使用FrontPage打开微软公司的主页中山大学计算机科学系9.2网页制作工具打开网页中山大学计算机科9.2网页制作工具9.2.3Dreamweaver制作初步采用Mac机浮动面板的设计风格Dreamweaver8.0工作界面中山大学计算机科学系9.2网页制作工具9.2.3Dreamweaver制作9.2网页制作工具网页创建示例例9.4制作一个含有翻转图片（即，当鼠标移到一张图片时，原来的图片切换为另一张图片，鼠标移开后，又恢复为原图片）的页面。使用“属性”面板格式化文字选择菜单“插入”→“图像对象”→“鼠标经过图像”命令，设计一个“鼠标经过图像”中山大学计算机科学系9.2网页制作工具网页创建示例中山大学计算9.3配置Web服务器9.3.1安装IIS5.1IIS是Windows平台的Web服务器，支持Web服务、FTP服务、SMTP服务等功能。安装步骤：“控制面板”→“添加或删除程序”→“添加/删除Windows组件”→选中“Internet信息服务(IIS)”选项验证：打开IE，输入localhost中山大学计算机科学系9.3配置Web服务器9.3.1安装IIS5.1中山大9.3配置Web服务器9.3.2配置Web站点启动“Internet信息服务”管理程序：“控制面板”→“管理工具”→执行快捷方式“Internet信息服务”查看本机默认Web站点：“(本地计算机)”→“网站”→“默认网站”一、设置主目录例9.5把“默认网站”的主目录设置为E:\MyWeb。中山大学计算机科学系9.3配置Web服务器9.3.2配置Web站点中山大学计9.3配置Web服务器二、创建虚拟目录例9.6创建一个虚拟目录Company，并把该目录映射到物理目录E:\Company(使用FrontPage的网站模板“公司展示向导”在目录E:\Company下创建一个网站)。三、设置默认文档默认文档是指当访问者没有在其URL请求中指定文件名时，服务器将向访问者提供的文档。例9.7创建一个虚拟目录Test（映射到物理目录E:\Test），默认文档设置为只有一个文档名S0901.htm。中山大学计算机科学系9.3配置Web服务器二、创建虚拟目录中山大学计算机科学系9.4HTML制作基础网页制作的本质是编写网页的HTML代码，因此必须熟悉HTML语言。在学习HTML语言的过程中，读者没有必要死记大量的HTML标记。读者要善于利用现有的专业化网页制作工具（如FrontPage），根据设计意图，先在网页工具的可视化环境下设计页面，然后看一看它自动生成的HTML代码，就可以逐渐熟悉、掌握HTML语言。中山大学计算机科学系9.4HTML制作基础中山大学计算机科学系9.4HTML制作基础9.4.1HTML标记一、HTML标记的作用HTML标记规定Web文档的逻辑结构，并且控制文档的显示格式二、HTML标记的形式使用尖括号标注标记名，如<P>、</P>。分为：双标记：如<H1>HTML入门</H1>单标记：如<BR>三、HTML标记的属性域如<HRsize="3"align="left"width="75%">中山大学计算机科学系9.4HTML制作基础9.4.1HTML标记中山大学计9.4HTML制作基础9.4.2结构标记标准的HTML文档包括5个结构标记，其嵌套和顺序如例9.8所示。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML3.2//EN"><HTML><HEAD><TITLE>关于文档结构</TITLE></HEAD><BODY><P>精通文档结构</P></BODY></HTML>中山大学计算机科学系9.4HTML制作基础9.4.2结构标记中山大学计算机9.4HTML制作基础9.4.3常用标记HTML页面通常有标题、段落、列表和水平线等元素，对这些页面元素标记的认识是掌握HTML语言的起点。中山大学计算机科学系9.4HTML制作基础9.4.3常用标记中山大学计算机9.4HTML制作基础标题HTML提供6级标题标记，<H1>最大，<H2>次之，…，<H6>最小。例9.9设计一个含有1级标题、3级标题和6级标题的页面。基本制作方法控制标记的大小写<META>标记：用于标注可被浏览器、搜索引擎或制作工具使用的元信息。使用“Microsoft脚本编辑器帮助”查看HTML标记中山大学计算机科学系9.4HTML制作基础标题中山大学计算机9.4HTML制作基础段落段落标记用于指定整段文本的格式例9.10制作几种段落格式基本制作方法注释标记<!--…-->转义字符“ ”、“<”、“>”中山大学计算机科学系9.4HTML制作基础段落中山大学计算机9.4HTML制作基础强制分行<BR>标记指定分行，但不分段例9.11显示一首诗中山大学计算机科学系9.4HTML制作基础强制分行中山大学计9.4HTML制作基础列表例9.12无序列表例9.13改变列表外观例9.14使用定义列表给出HTML和IE的定义水平线例9.15使用水平线把章节名和章节内容分隔开来中山大学计算机科学系9.4HTML制作基础列表中山大学计算机9.4HTML制作基础字符级格式化字符级格式化用于对单个字符或单词进行强调。例9.16对段落中的一些文字进行格式化<FONT>标记<FONT>标记用于指定文本的字体特性，如颜色、大小和字体。例9.17使用<FONT>设置字体中山大学计算机科学系9.4HTML制作基础字符级格式化中山大9.4HTML制作基础9.4.4使用超链接超链接标记的基本形式是：<Ahref="URL">…</A>其中，href属性指定的URL用于标识Web上文件的位置，这些地址可能指向某个HTML文档，也可能指向文档引用的其他元素，如图形、小程序、脚本和其他类型的文件。中山大学计算机科学系9.4HTML制作基础9.4.4使用超链接中山大学计算9.4HTML制作基础文本链接链接的文本允许在一个单词或短语上单击从而跳到另一个文件。例9.18在文字“千禧年”上建立了一个到页面year2k.htm的超链接FrontPage制作方法图形链接链接的图形也允许在一个图片上单击而跳到另一个文件。例9.19在图形上建立了一个到页面year2k.htm的超链接中山大学计算机科学系9.4HTML制作基础文本链接中山大学计9.4HTML制作基础锚点链接定义锚点，如：<aname="location">这里是一个锚点</a>链接锚点，如：<ahref="#location">链接锚点location</a>例9.20锚点定义及链接FrontPage方法中山大学计算机科学系9.4HTML制作基础锚点链接中山大学计9.4HTML制作基础URL的形式在链接中，既可以使用绝对URL（包括协议名、主机名），也可以使用相对URL（不包括协议名、主机名），另外也可以使用锚点。中山大学计算机科学系9.4HTML制作基础URL的形式中山9.4HTML制作基础9.4.5通过<BODY>标记设置颜色一、设置背景颜色背景色是填充整个浏览器窗口的颜色，如：<BODYbgcolor="#C0C0C0">二、设置文本颜色例如，以下代码把正文设置为黑色，把链接设置为蓝色，把已访问的链接设置为蓝色，而把活动链接设置为红色：<BODYtext="#FFFFFF"link="#0000FF"alink="#000099"vlink="#FF0000">中山大学计算机科学系9.4HTML制作基础9.4.5通过<BODY>标记设9.5级联样式表（CSS）技术9.5.1CSS简介级联样式表（简称CSS）技术是一种格式化网页的标准技术，CSS使用样式定义页面元素的显示方式和位置，以扩展HTML的功能。CSS样式可以作用于一个元素，也可以作用于具有指定HTML标记的所有元素，另外也可以作用于一组分配有指定class属性或id属性的元素。例9.21使用CSS技术设计一个含有2个<P>段落的页面，其所有文字的字形为“倾斜”。FrontPage方法<STYLE>标记中山大学计算机科学系9.5级联样式表（CSS）技术9.5.1CSS简介中山大9.5级联样式表（CSS）技术9.5.2样式定义样式定义的格式基本格式：selector{property1:value1;property2:value2;…}每个样式定义都包含一个选择器，其后是该选择器的属性和值，如：H1{font-size:large;color:green}H2{font-size:small;color:blue}也可以在一个样式定义中指定多个选择器，如：H1,H2,H3{color:red}中山大学计算机科学系9.5级联样式表（CSS）技术9.5.2样式定义中山大学9.5级联样式表（CSS）技术选择器的分类选择器分为HTML标记、具有上下文关系的HTML标记、类、ID和虚类。一、HTML标记选择器HTML标记是最典型的选择器，为HTML标记定义的样式将改变它的默认显示格式。二、具有上下文关系的HTML标记选择器为位于某个标记内的标记设置特定的样式。如：ADDRESSI{color:red}中山大学计算机科学系9.5级联样式表（CSS）技术选择器的分类9.5级联样式表（CSS）技术三、类选择器类选择器形式：.classname{property:value;…}例如：.web_name{font-style:italic;font-weight:bold}效果：引用该类的标记将采用所定义的样式例9.22使用类选择器控制页面中单词“Web”的显示样式为“倾斜、加粗”中山大学计算机科学系9.5级联样式表（CSS）技术三、类选择器中山大学计算机科9.5级联样式表（CSS）技术四、ID选择器HTML标记可以有ID属性，其作用在于为页面元素指定一个ID选择符。ID选择器样式的定义格式：#IDname{property:value;…}如：#web_name{font-style:italic;font-weight:bold}例9.23使用ID选择器控制页面首次出现的术语“级联样式表(CSS)”显示样式为“倾斜、加粗、大字体”。中山大学计算机科学系9.5级联样式表（CSS）技术四、ID选择器中山大学计算机9.5级联样式表（CSS）技术五、虚类选择器对于<A>标记，可以使用虚类的方式设置不同类型链接的显示方式，如表9-10所示。例9.24使用虚类选择器除去页面中超链接的下划线，其浏览效果如图9.39所示。属性“text-decoration:none”指明文本没有修饰，当然也就没有下划线了。中山大学计算机科学系9.5级联样式表（CSS）技术五、虚类选择器中山大学计算机9.5级联样式表（CSS）技术9.5.3使用样式使用CSS样式有三种方式，即：嵌入样式表、链接外部样式表和内嵌样式。嵌入样式表使用<STYLE>标记把一个或多个CSS样式定义在HTML文档的<HEAD>标记之间。在嵌入样式表中定义的CSS样式作用于当前页面的有关元素。中山大学计算机科学系9.5级联样式表（CSS）技术9.5.3使用样式中山大学9.5级联样式表（CSS）技术链接外部样式表定义外部样式表：把CSS样式定义写入一个以.css为扩展名的文本文件中使用方法：在<HEAD>部分加入以下代码：<linkrel="stylesheet"type="text/css"href="mystyle.css">链接外部样式表的好处在于一个外部样式表可以控制多个页面的显示外观，从而确保这些页面外观的一致性。例9.25设计多个页面，要求这些页面中所有大学名称的显示样式为“加粗”，并且所有超链接没有下划线。中山大学计算机科学系9.5级联样式表（CSS）技术链接外部样式9.5级联样式表（CSS）技术内嵌样式直接为某个页面元素的HTML标记的style属性指定的样式就是内嵌样式，该样式只作用于这个元素。例如：<Pstyle="font-size:large;color:red">Hello</P>例9.26使用内嵌样式设计一个页面，要求页面中大学名称的显示样式为“加粗”，并且超链接没有下划线。中山大学计算机科学系9.5级联样式表（CSS）技术内嵌样式中山9.5级联样式表（CSS）技术CSS样式的优先级CSS样式是“级联”的，即全局样式规则会一直应用于HTML元素，直到有局部样式将其取代为止。局部样式的优先级高于全局样式。在局部样式应用于页面元素之后，全局样式中不与局部样式冲突的部分继续应用于这些元素。例9.27设计一个页面，要求页面中超链接的显示字体为“隶书”，没有下划线，但其中一个超链接有下划线。中山大学计算机科学系9.5级联样式表（CSS）技术CSS样式的9.5级联样式表（CSS）技术9.5.4CSS属性CSS属性简介级联样式表（CSS）技术的核心是大量的CSS属性，这些属性大致分为以下几类：字体属性、文本属性、颜色和背景属性、容器属性、列表属性、鼠标属性、定位和显示属性以及CSS滤镜属性等。关于CSS属性的详细描述也可从Microsoft脚本编辑器帮助系统中查找到。中山大学计算机科学系9.5级联样式表（CSS）技术9.5.4CSS属性中山大9.5级联样式表（CSS）技术在使用CSS属性时，有必要了解如何指定长度单位和颜色值。长度单位可以用绝对单位，也可以用相对单位。中山大学计算机科学系9.5级联样式表（CSS）技术在使用CSS属性时，有必要了9.5级联样式表（CSS）技术颜色值可以使用表9-13所列的任何一种方式为CSS属性指定颜色值。中山大学计算机科学系9.5级联样式表（CSS）技术颜色值中山大学计算机科学系9.5级联样式表（CSS）技术CSS滤镜滤镜是CSS的一种扩充，能够将特定的效果（如阴影效果、模糊效果、翻转效果等）应用于文本、图片或其他对象。使用filter属性定义滤镜效果，格式如下：filter:滤镜名称（参数）例如：IMG{filter:alpha(Opacity=80)}IMG{filter:alpha(Opacity=50)flipV()}例9.28设计含有一幅图像的页面，要求图像垂直翻转，并且半透明。中山大学计算机科学系9.5级联样式表（CSS）技术CSS滤镜中9.6使用多媒体除图片之外，HTML页面也可以使用多种标记添加音频、视频、动画等多媒体信息。9.6.1网页的背景声音使用<BGSOUND>标记为网页配置背景声音。例9.29设计一个只播放音乐的空白页面。<BGSOUNDsrc="S0929.mid"loop="-1">中山大学计算机科学系9.6使用多媒体中山大学计算机科学系9.6使用多媒体9.6.2插入视频<IMG>标记可以使用dynsrc属性为页面引入视频例9.30为页面添加一个循环播放10次的视频：<IMGborder="0"dynsrc="S0930.AVI">中山大学计算机科学系9.6使用多媒体9.6.2插入视频中山大学计算机科学系9.6使用多媒体9.6.3插件插件标记<EMBED>用于插入音频或视频等多媒体文件。要正确解释这种标记，浏览器必须安装播放相应多媒体文件的插件程序。例9.31为页面添加了一个访问者可以控制是否播放的音频插件<EMBEDsrc="Momo.mp3"autostart="false">Web浏览器将根据<EMBED>标记的src属性所指定的文件扩展名来调用相应的浏览器插件程序中山大学计算机科学系9.6使用多媒体9.6.3插件中山大学计算机科学系9.6使用多媒体9.6.4ActiveX控件ActiveX控件是Windows操作系统所支持的特殊软件组件HTML使用<OBJECT>标记为网页添加ActiveX控件，以扩展HTML的功能使用ActiveX控件也可以为网页添加特殊格式的图像、音频、视频、动画等多媒体信息。例9.32为页面添加一个由WindowsMediaPlayer控件播放的视频文件中山大学计算机科学系9.6使用多媒体9.6.4ActiveX控件中山大学计9.7网页布局技术布局页面时通常采用以下三种技术：表格布局、框架布局和层布局。9.7.1表格布局表格布局是最常用的一种页面布局技术，大部分网页都采用表格作为基本的布局技术。表格布局的基本思想是使用表格将一个网页分隔成多个互不重叠的

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论