网页设计与制作 完整版电子课件.pptx

全 册 课 件 延迟符 网页设计与制作 案例说明 本案例中，将简单介绍网页和网站的基本概念、网页的构成元素及网页的本质。 案例一 指出当当网主页的构成元素 ——认识网页和网站 相关知识 网页就是我们上网时在浏览器中打开的一个个画面。网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页，如新浪网就包括新闻、财经、科技、体育、娱乐等多个板块，而每个板块又包括很多网页。 一、网页、网站和主页 另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页）。 当当网主页 二、网页的构成元素 网页中的元素按功能可分为站标、导航条、广告条、标题栏和按钮等。 站标 导航条 按钮 导航条 广告条 标题栏 三、网页的本质 一般情况下，网页中除了包含网页文件（扩展名为.html、.asp等）外，还有图像文件（扩展名为.jpg、.gif等）、脚本文件（扩展名为.js）、样式文件（扩展名为.css）以及视频文件（扩展名为.avi、.flv等）等。 右图显示了新华网的主页，可以看到网页中有文字、图像和动画等。 三、网页的本质 在浏览器中单击右上角的“工具”按钮 ，在弹出的菜单中选择“文件”“另存为”菜单，打开“保存网页”对话框，在“保存类型”下拉列表中选择“网页，全部（*.htm;*.html）”，将网页保存到磁盘中，便可看到网页的组成文件，如下图所示。 案例实施 启动IE浏览器，在“地址栏”中输入“当当”网址“/”，然后按回车键在浏览器中打开“当当”网站首页。 一、网页、网站和主页 在网页中指出其中的站标、导航条、广告条、标题栏等，如右图所示。 站标 导航条 广告条 标题栏 案例说明 本案例首先介绍网页设计中网页颜色的选择与搭配、网页版式及网页尺寸的设计。最后通过案例实施，简单了解网页设计与制作的岗位职责，以使初学者有更明确的学习方向和目的。 案例二 了解网页设计与制作岗位职责 ——网页设计基础 相关知识 （1）网页背景颜色最好选择白色或黑色（大部分网页均选择白色），这样颜色搭配最灵活。 一、网页颜色的选择与搭配 （2）可根据网站性质确定网站主色调，并且该主色调应贯穿于网站中的全部网页。 （3）设计网页时恰当利用同类色、邻近色和对比色，可增强网页的层次感、丰富网页的色彩或突出某些重要内容（如导航条或版块标题）。 二、网页版式设计 设计网页前应事先规划好站标、导航条、广告条和各版块位置。此外，一些基本的元素要贯穿整个网站中的各个页面，如网页上部的站标、导航条和网页底部的网站信息区。 导航条 站标 内容区 广告条 网站信息区 最好为导航条和各版块标题区设计一组形状别致、颜色突出的背景图像，以方便网页浏览者快速找到自己需要的内容，并使网页看起来更精美别致。 对每个版块而言，可通过插入典型图片来吸引访问者。 各版块之间以空白区分隔。同时，为使各版块区分明显，还可为其设置不同的背景色或加上边框。 三、网页尺寸 要根据网页和浏览者的特性，以合适的屏幕分辨率为基准来设置网页尺寸，以使浏览者更加便利地浏览网页。如游戏爱好者大部分都使用高配置系统，所以游戏网站的网页尺寸大都在1024像素×768像素以上，如下图所示。 1．屏幕分辨率对网页制作的重要性 19寸电脑显示器常用的屏幕分辨率为1280像素×1024像素；17寸电脑显示器常用的屏幕分辨率为1024像素×768像素；平板电脑显示屏常用的屏幕分辨率为768像素×1024像素；智能手机屏常用的屏幕分辨率最低为480像素×800像素，最高可以达到1920像素×1080像素。此处的数字表示显示器横向和纵向的像素（Pixel）数，如屏幕分辨率1024像素×768像素表示将显示器横向分成1024格、纵向分成768格以后，在各个格内分别赋予颜色从而形成图像。 对于网页尺寸，是没有硬性规定的。目前常见的网页宽度有1000像素、1190像素和1200像素3种，例如新浪是1000像素、淘宝和京东是1190像素，当当是1200像素。如果需要兼容不同浏览器尺寸，现在比较流行的做法是做成响应式的，即根据不同分辨率显示不同的尺寸，不过这样工作量要大很多。网页高度可根据网页内容来定，一般不要超过3屏。 2．常见网页尺寸 案例实施 一、网页、网站和主页 对于网页设计与制作初学者来说，提前了解一下网页设计与制作岗位的职责，可以在今后的学习中有更加明确的方向和目的。登录智联招聘、中华英才网等招聘类网站，搜索职位“网页设计与制作”或“前端开发”，可以搜索到相关职位，如图所示。 单击要查看的职位，可以打开该职位的详细信息页，查看职位描述和