网页设计与信息发布

1. 网页设计与信息发布

2. 导言 • 作为一名信息技术课教师，老师认为信息技术课的目的在于培养学生使用计算机获取、加工和处理信息的能力，而这些都和我们的实际工作和学习密切相关，所以老师将在教学中采用 “问题引导、任务驱动”的教学方法，望同学们积极配合，学习更多的专业知识。

3. 课堂及上机要求 • 同学们对老师所提出的问题要积极进行思考，并在老师的引导下把自己的想法说出来，共同探讨。 • 同学们对老师所板书的实例或补充内容应完整记录下来，以作为上机实习或课后复习的参考资料。 • 同学们课前课后应自觉学习教材，以此锻炼一定的自学能力并有助于知识的巩固。 • 对老师布置的上机作业一定要当堂完成，不能拖拖拉拉。 • 不知道的知识先自行查阅、再问同学或老师。

4. 一、信息发布的表现形式有哪些？ • 文字：学院招生简章里的学院简介 • 声音：校园广播里的通知 • 图形图像：学院招生简章中的校园风景画 • 表格：学院招生简章中的专业介绍 • 动画：元旦晚会上投影幕上显示的跳动的主题 • 视频：元旦晚会上播放的学院专题片

5. 二、传统的信息发布方式有哪些？ • 张贴广告：受众范围窄 • 发送传单：受众范围窄 • 报刊杂志：受众范围较窄、费用较高 • 广播电视：费用高

6. 三、企业为什么要建立网站? 企 业 上 网 商 机 无 限 电子商务 网上广告 网上购物 网上超市 上网能给企业带来什么？ 上网之后企业又应该怎么做? 企业怎样才能上网？

7. 三、企业为什么要建立网站? • 充分利用网络资源 我国的网民有5910万，位居世界第二

8. 三、企业为什么要建立网站? • 开展电子商务 • 电子商务，可以理解为以Internet为依托，借助一定的信用支付手段，在网络上进行产品的购销、费用支付及其他商务活动等 企业建立网站，从销售的观点看，可以减少交易的中间环节，降低成本

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

10. 三、企业为什么要建立网站? • 建立企业形象 让别人看到自己，展示企业的实力。企业就能够在国内和世界"亮相"，无疑是一种宣传企业、产品和服务的机会。从广告意义上看，企业网站事关企业形象建设，没有网站也谈不上企业形象。

11. 三、企业为什么要建立网站? • 做网上广告 企业可以利用自己或别人的网页在网上打广告。网上广告通常以一个醒目的图形贴在ISP的网页上，通过该图形可以链接更多的和更具体的广告信息，其信息量可以很大。企业网站本身就是广告，一些企业在网上建立自己的网页，或者开设自己的网站，把企业信息集中起来，分类分栏，方便浏览。

12. 四、一日学会做主页 要学主页，分三步走就行了，请看下图第二行

13. 四、一日学会做主页 下面是一个主页范例

14. 五、建议学习方式 • 入门阶段：此时的你，什么都不懂 • 先从最简单的 HTML 网页入手； • 选择 Dreamweaver 作为你的网页制作工具； • 选择 Photoshop 作为你的网页制作工具； • 粗略地阅读Dreamweaver 及 Photoshop 教程，了解这两个软件到底能做些什么； • 制作你的第一个实验性的网站，遇到任何困难，请对照相关教程，如果问题仍然没有解决，请学会与其它同学交流或询问老师，或将问题贴于网站论坛，让更多高手为你解答；

15. 五、建议学习方式 • 初级阶段：此时的你，已经掌握了Dreamweaver 和 Photoshop 的基本操作 • 策划和制作你的第一个网站； • 不断为你的网站增加内容与功能（例如尝试将一些 Java Script 小程序添加到你的网页中）； • 粗略阅读本站 HTML 及 CSS 的语法书，并尝试运用到你做的网页中。

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

17. 六、网页制作基础知识 • Internet是什么？ • Internet意为国际互联网，也称环球网或因特网。它是将横跨全球的各种不同类型的计算机网络连接起来的全球性的网际网络。通过Internet，我们可以最快捷、全面地了解全球的最新信息，用网上宝贵的信息来丰富生活、提高工作效率。

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

19. 六、网页制作基础知识 • 常见术语解析 • IP地址 • 尽管互联网上连接了无数的服务器和电脑，但它们并不是处于无序状态。每一个主机都有惟一的地址，为作该主机在互联网上的惟一标志，通常称之为IP地址。如10.10.1.8是信工宽带网所在主机的IP地址。

20. 六、网页制作基础知识 • 常见术语解析 • 域名 • 为了摆脱数字的单调和难记的缺点，就用域名来代表该主机。而把形象的文字域名翻译成对应的数字IP地址，则是通过DNS域名服务器系统来完成的。如学院的网址：http://www.suiec.com.cn。

21. 六、网页制作基础知识 • 常见术语解析 • 网站、网页与浏览器 • 一个Web网站往往由多个文件组成，如网页文件、文本文件、声音文件、影像文件、程序文件等，而Web网站中第一个让人阅读的文件通常称之为homepage（首页），而将该网站中所有供人阅读的Web文件称之为网页。常见Web服务器中设置的缺省首页有index.htm，default.htm等。 • 浏览器就是指用来显示指定Web文件的程序。 网页是如何显示在浏览器上的呢？

22. 网页是如何显示在浏览器上的呢？ • 标准的网址：域名+目录+文件名称 如：http://www.suiec.com.cn/xyl/index.htm 　　从这个网址输入到浏览器的地址栏，到网页显示在浏览器上面，其过程如下： 1、浏览器首先会与www.suiec.com.cn地址的服务器进行连接。 2、如果连接成功，接着便向服务器要求下载根目录的index.htm文件。 3、如果文件下载成功，便开始解读index.htm文件，然后将它显示在浏览器窗口上。 4、在解读index.htm文件的过程中，浏览器会检查index.htm的网页是否含有图片的标记，如果有，再根据图片标记下载图片文件，然后将它们一起显示在浏览器窗口上。 　　以上的网址是最标准的网址书写方法，也由于是标准的网址，使得浏览器与Web服务器之间只有文件传输的关系。

23. 网页是如何显示在浏览器上的呢？ • 只有“域名+目录”的网址 如：http://www.suiec.com.cn/soft http://www.suiec.com.cn/xyl 　　以上网址没有文件名称，只有域名及目录名称，首先请在浏览器上输入第一个网址，结果服务器会传回soft目录下的文件列表，这一点与FTP很类似，但第二个网址就不一样了，结果会传回网页。 　　第二个网址之所以会传回网页而不是目录的文件列表，是因为我在xyl目录里放了一个名称为index.htm的文件，而这个文件名称会被服务器视为目录的“默认文件”，因此当浏览器向服务器索示xyl目录时，服务器便回以index.htm文件，所以会显示出网页文件，返之soft因为没有放置index.htm，所以会列出该目录的文件列表。 　　当浏览器试图浏览目录时，Web服务器会送回默认文件或目录的文件列表，其实这与Web服务器如何设置目录的属性有关。

24. 网页是如何显示在浏览器上的呢？ • 只有“域名”的网址 如：http://www.suiec.com.cn 其实这个网址等于http://www.suiec.com.cn/，它所代表的意义是域名“www.suiec.com.cn”+目录“/”，而我在www.sueic.com.cn的根目录中也放置了index.htm，所以输入这个网址后，所传回的也是网页文件。

25. 网页是如何显示在浏览器上的呢？ • 含有程序的网址 如：http://www.suiec.com.cn/xyl/index.asp 　　这个网址的结尾并不是以.htm为扩展名的文件，而是一个以.asp为扩展名的文件，输入这个网址后，将启动服务器的index.asp程序，然后显示校友录首页。

26. 网页是如何显示在浏览器上的呢？ • 程序带有参数的网址 如http://www.suiec.com.cn/index.asp?page=2 　　这个网址也一样含有ASP程序，所以会启动服务器的index.asp，但比较有意思的是这个网址还附带了参加（page=2），而index.asp会读取这两个参数，然后在网页上显示第二页。

27. 六、网页制作基础知识 • 常见术语解析 • 超链接、超文本文件 • 超链接是WWW上使用最多的一种技术，通过事先定义好的关键字或图形，只要用鼠标单击该段文字或图形，就可以自动连接相对应的其它文件，通过这种方式可以实现不同网页间的跳转问题。 • 超文本文件就是指具有超链接功能的文件。

28. 六、网页制作基础知识 • 常见术语解析 • HTTP、FTP协议 • HTTP协议是专门定义WWW访问标准的协议，WWW浏览器与WWW服务器间通过HTTP协议定义的规范进行通信。HTTP往往打开的是一个页面，而FTP协议定义的是FTP访问标准的协议，打开的往往是一个远程服务器开放的文件目录 。

29. 七、网页的制作步骤 • 总体规划 选题确定下来以后，不要忙着开始做，首先要规划一下整个网站的框架结构，就像写文章时要先有提纲一样。特别是内容丰富的站点，更需如此，这将会给以后的维护工作带来极大的方便。更为重要的是，评价一个网站的优劣主要是看这个网站是否布置的井井有条，思路清晰，一个内容混乱的网站只会让你在里面转的晕头转向。

30. 七、网页的制作步骤 • 收集资料 资料从何而来？全部自己写是不太可能的，主要的途径还是从网上，或是其它地方找，内容不要太过杂乱，最好是同一主题的，容量不要太大，除非你上网真的不要钱！另外最最需要注意的一点是：版权！！ 有些作者会在原文中写明“引用时请注明出处！” ，或是“可以任意发布，但请保持原文的完整性！”，这样的比较好办，如果是“版权所有，禁止抄袭”，那只好另找资料了 。

31. 七、网页的制作步骤 • 准备工具 有一个好的网页制作工具，将会使你的工作事半功倍。站长平时常用的是“Dreamweaver”+“记事本”，Dreamweaver是Macromedia公司的产品，功能极为强大，操作方便。记事本则是用来直接编写HTML代码的 。

32. 主页 班级新闻 班级介绍 班级相册 班级通讯录 八、设计班级网站 这是网站结构图 网站标志 网 站 导 航 这是网站主页 网站简介 版权信息