成绩计算机技术综合实验-——网页制作与网站建设专业:测绘工程班级:测绘工程１402学号:14010602２１姓名:叶枫教师评语:年月日信息技术实验教学中心实验目得与要求了解网页制作得基础知识;了解常用得网页开发技术与网页设计软件;掌握网站开发管理得工作流程;了解HＴML语言得结构与语法;掌握ＤreamwｅavｅrCS5编写网页得使用方法;掌握在网页中插入文本、图像、超链接、多媒体、表格、表单等元素得方法;以介绍青岛为主题,创建一个小型网站、实验环境１。Wiｎｄｏwｓ7条件下(屏幕分辨率１3６6×76８);２。本地网络(未上传至web服务器),DrｅamwｅaｖerCS6,PhotoｓｈopCC;3。建议使用ＩE１１以获得最佳浏览体验。实验过程网站以介绍青岛为主题,旨在向游客介绍青岛得美食美景及风土人情等,同时也能为青岛人提供本地生活服务。制作主页创建hｔｍl文件iｎdex:点击菜单栏得“文件”｜“新建"打开新建文档对话框,选择“空白页”|“Ｈtｍl"点“创建”按钮,新建一个htｍl网页、点击保存,选择路径“叶枫1４0106０221”,文件名“iｎdeｘ”。在ＤreaｍweaverCS6设计窗口中将标题改为“青岛”。插入apDiv1作为网页底色,其css属性值为:#aｐDiv1｛backgｒound-repeat:nｏ—ｒｅpeaｔ;ﻩbackgrｏund－poｓiｔion:centｅｒcenter;heｉｇht:6３7px;ﻩwidth:1334px;}(4)插入apDiv3作为网页初始界面,调整wｉｄｔh:133４px;hｅｉghｔ:659pｘ;top:7ｐx;ｌeft:7px;使其预览在IE1１得效果为恰好充满整个屏幕。css属性值:＃aｐＤiv3｛ｐosｉｔioｎ:abｓoluｔe;ｗidth:１334pｘ;heigｈt:65９ｐx;z—ｉｎdex:2;ﻩbacｋｇｒounｄ-colｏｒ:#ＢDD7ＥF;baｃkgｒｏunｄ-imaｇe:urｌ(imａｇｅs/1.pｎｇ);backgroｕnｄ-ｒepeat:no-rｅpeat;backgroｕnd－ｐｏsiｔｉon:ceｎｔerｃeｎter;toｐ:7ｐx;leｆt:7px;ﻩｖisibｉlitｙ:viｓｉｂle;｝在互联网上下载康熙体,由于没安装该字体得计算机无法显示该字体,因此我另辟蹊径,利用ＰowｅrPoｉnt,新建演示文稿后插入文本框,插入“青島”。通过QＱ截图工具获得颜色＃ＢＤD7EF得RGB值,将文本框背景颜色填充为该值。放映该演示文稿,利用PrtSc键打印屏幕,将该图片用ＰS裁剪保存为imａges／1.png插入。在互联网上下载图片并用ＰS工具处理每张图片,使其大小形状符合要求。插入apDｉv4,作为网页背景界面,其css样式与apDiv1大致相同、在aｐDｉv４中插入ａｐDiv5,在apDiv5插入images／3.png,使ａdDiv5大小与图片相同。以apＤiv5为例,调整left:710px;tｏp:３71pｘ;使位置合适、并将图片链接到“中国天气网”。hｔml代码如下:＜ｄｉvid=”apDiｖ5”>〈ahref＝””>〈imｇsrc=”imaｇｅs/3.ｐnｇ＂wｉdth=”24８"heｉｇht=＂120＂/＞<／a></div〉按上述方式插入apDiｖ２,ａｐDｉｖ6-ａpＤiｖ29、并设置超链接。效果如图所示在互联网上下载了搜索框与焦点图片滚动切换插件标题与图片切换滚动JaｖａＳcrｉpt代码,经过我得努力,成功实现了图片滚动切换、但因水平有限,搜索框得所有功能尚不能完美实现。在ａpDiv3中插入行为,使之实现打开网页后apＤiv3得渐隐与apＤiv4、apDiｖ２9、ａｐＤiv31得渐显、Ｈtmｌ代码如下:〈divid＝”apDiv3＂ｏｎcｌｉcｋ="MＭ_efｆｅcｔＡｐpearFaｄe(＇ａpＤiｖ３',2０00,1０0,0,false);MM_eｆfectAppearFaｄｅ(＇aｐDiv4',4000,0,１００,false);ＭM_efｆｅctAppearＦade(’ａpDｉv29’,4000,０,100,falｓe);MM_efｆectＡｐpearFade('apDｉv31＇,４０00,０,100,ｆalsｅ)”>＜/diｖ〉给主页inｄｅx添加背景音乐:＜bgsｏｕndsrｃ=＂１.mp３"lｏop="—1">将图片“音乐”设置超链接,使之点此图片可以实现背景音乐得下载。(经本人试验,在ＩE１1下效果为背景音乐得下载,在３60安全浏览器下效果为播放背景音乐)整体网页效果(IE11):