第四章网页项目上机实施.pptVIP

第四章　网页项目上机实施 一、设计网页效果图 二、建站并布局首页 三、添加文字、图片、版权信息等 四、根据网页效果设计网页CSS 五、设计banner动画和广告动画 六、处理视频、声音等信息 第一节　设计网页效果图 4.1.1????网页设计的基本原则 4.1.2????网页效果图制作过程（Photoshop） 4.1.3????切片 4.1.4　项目1：小型超市 4.1.1????网页设计的基本原则 一、反差效果 好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点，注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。 1、图片反差 4.1.1????网页设计的基本原则 2、颜色反差 恰到好处地使用少量颜色，是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色，也可以在一张图片或插图的颜色里面应用。 4.1.1????网页设计的基本原则 3、字体反差 如果你想通过字体来产生反差效果，就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆，并让设计变得模糊。不过把字体大小弄得很不一样就会非常有效果，或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的，如果你将两种外形差别明显的两种字体排在一块，就会对它们带来的视觉冲击效果感到惊奇。 4.1?.1???网页设计的基本原则 二、重复原则 重复的设计元素可以使页面显得很连贯，还能提升品牌。在web设计中，可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。 4.1?.1???网页设计的基本原则 4.1?.1???网页设计的基本原则 三、分类原则 只有在将相关元素分组，将无关元素分开的时候才会用到这个原则。假如你将所有东西都分到同一块文本块中，绝对会摧毁用户的体验。这就是为什么使用头部标签和适当的留空是那么的重要。 4.1.2????网页效果图的制作过程(Photoshop) 4.1.3????切 片 4.1.4????项目2--装载机企业 第二节　建站并布局首页 4.2.1????本地站点配置和管理 4.2.2????网页布局的类型 4.2.3????表格的基本操作 4.2.4　表格布局 4.2.5 项目2—实战演练 4.2.6 层布局 4.2.7 框架布局 4.2.8 项目3—实战演练 4.2.1????本地站点配置和管理 4.2.2????网页布局的类型 4.2.2??网页的页面布局 1、关于第一屏 一般来讲，在800×600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px×435px. 4.2.2??网页的页面布局 2、有关导航栏的位置 一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑 4.2.2??网页的页面布局 3、 什么样的布局是最好的 如果内容非常多，就要考虑用“国字型”或拐角型； 如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型； 那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活； 而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选； Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。 4.2.3??表格的基本操作 1、插入表格 　　　【插入】｜【表格】命令，或单击【插入】栏中的【常用】类型中的【插入表格】按钮 理解单元格，表格，间距，填充，边框。 居中｜插入一行一列表格，各项值如图： 　理解表格、单元格： 4.2.3??表格的基本操作 （2）、调整行和列的宽度 鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。 4、设置表格和单元格的属性 （1）设置表格属性 （2）设置单元格属性 5、添加/删除行列 （1）通过表格【属性】面板增加与删除表格的行和列 （2）通过【修改】菜单完成增加与删除表格的行和列 4.2.3??表格的基本操作 6、单元格的合并和拆分 （1）、合并单元格 　　　按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。 4.2.3??表格的基本操作 （2）、拆分单元格 　　　在单元格中单击，选中单元格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。