项目一 食品企业web前端之基本页面制作 (1).ppt

食品企业WEB前端设计基础

项目一食品企业WEB前端之基本页面制作

项目任务描述了解网页制作方法，通过学习html基础标签，使用文本、图片、音频标签等完成基本页面的制作。食品企业WEB前端之页面布局食品企业WEB前端之基本页面制作

网页设计的概念和术语目录CONTENTS网页设计流程认识HTML5（概述和基本语法）HTML头部标签文本段落标签HTML图片标签HTML超链接标签影音多媒体标签

网页设计的概念和术语

HTML头部相关标记网页设计的概念和术语2．认识浏览器窗口的基本组成浏览器是用户浏览网页的软件，支持多种具有交互性的网络服务，是人们通过网络进行交流的主要工具。目前最流行的浏览器为InternetExplorer、GoogleChrome、Firefox等。网页是构成网站的基本元素，是承载各种网站应用的平台。网页设计是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。1．网页设计的概念

HTML头部相关标记网页设计的概念和术语浏览器窗口主要由网页标题、菜单栏、命令栏、地址栏和网页窗口等部分组成，IE浏览器窗口如图1-1所示，Chrome浏览器窗口如图1-2所示。图1-2Chrome浏览器窗口的基本组成图1-1IE浏览器窗口的基本组成

HTML头部相关标记网页设计的概念和术语在网页设计中的发散思维发散思维，又称辐射思维、放射思维、扩散思维或求异思维，是指大脑在思维时呈现的一种扩散状态的思维模式。它表现为思维视野广阔，思维呈现出多维发散状，如“一题多解”、“一事多写”、“一物多用”等方式，培养发散思维能力。发散思维是人们对思维定势的一种突破，启发人们从多角度、多层次、多方向来观察同一问题，而采用的一种不受任何约束和限制的思维形式。发散思维是尽可能多的获取解决问题和创新的方案，最终圆满解决问题或获得创新的一种思维方式。

HTML头部相关标记网页设计的概念和术语文字是网页传递信息的主要元素，不仅传输速度快，而且可以根据需要对其字体、大小、颜色等属性进行设置，设置得风格独特的网页文本会给浏览者带来赏心悦目的感受。（1）文字用于网页上的图像一般为jpg格式和gif格式。网页的图片根据用途可以分为：表示网站标识的Logo图片、用于广告宣传的Banner图片、用于修饰的小图片、产品图片或风景图片、背景图片、按钮图片等。（2）图片目前网页中经常使用Flash动画和GIF格式的图片。（3）动画

HTML头部相关标记网页设计的概念和术语超级链接是Web网页的主要特色，是指从一个网页指向另一个目的端的链接。超级链接可以是文本、按钮或图片，鼠标指向超级链接位置时，其指针会变成小手形状。导航栏是一组超链接的集合，用来指引用户跳转到某一页面或内容的链接入口，可以方便地浏览网页。导航栏一般有4种常见的布局位置：页面的左侧、右侧、顶部和底部。（5）导航栏表单是用来接收用户在浏览器端输入的信息，然后将这些信息发送到服务器端，服务器的程序对数据进行加工处理，这样可以实现网页的交互性。（6）表单（4）超级链接

HTML头部相关标记网页设计的概念和术语Logo是网站的标志和名片，Logo是网站特色和内涵的集中体现，特别是对一个商业网站来说，可以从中基本了解到这个网站的类型或者内容。Logo标志可以是中文、英文字母，也可以是符号、图案，还可以是动物或者人物等。在网页中插入视频文件将会使网页变得更加精彩而富有动感。常用的视频文件格式有flv、rm、avi等。（8）视频网页中除了上述这些最基本的构成元素，还包括横幅广告、字幕、计数器、音频等其他元素，它们不仅能点缀网页，而且在网页中起到十分重要的作用。（9）其他元素（7）网站的Logo

网页设计流程

HTML头部相关标记网页设计流程网页是信息传播的媒体，但又不同于传统媒体，有自己的特殊性。网页具有交互性、多维性、整合性、多维性、不确定性等特点，它与技术的结合更为密切，网页的超级链接功能也使它比传统媒体更具吸引力。正是因为这些特殊性，网页的设计与发布也有一个特殊的流程。

HTML头部相关标记1.确定设计思路企业在设计一个网页之前，一定要先确定好设计方案，这个方案一定要确定网站的整体风格和特色，从而为后期的设计做好基本的准备。这里的设计思路要根据所设计的网页的不同有所不同。2.版式设计网页设计一定要特别注意网页中各个板块的排版和布局。每个板块都分布清楚后，还要看整个网页的布局，反复推敲布局的合理性以及用户的体验度。网页设