网站规划与网页设计课件概述.ppt

网站规划与网页设计课件概述.ppt

《网站规划与网页设计课件概述.ppt》由会员分享，可在线阅读，更多相关《网站规划与网页设计课件概述.ppt（61页珍藏版）》请在冰点文库上搜索。

网站规划与网页制作,1课程教学内容与进度安排,课程计划与要求,2教学形式与评价,考试内容有两块：

问答给定psd图像，在规定时间内切图，排版说明js特效，并做本地化处理,模块1：

网页制作概述网页相关的一些概念静态网站与动态网站区别（什么是web服务器，iis,apache）空间申请域名申请网页上传（空间租赁服务商，看懂报价）学习本课后干什么？

网页开发相关技术模块2：

CSS控制与HTML基本语法Dreamweaver工具站点的建立HTML基础介绍Css对页面对象的控制,1课程教学内容与进度安排,模块3：

DIV布局几个核心概念DIV布局实例Div与CSS形成的特效模块4：

JavaScript基础语法基础DOM、XML基础与应用jquery典型应用模块5：

相关专题,1课程教学内容与进度安排,一个不容回避的问题,大家毕业后想干什么？

更具体些，在专业上想干什么？

1互联网,网页的基本概念,互联网是由多个计算机网络相互连接而成的一个网络，它是在功能和逻辑上组成的一个大型网络。

如图所示。

图1-11Internet示意图,2万维网（WWW）,网页的基本概念,万维网是Internet的一部分，它基于三个机制向用户提供资源，这三个机制是：

1.协议协议是一组标准的规则，用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错误检测，访问Web上的资源都需要遵循这些规则。

万维网使用的是HTTP协议（HyperTextTransferProtocol,超文本传输协议）。

网页的基本概念,2.地址地址：

万维网采用统一的命名方案来访问Web上的资源。

URL（UniformResourceLocations,统一资源定位符，网页的网址）用于标识Web上的页面和资源。

每个URL均由3部分组成，如下所示。

用于通讯的协议与之通信的主机（服务器）服务器上资源的路径（例如文件名）http:

/index.htm,网页的基本概念,3.HTML（HyperTextMarkupLanguage，超文本标记语言）HTML用于创建网页文档。

HTML文档是使用HTML标记和元素创建的，此文件以扩展名.htm或.html保存在Web服务器上。

客户浏览器/服务器工作的过程,3Web浏览器,网页的基本概念,Web浏览器的中文名称：

网络浏览器或网页浏览器，简称浏览器；英文名称：

WebBrowser。

浏览器是用于观看网页的工具，是一个显示网页伺服器或档案系统内的HTML文件，并让用户与这些文件进行互动的一种软件。

个人电脑上常见的网页浏览器包括微软的InternetExplorer、Mozilla的Firefox、Opera和Safari。

浏览器是最经常使用到的客户端程序。

4网页与网站,网页的基本概念,网站：

网站是万维网上相关网页的集合。

网页：

网页是万维网上的页面，其文件后缀名通常为.html或.htm。

HTML：

HTML是超文本标记语言（HyperTextMarkupLanguage）的简称。

HTML编辑器：

也称网页编辑器，一般是指用于开发网页的工具软件，目前比较流行的HTML编辑器是MacromediaDreamweaver和MicrosoftFrontPage。

5IP地址,网页的基本概念,IP地址用来标识连接到Internet上电脑的指定编号，每一个IP地址对应一台电脑，这与用电话号码标识电话网络中的电话相同。

电脑识别的IP地址由32位二进制数值组成，电脑上以十进制数值来显示，一组数值分为4部分，每一部分均不能大于255，中间用“.”分隔，如218.192.54.7,6域名,网页的基本概念,域名就是常说的网址，它也具有惟一性，如百度的网址、网易的网址等就是一个域名，域名由汉语拼音或英文字符加上数字表示，在访问网络时，域名将通过域名服务器转换成IP地址，这种转换是在后台完成的。

7C/S架构和B/S架构,C/S又称Client/Server或客户/服务器模式，服务器通常采用高性能的PC机，并采用大型数据库系统，每个客户一般都需要下载相应的客户端软件与服务进行通讯，例如各种聊天软件，下载软件。

B/S是Brower/Server的缩写，客户机上只要安装一个浏览器（Browser）服务器安装数据库系统，浏览器通过WebServer同数据库进行数据交互。

例如各大网站，论坛等等,两种架构的区别,C/S架构的优缺点优点：

1.C/S架构的界面和操作可以很丰富。

2.安全性能可以很容易保证，实现多层认证也不难。

3.由于只有一层交互，因此响应速度较快。

缺点：

1.适用面窄，通常用于局域网中。

2.用户群固定。

由于程序需要安装才可使用，因此不适合面向一些不可知的用户。

3.维护成本高，发生一次升级，则所有客户端的程序都需要改变。

B/S架构的优缺点,优点：

1）客户端无需安装，有Web浏览器即可。

2）BS架构可以直接放在广域网上，通过一定的权限控制实现多客户访问的目的，交互性较强。

3）BS架构无需升级多个客户端，升级服务器即可。

缺点：

1）在速度和安全性上需要花费巨大的设计成本，这是BS架构的最大问题。

4）客户端服务器端的交互是请求-响应模式，通常需要刷新页面，这并不是客户乐意看到的。

（在Ajax风行后此问题得到了一定程度的缓解）,B/S体系的运作过程,客户端浏览器向服务器程序提出请求，服务器程序进行解释之后将生成的html代码返回给客户端，客户端的浏览器解释html代码，最终在客户端形成网页。

8静态网页与动态网页,网页的基本概念,按网页的表现形式可将网页分为静态网页和动态网页。

静态网页和动态网页不是以网页中是否包含动态元素来区别的，而是针对客户端与服务器是否发生交互而言，不发生交互的是静态网页，发生交互的是动态网页。

1.网站的分类,网站的分类与赏析,根据应用类型来大家自己说：

电子商务网站、搜索引擎、论坛、门户网站、视频、社交网站分类赏析网站:

布局结构颜色搭配导航栏设计动画效果等方面,I.商业、企业和政府机关类网站,http:

/,商业、企业类网站,http:

/,经济类网站,http:

/.br/,社会和政府机关类网站,http:

/,http:

/www.usa.gov/,http:

/,II.信息、网络服务、教育类网站,信息类网站,http:

/puter.org/,http:

/www.dtribe.co.kr/,网络服务类网站,http:

/,教育类网站,http:

/,http:

/www.risd.edu/,III.休闲、时尚类网站,时尚类网站,http:

/,http:

/,购物网站,http:

/,http:

/,医学健康网站,http:

/,http:

/,饮食网站,http:

/,宠物和儿童网站,http:

/,http:

/,运动类网站,http:

/,http:

/,IV.卡通和游戏类网站,http:

/,卡通类网站,http:

/,娱乐和游戏类网站,http:

/,http:

/,电影网站,V.电影、音乐、艺术类网站,http:

/,http:

/,音乐网站,http:

/,http:

/www.atlantasymphony.org/,艺术网站,http:

/,http:

/,摄影网站,http:

/www.verne.be/,学习本课后干什么？

公司岗位：

网页设计师网页美工,某网页设计师招聘职位描述网页设计师一、要求：

1、年龄：

20-28岁性别：

不限2、大专以上学历，计算机相关专业毕业，有1年以上网页设计工作经验；3、熟悉网站建设流程，有一定网页排版水平，丰富的网站建设经验，熟练、快速的网页制作能力；4、熟悉html、div+css语言、javascript脚本语言；精通photoshop、flash、dreamweaver等软件；懂flash制作优先；5、具有良好的团队合作精神及沟通能力；6、具大型网站相关工作经验优先，美术设计专业优先,某网页设计师招聘职位描述职位要求：

1、负责网站总体页面的DIV+CSS制作，代码优化；2、协助制作网站专题；3、网页广告设计与制作；4、协助进行搜索引擎优化5、网站的日常维护。

6、与策划及程序开发岗位密切交流和配合7、工作细心，认真负责，能承受工作压力，具备团队精神和团队合作精神8、有强烈的事业心，有主人翁精神，有创业意识和精神岗位职责要求：

1、计算机、美术设计等相关专业，有较好的美术功底，色彩感觉丰富准确；2、可熟练切图，手写DIV+CSS，javascript，熟悉Photoshop、Dreamweaver、Flash等、熟悉HTML，能设计出精美网页。

3、能与后台程序人员良好的合作，进行协同开发，熟悉+sqlserver优先；4、有良好沟通和领悟能力，富有团队合作精神、敬业精神及高度的责任感；5、一年以上中、大型网站网页设计、制作经验；有大型电子商务或CMS网站设计制作经验者优先；6、勤奋，学习能力强，有个人站长经验优先；7、能够独立完成网站的规划和静态页面的设计和制作；8、对网站栏目和专题的页面设计、内容视觉表达有较深的理解；9、了解用户体验，能从用户角度出发，设计出界面友好、交互流畅的页面者优先；10、了解最新互动的网站趋势和技术，深入理解人性化交互设计理念；11、熟悉网站制作、设计流程，对网页布局有相当的设计规划能力。

职位描述（广州大型网站网页美工设计师招聘）1.熟练掌握和运用Photoshop,dreamweaver,Flash等流行设计软件;2.熟练掌握和运用CSS+DIV,JavaScript,HTML等;3.较强的美术功底,良好的美工创意设计表现能力,能够准确把握门户网站的整体风格、页面布局、色彩等视觉表现经验;4.二年以上网站策划设计美工经验,完成flash广告、GIF动画广告设计;5.有大型网站美工策划设计经验者优先;6.较强的沟通能力,领悟及思考能力,承受高强度的工作压力。

项目经理（1人）项目经理负责项目管理、组织、协调，对项目资源进行控制，是项目能够按照计划实施，满足项目规定的业务需求。

项目经理对项目的质量、进度和成本负责。

项目经理负责客户关系的管理，也是客户方项目经理的主要对口协调人.并负责对整个项目中的数据库结构及功能程序的设计。

高级程序员（3人）负责外部网站和内部服务系统的程序及多媒体的开发。

HTML制作（1人）负责网页的模板制作及Html搭建。

创意设计总监（1人）从事项目整体上的创意、规划、视觉设计和交互表现的形式的方向把握和设方案的提交，对项目规划设计的质量实施控制、指导与监督。

网站项目主要成员,项目小组成员包括：

项目经理，网页设计，程序员，测试员，编辑/文档等必须人员。

网站建设工作流程,网站规划,1、确定网站主题与名称2、搜集素材3、规划网站栏目设置、目录结构、网站风格（颜色搭配、版面布局、网站Logo等）,规划-设计-开发-发布-维护,网站规划书,1、案例：

xx网站设计方案2、作业：

网站规划书任务二：

1）确定网站主题2）同类网站分析搜索8-10个同类网站（网址、首页截图）并找出这些网站共同点3）画出网站结构图（主要栏目和二级栏目）4）画出首页设计草图3、具体要求一人一份；第三周交，字数不少于600字,网页开发相关技术,前台：

html、css、div、javascript后台：

数据库+asp或者、java等等,