《动态网站设计第02讲》由会员分享，可在线阅读，更多相关《动态网站设计第02讲（12页珍藏版）》请在金锄头文库上搜索。
1、课程名称：动态网站设计制作与维护,总学时：96（课内84） 周学时：6 授课教师：刘坤 电子信箱： 联系电话：13862164702 答疑时间：周2上午,本次课程教学内容：,项目三 网站主页设计与制作子项目3-1 主页布局、效果图设计与制作任务1 使用Photoshop进行班级网站主页布局和效果图设计。,本次课程教学目标：,能力目标：会进行站点素材的查找与分类管理；会使用Photoshop进行班级网站主页布局、效果的制作；能将设计好的效果在Dreamweaver中进行预览。 知识目标：知道站点素材分类管理方法；知道图片转换为网页方法； 素质目标：团队合作精神的培养、独立操作能力锻炼,准备工作：
2、,（1）在C盘下创建ClassWeb文件夹，并将其设为主目录。 （2）创建名为“MyClass”的动态站点。由于机房机器安装了还原卡，所以从这次课开始，每次下课后都要将ClassWeb文件夹打包上传到教师机，同时自己备份带走一份。以后在每次上课前需要做如下三项工作：（1）将带走的压缩包拷贝到C盘上，解压；（2）将C:ClassWeb文件夹设为主目录；（3）创建名为“MyClass”的动态站点；,子项目3-1 主页布局、效果图设计与制作,任务1 使用Photoshop进行班级网站主页布局和效果图设计。【任务分析】在进行网站页面效果图设计之前，需参考、分析与借鉴优秀网站页面，吸取精华，从而达到满意
3、的设计效果。本任务采用Photoshop软件对班级网站主页进行效果图设计。,作品欣赏,（1）启动PhotoshopCS，新建文档。 启动PhotoshopCS，执行“文件”“新建”命令，在弹出的“新建”对话框的名称框中输入：班级网站主页效果图，宽度：1003像素，高度：850像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色，如图所示。（注意高度要视内容和版面而定，一般情况下不超过3屏为宜）,任务1 使用Photoshop进行班级网站主页布局和效果图设计,（2）设计网页Logo、Banner和整体效果图 。下图仅为参考：为了后续项目的需要，要求主页中必须包含“公告栏”、“班级新
4、闻”、“管理员登录”、“留言板”、“通讯录”、“网络导航”、“版权信息”部分，另外，在主页设计时需设计两处图像部分，用来制作图像的轮番切换和无缝滚动效果，版权信息部分填加“加入收藏”和“联系我们”部分，各部分的排版形式不拘泥于一种，可参考优秀站点页面，借鉴并自行发挥创新。,任务1 使用Photoshop进行班级网站主页布局和效果图设计,任务1 使用Photoshop进行班级网站主页布局和效果图设计,在对话框中图像格式选取GIF。,（3）效果图制作完毕，进行文件保存及效果预览 先将效果图以“class.psd”为文件名存于C:ClassWeb文件夹下； 再使用“文件”/“存储为web所用格式”命
5、令，将弹出的 “存储为web所用格式”对话框，如图所示：,任务1 使用Photoshop进行班级网站主页布局和效果图设计,单击“存储”按钮，在弹出的“将优化结果存储为”对话框中进行各项的设置，存储位置为自己的站点文件夹，文件名取为index.html，“保存类型” 选“HTML和图像（*.html）”,选好后，单击“保存”按钮即可保存网页。,在dreamweaver打开刚才存储的index.html，使用F12键检查网页效果是否满足需要，若不满足，再到class.psd文件中进行修改，直到满意为止。,任务1 使用Photoshop进行班级网站主页布局和效果图设计,总结与作业,作业,总结,1、使用PS进行效果图的制作 2、主页效果图另存为网页形式,1、将自己规划的班级网站布局草图画于作业本上； 2、继续完成效果图的制作，并加以完善,
