第8章综合实例—个人主页制作

1、 Photoshop具备网页制作的各种功能，利用Photoshop制作、设计使网页，可以使网页变得更完美，本章通过制作“个人主页”介绍网页制作过程和网页制作的基础知识，对前面所学的知识进行综合应用。第8章 综合实例个人主页制作第9章 综合实例个人主页制作 切片工具切片工具 存储为存储为Web所用格式所用格式 网页制作基本知识网页制作基本知识 网页组成的要素网页组成的要素 网页版面设计网页版面设计 创建创建 Web 照片画廊照片画廊 【学习目标】第9章 综合实例个人主页制作 切片是图像的一块矩形区域，可用于在产生的切片是图像的一块矩形区域，可用于在产生的 Web Web 页中创建链接、翻转和动画

2、。通过将图像划分成页中创建链接、翻转和动画。通过将图像划分成切片，可以更好地对其功能进行控制，并改善图像文切片，可以更好地对其功能进行控制，并改善图像文件大小的优化。件大小的优化。切片第9章 综合实例个人主页制作按照其内容类型或创建方式分类，主要有以下几按照其内容类型或创建方式分类，主要有以下几种：种：用户切片用户切片使用切片工具创建的切片。使用切片工具创建的切片。基于图层的切片基于图层的切片基于图层的内容创建的切片，基于图层的切片是基于图层的内容创建的切片，基于图层的切片是用用“图层图层”控制面板创建的。控制面板创建的。切片切片类型切片类型 第9章 综合实例个人主页制作自动切片自动切片 用户

3、切片或基于图层的切片未定义的空间自用户切片或基于图层的切片未定义的空间自动填充的切片。在创建新的用户切片或基于图层动填充的切片。在创建新的用户切片或基于图层的切片时，其余区域将会自动生成切片。每次添的切片时，其余区域将会自动生成切片。每次添加或编辑用户切片或基于图层的切片时都重新生加或编辑用户切片或基于图层的切片时都重新生成自动切片。可以将自动切片转换为用户切片。成自动切片。可以将自动切片转换为用户切片。第9章 综合实例个人主页制作 选择菜单命令选择菜单命令“文件文件存储为存储为 Web 所用格式所用格式”，弹出弹出“存储为存储为 Web 所用格式所用格式”对话框，使用对话框，使用“存储为存储

4、为 Web 所用格式所用格式”对话框可选择优化选项并预览经过优对话框可选择优化选项并预览经过优化的图片。设置完成后单击化的图片。设置完成后单击“存储存储”按钮，弹出按钮，弹出“将将优化效果存储为优化效果存储为”对话框，在对话框中的对话框，在对话框中的“保存类型保存类型”选项中，有以下三个选项：选项中，有以下三个选项：存储为Web所用格式第9章 综合实例个人主页制作 HTML 和图像和图像 生成一个生成一个 HTML 文件和对应于图片中每个文件和对应于图片中每个切片的图像文件。切片的图像文件。HTML 文件包括文档中任何链接、图文件包括文档中任何链接、图像映射和其他效果的代码。像映射和其他效果的

5、代码。 所有切片的图像文件存放在所有切片的图像文件存放在自动创建的自动创建的images文件夹中。文件夹中。 仅限图像仅限图像 以指定的优化设置存储图片。如果图片包含多个以指定的优化设置存储图片。如果图片包含多个切片，则每个切片将存储为一个单独的文件。切片，则每个切片将存储为一个单独的文件。 仅限仅限 HTML 生成生成 HTML 文件但不存储任何图像文件。文件但不存储任何图像文件。第9章 综合实例个人主页制作首页首页 首页是指一个网站的主索引页，是了解网站概貌首页是指一个网站的主索引页，是了解网站概貌并引导查阅重点内容的向导。并引导查阅重点内容的向导。 一般默认文件名为：一般默认文件名为：i

6、ndex.htm或或index.html等。等。页面尺寸页面尺寸 页面尺寸和显示器大小及分辨率有关系，页面标页面尺寸和显示器大小及分辨率有关系，页面标准为准为800*600分辨率，按分辨率，按778*434像素制作，页面标准像素制作，页面标准1024*768分辨率，按分辨率，按1003x600 像素制作。页面长度原像素制作。页面长度原则上不超过则上不超过3屏，宽度不超过屏，宽度不超过1屏。屏。网页制作基本知识 第9章 综合实例个人主页制作BannerBanner叫旗帜广告或横幅广告，还有多种称呼，如叫旗帜广告或横幅广告，还有多种称呼，如全幅广告、条幅广告等。通常采用图片、动画、全幅广告、条幅广

7、告等。通常采用图片、动画、Flash等方式来制作。一般放在网页的上方，以吸引访问者等方式来制作。一般放在网页的上方，以吸引访问者浏览和点击，也可以放置在网页上的不同位置，在用浏览和点击，也可以放置在网页上的不同位置，在用户浏览网页信息的同时，吸引用户对于广告信息的关户浏览网页信息的同时，吸引用户对于广告信息的关注。注。网站的标准色彩网站的标准色彩标准色彩是指能体现网站形象和延伸内涵的色彩。标准色彩是指能体现网站形象和延伸内涵的色彩。一个网站的标准色彩一般不超过一个网站的标准色彩一般不超过3种。标准色彩要用于种。标准色彩要用于网站的标志，标题，主菜单和主色块。给人以整体统网站的标志，标题，主菜单

8、和主色块。给人以整体统一的感觉。一的感觉。网页制作基本知识 第9章 综合实例个人主页制作标题标题标题用来提示页面的主要内容，这一信息将出现在标题用来提示页面的主要内容，这一信息将出现在浏览器的标题栏中，它的作用就是引导访问者清楚地浏览器的标题栏中，它的作用就是引导访问者清楚地浏览网站的各项内容。浏览网站的各项内容。网页组成的要素 第9章 综合实例个人主页制作标志（标志（Logo） 网站的标志（网站的标志（Logo），就是站点的标志图案，一般会），就是站点的标志图案，一般会出现在站点的每一个页面上，是网站给人的第一印象。这出现在站点的每一个页面上，是网站给人的第一印象。这如同一个产品的商标，集中

9、体现了该网站的特色、内容及如同一个产品的商标，集中体现了该网站的特色、内容及其内在的文化内涵和理念，标志的作用最重要的就是表达其内在的文化内涵和理念，标志的作用最重要的就是表达网站的理念、便于人们识别，广泛用于站点的连接、宣传网站的理念、便于人们识别，广泛用于站点的连接、宣传等。目前网站的标志有三种规格：等。目前网站的标志有三种规格：88*31、120*60 、120*90。 网站标志的设计网站标志的设计(Logo)最简单的方式可以用网站的英最简单的方式可以用网站的英文名称作标志，采用不同的字体或字母的变形和字母的组文名称作标志，采用不同的字体或字母的变形和字母的组合制作标志。可以是网站有代表

10、性的人物、动物、花草等，合制作标志。可以是网站有代表性的人物、动物、花草等，以此作为设计的蓝本，再进行卡通化或艺术；也可以是用以此作为设计的蓝本，再进行卡通化或艺术；也可以是用有代表的物品作为标志。有代表的物品作为标志。第9章 综合实例个人主页制作页眉页眉 页眉指的是页面上端的部分，大多数网站在页眉位页眉指的是页面上端的部分，大多数网站在页眉位置设置网站宗旨、宣传口号、广告语等。置设置网站宗旨、宣传口号、广告语等。页脚页脚 页脚是页面底端部分，通常用来显示站点所属公司页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超连（社团）的名称、地址、版权信息、电子信

11、箱的超连接等。接等。网页组成的要素 第9章 综合实例个人主页制作导航导航 导航是网页设计中的重要部分。一般网站的导航位导航是网页设计中的重要部分。一般网站的导航位置在每个页面中出现的位置是固定的。导航一般有四置在每个页面中出现的位置是固定的。导航一般有四种位置：左侧、右侧、顶部和底部。有的站点为了增种位置：左侧、右侧、顶部和底部。有的站点为了增加页面的可访问性，运用了多种导航。加页面的可访问性，运用了多种导航。网页组成的要素 第9章 综合实例个人主页制作主体内容主体内容 主体内容是页面设计的主体元素。它一般是主体内容是页面设计的主体元素。它一般是二级连接内容的标题，或者是内容提要，或者是二级连

12、接内容的标题，或者是内容提要，或者是内容的部分摘录。表现手法一般是文字和图像相内容的部分摘录。表现手法一般是文字和图像相结合。它的布局通常按内容的分类进行分栏安排。结合。它的布局通常按内容的分类进行分栏安排。页面的注意力值一般是按照从上到下、从左到右页面的注意力值一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的的顺序排列，所以重要的内容一般安排在页面的做上位置，次要的内容安排在右下方。做上位置，次要的内容安排在右下方。第9章 综合实例个人主页制作“T”结构布局结构布局指页面顶部为横条网站标志指页面顶部为横条网站标志+广告条，下方左面为广告条，下方左面为主菜单，右面显示内容

13、的布局，整体效果类似英文字主菜单，右面显示内容的布局，整体效果类似英文字母母“T”。这是网页设计中最常用的一种布局方式。这。这是网页设计中最常用的一种布局方式。这种布局的优点是页面结构清晰，主次分明、规矩。种布局的优点是页面结构清晰，主次分明、规矩。 网页版面设计 第9章 综合实例个人主页制作“口口”型布局型布局 页面一般上下各有一个广告条，左面是主菜页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。页面拥挤，不够灵活。

14、“三三”型布局型布局 页面上横向两条色块，将页面整体分割为四页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。这种布局多用于国部分，色块中大多放广告条。这种布局多用于国外站点，国内用的不多。外站点，国内用的不多。第9章 综合实例个人主页制作对称对比布局对称对比布局采取左右或者上下对称的布局，一般用于设计型站采取左右或者上下对称的布局，一般用于设计型站点。优点是视觉冲击力强。点。优点是视觉冲击力强。POP布局布局POP引自广告术语，页面布局像一张宣传海报，以引自广告术语，页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。优点是漂亮吸引一张精美图片作为页面的设计中心。优点是漂亮吸引人。人。在进行网页设计时，应根据网页的主题