网页设计第一课Stillwatersrundeep.流静水深流静水深,人静心深人静心深Wherethereislife,thereishope。有生命必有希望。有生命必有希望本节课主要内容本节课主要内容网页和网站网页和网站网页制作工具网页制作工具网站开发流程网站开发流程网页的设计原理网页的设计原理网页设计的规范网页设计的规范2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网页解析网页解析html 网页和网站的区别很大，网站是由网页集合而网页和网站的区别很大，网站是由网页集合而成的，网页就是一个浏览页面，是一个成的，网页就是一个浏览页面，是一个htmlhtml文件，文件，浏览器是用来解读这份文件的，想要制作一个网浏览器是用来解读这份文件的，想要制作一个网站，就需要单独编辑若干个站，就需要单独编辑若干个htmlhtml文件，然后通过文件，然后通过“超链接超链接”把它们连接在一起，这样一个属于自把它们连接在一起，这样一个属于自己的网站就制作出来了。网站的话必须提供某种己的网站就制作出来了。网站的话必须提供某种服务，或不断更新某些问题服务，或不断更新某些问题, ,用来吸引人气。一用来吸引人气。一般得有自己鲜明的特色，它需要专门的技术和内般得有自己鲜明的特色，它需要专门的技术和内容维护人员。容维护人员。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网页解析网页解析html下面就是网页结构的整体框架：下面就是网页结构的整体框架：!HTML ! ! 2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网站的核心网站的核心网站是以数据为核心，以服务器为基础的网站是以数据为核心，以服务器为基础的“浏览浏览者者- -管理员管理员- -系统管理员系统管理员”相互关联系、相互促进、相互关联系、相互促进、有机制约的信息化整体。网页则是静态页面各自有机制约的信息化整体。网页则是静态页面各自为政，仅仅提供链接的为政，仅仅提供链接的HTMLHTML文件。文件。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程制作网页的专业工具制作网页的专业工具制作网页的专业工具的功能越来越完善，操作也制作网页的专业工具的功能越来越完善，操作也越来越简单，处理图像、制作动画、发布网站的越来越简单，处理图像、制作动画、发布网站的专业软件应用得非常广泛。专业软件应用得非常广泛。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程各各 种种 工工 具具制作网页的专门工具制作网页的专门工具图像处理工具：图像处理工具：网站发布工具：网站发布工具：图标制作工具：图标制作工具：动画制作工具：动画制作工具：抓图工具：抓图工具：2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网站开发流程网站开发流程第一个阶段：规划和准备阶段。这个阶段要做的第一个阶段：规划和准备阶段。这个阶段要做的工作包括：工作包括：（1 1）需求分析、决定网站的主题、风格）需求分析、决定网站的主题、风格（2 2）收集资料、准备素材并进行整理修改）收集资料、准备素材并进行整理修改（3 3）规划网站结构和页面形式；）规划网站结构和页面形式；2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程第第 二二 阶阶 段段网页设计、制作阶段。这个阶段要做的工作包括：网页设计、制作阶段。这个阶段要做的工作包括： （1 1）网站总体设计；）网站总体设计； （2 2）设计界面、制作网站中的各个网页；）设计界面、制作网站中的各个网页； （3 3）将各个网页通过超级链接进行整合）将各个网页通过超级链接进行整合。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网站的发布、推广和维护阶段。这个阶段要做的网站的发布、推广和维护阶段。这个阶段要做的工作包括：工作包括： （1 1）测试、调试与完善网站；）测试、调试与完善网站； （2 2）发布与推广网站；）发布与推广网站； （3 3）维护和更新网站。）维护和更新网站。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程关于设计与布局的小建议关于设计与布局的小建议在设计布局的时候要注意把文字、图片在网页空在设计布局的时候要注意把文字、图片在网页空间上均匀分布并且不同形状、色彩的网页元素要间上均匀分布并且不同形状、色彩的网页元素要相互对比，以形成鲜明的视觉效果。相互对比，以形成鲜明的视觉效果。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程LOGO网站的设计网站的设计LOGOLOGO是网站的标志、名片，如同商标一样。在网是网站的标志、名片，如同商标一样。在网站设计中站设计中logologo的设计是不可缺少的一个重要环节。的设计是不可缺少的一个重要环节。logologo是网站特色和内涵的集中体现是网站特色和内涵的集中体现, ,它作用于传它作用于传递网站的定位和经营理念、同时便于人们识别。递网站的定位和经营理念、同时便于人们识别。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网页设计的色彩原则网页设计的色彩原则颜色心理反应应用情况红色 热情、活力、温暖、喜庆极易吸引人们的眼球，在网页中广泛使用橙色 时尚、轻快、温馨、热烈常常用于某些时尚新潮的网站中，如时装网站、化妆品网站等 黄色 快乐、希望、明亮、乐观营造出愉快的氛围，能够得到大部分浏览者的认可绿色 宁静、希望、清爽、自然浅绿、黄绿等颜色既有绿色的特点，又能表现出黄色的温暖，用在网站中常常能够得到青年人和儿童的喜爱蓝色 凉爽、清新、理智、平静在商业设计中，强调科技、效率的商品或企业形象，大多选用蓝色作为标准色灰色 柔和、高雅、可靠、成熟与红色、橙色等比较有视觉冲击力的颜色相比，灰色比较低调。许多高科技产品，都采用灰色作为高科技形象白色 洁白、纯真、明快、简洁通常需要和其他色彩搭配使用，多用于网站背景色黑色 深沉、高贵、庄严、优雅适合于与许多颜色搭配紫色 高贵、神秘、启发由于具有强烈的女性化性格，所以在网页设计中，除了和女性有关的商品或企业形象之外，其他类的网站一般不采用紫色作为主色2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网页页面元素的设计网页页面元素的设计网页是由文本、图像、动画、超级链接等基本元网页是由文本、图像、动画、超级链接等基本元素构成素构成2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程文文 本本一一般般情情况况下下，网网页页中中最最多多的的内内容容是是文文本本，可可以以根根据据需需要要对对其其字字体体、大大小小、颜颜色色、底底纹纹、边边框框等等属属性性进进行行设设置置。建建议议用用于于网网页页正正文文的的文文字字一一般般不不要要太太大大，也也不不要要使使用用过过多多的的字字体体，中中文文字字体体一一般般使使用宋体，大小一般使用用宋体，大小一般使用9 9磅或磅或1212像素即可。像素即可。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程图图 像像丰富多彩的图像是美化网页必不可少的元素，用丰富多彩的图像是美化网页必不可少的元素，用于网页上的图像一般为于网页上的图像一般为JPGJPG格式和格式和GIFGIF格式。网页格式。网页中的图像主要有用于点缀标题的小图片，介绍性中的图像主要有用于点缀标题的小图片，介绍性的照片，代表企业形象或栏目内容的标志性图片的照片，代表企业形象或栏目内容的标志性图片（即（即LOGOLOGO），用于宣传的广告（即），用于宣传的广告（即BannerBanner）等多）等多种形式。种形式。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程超超 级级 链链 接接超级链接是超级链接是WebWeb网页的主要特色，是指从一个网网页的主要特色，是指从一个网页指向另一个目的端的链接。这个页指向另一个目的端的链接。这个“目的端目的端”通通常是一个网页，也可以是下列情况之一：相同网常是一个网页，也可以是下列情况之一：相同网页上的不同位置、一个下载的文件、一幅图片、页上的不同位置、一个下载的文件、一幅图片、一个一个E_MailE_Mail地址等。超级链接可以是文本、按钮地址等。超级链接可以是文本、按钮或图片，鼠标指向超级链接位置时，会变成小手或图片，鼠标指向超级链接位置时，会变成小手形状。形状。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程导导 航航 栏栏导航栏是一组超级链接，用来方便地浏览导航栏是一组超级链接，用来方便地浏览站点。导航栏一般由多个按钮或者多个文站点。导航栏一般由多个按钮或者多个文本超级链接组成。本超级链接组成。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程动动 画画动画是网页中最活跃的元素，创意出众、动画是网页中最活跃的元素，创意出众、制作精致的动画是吸引浏览者眼球的有效制作精致的动画是吸引浏览者眼球的有效方法之一。但是如果网页动画太多，也会方法之一。但是如果网页动画太多，也会物极必反，使人眼花缭乱，进而产生视觉物极必反，使人眼花缭乱，进而产生视觉疲劳。疲劳。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程表表 格格表格是表格是HTMLHTML语言中的一种元素，主要用于语言中的一种元素，主要用于网页内容的布局，组织整个网页的外观，网页内容的布局，组织整个网页的外观，通过表格可以精确地控制各网页元素在网通过表格可以精确地控制各网页元素在网页中的位置。页中的位置。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程框框 架架框架是网页的一种组织形式，将互相关联框架是网页的一种组织形式，将互相关联的多个网页的内容组织在一个浏览器窗口的多个网页的内容组织在一个浏览器窗口中显示。例如在一个框架内放置导航栏，中显示。例如在一个框架内放置导航栏，另一个框架中的内容可以随着导航栏中的另一个框架中的内容可以随着导航栏中的链接而改变。链接而改变。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程表表 单单表单是用来收集访问者信息或实现一些交表单是用来收集访问者信息或实现一些交互作用的网页，浏览者填写表单的方式是互作用的网页，浏览者填写表单的方式是输入文本，选中单选按钮或复选框，从下输入文本，选中单选按钮或复选框，从下拉菜单中选择选项等拉菜单中选择选项等。2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网网 页页 欣欣 赏赏2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网网 页页 欣欣 赏赏2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网网 页页 欣欣 赏赏2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网网 页页 欣欣 赏赏2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程网网 页页 欣欣 赏赏2013年9月18日宁夏育才中学校本课程宁夏育才中学校本课程