制作网站练习过程详解

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

项目七“宁月”网站制作【知识目标】熟练掌握网站制作流程;熟练掌握Dreamweaver8编辑网页的各种方法;掌握网页界面设计中的色彩应用理论;掌握网页界面设计中的布局与版式的应用;掌握各种类型网站的开发方法;初步掌握动态网站的制作思路;掌握网站策划书的书写方法。【能力目标】具备收集、处理信息,准备、加工素材的能力;能对网页进行合理的颜色搭配,设计合理的版式;具备开发网站的综合能力;能将代码与界面相融合;强化学生的策划能力;培养学生与社会交往的能力;培养学生的责任感、承受能力。项目概述Dreamweaver是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件,随着Dreamweaver8的发布,更坚定Dreamweaver在该领域的地位。它集网页设计、网站开发和站点管理功能于一身,具有可视化、支持多平台和跨浏览器的特性,是目前网站设计、开发、制作的首选工具。【知识储备】参考书目:[1]神龙工作室.Dreamweaver8中文版完全自学教程人民邮电出版社,2007.[2]尼春雨、李金莱.Dreamweaver8中文版网页制作基础与实例教程:职业版[M].电子工业出版社,2006.[3]王涛.超级百分百经典实例自学手册Dreamweaver8Flash8/Fireworks8经典设计300例[M].清华同方光盘电子出版社,2008.学习网址:[1]网页制作学习园地[2]Dreamweaver8学习教程[3]零基础网页设计[4]今日在线学习网[5]设计在线项目七“宁月”网站制作215215任务一网站制作基础入门【能力要求】了解网页与网站的区别与联系,熟悉网站开发的基本流程,掌握网站目录和文件命名规范,了解各种网页版面布局样式的特点,为以后的学习打下基础。【实例导入】图7.1.1“宁乐”网站效果图1.基础入门与概述电子商务网站设计与制作2162161.1概述随着网络的发展因特网已成为了人们生活的一部分,这都是网页的功劳。通过网页浏览者可以得到各种信息,可以交换思想可以通过网络进行购物。目前的网页种类繁多,归纳来可以分成这么几种:单纯根据兴趣而制作的个人网页、由具有共同爱好的人所组成的团体、以宣传企业为目的的企业用网页、成为因特网商店的大型购物中心以及门户网站等。而那些视觉效果比较好的网站往往会收到我们的青睐。那么这些网页是如何制作出来的呢?在目前市面上众多的网页编辑软件中,有的重视效率,有的强调版面设计,而Dreamweaver8可以很方便地实现这两方面的完美结合。另外,Dreamweaver8的网页动态效果与网页排版功能都优于一般同类软件,即使是初学者也能制作出相当水准的网页,所以Dreamweaver8是网页设计者的最佳选择,已成为目前最为流行的网页设计工具。1.2认清两个名词——网页和网站在互联网上应用最广的功能应该是网页浏览。浏览器窗口中显示的一个页面被成为一个网页,网页中可以包括文字、图片、动画,还有视频和音频等内容。那网站呢?网站是众多网页的集合。不同的网页通过有组织的链接整合到一起,为浏览者提供更丰富的信息。网站同时也是信息服务类企业的代名词。如果某人在网易或者在搜狐工作,那他可能会告诉你,他在一家网站工作。2.网站的开发步骤2.1确定网页主题和名称在建设网站之前,要对市场进行调查与分析,了解目前Internet的发展状况以及同类网站的发展、经营状况,汲取它们的长处,找出自己的优势,确定自己网站的功能,再根据网站功能确定网站应达到的目的和应起的作用,从而明确自己网站的主题,确定网站的名称。网站的名称很重要,它是网站主题的概括和浓缩,决定着你的网站是否更容易被人接受。(1)第1类:网上求职(2)第2类:网上聊天/即时信息/ICQ(3)第3类:网上社区/讨论/邮件列表(4)第4类:计算机技术项目七“宁月”网站制作217217(5)第5类:网页/网站开发(6)第6类:娱乐网站(7)第7类:旅行(8)第8类:参考/资讯(9)第9类:家庭/教育(10)第10类:生活/时尚2.2收集网页中所需要的图片和信息(注意对素材的分类)在做网页之前,我们要尽可能多地收集与网站主题相关的素材(文字、图像、多媒体等素材),再去芜存菁,取其精华为我所用。2.2.1文字素材文本内容可以让访问者明白网页要表达的内容。文字素材可以从用户那里获取,也可以通过网络、书本等途径收集,还可以由制作者自己编写相关文字材料,这些文字素材可以制作成Word文档或txt文档保存到站点下的相关子目录中。2.2.2图像、多媒体等素材一个能够吸引访问者眼球的网站仅有文本内容是不个够的,还需要添加一些增加视觉效果的素材,比如图像(静态图像或动态图像)、动画、声音、视频等等,使网页充满动感和生机,从而吸引更多的访问者。这些素材可以由用户提供现成的,也可以由制作者自己拍摄制作,或通过其他途径获取。将收集整理好的素材存放到站点下的相关子目录中。2.3网页布局的构想2.3.1网站栏目结构确定网站的栏目并绘制框架结构图:栏目的实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来,如图7.1.2所示。图7.1.2网站结构图2.3.2网站目录规范树型目录:网站的目录是指你建立网站时创建的目录。目录结构的好坏,对于站点本身的上传维护,内容未来的扩充和移植有着重要的影响。(1)合理安排文件的目录,不要将所有文件都存放在根目录下(2)按栏目内容建立子目录(3)在每个一级目录或二级目录下都建立独立的Images目录首页产品文化宁乐新闻宁乐产品店铺地址留言板电子商务网站设计与制作218218(4)目录的层次不要太多(5)不要使用中文目录(6)使用意义明确的目录文件名2.3.3网页版面布局样式及特点图7.1.3网页设计草图用笔勾画网页的轮廓草图及布局安排。如图7.1.3所示为北京希望电子出版社BHP网站网页设计草图之一。1.“T”字型结构布局所谓“T”字型结构,就是指页面顶部为一横条(主菜单、网站标志、广告条),下方左侧为二级栏目条,右侧显示具体内容的布局,如图7.1.4所示。图7.1.4“T”字型2.“同”字型结构布局在“T”字型结构的基础上,将右侧设为链接栏目条,屏幕中间显示具体内容的布局,如图7.1.5所示。项目七“宁月”网站制作219219图7.1.5“同”字型3.“国”(“口”)字型布局国字型布局是在同字型布局基础上演化而来的,在保留同字型的同时,在页面的下方增加一横条状的菜单或广告。(还有一种四周空出,中间作窗口),如图7.1.6所示。图7.1.6“口”字型4.自由式(“POP”)布局自由式布局打破了“T”字型、同字型、国字型布局的菜单框架结构,页面布局像一张宣传海报,以一张精美图片作为页面的设计中心,菜单栏目自由地摆放在页面上,常用于时尚类站点。优点是:漂亮、吸引人;缺点就是:显示速度慢、文字信息量少,如图7.1.7所示。电子商务网站设计与制作220220图7.1.7“POP”型5.左右(上下)对称布局顾名思义,采取左右(上下)分割屏幕的办法形成的对称布局。在左右部分内,自由安排文字、图像和链接。点击左边的链接时,在右边显示链接的内容,大多用于设计型的网站。它的优点是:既活泼、自由,又可显示较多的文字、图像;视觉冲击力很强。缺点是:将两部分有机的结合比较困难,不适于信息、数据量巨大的网站,如图7.1.8所示。图7.1.8对称型6.“三”型布局。这种布局多用于国外站点,国内用的不多。特点是页面上横向两条色块,将页面整体分割为三部分,色块中大多放广告条,如图7.1.9所示。项目七“宁月”网站制作221221图7.1.9“三”字型2.4在图像软件中进行网页设计2.4.1网页的布局元素1.标题网站的标题很重要,它决定着你的网站是否更容易被人接受。2.网站标识(LOGO)网站的标志是站点特色和内涵的集中体现。一个好的Logo设计应该是网站文化的浓缩,应该能让人一见到它就能联想到它的网站。网站的标志赏析,如图7.1.10所示。logo在网页中的位置,如图7.1.11所示。电子商务网站设计与制作222222图7.1.10Logo实例图7.1.11logo在网页中的位置3.导航一个网站导航设计对提供丰富友好的用户体验有至关重要的作用,简单直观的导航不仅能提高网站易用性,而且在方便用户找到所需的信息后,可有助提高用户转化率。如果把主页比作网站门面,那么导航就是通道,这些通道走向网站的每个角落,导航的设计是否合理对于一个网站是具有非常大意义的,如图7.1.12所示。图7.1.12网站导航4.页眉BANNER(广告条)类型几种国际尺寸的Banner如下:–468×60(全尺寸Banner)–392×72(全尺寸带导航条Banner)–234×60(半尺寸Banner)–125×125(方形按钮)–120×90(按钮类型1)–120×60(按钮类型2)–88×31(小按钮)项目七“宁月”网站制作223223–120×240(垂直Banner)2.4.2Banner设计注意点Banner的“重量”要轻!以468×60的Banner为例,最好是15K左右,不要超过22K。而88×31的Banner最好在5K左右,不要超过7K。(5)内容(6)页脚2.5开始制作:首页、子页、建立他们之间的链接1.定义站点:英文或拼音2.首页名称:index.htm或index.html3.图片格式:jpeg、jpg、gif、png4.默认宽度:不要超过1024,一般可在760~800之间。5.路径:相对路径2.6检查(硬伤和软伤)网站创建完毕,要发布到Web服务器上,才能够让全世界的人浏览。在上传之前要进行细致周密的测试,以保证上传之后访问者能正常浏览和使用。网站上传之前要测试它的兼容性和链接的有效性。兼容性可以使用Dreamweaver的“检查浏览器”功能测试,链接可以使用Dreamweaver的“检查整个站点的链接”功能进行测试。这种方法我们将在后续项目中学习,在此亦不做赘述。还有一种测试,是把网页上传到Internet服务器上去测试链接的有效性、网页的下载速度等。这种测试,只是你将网页上传到网上申请的个人空间后,以一名普通浏览者浏览的方式去检验即可。除此之外,还可以利用专门的测试软件和测试方法测试服务器的稳定性、安全性以及对程序和数据库的测试。2.7上传:使用FTP或利用DW的站点管理器上传现在上传的工具有很多,可以使用Dreamweaver自带的站点管理器中的FTP功能上传,也可以使用一些专门的FTP软件上传。利用这些FTP工具,可以很方便地把网站发布到自己申请的主页存放服务器上。2.8更新和维护:一般7天一次一个好的网站,不仅仅是一次性制作完美就完成了,日后的更新维护也是其重要的。就像盖好的一栋房子或者买回的一辆汽车,如果长期搁置无人维护,必然变成朽木或者废铁。网站也是一样,只有不断地更新、管理和维护,才能留住已有的访问者并且吸引新的电子商务网站设计与制作224224访问者。对于任何一个网站来说,如果要始终保持对访问者足够的吸引力,定期进行内容的更新是唯一的途径。如果浏览网站的访问者每次看到的网站都是一样的,那么他们日后就不会再来,几个月甚至一年一成不变的网页是毫无吸引力可言的,那样的结果只能是访问人数的不断下降,同时也会对网站的整体形象造成负面影响。由于网站的维护是一项专业性较强的工作,需要专业人士来完成。更新维护不仅仅只局限于简单的更换文字稿,还包括网站风格的更新、网站重要页面设计制作、网站系统维护服务等。【训练项目】请从下面十个网站中挑选三个网站,分别从:主题、色彩搭配、网页布局图(首页+子页,共两张网页)、网站逻辑结构图(从

1 / 182
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功