《《WEB前端开发实用案例教程》单元1 个人博客主页—Axure原型设计与网站开发入门》由会员分享，可在线阅读，更多相关《《WEB前端开发实用案例教程》单元1 个人博客主页—Axure原型设计与网站开发入门（48页珍藏版）》请在金锄头文库上搜索。
1、WEB前端开发实用案例教程,第一单元个人博客主页Axure原型设计与网站开发入门,随着互联网的普及，网站是信息传播工具，人们通过它来发布自己想要公开的资讯及提供相关的网络服务。许多公司都有自己的网站，用于宣传公司或发布产品信息，个人网站和博客已经不再神秘，越来越多的网友想拥有自己的一个网站，或为兴趣聚集一帮至交好友，网站应该怎么建立呢？先用Axure原型设计,以用户为中心的思想贯穿整个产品项目，快速构建出产品原型，也就是产品项目前的简单框架，然后再由网站编辑程序员，应用网站开发流程来完成网站建设。教学目标：掌握Axure原型工具安装、注册、汉化和工作界面的介绍了解Dreamweaver工作环境
2、及使用方法，能够创建站点并新建网页,目录页/Contents,01,任务1用Axure站点地图管理页面Axure原型设计概述,02,任务2个人简历页面网站环境和本地站点创建,03,任务3心情日记开发工具介绍及网站开发总体讲解,知识储备,01,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,1.认识AxureAxure是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）、产品经理（PM）。Axure能快速的进行原型设计，让相关的人员进行体验
3、和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。2.Axure与网站页面的关系根据项目的大小、类型、工期及用户的需求来选择设计原型，描述清楚系统的功能结构和基本交互效果。为方便项目组人员沟通交流，可以采用低保真原型设计；当需要演示系统交互效果或者展示设计效果，可以采用高保真原型设计。最后根据用户确认的原型设计，演示效果，项目组人员进行网站的编写，将原型设计效果，实现为网站的页面效果。,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,3.AxureRP工具安装、注册、汉化和软件界面1）AxureRP安装（1）双击AxureRP-Pro-Setup.
4、exe文件，如图1-1所示的AxureRP7.0软件图标，打开安装初始化界面，由于平言的兼容性问题会出现乱码，但并不影响软件的安装和使用，如图1-2所示的AxureRP7.0开始安装。图1-1AxureRP7.0软件图标图1-2AxureRP7.0开始安装,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,（2）在“AxureRPPro7.0-InstallAwareWizard”的“LicenseAgreement”界面中勾选“IAgree”复选框，同意Axure安装协议，单击“Next”按钮继续安装，如图1-3所示的同意安装协议。图1-3同意安装协议（3）在“Axure
5、RPPro7.0-InstallAwareWizard”的“SelectDestination”界面中选择安装存放路径，可以使用默认的安装路径，也可以自定义安装路径，之后单击“Next”按钮进行下一步，如图1-4所示的选择安装路径。图1-4选择安装路径,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,（4）在“AxureRPPro7.0-InstallAwareWizard”的“ProgramShortcuts”界面中有两个单选按钮，选择“AllUsers”代表所有用户都可以使用，“CurrentUserOnly”代表只有自己可以使用，选择第一个单选按钮，单击“Next”
6、按钮继续安装，如图1-5所示的用户使用权限。图1-5用户使用权限（5）一直单击“Next”按钮，最后单击“Finish”按钮完成安装，如图1-6所示的完成安装。图1-6完成安装,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,2）AxureRP汉化Windows版本汉化方法：将下载的lang文件夹复制到Axure安装目录。最终lang包所在的目录位置如下：c：/ProgramFiles/Axure/AxureRPPro7.0/lang/default（32位系统），c：/ProgramFiles（x86）/Axure/AxureRPPro7.0/lang/default（
7、64位系统）。Mac版汉化方法：汉化前需启动一次Mac下的英文版，然后再汉化，否则汉化后启动会显示程序已损坏。Mac版的Axure输入注册码需要在汉化前的英文界面下输入，汉化后再输入会导致软件崩溃。（1）打开“应用程序”目录，找到AxureRPPro7.0。（2）在上面右键单击“显示包内容”，然后依次进入找到Resources目录。（3）将下载到lang文件夹（包含其中的default文件）复制到这个目录下。最终汉化包所在的目录位置如下：“/Applications/AxureRPPro7.0.app/Contents/Resources/lang/default”,任务1用Axure站点地图
8、管理页面Axure原型设计概述【知识储备】,3）AxureRP注册（1）打开AxureRPPro7.0，如图1-7所示的欢迎使用软件界面，点击“输入版权密码“。图1-7欢迎使用软件界面（2）在如图1-8所示的授权管理页面中，输入授权用户和授权密钥，点击提交，注册完成。图1-8授权管理页面,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,4）软件界面AxureRPPro7.0安装、汉化、注册完成后，下面开始认识软件界面，软件界面大致分为以下各模块，如图1-9所示为AxureRPPro7.0软件主界面。图1-9AxureRPPro7.0软件主界面（1）菜单栏：和大部分的软件界
9、面一样，都是一些常规的文件、编辑、视图等。（2）工具栏：是页面进行编辑的一些快捷操作，主要有字体设置大小设置、页面显示大小和Axure本身自带的一些快捷操作等。（3）站点地图：呈树状结构、可以添加、删除页面、也可以对设计中的页面进行重命名操作。（4）部件区域：组件集中地带为矩形组件、图片组件、动态面板组件等，使用方式是直接拖动部件到页面编辑区域。（5）母版区域：共用、复用。（6）页面编辑区域：拖动相关的部件进行线框图编辑和交互具体的实施。（7）页面交互区域（8）部件交互区域：组件的交互、组件的注释编辑。（9）部件属性区域：组件的属性、样式编辑。（10）部件管理区域,任务1用Axure站点地图管
10、理页面Axure原型设计概述【知识储备】,4.用Axure站点地图管理页面站点地图区域位于软件界面的左上方，是用来管理页面和显示页面的区域，如图1-10所示的用站点地图管理页面层级。图1-10用站点地图管理页面层级,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,1）站点地图的结构和功能站点地图由两部分组成。上半部分是站点地图的一些操作按钮，称为功能条或者功能菜单，下半部分是站点地图的页面，呈现树状结构，与Windows文件存放目录结构相一致，通过父与子、兄弟和兄弟的页面关系，将要设计的产品页面整合起来，形成产品的文档关系，如下图1-11所示的站点地图的结构和功能。图1-
11、11站点地图的结构和功能,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,2）站点地图的功能使用站点地图的功能使用包括两方面内容，分别是功能条的使用和页面管理。图标类型选项可以更改页面的图标类型，包括页面和流程图，图标的更改并不会影响页面的内容，它仅仅是更改了一个图标，便于对页面的管理。通过生成流程图菜单选项，可以生成纵向或者横向的流程图，如选中Home页面，然后单击鼠标右键，如图1-12所示的生成流程图页面，选择纵向，自动生成如图1-13所示的纵向流程图。,图1-12生成流程图页面,任务1用Axure站点地图管理页面Axure原型设计概述【知识储备】,2）站点地图的功能
12、使用,图1-13纵向流程图,从流程图可以看出软件的功能从属关系，也可以生成横向的流程图，可以根据个人需要来选择生成流程图的类型。在站点地图中，可以通过功能条来管理页面，也可以通过右键菜单选项来管理页面。功能是一致的，可根据自己的习惯来选择。,素材收集,02,（实例文字内容见本章素材文件夹）,任务实施,03,任务1用Axure站点地图管理页面Axure原型设计概述【任务实施】,我们将要做个人博客网站的栏目规划案例，通过学习制作软件原型设计，进一步理解站点地图。软件原型功能划分和导航菜单一致，在制作原型时，按导航菜单建立站点地图的栏目结构。案例划分的一级菜单有，首页、个人简历页面、学生简历页面、博
13、客内容页面；其中博客内容页面包含二级菜单为心情日记、风景日记。下面打开Axure软件，开始原型设计。1.将Home页面重新命名为“个人博客网站”，在“个人博客网站”下面建立4个页面，分别命名为“首页”、“个人简历页面”、“学生简历页面”、“博客内容页面”，如图1-14所示的个人博客网站菜单。,图1-14个人博客网站菜单,任务1用Axure站点地图管理页面Axure原型设计概述【任务实施】,2.在“博客内容页面”新增2个子页面，分别命名为“心情日记”和“风景日记”，如图1-15所示的博客内容页面的二级菜单。个人博客网站结构建立完成，根据结构生成流程图，结构及从属关系是如图1-16所示的个人博客网
14、站流程图。图1-15博客内容页面的二级菜单,图1-16个人博客网站流程图,知识归纳,04,通过案例的学习，学会规划软件的栏目结构或者功能模块，在制作原型时，先规划出栏目结构，方便我们进行软件的原型设计，可以避免在站点地图上随意地新建页面，导致结构混乱、设计思路不清晰。根据清晰的站点地图，我们可以逐一进行原型设计了。,目录页/Contents,01,任务1用Axure站点地图管理页面Axure原型设计概述,02,任务2个人简历页面网站环境和本地站点创建,03,任务3心情日记开发工具介绍及网站开发总体讲解,知识储备,01,任务2个人简历页面网站环境和本地站点创建【知识储备】,1.什么是网页和网站网
15、页其实就是一个文件，如图1-17所示的一个网页。它可以承载网页制作者留下的各种信息，然后通过互联网传输并使用浏览器显示成页面，让不同的用户浏览。图1-17一个网页,任务2个人简历页面网站环境和本地站点创建【知识储备】,网页中可以包含文字、图像、表单、表格、动画、视频、超链接等各种元素。网页按其表现形式可以分为静态网页和动态网页两种。静态网页实际上是图文结构的页面，浏览者可以阅读页面中的信息，网页中可以包括GIF图片、Flash动画、视频和脚本程序等，但是浏览器与服务器端不发生交互操作。动态网页的“动”指“交互性”，它指浏览器端和服务器端可以进行交互操作，大部分信息存储在服务器端的数据库中，根据
16、浏览者的请求从服务器端的数据库中取出数据，传送到浏览器端，然后显示出来。网站其实就是许多网页的全集。许多网页系统的链接起来集合就组成了网站。通过超链接将网站中多个网页建立联系，形成一个主题鲜明、风格一致的web站点。网站中的网页结构性较强，组织比较严密。通常，网站都有一个主页，又叫首页。主页文件基本名一般为index或default，如index.html、default.html、index.asp、index.aspx等。,任务2个人简历页面网站环境和本地站点创建【知识储备】,2.网页的工作原理网站发布到Web服务器后，浏览者通过浏览器向Web服务器发出请求，Web服务器则根据请求，把浏览者所访问的网页传送到客户端，并显示在浏览器中。一个网页的工作过程，可以归纳为：1）用户在浏览器中输入网页的网址，例如：。2）客户端的访问请求被发送给网站所在的Web服务器，服务器查找对应的网页。3）Web将服务器网页发送给客户端。4）客户端收到返回网页后在浏览器中显示出来。3.网站需求分析通过了解网页，网站的元素构成，下面
