网页制作的课件(精品·公开课件).ppt

网页制作与设计 掌握网页制作的常识，熟悉网页制作的基本技术，熟练掌握HTML标记语言、会用可视化网页制作软件Frontpage或Dreamweaver、会用网页图形处理软件Frieworks或Photoshop、会用矢量动画Flash，能自己独立建立站点、制作网页。 《网页制作与设计教程》 陈语林编著 中国水利水电出版社 教学方式 采用课堂教学与课外上机实践相结合的方式进行，课堂教学在于帮助学生建立网页设计的理念、学习网页设计的常用工具的使用、图像动画制作工具的使用等，课外上机实践着重于网页设计制作及辅助工具软件的使用，以提高学生利用这些工具来解决实际问题的能力 . 万维网使得浏览Internet变得非常简单，只要用鼠标单击，就可以显示图文并茂的网页，网页中可以包含声音、视频、动画等，这也是万维网在Internet中最受欢迎、使用最多的原因。 WWW：WWW是World Wide Web的缩写，也可以简写为W3、3W、Web等，称为国际互联网（Internet），又称万维网，它是基于超文本的信息查询和信息发布的系统。 HTTP：超文本传输协议HTTP（Hyper Text Transfer Protocol）. 网页(Web Page)：是通过WWW发布的包含有文本、图片、声音、动画等多媒体信息的页面，它是网站最基本的组成单位。众多的网页有机地集合在一起就组成了网站。 网站：WWW服务器上相互链接的一系列网页组成一个网站（Web Site）。网站是WWW上的一个结点。如果输入地址时仅指定WWW服务器域名或IP地址，而不加路径信息，则将打开网站默认的首页（Home Page），也称为主页。首页是一个网站中最重要的网页，通常包含最重要的信息以及指向各分栏目的超链接。 超文本(Hypertext)：具有超级链接功能的文本文件叫超文本。超文本文件中的某些字、符号或短语起着“热链路”（Hotlink）的作用，在显示出来时其字体或颜色发生变化或者标有下横线、以区别于一般的正文。 第一章 网站设计 网站设计是一个很大的课题。本章将网页设计的软件透明化，从网站的主题、结构、风格、布局等讲述一个网站的制作构思。这是从一个最大的范围去讲述网站设计这个主题的。 1.定位你的网站主题和名称；2.定位你的网站CI形象； 3.确定你的栏目和版块； 4.网站的整体风格创意设计 5.网站的层次结构和链接结构6.首页的设计 7.版面布局的窍门 8.色彩的搭配 9.效果与速度 10.替浏览者考虑 11.细微之处见功力 12.建设完成度与推出时间 13.交互性与亲和度 14.考虑不同的浏览器和分辨率 15.字体的设置和表格的嵌套 16.新技术的运用取舍 17.设计好你的banner和位置 18.语句文字--融入感情 教学重点与难点 网站的目录结构 网站的连接结构 网站创意 网站布局 欣赏海尔集团的网站： 欣赏凤凰古城旅游网的网站： 输入网址： 首页的模块划分采用的是左右两大模块，内容划分清晰。 该首页给人的视觉效果是一种古朴的气息迎面扑来，整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。 首页题头的凤凰古城图片恰到好处，突出了主题，同时也起到了广告作用。 导航栏的文字颇具特色。 欣赏中国大众体育网的网站： 该网站的引导页整体视觉感受简洁、现代感较强。 背景用大块的红色，给人热烈、运动的感觉。 在字体的运用上有大有小，有长有短，显得有对比，文字居中对齐，显得庄重。 图片的动态效果突出主题，产生运动的视觉感受。 该网站的首页整体视觉感受清晰、和谐。 整体颜色采用红色，既统一又有变化，主体突出。 欣赏新东方教育网站： 该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块 颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。 其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。 每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。 欣赏谷歌搜索（ Google ）网站：欣赏百度搜索（ baidu ）网站： 课堂实践 浏览几个网站，对所浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果等。从以下网站中选择两个网站进行赏析。 （1）青岛大学网站： （2）清华大学网站: （3）当当购物网站： （4）新浪网站： （5）太平洋电脑网： （6）腾迅网站： 1.1 定位网站的主题和名称 一、题材的选择 美国《个人电脑》杂志（