网页设计与制作备课.docx

上传人:b****5 文档编号:7781989 上传时间:2023-01-26 格式:DOCX 页数:15 大小:27.20KB
下载 相关 举报
网页设计与制作备课.docx_第1页
第1页 / 共15页
网页设计与制作备课.docx_第2页
第2页 / 共15页
网页设计与制作备课.docx_第3页
第3页 / 共15页
网页设计与制作备课.docx_第4页
第4页 / 共15页
网页设计与制作备课.docx_第5页
第5页 / 共15页
点击查看更多>>
下载资源
资源描述

网页设计与制作备课.docx

《网页设计与制作备课.docx》由会员分享,可在线阅读,更多相关《网页设计与制作备课.docx(15页珍藏版)》请在冰豆网上搜索。

网页设计与制作备课.docx

网页设计与制作备课

网页设计与制作

移动应用程序客户端的后台支持是什么?

门户网站的意义是什么?

企业:

宣传平台;媒体:

数据库,内容管理系统(CMS)

Myspace和Facebok,隐私保护和用户体验,不以营利为目的。

这一点上,新闻集团作为传统媒体经营者思路跟不上。

(社交网络时代:

SNS引发商务与社会变革(第2版))

目前最常用的网站类型有哪些?

各自特点是什么?

满足用户什么需求?

搜索引擎:

新闻门户:

社交网络:

电子商务:

其它:

互联网服务,市场都有什么?

用户需要什么?

如何提供独一无二的服务?

网络竞争是创新的竞争,而不是复制和改良。

人的需求都有什么?

如何转移到网上?

研究方法的问题:

调查的缺陷和优势,小组研究和深度访谈的优势,访谈如何定位(关注被访谈者表面的答案,还是,探究内心世界。

用户往往自己也不知道自己的真实需求和想法是什么。

比如对新闻的需求,涉及到安全感,认知平衡,社交需求等,往往是被访谈者自己意识不到的。

传播-报刊与网络-课程综述:

课程内容:

网站策划(调查、分析、策划),设计并制作网页(HTML+CSS)

目的:

理解网站和媒介融合,理解标记语言;涉及领域包括网络编辑、新媒体、数字出版。

印刷媒体的数字化,也就是印刷媒体的网络化和多媒体化,而所有数字化的平面媒体在制作过程中本质上都是用标记语言来完成的。

多学一点,多理解一点,但更需要自学,培养自学的能力。

这个行业变化很快,未来需要什么不确定,一直在变化。

希望可以了解媒介产业和信息产业的发展趋势,随时更新自己的认知。

最重要的技能是学习能力。

1.网站建设:

网站的建设包括:

网站项目分析策划,网站用户界面的创意设计,网站用户界面的制作(网页设计与制作),网站的后台开发和网站维护,网站内容更新和管理。

本课程主要了解的是除网站后台开发和网站维护之外的内容,重点是网站项目的分析和策划、网站用户界面的设计和制作。

分析一个例子:

为什么做一个网站?

都要考虑什么因素?

要分成哪些步骤?

要做成什么样子的?

如何保证网站的成功?

项目分析:

一个网站是一个项目,要花钱的,要投入人力物力的,要实现特定的目标的。

是商业项目(电子商务?

门户?

专业网站?

)?

还是单位的项目(企业门户?

学校门户?

政府门户?

)?

还是个人爱好(博客?

论坛?

个人爱好?

)?

建设网站的第一步:

网站分析和策划

一个合格的网站策划应该知道

Google:

网站策划,类似广告策划文档、公关活动文档、项目申请文档等等的

建设网站的第二步:

网站模板(用户界面)的设计和制作

建设网站的第三步:

网站后台程序的开发、服务器架设

建设网站的第四步:

网站后台管理,内容更新,内容管理,网站维护

此外还包括:

宣传,营销,市场,客户等

网站策划都涉及到哪些内容?

分为哪些阶段?

1.今天是个什么样的时代:

理解互联网的发展和移动互联网的发展,理解人们使用数字设备及互联网的习惯和需求的转变,提出大致的互联网项目设想。

(大众,还是,小众?

哪部分人的需求?

认真考虑可行性呢?

2.对类似网站的数据收集和分析(都包括哪些数据?

哪些方面?

),分析市场竞争,SWOT分析。

(互联网项目的关键在于创新)

3.用户使用习惯和用户需求分析(资料,访谈,调查)

4.网站盈利模式策划(网站盈利模式有多重要?

先考虑用户还是先考虑盈利?

在什么阶段考虑盈利?

如何平衡盈利和用户体验?

Facebook的前途在哪里?

猜想:

新一代互联网的革命性在于,颠覆了传统商业理念,始终不以营利为目标,在以用户体验为唯一信条的条件下实现生存和盈利,利润率非常低。

#以上四步为准备工作,也许有点复杂和多虑,但是主要是针对广告专业而言,希望可以培养尊重用户和市场的习惯,考证的习惯,科学严谨的习惯。

#

5.网站整体策划分析:

6.网站风格策划和信息组织:

风格定位,信息组织(网站架构),框架构建,导航

7.网站前台策划与设计:

网站视觉设计,布局,色彩,图片,排版,表单,PS设计制作页面。

8.了解:

网站后台技术策划,网站测试,域名和空间申请,网站发布,网站评价和后期维护,利用CMS建站

9.网站推广:

一开始就应该考虑的问题

10.网站综合策划实例:

上网搜索文档,各不相同,类似商业计划书

第一周:

课程概述,发表对互联网发展的看法和观点,网站策划的观点,如何做好策划?

作业:

查资料,了解互联网发展状况,寻找思路

第二周:

软硬件介绍,HTML和CSS介绍

第四周:

网站整体分析策划,网站开发生命周期,网站策划,网站策划书实例

第五周:

网站整体分析策划,网站需求分析,市场定位,组织目标,目标受众,受众目标

第六周:

网站约束条件,网站内容

第七周:

网站风格策划和信息组织,风格定位,信息组织(网站架构)

第八周:

网站风格策划和信息组织,框架构建,导航

第九周-第十周:

网站前台策划与设计:

网站视觉设计,布局,色彩,图片,排版,表单,PS设计制作页面。

第十一周:

HTML+DW第十二周:

HTML

第十三周:

CSS第十三周:

CSS

第十四周:

网页制作

第十五周:

网页制作

第十六周:

网站后台技术策划,网站测试,域名和空间申请,网站发布,网站评价和后期维护,利用CMS建站,网站推广

第十七周:

课堂操作

第十八周:

课堂测验

课堂教材:

网站策划师成长之路,机械工业出版社,39元

W3school,

Web视觉设计,PennyMcintire,机械工业出版社,56元

CSS设计彻底研究,前沿科技温谦,人民邮电出版社,69元

视频教程和网站:

硅谷动力网,

太平洋电脑网:

设计中国,

蓝色理想,

网页设计联盟,

CSS禅意花园,

网站策划书:

 

2.网站分析(网站策划包含更多的知识)

2.1网站开发生命周期

系统开发的瀑布模型,理论上要求在每一个阶段完成以后才能开始下一个阶段。

但实际上,网站构建是一个循环、反复的过程。

1.构建阶段开始之前,网站的大部分整体分析和设计工作已经完成。

但是构建和测试阶段还包括独立的分析与设计阶段的任务。

这是因为每个页面都有独特需求,这些要求通常在页面构建按时才能确定下来。

因此,许多单个页面的分析和设计工作会顺延到构建和测试阶段。

其结果是,每个页面会有自己的小生命周期,有自己的分析、设计、构建和测试阶段。

建立网站的过程是循环递归的,而非严格连续的。

Web开发项目中六个步骤的瀑布模型。

2.网站构建的循环本质同样意味着,有时需要重新访问我们曾经以为已经完成的页面。

其中一个页面的改变可能导致之前几个页面的改变,比如购物网站中购物车系统的页面。

例如:

系统开发生命周期的瀑布模型:

香洲家园策划方案和软硬件明细文档

阶段

目的

主要工具

可行性

决定是否需要网站,或现有网站是否需要修改。

如果“是”,估算大致的成本和效益。

事实搜集结束,比如访问组织的管理层以及被提议的访问者。

成本-效益分析,确定效益与相关成本相比是否值得。

分析

确定整个网站的目标,目标受众,以及建议内容和功能性。

简而言之,决定需要什么。

事实搜集技术;

成本-效益分析;

网站初步构架模型。

设计

设计网站,满足分析阶段确定的必要条件。

简而言之,创建“方式”,提供分析阶段确定的“内容”。

网站构架模型;

用HTML、CSS、JavaScript和集成开发环境作网站原型开发;

图像编辑器创建网站图形;

构建与测试

建立并测试网站。

(不要将构建和测试过程分为两个独立的阶段。

因为在写下最初几行代码时就应该开始进行测试。

只有这样,才能及早发现问题。

而不是在于在最后整个网站快要建好的时候再作重大修改,以纠正那些问题。

用HTML、CSS、JavaScript和集成开发环境作网站原型开发;

图像编辑器创建网站图形;

可访问性验证器;

预期访问者进行在线测试。

投入运行

上传网站至服务器,进行最后测试,并投入运行。

FTP或类似于FTP的工具。

维护

根据系统的需要,对系统进行修复、更新或大修。

前面阶段中提到的工具。

原型开发/快速应用开发:

整合各个阶段,更紧密地联系在一起。

网站分析过程(分析和设计阶段)包括:

书20-38页,为本书以后各章的入门。

1.内容分析:

内容为王,什么样的内容,可以让访问者流量往返、再次访问。

2.网站架构分析:

如同图书馆的分类系统,对网站信息进行分类、归类、组织的信息架构系统,如分类、归类、导航、布局,使得信息条理清楚,访问者容易找到他们需要的信息。

3.可用性分析Usability:

以用户为中心,善待访问者,让访问者容易地做到他们想做的事,找到他们想要的东西。

可用性原则:

1。

不证自明,网站必须易于使用。

一致、可预见的组织、视觉呈现和交互风格,缩短访问者学习使用网站的时间,从而提高访问者的效率。

2。

速度,尽量不影响访问者的速度,理想的情况是,访问者点击次数不超过三次,就可以进入目标页面。

尝试一下一篇文章分页不分页的区别。

3。

反馈,加入访问者必须等待,应该对访问者给予提示。

4。

精确性,网站不应该有锻链、丢失的图像、JS错误,或明显无法正常运行的其他元素。

要对多个浏览器测试此类问题。

5。

网站分析和设计的一个基本主题就是可用性。

布局、配色等都涉及到可用性的问题。

可用性测试:

在网站投入运行之前,必须用真实用户对网站进行大量测试。

通过测试发现问题。

在项目进行过程中,可用性测试究竟有多复杂呢?

代价有多大呢?

多耗时呢?

测试是复杂的工作。

4.视觉设计:

网站美学包含了所有具有视觉传达特征的东西,色彩、布局、图形、字体、输入表单、导航。

视觉设计应规定贯穿于整个网站的视觉同一性和视觉一致性。

品牌:

视觉设计塑造品牌,比如一致的logo,

注意:

可用性和视觉设计之间的冲突与和谐。

网站的媒介特性,美学上的需求。

5.交互设计:

交互指需要访问者做出某种动作,如点击链接、填写表单。

成功的交互设计对于访问者而言,就像透明的、看不见的,界面自然、直观,以至于用户根本察觉不到。

6.可访问性:

也叫通用设计,即供所有用户进行访问,而不管用户是否存在生理上的差异。

可访问准则:

第36页。

以上内容分布在本书后续各章中:

网站分析:

内容,架构导航、页面布局:

以上都包括

色彩、图形、排版:

视觉、可用性、交互、可访问性

表单:

交互、可用性、可访问性、视觉设计

2.2网站分析

“从来没有足够的时间把事情做正确,但是,似乎总是有时间重新做一次。

分析,就是在着手建立以前,决定到底需要什么的过程。

在开始做以前,要向所有的利益相关者(经理、项目技术人员以及潜在的网站访问者),咨询大量的问题。

在项目初期阶段要进行网站整体分析,同时,在每个独立的页面还要经历小生命周期,即,在项目进行过程中,要进行具体页面分析。

分析与生命周期中的其他任务紧密融合,而非完全独立存在的阶段。

此外,分析还是个反复的过程。

内容和设计的变化必须融入到整个生命周期中。

网站整体分析包括,在设计和构建一个页面前,对网站的思考和计划。

他基本确定了,网站上将要涵盖的内容,而之后的视觉设计阶段则确定了网站上元素的视觉呈现方式。

网站整体分析的六个主要任务:

明确网站的组织目标;

确定目标受众,网站的潜在访问者;

确定访问者的目的;

决定网站约束条件;

决定网站内容;

分析网站架构。

1).明确网站组织目标

网站的任务是什么?

网站的宗旨是什么?

网站的目标是什么?

如:

拓展销路;销售商品;树立产品品牌而不销售产品;报道政治问题;报道社会新闻;软件下载;

明确基本目标后,要确定哪些是必须实现的,哪些是可以选择的

确定项目范围,在任何情况下,都要明确定义项目范围,避免在项目进行过程中范围的无限制蔓延。

最阴险的话:

“哦,我们顺便做了......”

根据轻重缓急,对目标进行排序划分的任务说明,满足组织内各部门协调的需求。

对于商业网站,其组织目标的三种基本分类:

(记住,大多数网站都是在“销售”某样东西,如果网站不涉及金钱,那么他就是“销售”观点或信息,或者服务。

——注意传播功能和效果分析。

增加利润:

大部分电子商务站点归属于此类。

设计网站以提供信息和气氛,并以此说服访问者购买产品或者服务。

要用最好的方式展示产品和服务,让访问者相信我们的网站是最好的,是可靠的,可以信赖的,服务是最便捷的。

传播信息或观点:

不是销售,而是为了告知、教育、劝说或者娱乐。

如:

企业网站、新闻、音乐。

这些网站的目的不是销售,但并非不涉及金钱,比如广告,募捐,促销。

作为标准商业应用程序的用户界面:

任何与人进行交流的计算机系统都需要,用户界面(userinterface,接收用户输入,并显示系统输出的屏幕显示。

)每次我们访问网站,就是在于网站的用户界面或者前端进行交流。

传统的计算机商业应用程序,使用的都是图形用户界面(GUI)。

这种界面内置在实际处理事务的应用软件中,通常连同应用程序的其它部分一起,由程序员手动建立。

浏览器用户界面(BUI,browseruserinterface)则是通过浏览器和用户进行交流,而此时后端的商业应用程序则使用java、C++等标准编程语言与地层数据库进行交互。

将来,web技术运用最广泛的,可能就是在BUI方面。

因为,简单,易用,小巧,灵活,无需用户下载、安装和维护。

(BBS,网游,网络银行等)

2).确定目标受众

确定收入、年龄、教育程度、家庭状况、健康状况等目标受众的人口统计数据。

他们存在哪些问题?

什么能够吸引他们?

他们需要什么?

用于定义目标受众的分类特征:

生理人口统计数据——性别、年龄段、健康状况。

注意男女性别的不同爱好,不同年龄段的不同爱好,因性别、年龄、健康状况而导致的电脑使用状况的差异。

文化人口统计数据——经济状况、职业、教育水平、社会群体、国籍、语言、价值观、宗教信仰等。

电脑使用经验——电脑技术知识、使用模式、喜爱的网站、上网模式及频率。

可发现性——访问者能从哪里发现你的网站?

搜索引擎,广告,交换链接,印刷材料,朋友推荐,电视广告。

电脑设备状况——操作系统、系统速度、电源、连接速度。

访问频率——经常,偶尔

访问场所——家庭、公司、公共场所(决定声音的设定)

竞争对手——你的访问者还会光顾哪些网站?

了解竞争对手的网站,以此来评估哪些是影响用户体验的障碍。

内部用户,还是外部用户——目标受众是内部的,还是外部的?

安全性问题需要考虑。

设计期望——访问者期望你的网站是什么样子?

在为你的网站刻画一个或几个目标受众的特点时,越具体越形象越好,可以创造一个角色,赋予其名字、个性以及自我介绍。

在设计网站时脑海中想着这些角色,想着他们希望看到什么,怎样才能使他们更加轻松的达到目标。

3).确定目标受众的目标

访问者访问网站的目标是希望网站能够帮助他实现目标,如果比较难以实现,则会放弃这个网站,去寻找其它网站。

因此网站必须确定访问者的需求,并全力使这些任务的完成尽可能的容易。

我们通过得到现有顾客的反馈、访问潜在访问者,分析竞争网站等方式,定义或确定网站访问者的目标。

设计模式:

标准化的应用,比如购物网站的购物车,基于标签的水平导航和垂直菜单导航。

同时也要注意专利问题。

4).决定网站约束条件

网站的约束条件(constraints)和必要条件(requirements)。

比如:

预算和时间进度必须满足。

理想的状况下,在开发网站的过程中,有三个奋斗目标:

完成品的价值,应该与其产生的成本对应成比例;

网站应该在一定的时间框架内完成;

网站应该是高质量的;

通常很难同时实现三个目标。

除了预算和进度,还有其他方面的约束,包括:

法律约束:

隐私、机密、版权等

操作限制:

访问有几个分立的法人单位进行更新的数据库时,会遇到操作限制;

技术约束:

开发团队的技术能力限制

设计约束:

logo会限制颜色

其他在当前条件下无法实现的设想。

5).决定网站的内容

网站需要有价值的内容。

但内容不完全由设计和建设人员决定。

设计者通常无需为网站提供内容。

如果提供,记得以下几点:

网站采用的写作风格,要与网站本身的风格相符;

仔细检查所有内容,纠正语法和拼写错误;

考虑使用描述性,用一句话左右的结束语,简练的总结网站是做什么的(口号);

注意版权;

以清晰、简洁、生动形象的写作风格为目标。

取决于网站本身的风格

如何创建牛皮糖一样的网站,保持网站对用户的“黏度”:

6).定义网站架构

信息架构(informationarchitecture)指的是,在任何一个情境中,对数据的组织(organization)、归类(labeling)以及数据演示(presentationofdata),比如,企事业通讯录中的图形结构,烹饪书中食谱的版式,图书馆卡片目录的组织。

信息架构的主要任务是,对散乱的信息进行分类归类,以及组织。

人们可以理解这种框架,并利用他检索想要的信息。

信息架构的关键在于,对复杂信息的掌控。

也就是说,通过使复杂信息结构可视化,从而达到便于使用的目的。

A.网站架构,是信息架构与交互设计的一种模糊结合。

包括:

隐藏在网站中的内容,或信息片断;

单个信息片断与其它信息片断之间的关系。

也就是,将这些信息片断,以访问者能够直观理解的方式联系在一起;

导航,访问者用其穿越逻辑结构。

通俗地说,主要就是网站的信息组织和导航。

网站架构将整个网站结合在一起。

因为网站要随发展而发展,所以,网站架构必须具有可升级性和灵活性。

网站架构是大脑对于信息的观察,而视觉设计,是眼睛对信息的观察。

首先定义网站架构,而后才是有关于视觉设计的设计和实施。

也就是说,网站架构是视觉元素依靠的框架。

网站导航对于访问者越是简单、明显、一流,而网站架构的构建越是凌乱、复杂、不明显、困难。

我们作为设计者的目的,就是要使其简单化。

这样,访问者就不会看到或感到复杂。

我们付出大量的努力、技能,对于人类需求的理解,以及常识,把复杂转换为简单。

所有这一切,以一种高度满意的形式,为我们的访问者展示出简化过的结构。

导航对于用户越简单直接,我们在构建过程中要做的工作可能越多。

(学院网站,第一次,先做界面导航,则网站架构处理起来很难,且混乱。

第二次,先设计结构,再做界面导航,反复几次,效果有所改善。

这只是一个小型网站。

首先从对网站上的内容做归类和逻辑分类来开始网站架构过程。

B.归类:

类似于购物网站左边的分类菜单。

通过标签给网站分类。

网站归类,不仅包括导航标签,比如菜单上的链接,还包括页面标题、header,以及用于搜索和浏览的关键字。

所有这些标签都是网站架构的组成部分,同时这些标签有助于用户找到他们所需要的信息。

设计标签的过程,首先做一个内容清单,然后就每一个能够想象出来的可能标签进行集体讨论。

为了得到最初的一系列标签,可以采取以下办法:

从网站内容,尤其是从标题和子标题中摘选出有意义的标签;

仔细阅读竞争者的网站,从中获得启发;

参考一些行业拥有的在线主题词表,比如计算机、教育、医学领域等;

从网站的运行日志中找出访问者在现有网站上用来寻找的搜索关键词。

下一步,选出首选标签。

在集中的一系列标签上,从中选出描述最简练准确,而且最为访问者熟悉的词语,作为首选标签。

在确定首选标签后,让潜在的访问者测试他们。

让访问者说出初次看到这些标签时的看法。

访问者对标签的理解应该与设计者高度统一,否则需要修改。

大多数访问者在上网时不愿意仔细阅读。

相反,他们浏览标签(导航,标题,字标题),寻找自己感兴趣的内容。

如果要访问者感兴趣,最好使用清晰、有趣、贴切的标签。

关键在于,在符合网站架构的同时,标签应该有助于访问者找到他们需要的内容,而不是给他们设置障碍。

左边的选机中心列出所有的关于手机的标签。

而右边按国别和品牌划分的列表属于主题分类。

C.主题分类

分类就是发现信息间的模式与关系,而他又是创建直观的、分层导航系统的第一步。

然而,分类始终是不明显的。

有些标签可以归到杂项,似乎不属于任何一个分类,还有一些标签可能属于多个分类。

而有些标签分类范围太大,不得不将其再划分子类和第三级分类。

主体分类实现网站的导航。

后面专门介绍。

D.为开发者组织网站结构

从开发者的角度对网站结构的规划进行思考,考虑得越多,今后重组网站结构的可能性就越低。

目录与文件名的事后重组,不仅浪费时间,而且有破坏链接的风险。

创建网站结构涉及,组织服务器上的文件和目录,为目录和文件建立标准的命名规范,以及用相对寻址代替绝对寻址。

组织服务器上的文件和目录:

只要网站不是只有几个页面,把所有文件放到同一个文件夹下就会变得难以管理。

对应精心设计的网站架构,应该有目录结构。

对于一个大型网站,一个首页下面有几个主页,可以给每一个主页创建一个主目录。

同时给整个网站可重复使用的元素,如CSS、JavaScript和图像创建高级目录也是一种标准做法。

建立标准命名规范:

注意字母的大小写,网站中访问资源不区分大小写,大小写的视觉作用应统一规范;

数字作为编号,规范应统一;

前缀的使用;

下划线的使用,替代空格;

相对寻址和绝对寻址:

相对目录;

../../images/banner.jpg,../表示上一级目录

绝对寻址的问题,你如果移动网站,改变了地址,所有的链接会断掉。

2.3网站策划内容:

(非标准,根据具体情况具体要求有不同内容,侧重点也不同)

一个合格的网站策划应该知道的!

网站策划书:

第一步,立项,可

展开阅读全文
相关搜索

当前位置:首页 > 幼儿教育 > 家庭教育

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1