网页制作与美工实训教师样本

吉林工业职业技术学院（网页制作与美工实训报告）（2010~2011学年第2学期）实训地点：数据库应用实训室实训班级：软件3101指导教师：赵秀艳、李旭学号姓名：吉林工业职业技术学院2010年7月2日吉林工业职业技术学院网页建设实训报告1目录实习题目..............................................................................................................................1实习地点..............................................................................................................................1实习目的..............................................................................................................................1实习要求..............................................................................................................................1实习内容..............................................................................................................................2一、网站策划...............................................................................................................2二、网站设计...............................................................................................................31网站首页的设计与制作.....................................................................................32网站基本建立.....................................................................................................43网站的设计.........................................................................................................74子界面的建立...................................................................................................10实习心得............................................................................................................................15参考文献...............................................................................................错误!未定义书签。吉林工业职业技术学院网页制作与美工实训网页制作与美工实训实习题目畅想个人网站实习地点数据库应用实训室实习目的（1）学习如何确定网页的整体风格、网页彩色的搭配以及设计草图。（2）能够熟练的运用Dreamweaver8这个可视化的网页制作、网站开发的强大的软件。（3）能够通过使用表格，使用文本，使用模板、库及框架，使用CSS样式，使用行为和层，使用表单来制作网页。（4）通过插入图像、歌曲、视频、Flash等增强网页的效果。（5）熟练运用Photoshop处理图像，运用网页特效精灵添加网页特效。（6）通过实训可以达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握理论的基础上加以实践，进一步提高、加强学生的综合能力。实习要求通过本次实训，能够综合运用所学的Dreamweaver知识设计各种网页：1．动手制作网页之前，必须认真做好网站的需求分析，策划好网站的主题，规划好网站的风格和结构，创建完善的目录结构。2．制作网页前，收集好所需的文字资料、图像资料、Flash动画和网页特效。3．所创建的网站至少包括10个页面，分为三层，第一层为首页，第二层至少为5个二级子页，第三层至少为5个内容页。（1）首页建议采用表格进行布局，必须包含导航栏；（2）5个二级子页分别为框架网页、表单网页、利用模板制作的网页、利用布局表格制作的网页；（3）5个内容页分别为层布局的网页、应用JavaScript制作特效的网页、应用行为制作特效的网页。（4）各个页面根据需要插入合适的图像和Falsh动画，首页要求插入背景音乐。吉林工业职业技术学院网页制作与美工实训（5）所有页面要求内容充实、布局合理、颜色搭配协调、美观大方。（6）各个页面之间导航清晰、链接准确无误。4．网页的版面尺寸应用符合网页设计的规范，网站中所有文件、文件夹的命名应规范，尽量做到字母数量少，见名知意、容易理解。5．在设计过程中，要严格要求自己，树立严密、严谨的科学态度，必须按时、保质、保量完成实训任务。要求独立完成规定的实训内容，不得弄虚作假，不准抄袭或拷贝他人的网页或其他内容。6．小组成员之间，既要分工明确，又要密切合作，培养良好的互助、协作精神。7．实训环境为WindowsXP或2000及以上版本的操作系统，网页制作软件为Dreamweaver8．根据需要可以运用Photoshop8处理图像，运用Swishmax8制作动画。实习内容一、网站策划（1）功能简介1.我组网站建设以个人为主，主要介绍关于个人简历，与简单的个人作品收藏等，通过本网站的建设，让同学更进一步的了解有关做网页的一些方面的知识，我们小组是以三人为单位的，分工明确，每个人都安排了任务并且我们小组分头收集了背景音乐、图片、文章等所需的网页元素资料。2.首页主要利用一些图片、Flash、音乐等介绍我们个人等导航内容。并且每个导航内容也链接着多个具体的网页内容。3.我们的网站内容详细、形式新颖、希望光临本网站的人都能有所收获。4.我们小组的网站建设，主要运用了表格的应用、超连接的应用、CSS样式、等知识。（2）网站结构图如图1所示：吉林工业职业技术学院网页制作与美工实训图1网站结构图二、网站设计我们小组三个人，我主要负责的是网站首页、个人首页三个子页面、我的作品中两个子界面这三个网页模块的制作与设计。1网站首页的设计与制作（1）表格布局我在做主页时主要有到的是表格布局，总体框架结构插入了一个7行3列的表格。（2）插入滚动字幕主要利用一些代码使滚动字幕运行。（3）按钮的制作主要做了首页按钮、个人首页按钮、我的作品按钮、给我写信按钮这四个按钮。（4）闪烁字的制作主要用Flash插入新元件、关键帧等知识制作的“相信我们是最棒的”闪烁字。（5）插入音频主要通过插件插入音频，我插入的是“Nobody”音频，体现出我们小组个人的爱好与性格。网站首页首页个人首页我的作品给我写信张明星首页高阳首页郝婷婷首页Flash1Flash2我的收藏吉林工业职业技术学院网页制作与美工实训2网站基本建立（1）首先打开Dreamweaver运行界面如图2所示：图2运行界面（2）其次建立站点，运行界面如图3所示：图3站点运行界面吉林工业职业技术学院网页制作与美工实训（3）建立站点操作界面如图4所示：图4正在建立站点的操作界面（4）建立站点的操作界面如图5所示：图5建立站点的操作界面吉林工业职业技术学院网页制作与美工实训（5）建立站点的操作界面如图6所示：图6建立站点的操作界面（6）完成建立站点的界面如图7所示：图7完成建立站点的操作界面吉林工业职业技术学院网页制作与美工实训3网站的设计（1）插入表格如图8所示：图8建立表格界面（2）首页具体页面设计，单击右侧“滚动字幕”中的任意一个或单击导航栏中的“按钮”就可以进入到相应的界面如图9所示：图9首页界面吉林工业职业技术学院网页制作与美工实训（3）按钮的制作图如图10所示：图10按钮界面（4）插入滚动字幕如图11所示：图11滚动字幕程序（5）插入水平线如图12所示：图12插入水平线（6）插入背景音乐如图13所示：图13背景音乐的代码吉林工业职业技术学院网页制作与美工实训（7）单击“给我写信”按钮会弹出一个Internet连接向导如图14所示：图14Internet连接向导界面（8）单击“给我写信”按钮会弹出一个Internet连接向导接着会弹出连接邮箱的新邮件界面如图15所示：图15新邮件界面吉林工业职业技术学院网页制作与美工实训4子界面的建立（1）制作个人首页运行界面1（单击左上角“返回主页”按钮会直接弹出首页界面）如图16所示：图16个人首页1运行界面（2）单击右下角“继续”按钮会直接弹出下一个个人首页界面如图17所示：图17个人首页运行界面吉林工业职业技术学院网页制作与美工实训（3）我的个人简介界面如图18所示：图18个人简介界面（4）制作个人首页运行界面2（单击左上角“返回主页”按钮会直接弹出首页界面）如图19所示：图19个人首页2运行界面吉林工业职业技术学院网页制作与美工实训（5）制作个人首页运行界面3（单击左上角“返回主页”按钮会直接弹出首页界面）如图20所示：图20个人首页3运行界面（6）运用CSS样式运行界面如图21所示：图21添加外部CSS样式表界面吉林工业职业技术学院网页制作与美工实训（7）单击首页导航栏“我的作品”按钮或滚动字幕中“我的作品”会弹出我的作品运行界面如图22所示：图22我的作品运行界面（8）单击首页导航栏“我的作品”按钮或滚动字幕中“我的作品”会弹出我的作品运行界面，然后单击“Flash一”按钮，即弹出我的作品中Flash一运行界面如图23所示：图23Flash一界面吉林工业职业技术学院网页制作与美工实训（9）单击首页导航栏“我的作品”按钮或滚动字幕中“我的作品”会弹出我的作品运行界面，然后单击“Flash二”按钮，即弹出我的作品中Flash二运行界面如图24所示：图24Flash二界面（10）单击首页滚动字幕中“我的收藏”会弹出我的收藏运行界面如图25所示：图25我的收藏界面吉林工业职业技术学院网页制作与美工实训（11）单击首页滚动字幕中“我的收藏”会弹出我的收藏，单击相应的按钮会弹出相应的界面，如：单击“太阳镜”按钮会弹出太阳镜运行界面（单击右上角的滚动图片会弹出下一个界面）如图26所示：图26太阳镜界面实习心得省略……参考文献1)舒震庚.网页设计精粹150例.冶金工业出版社.2006.32)陈益材.网站建设经典范例.清华大学出版社.2006.43)刘万辉.网页设计与制作教程.机械工业出版社.2007.94)周霞.网站设计与网页制作教程.冶金工业出版社.2006.15)《Dreamweaver网页设计案例教程》白煜编著清华大学出版社.2007.5