网站制作实例讲解

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