网页设计与制作 课件 项目一、项目二 初识网站与网页_第1页
网页设计与制作 课件 项目一、项目二 初识网站与网页_第2页
网页设计与制作 课件 项目一、项目二 初识网站与网页_第3页
网页设计与制作 课件 项目一、项目二 初识网站与网页_第4页
网页设计与制作 课件 项目一、项目二 初识网站与网页_第5页
已阅读5页，还剩43页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目1初识网站与网页《网页设计与制作》基础教程目标TARGET知识目标了解网页设计的概念与术语；掌握网页、网站相关概念；掌握网页设计的流程；了解HTML5的发展历史与优势；掌握HTML5的编码方式。

1网页设计的概念与术语

2网页设计的流程

3HTML5的概述

4编写第一个HTML5页面

5综合实训1网页设计的概念与术语Part◎网页与网站的相关概念◎网页设计相关的程序设计语言

网页与网站的相关概念

网页（WebPage）是网站中的一个页面，是Internet“展示信息的一种形式”。网

页

网站是万维网上相关网页的集合。网站依据表现形式，可以分为静态网页和动态网页

网页与网站的相关概念主页：用户进入网站时看到的第一个页面就是主页（homepage）。依据网页的位置，可以分为主页和内页静态网页：是指使用HTML语言编写的网页，其制作简单易学，但缺乏灵活性，在浏览网页时浏览者和服务器不发生交互。内页：通过主页中的超级链接，打开的网页就是内页。动态网页：是指使用ASP、PHP、JSP、ASP.NET等程序生成的网页，可以与浏览者进行交互，也称为交互式网页。LOGO图标导航条分类导航条内容模块版尾模块

网页设计相关的程序设计语言HTML、CSS、JavaScript脚本是网页设计最核心也是最基础的技术。结构HTML的主要功能是定义网页的基本结构外观CSS主要功能是定义网页的外观行为JavaScript脚本的主要功能是定义网页的行为。

网页设计相关的程序设计语言HTMLHTML(HyperTextMarkupLanguage，超文本标记语言）HTML是由W3C（WorldWideWebConsortium，万维网联盟）所提出，主要的用途是制作网页。HTML文件是由“标签”（tag）和“属性”（attribute）所组成，统称为“元素”（element），浏览器只要看到HTML源代码，就能解析成网页。目前，最新的HTML文件是HTML5。

网页设计相关的程序设计语言CSSCSS（CascadingStyleSheets，层叠样式表）CSS也是由W3C所提出，主要用途是控制网页的外观，也就是定义网页的编排、显示、格式化及特殊效果。W3C鼓励网页设计人员使用HTML来定义网页的结构，而使用CSS来控制网页的外观，将两者的功能明确，语义更加清晰。目前，最新的CSS版本是CSS3。浏览器端script浏览器端script的主要功能是定义网页的行为。常用的有VBscript和JavaScript，其中JavaScript为主流脚本。

网页设计相关的程序设计语言经常使用JavaScript脚本来嵌入动态文本、对浏览器事件做出响应、读写HTML元素、在数据被提交到服务器之前验证数据，以及检测访客的浏览器信息等。2网页设计的流程Part◎前期策划组织◎网页的制作◎网页的测试01前期策划组织02网页制作03网页测试前期策划组织1首先要根据项目需求准确的定位，明确目标。同时要设定网站需要包含的模块，确定网页的主题和风格，规划好网站栏目并进而确定网站的色彩、网页版面布局。1.明确目标，规划网站栏目网页的配色要跟据项目的主题去确定色彩，要使用好颜色就要掌握颜色的感情和含义的。红色橙色黄色绿色蓝色紫色褐色黑色白色灰色2.网页配色前期策划组织1常用的几个网页的配色的方法。（1）需要考虑整体色系例如：用暖色系的配色方案，可以让网页呈现出温暖的感觉用冷色系的方案，就会让网页呈现出清凉、平静的感觉。2.网页配色前期策划组织1（2）底色与图形要协调使用图形作为页面的主要元素，加强底色与图形之间必须有明显的对比，这样可以突出页面内容，将图形的美感快速传递给访问者。2.网页配色前期策划组织1（3）善用色彩的调和使用近似色，让页面出现阶梯渐变的效果，这就是色彩的调和。这可以使网页避免色彩杂乱，达到页面和谐统一的效果。2.网页配色前期策划组织1（4）善用色彩的对比色彩对比是突出重点，产生强烈的视觉效果的一种常用方法。在进行色彩配色时，通过合理进行对比色的搭配使用，就可以轻易突出重点。2.网页配色前期策划组织1根据视觉流程,常见版式：水平分割、垂直分割、水平-垂直交叉分割等。3.网页的版式前期策划组织1网页的制作21.草图绘制参考页面网页的制作2例如：依据参考页面来绘制的网页的框架结构图网页的制作22.草图转化为网页将刚刚规划的网页，使用常用的网页编辑软件制作成网页。常用的网页编辑软件主要分为两个类型：纯文本编辑工具，例如记事本、Notepade++、HBuilder、eclipse等。所见即所得的网页编辑软件，例如Dreamweaver，同时要结合Photoshop图像处理软件来制作网页的背景、标题图片、按钮、动画等。网页的测试3

据浏览器的种类、客户端的要求以及网站的大小进行站点测试，通常是将站点移到一个模拟调试服务器上进行测试或编辑。检查链接功能是否可用。为了使页面对不支持的标签、样式、插件等在浏览器中能兼容且显示正常，需要进行浏览器兼容性的检查。3HTML5的概述Part◎HTML5的发展历史◎使用HTML5的五大原因◎浏览器以及浏览器内核HTML5的发展历史HTML1时间(年)1993199519972014HTML2HTML3HTML4HTML5?版本12345HTML5的发展历史1HTML1.0——在1993年6月作为互联网工程工作小组（IETF）工作草案发布。2HTML2.0——1995年11月作为RFC（RequestForComments，请求评议）1866发布。3HTML3.2——1997年1月14日，W3C推荐标准。4HTML4.0——1997年12月18日，W3C推荐标准。5HTML5——2014年10月28日，W3C推荐标准。

最终2014年10月29日，万维网联盟宣布，HTML5标准规范制定完成，并公开发布，从而，HTML5取代HTML4.01、XHTML1.0标准，实现了桌面系统和移动平台完美衔接。使用HTML5的五大原因兼容性1

在HTML5之前，几大主流浏览器厂商为了争夺市场占有率，在各自的浏览器中增加各种各样的功能，没有统一的标准，从而使得使用不同的浏览器时，常常会看到不同的页面效果。在HTML5中，纳入了所有合理的扩展功能，具备良好的跨平台性能。针对不支持新标签的老式IE浏览器，只需要简单地添加JavaScript代码就可以使用新的元素标签。使用HTML5的五大原因新增了多个新特性2新增加了内容元素，比如header、nav、section、article、footer。新增加了表单控件，比如calendar、date、time、email、url、search。新增加了用于绘画的canvas元素。新增加了用于媒体播放的video和audio元素。支持地理位置、拖曳、摄像头等API。更好的支持了本地离线储存。使用HTML5的五大原因安全机制的设计3

为保证安全性，在HTML5的规范中引入了一种新的基于来源的安全模型，该模型简单易用，同时对不同的API（ApplicationProgrammingInterface，应用程序编程接口）都可通用。使用这个安全模型，不需要借助于任何不安全的hack就能跨域进行安全对话。使用HTML5的五大原因内容和表现分离4

在清晰分离内容与表现方面，HTML5迈出了很大一步。为了避免可访问性差、代码高杂度、文件过大等问题，HTML5规范中更细致、清晰地分离了内容和表现。实际上，HTML5规范已经不支持老版本的HTML的大部分表现功能的属性。使用HTML5的五大原因简化的优势5HTML5要的就是简单，避免不必要的复杂性。为此，简化了DOCTYPE、简化了字符声明，提供了简单而强大的HTML5API，使用浏览器原生能力替代复杂的JavaScript代码。01浏览器浏览器就是一种把再互联网上的文本文档和其他文件翻译成网页的软件，通过浏览器可以快捷地阅读Internet上的内容。IEFireFoxChrome360Safari4编写第一个HTML5页面Part◎HTML5文件的编写工具◎HTML5文档的基本格式◎使用HTML5编写简单的Web页面HTML5文件的编写工具

HTML5文件实质就是一个纯文本文件，只是扩展名为.htm或者.html，能够用来输入文本的编辑工具都可以用来编写HTML5，常用的工具有NotePad++、HTML-Kit、UltralEdit、HBuilder等等，也可以使用所见即所得的Dreamweaver工具。HTMLHTML结构<html><head><title>无标题文档</title></head><body></body></html>=HTML(英文HyperTextMarkupLanguage的缩写)中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。HTML文件的扩展名：.htm或.htmlHTML语言简介HTML标签的书写规范HTML标签的格式：<html>、<a>。不区分大小写，<html>、<Html>和<HTML>一样，但建议用小写。HTML标签类别双标签：标签一般成对出现，包括开始标记符和结束标记符，例如<p></p>。单标签：某些标签只要求单一标记符号，例如<br>或者<br/>；对于HTML5，直接写为<br>。开始标签与结束标签的区别在于：结束标记符多一个斜杠“/”（不是反斜杠“\”！）。HTMLhead标记符首部标记<head></head>位于网页的开头，其中不包括网页页的任何实际内容，而是提供一些与网页页有关的特定信息。一般包含网页标题、文档属性参数等不在页面上显示的网页元素。首部标记中的内容也用相应的标记符括起来。例如，样式表（CSS）定义位于<style>和</style>之间；脚本定义位于<script></script>之间。HTMLtitle标记符在首部标记符中，最基本、最常用的标记符是标题标记<title>和</title>，用于定义网页的标题。当网页在浏览器中显示时，网页标题将在浏览器窗口的标签中显示。注意：网页标题是浏览者第一个看到的网页内容，应确保其简明扼要、有意义！HTMLbody标记符正文标记符<bo

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论