一、网页设计过程及步骤
网页设计过程
网页是信息传播的媒体,但又不同于传统媒体,有自己的特殊性。网页具有交互性、多维性、整合性、多维性、不确定性等特点,它与技术的结合更为密切,网页的超级链接功能也使它比传统媒体更具吸引力。正是因为这些特殊性,网页的设计与发布也有一个特殊的流程。
1.项目规划马克思将做事的计划性看成是人区别于动物的本质特征之一。如果把一个网站比喻为一所房子,那么,没有事先规划和设计建造起来的“房子”是不会漂亮、牢固的。设计者必须认真对待站点开发计划,这样才能使网站的建设经得起时间的考验。这一阶段可称为项目规划阶段。
本阶段,首先要明确建立站点的目的,也就是先搞清楚要建一座什么样的“房子”。这座“房子”可能有以下用途:
●个人主页:发布个人信息,提供个人服务,展示个性,同别人广泛地交流,比如共享业余爱好等。
●电子商务:首先,有利于树立企业的形象。目前国内很多大企业都非常重视企业形象这种无形资产,建立企业网页是宣传自己的重要手段。拥有国际域名和主页代表了企业的实力、规模和品位。
●电子出版内容的更新、传递的速度都比传统报刊杂志更快捷,影响更广泛。
●社区服务:可以通过邮件列表、新闻组、聊天室和电子公告牌促进社区人员的信息交流,为背景和地址各不相同的人提供活动的场所。
●网上教育:远程教育、终身教育和开放式教育都因此而变为现实。这样的站点主要靠内容来吸引浏览者,而不是华而不实的设计技巧。
●休闲娱乐:包括影视站点、音乐站点、旅游站点、游戏站点等,都为浏览者提供了休闲娱乐的场所。要求设计者能够提供各种多媒体信息,具有很强的编程能力和灵活的设计思想。
●艺术欣赏:如何把作品的含义表达给浏览者,是艺术站点应该考虑的问题。因此,设计者应该与艺术家保持良好的沟通。另外,准确地运用多媒体也是设计好艺术站点的关键。
网页设计的目的,就是满足浏览者的需求。在进行网页设计时,设计者应该明确知道来这座“房子”访问的人都想得到什么。首先必须考虑到服务对象的技术背景、受教育程度、阅读能力、兴趣爱好、消费习惯、上网方式等,然后选择相应的网页内容和形式。每一个网页都是一次机遇和挑战,设计者必须在溯rJ阶段就认真考虑该为浏览者提供哪些适宜而有趣的服务,以便迎来“回头客”。
2.内容组织无论设计一个什么样的站点,三个方面的工作:
①搜集筛选将要发布的内容组织都将是最大的挑战。这包括组织内容、编写脚本。
②组织内容。梳理清楚上述问题以后,就可以进行第二步工作了。组织内容这一阶段,要求设计者把搜集到的信息,用清晰明确的文字表达出来。设计人员可以运用一些语言技巧,确保浏览者能够准确且迅速地理解网页所要传达的意图。
③导航。导航,是为了让浏览者在网页上迅速找到所需的信息。因此,网页应提供目录索引、在线帮助、站内搜索等服务。印刷品中导航问题不是那么突出。如果一个句子在页尾突然终止,读者会很自然地翻到下一页查找剩余部分。
在组织内容时还应注意以下问题:
a.建立可信度
b. 减少商业味道
c.采用倒金字塔形式用超级链接缩短长度
d.去掉不必要的图形
e. 并不是信息越多越烁真正重要的不是为浏览者提供更多信息,而是为他们提供更有用的信息。
④编写脚本。确定内容后,就要编写脚本。在大型网页设计中,脚本有助于设计人员之间的交流。它通常包含这样几个方面:首先将内容分类列表,把各个项目分成逻辑组,形成网页的总体结构(树形结构);其次确定各页的主题、包含的内容以及各页之间的层次结构和隶属关系最后设计者还要考虑树形结构之
外的交叉链接关系。
3.页面设计有些优秀的绘画作品,是在画家们强烈的创作欲望驱使下,没有计划、没有尺度,仅仅靠着巨大的热情和无法抑制的创作渴望,疯狂地涂抹画布来完成的。这种方法对网页设计者来说,可以作为一种有趣的创作方法偶尔一试;但对商业设计来说,缺乏计划性、准确性、整体性,将是设计师通往成功道路上的一大障碍。
4.测试发布测试发布,包括完整性测试和可用性测试两部分。完整性测试,确保技术上的正确性。例如,页面显示是否无误,链接指向的地址是否正确等。可用性测试,确保页面内容是浏览者所需的,符合最初的设计目标。经测试满意后,就可以上传到Web服务器发布了。
5.站点推广设计师或许认为,站点的推广不是设计人员的工作。为什么要在一本讨论网页艺术设计的书中介绍站点推广的内容呢?答案很简单,Web 的动态发布和即时交互性,使网页设计成为一个循环的过程,站点推广,也是网页设计整个过程中的一个环节。它拓宽了你获得反馈信息的渠道,并将打开浏览者通往你的站点的大门。
网页设计步骤——个人主页设计四步走
第一步:掌握主页制作常识及常用软件
1.主页制作常识超文本编程语言———HTM是制作个人主页的基础掌握其概念和用法是非常必要的。
2.主页制作常用软件主页编辑软件:选择一种好的主页制作软件是首当其冲的事情。
第二步:申请免费丰页空间
目前,网上提供免费主页存放服务的公司已有很多。申请方法比较简单,接受协议,然后填写表格即可。
第三步:上传个人主页
检查主页的所有内容及链接,确认无误后,你就可以上传主页了。正式开始上传主页,对软件进行简单的设置:填写网址,登录的用户名和密码,上传到服务器的默认目录(一般的默认目录名为/public)等内容。最后,主页上传完成后,联入个人生页,再次检查一下主页内容是否正确或完整。
第四步:申请免费域名并推广主页
二、总结体会
经过一个简单网页制作之后,我发现网页设计挺有意思的,可以做你想做的个人主页,想做你想要的主页风格等等。现将我在网页设计过程中的一些体会说说吧。
做个网站介绍一个简单明了的网站介绍,不仅能让别人对你的网站能够提供些什么有个了解,引发共鸣或是表达你的诚意,常常最能打动读者,而且还能使访问者能快速找到想要的东西。但是,许多设计者都没有这样做。有效的导航条和搜索工具使人们很容易找到有用的信息,这对访问者很重要。告诉访问者你所提供的正是他们想要的信息。
网站设计最重要的诀窍,恐怕就是网页要易读。这就意味着,我们必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果,别用花里胡哨的色彩组合,让人看起来自己的网页来很费劲。一般来说,浅色背景下的深色文字为佳。这个要点要求你最好别把文字的规格设得太小、也不能太大。文字太小,人家读起来难受;文字太大,或者文字视觉效果变化频繁,像是冲着人大喊大叫,看起来不舒服。有的设计者想通过闪烁的文字来引起访问者的注意是可以被人理解的,但一个页面中最多不能有三处闪烁文字,太多了给用户一种眼花缭乱的感觉,反而会影响用户去访问该网站的其他内容。另外,最好让文本左对齐,而不是居中。按当代中文的阅读习惯,文本大都居左的。当然,标题一般应该居中,因为这符合读者的阅读习惯。
每个页面都要有导航按钮应当避免强迫用户使用工具栏中的向前和向
后按钮。设计时应当使用户能够很快地找到他们所要的东西。绝大多数好的站点在每一页同样的位置上都有相同的导航条,使浏览者能够从每一页上访问网站的任何部分。
网页上所有的图像、文字,包括像背景颜色、区分线、字体、标题、注脚什么的,要统一风格,贯穿全站。这样子读者看起来舒服、顺畅,会对你的网站留下一个“很专业”的印象。
用户在网上四处漫游,必须设法吸引和维护他们对我们主页的注意力。万维网的其中一个最重大资源是其多媒体能力,所以我们无论如何要善加利用。主页上最好有醒目的图像、新颖的画面、美观的字款,使其别具特色,令人过目不忘。图像的内容应有一定的实际作用,切忌虚饰浮夸。注意图画可以弥补文字之不足,但并不能够完全取代文字。很多用户把浏览软件设定为略去图像,以求节省时间他们只看文字。因此,制作主页时,必须注意将图像所连接的重要信息或联接其他页面的指示用文字重复表达几次,同时要注意避免使用过大的图像,如果不得
不放置大的图像在网站上,就最好使用Thumbnailsy等简便的影像缩图制作工具软件,把图像的缩小版本的预览效果显示出来,这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。
给每个图形加上文字的说明,在出现之前就可以看到相关内容,尤其是导航按钮和大图片更应如此。
简明易读网页设计最重要的技巧,就是网站风格整体清新、简明、易读。看上去就明白是什么内容,信息间相互干扰程度降到最低。这就意味着我们必须花点心思来规划文字与背景颜色的搭配方案。注意不要使背景的颜色冲淡了文字的视觉效果,一般来说,浅色背景下的深色文字为佳。这个原则也意味着,你最好别把文字的规格设得太小、也不能太大。文字太小,人家读起来难受;文字太大,或者文字视觉效果变化频繁,像是冲着人大喊大叫,看起来不舒服。
网页风格要统一其实,这个原则和传统的印刷出版物没什么区别。我们网页上所有的图像、文字,包括像背景颜色、区分线、字体、标题、注脚什么的,要统一风格,贯穿全站。
页面容量越小越好,别超过75K。有研究显示,如果一个网站页面的主体在15秒之内显现不出来,访客会很快失去对该站的兴趣。当然,也有例外,比如内容实在太精彩,人家不去不行。再像视觉艺术类站点,也不能以“快”为唯一设计标准。不过,即使这类站点,也该在加个导引页,给读者一个提示,别不理睬人家的心情。
以上为我在网页设计中的一点体会吧。
四、主页效果
一个完整的网站制作流程 一个网站的制作是负责的,耗时的,想要最有效的建好一个网站,就需要了解网站制作的具体流程,只有详细的了解各个步骤和流程,才能找到最有效的方法,快速有效的制作出网站。 网站建设的具体流程大概如下: 第一步:客户提出需求。 客户将自己所要建设的网站以及相关要求相告知,如想要的效果,开设的栏目,想要的风格等。同时客户需提供网站制作的相关资料,医院简介,联系方式,产品或项目描述,详细的网站框架设计要求等。 第二步:制定网站制作方案 双方就网站制作的内容、风格、细节等问题进行协商,以达成共识。为网站建设的开展做铺垫。 第三步:签定网站制作合同,支付预付款 双方签定《网站制作合同》,合约是双方利益的保障。 第四步:注册域名、空间 选择合适的注册域名和空间是网站开展运营的前提条件。 第五步:网站制作定位 医院网站制作应充分展示医院的服务理念和服务特色。医院做网站应充分展示医院各业务的特色和优势,通过文字,图片,颜色甚至声音等媒介,让用户能在最短的时间内抓住医院所要传递给大家的核
心思想。 第六步:网站风格设计 网站的风格包括很多方面,整个网站的总体风格,每个栏目频段自己独有的风格,网站基本框架的设计等。最后将初步做好的网站与客户进行讨论并加以改进。 第七步:网站制作 网站应当有一个很清晰的网站介绍,我们告诉访问者网站能够提供些什么,以便访问者能找到想要的东西。有效的导航条和良好的树状结构,使人们很容易找到有用的信息,这对访问者很重要。告诉访问者所提供的正是他们想要的信息。 第八步:网站验收 网站制作完成后,将会反复审核、修改最后通过客户的验收,网站才算建好。 第九步:网站宣传推广工作 网站建好之后,如若需要对网站进行宣传推广,我们可以聘请良好的网络优化团队,将全力为您的网站进行优化。 第十步:网站后期维护 网站建成以后,如果涉及到图片文字更换及数据库升级、修改缺陷及找回密码等情况。
精品网页设计欣赏及评析 1.商业清爽型 国外现在较流行的风格,国内也有不少模范者,可是往往在色彩调配和细节方面有所欠缺。图一图二特点:利用方框构图,简介明了,图片一般大面积出现,但图片一定要结构清晰,色彩鲜明色彩方面多使用大面积浅灰度和白色,以衬托logo 和配图的色彩鲜艳,配以高明度小小色块(如导航处)。因为结构构图简单,细节方面一定要讲究,不适宜有过于复杂的logo 和点缀出现,多用简洁明快的几何图形结合。一般此类风格背景如果是彩色,都会是低纯度低亮度彩色,以反衬主题图片和logo。在大面积背景压住的情况下,图片明度越高越爽。画面应该有一个主色调。注意图二左下脚的logo,有意与背景色调相同,以免抢了视觉中心,这是很多人常犯的错误。图三注意细节图案的使用,这是大多数设计者弱点所在,细直线条与箭头、方块、园点不要乱用,每个点的存在你都要有理由。 2. 商业门户型现在的商业门户网站在几乎都是三栏,上面是logo+banner 。其实门户网站因为信息大,更新频繁,在设计时应该充分考虑可扩展性,我认为可以充分利用下拉特性,充分考虑左上位置的设计,主体争取结构明了简洁。下面我们一起来看看几个门户网站的设计。图四所示的这个网站是卡通网站,广告栏很大,但通过精心设计使之醒目而不凌乱。图片统一使用斜角,统一又不呆板。图五所示网站使用曲线与直线的结合,蓝灰色主色,画面沉静而不脏,这里的色彩难度很高,需要细心调试,色块分割,简单明了。图六所示网站主题部分简之又简,在背景上做足了功夫,轻轻的灰度变化,是现在国际流行的风格,高雅,不花,充分烘托主体。图四图五图六 3. IT 企业实用模板图七图八图九图十 4. 时尚企业网站模板图十一图十二 5. 主题型实用网站模板图十三上图所示模板其logo 和图片以及其绿色的主色调与动物园的环境和业务非常贴切。美食业务主题网站,布局合理大方,整体设计“色香味”俱全,主题鲜明,功能齐全。 6. 学校教育型模板图十四图十五 7. 儿童主题型网站模板图十六图十七图十八图十九 8. 个人个性化网站模板 以下的10个网页设计作品是ThemeForest上最受欢迎的优秀企业网站设计模板的其中一小部分。它们风格低调沉稳,几乎只使用黑白灰三种色彩,却不雷同,并且在细节上都非常讲究。ThemeForest是非常值得网页设计师关注的高品质网站,其上的几乎每一个设计模板都称得上是杰出的设计作品,值得我们认真揣摩学习。这篇文章里我将根据自己的观点对这10个设计模板的设计思路和方法做一总结,列出其中的要点,挖掘值得我们在网页设计中值得借鉴的东西,希望能够对大家有所帮助。
《大学计算机基础》 实验报告 专业名称: 电子商务2班 学号: xxxxxxxxxxx 姓名: x x 指导教师: x x 2011年12月24日
目录 第一章网站主题设计说明 (1) 1.1 主题内容 (1) 1.2 设计思路 (1) 第二章网站内容设计 (2) 1.1 链接1标题 (2) 1.2 链接2标题 (2) 1.3 flash制作说明 (2) 第三章网站技术难点 (3) 第四章心得体会..................................... ..... ......................... (4)
第一章网站主题设计说明 1.1 主题内容 (1) 网站主题为“四季の花”,包括春夏秋冬四个季节的比较典型的花朵及有关花的诗句,色彩缤纷,十分艳丽夺目。 1.2 设计思路 (2) 大多网站都设计的关于音乐,影视,购物等非常热门的东西,本站设计的主题是花,能让人们在闲下来的时候看看花,品品诗歌,所以做有关花的网页是个不错的选择。同时,让人们分清楚春夏秋冬都各有什么典型的花。
第二章网站内容设计 1.1链接1标题:春の花 春天是生命的季节,在这个季节里,万物复苏。所以就找了虞美人,桃花,牡丹,以及海棠花来作为春天的代表。同时配有与这些花有关的诗句。 1.2 链接2标题:夏の花 夏天充满了激情与阳光,我找了兰花,荷花,百合花等来代表这个季节,色彩艳丽,十分醒目夺人。 1.3 链接3标题:秋の花 大丽花,菊花,月季和牡丹花都竞相出现在本网页,色彩缤纷,赏心悦目。 1.4 链接4标题:冬の花 蝴蝶兰,水仙,迎春花,梅花是冬季的代表,他们刻画了一副傲立冬天的坚强的姿态。
网页设计与制作模拟试题 一、单项选择题(每空1分,共10分) 1. 客户/服务器系统的最大特点是客户机和服务器( D ) A. 必须运行在同一台机器上 B. 必须运行在同一个网络上 C. 必须运行在不同的计算机上 D. 不必运行在同一计算机上 2. 若需要软件把LAN上的客户机从Internet上隐藏起来,并为客户机执行Web 请求,则下面( D )软件能实现此项功能。 A. Internet Information Server B. Index Server C. Personal Web Server D. 代理服务器 3. 通常一个站点的主页默认文档名是( C ) A. Main.htm B. Webpage.htm C. Index.htm D. Homepage.htm 4. 通常,比较好的建立站点目录的习惯是( A ) A. 在根目录下建立一个总的IMAGE目录放置图象文件 B. 直接把图象文件放置在各栏目的目录下 C. 为各栏目建立一个单独的IMAGE目录放置图象文件 D. 在每个目录下建立一个IMAGE目录放置图象文件 5. 以下有关页面布局的说法正确的是( D ) A. 分辨率越高,可供使用的页面尺寸越大 B. 网页布局与平面设计一样,不受页面大小的影响 C. 页眉和页脚中只能出现文本,不能出现图形 D. 页面布局通常是通过手工设计的,目前还没有相应的电脑软件完成这一工作 6. 以下关于HTML文档的说法正确的一项是( A ) A. 与这两个标记合起来说明在它们之间的文本表示两个HTML文本 B. HTML文档是一个可执行的文档 C. HTML文档只是一种简单的ASCII码文本 D. HTML文档的结束标记