网页设计制作第7讲.ppt

网页设计制作第7讲.ppt

《网页设计制作第7讲.ppt》由会员分享，可在线阅读，更多相关《网页设计制作第7讲.ppt（14页珍藏版）》请在冰豆网上搜索。

网页设计网页设计第七讲第七讲制作网站主要页面案例一制作网站主要页面案例一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、操作内容、操作内容参照样张参照样张1.7.2.1.bmp，并根据要求制作，并根据要求制作“凝玉轩凝玉轩”网站网站主要页面，具体内容如下：

主要页面，具体内容如下：

（1）使用）使用Dreamweaver网页制作工具建立网页制作工具建立“凝玉轩凝玉轩”站点；站点；

（2）根据操作要求使用）根据操作要求使用Photoshop图像设计工具对网站首图像设计工具对网站首页切片素材页切片素材1.7.2.2.bmp进行切片处理，并导出网站首页；进行切片处理，并导出网站首页；（3）根据操作要求利用）根据操作要求利用Dreamweaver在站点内制作二级功在站点内制作二级功能模块页面的空白能模块页面的空白html文件，并在网页中添加相应文本；文件，并在网页中添加相应文本；（4）根据操作要求修改素材文件夹）根据操作要求修改素材文件夹“1.7.2.4”内的网站首内的网站首页文件，完成首页的若干链接设置；页文件，完成首页的若干链接设置；（5）根据操作要求选择使用框架网页方式，制作）根据操作要求选择使用框架网页方式，制作“访客留访客留言言”模块主页面的网页框架。

模块主页面的网页框架。

3、操作要求操作要求

（1）在指定位置建立考生文件夹，并在其下建立）在指定位置建立考生文件夹，并在其下建立“1.7.2”子目录，将所有操作结果保存至该文件夹子目录，将所有操作结果保存至该文件夹下。

（考生文件夹命名：

下。

（考生文件夹命名：

“网页设计制作员网页设计制作员4级级_考考生准考证号生准考证号_姓名姓名”）

（2）使用）使用Dreamweaver网页制作工具在考生文件夹网页制作工具在考生文件夹建立建立“凝玉轩凝玉轩”站点，具体要求如下：

站点，具体要求如下：

a）使用）使用Dreamweaver网页制作工具，在考生文件夹网页制作工具，在考生文件夹下创建下创建“NingYuXuan2.2”站点；站点；b）在站点文件夹中，创建图象文件夹）在站点文件夹中，创建图象文件夹“images”；（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）根据操作要求修改素材文件夹）根据操作要求修改素材文件夹“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）根据操作要求选择使用框架网页方式，制作）根据操作要求选择使用框架网页方式，制作“访客访客留言留言”模块主页面的网页框架，具体要求如下：

模块主页面的网页框架，具体要求如下：

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”，链接指向网站首页。

，链接指向网站首页。

网页设计网页设计制作网站主要页面案例二制作网站主要页面案例二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”文件夹内。

文件夹内。

2、操作内容、操作内容参照样张参照样张1.7.3.1.bmp，并根据要求制作，并根据要求制作“神话神话”网站主网站主要页面，具体内容如下：

要页面，具体内容如下：

（1）使用）使用Dreamweaver网页制作工具建立网页制作工具建立“神话神话”站点；站点；

（2）根据操作要求使用）根据操作要求使用Photoshop图像设计工具对网站首图像设计工具对网站首页切片素材页切片素材1.7.3.2.bmp进行切片处理，并导出网站首页；进行切片处理，并导出网站首页；（3）根据操作要求利用）根据操作要求利用Dreamweaver在站点内制作二级功在站点内制作二级功能模块页面的空白能模块页面的空白html文件，并在网页中添加相应文本；文件，并在网页中添加相应文本；（4）根据操作要求修改素材文件夹）根据操作要求修改素材文件夹“1.7.3.4”内的网站首内的网站首页文件，完成首页的若干链接设置；页文件，完成首页的若干链接设置；（5）根据操作要求选择使用框架网页方式，制作）根据操作要求选择使用框架网页方式，制作“论坛论坛”模块主页面的网页框架。

模块主页面的网页框架。

3、操作要求、操作要求

（1）在指定位置建立考生文件夹，并在其下建立）在指定位置建立考生文件夹，并在其下建立“1.7.3”子目录，将所有操作结果保存至该文件夹子目录，将所有操作结果保存至该文件夹下。

（考生文件夹命名：

下。

（考生文件夹命名：

“网页设计制作员网页设计制作员4级级_考考生准考证号生准考证号_姓名姓名”）

（2）使用使用Dreamweaver网页制作工具在考生文网页制作工具在考生文件夹件夹建立建立“神话神话”站点，具体要求如下：

站点，具体要求如下：

a）使用）使用Dreamweaver网页制作工具，在考生文件网页制作工具，在考生文件夹下创建夹下创建“shenhua1.7.3”站点；站点；b）在站点文件夹中，创建图象文件夹）在站点文件夹中，创建图象文件夹“images”；（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）文件保存在站点文件夹根目录；）文件保存在站点文件夹根目录；（5）根据操作要求修改素材文件夹）根据操作要求修改素材文件夹“1.7.3.4”内的内的网站首页文件，完成首页的若干链接设置，具体要网站首页文件，完成首页的若干链接设置，具体要求如下：

求如下：

a）将图片素材文件夹）将图片素材文件夹“1.7.3.4”内的的网站首页内的的网站首页图片文件复制到站点文件夹：

图片文件复制到站点文件夹：

b）建立）建立“OTP通行证通行证”的图片链接，链接至的图片链接，链接至“OTP.html”形式为替换本页打开方式；形式为替换本页打开方式；c）建立）建立“帮助中心帮助中心”的图片链接，链接至的图片链接，链接至“HELP.html”，在新窗口中打开；，在新窗口中打开；d）建立）建立“FAQ”的图片链接，链接至的图片链接，链接至“FAQ.html”，在新窗口中打开；，在新窗口中打开；e）为文本）为文本“”设置邮件链设置邮件链接，邮件地址为：

接，邮件地址为：

；f）为左下角的）为左下角的logo图片设置热区