《网页设计与制作基础》实验指导书.doc
《《网页设计与制作基础》实验指导书.doc》由会员分享,可在线阅读,更多相关《《网页设计与制作基础》实验指导书.doc(20页珍藏版)》请在咨信网上搜索。
1、实验一 网页的认识实验目的1、 掌握利用Internet进行信息游览、搜索,下载网页、图片、文字和文件;2、 利用记事本来编辑HTML文档并浏览。3、 熟悉HTML基本标记的使用。实验环境WindowsXP操作系统,内部组成局域网,外连Internet互联网。实验重点及难点u 熟悉HTML的结构、语法。u 熟悉HTML基本标记的使用。实验内容1、 从网上(如网页制作大宝库等)下载网页制作时需要的小图片、动画及flash等网页制作素材。2、 收集你认为比较好的网页并从网页主题、网页内容、结构布局、色彩搭配等方面来分析网页。3、 通过浏览新浪网站主页分析其网页基本元素,查看其源代码,收藏到收藏夹中
2、,将其设为主页。4、 制作一个简单的网页sy1-1.html,用记事本编辑,网页标题为“熟悉HTML文档的结构”,内容为司空曙的江村即事,如下图所示。5、 通过附录1的练习熟悉HTML基本标记的使用。(可参考第二章内容)实验二 Dreamweaver基本操作(一)实验目的1、 熟悉Dreamweaver的工作环境并了解本地站点的建设和管理;2、 熟悉网页文件的基本操作;3、 熟练掌握在网页文件中文本、图像、超链接的添加和设置。实验环境WindowsXP操作系统,Dreamweaver软件,内部组成局域网,外连Internet互联网。实验重点及难点u 文字的插入及设置。u 图像的插入及设置。u
3、各种超链接的创建。实验内容1、 使用Dreamweaver建立一个本地站点并命名为“Dreamweaver基本操作”,包含以下几个文件和文件夹:图片文件夹(images);音乐文件夹(sound)等。2、 在站点“Dreamweaver基本操作”中新建一个名为sy2-1.html的网页文件,从提供的网页原始素材中把相关文字复制到该网页文件中,并进行适当的文字设置,结果如下图所示。3、 在站点“Dreamweaver基本操作”中对网页sy2-1.html按如下要求进行编辑并另存为sy2-2.html,效果如图所示。l 标题文字大小用标记;l 作者信息文字大小为24像素,字体为幼圆,颜色为红色;l
4、 古诗文字大小为24像素,字体为隶书,颜色为蓝色;l 在作者信息后加一条水平线,居中,水平线宽度为浏览器的30%,水平线的粗细为20个像素,颜色为棕色;4、 在站点“Dreamweaver基本操作”中对网页sy2-2.html按如下要求进行编辑并另存为sy2-3.html,效果如图所示。l 插入背景图片:Welcome-Popup-Background.gifl 在古诗左下方插入作者的照片:司空曙.jpg5、 在站点“Dreamweaver基本操作”中从提供的网页原始素材中把相关文字复制到网页文件sy2-3.html中按要求进行编辑并另存为sy2-4.html,效果如图所示。l 改“目录”下的
5、列表符号类型为方框。l 给“【注释】”下的条目加数字编号l 以标题为热点创建空超链接l 以图片为热点创建空超链接l 以“大历十才子”为热点创建空超链接6、 在站点“Dreamweaver基本操作”中新建一个名为sy3-1.html的网页文件,以作实验三制作留言簿备用。7、 在站点“Dreamweaver基本操作”中对网页sy2-4.html按要求进行编辑并另存为sy2-5.html,如下图所示。l 以标题和图片为热点的超链接均指向l 为“目录”下的各条目创建书签,书签名为相应条目的拼音首字母。l 在文档最后增加一行“如有诉求,请留言或邮件联系!谢谢!”的文字。l 以“留言”为热点创建指向sy3
6、-1.html的超链接。(使用相对路径,在新窗口中打开)。l 以“邮件联系”为热点创建指向ggyx的超链接。实验三 Dreamweaver基本操作(二)实验目的1、 熟练掌握在网页文件中多媒体对象的添加和设置。2、 熟练掌握在网页文件中表格的添加和设置。3、 熟练掌握在网页文件中表单的添加和设置。实验环境WindowsXP操作系统,Dreamweaver软件,内部组成局域网,外连Internet互联网。实验重点及难点u 多媒体对象的添加和设置。u 表单及表单对象的添加及设置。u 利用表格来归整表单。实验内容1、 为站点“Dreamweaver基本操作”中的网页文件sy2-5.html添加背景音
7、乐:江村即事.mp3,要求循环播放,结果另存为sy3-2.html。2、 在站点“Dreamweaver基本操作”中新建一个名为sy3-3.html的网页文件,在该网页文件中建立一个如图所示的表格,并在表格下方添加文字“让我们回到快乐的童年时光吧!”并嵌入音频文件“捉泥鳅”和插入Flash动画“拔萝卜”。3、 打开站点“Dreamweaver基本操作”中的网页文件sy3-1.html,制作一个留言簿表单,效果如下图所示。4、 在站点“Dreamweaver基本操作”中新建一个名为sy3-4.html的网页文件,在该网页文件中用表格来布局sy3-1.html网页文件中的留言簿,效果如下图所示。实
8、验四 CSS样式表实验目的1、 了解CSS 的基本知识;2、 熟悉“CSS样式”面板;3、 掌握样式表的创建和应用。实验环境WindowsXP操作系统,Dreamweaver软件,内部组成局域网,外连Internet互联网。实验重点及难点u 选择器的使用。u 利用样式表对页面进行美化。u 样式应用的优先级实验内容1、 创建本地站点“CSS样式表”,在该站点下有若干网页文件:人生最美是淡然.html和淡然.html。将网页文件淡然.html另存为sy4_1.html,将网页文件人生最美是淡然.html另存为sy4_2.html。2、 对网页文件sy4_1.html的标题“淡然”做如下设置:字体为
9、“华文行楷”,大小为50像素,颜色为#666666,并对该标题采用Glow滤镜进行特效处理:光晕颜色为蓝色,方向为45度。3、 在网页文件sy4_1.html中建立内部样式.ziti:字体为“仿宋_GB2312”,大小为24像素,颜色设置为#666699,粗体。将该样式应用于sy4_1.html中表格上方的正文内容(不包括表格本身)。4、 在网页文件sy4_1.html中建立内部样式.bg:字体为“隶书”,大小为24像素,颜色设置为#993366,粗体,背景颜色为#CCCCCC,表格的上边框是颜色为#003399的双线,表格的下边框是颜色为#669999的实线,表格的左边框是颜色为#FF666
10、6的虚线,表格的右边框是颜色为#999999的点划线,表格所有框线的宽度均为8像素。将该样式应用于sy4_1.html中的表格部分。5、 在网页文件sy4_1.html中更改超链接的样式,其中a:link定义为:字体:幼圆,颜色:#669999,修饰:无(无下划线);a:visited,字体:华文行楷,颜色:#660033,修饰:无;a:hover:字体:幼圆,颜色:#FF0000,修饰:下划线;a:active:字体:华文新魏,样式:倾斜,颜色:#0000CC,修饰:删除线。6、 建立外部样式表wenzi.css:字体为“楷体_GB2312”,大小为18像素,颜色设置为#996600,粗体。
11、将该样式应用于sy4_1.html中表格下方的正文内容(不包括表格本身)。7、 在网页文件sy4_1.html中为“淡然的释义”部分加上方块列表符号,并给这部分内容设置为字体颜色为#993333,背景颜色为#999999。8、 使用内嵌样式使得第二段文字“淡然,常用义为淡泊失意坦然”。”实现首行缩进两个字符。9、 将外部样式表wenzi.css应用于网页文件sy4_2.html的正文部分。对标题“人生最美是淡然”做如下设置:字体为“华文行楷”,大小为50像素,颜色为#CC3366,并对该标题采用Shadow滤镜进行特效处理:光晕颜色为蓝色,方向为45度。实验五 Dreamweaver网页布局(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作基础 网页 设计 制作 基础 实验 指导书
1、咨信平台为文档C2C交易模式,即用户上传的文档直接被用户下载,收益归上传人(含作者)所有;本站仅是提供信息存储空间和展示预览,仅对用户上传内容的表现方式做保护处理,对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿,我们不确定上传用户享有完全著作权,根据《信息网络传播权保护条例》,如果侵犯了您的版权、权益或隐私,请联系我们,核实后会尽快下架及时删除,并可随时和客服了解处理情况,尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确),网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据,平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺,下载前须认真查看,确认无误后再购买,务必慎重购买;若有违法违纪将进行移交司法处理,若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传,付费前请自行鉴别,如您付费,意味着您已接受本站规则且自行承担风险,本站不进行额外附加服务,虚拟产品一经售出概不退款(未进行购买下载可退充值款),文档一经付费(服务费)、不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印,是因预览和防盗链等技术需要对页面进行转换压缩成图而已,我们并不对上传的文档进行任何编辑或修改,文档下载后都不会有水印标识(原文档上传前个别存留的除外),下载后原文更清晰;试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓;PPT和DOC文档可被视为“模板”,允许上传人保留章节、目录结构的情况下删减部份的内容;PDF文档不管是原文档转换或图片扫描而得,本站不作要求视为允许,下载前自行私信或留言给上传者【Fis****915】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用;网站提供的党政主题相关内容(国旗、国徽、党徽--等)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
6、文档遇到问题,请及时私信或留言给本站上传会员【Fis****915】,需本站解决可联系【 微信客服】、【 QQ客服】,若有其他问题请点击或扫码反馈【 服务填表】;文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“【 版权申诉】”(推荐),意见反馈和侵权处理邮箱:1219186828@qq.com;也可以拔打客服电话:4008-655-100;投诉/维权电话:4009-655-100。