第一讲-网页设计基础.ppt

《第一讲-网页设计基础.ppt》由会员分享，可在线阅读，更多相关《第一讲-网页设计基础.ppt（35页珍藏版）》请在三一文库上搜索。

1、2019/2/10,PHP+MYSQL动态网页设计,主讲人：张瑞林,联系方式：Email:,2019/2/10,课程内容,动态网页制作需要的技术 掌握一种网络编程语言（asp,,php,jsp等） 掌握一种数据库编程（MSSQL,mysql,oracle等） 客户端JavaScript脚本语言 Html编写技术 Css编写技术 XML技术,2019/2/10,课程目标,快速入门，学会一种网络编程语言 没有编程基础的同学可以设计出专业的网站 有编程基础的同学则可以使网站锦上添花,2019/2/10,课程内容,第一讲 网页制作基础 第二讲 PHP和MYSQL基础 第三讲 PHP应用实例：网络通讯录

2、 第四讲 网站架设,2019/2/10,WWW服务与网页 静态网页与动态网页 网页设计工具 网站的整体规划 网页中的元素 动态网页的支持技术 HTML的基础知识 PHP开发环境的安装,第一讲 网页制作基础,2019/2/10,1.WWW服务与网页,Internet最初的服务都局限于文本的方式。随着多媒体技术的高速发展，人们非常希望在网上也能观看漂亮的图片、欣赏优美的音乐，这时革命性的服务诞生了，这就是WWW服务 WWW的全称是World Wide Web。它是一种以网页(webpage)为基本单位构建的框架结构，其目的是为了把遍布在Internet上数以万计的网页链接起来，形成一个庞大的资源信

3、息网。 WWW将Internet上所有的资源(包括文字、图片、声音、视频等)采用统一的资源定位方式(URL)串连起来，而在客户端，访问者只需用浏览器(browser)便可很轻松地访问任何角落的Internet资源。,2019/2/10,www的成功传播需要三项技术： 1. HTML（HyperText Makerup Language，超文本标记语言）：创建网页的语言 2. HTTP （HyperText Transfer Protocol，超文本传输协议）：网页传输协议 3. 浏览器：接收、解释网页数据并显示其内容,1. WWW服务与网页,2019/2/10,2、静态网页与动态网页,网页与网

4、站 静态网页与动态网页,客户机,服务器,发送请求,传回页面,客户机,服务器,发送请求,传回页面,处理 过程,静态网页：人机交互困难,动态网页：实现浏览者与网页间的互动,动态处理技术：ASP,ASP.NET,JSP,PHP,2019/2/10,网页设计三剑客 Dreamweaver是Maromedia开发的所见即所得的可视化开发工具 Fireworks是由Macromedia公司开发的图形处理工具，是专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。 Flash是Macromedia公司开发的是一种交互式动画设计工具，广泛应用于网页动画制作、教学动画演示、网上购物、在线

5、游戏等的制作 其他工具 记事本 必须熟悉HTML语言代码 Microsofet FrontPage是所见即所得网页编辑器 Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的PC机上最好的通用平面美术设计软件 几乎所有的广告、出版、软件公司Photoshop都是首选的平面制作工具。,3、网页制作工具,2019/2/10,4网站的整体规划,网站规划和设计流程 确定站点主题 组织规划站点结构 创建站点 确定风格并绘制设计图 收集资源并制作相应的图片、动画 制作网页,2019/2/10,4网站的整体规划,确定站点主题 根据以下的介绍希望可以对你的选题有帮助 主要的网站类别 门户类网

6、站 产品类网站 娱乐类网站 游戏类网站 时尚类网站 音乐类网站 杂志类网站 传记类网站 个人类网站,2019/2/10,4网站的整体规划,十大热门题材 网上求职 网上聊天、即时信息、ICQ 网上社区、讨论、邮件列表 计算机技术 网页、网站开发 娱乐网站 旅行 参考、咨询 家庭、教育 生活时尚,2019/2/10,4网站的整体规划,个人主页最受欢迎的题材主要有： 拆解类、软件介绍类 金融类 游戏类 资料收集类 新闻类 娱乐类 业内文章创作类 其他专栏创作文章 文学类 图形设计类,2019/2/10,4网站的整体规划,2.组织规划站点结构 一个Web站点中的资源文件可能是非常的繁多，这就需要合理的

7、规划站点，将各种文件或资源安排在合理的位置，以方便管理。 （1）将文档分类保存在不同的文件夹中 一个复杂的站点，包含的文件类型会有很多。而且各类型的文件内容上也可能会有不一样。因此，为了清晰地对文件进行管理，就要按照一定地规则将不同的文件放置在不同的文件夹中。关于文件的放置，最主要的是网页文档和网页文档中链接的图像文件的安排。有两种方式： （2） 网页HTML文件和该文件链接的图像等对象文件存贮在同一级目录 （3） 对于一张网页或者几个同类别的网页建立一个对应的文件夹， 然后与该网页相关的网页对象文件放置在其中。 推荐后一种文件布局方式 注意：为了方便管理，文件和文件夹的名称最好有具体的含义

8、，让人一看就明白网页描述的内容。,2019/2/10,4网站的整体规划,3.确定风格并绘制设计图 风格 ：站点的整体形象，及浏览者的感受；整体形象包括ci（logo、 色彩、字体等）、布局、 浏览方式、文字风格等 创意：以一种特别的方式传达信息, 网站创意的捷径是思考 让它的颜色突破人们的印象 使它成为年轻的标志 使它立体化 让网站拟人化 举办竞赛、打赌、抽奖等活动 变更常规的一部分 使它有罗曼蒂克的味道 使它看起来非常流行 给它起个朗朗上口的绰号 提供“免费午餐”,VS,2019/2/10,4网站的整体规划,25种方式给网站添加优质内容： 请先记住以下几点： (1).你只是被你自己的想法和你

9、的网站限制住了。尝试着往完全不同的方向探索一下。 (2).你的网站内容应该是写给你的顾客看，不是给你，也不是写给搜索引擎的，它们不是你的目标群体。 (3).把你的网站想象成一幅完整的画，一个有生命的会呼吸的整体。它会持续成长，而不是停滞不前。 (4).面向目标群体的优质内容。,hao123,2019/2/10,25种方式给网站添加优质内容,1，事件日历。对于房地产网站，它可用于展示新开房屋信息；对于在线书店，可用于介绍新书签名会、作者见面会等；对于收藏类网站，可用于介绍最近的聚会活动等确保访客能添加他们自己的事件到日历中去。 2，地图。考虑给房地产网站、捕猎/捕鱼网站、露营网站、酒店或者其他任

10、何户外休闲网站建一个地图。在地图的底部添加内容来描述该地图并说明它的意图。 3，售前/售后经历。如果你的顾客能就你提供的产品或服务写一小段文字，或者探讨你的产品/服务带来的好处，就再好不过了。你可以把它们作为成功的证明放在网站上。 4，来自顾客的图片。你可以为已有顾客设立一个特别的地方，让他们能够在你的网站贴出自己的图片和日志等等。这个方法比较适合度假网站、休闲网站、婚姻网站、宝宝网站、摄影工作室等等。想一想，在Halloween网站该怎么做？花卉网站呢？,2019/2/10,25种方式给网站添加优质内容,5，在线填色画。如果你将一些度假物品做成填色画，孩子们就可以在旅程开始前给它们填完色然后

11、 贴到他们在网上专有的版块。旅程结束后，他们的父母又可以贴上度假的图片和日志。这样，一个属于他们的度假纪念“网站”（其实完全是建立在你的网站上）就 成为了你这个度假网站的招牌。他们会怎么使用这个“网站”呢？他们会告诉朋友、爷爷奶奶、叔叔婶婶等等。他们会在其他地方给这个“网站”做连接。你会赢得优势。如果网站可以作孩子们的文章，你可以想很多增添 填色画的方法，或者类似的针对孩子的创造性活动。 6，blog或论坛当然会给网站增添新内容。 7，令你的目标群体感兴趣的文章或者新页面。有规律的写出新内容你的目标应该是每周1-2篇。 8，在站内主页展示专家问答。请个专家来回答问题，然后每周在主页贴出一问一答

12、（或者每天都贴出，自由控制）。把站上以往的问答做个可搜索的归档。,情侣拼图,2019/2/10,25种方式给网站添加优质内容,9，产品评测。如果你的行业有产品或软件需要评测，可考虑写一些公正的评测文章。将文章发布到自己的网站上。读者永远都会对完整的公正评测感兴趣。 10，小提示。如果你的产品或服务适合用小提示，就写一个系列并把它们发布到你的网站上。作为新闻信来发送。邀请使用你的产品的读者也来写小提示/技巧，如果他们提交过来，就给他们一些购买其他产品的优惠/折扣。 11，常见问题。常见问题（FAQ）是你的目标群体想要了解的内容。当你从读者那里收到提问，就在FAQ里面添加新的问答内容，使它保持更新

13、。 12，使用手册/指引。人们喜欢看使用手册。如果你正在线销售抽水马桶部件，为何不写一份关于“如何在卫生间安 装抽水马桶”的指导手册呢？为你的顾客提供便利，客人就会源源不断。撰写一系列的使用手册。做一个网络上的“厕所超人”。如此 一来你就会被高度关注，你会在互联网以外魅力十足,2019/2/10,25种方式给网站添加优质内容,13，能够解决实际问题的内容。人们为何访问互联网？为了寻找信息或者对比购物。如果你能为你的访客解决这些问 题，就帮他们达到了目的。你的潜在顾客自然能从搜索引擎里找到你的页面。 14，历史数据。假设你是销售钢管的。钢管的历史是怎样的？创建一个页面专门介绍一下它的历史吧。事实

14、上， 你还应该创建关于以下内容的页面：钢管和铜管以及其他种类的金属管的比较；为何会生锈；钢的硬度如何；钢管的实际价值（钢管是如何在近乎每个建筑物中使用 的，等等）；钢的寿命；等等等等，所有这些构成一个版块，将是整个网站非常有价值的组成。 比如圣西蒙岛上的一家旅店，当然应该在它的网站上提供关于这个岛屿的历史和旅游信息等。 一家销售Mustang软管部件的网站该如何运用这个策略？销售婚纱礼服的网站呢？,2019/2/10,25种方式给网站添加优质内容,15，采访。制造内容的最简单手段。采访你所在行业内的一位专家。给他列出问题，让专家用自己的话回答。除了纠正拼写错误或者语法错误，不要删改专家的回答。

15、与专家坦诚相待，并保持采访文章的完整性。写出一系列采访文章，并在你的网站主要页面上高亮表示出来。 16，季节性文章。你的行业是否也有“季节性”？如果有，季节性文章常常会很受欢迎。 17，统计。在你的网站上提供统计数据也是一种增加内容的方式。如果统计数据不是来自你自己，则往往会告诉你信息是从哪里来的。引用这些信息来源！金融或者资产抵押网站如何运用这个策略？ 18，建议专栏。这可以用在约会网站，也可用在其他网站。SEO（搜索引擎优化）网站如何运用此战略？室内装潢网站或者整形手术网站呢？,2019/2/10,25种方式给网站添加优质内容,19，每月冠军。假设你经营一个销售插花的网站。邀请你的顾客发送

16、过来他们用你的花设计的花束的照片等等。把照片公布在网上。每个月选出一个优胜者，并把他的照片放在网站的显要页面。给优胜者颁发礼品等作为获奖证书。 20，用花店的例子，制作一些关于如何插花的视频教程。确保观众照着教程做的时候所有的材料都可以在你的店里买到。 21，还是拿花店举例。邀请顾客提供一些心得，比如他们是如何制作插花的，用到了哪些材料，以及照片等等。把这些信息放到你的网站上。相关的材料就连接到你的在线商店。发挥创意。在你的行业里你该怎么做？如果你有一个戏装网站，该怎么做？艺术品网站呢？动动脑筋，把这个策略用到狩猎或者捕鱼网站。,2019/2/10,25种方式给网站添加优质内容,22，每月送出

17、一封新闻信，附上你想告诉顾客的那些信息。可以是来自顾客的小技巧、销售中的产品、假期计划、每月冠军等等。把过去的新闻信也贴在网站上，增加内容。 23，重要人物的传记。如果与你的行业相关，你就可以这么做。比如你经营一个关于美国内战历史的网站或者一个旧书店，这就非常有用。 24，新闻事件。因你的所在行业而异。 25，与社群相关的页面。如果这是个本地网站，比如，你可以在社群相关的页面或者blog上讨论本地的餐馆、棒球联盟、校园开幕式等等。,2019/2/10,25种方式给网站添加优质内容,结论 创建内容时记住“优质”。 想想下面这些问题。如果你开始创建优质内容，接下来是什么？优质的连接。其他网站会开始

18、连向你的内容，因为你做了你该做的：为你的顾客提供了他们所需。他们需要看到优质的、持续更新的信息。你成了可信赖的信息来源。 不要试图走“捷径”。成功来自辛勤的劳动。,2019/2/10,网站成功与否很关键的几个因素,一、最重要的就是网站内容。 二、更新频率。有人回访，说明他想看些不一样的新东西（个别站除外），这就像吃饭一样，如果每顿吃的东西都一样，我想谁都会烦。 三、网站的结构。结构清晰，浏览者很快就能找到自己想要的，这能给他们一个很好的印象 四、网站风格及颜色搭配。颜色的搭配，各种边条的宽度高度都该经过仔细考量。 五、搜索优化。 六、适当的炒作也是必不可少的。就像娱乐圈里一样，越炒越红，混个脸

19、熟，有点什么事以后大家就想着你了。,2019/2/10,5、网页中的元素,基本元素 文本、图像和动画、声音和视频、超链接、表格、表单、导航栏 和其他特殊效果 其他设计元素 首页设计、版面布局、网页色彩搭配,2019/2/10,6 动态网页的支持技术,目前，最常用的三种动态网页语言有ASP，ASP.NET,JSP,PHP ASP 全名Active Server Pages，是一个WEB服务器端的开发环境，利用它可以产生和执行动态的、互动的、高性能的WEB服务应用程序。ASP采用脚本语言VBScript（Java script）作为自己的开发语言。 ASP.NET 微软新一代的动态网页开发语言，功

20、能强大。 PHP 是一种的服务器端的嵌入式脚本语言。它大量地借用C,Java和Perl语言的语法, 并耦合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。它支持目前绝大多数数据库。还有一点，PHP是完全免费的，不用花钱，你可以从PHP官方站点(http: /)自由下载。而且你可以不受限制地获得源码，甚至可以从中加进你自己需要的特色。 JSP 是Sun公司推出的新一代跨平台网站开发语言，Sun公司借助自己在Java上的、非凡造诣，将Java从Java应用程序和Java Applet之外，又有新的硕果，就是JSP，Java Server Page。JSP可以在Serverlet和Jav

21、aBean的支持下，完成功能强大的站点程序。,2019/2/10,7、HTML的基础知识,1.HTML的基本概念 HTML（Hypertext Marked Language） 是一种描述语言，对WEB页面中显示内容的属性以标签的形式进行描述。客户机上的浏览器（browser）对这些描述进行解释将相应页面内容正确显示在显示器上。一个WEB页面就是一个HTML文档 。用它编写的文件(文档)的扩展名是.html或.htm HTML 文档是普通文本 ( ASCII) 文件, 它可以用任意文本编缉器（如windows中的记事本、写字板）进行编辑,2019/2/10,2. HTML 文件的结构,7、HT

22、ML的基础知识,2019/2/10,2019/2/10,8.PHP和MYSQL开发环境安装,1.下载集成的安装组件：wamp5.exe(http:/ 2.运行wamp5.exe,2019/2/10,8.PHP和MYSQL开发环境安装,3.运行 wampmanager.exe,服务管理器,运行界面,2019/2/10,8.PHP和MYSQL开发环境安装,4.测试Apache服务,2019/2/10,8.PHP和MYSQL开发环境安装,5.测试MYSQL服务,2019/2/10,8.PHP和MYSQL开发环境安装,6.将网站内容放入WWW文件夹中 7.在浏览器地址栏中输入：http:/localhost/文件夹名称，或者http:/127.0.0.1/文件夹名称,