《网页设计与制作》教学课件(1).ppt

1、第1章基于网页设计和制作，1.1学习挑战：网页和web网站基础知识1.2学习挑战：web网站开发的基本过程1.5学习挑战：HTML徽标语言基础知识1.3学习挑战：Dreamweaver CS4 1.4学习挑战：创建和管理本地网站1.6应用节目实例简单网页1.7培训，1.1学习挑战：1.1什么是网页？在浏览web时查看的文件称为网页或web页。网页可以将不同类型的多媒体信息(如文本、图像、动画、声音、视频等)组合到一个文档中。由于这些文档用超文本标记语言表示，因此档案名称通常为。html或.以htm结尾，因此也称为HTML文档或超文本。2 .什么是主页？这是我们访问网站时看到的第一页。整个网站的

2、入口和门面，通常命名为index.html。3 .什么是超文本？文本、图像、视频、声音等媒体的文本。网页是超文本文件，您可以使用链接。超文本使观众享受视觉和听觉的乐趣，所以web技术也称为超媒体技术。在网页上单击鼠标右键，然后选择“查看源档案”，可以清楚地查看网页的代码结构。用户可以使用记事本编辑web页上的页面内容(如文本、图片、西餐和多媒体)，并通过标记语言HTML描述和控制这些元素。最后，浏览器可以解释这些标签，最终在用户眼前创建丰富多彩的网页。4 .什么是网站？根据服务的提供，通常提供web服务的服务器称为web服务器，相关网站称为web站点。网站由一个或多个网页组成。这些网页徐璐连接

3、，存储在web服务器上，浏览器可以访问。网站是提供用户熟悉的搜狐、新浪、雅虎等多种信息和服务的基地。网站由很多网页组成。用户浏览网站时查看的第一个页面称为主页。在主页上访问牙齿网站上的所有页面，或连接到其他网站，轻松共享网站资源。网站由多个网页的组合组成。默认情况下，这是保留网站相关信息资源的文件夹。5 .网页的基本元素是什么？有什么用？设计的时候要注意什么？web页面包含文本、图像、动画、导航栏、超连结、表格和西餐等主要元素。文本是人类最重要的信息载体和交流工具，网页的主体一般以文本为主。创建网页时，可以根据需要设置文本的字体、大小、颜色和样式等属性。独特风格的web文本设置给访问者带来愉快

4、的感觉。提示：将字体样式应用于网页后，如果浏览器计算机上没有安装该样式的字体，字体将显示为电脑系统默认字体，并且无法显示网页的效果。图像可以在网页上提供信息，展示作品，美化网页，实现风格等效果。图像可以用作网页的标题、网站徽标、网页背景、链接按钮、导航栏、web master地图等。图像的视觉效果比文字强得多，将图像灵活地应用于网页可以产生点效果。图像对网页是必需的，但是图像下载速度慢，网页上放了太多的图片，会显得混乱，有热闹的气势，所以太多的话会渡边杏。网页上的大多数图像文件都使用JPG和GIF格式。因为不仅压缩率高，而且具有跨平台特性。动画是网页上最活跃的元素，一般来说，制作优秀而有创意的

5、动画是吸引访问者的最有效的方法。如果网页上有太多的动画，浏览者会眼花缭乱，无心仔细看。因此对动画的要求越来越高。添加到网页的动画通常包括GIF格式的动画和Flash(.swf)动画等。导航栏是网站设计人员在规划web网站结构时必须考虑的问题，必须在网站的每个网页上设置导航栏，并将导航栏放在网页上相对突出的位置。导航栏旨在使访问者能够无缝浏览网页、轻松返回主页或访问下一页。导航栏可以是文本、按钮或图像的样式。超链接是网页中最有用的功能之一。超链接是从一个网页到另一个网页的链接，可以跳转到本地网站上的其他网页或世界上的其他网页。您可以为文本或图像贴超连结标签，当鼠标指针指向超连结对象时，它将变为小

6、手形状，单击鼠标左键将链接到该地址(URL)的网页。超链接包含入站和出站链接。网站中的链接：如果网站计划了多个专题部分，则必须在网站的第一页添加超链接，以便访问者可以快速转到他们感兴趣的页面。每个子页也必须具有超链接，并具有返回主页的链接。域外链接：在个人网站上放置与网站主题相关的对外链接，不仅可以向访问者介绍好的网站，还可以让访问者很乐意再次访问。(友情链接)，表单是控制网页中网页布局的有效方法。为了达到所需的视觉效果，通常不显示表格的边框。使用表格辅助布局，网页可以横向，获得明显的风格。表单是收集信息或实现交互式效果的常用特殊网页元素。表单的主要功能是接收浏览器输入的信息，然后将该信息发送

7、到服务器端。6 .动态和静态web页之间的区别。在网页设计中，纯htmL格式的网页称为“静态网页”，在客户端上运行。HTM，html，shtml，使用扩展名，如XML。静态web页的内容只是标准HTML代码，静态web页还可以具有各种动态效果，如GIF格式的动画、flash动画等。这些“动态效果”只是视觉上的，与下面介绍的动态网页不同。使用动态web技术在服务器端运行的web页和程序属于动态web页，并根据编写的节目访问数据库动态生成页面。动态web文件的后缀通常为.ASP，aspx，PHP，JSP。动态网页的优点是效率、更新速度、可移植性好，根据以前开发的节目页面根据用户的请求返回相应的数据

8、，从而最大限度地提高资源利用率并节省服务器的物理资源。动态和静态web页没有视觉上的区别。例如，网页包含可移动元素(如动画效果)并不意味着它是动态网页，静态网页也可以有动画。请在教科书中亲自读一下各自的特点。7.经常使用的网页设计软件有哪些？FrontPage Dreamweaver、8。web图像和网络动画软件，在Photoshop fireworks(.gif) flash(.swf)，9 .HTML的基本结构，通知HTML文档中的所有内容都必须在两个标记之间。HTML文档始终以开始，以结束。，head文件的头标签，头主要提供有关文档的说明性信息，头部分的所有内容都不会显示在浏览器窗口中。

9、可以放置页面标题和页面类型、使用的字符集、链接的其它脚本或样式档案等。表示文档的正文区域，其中包含要在网页上显示的所有内容。结束标记表示正文区域、使用记事本、编写代码后保存时命名：档案名称。html，选择保存类型：使用所有档案Dreamweaver新建HTML档案演示，11 .标签，标签是html文档中特定的有意义的符号，表示内容的意义或结构。标签总是位于三角形括号中，大多数标签都显示为表示开始和结束的对。标记的内容、标记名称、开始标记、结束标记和标记可以具有属性。指定值时使用“=”。通过在多个属性之间使用空格分隔属性，可以写入开始标记，标记符号和中间不能有空格。例如，无效结束的标签需要添加“/”，用于设置Background属性：HTML页面的背景图片。例如，表示图片tu.jpg设置为HTML页面的背景。text属性：设置HTML网页的文本颜色。使用Text定义的颜色将应用于整个文档。例如，指示文本颜色设置为红色。Link、alink、vlink属性：您可以单独设置常规超连结、当前活动超连结和访问的超连结文本的颜色。例如，topmargin、leftmargin属性设置web正文内容与web页顶部和左侧之间的距离。例如：机器工作：工作完成1.txt，13 .介绍Dreamweaver