网页设计与制作教学课件.ppt

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

1、信信工工学学院院网网络络中中心心 曹曹小小平平TEL:61174098QQ:14325315Email:地址:行政楼三楼科技情报室作品http:/（校园网站）http:/10.10.1.8（宽带网站）网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College导言作为一名信息技术课教师，老师认为信息技术课的目的在于培养学生使用计算机获取、加工和处理信息的能力，而这些都和我们的实际工作和学习密切相关，所以老师将在教学中采用“问题引导、任务驱动”的教学方法，望同学们积极配合，学习更多的专业知识。网页设计与信息发布网页设计与信息发布 教学设计 Inf

2、ormation Engineering College课堂及上机要求 同学们对老师所提出的问题要积极进行思考，并在老师的引导下把自己的想法说出来，共同探讨。同学们对老师所板书的实例或补充内容应完整记录下来，以作为上机实习或课后复习的参考资料。同学们课前课后应自觉学习教材，以此锻炼一定的自学能力并有助于知识的巩固。对老师布置的上机作业一定要当堂完成，不能拖拖拉拉。不知道的知识先自行查阅、再问同学或老师。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College一、信息发布的表现形式有哪些？文字：学院招生简章里的学院简介声音：校园广播里的通知图

3、形图像：学院招生简章中的校园风景画表格：学院招生简章中的专业介绍动画：元旦晚会上投影幕上显示的跳动的主题视频：元旦晚会上播放的学院专题片网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College二、传统的信息发布方式有哪些？张贴广告：受众范围窄发送传单：受众范围窄报刊杂志：受众范围较窄、费用较高广播电视：费用高网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College三、企业为什么要建立网站?企业上网商机无限电子商务网上超市网上购物网上广告上网能给企业带来什么？企业怎样才能上网？上网之后企业

4、又应该怎么做?网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College三、企业为什么要建立网站?1.充分利用网络资源我国的网民有5910万，位居世界第二网民机构政府企业网络网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College三、企业为什么要建立网站?2.开展电子商务电子商务，可以理解为以Internet为依托，借助一定的信用支付手段，在网络上进行产品的购销、费用支付及其他商务活动等 企业建立网站，从销售的观点看，可以减少交易的中间环节，降低成本 网页设计与信息发布网页设计与信息发布

5、教学设计 Information Engineering College三、企业为什么要建立网站?3.与客户互动来往 企业建立网站，将信息咨询站开设到网上，专人值守，提供信息服务。可与外部建立实时的、专题的或个别的信息交流渠道。一些企业在网站上公开电子邮件地址，使客户能够通过电子邮件向企业发表意见。一些企业的网站以BBs或公告板的形式联系客户，客户可以发表意见，同时也能够看到其他客户的信息和从前的信息。可以使客户全面和客观地了解企业和企业的服务及产品。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College三、企业为什么要建立网站?4.建立

6、企业形象 让别人看到自己，展示企业的实力。企业就能够在国内和世界亮相，无疑是一种宣传企业、产品和服务的机会。从广告意义上看，企业网站事关企业形象建设，没有网站也谈不上企业形象。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College三、企业为什么要建立网站?5.做网上广告 企业可以利用自己或别人的网页在网上打广告。网上广告通常以一个醒目的图形贴在ISP的网页上，通过该图形可以链接更多的和更具体的广告信息，其信息量可以很大。企业网站本身就是广告，一些企业在网上建立自己的网页，或者开设自己的网站，把企业信息集中起来，分类分栏，方便浏览。网页设计

7、与信息发布网页设计与信息发布 教学设计 Information Engineering College四、一日学会做主页网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College四、一日学会做主页网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College五、建议学习方式 入门阶段：此时的你，什么都不懂先从最简单的 HTML 网页入手；选择 Dreamweaver 作为你的网页制作工具；选择 Photoshop 作为你的网页制作工具；粗略地阅读Dreamweaver 及 Photoshop 教

8、程，了解这两个软件到底能做些什么；制作你的第一个实验性的网站，遇到任何困难，请对照相关教程，如果问题仍然没有解决，请学会与其它同学交流或询问老师，或将问题贴于网站论坛，让更多高手为你解答；网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College五、建议学习方式 初级阶段：此时的你，已经掌握了Dreamweaver 和 Photoshop 的基本操作 策划和制作你的第一个网站；不断为你的网站增加内容与功能（例如尝试将一些 Java Script 小程序添加到你的网页中）；粗略阅读本站 HTML 及 CSS 的语法书，并尝试运用到你做的网页中。

9、网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College五、建议学习方式 进阶阶段：此时的你，已经具有一定的网页制作经验，并逐步形成了自己一套的对于网页制作的理解，制作一般的网页已经不在话下 根据个人喜好及实际需要，网页制作的方向，你可以向美术设计的方向发展，学习一些美术方面的知识；也可以向网络编程的方向发展，学习ASP等编程语言；也可以向信息制作的方向发展，锻炼自己在网站策划及信息采辑的技能；常识制作其他不同类型的网站，从模仿别人开始，都逐渐形成自己的设计风格；熟练操作 Dreamweaver 及 Photoshop 两个软件，并至少能读

10、懂 HTML 及 JavaScript。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College六、网页制作基础知识Internet是什么？Internet意为国际互联网，也称环球网或因特网。它是将横跨全球的各种不同类型的计算机网络连接起来的全球性的网际网络。通过Internet，我们可以最快捷、全面地了解全球的最新信息，用网上宝贵的信息来丰富生活、提高工作效率。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College六、网页制作基础知识Internet上常用的功能有哪些？电子邮件（E-

11、mail）利用它，互联网的用户可以向互联网上的任何用户发送和接收任何数据类型的信息。如，收发含有图片、声音或其它程序产生的文件，发送贺卡，订阅电子新闻杂志等。万维网（World Wide Web）在WWW站点上，用户可以建立具有自己特色的主页来吸引更多的访问者，展现个人或公司的强大优势；用户还可以在WWW上得到想要的各种各样的知识、商业信息、文件档案以及各种相关资料；另外也可以用来娱乐，如玩游戏、听音乐、看电影等。匿名文件传输（Anonymous FTP）匿名文件传输FTP服务允许用户从一台计算机向另一台计算机复制文件。匿名FTP是专门将某些文件及软件提供给用户使用的开放的文件复制系统。网页设

12、计与信息发布网页设计与信息发布 教学设计 Information Engineering College六、网页制作基础知识常见术语解析 IP地址 尽管互联网上连接了无数的服务器和电脑，但它们并不是处于无序状态。每一个主机都有惟一的地址，为作该主机在互联网上的惟一标志，通常称之为IP地址。如10.10.1.8是信工宽带网所在主机的IP地址。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College六、网页制作基础知识常见术语解析 域名为了摆脱数字的单调和难记的缺点，就用域名来代表该主机。而把形象的文字域名翻译成对应的数字IP地址，则是通过DN

13、S域名服务器系统来完成的。如学院的网址：http:/。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College六、网页制作基础知识常见术语解析 网站、网页与浏览器 一个Web网站往往由多个文件组成，如网页文件、文本文件、声音文件、影像文件、程序文件等，而Web网站中第一个让人阅读的文件通常称之为homepage（首页），而将该网站中所有供人阅读的Web文件称之为网页。常见Web服务器中设置的缺省首页有index.htm，default.htm等。浏览器就是指用来显示指定Web文件的程序。网页设计与信息发布网页设计与信息发布 教学设计 Inf

14、ormation Engineering College网页是如何显示在浏览器上的呢？标准的网址：域名+目录+文件名称 如：http:/ 教学设计 Information Engineering College网页是如何显示在浏览器上的呢？只有“域名+目录”的网址 如：http:/ 教学设计 Information Engineering College网页是如何显示在浏览器上的呢？只有“域名”的网址 如：http:/ 其实这个网址等于http:/ 教学设计 Information Engineering College网页是如何显示在浏览器上的呢？含有程序的网址 如：http:/ 教学设计

15、Information Engineering College网页是如何显示在浏览器上的呢？程序带有参数的网址 如http:/ 教学设计 Information Engineering College六、网页制作基础知识常见术语解析 超链接、超文本文件超链接是WWW上使用最多的一种技术，通过事先定义好的关键字或图形，只要用鼠标单击该段文字或图形，就可以自动连接相对应的其它文件，通过这种方式可以实现不同网页间的跳转问题。超文本文件就是指具有超链接功能的文件。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College六、网页制作基础知识常见术语解

16、析 HTTP、FTP协议HTTP协议是专门定义WWW访问标准的协议，WWW浏览器与WWW服务器间通过HTTP协议定义的规范进行通信。HTTP往往打开的是一个页面，而FTP协议定义的是FTP访问标准的协议，打开的往往是一个远程服务器开放的文件目录。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College七、网页的制作步骤 总体规划 选题确定下来以后，不要忙着开始做，首先要规划一下整个网站的框架结构，就像写文章时要先有提纲一样。特别是内容丰富的站点，更需如此，这将会给以后的维护工作带来极大的方便。更为重要的是，评价一个网站的优劣主要是看这个网站

17、是否布置的井井有条，思路清晰，一个内容混乱的网站只会让你在里面转的晕头转向。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College七、网页的制作步骤 收集资料 资料从何而来？全部自己写是不太可能的，主要的途径还是从网上，或是其它地方找，内容不要太过杂乱，最好是同一主题的，容量不要太大，除非你上网真的不要钱！另外最最需要注意的一点是：版权！有些作者会在原文中写明“引用时请注明出处！”，或是“可以任意发布，但请保持原文的完整性！”，这样的比较好办，如果是“版权所有，禁止抄袭”，那只好另找资料了。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College七、网页的制作步骤 准备工具 有一个好的网页制作工具，将会使你的工作事半功倍。站长平时常用的是“Dreamweaver”+“记事本”，Dreamweaver是Macromedia公司的产品，功能极为强大，操作方便。记事本则是用来直接编写HTML代码的。网页设计与信息发布网页设计与信息发布 教学设计 Information Engineering College八、设计班级网站主页班级新闻班级介绍班级相册班级通讯录网站标志网站简介版权信息网站导航这是网站结构图这是网站主页