计算机基础课件第11章网页制作（标准屏）课件

上传人：o*** IP属地：未知上传时间：2023-03-25 格式：PPTX 页数：50 大小：3.56MB 积分：6 举报 版权申诉

已阅读5页，还剩45页未读，继续免费阅读

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

文档简介

华南理工大学计算机公共基础教研室1第11章网页制作华南理工大学计算机公共基础教研室2内容提要网页制作概述网页的结构与内容修饰美化网页制作网页特效网页布局与排版网站设计概述发布网页华南理工大学计算机公共基础教研室11.1网页制作概述3网页的概念网页就是在浏览器上看到的一个个页面，它是一种独立的超文本文件，通常以HTML语言编写而成。与普通文本相比，超文本具有两个特点：一是不仅含有简单文本，还可加入表格、图像、动画、声音和视频等多种内容，在浏览器页面上呈现效果；二是能够提供索引式链接，可从一个页面跳转到另一页面，得以实现与网络上的各种网页相连。华南理工大学计算机公共基础教研室11.1网页制作概述4静态网页DHTML动态网页服务器端动态网页网页的种类网页的种类华南理工大学计算机公共基础教研室11.1网页制作概述5静态网页

通常使用HTML语言编写。

静态网页的内容以及所呈现的效果与事先设计的完全一致，且不能发生信息交互的网页。网页的种类华南理工大学计算机公共基础教研室11.1网页制作概述6DHTML动态网页

DHTML（英文DynamicHTML的缩写）动态网页只需在浏览器中解释、运行就能够实现人机交互和动态显示效果，故亦称“客户端动态网页”。

通常使用CSS（层叠样式表）、JavaScript（脚本语言）、DOM（文本对象模型）与HTML相结合制作而成。网页的种类华南理工大学计算机公共基础教研室11.1网页制作概述7动态网页

客户端与服务器端能够发生交互信息的网页。网页内容能够自动更新。

动态网页通常采用ASP、PHP、JSP等技术制作，由服务器解释、执行，生成相应的HTML代码，返回用户端的浏览器呈现用户所需的信息。网页的种类华南理工大学计算机公共基础教研室11.1网页制作概述8网页制作工具

目前制作网页的工具很多，从功能上主要分为三种：代码编辑工具、“所见即所得”可视化编辑工具和混合型编辑工具。网页制作工具华南理工大学计算机公共基础教研室11.1网页制作概述9

采用代码编辑工具，用户便于控制代码，能够较好地实现HTML代码在浏览器中的显示效果，网页的代码做得较为精炼。缺点是只适用于对网页制作语言比较熟悉的用户。代码编辑工具网页制作工具华南理工大学计算机公共基础教研室11.1网页制作概述10

采用可视化编辑工具的优点是应用系统提供的各种工具选项，可直观地对网页显示效果进行排版，制作效率较高；代码由系统自动生成，用户即便不熟悉网页制作语言也可制作出较好的网页。其缺点是代码由系统自动生成，难免产生一些冗余的代码。可视化编辑工具网页制作工具华南理工大学计算机公共基础教研室11.1网页制作概述11

混合型工具的功能比较全面。除了兼有上述两种工具特点外，一般还具有创建、管理站点文件等功能，适用于整个网站的建设和管理。具有代表性的软件如Dreamweaver等。混合型编辑工具网页制作工具华南理工大学计算机公共基础教研室11.1网页制作概述12网页制作基本方法

（1）打开记事本。1.使用记事本（文本编辑器）制作网页制作步骤：

（2）输入代码。（3）保存为网页文档。（4）使用浏览器测试网页效果。网页制作工具华南理工大学计算机公共基础教研室11.1网页制作概述13网页制作基本方法（1）启动Dreamweaver软件。2.使用Dreamweaver（混合型编辑器）制作网页制作步骤：（2）新建HTML文档，先保存并命名文件。（3）选择“设计”或“拆分”方式，加入各种元素并设置其属性。（4）按F12预览网页效果。网页制作工具华南理工大学计算机公共基础教研室11.2网页的结构与内容14HTML标签（标记） <html> <head> <title>古诗一首</head> <body> <h3>登鹳雀楼</h3> <h4>——王之涣</h4> <p>

白日依山尽，

黄河入海流。<br>

欲穷千里目，

更上一层楼。<br> </p> </body> </html>一个HTML文件是由许多文字及标签组合而成。标签是用尖括号括起来的字符或者单词，例如<title><h3><p>等。

当浏览器阅读HTML时，它会解析包围文本的所有标签，标签告诉浏览器文本的结构和意义，哪些文本是标题，哪些文本是段落，哪些需要强调，甚至哪里需要放置图片。

因此，一个HTML文件只要经过浏览器的解读，密密麻麻的HTML代码就能转变为图文并茂的网页。1.HTML基本语法华南理工大学计算机公共基础教研室11.2网页的结构与内容15<h3>登鹳雀楼</h3>这里是用来标记标题的开始标签。通常在部分内容的周围添加标签。这里使用<h3></h3>标签告诉浏览器“登鹳雀楼”是三级标题。</h3>是用来结束<h3>标题的结束标签，它之所以是个结束标签，因为它出现在内容的后面，而且在h3前面有/，所有结束标签都带有/表示标签的结束。标签通常由尖括号及标签名组成，尖括号即“<”和“>”。整个语句称为一个元素，在这里我们称其为<h3>元素。一个元素由闭合标签及它们之间的内容组成。即：元素=开始标签+内容+结束标签我们称一对开始和结束标签为匹配标签（双标签）。剖析标签1.HTML基本语法华南理工大学计算机公共基础教研室11.2网页的结构与内容16为进一步扩展标签的用法，在开始标签中可加入属性。

白日依山尽，黄河入海流。<br>

欲穷千里目，更上一层楼。<br/> </p> </body> </html>以“<”和“>”符号括起来的字符，构成一个标签。标签名称不区分大小写，为符合新规范建议采用小写。标签分有双标签和单标签。双标签以成对方式出现。单标签因无结束标签，为符合新规范可写成：如“<br/>”表示结束这个标签。标签与标签可以嵌套使用。HTML语言可以加入注释标签。空格符、回车符分别使用“ ”符号和“<br>”标签替代。标签分有双标签和单标签。1.HTML基本语法华南理工大学计算机公共基础教研室11.2网页的结构与内容172.文档结构HTML文档的基本结构：

网页内容

</body> </html><html>和</html>表示HTML文档开始和结束。HTML文档分“头部”和“主体”两部分。<head>和</head>标签用来定义文件的“头部”。<body>和</body>标签用来定义文件的“主体”。文件的“头部”主要用于放置说明性语句，除title外，放置的内容一般不会显示在浏览器的页面上。文件的“主体”主要用来放置页面显示的内容。华南理工大学计算机公共基础教研室11.2网页的结构与内容18常用标签3.常用标签华南理工大学计算机公共基础教研室11.2网页的结构与内容19常用标签3.常用标签华南理工大学计算机公共基础教研室11.3修饰美化网页20

如何能呈现出页面的视觉美感，除了要有好的创意和美术设计外，还需使用代码技术来实现其设计思想。

随着CSS的不断发展，样式表的功能也更加充实、完善，设计者使用CSS实现修饰美化网页变得更加容易。

网页能否给人留下良好的印象，除了思想内容外，还需有魅力的视觉感受。修饰美化网页概述华南理工大学计算机公共基础教研室11.3修饰美化网页21

在CSS颁发之前，网页上的所有功能都是由HTML实现的，有了CSS后，它与HTML标签嵌套在一起，能使网页产生不同的显示效果。

CSS是英文CascadingStyleSheet的缩写，意为“层叠样式表”。自1996年W3C开始发布第一版CSS1.0起，时至今日，最新版是CSS2.1，新一代的CSS3版本仍然在开发议定中，目前还是处于草案阶段，但是不少新版的开发软件及浏览器已经开始支持HTML5和CSS3了。CSS的概念华南理工大学计算机公共基础教研室11.3修饰美化网页22

CSS的优点

网页元素在位置上、形式上得到更有效的控制。

代码更加精炼。

维护更加方便。

同时也使网页的结构和表现相分离，以HTML作用于网页的结构上，以CSS作用于网页的外观上。从而使网页的设计更加合理有效。华南理工大学计算机公共基础教研室11.3修饰美化网页23表的基本格式如下：

选择符{属性:属性值;}样式表也可以带有多个属性格式如下：

选择符{属性1:属性值1;属性2:属性值2;......}说明：属性与属性之间使用分号“;”间隔。例如：p{font-style:italic;color:red;}意义：将p元素（段落）文字设置为斜体、红色。样式表的基本格式华南理工大学计算机公共基础教研室11.3修饰美化网页24定义样式表的选择符主要有三种方式，分别用于不同的场合。（1）格式：标签名称{属性:属性值}示例：p{font-family:幼圆;color:#0000ff}

应用：适合于定义相同标签在不同位置上的样式。（2）格式：.类名称{属性:属性值}示例：.text{font-family:幼圆;}

应用：通常可用于定义各种情况的样式。（3）格式：#ID名称{属性:属性值}示例：#p-1{text-indent:3em;color:#00ff00}

应用：通常用于定义层布局的样式。1.样式表创建方式华南理工大学计算机公共基础教研室11.3修饰美化网页25样式表的引用同样有三种方式，也分别用于不同的场合。内部式（嵌入式）此方式便于修改整个页面的样式。行内式（内联式）此方式便于修改页面中某个样式。外部式此方式便于修改网站所有页面的样式。2.样式表引用方式华南理工大学计算机公共基础教研室11.3修饰美化网页26内部式是把样式表嵌入文档头部的。例如：

h3{color:red;}

p{font-family:幼圆;color:#0000ff} </style> </head>

<body>

<h3>这是三号标题</h3>

<p>这是文本段落</p>

</body>2.样式表引用方式（1）内部式（嵌入式）华南理工大学计算机公共基础教研室11.3修饰美化网页27（2）行内式（内联式）行内式是把样式表直接写在HTML标签内。例如：<body><h3style=“color:red”>这是红色三号标题</h3></body>2.样式表引用方式华南理工大学计算机公共基础教研室11.3修饰美化网页282.样式表引用方式（3）外部式

外部式是把样式表作为外部文件保存，后缀名为.css。CSS作为一个外部文件引入方式有两种，一种是做链接，另一种是导入。例如：<head><linkrel=StyleSheethref=“teststyle.css”></head><body><h1>这标题用黑体红字显示</h3><p>这是文本段落文本段落首行缩进3em，蓝色字体。</p></body>外部文件：teststyle.css文件样式：h1{color:red;font-family:黑体}p{text-indent:3em;color:#0000ff}华南理工大学计算机公共基础教研室11.4制作网页特效29网页特效的概念在不同的环境中出现一些新的提示信息或随着鼠标的操作而产生各种的特殊效果，这种特殊效果只需在浏览器中解释、运行就能够实现人机交互和动态显示，简称为网页特效。

网页特效主要是由JavaScript语言来实现，JavaScript语言是一种脚本语言，在网页中一般与html、CSS结合在一起使用。华南理工大学计算机公共基础教研室11.4制作网页特效30网页特效与Dwereamaver行为

Dreamweaver的行为，正是为方便设计者不需对JavaScript语言有较多的了解和编程知识，就可直接利用这些预置行为便捷地制作出精美的动态交互式网页，利用可视化的方式来设计实现这种网页特殊效果。华南理工大学计算机公共基础教研室11.4制作网页特效31Dreamweaver行为的概念

行为（behavior)是指通过某种方式完成的动作，比如把鼠标移动网页的某个对象上就会变换为其它对象，当鼠标离开对象时又恢复原状等。Dreamweaver的行为是由事件（Event）和动作（Action）两部分组成。行为华南理工大学计算机公共基础教研室11.4制作网页特效32事件与动作的概念

事件是指完成某种动作的方式，例如，onClick（单击对象），onMouseOver（鼠标在对象上），onMouseMove（移动鼠标），onLoad（页面或图像装载）等。

动作是通过某种事件方式来激发完成的某种特殊功能，例如，交换图像、播放声音、弹出信息窗口等。华南理工大学计算机公共基础教研室11.4制作网页特效33Dreamweaver行为制作网页特效制作网页特效示例——显示-隐藏元素本示例主要是实现如下功能：（1）当浏览器打开页面时，显示一幅模糊图像并出现提示用户操作信息窗口。（2）用户把鼠标移到图像上方，图像将变换为清晰图像显示，当鼠标离开时图像时又恢复原状。（3）如果在图像上双击，图像将从小图变换为大图显示。华南理工大学计算机公共基础教研室11.5网页布局与排版34框架布局表格布局CSS+DIV层布局

常见的实现网页布局的方法有框架布局、表格布局和CSS+DIV的层布局等几种方式。

网页布局就是将网页的各种元素在页面上如何分布、排列、定位的技术。网页布局与排版的概念华南理工大学计算机公共基础教研室11.5网页布局与排版35框架布局技术

框架布局技术是把浏览器显示页面部分分为几个各自独立的区域，在不同的区域中能够独自显示不同的网页，页面可以独立翻滚。

这种导航页面结构清晰、版面友好，制作容易，且借助一个页面承载多个页面的方式来重用页面代码。华南理工大学计算机公共基础教研室11.5网页布局与排版36表格布局技术

表格布局是指利用网页表格进行布局。把表格的单元格按需要通过合并、拆分的方法重新组合单元格的大小和位置，然后把网页要显示的内容放置到单元格中，这样就能对网页的元素定位。

表格可以嵌套，因此可将页面划分出多重区间并逐一排版。华南理工大学计算机公共基础教研室11.5网页布局与排版37层<div>布局技术

层<div>是HTML一个区块的容器标签，是网页各种元素的载体，它可放置文本、表格、图像、动画、视频等。

页面中可以设置多个层，层与层之间可以嵌套和重叠。使用CSS能够精确地控制层的浮动和定位，也可控制层的叠放顺序，以及层的显示或隐藏。因此可以更灵活、更有效地实现网页布局与排版效果。华南理工大学计算机公共基础教研室11.6网站设计概述38网站的概念

网站是为网络用户提供信息的场所，是设计者表达某些主题内容设计的多张网页，利用超链接把相关栏目内容的网页组织起来，存放在Web服务器上。用户通过网络和浏览器从一个页面跳转到另一个页面，实现对整个网站的浏览。华南理工大学计算机公共基础教研室11.6网站设计概述39网站制作流程规划网站组织内容制定结构收集、组织资料和素材，文章图片动画明确主题、确定设计目标、制定设计方案。多媒体信息等。我的首页关于我旅游日记我的相册联系方式黄山游新疆游四川游华南理工大学计算机公共基础教研室11.6网站设计概述40网站制作流程制作测试发布Web服务器上传服务器登录浏览网页各种链接功能和内容显示效果创建站点制作主页制作其它网页华南理工大学计算机公共基础教研室11.6网站设计概述41站点的概念

站点是制作网站时在机器上的一个物理位置，即在硬盘上保存文件的地方。创建站点是为了用户在制作、修改网页时，能方便地管理站内的各种目录、文件或上传到web服务器上。华南理工大学计算机公共基础教研室11.6网站设计概述42Dreamweaver的站点制作

（1）磁盘上创建一个文件夹，把各种文件、素材包括子目录放进文件夹中。在本地创建站点步骤：

（2）启动Dreamweaver，打开“站点”菜单选择“新建站点”

（3）在“站点”页面中，输入站点名称和本地站点文件夹，保存设置后系统在“文件”面板中自动生成站点管理器。华南理工大学计算机公共基础教研室11.7发布网页43发布网页一般有两种方式：

一是租用Internet服务供应商提供的服务器。

二是自己动手安装一个Web服务器。

安装Web服务器的软件有许多种，如IIS（InternetInformationServer）、Apache、Tomcat等。发布网页华南理工大学计算机公共基础教研室11.7发布网页44（1）选择安装程序（2）设置安装选项

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

计算机基础课件第11章网页制作（标准屏）课件

文档简介

温馨提示

最新文档

评论

计算机基础课件 第11章 网页制作（标准屏）课件

文档简介

温馨提示

最新文档

评论

相关文档

计算机基础课件第11章网页制作（标准屏）课件