购买

¥30.0

加入VIP
  • 专属下载券
  • 上传内容扩展
  • 资料优先审核
  • 免费资料无限下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 网页制作与网站建设

网页制作与网站建设.ppt

网页制作与网站建设

烟雨梦兮
2018-10-14 0人阅读 举报 0 0 0 暂无简介

简介:本文档为《网页制作与网站建设ppt》,可适用于IT/计算机领域

第章网页设计与制作基础*知识技能要点互联网、Web浏览器网页的类型网页设计的基本流程*互联网技术随着Internet/Intranet的不断普及和发展越来越多的公司、企业和个人正在开始建设自己的Web站点、编写Web网页以一种新的方式向外界发布信息供人们去浏览、阅读和应用。因此网页制作已经受到越来越多的专业人员的重视。*互联网以其丰富的内容、快捷的方式已经成为人们工作、学习、生活的重要组成部分。个人网站、企业网站、商业网站、教育和科研机构网站等各种类型网站地不断涌现正在悄然改变着人们的工作、学习和生活方式。因此网页设计技术越来越受到更多人的关注可以说网页设计也成为信息时代必备的技能之一。*网页网页是指通过Internet向全球提供信息的一些文档文件包括个人信息、商业、娱乐等内容。***网页是在浏览因特网时看到的一个个的画面文字、图片和动画等网站则是指存放在网络服务器上的完整信息的集合体它包含一个或多个网页这些页以超链接方式连接在一起形成一个整体描述一组完整的信息。首页(主页):构成网站的第一页*网页是利用超文本标记语言HTML(HyperTextMarkupLanguge)编写的存放在Internet/Intranet上的Web服务器中供访问者使用浏览器来阅读。利用HTML语言编写出来的网页又称为超文本即网页中包含有文本、图形、声音、图像和超链接(HyperLink)等多媒体信息。通常我们看到的网页都是以 htm 或 html 后缀结尾的文件称 HTML 文件。*互联网的应用技术现在的网络资源及各种业务、应用日趋丰富。电子政务、远程教育、远程医疗、移动短信、在线数字内容等网上各类业务日新月异电子商务交易额快速增长信息交流更加便捷高效。*Internet提供的服务:WWW服务(网上冲浪)电子邮件服务(Email)网上传呼(OICQ、QQ)文件传输(FTP)BBS*万维网(WWW) WWW是WorldWideWeb(环球信息网)的缩写,简称为Web中文名字为“万维网”。通过万维网人们可以使用很简单的方法就可以很迅速方便地取得丰富的信息资料。 是当前Internet上最受欢迎、最为流行、最新的信息检索服务系统。*我们通常所称的浏览网页就是指的WWW操作。*蒂姆·伯纳斯李(TimBernersLee)于年创建了WorldWideWeb(WWW)。Web最初的构想和研发的目的是为了满足在世界各个大学、不同研究所工作的科学家信息共享的需求。WWW的基本概念是把所有个人计算机、计算机网络和超文本整合成一个功效强大并且易于使用的全球信息系统。*“互联网之父”*年出生*浏览器*浏览器浏览器是获取WWW服务的基础它的基本功能就是对网页进行显示目前使用最广泛的浏览器是微软公司推出的InternetExplorer浏览器还有火狐浏览器Firefox等等。*GoogleChrome年Google携Chrome参战苹果公司的Safari年苹果Safari浏览器登场**Opera是由挪威Operasoftware公司*浏览器之战*网页制作工具记事本*步骤如下:单击“开始”按钮选择“程序附件记事本”。在“记事本”的窗口中输入HTML代码。输入代码结束后选择“文件”菜单中的“保存”或“另存为”命令则弹出图所示的另存为对话框。在“文件名”框中键入Web页的名称注意文件名必须以html或htm为扩展名。如果需要应在“保存在”列表框中定位到特定的目录。单击“保存”按钮即创建了一个Web页。见图。进入到你的文件架单击进行测试你的HTML的网页就完成了。*“另存为”对话框*单击ie图标进行测试*例:<html><head><title>网站制作<title><head><body>文本内容<body><html>*运行效果如图*一种专门用于网页制作的语言(网页文件的支持语言,用户通过IE浏览到的精美网页其实是IE执行网页的HTML代码的结果)**一个典型的HTML文本的基本结构形式如下:<html>    <head>    <title>网页标题<title>   <head>       <body>    网页的主要内容   <body>  <html>文件头文件主体*HTML标签(HTMLTag)都是由一对“<>”括起来的成对出现。<标记名><标记名>表示标记的开始和结束例如(<html><html>)HTML语言正是通过这些标签来设置网页的结构、网页元素的位置和类别网页元素的显示效果等。*标记符属性属性是用来描述对象特征的特性。例如一个人的身高、体重就是人这个对象的属性。在HTML中所有的属性都放置在开始标记符里多个属性之间用空格分开。如:<bodybgcolor=“blue“text=“white”>*关于颜色颜色值是一个关键字或一个RGB格式的数字。aquablackbluefuchsia,graygreenlimemaroonnavyolivepurpleredsilvertealwhiteyellow*在HTML中对于颜色的定义可以用位十六进制数。电脑屏幕的色彩是由rgb(红、绿、蓝)三种色光所合成的通过调整这三个基色就可以调配出其它的颜色。每位数代表一种颜色的浓度三种颜色的顺序为红、绿、蓝代表颜色浓度最小FF代表颜色浓度最大。#代表纯黑、#FFFFFF代表纯白、*d图中所示是部分颜色的RGB代码:例:为页面设置背景色:<bodybgcolor=“#FFFF”>*网页编辑器用FrontPage或者Dreamweaver工具FrontPage和Dreamweaver是最著名的网页编辑工具。FrontPage是微软的Office中的一件组件是入门时很容易掌握的工具。*网页编辑器Dreamweaver是Macromedia公司出品的网页三剑客其中的一个软件是专业网页制作软件。*Dreamweaver*美化网页的基本工具PhotoshopPhotoshop是由Adobe公司开发的图形处理软件它是目前公认的PC机上最好的通用平面美术设计软件它功能完善、性能稳定、使用方便所以在几乎所有的广告、出版、软件公司Photoshop都是首选的平面制作工具。*FireworksFireworks是由Macromedia公司开发的图形处理工具。第一套专门为制作网页图形而设计的软件同时也是专业的网页图形设计及制作的解决方案。*FlashFlash是美国Macromedia公司开发Flash是交互式矢量图和Web动画的标准。使用Flash可创作出既漂亮又可改变尺寸的导航界面以及其它奇特的效果。它易学、易用可以做出有很多动画的网站。**网页的基本构成元素 一个构思奇妙、制作精美的网页会使整个网站形象地位得到提高。网页制作是一个可简单、可复杂的过程。制作一个优秀的网页不仅需要有艺术的修养懂得必要的网络语言还要对图形图像、音频、视频制作传输技术等有很深刻的理解。*设计页面时经常使用的一些元素:文字图形菜单按钮、链接、表单、数据交换背景表格颜色多媒体元素页面布局*文字(标题、字号、字型)文字是网页发布信息所用的主要形式。在网页中可以通过字体、颜色、底纹、边框等来设置文本的属性。*文字(标题、字号、字型)在网页制作中文字都可以很方便地设置成各种字体和大小文字不要太大也不要使用过多的字体中文文字使用宋体像素或者像素左右即可因为过大的字在显示器显示时线条不够平滑。另外颜色也不要使用太多以免让人看起来眼花缭乱。Web本身对文本和字体的格式化能力并不强在Web页面中可以指定文本尺寸、如果需要使用某种特殊字体可以把这些字画在图片上然后将图片插入到页面中。**图形图形(网页上经常使用的图片格式:Jpg、Gif)可以使用Photoshop、Firework等图像处理工具制作完成。*GIF在颜色数很少()的情况下产生的文件很小。JPG最主要的优点是能支持上百万种颜色从而可以用来表现照片PNG可移值网络图形。Macromedia公司的Fireworks的默认存盘格式就是PNG。它集合了GIF和JPG格式的优点。*交互功能交互功能(菜单按钮、链接、表单、数据交换)帮助浏览者在Web内导航。*多媒体元素多媒体元素:包括声音、动画、视频片断、背景音乐等。例如动画可以使用flash等工具制作完成。*网站的设计、建设*网站类型的划分网站有很多种类型如门户型网站、电子商务网站、个人网站等等。如果依据传达信息内容的特点来进行类型的划分可以分为以下种形式:*信息查询类:像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息而且访问量较大。*大众媒体类:具代表性的就属各大门户网站的新闻版块传统媒体在网络空间的拓展报刊杂志的电子版。*宣传窗口类:宣传窗口类型的网页具有内容专一形式多样的特点。尤其是企业的网页具有企业形象传达的作用可以看作CI设计的延伸。个人网站也成为这种类型的重要组成部分因此格外受到重视。*电子商务类:电子商务的出现使单向的信息传送变成了双向的交互服务从真正意义上实现了网络的交互性。*交流平台类:各种论坛、BBS、聊天室*网络社区类:即虚拟网上生活。从网上交流发展到网络社区网络已成为人们生活、存在的新空间在网络社区可以充分的消遣、放松获得深入交往并享有充分自由的理想场所。*网站设计的基本流程、整体规划例如网站主题、风格、页面元素、逻辑结构等。、资料收集例如收集与主题相关的文字图片资料一些优秀的页面风格下载一些你喜欢的交互页面开放的源代码等。*如:**如:*网站设计的基本流程、页面设计根据事先规划的结构利用平面图片的形式设计你想要的最终效果。*、网页测试、网页上传、网站推广与维护*Web站点主页的基本成分 页面标题(说明网站的性质与内容)网站标识LOGO都是被精心设计的,Logo的作用很多最重要的就是表达网站的理念、便于人们识别广泛用于站点的连接、宣传等。一个绝妙的Logo不但会使首页蓦然生辉而且会成为整个网站的形象大使。页眉(用来放置最希望浏览者看到的内容)导航栏(栏目索引)内容页脚(联系方式、版权信息等)*d站标导航栏标题*d页脚信息区*d*版式布局 整体布局合理化、有序化、整体化字体的大小、型号、字间距、行间距以及配色等表现功能。网页的版式设计有创造性、艺术性将文字、图形图像、色彩、动画、视频图像等网页的传达要素根据特定的内容和主题在网页所限定的范围中运用造型元素和形式原理进行视觉的关联与配置从而将设计意图以视觉形式表现出来。***用表格排版***由于人们习惯于将视线从左到右、从上到下移动因而视区中的不同位置注目程度不同。*网页中最常见的构图布局*http:wwwfloridahospitalcom层次分明*http:wwwkomodomediacomportfolio这个网站用了宽大的边框分隔内容和背景在背景处布置了大面积的图案。页面的宽度符合阅读习惯而扩展出来的背景又在视觉上饱满了屏幕尺寸*这个网站用了宽大的边框分隔内容和背景在背景处布置了大面积的图案。页面的宽度符合阅读习惯而扩展出来的背景又在视觉上饱满了屏幕尺寸*http:wwwwashingtonedu**http:wwwvolvocarscomintltopaboutcorporatecareerpagesbusinessareasaspx**SGIsilicongraphics,inchttp:wwwsgicom**网站内不同页面的设计风格要有所统一。有些是色彩和布局都统一有些则是布局统一色彩跳跃。**色彩和布局都统一*wwwkiariocom**布局不同而色调一致http:wwwstephaneguillotcom**布局相同色彩跳跃*******推荐学习网站之网页素材网页制作大宝库http:wwwdabaokucomsucai素材精品屋http:wwwsucaiwcomindexasp黑马网页素材http:sucaiheimacom遐思素材屋http:wwwzziccindexhtm*推荐学习网站之网页特效网页特效集http:wwwhelpornet网页特效http:freecom七色风网页特效http:wwwwindnetwytxwytxhtm*推荐学习网站之技术文章太平洋学院http:wwwpconlinecomcnpcedusjwz蓝色理想http:wwwblueideacom天极网网页陶吧http:homepageyeskycom网页设计师联盟http:wwwdesignnet*本章重点内容小结网页、网站万维网、浏览器网页制作工具(包括网页制作语言HTML)网页中的基本元素网页中颜色的定义网站建设流程网页版式布局*练习题课本P接入Internet的计算机必须共同遵守()ACPIIP协议BPCTIP协议CPTCIP协议DTCPIP协议万维网的网址以http为前导表示遵从()协议A纯文本B超文本传输CTCPIP协议DPOP协议URL的组成格式为()A资源类型、存放资源的主机域名和资源文件名B资源类型、资源文件名和存放资源的主机域名C主机域名、资源类型、资源文件名D资源文件名、主机域名和资源类型URL的使用是()A定位主机的地址B定位资源的地址C域名与IP地址的转换D表示电子邮件的地址使用记事本用HTML语言编写如下图所示效果的页面。*网页标题*互联网以其丰富的内容、快捷的方式已经成为人们工作、学习、生活的重要组成部分。个人网站、企业网站、商业网站、教育和科研机构网站等各种类型网站地不断涌现正在悄然改变着人们的工作、学习和生活方式。因此网页设计技术越来越受到更多人的关注可以说网页设计也成为信息时代必备的技能之一。*我们通常所称的浏览网页就是指的WWW操作。*年出生*GoogleChrome年Google携Chrome参战苹果公司的Safari年苹果Safari浏览器登场*Opera是由挪威Operasoftware公司*一种专门用于网页制作的语言(网页文件的支持语言,用户通过IE浏览到的精美网页其实是IE执行网页的HTML代码的结果)*这个网站用了宽大的边框分隔内容和背景在背景处布置了大面积的图案。页面的宽度符合阅读习惯而扩展出来的背景又在视觉上饱满了屏幕尺寸*wwwkiariocom

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

评分:

/91

¥30.0

立即购买

VIP

意见
反馈

免费
邮箱