网页设计及工具.ppt
《网页设计及工具.ppt》由会员分享,可在线阅读,更多相关《网页设计及工具.ppt(67页珍藏版)》请在三一办公上搜索。
1、第1章 网页设计及工具,现今,网站已经被越来越多的人所熟识与使用。构成网站的基本元素是网页,当你轻点鼠标,遨游网络世界时,精彩的网页将一副副的呈现于面前,使人们通过网站来发布以及获取相关信息更加地方便。本章将通过相关内容的介绍,来详细讲解网页设计的基础知识,同时认识有关网页设计的常用工具。,1.1 网页设计概述,网站由一个特定人群和组织控制的一组网页的组合。网站是由众多的网页组成的,页面是否精彩直接关系着网站是否受人们的欢迎。本章通过讲解,将向大家展示有关网页设计的基础知识及相关概念。,1.1.1 网页和网站基础知识,网站的建设首先需要从网页开始,网页和网站究竟是怎么一回事呢?接下来让我们通过
2、了解网页和网站的基础知识,来初步认识它们,为网页和网站的建设与制作铺路开拓。,1网页和网站的区别关于网页:简单来说,大家通过浏览器看到的画面就是网页。在互联网上应用最广的是网页浏览,浏览器窗口中显示的一个页面称作一个网页,网页可以包括文字、图片、动画以及视频、音频等内容。网页说具体了是一个HTML文件,浏览器是用来解读这份文件的。如图所示是一网站页面。,关于网站:网站是众多网页集合而成的,不同的用户通过有组织的连接整合一起,为浏览者提供更丰富的信息。网站由域名(domain name又称网址),网站源程序和网站空间三部分构成。网站也是信息服务类企业的代名词,如在新浪、搜狐工作的人,也可以说,他
3、在一家网站工作。如图所示是新浪网站的首页的截图。,2什么是网页设计与制作其实网页就是一个HTML文件,我们所要学习的网页设计与制作,就是学习如何编辑这个文件。多个HTML文件集合而成的内容也就是网站,制作一个网站,也就意味着你需要单独编辑若干个HTML文件。多个HTML文件需要通过“超链接”进行连接。,3主页面一般情况下,一个网站都相应的制作有一个被称作主页(HomePage)的页面,它常常被看作是该网站的大门,起着引导访问者去进入浏览的作用。同时,网站有些什么内容,更新了什么内容等等,都可以通过主页直接被访问者熟知。如图所示是腾讯网的主页。,1.1.2 网站类型,网站有静态和动态之分,根据不
4、同的划分标准,网站被分为好多种类型。接下来我们通过详细的分析,来具体介绍网站的类型,以及在制作网站前,如何选择适合的网站类型。,1网站分类从所用编程语言不同来划分,包括ASP、PHP、JSP、ASP.net从用途不同来划分,包括门户网站、行业网站、娱乐网站从持有者不同来划分,包括个人网站、商业网站、政府网站从商业目的不同来划分,包括营利型网站、非营利型网站,2类型选择将网站按照主体性质不同可分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构网站以及其它类型。按网站模式划分,可分为综合类门户网站、电子商务网站、专业网站等。以下,通过简要介绍网站的模式,分析有关合适网站类
5、型的选择。其具体内容如表所示。,1.1.3 静态网站制作流程,静态网站的制作相对比较简单,主要可以分四个部分来完成。1内容的策划在网站创业前,进行系统的策划是非常必要的。如果要让网站从大量站点中脱颖而出,就必须进行详细而深入的论证。(1)确定需要建立什么样的网站(2)选择什么样的网站内容(3)确定用户群体,便于内容投其所好(4)前期策划决定网站竞争力(5)怎样策划一个好的网站(6)策划需要注意的事项,2图纸的设计设计图纸是在Photoshop或者Fireworks中把你想做的网站用图片的形式画出来。Photoshop的灵活多变以及超级强大的功能,完全可以画出绚烂的网页出来。浏览器的不同像多窗口
6、浏览器有一个标签栏,就算是IE,常用图标也有大小之分。因此具体的尺寸是多少,你需要在实际制作过程中自己灵活掌握。3网页的切割网页的切割还是要交给Photoshop或者Fireworks来完成,这里主要是使用它们的切片工具。这建议大家更多使用Fireworks,因为它专业,也更容易上手。切割网页就是把图片切割成若干个小图片,其中宽度高度什么的都得自己去掌握去学习。,4制作网页网页就是表格加图片加Flash,在完成了内容策划,图纸设计,页面切割之后,我们就可以着手进行网页的制作了。在本书的具体制作的应用实例,我们都通过Dreamweaver CS5来进行相关操作。当然,用于制作网页的工具远远不止这
7、一些。,1.1.4 动态网站制作流程,对于动态网站,因为有脚本语言,所以比较复杂的。同样,要做的工作也就更多了。主要有以下几方面:1整体规划对于整体规划,可以从以下几方面来进行:动态程序语言的确立 网站栏目功能规划 根目录策划,2数据库规划3编写网站后台4编写网站前台5测试及修改阶段6网站的发布,1.2 网页设计工具,“工欲善其事,必先利其器”。制作网页第一件事就是选定一种网页制作软件。从原理上来讲,虽然直接用记事本也能写出网页,但是对网页制作必须具有一定的Html基础,非初学者能及,且效率也很低。用Word也能做出网页,但有许多效果做不出来,且垃圾代码太多,也是不可取的。接下来具体为大家介绍
8、实用的几款网页设计工具。,1.2.1 Dreamweaver CS5简介,Adobe Dreamweaver CS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器,Dreamweaver CS5是第一套针对专业网页设计师特别发展的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。下面针对该软件的一些特性以及相关内容进行简单介绍。,1.新增功能特性关于新增功能的相关内容及其特性如表所示。,2操作界面(1)界面显示在打开Dreamweaver CS5之后,窗口将显示如图所示的内容。通过有针对性的选择“打开最近的项目”、“新建”、“主要功能”这些栏目
9、中的选项,可以进行具体操作。,(2)菜单栏如图所示,是打开Dreamweaver CS5后它的菜单栏。我们可以通过它的各项功能命令,来实现最终的效果与制作。,(3)工具箱如图所示,是打开Dreamweaver CS5后它的工具箱中的内容显示。我们可以通过它的各项功能,来使用工具制作与实现效果。,1.2.2 Flash CS5简介,Flash是用于制作适合网络传输的流媒体动画的软件。Flash动画文件具有体积小、可边下载边播放、多媒体交互性等特点。最大的好消息是,Flash CS5对开发人员更加友好,Flash CS5可以和Flash Builder(即最新版本的Flex Builder)协作来
10、完成项目。如果你使用Flash CS5,那么就可以通过它的新的导出对话框建立一个新的FlashBuilder项目。下面针对该软件的一些特性以及相关内容进行简单介绍。,1功能特点(1)Flash与Dreamweaver、Fireworks具有相同相同风格的快速启动栏、浮动面板、菜单栏、工具箱等;(2)提供了与Fireworks基本相同的绘图工具,因此对于熟悉Fireworks的用户基本可以不用重新学习就可以绘图;(3)利用关键帧和元件等技术可以轻易地制作出各类动画;(4)提供了层技术,使动画的各个组成部分既分又合,方便制作和修改;(5)支持许多图像、声音、视频格式,这些多媒体文件均可以直接导入动
11、画中,从而使Flash动画声像并茂;(6)提供了较完善的ActionScript脚本语言,可以为动画加入交互效果。,2新的功能特性关于新功能的相关内容及其特性如表所示。,3操作界面(1)界面显示在打开Flash CS5之后,窗口将显示如图所示的内容。通过有针对性的选择“从模板创建”、“新建”、“学习”这些栏目中的选项,可以进行具体操作。,(2)菜单栏如图1所示,是打开Flash CS5后它的菜单栏。我们可以通过它的各项功能命令,来实现最终的效果与制作。(3)工具箱如图1所示,是打开Flash CS5后它的工具箱中的内容显示。我们可以通过它的各项功能,来使用工具制作与实现效果。图1 图2,(4)
12、时间轴对于Flash的制作,时间轴起着相当重要的作用,在初始界面中,软件将自动将其打开,以便于用户使用,其界面内容如图所示。,1.2.3 Fireworks CS5简介,Fireworks是网络图形处理软件,集网页图形的创建、编辑、管理于一体,简化了制作网页图形的流程,能生成大小合适质量较好的网页图形。Fireworks是网页原型和网页效果图设计利器,在最新的CS 5版本中相信大家更有体会。下面针对该软件的一些特性以及相关内容进行简单介绍。,1功能特点(1)工作环境与Dreamweaver、Flash和谐统一,具有风格相同的面板、菜单栏、工具箱等。(2)提供了强大的矢量图形和位图图像的编辑功能
13、,可以直接在位图图像和矢量图象之间进行切换,避免在多个应用程序之间转移。(3)可快速创建Web导航,由向导程序自动生成图形和JavaScript代码,并可在Dreamweaver中方便地编辑所生成的图形文件。(4)可进行图形的热区与切片操作,创建复杂的交互动作和GIF动画文件。,2新增功能特性(1)自定义笔刷,Fireworks CS5终于能够像他的老大哥Photoshop那样自定义笔刷样式了,甚至在Fireworks CS5中可以导入PhotoShop和illustrate所定义好的笔刷效果。(2)在Fireworks CS5中,将包含PhotoShop的所有滤镜,让你发挥无限创意的可能!(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 工具

链接地址:https://www.31ppt.com/p-5376275.html