网页布局实习报告.docxVIP

实习报告实习性质： 网页布局实习 学生姓名： 专业班级： 网络142 平面方向指导教师： 杨雪萍 邵亮 三号黑体 行 距：固定值40磅 实习时间： 2015年6月29日-2015年7月3日 实习地点： 1311 重庆工程职业技术学院学 生 实 习 考 核 表学生姓名专业班级指 导 教 师网络142平面方向杨雪萍 邵亮实习时间2015年6月29日-2015年7月3日实习地点1311实习名称网页布局自我总结要想做一个好的网页就必须学好代码，如果你的代码就没有学好是不可能做好一个网页的页面的，所以要学好代码你才能做好网页的页面，不能只学代码还要学一点其他知识来结核实际内容来做好网页的布局和网页里面的所有内容，要不断的学习与操作，如果没有实际操作也是不行，没有实际操作你怎做也是做不好的啊！这次实习是锻炼我们的实际操作和我们学到了多少知识和原理。我觉得在学习中在努力学习，不要再像这样学习了，但是觉得下课后应该复习一下和多在电脑里面操作也许会更好吧！从我最开始接触的时候觉得很难完成，其实在我做的过程当中才发现一点不难，就是要有耐心而已，不要急躁。其实学习是一个过程，你有着不同的过程你就有着不同的收获。我在这里学到了很多东西，软件熟悉了做什么都好做了。指导教师意见实习单位意见并盖章（院内实习由系签署）考核等级目录目录I1 实习目的12 实习概况22.1 实习要求22.2 实习时间22.3 实习环境22.4 开发环境23 实习内容33.1 网站结构33.1.1 功能需求分析与界面设计33.1.2 页面架构的规划33.1.3 切割网页效果图43.1.4 页面主体框架内容93.2 制作页面内容103.2.1制作内容与导航103.2.2 制作页面左侧列表123.2.3 制作页面主题内容163.2.4制作页面底部内容201 实习目的《网络布局实务实习》的主要目的是使网络平面方向的学生了解并且掌握DIV+CSS的设计技术和方法，要求学生在掌握网站工作机制的基础上，熟练掌握使用网页制作工具，以目前最流行的网页设计软件作为技术支持，由浅入深学习网页的构思、规划、制作的全过程，帮助学生掌握HTML语言及常用网页设计工具的使用，并能通过DIV+CSS制作出网页。2 实习概况2.1 实习要求利用Photoshop提供的各种工具，在学习网页制作技术过程中制作出符合要求的图片并切片，掌握通道和蒙版的应用、色彩和色调的调整。利用Dreamweaver工具使用?HTML、CSS样式表进行网页的布局，排版。软件准备：Photoshop、Dreamweaver。2.2 实习时间2015年6月29日-2015年7月3日2.3 实习环境重庆工程职业技术学院1311机房2.4 开发环境操作系统(Windows7)Dreamweaver、Photoshop绘图工具 3 实习内容制作网页页面PSD矢量图片，切片，并通过DIV+CSS布局制作成网页步骤一：用Photoshop美化渲染图片步骤二：页面结构的规划步骤三：用Photoshop切片步骤四：HTML确定页面主体框架，DIV+CSS进行布局制作步骤五：页面兼容测试3.1 网站结构3.1.1 功能需求分析与界面设计图3-1整体页面效果3.1.2 页面架构的规划学院的内容主要有菜单导航，则面信息显示，主体部分显示的是课程内容信息，其他部分子页通过链接显示，因此在设计框架时只需要将每个部分用div块包含即可，如图3.1.2所示。图3.1.2 页面框架3.1.3 切割网页效果图根据功能需求分析和设计页面的基本构架及效果图可以采用切图，完成整图变小问题，设计组装成网页。采用“切片工具”划分切片，在原图上进行切分的操作。用“切片选取工具”编辑切片，对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等修改。切图完成，就可以输出为HTML格式的页面了。在“文件”菜单中选择“存储为Wed所用格式”命令，在弹出的页面中直接选择“存储”，然后在弹出的界面中，输入文件名，然后单击“保存”按钮，输出文件包括一个htm和img文件夹，如果命名为ai ，则生成为aidex。Htm1文件，如图3.1.3所示。由于photoshop自动生成的网页采用格式布局，需要采用DIV+CSS重新进行布局设计，切片的图片在img文件夹中，文件夹中自动命名，设计时可以重命名图片，去掉不用的图片，或在复制到建立的站点目录。图3.1.4所示的切片文件包含1图片、beji背景图等。图3.1.4 设计所需图片文件3.1.4 页面主体框架内容根据功能需求分析和设计页面版面分析，设计网页主体构架，布局框架的主要HTML代码如下。!--content--div class=content!--top-- div class=top/div!--nav-- div