网页设计与制作培训课件.pptx

1、第一部分 网站建设相关基础知识网站及其功能域名和WEB服务器 动态网页技术知识 让IT教学更简单，让IT学习更有效 按网站用途分 按商业目的分盈利基本模式?出卖广告位收取会员费提取经纪费获得联盟收益等门户网站行业网站娱乐网站个人网站WAP网站营利性非营利性电商网站无数个网站和网页的集合由 “统一资源定位符统一资源定位符” （URL）标识通过点击链接链接来获得资源通过超文本传输协议传送给使用者浏览器 通过浏览器，用户可以在浩瀚的Internet海洋中漫游，搜索和浏览自己感兴趣的信息。IE火狐谷歌网景遨游360产品营运交流服务信息传递信息咨询服务宣传、展示产品，狭义电子商务，广义收集信息（双向沟通

2、）无时空限制主机资源域名网址俗称网址，需向服务商购买。存放网站资源的地方，可自建、购买、租用或托管由网页文件、文字、图像等组成，可被网民浏览的信息资源文件文本图片声音视频动画脚本程序超链接Macromedia/ADOBE公司开发的是一套强大的网页编辑工具由Dreamweaver，Fireworks，Flash组成，俗称三剑客这三种软件能相互无缝合作专业的可视化网页设计编辑、网站管理、维护的工具特点：能够快速创建各种赏析网站赏析网站赏析网站东凌集团赏析网站华为网站域名 互联网上每一台主机都有一个唯一的标识固定的IP地址。 由于IP地址是数字标识，难以记忆和书写，与网络上的数字型IP地址相对应的字

3、符型地址，就被称为域名。 域名便于记忆，在IP地址发生变化的情况下，通过改变解析对应关系，域名仍可保持不变。 注册域名需要遵循先申请先注册原则。域名管理中心是中国互联网络信息中心。简单理解，俗称网址。http:/ -中国 .com-用于企业.edu-用于教育机构 .gov 政府部门.net 网络信息中心 .org 非盈利组织企业如何设计域名 企业域名一般格式为或 Xxx可用企业名称的拼音或英文缩语，或有一定意义的特定词。 简单、好记、有意义，标识性强。 注意域名抢注与域名冲突的问题。 自主架设服务器：自已有网络中心，并接入互联网，自行搭建服务器。方便、易管理，空间大，适用大型企业。 托管服务器

4、：将自己的服务器放到高带宽入网的电信局或专门的数据中心。适用大中型企业。 租用服务器：与托管服务器相似，只是主机不是自己的。 虚拟主机：在同一服务器上，可以建立多个Web站点。不能支持高访问量、远程管理权限有限、软件安装不方便。适用于小企业网站。适用于小企业网站。虚拟主机就是由多家网站一起租用一台服务器。 如何选择Web服务器？ 动态网站设计主要三种技术路线： Microsoft Windows20009xXP+ASP-IIS+MS SQLServerAccess （包括 .net） WindowsLinux +JSP +Tomcat+MSSQLServerAccessMySQL Linux+

5、PHP+Apache+MySQL一般来说，常用的网站程序有以下四种开发语言： php asp (常用的有C#和VB.net语言) jsp (java)PHP优点：、是一种容易学习、易于使用。只需要很少的编程知识就能使用PHP建立一个交互的WEB站点。2、PHP开放源码、完全免费。3、虽然是解释性语言，也有不错的执行效率。目前淘宝、163、新浪等大型门户网站使用的PHP开发。超文本预处理器（超文本预处理器（PHP: Hypertext Preprocessor）Asp使用VB Script语法，是解释型语言，适用于以Windows操作系统为平台的主机上，在与Access，SQL Server等微

6、软的数据库结合时十分稳定，应用范围广，后期维护简单方便，数据转移方便。同时，因为易于学习，和windows服务器不需配置、不须安装其它程序即支持ASP等原因，使得早期ASP得以被广泛的使用。ASP是动态网页的鼻祖。虽然因为历史原因，互联网上使用asp的网站还很多。但微软已不发布asp新版本。已经有些过时了。ASP.net 是微软公司建立在通用语言上的一种程序构架。ASP.net提供许多Web开发优势。ASP.net不是一种语言。它是支持多种语言的框架，支持统一的标记语言。 ASP.net框架下最常用的语言是C#和VB.net。优点：1、面向对象。2、编译型语言，编译后执行，提高执行效率。3、稳

7、定性和安全性。C# (#读 sharp，中文译音“夏普”)是微软公司发布的一种面向对象的、运行于.NET Framework之上的高级程序设计语言，JSP(Java Server Pages)是由Sun 公司开发、许多公司参与一起建立的一种动态网页技术标准。 JSP技术是用JAVA语言作为脚本语言。优点：1、跨平台。JSP拥有Java编程语言“一次编写，各处运行”的特点。2、稳定性和安全性。3、在大型商务应用中，被广泛采用。缺点：执行效率相对低一些。网页数据库是什么意思？什么情况下需要运用到数据库？数据库有哪些种类？网页数据库是存放网站系统数据的地方。当用户网站有程序模块，并且需要通过程序作数

8、据操作工作的时候，就需要运用到数据库。数据库的种类有很多，譬如 Access使用标准SQL语法，在中小型网站的建设上与Asp搭配堪称完美结合。相对于其他数据库软件来说，其优点在于使用简单，便于数据维护。 但数据存储量相对于其他数据库软件来说十分小，一般数据量在当数据量超过100M或数据条数超过10万条时以上时，采用Access数据库会导致页面运行速度缓慢等。 当数据量超过100M或数据条数超过10万条时，使用SQL Server数据库是我们的首选数据库。MySQL 官方发音是“My Ess Que Ell”(不是 MY-SEQUEL )。它也是一个多用户、多线程SQL数据库服务。优点：1、完全

9、免费2、与PHP组合，能快速简单的开发各种网站应用。Oracle是美国甲骨文公司开发的数据库软件。由于其功能和效率的优势，成为银行、通信、政府等部门的数据库首选。缺点：1、价格较贵，一般中小企业无法承担。2、学习难度略大于MS SqlServer和MySql。第二部分 HTML与CSS前端网页设计知识1、HTML简介 2、CSS简介 3、网页元素制作 4、网页布局技术 让IT教学更简单，让IT学习更有效2.1 网页制作基础让IT教学更简单，让IT学习更有效什么是什么是HTML？HTML(英文Hyper Text Markup Language的缩写)中文译为“超文本标记语言超文本标记语言”，主

10、要是通过HTML标记标记对网页中的文本、图文本、图片、声音片、声音等内容进行描述。2.1 网页制作基础让IT教学更简单，让IT学习更有效 HTML语言简介2.1 网页制作基础让IT教学更简单，让IT学习更有效认识认识HTML标记标记HTMLHTML提供了许提供了许多标记多标记 段落标记段落标记标题标记标题标记图片标记图片标记 超链接标记超链接标记2.1 网页制作基础让IT教学更简单，让IT学习更有效一段源代码为例2.1 网页制作基础让IT教学更简单，让IT学习更有效HTMLHTML的的发展史发展史HTML2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后

11、被宣布过时。超文本标记语超文本标记语言（第一版）言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布。HTML3.21997年1月14日，W3C推荐标准。HTML4.01997年12月18日，W3C推荐标准。HTML4.011999年12月24日，W3C推荐标准。HTML 5第一份正式草案已于2008年1月22日公布,但是由于各个浏览器支持的不是很统一，所以还没有得到广泛应用。【总结总结】HTML语言发展至今，经历了六个版本，这个过程中新增了许多HTML标记，同时也淘汰了一些标记。2.1 网页制作基础让IT教学更简单，让IT学习更有效什么是什么是CSS？2.1 网页制作基

12、础让IT教学更简单，让IT学习更有效CSS通常称为CSS样式样式或样式表样式表，主要用于设置HTML页面中的文本内容文本内容（字体、大小、对齐方式等）、图片的外形图片的外形（宽高、边框样式、边距等）以及版面的布局版面的布局等外观显示样式。 CSS语言简介2.1 网页制作基础让IT教学更简单，让IT学习更有效认识认识CSS属性属性CSSCSS提供了丰提供了丰富的富的样式样式font:属性值属性值;字体属性字体属性color:属性值属性值;颜色属性颜色属性float:属性值属性值;浮动属性浮动属性background:属性值属性值;背景属性背景属性2.1 网页制作基础让IT教学更简单，让IT学习更

13、有效以某网页头部设置的内部样式表的一段CSSCSS样式样式代码为例pfont-size:36px;color:red;text-align:center; 字号字号颜色颜色对齐方式对齐方式 最常见是外部样式表文件的引用：前面我们已经对网页、HTML、CSS以及常用的网页制作工具Dreamweaver有了一定的了解，接下来将通过一个案例学习如何使用Dreamweaver创建一个包含HTML结构和CSS样式的简单网页。 使用Dreamweaver 工具创建网页2.1 Dreamweaver工具的使用让IT教学更简单，让IT学习更有效演示：建立站点演示：建立站点 、安装、安装iis 设计简单静态页面

14、设计简单静态页面2.2 网页元素规范让IT教学更简单，让IT学习更有效网站设计前规划与布局 明确网站规划设计任务书 网页布局技术：表格布局、层布局（div）。 网站CI设计：CI（Corporate Identity）设计，即企业形象设计。网站标志（Logo）、标准色彩方案、标准字体方案、宣传语。 使用： logo设计软件网页上运用的字体都有哪些？一般来说，中文宋体对网页支持很好，大小为12px或者14px。英文字体可支持的相对较多，但一般采用Arial字体。考虑到浏览者电脑使用的系统、浏览器、所安装的字体各自不同，一般不大量使用非常个性化的字体。小部分个体化字体可以用图片等方式处理。2022

15、-5-18网页上的图片格式有哪些？网页上常用的图片格式有两种：jpg和gif 。Jpg格式：网页常用的图片格式之一。其特点是能把颜色丰富的图片很好的压缩，在保证图片质量的前提下，能做到图片文件量比较小，我们常见的风光照片，人物照片经常采用这个格式。(如下图一)-大小控制好500kB以下Gif格式：也是网页中常用的图片格式，他的特点是能把一些色彩不太丰富的图片作很好的压缩。支持255色。我们常把卡通图片，文字版面用gif格式表现出来，一些简单的动画效果使用GIF。(如下图二)2022-5-18如何判断网页上的动画是Flash还是GIF？在动画上点击右键，如果看到的是图一的效果，则采用的是flas

16、h技术；如果看到的是图二的效果，则是gif 。有的网页会把页面右键功能屏蔽，这种情况就需要另作判断了。（图一）（图二）2022-5-182.3 网页设计布局1、传统的表格布局 使用和word中表格一样的可视化布局，表格格式设置，表格嵌套等方法实现布局。操作简单。注意宽度、边框格式设置。演示：top图片大小与flash导航按钮图片设计模板设计二级页面2.3 网页设计布局2、div+css布局 （1）建立HTML主页index.html，搭建框架结构： 此处显示 id header 的内容 此处显示 id nav 的内容 此处显示 id main 的内容 此处显示 id side 的内容 此处显示

17、 id footer 的内容 2.3 网页设计布局 （2）在HTML主页index.html头部链接外部css文件样式表，设置主页id样式：/*body*/ #container width:900px; margin:0 auto;/*header*/ #header height:170px; background:#CCFFCC; margin-bottom:8px; #nav height:30px; background:#CCFFCC; margin-bottom:8px;/*main*/ #maincontent margin-bottom:8px; #main float:le

18、ft; width:664px; height:500px; background:#FFFF99; #side float:right; width:228px; height:500px; background:#FFCC99;/*footer*/ #footer height:70px; background:#CCFFCC;2.4 js实现交互效果第三部分 网站后台维护基础企业网站维护目的网站维护内容 怎样做好维护 让IT教学更简单，让IT学习更有效3.1 网站后期维护一、维护目的 网站维护的目的是为了让您的网站能够长期稳定地运行在Internet上，及时地调整和更新您的网站内容，抓住

19、更多的网络商机。二、网站维护的项目1、网站的软硬件维护 包括服务器、操作系统、和Internet联接线路等等，以确保网站的24小时不间断正常运行。2、网站内容的更新 一个好的网站需要定期或不定期地更新内容，才能不断地吸引更多的浏览者，增加访问量。网站内容更新：对于网站来说，只有不断地更新内容，才能保证网站的生命力，否则网站不仅不能起到应有的作用，反而会对企业自身形象造成不良影响。网站建设单位可以考虑从以下五个方面入手： 第一，在网站建设初期，要保证网站后续维护所需资金和人力。很多单位是以外包项目建设时很舍得投入资金，可是网站发布后，维护力度不够，信息更新工作迟迟跟不上。 第二，要从管理制度上保

20、证信息渠道的通畅和信息发布流程的合理性。网站上各栏目的信息往往来源于多个业务部门，确立一套从信息收集、信息审查到信息发布的良性运转的管理制度。对网站的权限设置好，既要考虑信息的准确性和安全性，又要保证信息更新的及时性。 3.1 网站后期维护 第三，在建设过程中要对网站的各个栏目和子栏目进行尽量细致的规划，在此基础上确定哪些是经常要更新的内容，哪些是相对稳定的内容。设计网页模板，这些模板不用改动，有利于后续维护。 第四，对经常变更的信息，尽量用结构化的方式（如建立数据库、规范存放路径）管理起来，以避免数据杂乱无章的现象。经常备份数据库。 第五，要选择合适的网页更新工具。信息收集起来后，用加工处理

21、通过后台发布到网页上，又想把信息保存起来以备以后再用，那么采用能够把网页更新和数据库管理结合起来的工具效率会更高。 3.1 网站后期维护 网站优化是让网站设计符合搜索引擎检索习惯，从而提高关键词在搜索引擎的排名，使潜在客户通过产品关键词在各大搜索引擎上都能搜索到网站，增强搜索引擎营销的价值。1、用户体验好：以用户需求为导向，网站导航方便，网页下载速度尽可能快，网页布局合理并且适合保存、打印、转发，网站信息丰富、有效，有助于用户产生信任。2、搜索引擎等优化（SEO）： 搜索引擎的用户往往只会留意搜索结果最前面的几个条目，所以经常会通过各种形式来影响搜索引擎的排序，让网站更适合搜索引擎检索，便于患者更容易找到我们。 （1）关键词 （2）内部链接 （3）外部链接和友情链接3.2 网站优化非常感谢您的欣赏2022-5-18