HTML5+CSS3+Bootstrap响应式Web前端设计（慕课版）（第2版） 课件 第07章网站建设流程

第7章网站建设流程《HTML5+CSS3+Bootstrap响应式Web前端设计（第2版）》目录/Contents020301确定网站主题网站结构规划明确网站定位0506网站设计原则网站测试发布04收集网站内容在开始制作网页之前，建议应用少量时间对自己要制作的主页进行总体设计，例如希望主页是怎样的风格，应该放一些什么信息，其他网页如何设计，分几层来处理等等。一个好的网站首先是内容丰富，其次就是网页设计美观。网站建设流程网页＝技术＋艺术如何一步步来构造技术与创意兼得的网站？网站建设流程明确网站定位7.1如果我们要对网站进行界面设计，就必须先明确建设网站的原因。如：建立网站是为了销售产品，还是进行商业服务。你的目标用户是谁，他们能从你的网站上得到什么。你想从网站中获得怎样的回报。即使目标相似，具体的设计方案也会根据客户的不同情况而有所差别，这些差别反映出网站的特殊性。明确网站定位明确网站定位的过程，就是找出客户的优势、特色和行销方式的过程。如果客户对自己所建立的网站还没有清晰的认识，设计师可以通过以下几个问题来引导客户。明确网站定位问题1：你要建设网站的目的是什么？问题2：你设想中的网站规模是多大？问题3：目标用户的统一特征是什么？

或者说，网站所针对的人群、区域、国家是什么？通俗点就是“谁在看？”问题4：网站的收入来源是哪几个部分？问题5：关于网站实现的技术，你的想法是怎样的？问题6：网站的设计风格上，你有什么要求？2明确网站定位明确网站定位确定网站主题7.2理解站点功能在理解站点基础上，形成鲜明的主题网站的特色要突出3确定网站主题确定网站主题第1类：网上求职第2类：网上聊天／即时信息/ICQ第3类：网上社区／讨论/邮件列表第4类：计算机技术第5类：网页/网站开发第6类：娱乐网站第7类：旅行第8类：参考/资讯第9类：家庭/教育第10类：生活/时尚

所谓主题也就是你的网站的题材。网络上的网站题材千奇百怪,琳琅满目。只要你想的到，就可以把它制作出来。3确定网站主题确定网站主题古典音乐免费软件红楼梦古今佳句名言科幻小说金庸客栈美容美发游戏排行榜国画画廊象棋世家能吃是福GIF动画库陶艺园地漫画天地中国足球摄影俱乐部中华佛义幽默轻松体育博览中国古典诗词流行情报电子贺卡旅游天地Windows技巧电影世界软件宝库国旗大展网页研习室影视偶像天文星空爱情占星电脑杂志Midi金曲少年园地宠物猫武器博物馆游戏天堂儿歌专集热带鱼硬件开讲PS王国健康资讯女性主义媒体大师集邮天天花店破解资源影像合成骇客资讯免费大全Java小屋病毒字典网上教室超频天堂股市信息超级图书馆3确定网站主题确定网站主题主题要小而精定位要小，内容要精。题材最好是你自己擅长或者喜爱的内容兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。题材不要太滥或者目标太高“太滥”是指到处可见，人人都有的题材；“目标太高”是指在这一题材上已经有非常优秀，知名度很高的站点，你要超过它是很困难的。3确定网站主题确定网站主题网站结构规划7.3规划网站时，首先应把网站的内容列举出来，根据内容列出一个结构化的蓝图，据实际情况设计各个页面之间的链接。规划网站的内容应包括栏目的设置、目录结构、网站的风格等。4网站结构规划网站结构规划目录结构设计一是要按栏目内容建立子目录；二是每个目录下分别为图像文件创建一个子目录images（图像较少时可不创建）；三是目录的层次不要太深；四是尽量使用意义明确的非中文目录。4网站结构规划网站结构规划将主要内容信息按一定的方法分类，并为它们设立专门的栏目。主题栏目个数在总栏目中占绝对优势，这样的网站专业主题突出，容易给人留下深刻印象，并且过目不忘。4网站结构规划-栏目版块网站结构规划有些站点的内容庞大，分类很细，往往有三、四级甚至更多级数的目录页面，为帮助浏览者明确自己所处的位置，网站设计师往往在页面里显示导航条。4网站结构规划-栏目版块网站结构规划布局是一个设计的概念,指的是在一个限定的面积范围内合理安排布置图形图像和文字的位置，在把文章信息按照轻重缓急的秩序陈列出来的同时，将页面装饰美化起来。简而言之，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。4网站结构规划-版面布局网站结构规划构思构图（草案）。目的是将脑海里朦胧的想法具体化，变成可视可见的轮廓。设计方案（粗略布局）。除了文本文字可以不必认真，以字符象征性地代替以外，其它所有的内容都要接近将来的网页效果。量化描述（定案）。即把网页设计方案中的视觉元素的各项参数确定下来。4网站结构规划-版面布局网站结构规划用笔勾画网页的轮廓草图及布局安排。上图为北京希望电子出版社BHP网站网页设计草图之一4网站结构规划-版面布局网站结构规划4网站结构规划-版面布局网站结构规划4网站结构规划-版面布局网站结构规划版面布局——分栏式结构

在纸上勾画一下，用内容名称填充一下，粗略地进行规划。在标准的构架上加一些变化，就会有很多新的编排形式出现。所谓“T”字型结构，就是指页面顶部为主菜单，下方左侧为二级栏目条，右侧显示具体内容的布局。“T”字型结构布局“T”字型结构布局“T”字型结构布局在“T”字型结构的基础上，将右侧设为链接栏目条，屏幕中间显示具体内容的局。“同”字型结构布局“同”字型结构布局国字型布局是在同字型布局基础上演化而来的，在保留同字型的同时，在页面的下方增加一横条状的菜单或广告。“国(口)”字型结构布局4网站的整体规划-网站logo网站的整体规划-网站logoLOGO的位置通常在页面的左上角。根据具体设计，它不是一成不变的，所谓个性的设计，不论商业或个人，都要去大胆尝试。网站的LOGO，虽然有动态的，但是绝对不适宜过分的动感，且不是所有的网站标志都适合选用动态。4网站的整体规划-网站logo网站的整体规划-网站logo红——血、夕阳、火、热情、危险橙——晚霞、秋叶、温情、积极

黄——黄金、黄菊、注意、光明

绿——草木、安全、和平、理想、希望蓝——海洋、蓝天、沉静、忧郁、理性紫——高贵、神秘、优雅白——纯洁、素、神圣黑——夜、邪恶、严肃

4网站的整体规划-网站色彩网站的整体规划-网页色彩蓝色、灰色常常用于工业高科技企业，以显得稳重高贵4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩4网站的整体规划-网站色彩网站的整体规划-网页色彩收集网站内容7.4在明确建站目的和网站定位以后，要结合各方面的实际情况，围绕主题全面收集相关的材料。5收集网站内容收集网站内容网站设计原则7.5网页的设计要讲究页面构图、色彩搭配、平面布局、版式设计、空间表现等方面的内容。页面内容：标题、网站标志、主体内容、页眉页脚、导航栏、广告栏等。6网页设计原则网站设计原则网站测试发布7.6测试评估与网站发布是不可分割的两部分。制作完毕的网页必须进行测试。测试评估主要包括上传前的兼容性测试、链接测试和上传后的实地测试。网站上传后，继续通过浏览器进行实地测试，发现问题后及时修改，然后再上传测试。网站测试发布（1）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。（2）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。须知，在一页的上部是显眼而宝贵的地方，不要只放几个粗大的字或图片。（3）尽量使用普遍采用的分辨率设计网页。（4）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。（5）不要每页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载，采用相同的底色或墙纸还可以增强网页一致性，以树立自己的风格。总

结（6）底色或墙纸必须与文字对比强烈，以易于阅读。这并不是要求永远使用鲜亮的背景搭配深色的文字，但深色背景常要求与主题配合，有较