基于Html5的web前端开发—甜品店网页设计

合集下载

基于HTML5+CSS3的网页设计实现与优化

信息通信INFORMATION & COMMUNICATIONS 2020年第7期(总第211期)2020(Sum. No 211)基于HTML5+CSS3的网页设计实现与优化宫道(青岛科技大学，山东青岛266000)摘要:HTML 和CSS 作为网页前端开发所运用的主要技术,如何灵活运用，使得web 开发出来的页面布局和效果满足用户的需要是技术人员和项目组负责人的核心工作之一。

HTML5包含的新元素、标签和属性能够使得技术人员在开发的过程中将网页的布局和效果清晰地展示出来。

文章以蛋糕店网站首页页面为对象，实现基于HTML5+CSS3的网页页面设计与优化。

关键词:HTML5; CSS3;网页布局；网页优化中图分类号:TP393.092 文献标识码:B文章编号：1673-1131(2019)07-0291-02随着互联网技术的不断深入与发展，超文本标记语言HTML 本身作为实现网页设计的基本语言与技术，也在不断地进步与更新。

至2014年,HTML5的规范与标准正式形成,当下的网页前端开发语言与技术HTML5+CSS3在先前的版本上增加了许多新的元素，使得网页页面的结构和呈现的效果更好，页面更加清晰,具体实现与优化过程如下。

1 HTML5与CSS3在网页设计中的重要性HTML 是网页设计与实现的一种语言，通过计算机网络来实现网页的功能与效果。

CSS3在网页设计的基础之上，对其展示的效果进行控制以满足企业与用户的需要叫不仅如此,由于网页设计控制语言的内容繁多,如果逐一进行描述,难免复杂，所以，需要通过设计技术来对重复的内容进行集成，而CSS3能够满足这样的需求，将集成的各种语言清晰而简洁地展示出来。

HTML5+CSS3的网页设计缩减了网页大量重复的代码，也增强了网页的拓展性，使得网页设计美观而形式多样。

2 HTML5的特点HTML5在HTML4的基础之上，提供了更丰富而强大的程序接口，能够为复杂的网页设计提供更多接口的支持，并且不同的需求可以通过不同的接口来实现。

WEB前端设计(HTML5+CSS3)智慧树知到答案章节测试2023年陕西工商职业学院

第一章测试1.网页是由一些特殊符号和文本通过浏览器渲染之后而形成的页面（）A:错B:对答案:B2.Web开发涉及了哪些核心技术？( )A:JavaScript技术B:CSS3技术C:HTML5技术D:网页页面布局技术答案:ABC3.我们在应用HBuilder开发工具进行网站开发时，应先建立用于存储网站相关内容的项目。

（）A:对B:错答案:A4.HTML5、CSS3和JavaScript这三种核心技术中， HTML5用于实现网页的内容和结构。

（）A:错B:对答案:B5.HTML5、CSS3和JavaScript这三种核心技术中， JavaScript用于实现网页内容的表现方式。

（）A:错B:对答案:A第二章测试1.HTML标记可以分为双标记和单标记两种类型。

( )A:对B:错答案:A2.font标记face属性可以设置文本的字号大小。

( )A:错B:对答案:A3.自定义列表中的列表项前面没有任何项目符号。

( )A:对B:错答案:A4.下列哪个标记可以实现文本强制换行功能?( )A:<br />B:<b >C:D:答案:A5.在html5代码基本结构中，哪一对标记中的内容对用户来说是可见的区域?( )A:B:C:D:答案:A第三章测试1.设置所有的标签p的字体颜色为红色，下列语法错误的是（）。

A:p{color:rgb(255,0,0)}B:p{color:rgb(F,0,0)}C:p{color:#F00}D:p{color:rgba(255,0,0,1)}答案:B2.下面哪个运用了ID选择器（）。

A:#red{color:inherit;}B:.red{color:inherit;}C:[att=red]{color:inherit;}D:a{color:inherit;}答案:A3.在HTML中，以下关于CSS样式中文本属性的说法，错误的是( )。

A:text-align用于设置文本的字体形状B:color用于设置文本的颜色C:font-family用于设置文本的字体类型D:font-size用于设置文本字体的大小答案:A4.在HTML中,要通过无列表符号来实现导航菜单, CSS属性中 ( )可以设置垂直叠放次序。

《Web前端开发技术——HTML5、CSS3、JavaScript(第3版)》教学大纲

Web前端开发技术(Web客户端编程)学分：3.5 学时：56 (28时理论/28时上机)一、课程的性质、地位与任务《Web前端开发技术》（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。

二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。

掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。

掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。

本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM 技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。

三、课程内容（重点△，难点★）1 Web前端开发技术综述1.1 Web概述1.1.1 了解Web起源1.1.2 理解Web特点1.1.3理解Web工作原理1.1.4 掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。

v3_Chap10-Web前端开发技术—HTML5、CSS3、JavaScript(第3版)-储久良

分别进行DIV 分区设计，写出DIV结构代码和CSS样式文件。
教育部高等学校软件工程专业教学指导委员会规划教材
5.多行三列模式
第10章 DIV+CSS 页面布局
6.多行四列模式
Page: 6
多行三列模式页面布局案例
Web前端开发技术-HTML5、CSS3、JavaScript
设计步骤：1.写出DIV结构； 2.编写CSS文件
本章学习目标
Web 前端开发工程师应掌握以下内容：熟练地使用DIV标记的CSS各类属性。掌握CSS定义与引用方法，学会使用外部样式表定义页面样式。熟悉各类常见的页面布局类型，能够写出相应的DIV结构及CSS 规则。学会使用DIV+CSS进行页面布局，能够编写HTML代码和CSS 文件。
Web前端开发技术-HTML5、CSS3、JavaScript
第10章 CSS+DIV页面布局（1-2课时）
头部导航大图Βιβλιοθήκη 播其它DIV教育部高等学校软件工程专业教学指导委员会规划教材
第10章 DIV+CSS 页面布局
Page: 1
Web前端开发技术-HTML5、CSS3、JavaScript
2.三列模式
第10章 DIV+CSS 页面布局
Page: 4
Web前端开发技术-HTML5、CSS3、JavaScript
10.1.2 “三行二列”、“三行三列”模式
此模式特点是先将整个页面水平分成三个区域，再将中间区域分成两列或三列。分别进行DIV分区设计，写出DIV结构代码和CSS 样式文件。
教育部高等学校软件工程专业教学指导委员会规划教材
第10章 DIV+CSS 页面布局

基于HTML5技术的移动Web前端设计与开发

基于HTML5技术的移动Web前端设计与开发一、本文概述随着移动互联网的迅猛发展，移动设备的普及和应用场景的多样化使得移动Web前端设计与开发的重要性日益凸显。

作为新一代Web 技术标准的HTML5，以其丰富的API、强大的跨平台兼容性和良好的用户体验，成为移动Web前端开发的理想选择。

本文旨在探讨基于HTML5技术的移动Web前端设计与开发的相关理论与实践，包括HTML5的核心技术特点、移动Web前端的设计原则、开发流程、性能优化等方面，以期为广大Web前端开发者提供一份全面、深入的参考指南。

在本文中，我们将首先介绍HTML5技术的核心特点和优势，阐述其为何成为移动Web前端开发的理想选择。

接着，我们将从用户体验的角度出发，探讨移动Web前端的设计原则，包括界面设计、交互设计、响应式设计等方面。

然后，我们将详细介绍基于HTML5技术的移动Web前端开发流程，包括项目准备、页面布局、功能实现、性能优化等步骤。

我们还将分享一些实用的开发技巧和经验，帮助开发者提高开发效率和产品质量。

我们将对移动Web前端的发展趋势进行展望，探讨HTML5在未来移动Web前端开发中的潜力和挑战。

通过本文的阅读，相信读者能够对基于HTML5技术的移动Web前端设计与开发有一个全面、深入的了解，为未来的开发工作提供有力的支持和指导。

二、HTML5基础知识HTML5，全称HyperText Markup Language 5，是构成网页标准语言HTML的最新版本。

它是互联网的新一代标准，被设计为可以在互联网上的各种设备和平台上运行，无论是PC、笔记本、平板电脑还是手机。

HTML5的出现，使得Web前端设计与开发工作更加便捷，也为移动Web应用的发展打开了新的大门。

HTML5引入了许多新的元素和API，如<video>和<audio>元素，使得开发者可以在网页上直接嵌入音频和视频内容，无需依赖第三方插件如Flash。

网上蛋糕商城项目报告模板

网上蛋糕商城项目报告模板项目概述本项目是一个网上蛋糕商城，旨在为用户提供方便、快捷的购物体验。

项目背景随着人们生活水平的提高，消费需求不断增加，越来越多的人开始通过网络来购买商品。

尤其是在疫情期间，线上购物已经成为人们生活的一部分。

因此，开设一个网上蛋糕商城也可以满足消费者的需求。

项目目标本项目的主要目标是搭建一个方便、快捷的网上蛋糕商城，为用户提供多样化的商品且操作简单易懂。

项目实现技术选型本项目主要采用了以下技术进行实现：•前端：HTML、CSS、JavaScript•后端：PHP、MySQL•框架：Bootstrap、jQuery功能模块本项目涵盖以下功能模块：用户模块•用户注册：用户可以通过简单的注册过程申请成为会员。

•用户登录：用户可以登录到他们的帐户以获取个人信息、购买历史记录等等。

•修改个人信息：允许已经注册的用户修改他们的基本信息。

•用户购物车：用户可以将商品添加到购物车，并在结算时进行统一结算。

商品模块•商品分类：按照不同的商品类别进行分类管理。

•商品浏览：以列表和详情页面的形式，让用户方便的了解商品属性和信息。

•商品搜索：让用户可以根据关键字进行商品搜索。

订单模块•购买商品：用户可以通过购物车进行统一结算。

•取消订单：用户可以主动取消订单。

•退货/换货：如果商品存在质量问题，用户可以退货或者换货。

数据库设计用户表•id：用户ID（自增、主键）•username：用户名•password：用户密码•email：用户邮箱•phone：用户手机号码•address：用户地址商品表•id：商品ID（自增、主键）•name：商品名称•type：商品类型•price：商品价格•image：商品图片•description：商品描述订单表•id：订单ID（自增、主键）•user_id：用户ID•product_id：商品ID•num：购买数量•total_price：总价•status：订单状态项目部署本项目可以在任何可以运行PHP和MySQL的环境中使用。

西式甜品网页设计分析与思考

西式甜品网页设计分析与思考
西式甜品是一种非常受欢迎的食品类别，其网页设计需要体现出其美味与精致的特点。

以下是对西式甜品网页设计的分析与思考：
1. 颜色搭配：西式甜品网页设计应该选取和食品有关的颜色进行搭配，例如浅粉色、浅绿色、浅黄色等。

这些颜色不仅能彰显西式甜品的美味，还能营造出平和、温暖的氛围，让顾客有一种轻松、舒适的感觉。

2. 布局设计：西式甜品网页的布局要简洁，让顾客能够快速找到想要的产品。

一般来说，主页应该将比较热门的西式甜品图片及口味等信息呈现出来，以吸引顾客的注意力。

此外，在商品列表中应该设计好分类标签和较完整的筛选菜单，方便顾客进行选择。

3. 产品展示：西式甜品网页的产品展示需要非常精细和具体。

展示图片要选取高清晰度、诱人食欲的图片，同时要配以详细的文字描述，包括口味、口感等信息。

这样能够让顾客更好地理解和感受西式甜品的优点，提高购买率。

4. 营销促销：西式甜品网页还应该加入一些优惠促销活动，例如折扣、满减等活动，这能够吸引更多的顾客。

同时也需要将这些信息集中在一个位置，以便顾客快速地看到。

5. 用户评价：在西式甜品网页中加入用户评价是很有必要的。

这样不仅可以让顾客了解其他消费者的反馈，还能增加网站的可信度和用户黏性。

总的来说，西式甜品网页的设计需要简洁、精致、清新、美食感十足，并且充分体现出营销和用户评价的作用。

HTML蛋糕网源代码

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>蛋糕屋</title><TITLE>tip</TITLE><STYLE></STYLE><TITLE>tip</TITLE><STYLE></STYLE></head><body background="框架/0162.gif"><table align="center"><tr><td><img src="20110824xingren.jpg" width="900" /></td></tr><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" background="框架/0105.gif"><tr align="center"><td><font size="+2"><b> <a href="#">主页</a></b></font></td><td><font size="+2" ><b><a href="#">简介</a></b></font></td><td><font size="+2" ><b><a href="#">产品</a></b></font></td><td><font size="+2" ><b><a href="#">精品</a></b></font></td><td><font size="+2" ><b><a href="#">客服</a></b></font></td><td><font size="+2" ><b><a href="#">鲜花</a></b></font></td><td><font size="+2" ><b><a href="#">特惠</a></b></font></td><td><form><select name="" size=""><option value="1">抹茶蛋糕<option value="2">水果蛋糕<option value="3">奶油蛋糕<option value="4">巧克力蛋糕<option value="5">鲜花配送<option value="6">祝寿蛋糕<option value="7">提拉米苏<option value="8">主页<option value="9">欢庆礼包</select></td><tr><table align="center" border="0" width="900" bgcolor="#FFFFFF"><tr><td ><img src="框架/100003575267999.gif"/></td><td><table border="0" cellpadding="0" cellspacing="0" height="333" width="165"><tr><td align="center"><font size="+2">鲜花花语</font> </td></tr><tr><td ><font size="-1"><ul><li>新年祝福语</li><br /><li>情人节祝福语</li><br /><li>三八节祝福语</li><br /><li>开业祝福语</li><br /><li>感恩节祝福语</li><br /><li>母亲节祝福语</li><br /><li>端午节祝福语</li><br /><li>朋友生日祝福语</li><br /><li>圣诞节祝福语</li></ul></td></tr></table></td></tr></table><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"><tr><td width="300"><font face="宋体" size="-1"><b>账号  <input type="password" name="text1" size="" />      <input name="b1" type="button" id="c1" value="注册" /><br /><br />密码  <input type="password" name="text1" /> &nbsp    <input name="b1" type="button" id="c1" value="忘记" /><br /><br />    <input name="b1" type="button" id="c1" value="登陆" />         <input name="b1" type="button" value="取消"/></font></td><td width="324" align="center" ><img src="框架/logo.gif" /></td><td><table align="center" border="0" align="center" width="250" background="框架/0133.gif" ><tr><td align="center" background="框架/0105.gif"><b>新闻</b></td></tr><tr><td ><a href="#">最专业的鲜花速递服务商</a><br /><a href="#">荣获中国B2C电子商务第一名</a><br /><a href="#">中国花卉协会会员</a><br /><a href="#">足不出户，网络、电话均可订购</a><br /><a href="#">中国市区内最快2小时即可送达</a><br /><a href="#">采用昆明顶级花材，保证新鲜</a><br /></td></tr></table></tr></table></tr></table></tr></table><table align="center" border="0" width="900" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" background="框架/0325.gif"><tr><td width="200"><img src="footerrx.jpg"</td><td><font size="-1">按用途：<a href="#"> 全部</a> <a href="#"> 生日蛋糕</a> <a href="#"> 祝寿蛋糕</a> <a href="#"> 情侣蛋糕</a> <a href="#"> 节日蛋糕</a> <a href="#"> 庆典蛋糕</a> <a href="#"> 儿童蛋糕</a><br /><br />按材料：<a href="#"> 全部</a> <a href="#"> 鲜奶蛋糕</a> <a href="#"> 水果蛋糕</a> <a href="#"> 巧克力蛋糕</a> <a href="#"> 穆斯蛋糕</a> <a href="#"> 冰激凌蛋糕</a> <a href="#"> 抹茶蛋糕</a> <a href="#"> 芝士蛋糕</a> <a href="#"> <a href="#"> 提拉米苏</a> <a href="#"> 黑森林</a> <br /><br />按对象：<a href="#">全部</a><a href="#"> 恋人</a> <a href="#"> 长辈</a> <a href="#"> 领导</a> <a href="#">朋友</a> <a href="#">客户</a> <a href="#"> baby </a><br /><br />按造型：<a href="#"> 全部</a> <a href="#"> 心形蛋糕</a> <a href="#"> 方形蛋糕</a> <a href="#"> 圆形蛋糕</a> <a href="#"> 多层蛋糕</a> <a href="#"> 艺术蛋糕</a> <a href="#"> 生肖蛋糕</a> <br /></font></td></tr></table><table border="0" align="center" width="900" cellpadding="0" cellspacing="0"bgcolor="#FFFFFF"><tr><td width="600"><img src="框架/headerps.jpg" /></td><td ><img src="框架/donghua.gif" /></td></tr></table><table border="0" width="900" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" ><td height="2"><tr ><td width="200"><table align="center" border="0" width="230" height="625" background="框架/0325.gif"><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按用途<b></font></td></tr><tr><td height="66" ><font size="-1"><a href="#">生日蛋糕</a> | <a href="#">祝寿蛋糕</a> | <a href="#"> 情侣蛋糕</a><br /><br /> <a href="#">节日蛋糕</a> | <a href="#">庆典蛋糕</a> | <a href="#"> 儿童蛋糕</a><br /></font></td></tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按材料<b></font></td></tr><tr><td height="66" ><font size="-1"><a href="#">鲜奶蛋糕</a> | <a href="#">水果蛋糕</a> | <a href="#"> 巧克力蛋糕</a><br /><br /><a href="#">穆斯蛋糕</a> | <a href="#">抹茶蛋糕</a> | <a href="#"> 冰激凌蛋糕</a><br /><br /><a href="#">芝士蛋糕</a> | <a href="#"> 提拉米苏</a> | <a href="#"> 黑森林</a><br /></font></td></tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按造型<b></font> </td></tr><tr><td height="66"><font size="-1"><a href="#"> 心形蛋糕</a> | <a href="#">方形蛋糕</a> |<a href="#"> 圆形蛋糕</a><br/><br /><a href="#"> 多层蛋糕</a> | <a href="#"> 艺术蛋糕</a> | <a href="#"> 生肖蛋糕</a></font></td> </tr><tr><td height="30" background="框架/0105.gif"><font size="+2" color="#5E4A2F"><b>按对象<b> </font></td></tr><tr><td height="66"><font size="-1"><a href="#">恋人</a> | <a href="#"> 长辈</a> | <a href="#"> 领导</a><br /><br /><a href="#"> 朋友</a> | <a href="#"> 客户</a> | <a href="#"> baby</a><br /></font></td></tr><tr><td><img src="框架/dingyue.jpg"</td></tr><tr><td><input type="password" name="text1"/>邮箱地址</td></tr></table></td><td><table border="0" width="670" cellpadding="0" cellspacing="0" style="border-color:#FFFFFF" style="background-color:#B6F1FC" background="框架/0266.gif"><tr><td colspan="3"><font size="+2" color="#0000FF"><b>分类产品</b></font></td></tr> </tr><tr><td><table border="1" align="center"><td align="center"><img src="蛋糕/701002175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/701050175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/701060175228.jpg" /></td></table></td></tr><tr><td align="center"><font face="宋体">奇思妙想<font color="#FF0000">[￥219元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">月光<font color="#FF0000">[￥248元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">荷塘月色<font color="#FF0000">[￥189元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td></tr><tr><td><table border="1" align="center"><td align="center"><img src="蛋糕/805011175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/803001175228.jpg" /></td></table></td><td><table border="1" align="center"><td align="center"><img src="蛋糕/803005175228.jpg" /></td></table></td></tr><tr><td align="center"><font face="宋体">缘分天空<font color="#FF0000">[￥318元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">幸福时光<font color="#FF0000">[￥219元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td><td align="center"><font face="宋体">爱之舞<font color="#FF0000">[￥179元]</font><br/>编号 09084</br>查看详情 <a href="#">立即订购</a></br></font></td> </tr><tr><td colspan="3" align="center" style="font:"宋体"" style="font-style:inherit"><a href="#">1 </a><a href="#">2 </a><a href="#">3 </a><a href="#">4 </a><a href="#">5 </a><a href="#">6 </a><a href="#">7 </a><a href="#">8 </a><a href="#">9 </a><a href="#">上一页</a> <a href="#">下一页</a></td></tr></table></td></table><table align="center" width="900"><tr><td><img src="框架/footimg.gif" /></td></tr></table> <br /><br /><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Copyright ⓒ [2012 Year] [] </font></td></tr></table></body></html>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

题目：基于Html5的web前端开发—甜品店网页设计目录关于HTML5的网页设计与实现一、引言及什么是html (5)二、网页制作 (7)一、引言 (4)二、网页制作 (5)（一）、制作步骤 (5)（二）、网页布局 (5)（三）、常用工具介绍 (6)三、HTML5的改进特性 (8)（一）HTML5新元素 (8)（二）异常处理 (9)四、案例描述-甜品店网页设计 (9)1、考核知识点 (10)2、练习目标 (10)3、需求分析 (10)4、案例展示 (10)4.1、布局及定义基础样式 (11)4.3页面布局 (12)4.3定义公共样式 (13)4.4网页制作 (14)1、制作头部模块 (14)五、结束语 (27)摘要随着Internet的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。

企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。

结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。

关键词:HTML5;网页制作;HBuilder一、引言随着互联网的不断发展，互联网对人们的生活也在不断地发展和加强，人们渐渐开始习惯于互联网带来的各类服务和应用，便利和丰富。

随着互联网的基础用户和开发者不断增多，人们不断地去创造和完善它的速度也越来越快，无论从技术层面还是商业层面，新的模式和方法层出不穷，整个行业新陈代谢不断加速，新的应用和新的公司不断地挑战着新的技术和新的模式。

毕竟整个互联网是一个开放的环境，大家需要一种标准，所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。

HTML5成为不断被提及的热门话题，不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。

HTML5是几十年来Web标准最巨大的飞跃。

和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。

尽管HTML5还有很长的路要走，但HTML5正在改变Web。

另外，目前的互联网不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可以通过手机和平板电脑等各类移动设备来获取信息和使用更加丰富的应用。

什么是HTML5？HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。

自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。

然而，大部分现代浏览器已经具备了某些 HTML5 支持。

HTML5 是如何起步的？HTML5 是 W3C 与 WHATWG 合作的结果。

W3C 指 World Wide Web Consortium，万维网联盟。

WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。

在2006 年，双方决定进行合作，来创建一个新版本的 HTML。

二、网页制作（一）、制作步骤网站是网页的集合，一个站点用的所有网页构成一个网站，网页是网站的表现形式，网页设计是指对网站整体页面的设计，包括页面风格、配色、布局、内容等。

网页设计包含的内容非常多，大体分为两个方面：一方面是纯网站本身的设计，如文字、排版、图片制作、平面设计、静态图文和动态声音、影像等；另一方面是网站的延伸设计，包括网站主题、浏览群的定位、智能交互、制作策划、形象包装和宣传营销等。

设计页面的第一步就是设计片面布局，就像报刊杂志版面设计一样，我们可以看作一张报约或者一份杂志来进行排版布局。

1. 草稿新页面就像一张白纸，没有任何的约定俗成的东西，可以尽可能地发挥想象力、创造力，将想象的布局到上面去。

这是原创阶段，你不必讲究细腻工整，你也可在草稿本上先画出整个布局框架，把多个版块的位置先粗略的布置上去以往下一步工作的展示，这一步也可以借住PHOTOSHOP或其他工具软件来完成。

2. 粗略布局在草稿的基础上，将需要的功能模块放到页面上去，这时要遵循突出重点、整体协调的原则，首先将网站标志、导航条、广告条等最主要的模块放在最突出位置，然后考虑其他模块的布局。

3. 定稿定稿即将粗略布局精细化、具体化，完成整个页面的设计。

页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。

（二）、网页布局常见网页版式布局结构有以下几种：两栏式结构，即页面顶部为网站标志或广告条，下面分为左右两栏，一般左栏式导航或分类信息，右栏为主要内容，这种布局很容易掌握，但如果在色彩上不加以注意的，很容易给人一种“乏味”的感觉。

三栏式结构是一些大型网站常用的布局结构，一般为上面是横幅的广告条，下面分为三竖栏，中间较大，是主要的信息，左右是小条内容或者广告条。

三栏式给人一种充实的感觉，但页面拥挤，不够灵活，是网站常用的一种布局形式。

“三”型结构，这种结构多用于国外网站或者视频类网站，其特点是分类清晰，展示方便。

左右框架型，是企业网站或论坛常用的布局，页面分为左右两部分，左边一般为导航部分，右边是与导航相对应的内容。

左右框架型的结果非常清晰，内容一目了然，便于信息的查询。

上下框架型与左右框架型类似，其区别仅仅在于形式。

页面整体为横向分布，上面为导航，中间的大展式窗口很突出，整个网站显得简洁明亮，这种结构适合于信息量不大，主要靠图片展示内容的网站。

Flash型主要采用现在流行的Flash 技术，页面表达的内容较为丰富，给人视觉和听觉上很大的冲击，处理得当会达到Web页面难以达到的效果。

（三）、常用工具介绍用来制作效果图的软件并没有明确的规定。

可以使用各种图形制作软件和处理软件，现在通常使用的软件是PHOTOSHOOP和FIREWORKS。

在制作效果图时，使用的软件对最终结果并没有什么影响，用自己精通的即可。

HBuilder是一款非常好用的平面设计软件。

由Adobe公司开发设计，其用户界面易懂、功能完善、性能稳定，是比较专业的图像处理软件，它具有强大的滤镜功能。

所以，在很多的的广告、出版、软件公司，HBuilder都是首选的平面工具，它有很多的快捷方式，如抓手工具H键，TABLE键切换显示或隐藏所有的控制板，D键、X键迅速切换前景色和背景色等，灵活的运用快捷键，可以使设计的速度大大提高。

Fireworks是网页开发图形处理工具，可以做出矢量的图形，主要是和Dreamweaver配合做网页。

对处理一般的网页图片比较实用，而且学起来也比Photoshop易上手，是一个入门级的网页设计软件。

三、HTML5的改进特性（一）HTML5新元素HTML5提供了一些新的元素和属性，例如<nav>（网站导航块）和<footer>。

这种标签将有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用，除此之外，还为其他浏览要素提供了新的功能，如<audio>和<video>标记。

1.取消了一些过时的HTML4标记其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS 取代。

HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。

2.将内容和展示分离b 和 i 标签依然保留，但它们的意义已经和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。

u，font，center，strike 这些标签则被完全去掉了。

3.一些全新的表单输入对象包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。

HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。

总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

4.全新的，更合理的Tag多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

5.本地数据库这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。

同时，那些离线Web 程序也将因此获益匪浅。

不需要插件的富动画。

6.Canvas 对象将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

7.浏览器中的真正程序将提供 API 实现浏览器内的编辑，拖放，以及各种图形用户界面的能力。

内容修饰Tag 将被剔除，而使用CSS。

8.Html5取代Flash在移动设备的地位。

（二）异常处理HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。

HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。

与HTML 4.01相比，HTML 5给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。

四、案例描述-甜品店网页设计1、考核知识点盒子模型元素的浮动与定位2、练习目标掌握盒子的相关属性。

掌握元素的浮动与定位。

3、需求分析盒子模型这样的布局方式代替了传统的表格布局，同时结合元素的浮动与定位，可使网页的结构更加多样化，通过学习本案例可以使初学者进一步的巩固盒子模型和元素的浮动与定位等相关知识点。

4、案例展示效果如图4-1所示。

图4-1“西式甜品网”效果展示4.1、布局及定义基础样式1、效果分析（1）HTML结构分析“西式甜品网”首页面从上到下可以分为5个模块，如图4-2所示。

头部导航及banner产品分类产品展示版权信息图4-2“西式甜品网”结构分析（2）CSS样式分析页面中的各个模块居中显示，页面的版心为980px。

另外，页面中的所有字体均为微软雅黑，字体大小为16px，这些可以通过CSS公共样式进行定义。

4.3页面布局新建index04.html文件，在index04.html文件内书写HTML结构代码，具体代码如下。