网站制作实例讲解.pptVIP

网站建设实例讲解 （1）栏目设置 （2）颜色设计 （3）整体布局设计 （4）头部设计 （5）导航条和背景图像制作 （6）制作“主广告区”、“信息分类”区与页脚 （7）创建样式 （8）添加导航栏信息与分类信息 （9）添加页脚及公告栏、标语栏信息 （10）制作首页 （11）其他页面链接制作 （12）添加网站链接 实例讲解－ （1）栏目设置 根据网站的主题来确定网站的栏目 例如以建立一个教育站点（如Internet与网页设计站点）为例： 分析： 既有组织类站点的功能 又有信息类站点的功能 栏目设置为： 课程大纲——介绍课程的学习大纲，自学大纲 课程内容——课程的具体内容，提供对应的PPT下载 资料素材——分类提供相关学习资料、建站素材 课程练习——提供各章节的对应练习题 课程互动——提问与解答 娱乐放松——提供娱乐链接 实例讲解－ （2）颜色设计 可采用配色软件来完成——一般主色少于四种颜色 人对色彩的联想： 红色：热情、震撼、高贵、力量来源、刺激、上进 灰色：压抑、暧昧、内向、失望、消极 蓝色：清凉、哀伤、沉稳、深远、开朗 黄色：高贵、富有、灿烂、活泼 黑色：严肃、夜晚、沉着 白色：纯洁、简单、洁净 绿色：植物、生命、生机 紫色：浪漫、富贵 棕色：大地、厚朴  实例讲解－ （2）颜色设计 设计用色实例 1、这是一个娱乐类的综合性网站UGO，他的配色方案是： 背景色为黑色RGB为（0，0，0）中嵌套RGB（0，0，82）， 字体白色RGB（255,255,255）, 菜单为RGB（77,114,159）。 虽以黑蓝为主色调，但是配以漂亮的图片，给人的感觉是生机盎然，充满了互动色彩和青春气息。 实例讲解－ （2）颜色设计 设计用色实例 2、下面的这个网站是的微软公司网站 ： 背景颜色使用蓝色RGB为（0，151，254）， 菜单为黑色RGB（0，0，11）， 菜单为灰色RGB（200，200，200）， 字体为黑色RGB（0，0，0） 。 实例讲解－ （2）颜色设计 设计用色实例 3、下面的网站Smirnoff采用红黑色调为主，很体现公司的个性： 他使用的主色调是RGB（200，9，0），配以抽象的图形， 文字使用的是RGB（213，229，167） 实例讲解－ （2）颜色设计 设计用色实例 5、一般网页颜色的搭配不要超过四种主要颜色，否则就有杂乱之感。下面的这个网站远远的超过了四种颜色，但是她并不失美丽。因此重要的还是色彩的驾驭能力。 实例讲解－ （3）整体布局设计 1、可先思考网站的整体布局格式； 2、而后通过DreamWeaver新建一个站点。准备设计网页。 实例讲解－ （3）整体布局设计 3、绘制布局——导航条绘制 （1）工具条－布局－布局模式－使用布局表格进行绘制。 在属性面板中设置表格宽：756pt；高：45pt 右键单击表格－对齐－居中对齐 （2）设置用于放置导航栏的布局单元格 选择“绘制布局单元格”按钮进行布局 一次左右绘制两个布局单元格，宽度可在以后的制作中据要求进行调节。 统样的方式在代码中为导航栏设置注释标记。 实例讲解－ （3）整体布局设计 3、绘制布局——“课程介绍” 采用同上的方式绘制“课程介绍”区域。宽756，高190（可据实际高度设定），居中。 绘制单元格，宽180，高190，用于放置“信息提示”板块 在右上方绘制单元格，宽550，高19，用于放置课程介绍的标题 剩下的即为绘制“课程介绍”板块。 接着写上说明。 实例讲解－ （3）整体布局设计 3、绘制布局——“主信息区”板块 （1）绘制布局表格：宽756，高564 （2）在刚才的布局表格内再绘制布局表格，宽180，高564 （3）绘制布局单元格：——主信息区板块中“信息分类”区 使用CTRL键：连续绘制多个单元格 使用ALT键：禁止表格靠齐 点击绘制单元格按钮后，再按住CTRL键可不断绘制单元格。 （4）绘制主信息区板块中的主信息区 用布局单元格绘制信息标语栏：宽550，高19 用布局表格绘制标语栏下方的主信息区： 实例讲解－ （3）整体布局设计 3、绘制布局——页脚 （1）绘制布局表格：宽756，高75，居中对齐 绘制730×15的布局单元格 再绘制730×43的布局单元格 再绘制730×16的布局单元格 实例讲解－ （3）整体布局设计 4、头部设计 （1）可以通过PhotoShop或FireWork制作头部的图片 （2）或者从网上寻找素材。 实例讲解－ （3）整体布局设计 5、导航条和背景图像制作 使用Fireworks制作 6、制作“课程介绍区”、“信息分类”区与页脚 使用Fireworks制作 页脚直接设置背景颜色 7、创建样式 body:方框－上边界：0 td：字号12px .biaoti：字号12px .yanse：文字为白色