网页设计与制作-第1讲.ppt

1、HTML语言与网页制作,四川大学计算机学院 主讲教师：马义玲 联系电话：85436578（H）手机） E-mail: ,课程大纲,课程性质与目的 通过本课程的教学，让已学习了计算机基础知识，具有一定计算机操作技能的本科生进一步提高计算机应用能力。使学生通过本课程的教学，更深入了解计算机网络知识和WWW网上丰富多彩的信息是如何制作的，并掌握怎样在Internet上建立自己的网站，将信息发布到Internet上去的技能。,课程基本要求 熟悉计算机网络知识，WWW基本概念，网络浏览器的使用和网页设计基本方法。 能在国际互联网上浏览查询资料。了解计算机网络资源是如何以网页的形

2、式发布在计算机网络上的。 掌握网络语言的用法，能够使用网语HTML制作网页。 能够使用可视化网页设计软件FrontPage、DreamWeaver等设计制作网页。 课程结束后，每个学生应设计制作网页并建立自己的个人网站。,课程大纲,教学内容 www简介与网站建设概论 用HTML语言制作网页 用可视化软件制作网页 网页设计技巧与简单动画制作(自学) 网站的发布与维护,课程大纲,课时、教材与教学方法 总学时为32学时 (行课周数2-13周) 教材：网页设计与制作教程 网页设计与制作实验指导 教学方法：课堂讲授与上机实习相 结合的教学方式,课程大纲,第一篇 第1章 Internet 和 WWW In

3、ternet简介 WWW简介 第2章 网站建设概论 网站概论 网站可视化设计概论 网页制作工具概述,第1章 Internet 和 WWW,教学内容: 什么是Internet (自学) Internet 起源 (自学) Internet在中国 (自学) Internet的功能与应用 (自学) WWW的起源 Web的特点和结构 WWW的基本概念 (网页、网站、超文本 和超链接等）,WWW是“World Wide Web”的简称，也称为万维网或全球信息网。WWW是一种建立在Internet上的信息资源网络。WWW是一种软件，是Internet上支持WWW协议和超文本传输协议的客户机和服务器的集合。

4、WWW将Internet上所有的资源（包括文字、图片、声音、视频等）采用统一的资源定位方式（URL）串连起来,在Internet上形成庞大的信息网。 在客户端，访问者只需用浏览器（browser）便可轻松地访问任何角落的Internet资源。,WWW简介,构成WWW最基本的元素是网页，许许多多的网页链接在一起就组成了一个个WWW站点，而这个站点的首页被称为主页（homepage）。 网页上有文字、图片、音乐、动画、背景、视频、表格、菜单和一些特技效果。 制作网页可以用网络语言HTML，也可以使用网页设计工具FrontPage2003，Dreamweaver MX等。,WWW简介,服务器 网站1

5、,服务器 网站2,浏览器,浏览器,浏览器,浏览器,万维网,WWW简介,Web服务器,浏览器 Netscape,IE浏览器,WWW服务器：称为Web site,是提供 www服务的一台计算机（服务器）， 其中安装了WWW server软件，能够 响应用户浏览器的请求，传送网页。,网络浏览器是阅读WWW上信息资源的一个软件,Netscape IE,统一资源定位器 URL,URL 称为统一资源定位器，是各网页在 Internet 上的地址，也称为网址，它表示 Internet 上各种数据资源的位置。,Http:/,Http:/,Http:/,网页作为独立的一个文件被放在计算机的存储器中。 网页制作者

6、可以将需要公布的信息按照一定的方式分门别类，放在一个个网页上。网页里可以有文字、表格、图象、声音 、和视频等。 一张网页是一个单独的文件,文件的扩展名是 .HTML或.HTM。,网页与网页文件,网站中包含一个放在网络服务器上的完整信息集合，它包含一个或多个网页，这些网页以一定的方式链接在一起。,例：网易制作的所有网页都被放在 网址http/下。,网站的组成,主页（Home Page)也称首页，是一个单独的网页，它是整个网站的启始点和汇总点，是用户开始浏览一个网站的地方。在主页上，应该给出网站的概述、它所包含的内容、浏览各种信息的通道等。主页又是一 个地址（URL），从这里用户走进你的网站。,主

7、页,WWW属于“网”状结构，这种结构有一个中心，称为主页，这张主页上又伸出若干个链与其它的网页链接在一起。这就是WWW的核心技术超文本技术。,绿扬小屋,心灵独白,艰难历程,艺术世界,学子生涯,文学天地,超文本文件中包含有许多指向其它文件和资源的指针，这些指针可以是文字、图象、声音或影像，这些称为“超链接”,网页的超文本和超媒体,第2章 网站建设概论,教学内容: 网站的种类 网站的组织结构 建立网站的步骤 网页版面布局的设计 收集素材 网站制作工具 网站的测试与上传,网站的种类,按网站的性质划分,按网站的内容划分,政府网站 个人网站 企业网站 教育科研网站 军事网站 其他类型网站,新闻与媒体类

8、教育与科技类 财经与商业类 文化与体育类 政府与政治类 健康与医学类 综合类,网站种类,网站设计的目标、主题、创意、风格,网站面向的对象（提高点击率） 根据对象所需的信息确定网站的主题 有突出的主题风格和鲜明的个性 创意体现在网站的版面布局 、信息量、动静效果 、色彩搭配与页面图文编排 、整体链接效果等。 使用自己创作的多媒体特效,个人主页 / 欢迎页面,情况简介,经历 / 业绩,兴趣爱好,成长经历,学历与学位,主要业绩,个人主页 / 欢迎页面,情况简介,经历 / 业绩,兴趣爱好,成长经历,学历与学位,主要业绩,网页设计,建立本地网站,特别提示：在硬盘上建立一个目录，将所有的网页和 相关文件都

9、放在里面，以便进行网页的制 作和管理。 站点策划：确定站点主题和结构。准备素材（文字 材料、图片、声音、视频等） 选择网页制作工具：HTML语言、可视化网页制 作软件等。 制作网页：在网页上放入文字、图片、声音、视频、 动画及特效等。,本地网站示例,网站的组成 网站中的文件（网页文件与素材文件） 网页源文件 在浏览器中的网页文件 网页之间的链接 网站点评,页面整体设计原则,框架结构 色彩搭配 页面布局与内容编排,页面细节分析,文字处理 图片处理 动画应用 背景选择 小图标的点缀 动态技术的应用 下拉式菜单的应用 表格应用 声音与视频的应用 网页特效,网页的HTML源码分析,收集制作网页需要的基本素材,网页上除了必须的文字以外，要想使你的网页有声有色，就需要在网页里插入声音、动态或静态图象、线条、背景、背景音乐或视频等。,静态图片,动态图片,声音文件,线条,视频文件,按纽图片,背景图片,中英文字,选择网页制作的软件,使用HTML语言,记事本,浏览器,使用可视化网页设计工具,HTML语言的基本概念和基本结构,HTML的全称是hypertext makeup language,中文意思