动态网站设计第02讲(免费阅读).pptVIP

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