资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,网络技术应用基础,1.1,网站设计基础,1.1,网站设计基础,1,、,网页的定义:,在网站中,供用户阅读的一个个页面,就称之为“网页”,又称为,Web,页。如,图,1-1,所示即为一个网页的界面。,图,1-2,图,1-1,2,、网页的分类,根据不同的分类标准,可以对网页进行如下的分类,:,(1),按网页在网站中所处位置不同,网页可分为,主页,和,内页,。,打开一个网站时看到的第一个页面就是主页,也称为首页,主页文件的名称一般为,index.htm,或,index.html,;与主页相链接的其他各个页面就称之为内页。,程序是否在服务器端运行,是重要标志!,(,2,),按网页的表现形式,可将网页分为静态网页和动态网页。,运行于客户端的程序、网页、插件、组件,属于静态网页,例如,html,页、,Flash,、,JavaScript,、,VBScript,等等,它们是永远不变的。,一般用户制作的都是静态网页,它是一切网页制作的基础,如果想制作动态网页,那么仍然需要先做好静态页面,然后在此静态页面中加入动态技术,从而制作出十分精彩的动态页面。,在服务器端运行的程序、网页、组件,属于动态网页,它们会随不同客户、不同时间,返回不同的网页,例如,ASP,、,PHP,、,JSP,、,ASP.net,、,CGI,等。,网页的组成元素,网页元素多种多样的,包括,文本,、,图像,、,动画,和,音乐,等。,文本是网页最基本的组成元素,是网页的主体部分。,图像也是网页中不可缺少的元素,是使网页看起来更美观的点睛之笔。,3,、,网站的定义,在网上看到的一个个网页页面的集合就是网站。,网站可以包含多个页面,也可以只有一个页面,比如一些简单的个人主页就可能只有一个简单的页面,而一些大型网站则可能有很多页面。,根据网站内容来分,可以将网站分为,4,类,即门户网站、职能网站、专业网站和个人网站。,门户网站,职能网站,专业网站,个人网站,1.1,网站设计基础,网页制作是一门综合性技术,需要用到图像处理、动画制作、页面设计、语言编程等方面知识。常用的网页制作工具可以分为五大类,:,图形图像制作工具:,Photoshop,、,Fireworks,、,Freehand,、,CorelDraw,。,网页编辑工具:记事本、,Dreamweaver,、,FrontPage,、,Visual Interdev,、,visual studio,。,网页动画工具:,Flash,、,Swish,、,Ulead,Gif Animator,。,网页开发语言:,ASP,、,ASP.NET,、,JSP,、,PHP,、,Perl,、,CGI,、,XML,、,JavaScript,、,VBScript,等。,网页上传工具:,CuteFtp,、,LeapFtp,、,FlashFXP,1.1,网站设计基础,1,HTML,语言,Hypertext Markup Language(,超文本标记语言,),HTML,文件可以直接由浏览器解释执行,而无须编译,客户端,(浏览器),服务器端,(网页提供者),Internet,提供内容,提出请求,1.1,网站设计基础,1,HTML,语言,编写环境:记事本、,Dreamweaver,、,Frontpage,、,Word,等文本编辑器,HTML,文件必须以,html,或,htm,为扩展名,运行环境:,IE,、,Firefox,等,1.1,网站设计基础,HTML,语言的基本结构,第一个,HTML,网页,Hello,world!,这里是内容区域!,任何的,HTML,都是以,开始,以,结束,定义了,HTML,文档的页头部分,指出文档的标题,这种标题会在浏览器上的标题条内显示出来,HTML,的内容都定义在它们之间,1.1,网站设计基础,HTML,常用标记,1,)背景颜色及背景图像,颜色,:,系统预定义颜色,:red,、,green,、,blue,等,六位,16,制数,:#FF0000,rrggbb,图像,:,gif,、,jpg,、,bmp,或,png,1.1,网站设计基础,HTML,常用标记,2,)字体标记,Size(,字体大小,):,取值,1,7,由小到大,Face(,字体类型,),:,客户端所能获得的字体,必须是用户计算机已经安装的字体,如使用特殊字体,可以把文字转化为图片进行加入,1.1,网站设计基础,HTML,常用标记,3,)段落标记,和换行标记,注意:,是单标签,4,)水平线标记,Width,:宽度,可以是百分比,也可是像素,5,),图像标记,src,:,图像文件的路径名及文件名,一般使用相对路径,1.1,网站设计基础,HTML,常用标记,6,)超链接标记,聊城大学传媒技术学院,Href,:,链接的地址,一个文件:,about.html,一个网址:,http:/,打开邮件客户端软件并填写接收者:,mailto:,target:,打开目标的方式,_blank,:使用新窗口打开链接,_top,:上层窗口,主要在框架页中使用,_self,:当前窗口,_parent,:父窗口,1.1,网站设计基础,HTML,常用标记,7,),表格标记,精品课程,单位,负责人,网络技术,传媒技术学院,张三,border,:边框宽度,1.1,网站设计基础,HTML,常用标记,8,),滚动字幕标记,我会动的,,,哈哈,!,注:,Direction:,运动方向(,down,、,up,、,left,、,right,),Scrolldelay,:,间隔时间,值越大越慢,1.1,网站设计基础,HTML,常用标记,9,),背景音乐标记,loop,:,循环次数,当值为,-1,时表示无限次循环播放,背景音乐一般采用*,.mid,格式文件。,10,)多媒体文体嵌入标记,1.1,网站设计基础,2.,Dreamweaver,8,(1),Dreamweaver,8,编辑界面,1.1,网站设计基础,2.,Dreamweaver,8,(2),Dreamweaver,8,使用请看演示,1.1,网站设计基础,3,网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,用户需求分析,网站整体规划,内容需求,包含什么,功能需求,如何实施,设计需求,如何更好,技术需求,具体实现,功能需求,:,网站的受众群体是哪些?其特点是什么?,网站最受关注的是哪些功能?,是否有留言本、论坛、站内搜索等?,是否提供用户注册?,内容需求,:,网站内容包括哪些类型?,网站信息采用哪些表现方式:文本、图片、视频、表格等?,是否具有独立维护内容的能力?,网站信息是否允许下载和转载?,设计需求,:,网站采用哪种色系?,网站的风格是什么样的?,网站的页面深度有几级?,是否有,Flash,动画?,技术需求,:,网站采用何种技术,系统具有的安全度,是否对浏览器有要求等,1.1,网站设计基础,3,网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,用户需求分析,网站整体规划,栏目规划,功能规划,页面结构规划,栏目规划的原则,:,栏目设计结构要清晰、设计简洁。,栏目顺序安排合理,分清主次,重要栏目放在靠前位置,突出重点。,栏目结构不超过三级,过深的栏目容易使访问者失去耐心。,首页,个人简介,课程教学,学术研究,生活随笔,联系方式,教学理论,教学课件,教学资源,论文专著,科研项目,获奖情况,图,4-33,栏目结构图,功能规划,:,分为前台功能和后台功能,前台功能是为访问者服务的,如注册、评论、留言、搜索等功能,后台功能是供网站维护者使用多功能,如发布功能、论坛、资源库等,导航区,版权信息,内容区,功,能,区,功,能,区,图,4-34,首页页面布局,导航区,版权信息,内容区,功,能,区,图,4-35,二级列表页面布局,导航区,版权信息,内容区,图,4-36,三级内容页面布局,1.1,网站设计基础,3,网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,1.1,网站设计基础,3,网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,1.1,网站设计基础,3,网站设计流程,网站整体规划,搜集和准备素材,网站制作,网站测试与发布,网站测试,注册域名,申请虚拟主机,利用,FTP,上传网页(,DW,),虚拟主机是通过技术手段将一台服务器虚拟分成许多份,可以在一台服务器上同时安装多个网站,
展开阅读全文