搜索
网页设计实训报告设计时间:2011年10月至11月设计地点:综合楼机房班机:经济管理系计算机09网络一班姓名:何万保指导教师:时间：2011年11月4日1．实训目的与要求:目的:通过实训提高对网页的认识与应用.提高网页制作的基础知识与提升.掌握静态网页的制作与流程。实训要求：1、编写一个整体网站2、制作一个网站3、网站至少包括10个页面6、技术方面：HTML、表格、模板，框架、层、时间轴、超联接、样式、表单、行为、库、导航条、下拉菜单、图像查看器等7、内容方面：文本、声音、图像、动画、视频、符号等2．网页制作的基本步骤：1、确定网站主题2、收集素材（图片，音乐，视频，flash,等素材）3、规划站点结构4、网页设计（首页设计、其它页面设计等）5、网站上传及更新维护5．发布站点8、注意事项文件名尽可能不要用中文页面布局尽可能平衡色彩应用注意谐调文本注意格式化首页命名：index.htm2：设计题目，描述制作流程：打开Dreamwear8————HTMR文档————插入一行一列的表格高：100像素，宽；900像素————在表格下方在插入一行一列的表格宽度和第一个表格一样————在插入一个三行一列的表格————在第二个表格中插入一个20行，3列的表格，和合并后两个页面————在合并页面中在插入一个一行一列的表格，————在这个下方插入一个20行6列的表格————处理相应的表格格式————在头部插入一个图片，就是页面的首部————调整图像大小————制作导航栏————用网页设计软件进入相应的内容首页————学校概括————系部风采————专业设置————师资队伍————学生之窗————教学管理————招生就业————校办企业————后勤服务————教学资源————导航设置完成————到了中部份，在右侧的单元格中键入相应的学院名称————名称上方键入学院导航————冶金材料学院————测绘工程学院————电气学院————矿业学院————计算机学院————外语学院————东盟国际学院————建工学院————建材学院————机械工程学院————商学院————物流学院————化工学院————艺术设计学院————环境工程学院————文理学院————职业教育学院————成人教育学院————相关链接————在时两幅连接图片——中国优秀共产党员教育网————全国高职高专创新教育网————中间部分————插入按钮————校园快讯————2010年中国人权事业的房展————2010年美国的人权记录————中德“3+2”合作办学项目招生简章————机械工程学院搬迁仪式启动————电气学院教学设备搬迁工作结束————实习处组织实践教学专题讲座————学校校徽设计招集工作————教育专题————全国高职院校心理健康教育委员会————避免高技能人才带病上岗————《中国青年报》采访夏昌祥校长————昆明冶专自主招生火爆的背后————昆明冶专形象力建设的启示————创建一流的国家示范校————对高职院校示范性建设工作的思考————安宁新校区的建设跟踪————校园领导在线讲座————在插入图片相应的图片————调整想要的图片————学生工作动态————大学军事课件B面————大学军事课件A面————开展新生入学工作————关于优秀学生奖品(购书券)的通知————加强学习，提高学生素质的讲座————校学生会的工作跟踪————校学生会的开展情况定期调查————党群行政————党委(校长)办公室————组织部（统战部）————纪检监察审计处————学生工作部（处）————财务资产处————武装保卫处——图书馆————在做完这些部分使就要做昆明冶金高等专科学校欢迎你的动态效果————在代码中键入相应的命令即可————在设置下部的导航栏————返回首页————收藏本站——版权声明————关于我们————联系我们————留下建议————版权所有昆明冶金高等专科学校《当前时间：Wednesday,2010-12-29》————技术支持：昆明冶金高等专科学校计算机信息学院微机0922班陈伟————设置模板页面背景颜色————版权所有的背景颜色————最后在整体调整页面的布置。模板保存为网页在把网页另存为模板————最有模板就做好了.部分代码展示：trbgcolor=#FF9966tdwidth=40height=39divalign=centerahref=../index.html首页/a/div/tdtdwidth=78divalign=centerahref=../学校概况.html学校概况/a/div/tdtdwidth=78divalign=center院部风采/div/tdtdwidth=78divalign=center专业设置/div/tdtdwidth=78divalign=center师资队伍/div/tdtdwidth=78divalign=center学生之窗/div/tdtdwidth=78divalign=center教学管理/div/tdtdwidth=78divalign=center招生就业/div/tdtdwidth=78divalign=center校办企业/div/tdtdwidth=78divalign=center后勤服务/div/tdtdwidth=95divalign=center教学资源/div/td/tr说明：实现主导航栏的设置trbgcolor=#FF6633tdheight=23divalign=centerahref=../index.html返回首页/a/div/tdtddivalign=centerahref=../wemen.html收藏本站/a/div/tdtddivalign=centerahref=../wemen.html版权声明/a/div/tdtddivalign=centerahref=../wemen.html关于我们/a/div/tdtddivalign=centerahref=../wemen.html联系我们/a/div/tdtddivalign=centerahref=../wemen.html留下建议/a/div/td/tr说明：实现脚部分导航的实现tdwidth=40height=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdwidth=124bgcolor=#FFFFFFspanclass=STYLE4ahref=../冶金材料学院.html冶金材料学院/a/span/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFFspanclass=STYLE5测绘工程学院/span/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFFspanclass=STYLE5矿业学院/span/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFFspanclass=STYLE5电气学院/span/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF环境工程学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF建材学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF建工学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF化工学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF机械工程学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF计算机学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF艺术设计学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF商学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF物流学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF东盟国际学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF外语学院/td/trtrtdheight=24imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF文理学院/td/trtrtdheight=23imgsrc=../images/图标2.jpgwidth=40height=20//tdtdbgcolor=#FFFFFF职业教育学院/td/trtrbgcolor=#FF6600说明：这份代码是实现各学院的链接导航栏2)制作网站的各个页面设置可编辑区域：首先是上一步的网页做模板————设置可编辑区域，把需要改内容的的表格设置成可编辑区域————在把设置后的页面进行保存————设置可编辑区域成功基于模板制作网页：步骤打开网页模板————选中可编辑区域进行修改内容————把设置后网页保存为学院概括————打开模板制作安宁校区网页————选中可编辑区域————进行删、改内容操作————在把页面进行保存—————在打开模板制作制作冶金材料学院的网页————选中可编辑区域进行删、改内容操作————在保存网页————以此同样步骤制作计算机学院|矿业学院和我们简介的网页——————最后调整和控制所做的全部网页。3)设置超级链接将各个需要设置的超链接额的页面在dreaweanr中打开，在进行超级链接步骤：1.选中要超链接的字体XX)2.