高中信息技术_网页的设计与制作教学ppt课件设计.ppt

《高中信息技术_网页的设计与制作教学ppt课件设计.ppt》由会员分享，可在线阅读，更多相关《高中信息技术_网页的设计与制作教学ppt课件设计.ppt（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作马云，杭州师范学院雷军，武汉大学计算机系马化腾，深圳大学计算机及应用李彦宏，北京大学信息管理刘强东，中国人民大学社会学系同学们，这些互联网大佬你们都认识么？同学们，这些互联网大佬你们都认识么？李兴平，男，1979年出生于广东兴宁县，父母均为当地农民，初中毕业后即返家谋生。1999年，网络在中国逐渐普及，兴宁市也开始有了网吧。这时，开始迷上了上网的李兴平在当地网吧找了一份网吧管理员的工作。网吧管理员的身份让李兴平天天泡在网上，泡在那些打游戏、聊天、上网的网民中。他发现来网吧的很多人都不知道如何上网，上网后又不知道去哪里找到所需要的内容。当时的上网费很贵，时间与金钱却往往在茫然不知所

2、措中奢侈地流失。爱琢磨的他开始有意识地去做网站地址搜集分类工作，并通过自学设计制作了一个简陋的个人网页。这便是Hao123的雏形，他把当时中国排名前5000位的站点进行分门别类，按用途组合在一起，随着流量增大，网站的固定广告业随之而来。2004年百度李彦宏花了1190万元现金+400万股百度股票，买下了这个只有一个人的网站。网页和网站的概念1、什么是网页？v浏览Web时所看到的文件称为Web页，又称为网页。网页可以将不同类型的多媒体信息（包括文字、图像、动画、声音、视频等）组合在一个文档中。由于这些文档是用超文本标记语言表示的，其文件名一般是以.html或.htm结尾，因此又称为HTML文档或

3、超文本。v网站由若干网页组合而成。实质上就是一个文件夹，用来存放站点相关信息资源的文件夹。（详见课本111页）2、什么是网站？当我们浏览网站时看到的第一个页面。它是整个站点的入口和门面，通常这样命名：index.html。v表格是网页中的一种用于控制网页页面布局的有效方法。为了达到理想的视觉效果，通常不显示表格的边框。使用表格辅助布局，可以实现网页横竖分明的风格。v表单是一种特殊的网页元素，通常用于收集信息或实现一些交互式的效果。表单的主要功能是接收浏览者在浏览器的输入信息，然后将这些信息发送到服务器端。文本是人类最重要的信息载体和交流工具，网页的主体一般以文本为主。制作网页时，可以根据需要设

4、置文本的字体、字号、颜色、样式等属性，风格独特的网页文本设置会给浏览者赏心悦目的感觉。图像在网页中可以起到提供信息、展示作品、美化网页以及体现风格等功效。图像可以用作网页的标题、网站Logo、网页背景、链接按钮、导航栏、网页主图等。网页上的图像文件大部分都是使用JPG和GIF格式，因为，它们除了具有压缩比例高外，还具有跨平台特性。超链接是网页中最为有用的功能之一。超链接是从一个网页指向另一个网页的链接，该链接既可以指向本地网站的另一个网页，也可以指向世界各地的其他网页。网页构成的基本元素？动画、视频是网页上最活跃的元素，通常制作优秀、创意出众的动画、视频是吸引浏览者的最有效的方法。在网站设计中

5、，纯粹HTML格式的网页通常称为“静态网页”，它运行于客户端，以.htm、.html、.shtml和.xml等为扩展名。静态网页的内容仅仅是标准的HTML代码，静态网页上也可以出现各种动态效果，如GIF格式的动画、Flash动画等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。采用了动态网页技术，在服务器端运行的网页和程序属于动态网页，它们会根据编写的程序访问数据库动态地生成页面。动态网页文件的后缀一般都是.asp、.aspx、.php、.jsp。动态网页的优点是效率高、更新快、移植性强，可以根据先前所制定好的程序页面，根据用户的不同请求返回其相应的数据，从而达到资源的最

6、大利用和节省服务器上的物理资源。动态网页和静态网页不是从视觉上区分的，比如动画效果，网页中包含可以动的元素并不意味着就是动态网页，静态网页也可以有动画。这些制作精美的网站、网页是怎么制作的呢？1、使用超文本标记语言HTML编写（在网页上点击鼠标右键，选择“查看源文件”，就能很清楚地看到网页的代码结构。用户可以使用记事本对网页中的文字、图片、表格、多媒体等页面内容进行编辑，并通过标记语言HTML对这些元素进行描述和控制，最后由浏览器对这些标记进行解释并生成最终呈现在用户眼前丰富多彩的网页。）这些制作精美的网站、网页是怎么制作的呢？2、使用专业的网页设计软件进行网页制作FrontPage 是一个功

7、能强大，简单易用的网页制作工具。提供超链接和交互表单，还具有站点管理，发布等功能Dreamweaver 是一个专业的网页设计软件，功能齐全，兼容性强，主要用于动态网页和静态网页的开发，能为各种素材提供方便的集成方式，提供超链接和交互表单，与Fireworks，Flash合称网页三剑客。（Fireworks主要是用于对网页上常用的jpg、gif的制作和处理，也可用于制作网页布局；Flash主要用来制作动画，现推出Flash平台，可预见有极好的前景）它们的共同点：都是“所见即所得”的可视化网站开发工具frontpage界面word界面接下来，我们通过实例一起来学习静态网页如何添加各种元素和一些相关

8、设置操作四、超链接的添加操作二、网页元素的添加，例如图片、视频、水平线等 参考课本 112页实践操作三、网页的布局（常用的两种布局方式 表格和层）参考课本113页（3）操作一、网页属性设置，例如网页背景、音乐、标题等 参考课本115页（4）常用操作常用操作学生操作三叶草环境下模拟网页的相关修改考试2018-1用FrontPage打开网页文件c:ATA_MSOtesting112125-5468FRONTPGT1_B03whyc.htm，并进行以下操作：（8分）（1）在最外层表格的第一行第二列单元格中插入图片tbg.jpg(图片位置c:ATA_MSOtesting112125-5468FRONT

9、PGT1_B03tbg.jpg)。（2）设置图像大小宽度为881像素，高度为300像素。（3）为文字故宫添加指向的超链接。（4）以文件名index.htm将网页保存在原文件夹中。2018-4用Frontpage打开网页文件c:ATA_MSOtesting112510-2143FRONTPGT1_B03shfz.htm，并进行以下操作：（8分）（1）图片background.gif设置为网页背景。（图片位置c:ATA_MSOtesting112510-2143FRONTPGT1_B03background.gif）（2）为导航栏中的文字文学添加指向网页的超链接。（网页位置c:ATA_MSOtesting112510-2143FRONTPGT1_B03wenxue.htm）（3）在最外层表格的第四行插入水平线，高度为1像素。（4）把此文件保存为index.htm，保存位置c:ATA_MSOtesting112510-2143FRONTPGT1_B03文件夹下。课后实践与探究1、课后为自己的班级制作一个宣传网页。2、当前网页制作还有哪些新技术、新应用，优势在哪？3、面对各种新媒体的冲击，传统网站的出路在哪？Thought is already is late,exactly is the earliest time.觉得为时已晚的时候，恰恰是最早的时候。愿同学们趁青春年少，不负芳华