第1章网页设计及工具Word格式.docx
- 文档编号:18791498
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:25
- 大小:2.21MB
第1章网页设计及工具Word格式.docx
《第1章网页设计及工具Word格式.docx》由会员分享,可在线阅读,更多相关《第1章网页设计及工具Word格式.docx(25页珍藏版)》请在冰豆网上搜索。
多个HTML文件集合而成的内容也就是网站,制作一个网站,也就意味着你需要单独编辑若干个HTML文件。
多个HTML文件需要通过“超链接”进行连接。
3.主页面
一般情况下,一个网站都相应地制作有一个被称作主页(HomePage)的页面,它常常被看作是该网站的大门,起着引导访问者去进入浏览的作用。
同时,网站有些什么内容,更新了什么内容等,都可以通过主页直接被访问者了解。
如图1.3所示是腾讯网的主页。
图1.3腾讯网主页面
1.1.2网站类型
网站有静态和动态之分,根据不同的划分标准,网站被分为好多种类型。
接下来我们通过详细的分析来具体介绍网站的类型,以及在制作网站前如何选择适合的网站类型。
1.网站分类
从所用编程语言不同来划分,网站包括ASP、PHP、JSP、……
掌握一种或者多种网站编程语言,是每个站长都想要完成的,可是掌握一门语言,说起来容易,做起来其实还是有些许困难的。
(1)ASP是最快入门的脚本,安全性太差是它的缺点,其实这也不能怪ASP,因为现在的海洋木马是很难防范的。
(2)PHP的运行效率最高,最大优势是省钱,从操作系统到数据库到脚本,都是免费的,这些正符合了国内对这方面的需要。
因为国外的服务器软件是需要正版的,用ASP要装正版的Windows,PHP的运行环境LINUX+apache+MYSQL免费,LINUX系统相当稳定,MYSQL也比ACCESS好用,PHP唯一的麻烦就是代码不是很好理解,还有很多正则表达式。
但作为网络开发人员来说,确实是一门值得掌握的语言。
(3)可以用VB语言写也可以用C#语言写,根据个人爱好,的开发平台十分强大,VS2005布局可以采用拖拽式,跟Windows平台下的快速开发工具很像,开发机需要装NET框架,我认为确实是ASP的接班人,安全性能也比ASP好,开发比ASP快,稳定性也比ASP好。
现在的当当网、携程网就是采用此架构,鱼塘中的很多小网络公司的开发语言也将会从ASP转到。
从用途不同来划分,包括门户网站、行业网站、娱乐网站等
(1)门户网站,是指通向某类综合性因特网信息资源并提供有关信息服务的应用系统。
门户网站最初提供搜索服务、目录服务,后来由于市场竞争日益激烈,门户网站不得不快速地拓展各种新的业务类型,希望通过门类众多的业务来吸引和留住因特网用户,以至于目前门户网站的业务包罗万象,成为网络世界的“百货商场”或“网络超市”。
如图1.4所示是一综合门户网站——搜狐的截图。
图1.4门户网站载图
(2)行业网站,行业网站即所谓行业门户。
可以理解为“门+户+路”三者的集合体,即包含为更多行业企业设计服务的大门,丰富的资讯信息以及强大的搜索引擎。
“门”,即为更多的行业及企业提供服务的大门。
如图1.5所示是关于行业门户网站——“行业中国”中搜的截图。
(3)娱乐网站,是具有让人追求快乐、缓解压力的。
娱乐网应该具有影视娱乐、八卦新闻、明星娱乐、戏剧等娱乐性服务,还应该包括明星、电影、电视、音乐、戏剧、演出等资讯以及相关实用信息。
如图1.6所示是一娱乐网站的一部分截图。
图1.5行业门户——“行业中国”网站载图
图1.6娱乐网站截图
从持有者不同来划分,包括个人网站、商业网站、政府网站……
(1)个人网站是指因特网上一块固定的面向全世界发布消息的地方,个人网站由域名(也就是网站地址)、程序和网站空间构成,通常包括主页和其他具有超链接文件的页面。
网站是一种通信工具,就像布告栏一样,人们可以通过网站来发布自己想要公开的资讯,或者利用网站来提供相关的网络服务。
个人网站是指个人或团体因某种兴趣、拥有某种专业技术、提供某种服务或把自己的作品、商品展示销售而制作的具有独立空间域名的网站。
如图1.7所示即是一个人网站。
图1.7个人网站示意图
(2)商业网站首先要考虑网站的定位,以确定其功能和规模,提出基本需求。
里面要考虑的包括网站风格、域名、logo、空间大小、广告位、页面数量、数据库结构、维护需求、人力成本等内容,如果要自己制作的话应多参考别人的东西,如果只是做个策划、具体交给别人做,那就主要确定网站的定位和基本风格要求,与技术人员做好沟通。
如图1.8所示是一商业网站。
(3)政府网站是指一级政府在各部门的信息化建设基础之上,建立起跨部门的、综合的业务应用系统,使公民、企业与政府工作人员都能快速便捷地接入所有相关政府部门的政务信息与业务应用,使合适的人能够在恰当的时间获得恰当的服务。
如图1.9所示是一政府网站。
从商业目的不同来划分,包括营利型网站、非营利型网站等
(1)盈利型网站有增值服务许可证书,也就是说以盈利为目的来作网站的经营、维持以及收入来源的相关网站,都可以将其归为此类。
图1.8商业网站
图1.9政府网站
(2)非盈利型网站没有增值服务许可证书,不以盈利为目的、不以此作为网站收入来源的相关网站,可以归为此类。
2.类型选择
网站按照主体性质不同,可分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其他非盈利机构网站以及其他类型。
按网站模式划分,可分为综合类门户网站、电子商务网站、专业网站等。
以下,通过简要介绍网站的模式,分析有关合适网站类型的选择。
其具体内容如表1-1所示。
表1-1网站分类
网站类型
网站作用
(1)综合类门户类网站
向用户提供的内容较综合,可以适合不同用户的需要,因而网站的访问量很大,但网站的用户群不是很稳定,用户的忠诚度也相对较低。
这类网站必须通过竞争淘汰大部分同类网站,才能立于不败之地
(2)电子商务网站
这类网站主要以网络为手段进行电子贸易,通过电子商务的活动获取利润。
阿里巴巴以及淘宝分别在B2B和C2C领域取得了巨大成功,但B2C领域缺少同等重量级的因特网企业
(3)专业网站
向用户提供的信息服务比较专业、单一,因此网站的访问量远不如综合网站的访问量大,但比较容易拥有忠诚度高的用户。
网站服务独特、竞争不多、用户稳定等特点决定了他们在提供有偿服务方面的优势。
我拉网的在线图片生成便是这一类型网站的典型
通过分析可以看出,没有资金没有技术的小站长是很难做上述类型的网站的,盲目跟风只会让网站犹如石沉大海般不被发现。
但是,在垂直领域的细分上,这些大的网站就显得有些“捉襟见肘”了。
我们不妨从以下这些例子上寻找突破点:
(1)地方性网站
这种网站有地域优势,用户易找到本土归属感而成为忠实用户,然而也由于地理因素,用户数量会受到一定的限制。
但只要做得好的话应该也不错,像厦门小鱼社区人气就非常旺。
(2)小行业网站
行业网站专业性也较强,但大行业基本饱和,小行业人气受限。
举个例子,汽车行业过于偏大,不妨考虑只做新车动态、润滑油等此类较小较专的领域。
(3)熟悉、感兴趣的行业
哪个行业火就跟着做是非常危险的,一旦网站流量达不到预想结果,就很容易产生疲惫、厌弃的心理,这样的网站如何坚持得下去?
做网站就应该像在养孩子,看着孩子慢慢成长,心里才会有成就感。
所以,跟风还不如选择自己熟悉或喜欢的行业,即使效果达不到理想中的状态,但只要看到它有成长,成就感也会油然而生。
(4)根据群体,决定网站类型
这类网站的定位可能会比较模糊,差不多这个群体喜欢的东西都可以涉及,举个例子,你是个文学爱好者,你的目的就是让一群与你有着相同爱好的人们聚集在一起,这样网站的范围就不好界定了,比如你倾向传统文学,于是建了个传统文学交流站,目的是引起人们关于古籍的探讨,增加对中国传统文学的认识,但到后来,慢慢地,你发现你的用户群员的喜爱发生了转变,他们更喜欢历史故事而非那些古籍,这样你的网站就不得不加大历史故事的比例,再后来,他们倾向历史人物介绍、某一朝代兴衰史等等,渐渐地,你的网站可能偏向介绍历史知识类的网站。
1.1.3静态网站制作流程
静态网站的制作相对比较简单,主要可以分4个部分来完成。
1.内容的策划
工欲善其事,必先利其器。
在网站创业前,进行系统的策划是非常必要的。
如果要让网站从大量站点中脱颖而出,就必须进行详细而深入的论证。
(1)确定需要建立什么样的网站
要建立网站,需要先确立站点的定位。
网站的定位和规划完成后,就需要按照这个定位来建立网站,在以后的运营过程中也不能偏离大体的定位。
但是也不能过于死板,整体的细节还需要在建站的实际过程中随时修改。
(2)选择什么样的网站内容
在建立网站之初对网站内容进行定位时,就要开始注意网站内容是否存在风险。
网站的内容风险包括两个方面,一是政策法律的风险,二是站长能否把握内容的风险。
打“擦边球”的网站也是很忌讳的站点类型,网络上目前还存在着不少类似的站点,在网站定位时,一定要避免。
(3)确定用户群体,便于内容“投其所好”
网站要为哪些人提供服务,是在建站之前就应该考虑好的问题。
定位用户群体,同时也是考虑网站的用户需求。
如果将网站针对的人群与站长的实际经历相结合,就能够更好地把握用户心理。
定位关乎网站的发展方向,同时也影响着网站的整体运营。
网站创业能否成功,就要看基本功做得是否扎实。
(4)前期策划决定网站竞争力
网站的成功策划在建站之初非常重要,能让建网者自身对网站有一个正确的认识,让网站富有竞争力。
网站有了方向和目标,才能避免盲目跟风。
因此必须考虑其相关因素:
❑明确网站的基础架构
❑选择合适的建站程序
❑网站的风格,做到布局合理,简洁易用
(5)怎样策划一个好的网站
想要使得一个网站策划得好,被用户所接受,需要考虑下述条件:
❑对于网站栏目的设置
❑对于网站板块的规划
❑对于网站URL的统一
❑对于网站广告位的设置
(6)策划需要注意的事项
在进行内容策划时,除了需要做好日常的制作任务之外,还需要考虑以下几点内容:
❑深入分析同类网站,做到知己知彼
❑考虑网站架构的具体形式,众木成林
❑体现站点特色的风格设计
❑选择合适的软件
❑页面千万不能杂乱
❑体现网站的独特风格
2.图纸的设计
设计图纸是在Photoshop或者Fireworks中把你想做的网站用图片的形式画出来。
Photoshop的灵活多变以及超级强大的功能,完全可以画出绚烂的网页出来。
浏览器的不同——像多窗口浏览器有一个标签栏,就算是IE,常用图标也有大小之分。
因此具体的尺寸是多少,你需要在实际制作过程中自己灵活掌握。
3.网页的切割
网页的切割还是要交给Photoshop或者Fireworks来完成,这里主要是使用它们的切片工具。
这建议大家更多使用Fireworks,因为它专业,也更容易上手。
切割网页就是把图片切割成若干个小图片,其中宽度高度都得自己去掌握去学习。
4.制作网页
网页就是表格加图片加Flash,在完成了内容策划、图纸设计、页面切割之后,我们就可以着手进行网页的制作了。
在本书的具体制作的应用实例,我们都通过DreamweaverCS5来进行相关操作。
当然,用于制作网页的工具远远不止这一些。
1.1.4动态网站制作流程
对于动态网站,因为有脚本语言,所以比较复杂。
同样,要做的工作也就更多了。
主要有以下几方面:
1.整体规划
对于整体规划,可以从以下几方面来进行:
①动态程序语言的确立
大家可以先了解一个语言,ASP、PHP、JSP、CGJ、.NET……一般来说,个人网站的形式为asp+acc数据库和php+mysql数据库。
②网站栏目功能规划
你的网站有哪些栏目?
你的网站实现什么功能?
对这些很现实的问题都需要你事先认真的思考与规划。
③根目录策划
你的网站实际上就是一堆文件的集合,怎么样去规划这些文件,就是目录的安排。
好的网站的目录很清晰,让人一目了然。
这就要求日常的文件安排都有一定的规律和次序可以进行参照,然后再根据所需应用适合自己的,那就是最好的。
2.数据库规划
在你选择了数据库和程序之后,接下来需要做的就是规划数据库的相应内容,具体针对数据库里放什么东西和怎么样去放,这些都需要进行仔细斟酌。
因为这些内容的规划和安排是至关重要的,关系到网站使用后的数据管理。
3.编写网站后台
前面已经策划了网站内容及其相应功能,接下来就可以进行写网站了。
写网站要写后站,这样更便捷。
把后台和数据库全部弄出来了,前台就是显示还有什么问题吗?
所以,一定要把网站后台编写好。
这就需要程序员多花些力气呢。
4.编写网站前台
根据设计制作的进度,接下来需要对网站的前台内容进行编写。
网站内容事先已经策划了,这里需要做的就是将网页内容,通过程序将其显示出来。
相对于后台,前台的内容同样重要,不可有一点点的缺失。
5.测试及修改阶段
在制作完成后,为了防止失误,需要进行测试,对其过程中反映的相应问题应及时修改。
没有一个程序弄好了就是没有漏洞没有错误的,测试和修改是必不可少的。
经过你的N多测试,网站应该没有什么问题了。
6.网站的发布
网页完成了,没问题了,那么就需要给他人浏览、观看。
如果你的网页仅仅是给自己的朋友看看,当做学习,你可以用自己的电脑配置成服务器。
网站准备长期给大家看,那么你可以考虑购买虚拟空间和域名。
当然,现在有很多人选择免费空间和免费域名。
如果你的网站非常受欢迎,或者你的网站内容非常多,虚拟空间已经不能够满足你了,那你租赁服务器或者托管服务器也是比较恰当的。
如果你想做网站,如果你想成为专业站长,就多多地去体验一下吧!
1.2网页设计工具
制作网页第一件事就是选定一种网页制作软件。
从原理上来讲,虽然直接用记事本也能写出网页,但是对网页制作必须具有一定的Html基础,非初学者能及,且效率也很低。
用Word也能做出网页,但有许多效果做不出来,且垃圾代码太多,也是不可取的。
接下来具体为大家介绍几款实用的网页设计工具。
1.2.1DreamweaverCS5简介
AdobeDreamweaverCS5是一款集网页制作和管理网站于一身的所见即所得网页编辑器,DreamweaverCS5是第一套针对专业网页设计师特别开发的视觉化网页开发工具,利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
下面针对该软件的一些特性以及相关内容进行简单介绍。
1.新增功能特性
关于新增功能的相关内容及其特性如表1-2所示。
表1-2新增功能特性
新功能类型
作用特点
(1)集成CMS,支持新增功能
尽享对WordPress、Joomla!
和Drupal等内容管理系统框架的创作和测试支持
(2)CSS检查新增功能
以可视方式显示详细的CSS框模型,轻松切换CSS属性并且无需读取代码或使用其他实用程序
(3)与AdobeBrowserLab集成新增功能
使用多个查看、诊断和比较工具预览动态网页和本地内容
(4)PHP自定义类代码提示新增功能
为自定义PHP函数显示适当的语法,帮助读者更准确地编写代码
(5)CSSStarter页增强功能
借助更新和简化的CSSStarter布局,快速启动基于标准的网站设计
(6)与BusinessCatalyst集成新增功能
利用Dreamweaver与AdobeBusinessCatalyst®
服务(单独提供)之间的集成,无需编程即可实现卓越的在线业务
(7)保持跨媒体一致性
将任何本机AdobePhotoshop®
或Illustrator®
文件插入Dreamweaver即可创建图像智能对象。
更改源图像,然后快速、轻松地更新图像
(8)增强的Subversion支持
借助增强的Subversion®
软件支持,提高协作、版本控制的环境中的站点文件管理效率
(9)仔细查看站点特定的代码提示
从Dreamweaver中的非标准文件和目录代码提示中受益
(10)简单的站点建立
以前所未有的速度快速建立网站,分阶段或联网站点甚至还可以使用多台服务器
2.操作界面
(1)界面显示
在打开DreamweaverCS5之后,窗口将显示如图1.10所示的内容。
通过有针对性地选择“打开最近的项目”、“新建”、“主要功能”这些栏目中的选项,可以进行具体的操作。
图1.10初始界面
(2)菜单栏
如图1.11所示,是打开DreamweaverCS5后它的菜单栏。
我们可以通过它的各项功能命令,来实现最终的效果与制作。
图1.11菜单栏
图1.12工具箱
(3)工具箱
如图1.12所示,是打开DreamweaverCS5后它的工具箱中的内容显示。
我们可以通过它的各项功能,来使用工具制作与实现效果。
1.2.2FlashCS5简介
Flash是用于制作适合网络传输的流媒体动画的软件。
Flash动画文件具有体积小、可边下载边播放、多媒体交互性等特点。
最大的好消息是,FlashCS5对开发人员更加友好,可以和FlashBuilder(即最新版本的FlexBuilder)协作来完成项目。
如果你使用FlashCS5,那么就可以通过它的新的导出对话框建立一个新的FlashBuilder项目。
1.功能特点
(1)Flash与Dreamweaver、Fireworks具有相同风格的快速启动栏、浮动面板、菜单栏、工具箱等。
(2)提供了与Fireworks基本相同的绘图工具,因此对于熟悉Fireworks的用户基本可以不用重新学习就可以绘图。
(3)利用关键帧和元件等技术可以轻易地制作出各类动画。
(4)提供了层技术,使动画的各个组成部分既分又合,方便制作和修改。
(5)支持许多图像、声音、视频格式,这些多媒体文件均可以直接导入动画中,从而使Flash动画“声像并茂”。
(6)提供了较完善的ActionScript脚本语言,可以为动画加入交互效果。
2.新的功能特性
关于新功能的相关内容及其特性如表1-3所示。
表1-3新的功能特性
新功能
相关特性
(1)XFL格式
XFL格式,将变成现在Flash项目的默认保存格式。
XFL格式是XML结构。
从本质上讲,它是一个所有素材及项目文件,包括XML元数据信息为一体的压缩包。
它也可以作为一个未压缩的目录结构单独访问其中的单个元素使用。
例如,Photoshop使用其中的图片。
XFL格式可以使软件之间的穿插协助更加容易
续表
(2)文本布局
FlashPlayer10已经增强了的文本处理能力,这样为CS5在文字布局方面提供了机会。
如果您是一个InDesign或Illustrator的用户,已经比较熟悉链接式文本,现在在Flash里您可以使用了。
在FlashCS5Professional中已经在垂直文本、外国字符集、间距、缩进、列及优质打印等方面,都有所提升。
提升后的文本布局,可以让您轻松控制打印质量及排版文本
(3)码片段库
以前只有在专业编程的IDE才会出现的代码片段库,现在也出现在FlashCS5,这也是CS5的突破,在之前的版本都没有。
FlashCS5代码库可以让读者方便地通过导入和导出功能管理代码。
代码片段库,可以让读者的Actionscript的学习更快,为项目带来更大的创造力
(4)FlashBuilder完美集成
FlashCS5可以轻松和FlashBuilder进行完美集成。
读者可以在Flash中完成创意,在FlashBuilder完成Actionscript的编码。
如果选择,Flash还可以创建一个FlashBuilder项目。
让FlashBuilder来做最专业的FlashActionscript编辑器
(5)FlashCatalyst完美集成
FlashCatalystCS5已经到来,FlashCatalyst可以将团队中的设计及开发快速串联起来。
自然Flash可以与FlashCatalyst完美集成。
Photoshop、Illustrator、Fireworks的文件,无需编写代码,就可完成互动项目。
结合Flash,让项目更传神
(6)FlashPlayer10.1无处不在
FlashPlayer已经进入了多种设备,已不再停留在台式机、笔记本上,现在上网本、智能手机及数字电视都安装了FlashPlayer。
作为一个Flash开发人员,无需为每个不同规格设备重新编译,就可让作品部署到多设备上,表现出了强大的优势
3.操作界面
在打开FlashCS5之后,窗口将显示如图1.13所示的内容。
通过有针对性地选择“从模板创建”、“新建”、“学习”这些栏目中的选项,可以进行具体的操作。
图1.13初始界面
如图1.14所示是打开FlashCS5后它的菜单栏。
我们可以通过它的各项功能命令实现最终的效果与制作。
图1.14菜单栏
如图1.15所示是打开FlashCS5后它的工具箱中的内容显示。
我们可以通过它的各项功能、工具制作来实现效果。
(4)时间轴
在Flash的制作中,时间轴起着相当重要的作用,在初始界面中,软件将自动将其打开以便于用户使用,其界面内容如图1.16所示。
图1.15工具箱图1.16时间轴
1.2.3FireworksCS5简介
Fireworks是网络图形处理软件,集网页图形的创建、编辑、管理于一体,简化了制作网页图形的流程,能生成大小合适、质量较好的网页图形。
Fireworks是网页原型和网页效果图设计利器,在最新的CS5版本中相信大家更有体会。
(1)工作环境与Dreamweaver
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 工具
![提示](https://static.bdocx.com/images/bang_tan.gif)