网页项目上机实施.ppt

《网页项目上机实施.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第四章　网页项目上机实施一、设计网页效果图二、建站并布局首页三、添加文字、图片、版权信息等四、根据网页效果设计网页CSS五、设计banner动画和广告动画六、处理视频、声音等信息第一节　设计网页效果图4.1.1网页设计的基本原则4.1.2网页效果图制作过程（Photoshop）4.1.3切片4.1.4项目1：小型超市4.1.1网页设计的基本原则一、反差效果好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点，注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。1、图片反差当

2、需要很多小元素后面展示一个大尺寸插图时，这种方法很有效。4.1.1网页设计的基本原则2、颜色反差恰到好处地使用少量颜色，是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色，也可以在一张图片或插图的颜色里面应用。4.1.1网页设计的基本原则3、字体反差如果你想通过字体来产生反差效果，就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆，并让设计变得模糊。不过把字体大小弄得很不一样就会非常有效果，或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的，如果你将两种外形差别明显的两种字体排在一块，就会对它们带来的视觉冲击效果感到惊奇。4.1 .1网页设计的

3、基本原则二、重复原则重复的设计元素可以使页面显得很连贯，还能提升品牌。在web设计中，可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。4.1 .1网页设计的基本原则三、排列原则在网页中使用格栏可以是你的页面变得很干净，也可以提供一个很好的设计框架。4.1 .1网页设计的基本原则三、分类原则只有在将相关元素分组，将无关元素分开的时候才会用到这个原则。假如你将所有东西都分到同一块文本块中，绝对会摧毁用户的体验。这就是为什么使用头部标签和适当的留空是那么的重要。4.1.2网页效果图的制作过程(Photoshop)一、规划1、布局创意2、颜色选择二、制作（通过项目2进行案例演示）1、背

4、景2、图层3、工具的的使用4、滤镜（各种灯效的效果）5、文字（切片时可以隐藏）6、色彩的调整4.1.3切片1、切片软件2、切片注意事项3、切片的保存4、有链接的图片处理方法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本地站点配置和管理1、本地网页站点的配置2、站点的管理3、如何使用dreamweaver连接站点4、连接后如何测试5、项目2实例演示4.2.2网页布局的类型1、“国”字型2、拐角型3、标

5、题正文型4、左右框架型5、上下框架型6、综合框架型7、封面型8、Flash型9、变化型4.2.2网页的页面布局1、关于第一屏一般来讲，在800×600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px×435px.4.2.2网页的页面布局2、有关导航栏的位置一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑4.2.2网页的页面布局3、什么样的布局是最好的如果内容非常多，就要考虑用“国字型”或拐角型；如果内容不算太多而一些说明性的

6、东西比较多，则可以考虑标题正文型；那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活；而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选；Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。4.2.3表格的基本操作1、插入表格【插入】｜【表格】命令，或单击【插入】栏中的【常用】类型中的【插入表格】按钮理解单元格，表格，间距，填充，边框。居中｜插入一行一列表格，各项值如图：4.2.3表格的基本操作理解表格、单元格：4.2.3表格的基本操作4.2.3表格的基本操作理解表格边框、单元格边框、间距：为了便于观看填充的效果，在属性

7、面板中，填充输入为30。理解填充：单元格边框和内容之间的距离就是填充。4.2.3表格的基本操作表格包括行、列、单元格3个组成部分。选定整个表格选定行或列选定单元格2、选定表格和单元格4.2.3表格的基本操作⑴、选定表格→鼠标拖动。3、调整表格的大小4.2.3表格的基本操作（2）、调整行和列的宽度鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。为列设置