网页设计实训报告.doc

陕西工业职业技术学院信息工程系 2011/2012学年第2学期专用周实训报告课程名称 ： 网页设计专用周 班 级 ： 信管1001、1002 教学周数 ： 2 周 地 点 ： 软件机房1 指导教师 ： 杨鹏 、吴钢 网页设计专用周实训方案 一 实训对象1. 实训班级：信管1001、10022. 计划实训周期：10个工作日3. 计划受训人数： 50人左右二 实训目的本实训目的：通过本次实习对“关注营养、关注健康”的练习和自主网站的设计，使学生熟练应用HTML标记语言设计制作网页、熟练应用Dreamveaver 8.0网页设计软件，使学生对网页制作所学的内容有一个系统的理解和掌握。在制作过程中，主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，独立完成自己的作品。三 实训内容1.专业知识强化序号知识点内容及要求学时1网站的布局运各种方式对网页元素的精确布局22表格的应用 运用表格对一些元素的布局3文字的应用 运用文字对网页的说明4图片和背景的应用 图片的添加，布局5链接的应用 使用各种不同的链接6表单的应用 对表单的熟练应用7css样式表的应用 Css样式的套用28层的应用 运用层对网页元素的精确布局29配置网站工具的使用 熟练地掌握网站设计工具1. 专业技能实战训练序号名称内容及要求学时1综合练习一按照综合练习“保护生态环境”网站的规划、布局要求完整的重现网站绿色家园12学时2综合练习二按照综合实例“西安世博园“网站的规划、布局要求完整的重现网站12学时3综合练习三按照综合实例“关注猫”网站的规划、布局要求完整的重现网站12学时4自主网站设计1）画出网站的规划布局图、说明站点的主题并对各个模块进行说明2）收集或制作相应的网页素材3）制作网页4）调试网站5）个人总结（附加在网站的规划说明内）24学时四 实训环境硬件： CPU赛扬1.6 内存：1G 显示器 17寸 硬盘 160G 显卡 ati256m软件： Windows XP 6.0或其他浏览器 Dreamweaver五 实训进度序号时间实训内容方式1第一天综合练习一讲练2第二天综合练习一讲练3第三天综合练习二讲练4第四天综合练习二讲练5第五天综合练习三练习6第六天综合练习三讲练7第七天自主网站设计（确定主题规划网站）（收集素材）练习8第八天自主网站设计（制作网页）讲练9第九天自主网站设计（制作网页）练习10第十天自主网站设计（调试网站）（书写报告）六、此次网页实训周分为四个大模块：、保护生态环境 、西安世博园 、关注猫 、自主设计 详细操作如下： 保护生态环境1. 首先创建站点，为站点命名2、为站点选择位置 3、站点创建完成4、将所需网页元素全部放入自己所创的站点之中5、运用层对网页进行布局，根据设计将相关元素放入框架之中6、视频的插入和按钮的制作7、网页的展示，动画的播放8、保护生态环境网站设计完成 西安世博园1、如上网站一样创建站点，将网页设计所需元素放入站点之中，运用层和表格对网页进行精确地布局定位 、这是网站的首页的相关布局： 下面是首页设计的一些相关代码 无标题文档精彩图片精彩看点长安塔位于2011西安世园会园区制高点小终南山上，是2011西安世园会的标志，也是园区的观景塔，游人可登塔俯瞰，全园美景尽收眼底。在设计上保持了隋唐时期方形古塔的神韵，同时增加了现代元素，既体现了中国建筑文化的内涵，又彰显出时尚现代的都市风貌，是生态建筑的实践和示范，建成后将成为提升西安城市建筑文化内涵的标志性建筑。                          首页      资讯         游园指南        图看世园       游客投诉   世界园艺博览会宗旨是促进世界各国经济、文化、科学技术的交流与发展，使每个参展国家能够利用这个机会宣传自己，向全世界展示各自在各个领域所取得的建设成就。因此，世界园艺博览会被誉为世界经济和科学技术界的“奥林匹克”盛会。 2011西安世界园艺博览会以生态文明为引领，将以“天人长安创意自然城市与自然和谐共生”为主题，营造以植物为主体的自然景观，构建世界化的园林建筑背景，彰显西安历史文化和地域特色韵味，展示人类与自然，城市与自然和谐共生的新理念和新创意，探索人、城市、园林、自然和谐共生的未来发展模式。 2011年4月28日至10月22日，人们将在这里观赏并体会到由各参展单位所演绎和阐释的精彩纷呈的多种园艺景观、厚重朴实的中华历史文化、尖端先进的生态环保科技和现代西安的绿色时尚。西安世界园艺博览会将是一届跨越经济、文化、科技等领域的多元化、综合性、世界级的博览盛会。    copy right NIT 电话：010-xxxxxxxxx 2、下面是咨询页面的设计以及展示 以下是滚动新闻的相关代码 滚动新闻 奇思幻想 点缀天然 千人欢乐大巡游昨启帷 长安花香漫乳都 谋持续发展 建和谐城市 幽幽碧水映世园 为世园会站岗的老兵 “环保回收机”走进世园 送你一个长安唱响长沙3、此页面为图看世界页面的设计以下为插入图片的代码4、这是游园指南设计页面 以下则是热点链接的代码5、此页面为游客投诉界面 6、这是插入命名标记的代码： 关注猫1、这是关于猫网站首页的布局设置 2、导航链接代码 上一页|首页|下一页3、猫的科学分类 4、各种猫以及动作的展示5、猫的在线订购 6、文本超链接代码猫科动物   科学分类   珍稀动植物l 保护动植物网页设计方案1.网页名称：保护动植物2.制作目的：唤起人们保护动植物的意识3.此网页所含物种：.动物：丹顶鹤、金丝猴、大熊猫 .植物：兜兰、荷花、天女木兰、红豆杉、雏菊4.使用工具：使用Macromedia Dreamweaver MX 2004里面的层对网页元素精确的定位布局，使用 Adobe Photoshop CS3对里面所使用的一些图片进行修改。5.网页精确的设计如下： 国宝“大熊猫”网页总宽度为：1020，最上面是一副大熊猫的广告物语，宽1020，高为384，接下来是网页中的所包含物种的相关链接，在连接的下面左边是一副可爱大熊猫图片高为232，宽为790，右边那就是对大熊猫的基本介绍，接下来左边还是一副可爱大熊猫的图片宽为398，高为270，右边则是对大熊猫分布范围的简介，左下面是一副四只可爱熊猫的图片，宽为388、高为279，右边则是大熊猫的起源进化。中国特有保护名录“鹤”顶端一副交替出现的环境图片，接下来为网页中的相关连接，左下边为一副腾飞的鹤，宽344高500，下面是一副群鹤图，宽343、高为534，右边是一副在夕阳下悠闲自在的双鹤图，宽520高500，下面是一副双鹤嬉戏图，宽569、高541，中间则是对鹤的相关介绍，有科学分类，鹤的外形特征，分布，接下来，左下面是两幅美丽的鹤图，右面则是对鹤的相关介绍，鹤的文化意义等。地球上稀有的珍贵动物之一“金丝猴”最上面是一副美丽的草原画，接下来是相关连接，下面就是一副可爱的金丝猴画面，宽为531、高为469，右边则是对金丝猴外形特征的简介，接下来左边是一副宽为270，高为570的一副攀枝猴，右边也是一副宽为460、高为582的攀枝猴，中间则是对金丝猴繁殖特点的简介，最下面那则是两幅 嬉戏觅食的金丝猴美图。 东湖名贵荷花竞相开左上角一副宽为431、高为305的动人荷花图，右边则是“东湖名贵荷花竞相开”，“植物园“中日友谊莲”重现”简介，下面那就是连接，接下来就是“中日友谊莲故事”接下来则是它的地理分布情况，以及特征描述，接下来左边是两幅美丽的荷花莲藕图宽和高分别为429、297和428、260，右边则是他的相关种栽培技术：培育壮苗，和他的生长管理。世界公认濒临灭绝的天然珍稀抗癌植物“红豆杉”最上面是一副美丽清新的岁月如歌图，接下来则是连接，接下来左边是一副红豆杉的平面展示图，宽为434、高为362，右边则是它的物种概述和形态特征，接下来左边几乎都是红豆杉的图片，右边则是对他的一些相关介绍。喜温暖、湿润、怕强光暴晒的“兜兰”最上面是一副清新的花粉、树青、叶茂图，下面就是连接，接下来最下面是一副美丽的兜兰图，右边则是对他的简介，有兜兰的分布情况，特性与特征的描写，接下来左边则是兜兰的生长，兜兰，又称拖鞋兰，右边和下面则是兜兰的一些相关图片和标本的 展示。 天女木兰又名天女花最上面则是一副鸟语花香图，下面则是连接，接下来左边是两副美丽的天女花图，右边则是对它的相关简介，有基本资料 ，产地分布 、形态特征、现状，还有一些相关连接等。天女木兰又名天女花，接下来左边是天女花的特征简介，右边是天女花词，中间是一副宽为295、高为325的天女花图。 Bellis perennis最上面当然还是一副清新的开头图，下面是连接，接下来左边是一副美丽的蓝色雏菊图，右边则是一些基本信息，有中文名，英文名，拉丁语名，日语名，别名，地理分布情况，关于雏菊的相关作品，接下来左边是雏菊的特征描述，药用价值，右边是一副宽为694、高为533的美丽图片，最下面就是两幅美丽的图片。本网页的基本布局方位如上所述。l 保护动植物网页设计布局1、鹤类的页面布局 2、图片的属性以及对图片的设置 3、运用ps对图片进行加工处理4、兜兰页面的大致布局 5、音乐以及按钮的插入代码 6、荷花页面相关属性的设置 7、鼠标经过图片的设置 8、导航条的插入9、Flash按钮的插入 10、红豆杉页面的布局设计 11、弹出信息的设置 12、css样式的编辑13、检查浏览器行为14、音乐的插入15、雏菊页面的展示本次网页设计完毕 网页设计实训心得通过这次实训对这门课程的学习，做好网页，并不是一件容易的事，它包括网页的选题、 内容采集整理、 图片的处理、 页面的排版设置、 背景及其整套网页的色调等很多东西。 所以我得出一下总结： 一、 准备资料和挑选符合目的主题的合适素材 做网页当然要收集、准备资料。在网上多转转，看到什么漂亮的网页，把它保存起来， 作为以后自己设计主页时的参考。另外，还包括搜集美化主页可能要用到的各种材料，如背景、小动画图标等等。可以在硬盘上建一个文件夹，下分“图片、声音、动画”等文件夹， 养成上网时看到有创意、新鲜的图像，就按鼠标右键存入你硬盘相应文件夹的习惯，时间一长就拥有了一个可观的图库，等做网页时随手拈来或加以修改就成你自己的东西了。 二、 规划好整个网站 主页的设计应以醒目优先，应该令人一目了然，切勿堆砌太多不必要的细节，或使画面 过于复杂。切记，页面给人的第一观感最为重要！在网上到处浏览网站的人很多，如果你的主页给人的第一印像没有吸引力， 很难令他们深入观赏， 而且他们恐怕再也不会访问你的网站了。 三、 善用图片，增强艺术效果 我记得老师说过网页的迷人之处之一， 要算它上面能点