1 / 35

网页设计与制作案例教程

网页设计与制作案例教程. 主编 房爱莲 北京大学出版社. 授课人 : 唐芳仙 2012 年 9 月. 参考书目. 网页设计与制作 ( 第 2 版 ) 梁芳 清华大学出版社 2011-7 网页设计与制作实践教程 梁芳 清华大学出版社 2009-1 ASP.Net 网络应用安全教程 张登辉 北京大学出版社. 成绩评定. 学院最新规定并要求严格执行 设计网站作品 60% 平时成绩占 40% 出勤点 10%

sian
Download Presentation

网页设计与制作案例教程

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页设计与制作案例教程 主编 房爱莲 北京大学出版社 授课人:唐芳仙 2012年9月

  2. 参考书目 • 网页设计与制作(第2版) • 梁芳 清华大学出版社 2011-7 • 网页设计与制作实践教程 • 梁芳 清华大学出版社 2009-1 • ASP.Net网络应用安全教程 • 张登辉 北京大学出版社

  3. 成绩评定 • 学院最新规定并要求严格执行 • 设计网站作品 60% • 平时成绩占40% • 出勤点10% • 旷课扣考勤成绩的50%/次;迟到十五分钟以上者按旷课论;迟到或早退扣考勤20%/次；事假扣30%/次，累计扣满为止；公假和病假不扣分。 • 平时考核占30% • 实验与作业完成状况、期中考核、学习态度等

  4. 师生联系方式 • E-mail: tfx1203@shnu.edu.cn tfx1203@sina.com

  5. 本章学习目标 (1) 知道主要的网站类型； (2) 了解与网页的设计与制作相关的几个概念； (3) 掌握网站的开发流程； (4) 了解网页的制作工具。

  6. 网站的主要类型 1.1 网站的类型 1.2 基本概念 与网站相关的概念 1.3 网站的开发流程 网站开发流程 网页制作工具 1.4 网页的制作工具 本章知识结构

  7. 本章案例 • 体验6个典型网站的特点和功能 • 本章中的案例： 1．搜狐网 2．央视网 3．阿里巴巴 4．首都之窗 5．携程旅行网 6．首都科技网

  8. 1.1网站的类型 • 门户网站 • 媒体信息服务类网站 • 电子商务网站 • 办公事务管理网站 • 商务事务管理网站 • 普及型网站

  9. 1. 门户网站 • 门户类网站的功能 • 通向某类综合性互联网信息资源并提供有关信息服务的应用系统。门户网站最初只提供搜索引擎和目录服务，业务几乎包罗万象。 • 门户类网站的特点 • 门户网站的特点是：界面简洁、内容分类清晰、信息和服务丰富。我国目前最典型的门户网站主要有新浪网、网易和搜狐网等。

  10. 1. 门户网站 • http://www.sohu.com 搜狐网中国最大的门户网站之一。曾拥有超过1亿注册用户，日浏览量高达7亿，是中国网民上网冲浪的首选门户网站，是中文世界最强劲的互联网品牌。

  11. 2. 媒体信息服务类网站 • 媒体信息服务类网站的功能 • 提供媒体信息服务。国内国际重要新闻发布、重大活动现场网上直播、各种信息服务、信息支持和咨询服务等。 • 媒体信息服务类网站的特点 • 具有权威性、准确性、及时性、多样性、评论性和贴近性。

  12. 2. 媒体信息服务类网站 • http://cctv.cntv.cn/ 央视网是以央视强大的资源为依托，集新闻、信息、娱乐、服务于一体，具有视听、互动特色的综合网络媒体。目前，央视网拥有新闻采访、报道和评论的权利，已是CCTV多媒体传播不可分割的一部分，并成为重大新闻和事件网络报道的国家主力军 。

  13. 3. 电子商务网站 • 电子商务网站的功能 • 电子商务(Electronic Commerce)是在Internet开放的网络环境下，基于浏览器/服务器应用方式，实现消费者的网上购物、商户之间的网上交易和在线电子支付的一种新型的商业运营模式。 • 电子商务网站的特点 • 安全性高、稳定性好、处理能力强。一般该类网站的颜色比较鲜明，给人一种热闹有人气的感觉。

  14. 3. 电子商务网站 • http://china.alibaba.com 阿里巴巴是全球领先的B2B电子商务网站。它的国际贸易网站http://www.alibaba. com主要针对全球进出口贸易，它的中文网站http://china.alibaba.com/针对国内贸易买家和卖家。阿里巴巴的中英文网上交易市场曾拥有近3000万名注册用户，遍及240多个国家及地区。

  15. 4. 办公事务管理网站 • 办公事务管理网站的功能 • 主要包括机构职能、通知公告、办事指南、网上调查、在线咨询、领导信箱等内容。办公事务管理网站可以极大地提高工作的透明度和办事效率。近年来，我国电子政务建设步伐不断加快，政府网站层级体系的架构已经基本形成。政府机构日常办公、信息收集与发布、公共管理等事务都可以在数字化、网络化环境下进行。 • 办公事务管理网站的特点 • 以服务性内容为主，页面简洁、重点突出。

  16. 4. 办公事务管理网站 • http://www.beijing.gov.cn 首都之窗是典型的办公事务管理网站。它是为了统一、规范地宣传首都形象，落实“政务公开，加强行政监督”的原则，建立网络信访机制，向市民提供公益性服务信息，促进首都信息化，推动北京市电子政务工程的开展而建立的。其宗旨是：“宣传首都，构架桥梁；信息服务，资源共享；辅助管理，支持决策”。

  17. 5. 商务事务管理网站 • 商务事务管理网站的功能 • 将各类服务信息汇集于互联网平台供用户查阅，同时帮助用户通过互联网获取各种服务项目。 • 商务事务管理网站的特点 • 需要后台数据库的支持。因此，商务事务管理网站一般都是动态网站。

  18. 5. 商务事务管理网站 • http://www.ctrip.com 携程旅行网属于商务事务管理网站。作为中国领先的在线旅行服务公司，携程旅行网成功整合了高科技产业与传统旅行业，向超过2000万会员提供集酒店预订、机票预订、度假预订、商旅管理、特约商户及旅游资讯在内的全方位旅行服务，被誉为互联网和传统旅游无缝结合的典范。

  19. 6. 普及型网站 • http://www.bast.net.cn 首都科技网是典型的普及型网站。它是北京市科协在互联网上的信息网站；是对公众提供科学普及和对科技工作者提供在线服务的平台；以宣传首都、宣传科协，促进科学技术知识的普及和推广、促进科学技术人才的成长和提高为目标。

  20. 6. 普及型网站 • 普及型网站的功能 • 提供各类信息供上网用户免费浏览。 • 普及型网站的特点 • 以内容为重点，设计简洁大方。

  21. 1.2 基 本 概 念 1．超文本标识语言 • 超文本标识语言(Hyper Text Markup Language，HTML)是利用标记来描述网页的字体、大小、颜色及页面布局的语言，是一种专门用于Web页制作的语言。HTML文档可由任何文本编辑器如Windows记事本和写字板，或者专用网页编辑器编辑。文件的扩展名为html 、htm或者shtml等。

  22. 1.2 基 本 概 念 2．网页 • 网页(Web Page)是用HTML语言编写的，通过Internet传输并被Web浏览器翻译成可以显示文本、图片、声音和动画等信息元素的页面文件。网页一般由文字、图片、超链接等组成，另外，声音、视频、动画等多媒体元素可以为网页增添丰富的色彩和动感效果。

  23. 1.2 基 本 概 念 3．网站 • 网站(Web Site)是网页的集合。根据一定的规则，使用HTML等工具制作的用于展示特定内容并能在Internet上的相关浏览。它包含的一个或者多个网页，这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。

  24. 1.2 基 本 概 念 4．主页 • 主页(Home Page)又称首页，就是通过浏览器进入网站的第一页。主页是一个网站最重要的一页，是访问者浏览网页的向导。它要求根据大多数人的阅读习惯，以色彩、线条、图片等要素将导航条、各功能区以及内容区进行分隔。在网站文件中默认将的主页命名为index或者default等。

  25. 1.2 基 本 概 念 5．静态网页 • 在网站设计中，纯粹HTML格式的网页通常被称为“静态网页”，早期的网站一般都是由静态网页制作的。 • 静态网页的主要特点： ①静态网页的后缀一般为.htm、.html或者.shtml等形式； ②静态网页没有后台数据库的支持，网站制作和维护的工作量比较大； ③静态网页的交互性较差，一般只适用于直接显示各种信息。

  26. 1.2 基 本 概 念 6．动态网页 • 与静态网页相对应，采用动态网站技术生成的网页都称为动态网页。 • 动态网页的主要特点： ①动态网页的后缀一般为.asp、.jsp或者.php等形式； ②动态网页有后台数据库的支持，可以大大降低网站维护的工作量； ③动态网页的交互性比较强，可以实现很多交互功能。 例如，可以实现用户注册、用户登录、在线调查、用户管理、订单管理等。

  27. 1.2 基 本 概 念 7．Web标准 • Web标准即网页标准。网页主要由3部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。对应的网页标准也分为3方面：结构化标准语言，主要包括XHTML和XML；表现标准语言，主要包括CSS；行为标准，主要包括对象模型。这些标准大部分由W3C组织起草和发布。 • W3C ——World Wide Web Consortium(万维网联盟)的缩写，它是制定网络标准的一个非赢利组织，它主要负责有关互联网应用各类标准的制定，成员包含Microsoft、HP、IBM、AT$&T、Netscape等。W3C的官方网站网址为 http://www.w3c.org。

  28. 1.3 网站的开发流程 （1）网站的规划与设计 （2）网页素材的准备 （3）网站的建立与网页的制作 （4）网站的测试 （5）网站的发布 （6）网站的维护

  29. 1.4 网页的制作工具 • 网页编辑工具 • Dreamweaver 目前应用最广的网页开发软件，该软件提供了网站建立与网页制作的整套专业标准解决方案，是网站设计人员首选的开发平台。 • FrontPage FrontPage是微软公司开发的Office的组件之一，与Microsoft Office应用程序无缝集成。

  30. 1.4 网页的制作工具 • 网页图像制作工具 • Fireworks Fireworks是一个专门为制作网页图形而设计的软件。在网页图形与特效制作方面，Fireworks综合了众多图形设计工具软件的功能和优点。 • Photoshop Adobe公司的Photoshop是当今最流行的图形图像处理软件之一，它能够实现各种专业化的图像制作、处理及合成。

  31. 1.4 网页的制作工具 • 网页动画制作工具 • Flash Flash是目前非常流行的一种交互式Web矢量动画软件。它可以将ActionScript、音频、视频、图形、动画以及富有新意的界面融合在一起，从而制作高品质的网页动态效果。 • Ulead GIF Animator Ulead GIF Animator 软件是Ulead公司发布的一款简单灵活的GIF动画编辑软件，可以作为网页动画设计辅助工具。

  32. 本章总结 • 介绍了目前主要的网站类型：门户网站、媒体信息服务类网站、电子商务网站、办公事务管理网站、商务事务管理网站和普及型网站； • 简要描述了各种类型网站的特点和功能； • 界定了超文本标识语言(HTML)、网页、网站、主页、静态网页、动态网页、Web标准等概念；。 • 简要介绍了网站的开发流程； • 简要介绍了网页的制作工具。

  33. 思考练习 (1) 目前主要的网站类型有哪些？各有什么特点？ (2) 静态网页和动态网页有何区别？ (3) 简述网站的开发流程。 (4) 除了本章介绍的网页制作工具之外，还有哪些网页制作工具？

  34. 实践项目 (1) 浏览各种网站，根据域名后缀归纳网站的种类。 (2) 查阅“网页制作三剑客”软件Dreamweaver、Fireworks、Flash方面的书籍，了解它们的主要功能。

  35. 相关资源 • hao123网址之家：http://www.hao123.com • 美萍中文精品z网址：http://www.k369.com • 中国网址：http://www.cnww.net

More Related