网页设计与制作教程pdf-《网页设计与制作》教学课件

第一章网页设计与制作基础 1. 什么是网页？ 浏览网页时看到的文件称为网页，也称为网页。 一个网页可以将不同类型的多媒体信息（包括文本、图像、动画、声音、视频等）组合成一个文档。 由于这些文档是用超文本标记语言表达的，其文件名一般以.html或.htm结尾，因此也称为HTML文档或超文本。 2.什么是主页？ 我们浏览网站时看到的第一个页面。 它是整个站点的入口和门面，通常命名为：index.html。 3.什么是超文本？ 网页是一种超文本文件卡通形象，包含文本、图像、视频、声音等媒体，可以实现链接操作。 超文本可以给观看者带来视觉和听觉上的享受，因此Web技术也被称为超媒体技术。 注意，在网页上单击鼠标右键，选择“查看源文件”，可以清楚地看到网页的代码结构。 用户可以使用记事本编辑网页中的文本、图片、表格、多媒体等页面内容，并通过标记语言HTML来描述和控制这些元素，最后浏览器解释这些标记，生成最终呈现给用户的丰富多彩的网页。 4.什么是网站？ 根据提供的服务不同，通常将提供网页服务的服务器称为Web服务器，相关的网站称为Web站点。 网站由一个或多个网页组成，这些网页相互连接并存储在Web服务器上供访问者访问。

网站是提供各种信息和服务的基地，如用户熟悉的搜狐、新浪、雅虎等。 网站由许多链接在一起的网页组成。 用户浏览网站时看到的第一个页面称为主页。 从首页开始，您可以访问本网站的各个页面，也可以链接到其他网站，方便地共享网站资源。 请注意ip形象，一个网站是由多个网页组成的。 本质上是一个文件夹，用来存放站点相关的信息资源。 5. 网页的基本元素是什么？ 什么用途？ 设计时应该注意什么？ 网页包含的主要元素有：文字、图像、动画、导航栏、超链接、表格、表格等。文字是人类最重要的信息载体和交流工具，网页的主体一般都是文字。 制作网页时，可以根据需要设置文字的字体、字号、颜色、样式等属性。 独特风格的网页文字设置会给浏览者带来赏心悦目的感觉。 提示：网页应用某种字体样式后，如果浏览者的计算机中没有安装该样式的字体，则该字体将以计算机系统的默认字体显示，此时无法显示网页的效果。 网页中的图像可以提供信息、展示作品、美化网页、体现风格。 图片可以作为网页的标题、网站标志、网页背景、链接按钮、导航栏、网页主图等。图片的视觉效果比文字强很多，图片在网页中的灵活应用可以起到点缀的效果。 虽然网页中图片必不可少，但也不宜过多，因为图片的下载速度较慢，而且网页上放置的图片太多，会显得杂乱网页设计与制作教程pdf，容易压垮主机。

网页上的图像文件大多采用JPG和GIF格式，因为它们不仅压缩比高，而且具有跨平台的特点。 动画是网页上最活跃的元素，通常制作优秀且有创意的动画是吸引浏览者最有效的方式。 如果网页中的动画过多，浏览者会感到眼花缭乱，而不会密切关注。 因此，对于动画制作的要求也越来越高。 添加到网页中的动画一般是GIF格式的动画和Flash（.swf）动画。 导航栏是网站设计者在规划网站结构时必须考虑的问题。 导航栏应设置在网站的每个网页上，并且应放置在网页中相对明显的位置。 设置导航栏的目的是为了使浏览者能够顺利浏览网页、方便地返回首页或继续访问下一页。 导航栏可以设计为文本、按钮或图像。 超链接是网页最有用的功能之一。 超链接是从一个网页到另一个网页的链接，可以是本地网站上的另一个网页，也可以是世界各地的其他网页。 无论是文本还是图像，都可以添加超链接标记。 当鼠标指向超链接对象时，它会变成一个小手形状。 单击鼠标左键即可链接到相应地址（URL）的网页。 超链接包括内部链接和外部链接。 站内链接：如果网站规划了多个主题版块，则需要在网站首页添加超链接，以便浏览者快速转到感兴趣的页面。 每个子页面上还应该有超链接和返回主页的链接。

外部链接：在个人网站上放置一些与网站主题相关的外部链接，不仅可以向访问者介绍一个好的网站，而且可以使访问者愿意再次访问该网站。 （友情链接）表是网页中控制网页布局的有效方法。 为了达到理想的视觉效果，表格的边框通常不显示。 使用表格辅助布局，可以实现水平和垂直方向风格清晰的网页。 表单是一种特殊的网页元素，通常用于收集信息或实现一些交互效果。 表单的主要功能是接收浏览者在浏览器中输入的信息，然后将信息发送到服务器。 6、动态网页与静态网页的区别 在网站设计中，纯HTML格式的网页通常被称为“静态网页”，它运行在客户端，具有.html等扩展名。 静态网页的内容只是标准的HTML代码，静态网页上还可以出现各种动态效果，例如GIF格式的动画、Flash动画等。这些“动态效果”只是视觉上的网页设计与制作教程pdf，与下面要介绍的动态网页是不同的概念。 采用动态网页技术，运行在服务器端的网页和程序都是动态网页，它们会根据编写的访问数据库的程序动态生成页面。 动态网页的后缀一般为.asp、.aspx、.php、.jsp。 动态网页的优点是效率高、更新快、可移植性强。 根据前面制定的程序页面，可以根据用户的不同请求返回相应的数据，从而达到资源的最大化利用，节省服务器的物理资源。

动态网页和静态网页在视觉上没有区别，比如动画效果。 网页中包含可移动元素并不意味着它是动态网页。 静态网页也可以有动画。 请自行阅读课本中各自的特点。 7.常用的网页设计软件有哪些？ FrontPageDreamweaver8。 网页图像及网页动画制作软件 PhotoshopFireworks (.gif) Flash (.swf) 9.HTML的基本结构 9.HTML的基本结构…：告诉浏览器HTML文档从哪里开始和结束，包括头部和正文部分。 HTML 文档中的所有内容都应位于这两个标记之间，并且 HTML 文档始终以 开头和结尾。 ：HTML文件的head标签，head主要提供文档的描述信息，head部分的所有内容都不会显示在浏览器窗口中，其中可以放置页面的标题、页面的类型、使用的字符集、链接的其他脚本或样式文件…：用于表示文档的主要区域。 网页要显示的内容就放在这个标签中，结束标签表示主区域的结束。 HTML 文档中的所有内容都应位于这两个标记之间，并且 HTML 文档始终以 开头和结尾。 ：HTML文件的head标签，head主要提供文档的描述信息，head部分的所有内容都不会显示在浏览器窗口中，其中可以放置页面的标题、页面的类型、使用的字符集、链接的其他脚本或样式文件…：用于表示文档的主要区域。 网页要显示的内容就放在这个标签中，结束标签表示主区域的结束。

HTML 文档中的所有内容都应位于这两个标记之间，并且 HTML 文档始终以 开头和结尾。 : HTML 文件的 head 标签。 头部主要提供文档的描述信息。 head部分的所有内容都不会显示在浏览器窗口中。 在里面，你可以放置页面的标题、页面的类型、使用的字符集、链接的其他脚本或样式文件…：它用于指示文档的主要区域。 网页要显示的内容就放在这个标签中，结束标签表示主区域的结束。 使用记事本，代码编译后，保存时命名为：文件名。 html、保存类型选择：所有文件使用Dreamweaver新建html文件演示 11、标签 标签是HTML文档中的一些有意义的符号，这些符号表示内容的含义或结构。 标签总是用三角括号括起来，大多数标签成对出现，表示开始和结束。 标签内容 标签名称 开始标签 结束标签 标签可以有属性，赋值时使用“=”，多个属性之间用空格分隔 属性必须写在开始标签中，标签符号与中间不能有空格，如

错误的是结束标签必须加“/” 12、body标签常用属性介绍 bgcolor属性：用于设置HTML网页的背景颜色，例如表示背景颜色设置为红色。 background属性：用于设置HTML网页的背景图片，例如表示设置图片tu.jpg作为HTML网页的背景。 text属性：用于设置HTML网页的文本颜色。 用文本定义的颜色将应用于整个文档。 例如，表示文本颜色设置为红色。 link、alink、vlink属性：分别用于设置普通超链接、当前活动超链接、访问过的超链接文本的颜色。 例如topmargin和leftmargin属性：用于设置网页主要内容与网页上下两端的距离。 例如， 动手作业：完成作业1.txt中的操作 13. DreamweaverCS4简介 打开方法起始页工作界面介绍 动手作业：完成作业2.txt中的操作 14. 创建和管理本地站点站点目录结构 站点创建过程站点管理操作 动手作业：完成作业3.txt中的操作 站点文件夹index.htmlimagesflashsound站点目录结构