网页设计方案与制作概述教学.ppt

第一章 网页设计与制作概述,学习目标: 了解有关网页的一些基本概念 了解网站的基本结构特性和网页的布局 了解网页制作的基本工具和开发语言 了解站点规划的基本流程,1.1 互联网与网站,1.1.1 基本概念: 网页：在网站中，供用户阅读的一个个页面，就称之为“网页”，又称为Web页。 万维网（World Wide Web）：万维网简称WWW或3W，是目前Internet（因特网）上最流行的一种基于超文本形式的资源组织形式。 浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源。,超文本标记语言（Hyper Text Markup Language，简称HTML）：它是WWW创建超媒体文本的语言，它也是网页创建中最基本的语言，制作的任何一个网页都是基于HTML文本标识的。,超级链接:这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。,1.1.2 网站分类 门户网站 如：新浪 职能网站 如：阿里巴巴 专业网站 如：CCTV（） 个人网站 如：吴山明教授个人网站,1.2网站结构与网页布局,1.2.1 网站结构 1归类站点内容 2项目放置的位置 3导航草图设计 4创建设计草图,1.2.2 网页页面布局 1网页设计和布局原则 2网站命名和标志 网站命名应遵循以下的原则： （1）体现网站的主题，凝练，概括性强。 （2）合法、合情并合理。 （3）字数不要太多，一般控制在6个字以内。 （4）有个性，体现一定的内涵，可给浏览者更多的视觉冲击力和空间想像力 。,3网页的色彩 网页的色彩是树立网站形象的关键因素之一。在搭配网页色彩时，要注意色彩的鲜明性、独特性、合适性和联想性。 4网页的文字 注意以下基本原则: （1）不要使用超过3种字体类型，否则网页看起来将显得杂乱，没有主题。 （2）不要用太大的字，因为版面空间非常宝贵和有限，粗陋的大字体不能带给浏览者更多的信息 （3）最好不要使用不停闪烁的文字。 （4）标题的字体比正文要稍大一些，颜色也应有所区别。,5网页版面和布局 网页布局主要有以下3种结构。 型结构 T型结构 三型结构,1.3网页制作工具,1.3.1 网页布局工具 1Dreamweaver 2Frontpage 1.3.2网页美化工具 1图像处理软件:Photoshop,Fireworks 2动画制作软件 :FLASH,Swish、Ulead GIF Animator,Ulead Cool 3D、3D Flash Animator、Xara3D,1.4 网页开发语言,1.4.1 HTML语言 1.4.2 动态网站开发语言 1ASP 2JSP 3PHP,1.5网站规划,1.5.1 网站制作流程 1确定网站主题 2搜集资料 3规划网站 4选择合适的制作工具 5制作网页 6上传测试 7推广宣传,1.5.2 网站策划书 1网站建设目的及功能定位 2网站内容模块规划 3网站语言 4网站设计风格 5网站架设描述,6网站信息布局图,7网站发布与推广 8技术支持 9网站服务费用 10有效期,1.5.3 站点评测 1美工设计 2栏目内容 3浏览速度 4技术含量 5用户兴趣,本章小结,本章介绍了网页设计与制作的基本概念和基本知识、常用的网页制作工具、网站的基本结构和网页布局等内容。通过本章的学习使读者对网页的设计与制作过程有一个概貌性的了解。,1.HTML 的主要作用 （l）格式化网页文本。 如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。 （2）建立超链接。 通过超链接检索在线信息，只需单击鼠标即可到达任何地方。 （3）创建列表。 把信息用一种易读的方式表现出来。 （4）插入图像。 使网页图文并茂，还可以设置图像的大小、边框、对齐方式等属性。,1.HTML 的主要作用 （5）建立表格。 表格为浏览者提供了快速找到需要信息的显示方式，还可以用表格来设定整个网页的布局。 （6）加入多媒体。 可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。 （7）交互式表单。 为获取远程服务而设计表单，可用于检索信息、定购产品等。,2.HTML 的编辑环境 任何文本编辑器都可用来制作网页，包括记事本、写字板、 Word 、WPS等编辑程序。但在保存时，一定要用.htm 或.html格式存盘。,