任务1-网页设计与策划

《任务1-网页设计与策划》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页设计与制作课程组任务1:网页策划起步网页设计与制作(HTML+CSS+Javascript)目标TARGET知识目标了解网页设计的概念与术语；掌握网页、网站相关概念；掌握网页设计的流程；了解HTML5的发展历史与优势；掌握HTML5的编码方式。1任务描述2网页设计的概念与术语3网页设计的流程4HTML5的概述5编写第一个HTML5页面6综合实例7任务实施8任务拓展1任务描述Part网站主页的策划与设计软件技术专业实习生小王刚进公司，就跟随UI项目组李经理来完成新的任务，策划一个信息类职业技术学院的校园网网站门户页面。通过任务分析，客户的具体需求如下：能体现信息类

2、学校的特色，网站界面简洁、大气。网站主页的核心内容包括学校概况、组织机构、招生就业、科学研究、招聘信息等。主页上要能展现学校的整体风貌、能发布相关招标信息等。所以，本任务就是依据学校办学特色，完成“校门户网站主页面”的策划与设计。任务描述：网站主页的策划与设计2网页设计的概念与术语Part◎网页与网站的相关概念◎网页设计相关的程序设计语言1网页与网站的相关概念网页（WebPage）是网站中的一个页面，是Internet“展示信息的一种形式”。网站是万维网上相关网页的集合网页网站1网页与网站的相关概念主页：用户进入网站时看到的第一个页面就是主页（homepage）。内

3、页：通过主页中的超级链接，打开的网页就是内页。依据网页的位置，可以分为主页和内页静态网页：是指使用HTML语言编写的网页，其制作简单易学，但缺乏灵活性，在浏览网页时浏览者和服务器不发生交互。动态网页：是指使用ASP、PHP、JSP、ASP.NET等程序生成的网页，可以与浏览者进行交互，也称为交互式网页。依据表现形式，可以分为静态网页和动态网页LOGO图标导航条内容模块Banner广告条Banner广告条分类导航条内容模块内容模块版尾模块2网页设计相关的程序设计语言HTML、CSS、JavaScript是网页设计最核心也是最基础的技术。结构HTML的主要功能是定义网页

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

5、tyleSheets，层叠样式表）CSS也是由W3C所提出，主要用途是控制网页的外观，也就是定义网页的编排、显示、格式化及特殊效果。W3C鼓励网页设计人员使用HTML来定义网页的结构，而使用CSS来控制网页的外观，将两者的功能明确，语义更加清晰。目前，最新的CSS版本是CSS3。2网页设计相关的程序设计语言浏览器端script浏览器端script的主要功能是定义网页的行为。常用的有VBscript和JavaScript，其中JavaScript为主流脚本。经常使用JavaScript脚本来嵌入动态文本、对浏览器事件做出响应、读写HTML元素、在数据被提交到服务器之前

6、验证数据，以及检测访客的浏览器信息等。3网页设计的流程Part◎前期策划组织◎网页的制作◎网页的测试01前期策划组织02网页制作03网页测试前期策划组织1首先要根据项目需求准确的定位，明确目标。同时要设定网站需要包含的模块，确定网页的主题和风格，规划好网站栏目并进而确定网站的色彩、网页版面布局。1.明确目标，规划网站栏目网页的配色要跟据项目的主题去确定色彩，要使用好颜色就要掌握颜色的感情和含义的。红色橙色黄色绿色蓝色紫色褐色黑色白色灰色2.网页配色前期策划组织1常用的几个网页的配色的方法。（1）需要考虑整体色系例如：用暖色系的配色方案，可以让网页呈现出温暖的感觉用冷

7、色系的方案，就会让网页呈现出清凉、平静的感觉。2.网页配色前期策划组织1（2）底色与图形要协调使用图形作为页面的主要元素，加强底色与图形之间必须有明显的对比，这样可以突出页面内容，将图形的美感快速传递给访问者。2.网页配色前期策划组织1（3）善用色彩的调和使用近似色，让页面出现阶梯渐变的效果，这就是色彩的调和。这可以使网页避免色彩杂乱，达到页面和谐统一的效果。2.网页配色前期策划组织1（4）善用色彩的对比色彩对比是突出重点，产生强烈的视觉效果的一种常用方法。在进行色彩配色时，通过合理进行对比色的搭配使用，就可以轻易突出重点。2.网页配色前期策划组织1根据视觉流程