网页设计制作第7讲.ppt

网页设计第七讲 制作网站主要页面案例一 1 1 操作条件 1 素材a 网站首页效果图样张 1 7 2 1 bmp b 网站首页切片素材 1 7 2 3 bmp c 网站首页切片要求 1 7 2 2 bmp d 素材 1 7 2 4 swf e 图片素材文件夹 1 7 2 4 2 以上素材均在指定的 素材 1 7 2 文件夹内 2 2 操作内容 参照样张1 7 2 1 bmp 并根据要求制作 凝玉轩 网站主要页面 具体内容如下 1 使用Dreamweaver网页制作工具建立 凝玉轩 站点 2 根据操作要求使用Photoshop图像设计工具对网站首页切片素材1 7 2 2 bmp进行切片处理 并导出网站首页 3 根据操作要求利用Dreamweaver在站点内制作二级功能模块页面的空白html文件 并在网页中添加相应文本 4 根据操作要求修改素材文件夹 1 7 2 4 内的网站首页文件 完成首页的若干链接设置 5 根据操作要求选择使用框架网页方式 制作 访客留言 模块主页面的网页框架 3 3 操作要求 1 在指定位置建立考生文件夹 并在其下建立 1 7 2 子目录 将所有操作结果保存至该文件夹下 考生文件夹命名 网页设计制作员4级 考生准考证号 姓名 2 使用Dreamweaver网页制作工具在考生文件夹建立 凝玉轩 站点 具体要求如下 a 使用Dreamweaver网页制作工具 在考生文件夹下创建 NingYuXuan2 2 站点 b 在站点文件夹中 创建图象文件夹 images 4 3 使用Photoshop图像设计工具对网站首页切片素材1 7 2 3 bmp进行切片处理 并导出网站首页 具体要求 a 按照网站首页切片要求1 7 2 2 bmp对网站首页切片素材1 7 2 3 bmp进行切片 b 网页文件命名为index html 保存到创建的 凝玉轩 站点文件夹 c 图片文件按照 index 编号 jpg 命名 保存到 凝玉轩 站点的 images 目录 4 利用Dreamweaver在站点内制作二级功能模块页面的空白html文件 并在网页中添加相应文本 要求如下 a show html 添加相应文本 饰品展示 在页面上引用素材1 7 2 4 swf b owner html 添加相应文本 店铺主人 添加返回首页链接 添加关闭窗口按钮 并实现链接及按钮功能 c knows html 添加相应文本 玉饰知识 添加返回首页链接 并实现链接功能 d 文件保存在站点文件夹根目录 5 5 根据操作要求修改素材文件夹 1 7 2 内的网站首页文件 完成首页的若干链接设置 具体要求如下 a 将图片素材文件夹 1 7 2 4 内的网站首页按钮图片文件复制到站点文件夹 b 建立 首页 的图片链接 链接至 形式为替换本页打开方式 c 建立 饰品展示 的图片链接 链接至 show html 在新窗口中打开 d 建立 店铺主人 的图片链接 链接至 owner html 在新窗口中打开 e 建立 玉饰知识 的图片链接 链接至 knows html 在新窗口中打开 f 建立 客户留言 的图片链接 链接至 message html 在新窗口中打开 g 建立 联系我们 设置图片链接 的链接方式是邮件链接 邮件地址为 ningyuxuan h 建立玉器小常识右侧的 more 设置热区链接 链接至 6 6 根据操作要求选择使用框架网页方式 制作 访客留言 模块主页面的网页框架 具体要求如下 a 文件名为 message html 保存到网站文件夹根目录 b 采用T型框架 c 顶端页面高度120像素 框架名称top 文件名为 message top html 添加文本 message top 文件保存到网站文件夹根目录 d 左侧页面宽度150像素 框架名称left 文件名为 message left html 添加文本 message left 保存到网站文件夹根目录 e 框架名称main 文件名为 message main html 添加文本 message main 保存到网站文件夹根目录 f 在top框架的页面中添加 返回首页 链接 目标框架 main 链接指向网站首页 7 网页设计 制作网站主要页面案例二 8 1 操作条件 1 素材a 网站首页效果图样张 1 7 3 1 bmp b 网站首页切片素材 1 7 3 3 bmp c 网站首页切片要求 1 7 3 2 bmp d 素材 1 7 3 4 swf e 完整网站首页文件及图片文件夹 1 7 3 4 2 以上素材均在指定的 素材 1 7 3 文件夹内 9 2 操作内容 参照样张1 7 3 1 bmp 并根据要求制作 神话 网站主要页面 具体内容如下 1 使用Dreamweaver网页制作工具建立 神话 站点 2 根据操作要求使用Photoshop图像设计工具对网站首页切片素材1 7 3 2 bmp进行切片处理 并导出网站首页 3 根据操作要求利用Dreamweaver在站点内制作二级功能模块页面的空白html文件 并在网页中添加相应文本 4 根据操作要求修改素材文件夹 1 7 3 4 内的网站首页文件 完成首页的若干链接设置 5 根据操作要求选择使用框架网页方式 制作 论坛 模块主页面的网页框架 10 3 操作要求 1 在指定位置建立考生文件夹 并在其下建立 1 7 3 子目录 将所有操作结果保存至该文件夹下 考生文件夹命名 网页设计制作员4级 考生准考证号 姓名 2 使用Dreamweaver网页制作工具在考生文件夹建立 神话 站点 具体要求如下 a 使用Dreamweaver网页制作工具 在考生文件夹下创建 shenhua1 7 3 站点 b 在站点文件夹中 创建图象文件夹 images 11 3 使用Photoshop图像设计工具对网站首页切片素材1 7 3 3 bmp进行切片处理 并导出网站首页 具体要求 a 按照网站首页切片要求1 7 3 2 bmpb 网页文件命名为index2 html 保存到创建的 神话 站点文件夹 c 图片文件按照 index 编号 jpg 命名 保存到 神话 站点的 images 目录 4 利用Dreamweaver在站点内制作二级功能模块页面的空白html文件 并在网页中添加相应文本 要求如下 a OTP html 添加相应文本 OTP通行证 添加素材 1 7 3 4 swf b HELP html 添加相应文本 帮助中心 添加 首页 链接和 关闭窗口按钮 并实现相应功能 c FAQ html 添加相应文本 FAQ 添加 首页 链接和 关闭窗口按钮 并实现相应功能 d 文件保存在站点文件夹根目录 12 5 根据操作要求修改素材文件夹 1 7 3 4 内的网站首页文件 完成首页的若干链接设置 具体要求如下 a 将图片素材文件夹 1 7 3 4 内的的网站首页图片文件复制到站点文件夹 b 建立 OTP通行证 的图片链接 链接至 OTP html 形式为替换本页打开方式 c 建立 帮助中心 的图片链接 链接至 HELP html 在新窗口中打开 d 建立 FAQ 的图片链接 链接至 FAQ html 在新窗口中打开 e 为文本 webmaster 设置邮件链接 邮件地址为 webmaster f 为左下角的logo图片设置热区链接 链接至 13 6 根据操作要求选择使用框架网页方式 制作 论坛 模块主页面的网页框架 具体要求如下 a 文件名为 bbs html 保存到网站文件夹根目录 b 采用左侧固定 上方嵌套型框架 页面大小为780像素 428像素 c 左侧页面宽度度150像素 框架名称left 文件名为 bbs left html 添加文本 bbs left 保存到网站文件夹根目录 d 右侧上方页面高度100像