项目十 综合案例-非遗文化网站建设

Dreamweaver网页设计立体化教程（微课版）（DreamweaverCC2020）项目十综合案例——非遗文化网站建设目录Contents任务一前期规划任务二创建网站站点任务三制作网页模板任务四制作网站页面实训一制作珠宝网页实训二制作“微观多肉植物”网页由于用户是网站页面的直接使用者，所以在设计网站时，首先要对网站的受众人群进行分析。非遗文化网站中包含着大量的非物质文化遗产图片、文字资料、相关新闻资讯以及非遗产品的订购，这些资料和信息可以帮助用户进一步了解和认识非遗文化，并满足用户购买非遗产品的需求。任务一前期规划（一）分析网站的用户需求了解网站的用户需求后，就可以定位网站风格。不同的网站其风格各不相同，设计者需要大致了解网站的定位，拟定几个网站风格类型，从中选择最适合的风格。非遗文化网站主要用于宣传非物质文化遗产并为用户提供非遗产品的订购服务，可采用能具有中国传统风格的设计。（二）定位网站风格网站包含多个页面，设计前，必须对网站中的页面有一个规划。设计者可以先绘制站点草图，在草图中注明用户关注的重点，然后对其进行详细描述，方便客户查看。任务一前期规划（三）规划网站草图收集网站素材可分为两部分，一部分是绘制和拍摄网站会使用到的素材，如网站标志、产品图像等，另一部分可以通过网络或其他途径获取。（四）收集网站素材在正式制作网页之前，需要根据规划好的网站风格和草图设计网页效果图。网页效果图设计与传统的平面设计相同，可以使用平面设计软件进行制作。这里使用Photoshop设计效果图，然后切片整理出网页需要的图像素材。（五）设计网页效果图目录Contents任务一前期规划任务二创建网站站点任务三制作网页模板任务四制作网站页面实训一制作珠宝网页实训二制作“微观多肉植物”网页任务二创建网站站点完成了前期规划和草图的创作后，就可以进行网页设计，创建网站站点。具体操作如下：设置站点新建文件夹导入素材文件目录Contents任务一前期规划任务二创建网站站点任务三制作网页模板任务四制作网站页面实训一制作珠宝网页实训二制作“微观多肉植物”网页任务三制作网页模板创建模板文档选择站点并保存创建CSS文件创建CSS文件输入CSS布局代码输入文本和超链接CSS样式代码任务三制作网页模板插入多个<div>标签制作导航菜单插入Banner动画任务三制作网页模板添加表格式菜单为底部添加菜单超链接文本新建可编辑区域重命名可编辑区域名称目录Contents任务一前期规划任务二创建网站站点任务三制作网页模板任务四制作网站页面实训一制作珠宝网页实训二制作“微观多肉植物”网页任务四制作网站页面新建文档插入模板重命名网页主题（一）制作主页任务四制作网站页面制作信息条插入<div>标签插入“新闻动态”内容（一）制作主页插入“非遗展览”内容插入“关注我们”内容任务四制作网站页面添加模板添加CSS样式表（二）制作订购页面制作左侧栏目任务四制作网站页面制作订购信息（二）制作订购页面制作图像列表目录Contents任务一前期规划任务二创建网站站点任务三制作网页模板任务四制作网站页面实训一制作珠宝网页实训二制作“微观多肉植物”网页本实训要求为某珠宝公司的电商销售网站制作一个“产品中心”页面，该页面主要展示珠宝公司的相关产品，完成后的效果如图所示。实训要求实训一 制作珠宝网页要让页面展示公司产品，需要先对页面进行布局，然后实现查看功能，即浏览者购买通道。本实训通过div+CSS盒子模型来进行页面布局，然后在其中添加相关的内容，并为图像创建超链接，便于浏览者进入页面进行购买。实训思路“产品中心”页面效果实训一 制作珠宝网页步骤提示完成本实训需要先创建div+CSS盒子模型，然后在其中添加图像、文字等内容，其步骤如图所示。① 添加文本 ② 添加图像 ③ 添加超链接目录Contents任务一前期规划任务二创建网站站点任务三制作网页模板任务四制作网站页面实训一制作珠宝网页实训二制作“微观多肉植物”网页本实训需要制作“微观多肉世界”网站，该网站主要是为多肉植物爱好者提供交流网站，完成后的效果如图所示。实训要求实训二 制作“微观多肉世界”网页本实训主要根据草图进行布局，采用div+CSS盒子模型来布局网页，色彩方面主要采用绿色调为主色调，用不同明度的绿色给网站添加层次感，并体现出生机勃勃的感觉。实训思路“