1、网页设计第8讲,制作网站主要页面案例三,1、操作条件,（1）素材 a）网站首页效果图样张“1.7.4.1.bmp” b）网站首页切片素材“1.7.4.2.bmp” c）网站首页切片要求“1.7.4.3.bmp” d）素材“1.7.4.4.swf” e）图片素材位于素材文件夹“1.7.4.4” （2）以上素材均在考试机指定的“素材1.7.4”文件夹内。,2、操作内容,参照样张1.7.4.1.bmp，并根据要求制作“莘莘学子”网站主要页面，具体内容如下： （1）使用Dreamweaver网页制作工具建立“莘莘学子”站点； （2）根据操作要求使用Photoshop图像设计工具对网站首页切片素材1.7
2、.4.2.bmp进行切片处理，并导出网站首页； （3）根据操作要求利用Dreamweaver在站点内制作二级功能模块页面的空白html文件，并在网页中添加相应文本； （4）根据操作要求使用素材文件夹“1.7.4.4”内的图片文件，制作完成首页的若干链接设置； （5）根据操作要求选择使用框架网页方式，制作“论坛”模块主页面的网页框架。,3、操作要求,（1）考生务必在指定位置建立考生文件夹，并在其下建立“1.7.4”子目录，将所有操作结果保存至该文件夹下。（考生文件夹命名：“网页设计制作员4级_考生准考证号_姓名”） （2） 使用Dreamweaver网页制作工具在考生文件夹 建立“莘莘学子”站点
3、，具体要求如下： a）使用Dreamweaver网页制作工具，在考生文件夹下创建“Xinxin1.7.4”站点； b）在站点文件夹中，创建图象文件夹 “images”； （3） 使用Photoshop图像设计工具对网站首页切片素材1.7.4.2.bmp进行切片处理，并导出网站首页，具体要求： a)按照网站首页切片要求1.7.4.3.bmp b)网页文件命名为index2.html，保存到创建的“莘莘学子”站点文件夹； c)图片文件按照“index_编号.jpg”命名，保存到“莘莘学子”站点的“images”目录；,3、操作要求,（4） 利用Dreamweaver在站点内制作二级功能模块页面的空
4、白html文件，并在网页中添加相应文本，要求如下： a）concept.html，添加相应文本“简介”，采用素材“1.7.4.4.swf”作为导航栏； b）history.html，添加相应文本“学校历史”，添加“首页”和“关闭窗口”的文字链接，并实现相应功能； c）story.html，添加相应文本“学校故事”，添加“首页”和“关闭窗口”的文字链接，并实现相应功能； d）education.html，添加相应文本“教育教学”，添加“首页”和“关闭窗口”的文字链接，并实现相应功能； e）文件保存在站点文件夹根目录；,3、操作要求,（5）根据操作要求使用素材文件夹“1.7.4.4”内的图片文件，
5、制作完成首页的若干链接设置，具体要求如下： a）将图片素材文件夹“1.7.4.4”内的图片文件复制到站点文件夹： b）建立“简介”的图片链接，链接至“concept.html”形式为替换本页打开方式。 c）建立“学校历史”的图片链接，链接至“history.html”，在新窗口中打开。 d）建立“学校故事”的图片链接，链接至“story.html”，在新窗口中打开。 e）建立“教育教学”的图片链接，链接至“education.html”，在新窗口中打开。 g）建立“联系我们”设置图片链接，的链接方式是邮件链接，邮件地址为：“”； h）为左上角的logo图片设置热区链接，链接至“#”；,3、操作
6、要求,（6）根据操作要求选择使用框架网页方式，制作“论坛”模块主页面的网页框架，具体要求如下： a）文件名为“bbs.html”，保存到网站文件夹根目录； b）采用左侧固定，上方嵌套型框架； c）左侧页面宽度度150像素，框架名称left，文件名为“bbs_left.html”，添加文本“bbs_left” ，保存到网站文件夹根目录； d）右侧上方页面高度100像素，框架名称top，文件名为“bbs_top.html”，添加文本“bbs_top” ，保存到网站文件夹根目录； e）右侧下方页面宽度采用相对设置，框架名称main，文件名为“bbs _main.html”，添加文本“bbs_main
7、”，保存到网站文件夹根目录。 f）在left框架的页面中添加“返回首页”链接，目标框架“main”，链接指向网站首页。,网页设计第8讲,制作网站主要页面案例四,1、操作条件,（1）素材 a）网站首页效果图样张“1.7.5.1.bmp” b）网站首页切片素材“1.7.5.2.bmp” c）网站首页切片要求“1.7.5.3.bmp” d）素材“1.7.5.4.swf” e）图片素材位于素材文件夹“1.7.5.4” （2）以上素材均在考试机指定的“素材1.7.5”文件夹内。,2、操作内容,参照样张1.7.5.1.bmp，并根据要求制作“翠海幼儿园”网站主要页面，具体内容如下： （1）使用Dreamw
8、eaver网页制作工具建立“翠海幼儿园”站点； （2）根据操作要求使用Photoshop图像设计工具对网站首页切片素材1.7.5.2.bmp进行切片处理，并导出网站首页； （3）根据操作要求利用Dreamweaver在站点内制作二级功能模块页面的空白html文件，并在网页中添加相应文本； （4）根据操作要求使用素材文件夹“1.7.5.4”内的图片文件，制作完成首页的若干链接设置； （5）根据操作要求选择使用框架网页方式，制作“访客留言”模块主页面的网页框架。,3、操作要求,（1）考生务必在指定位置建立考生文件夹，并在其下建立“1.7.5”子目录，将所有操作结果保存至该文件夹下。（考生文件夹命名
9、：“网页设计制作员4级_考生准考证号_姓名”） （2）使用Dreamweaver网页制作工具在考生文件夹 建立“翠海幼儿园”站点，具体要求如下： a）使用Dreamweaver网页制作工具，在考生文件夹下创建“Cuihai1.7.5”站点； b）在站点文件夹中，创建图象文件夹 “images”；,3、操作要求,（3） 使用Photoshop图像设计工具对网站首页切片素材1.7.5.2.bmp进行切片处理，并导出网站首页，具体要求： a)按照网站首页切片要求1.7.5.3.bmp b)网页文件命名为index2.html，保存到创建的“翠海幼儿园”站点文件夹； c)图片文件按照“index_编号
10、.jpg”命名，保存到“翠海幼儿园”站点的“images”目录； （4） 利用Dreamweaver在站点内制作二级功能模块页面的空白html文件，并在网页中添加相应文本，要求如下： a）about.html，添加相应文本“关于幼儿园”，添加“1.7.5.4.swf”导航条； b）education.html，添加相应文本“教育教学”，添加“主页”链接返回主页； c）recruit.html，添加相应文本“招生信息”，添加“主页”链接返回主页； e）文件保存在站点文件夹根目录；,3、操作要求,（5）根据操作要求使用素材文件夹“1.7.5.4”内的图片文件，制作完成首页的若干链接设置，具体要求如
11、下： a）将图片素材文件夹“1.7.5.4”内的图片文件复制到站点文件夹： b）建立“关于幼儿园”的图片链接，链接至“#”形式为替换本页打开方式。 c）建立“教育教学”的图片链接，链接至“education.html”，在新窗口中打开。 d）建立“招生信息”的图片链接，链接至“recruit.html”，在新窗口中打开。 g）建立“联系我们”设置图片链接，的链接方式是邮件链接，邮件地址为：“cuihaicuihaicom”； h）为左上角的logo图片设置热区链接，链接至“#”；,3、操作要求,（6）根据操作要求选择使用框架网页方式，制作“访客留言”模块主页面的网页框架，具体要求如下： a）文
12、件名为“message.html”，保存到网站文件夹根目录； b）采用左侧固定，上方嵌套型框架； c）左侧页面宽度度150像素，框架名称left，文件名为“message_left.html”，添加文本“message _left” ，保存到网站文件夹根目录； d）右侧上方页面高度100像素，框架名称top，文件名为“message _top.html”，添加文本“message _top” ，保存到网站文件夹根目录； e）右侧下方页面宽度采用相对设置，框架名称main，文件名为“message _main.html”，添加文本“message_main”，保存到网站文件夹根目录。 f）在left框架的页面中添加“返回首页”链接，目标框架“main”，链接指向网站首页。,谢谢！,
