2016最新最简便网站建设流程讲义.ppt

网页设计与网站制作 南方医科大学教育技术中心 黄粤锋 huangyf81@163.com 47646 为什么要学习网站建设? 凤凰卫视前主持人，百度副总裁梁冬说：传统媒体是一个人或几个人为几十百千万人提供信息，而网络媒体却是几十百千万人在为你一个人提供信息！所提供的信息量对比明显。正是看到网络媒体的前景，他毅然的从传统媒体翘楚的凤凰卫视，跳槽到了当时还不是太出名的百度公司。 2005年8月5日,百度在美国NASDAQ上市,股票发行价：27美元 ,上市当天升破150美元! 凭借“竞价排名”产品的推出，百度2006年全年净利润比2005年增长533.9%，达到约3.018亿元人民币。 随着互联网在人们生活中的地位日渐重要，尤其是校园、医院信息化的普及，我们不难想象，掌握网络知识，懂得网页设计与网站建设技术的医学复合型人才将在未来的就业竞争中有更广阔的前景！ 一、主要内容 网页设计与网站建设概述 FLASH软件运用基础 网页FLASH动画设计 PHOTOSHOP软件运用基础 第1章 概述 1.1 网站设计流程 1.2 网页设计的基本方式 1.3 网页中的常见元素 1.4 网页元素的创作与编辑工具 1.5 HTML基础知识 1.6 动态网页的支持技术 1.1.1 网站功能与定位 网站的功能可以有很多，包括各类宣传网站、资料库、信息或商务平台等。在设计网站前，要对所要制作的网站的特点进行分析并选择相应的设计思路。 做网站选材也有误区! （一）以宣传为目的的网站，要求设计美观，能够在网站视觉效果上表达创意和使所要宣传的内容一目了然。如各类企业的宣传型网站，就需要表现该企业的企业文化和特色。这种网站特点是页面大量运用图片和动画。 如：Septime企业网站、MAK打印耗材企业 （二）以信息传递为目的的形式 主要强调信息量和信息搜索的方便快捷，主要以文本为表现形式。 如新浪,搜狐等门户网站等. (三)其他功能性网站 强调网站的功能,具有一定的用户针对性和 功能针对性。 如各类商务网站（BtoB，BtoC等）； ; 各类学习网站，网络词典，网络图书馆： 如；/dict/ 底端采用卡通导航，界面色彩，动态的图片，能有效的提高学生兴趣，吸引学生进入学习 　 1.2 网页程序的制作方式 1.2.1 手工编码方式 1.2.2 可视化工具方式 1.2.3 编码和可视化工具结合方式 1.2.1 手工编码方式 网页是由HTML（HYPER TEXT MARKUP LANGUAGE）超文本标记语言编码的文本文档，设计制作网页的过程就是生成HTML代码的过程。在WWW（World Wide Web ）发展的初期人们制作网页是通过直接编写HTML代码来实现的。 　手工编码制作网页效率低，调试复杂，对设计人员的要求高 。因此，对大多数设计人员来说比较困难。但手工编码可以灵活地制作出丰富的网页效果。（浏览器 查看 源文件） 1.2.2 可视化工具方式 　　随着网页制作技术的发展，出现了如FrontPage、Dreamweaver等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，由编辑工具自动生成对应的网页代码。 　　利用可视化工具编辑网页操作简单直观，调试方便，是大众化的网页编辑方式。但利用可视化工具在制作一些特殊网页效果上有一定的局限性。 1.2.3 编码和可视化工具结合方式 编码和可视化工具结合是一种比较成熟的网页制作方式。图为ＤＷ的代码与设计拆分界面。 　　编码和可视化工具结合具体过程为：一般的网页元素通过可视化工具编辑制作，一些特殊的网页效果通过插入代码生成。这种方式效率高、调试方便而且可以实现丰富的网页效果，但要求设计人员既要熟悉Html语言又能运用可视化工具。 　　除了上面三种基本网页设计制作方式外，我们还可以通过修改已有网页代码生成自己的网页。 1.3 网页中的常见元素 　　 网页中的常见元素主要包括以下几种类型：文本、图象、动画、视频音乐、超链接、表格、表单和各类控件等。 　　 一、文本：文字能准确地表达信息的内容和含义，且同样信息量的文本字节往往比图象小，比较适合大信息量的网站。 二、图像：在网页中使用GIF, JPEG(JPG), PNG三种图象格式，其中使用最广泛的是GIF和JPEG两种格式。 说明：当用户使用所见即所得的网页设计软件在网页上添加其他非GIF, JPEG, 或PNG格式的图片并保存时，这些软