网页设计与制作实验要求
实验一
【实验目的】
1. 练习本地站点和远程站点的建立。 2. 掌握链接的建立。 3. 掌握主页的设置和站点地图的建立和查看。
【实验内容】
创建一个名为“国画欣赏”的站点,将其中的本地站点保存在“D:\\guohua”文件夹下,远程站点保存在“E:\\guohua”文件夹下。然后为“国画欣赏”网站建立一个存放图片的文件夹“pic”,并新建名为“index.html”、“ghzs.html”、“jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”的网页文件,最后设置“index.html”的页面属性。设置出如图7所示网站地图效果。 “国画欣赏”网站首页 国画知识 分类欣赏 国画大师 今日名画 图1
【实验步骤】1、建立虚拟目录;
2、打开Dreamweaver界面,新建本地站点保存在”D:\\guohua”文
件夹下;
3、为“国画欣赏”网站建立一个存放图片的文件夹“pic”,依次建
名为“index.html”、“ghzs.html”、“ jrmh.html”、“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”的网页文件,最后设置“index.html”的页面属性;
4、将“index.html”与“ghzs.html”、“ jrmh.html”、
“ghds.html”、“flxs.html”、“ghlt.html”和“lxwm.html”建立超链接5、设置显示网页标题得出最后结果。
国画论坛 联系我
【实验结果】
【实验总结】本地站点和远程站点的建立是设计并应用网页的基础,建立逻辑结构合理的站点地图很重要。
实验二
【实验目的】
1. 掌握框架的使用,框架中标题的设置以及网页中导入已有word文档的
方法。
2. 掌握锚链接的建立。
3. 掌握css样式的概念及其建立,能够区分三种css样式,并根据要求建
立相应的样式。
【实验内容】
1、建立一个包含框架的网页,标题为“笑傲江湖”,网页由左右两个框架组成,左侧框架显示” 3.1框架主题.doc”中内容,右侧显示“3.1框架文件.doc”中内容。建立超链接,实现点击左侧标题,右侧框架顶端显示相应内容,(xajh?.html,) (?表示数字) 如下图2所示:
图2
2、设置CSS样式。左侧框架内内容设置样式,存储在css1.css样式文件中, 增加h3标签,行高36px,大小18px;笑傲江湖 设置为标题3 ;
增加a标签,字体颜色为#000066,无修饰;
增加body标签,字体大小12px,背景色#99CC66,扩展Glow,颜色为红色, Strength为5
增加ol标签,设置行高40px,列表项图像为“3.1list.gif”;设置框架中四个标题为ol格式,效果如下图所示。
右侧框架中设置 “第一章灭门”字体颜色#000099,字体大小为18px,
加粗,并对另外三个标题均应用此设置
最终效果如下图3所示:
图3
【实验步骤】
1.鼠标点到左框架,文本-css样式-新建,点选 标签,键入标签名h3,保存在css1,对h3作如下设置。
2.同样增加设置其它标签
3. 鼠标点到笑傲江湖,属性面板格式改为标题3.
4.右侧框架中设置 “第一章灭门”为标题,字体颜色#000099,字体大小为18px,加粗,自动保存为style2,并对另外三个均设为标题,标题样式均设为style2。 5.保存全部并预览。
【实验结果】学生填