《基于Html5的web前端开发—甜品店网页设计.doc》由会员分享，可在线阅读，更多相关《基于Html5的web前端开发—甜品店网页设计.doc（28页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、题目：基于Html5的web前端开发甜品店网页设计 目录关于HTML5的网页设计与实现一、引言及什么是html5二、网页制作.7一、引言4二、网页制作5（一）、制作步骤5（二）、网页布局5（三）、常用工具介绍6三、HTML5的改进特性8（一）HTML5新元素8（二）异常处理9四、案例描述-甜品店网页设计91、考核知识点102、练习目标103、需求分析104、案例展示104.1、布局及定义基础样式114.3页面布局124.3定义公共样式134.4网页制作141、制作头部模块14五、 结束语27摘要 随着Internet的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相当
2、于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。关键词:HTML5;网页制作;HBuilder 3一、引言随着互联网的不断发展，互联网对人们的生活也在不断地发展和加强，人们渐渐开始习惯于互联网带来的各类服务和应用，便利和丰富。随着互联网的基础用户和开发者不断增多，人们不断地去创造和完善它的速度也越来越快，
3、无论从技术层面还是商业层面，新的模式和方法层出不穷，整个行业新陈代谢不断加速，新的应用和新的公司不断地挑战着新的技术和新的模式。毕竟整个互联网是一个开放的环境，大家需要一种标准，所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。HTML5成为不断被提及的热门话题，不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。HTML5是几十年来Web标准最巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。尽管HTML5还有很长的路要走，但HTML5正在
4、改变Web。另外，目前的互联网不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可以通过手机和平板电脑等各类移动设备来获取信息和使用更加丰富的应用。什么是HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。 HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。 HTML5 是如何起步的？ HTML5 是 W3C 与 WHATWG 合作的结果。 W3C 指 World Wide Web Consortium，万维
5、网联盟。 WHATWG 指 Web Hypertext Application Technology Working Group。 WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。4二、网页制作（一）、制作步骤网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网
6、站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一张报约或者一份杂志来进行排版布局。1. 草稿 新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。2. 粗略布局 在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导
7、航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。3. 定稿 定稿即将粗略布局精细化、具体化，完成整个页面的设计。页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。（二）、网页布局常见网页版式布局结构有以下几种：两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。三栏式结构是一些大型网站常用的布局结构，一
8、般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。左右框架型的结果非常清晰，内容一目了然，便于信息的查询。上下框架型与左右框架型类似，其区别仅仅在于形式。页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。Flash型主要
9、采用现在流行的Flash技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。（三）、常用工具介绍用来制作效果图的软件并没有明确的规定。可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。HBuilder是一款非常好用的平面设计软件。由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。所以，在很多的的广告、出版、软件公司，HBuilder都是首选的平面工具，它有很多的快捷方式，如
10、抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver配合做网页。对处理一般的网页图片比较实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。三、HTML5的改进特性（一）HTML5新元素HTML5提供了一些新的元素和属性，例如（网站导航块）和。这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如和标记。 1.取消了一些过时的HTML4
11、标记 其中包括纯粹显示效果的标记，如和，它们已经被CSS取代。 HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。2.将内容和展示分离 b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。3.一些全新的表单输入对象 包括日期，URL
12、，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。4.全新的，更合理的Tag 多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。 5.本地数据库 这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。 6.Canvas
13、对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。7.浏览器中的真正程序 将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。内容修饰Tag 将被剔除，而使用CSS。 8. Html5取代Flash在移动设备的地位。（二）异常处理HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比，HTML 5给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。四、案例
14、描述-甜品店网页设计 1、考核知识点盒子模型元素的浮动与定位2、练习目标掌握盒子的相关属性。掌握元素的浮动与定位。3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。4、案例展示效果如图4-1所示。 图4-1 “西式甜品网”效果展示4.1、布局及定义基础样式1、效果分析（1）HTML结构分析“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。图4-2 “西式甜品网”结构分析（2）CSS样式分析页面中的各个模块居中显示，页面的版心为980px。另外，页面
15、中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。4.3页面布局新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。 1 3 4 5 6 西式甜品网 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 在上述代码中，通过给div添加不同的类名来定义页面中的各个模块。4.3定义公共样式为了清除各浏览器的默认样式，使得网页在各浏览器中显示的效果一致，在完成页面布局后，首先要做的就是对CSS样式进行初始化并声明一些通用的样式。在index04.h
16、tml文件所在的文件夹内新建css文件夹用于存放样式表文件style04.css，使用链入式引入样式表文件。然后定义页面的基础样式，具体如下：/*重置浏览器的默认样式*/*margin:0; padding:0;border:0; background:none;/*全局控制*/bodyfont-family:微软雅黑;font-size:16px;4.4网页制作1、制作头部模块（1）HTML结构分析“头部”模块整体由一个大盒子进行控制。内部嵌套和分别用来搭建左侧logo和右侧文字内容部分。“头部”模块的具体结构如图4-3所示。图4-3 “头部”模块结构图（2）样式分析“头部”模块的宽为980
17、px，通过设置外边距属性使其在页面中居中显示，并设置相对定位。左侧logo和右侧文字内容部分相对外层大盒子设置绝对定位，最后还需设置文字的相关样式等。（3）搭建结构在index04.html文件内书写“头部”模块的HTML结构代码。具体如下： 1 2 3 4 登录 | 注册 5 6 （4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“头部”模块。具体如下： 1 .head 2 width:980px; 3 height:80px; 4 margin:0 auto; 5 position: relative; 6 7 .logo 8 position: absolut
18、e; 9 left:100px; 10 top:15px; 11 12 .login 13 position: absolute; 14 right:100px; 15 top:34px; 16 color:#ff9c00; 17 cursor: pointer; 18 font-size: 18px; 19 上述代码中，第4行代码用于设置“头部”模块在页面中居中显示。保存index04.html与style04.css文件，刷新页面，效果如图4-4所示。“头部”模块效果图2、制作导航及banner模块（1）HTML结构分析“导航”及“banner”模块分别由一个大盒子进行控制。导航内容部分由
19、标记定义，banner图由标记定义。“导航”及“banner”模块的具体结构如图4-5所示。“导航”及“banner”模块结构图（2）样式分析“导航”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px，且在页面中居中显示。定义标记左浮动，并定义相关的文字样式。最后还需设置“banner”模块的图片在页面中居中显示。（3）搭建结构在index04.html文件内书写“导航”及“banner”模块的HTML结构代码。具体如下：首页公司简介美食甜品用户留言联系我们 （4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“导航”及“banner”模
20、块。具体如下：.navwidth:100%;height:50px;background: #ff9c00;.nav_inwidth:820px;margin:0 auto;line-height: 50px;color:#fff;padding-left: 160px;.nav_in spanfloat: left;padding:0 38px;color:#9c5132;cursor: pointer;.banner text-align: center;上述代码中，第8行和第19行代码分别用于设置导航内容部分和banner图片在页面中居中显示。保存index04.html与style04
21、.css文件，刷新页面，效果如图4-6所示。“导航”及“banner”模块效果图3、制作产品分类模块（1）HTML结构分析“产品分类”模块主要由标记定义。“产品分类”模块的具体结构如图4-7所示。“产品分类”模块结构图（2）样式分析“产品分类”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px，且在页面中居中显示。定义每一个分类模块的标记左浮动，并定义相关的文字样式。（3）搭建结构在index04.html文件内书写“产品分类”模块的HTML结构代码。具体如下： 提拉米苏 甜甜圈 芝士蛋糕 马卡龙 西式甜点 （4）定义样式在样式表文件style04.css中书写C
22、SS样式代码，用于控制“产品分类”模块。具体如下：.listwidth:100%;height:240px;background: #e7bf80;.list .list_inwidth:940px;height:195px;margin:0 auto;padding:45px 0 0 40px;.list .list_in divfloat: left;width:146px;height:55px;padding-top: 95px;margin-right: 42px;background: url(./images/list1.png) no-repeat;text-align: ce
23、nter;color:#9c5132;.list .list_in .list2background: url(./images/list2.png) no-repeat;.list .list_in .list3background: url(./images/list3.png) no-repeat;.list .list_in .list4background: url(./images/list4.png) no-repeat;.list .list_in .list5background: url(./images/list5.png) no-repeat;上述代码中，第22-25行
24、代码用于分别设置各个分类模块的背景图片。保存index04.html与style04.css文件，刷新页面，效果如图4-8所示。“产品分类”模块效果图4、制作产品展示模块（1）HTML结构分析“产品展示”模块主要由标记嵌套标记和标记定义。“产品展示”模块的具体结构如图4-9所示。“产品展示”模块结构图（2）样式分析“产品展示”模块的背景色通栏显示，因此需设置最外层的宽度100%，内部嵌套的宽度为980px，且在页面中居中显示。定义每一个展示模块的标记左浮动，并定义相关的文字样式。（3）搭建结构在index04.html文件内书写“产品展示”模块的HTML结构代码。具体如下： 爱的N次方 马卡龙
25、 价格：30元 果肉果冻 双色马卡龙 价格：30元 芒果味 布丁马卡龙 价格：30元 果冻荔枝味 多彩马卡龙 价格：30元 果味巧克力 西式甜点 价格：30元 奶油水果 提拉米苏 价格：30元 玫瑰花型 布丁 价格：30元 燕麦奶油 芝士蛋糕 价格：30元 （4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“产品展示”模块。具体如下：.contentwidth:100%;height:570px;background: #f8f5bc;.conwidth:912px;height:530px;margin:0 auto;padding:40px 0 0 68px;.
26、con .con_typewidth:180px;height:220px;border:1px solid #ccc;float: left;background: #fff;margin:0 39px 30px 0;font-size: 14px;color:#9c5132;.con .con_type spandisplay: block;padding:2px 0 0 16px; .con .con_type span.con_namecolor:#fd8187;.con .con_type span bfont-weight: normal;color:#fd8187;.con .c
27、on_type imgmargin:12px 12px 3px 12px;width:158px;height:122px;上述代码中，第23行代码将标记转换为块元素用于换行显示文字内容。保存index04.html与style04.css文件，刷新页面，效果如图4-10所示。“产品展示”模块效果图5、制作版权信息模块（1）HTML结构分析“版权信息”模块由标记定义。具体结构如图4-11所示。“版权信息”模块结构图（2）样式分析“版权信息”模块的背景图通栏显示，因此需设置最外层的宽度100%，且文字内容居中显示。（3）搭建结构在index04.html文件内书写“版权信息”模块的HTML结构代
28、码。具体如下：西式甜品网版权所有2000-2016京ICP备08001421号 京公网安备110108007702 （4）定义样式在样式表文件style04.css中书写CSS样式代码，用于控制“版权信息”模块。具体如下：.footerposition: relative;top:-8px;width:100%;height:120px;background: url(./images/footer.png) repeat-x;text-align: center;line-height: 120px;color:#fff;font-size: 18px;上述代码中，第6行代码用于设置背景图沿X轴平铺。保存index04.html与style04.css文件，刷新页面，效果如图4-12所示。“版权信息”模块效果图五、 结束语网页制作主要是利用图形制作软件和处理软件进行网页效果图的制作。我们需要了解一个完整网站的制作过程，并知道网页制作在网站制作中的作用。一方面结合具体的实例，多加练习，培养对于技术的敏感和快速适应性，注意到技术变化带来的各种新的可能性，消除技术所形成的障碍；另一方面要多方面、多角度地感受与掌握电脑设计的时尚语言，扩展对传统设觉设计范畴的认识。