(网页设计与网站建设.ppt

重庆文理学院文理基础指导选修课 网页设计与网站建设 汪维华 等主讲 网页设计与网站建设课程组 1.1 网页大小及背景色 网页大小：780＊X 背景色：标准安全色，其它颜色。 1.3 基本图形的制作方法 图形操作对象：矩形、园、多边形等 联合 打孔 刀子工具 对齐，均分，排列 缩放，效果 举例：梅花、心型等图形制作 1.4 弧形文字制作方法 文字的输入及属性设置 路径：钢笔工具，图形边框等 文字附加到路径。 文字方向倒转。 文字效果：投影等效果。 举例：公章、logo中弧形文字等 切片应用 1.5　位图处理 位图导入：主要是jpg、gif图形 位图选取：使用选取工具加羽化、反选、等 效果处理：透明度，边缘羽化等效果处理。 位图的缩放处理。 举例：广告区背景制作并进行相应切片等 1.６　本讲上机实验要点 页面大小及背景设置。 辅助线及对象对齐练习 Logo标志制作(含弧形文字处理) 动画或广告区背景图形制作。 位图的效果处理。 公章图形等制作。 2.1　矩形导航条制作 2.2　弧形导航条制作 2.3　园角矩形导航条制作 2.4　层叠形导航条制作 2.5　凹入形导航条制作 2.6　预置超级链接区（切片） 　　　 对导航条中文字区域进行切片，为后续操作预留图形超级链接区，并配合前面完成的内容形成部分网页元素制作。 2.7　本讲上机实验要点 矩形导航条制作 弧形导航条制作 园角矩形导航条制作 层叠形导航条制作 凹入形导航条制作 3.1　导航按钮制作方法 制作艺术图形，如柱状型，内斜角型 转换为按钮，按Ｆ８建 双击打开，在滑过帧复制首帧，修改图形，点击完成。 添加并对齐文字，复制多个，并修改文字。 进行对齐，均分等操作 需要时可加上背景图像 3.2　矩形板块制作方法 直接用切片工具进行切片即可 3.4　条目板块制作 3.5　版权区域制作 画一水平线，然后切片即可，也可以直接加上版权信息，但以后修改不是很方便 3.6　本讲上机实验要点 导航按钮制作 矩形板块制作 园角板块制作 条目板块制作 版权区域制作 4.1 Fireworks文档中网页的导出 点击文件菜单→导出项 建立合理的站点结构，确定根及子文件夹，分别用来存放各类网页及网页用文件。注意：不要用中文命名文件夹或文件。 网页类型改为HTML和图像 将图像放入子文件夹选上。 点击保存。 关闭Fireworks，保存源文件，格式为PNG 4.2 页面居中及设置处理 打开DW，建立站点，注意只需用高级选项选择根文件夹即可。 点击修改菜单→页面属性，设置边界为0及编码为简体中文。 在标签区找到Table，点击后在属性面板设置居中。 4.3 网页背景处理 用Fireworks 制作背景用图形，大小1000×*， 两边做成渐变式柱状或花边式。 在CSS面板中新建CSS样式，选中重定义HTML标签和仅对该文档，选择Body。 修改背景图形及有关设置。 在1024 ×768下浏览效果 4.4 单元格背景图形处理技巧 选中单元格中的图片，在属性面板中复制路径。 删除图片引用。 在属性面板中的背景图像框中粘贴路径。 原单元格中即可放入其它网页元素，如文字、动画等。 4.5 单元格中嵌套表格的插入 选中单元格中的图片，在属性面板中记下高度（需要时可记下宽度）。 删除图片及其引用。 用工具栏中插入表格工具插入嵌套表格。 设置表格有关属性，如高度，边框颜色等。 4.6　本讲上机实验要点 正确导出网页及建立站点结构。 设置网页居中及边界，编码等属性 为网页建立柱状和花边背景，并在高分辨率下浏览。 将单元格中的图形设置为其背景。在单元格中插入Flash动画。 为单元格插入嵌套表格，设置表格属性。 5.1 工作原理及动画设置 简单地讲，场景（即动画播放的舞台）中每帧的二维对象按照时间的顺序播放即形成Flash动画 其中帧、关键帧、空白关键帧、过度帧、延续帧、层等是比较重要的基本概念。 动画设置的内容主要有：场景大小，背景颜色，播放速度等。 5.2　逐帧动画制作 准备多张图形或图像（也可自绘），如鸟飞过程中不同状态的图像。 分别插入到不同的关键帧，或在每一帧改变图形的形状。。 添加一层，在新层中导入一张背景图片 调节播放速度。按Ctrl+回车观看效果。 5.3　形状动画制作 在不同的关键帧添加非元件或打散的文字。 创建形状补间动画（即中间的帧由计算机补上，称做补间）。 调节播放速度。按Ctrl+回车观看效果。 5.4　直线运动动画制作 在相距较大的关键帧放入元件，创建运动补间，调节运动加速度，即可制作运动动画。 举例：小球弹跳，可在另一层加入桌面元件，小球与桌面接触瞬间加入声音。 调节播放速度。按Ctrl+回车观看效