网页制作与网站建设实验报告

中南民族大学管理学院学生实验报告课程名称：网页制作与网站建设年级：2014专业：信息管理与信息系统指导教师：杨单实验地点：16号实验楼218/222学号：201421074039姓名：唐子璇2014学年至2015学年度第2学期中南民族大学管理学院学生实验报告目录实验一HTML基本操作实验二Dreamweaver基本操作实验三网页布局操作实验四CSS基本操作实验五模板和库文件应用实验六网页特效应用中南民族大学管理学院学生实验报告实验（一）HTML基本操作实验时间：2015.04.23实验目的：1.掌握网页的基本HTML结构。2.熟悉常用HTML标记的使用方法。实验内容：1、基本HTML结构htmlheadtitle静夜思/title/headbodybgcolor=#FFFF99h1align=center静夜思/h1pfontsize=+3face=楷体lifontcolor=#00FF00床前明月光，疑是地上霜。举头望明月，低头思故乡。/font/li/body/html2、标记的使用（1）BodyBgcolor=”red”设置背景颜色Bodytext=”red”设置文本颜色Bodylink=”red”设置超链接颜色Bodyvlink=”red”设置已使用的超链接的颜色（2）输入标题中南民族大学管理学院学生实验报告标题标记Hn,其中n为标题的等级，共分为6个等级的标题，n越小，标题字号就越大。H1一级标题/H1（3）划分段落p/p标记用来创建一个段落。Align属性（对齐方式）值为left（左对齐）center（居中）right（右对齐）例如：palign=”center”/p（4）Br回车换行当在p/p标记对间行与行之间的距离比较小，在标记对外择行与行间距离较大。（5）插入图片ImgSrc=”picname”图片链接AHref=”URL”ImgSrc=”picname”/A（6）创建外部链接结构：超链接标记A/A、属性Href及其值、显示在网页上作为链接的文字。格式：AHref=”URL”显示的文字/A中南民族大学管理学院学生实验报告1、链接目标位于HTML文档所在文件夹的子文件夹中，使用相对路径地址来指向该目标：AHref=”bbs\login.html”登录/A2、使用绝对路径来指向目标：AHref=”/c:\my\login.html”登录/A实验步骤打开文本编辑器“记事本”中输入HTML代码,建立一个具有基本结构标记的HTML文件，然后另存为.html文件，并在浏览器中运行。实验结果分析成功完成了自己的第一个最简单的网页指导教师批阅：1、实验态度：不认真（），较认真（），认真（）2、实验目的：不明确（），较明确（），明确（）3、实验内容：不完整（），较完整（），完整（）4、实验步骤：混乱（），较清晰（），清晰（）5、实验结果：错误（），基本正确（），正确（）6、实验结果分析：无（），不充分（），较充分（），充分（）7、其它补充：总评成绩：评阅教师（签字）：评阅时间：中南民族大学管理学院学生实验报告实验（二）Dreamweaver基本操作实验时间：2015.04.30实验目的1.熟悉Dreamweaver操作界面，文档和本地站点的创建；2.练习使用Dreamweaver编辑网页；实验内容1.站点设置1）执行“站点＼管理站点”命令，在弹出的“管理站点”对话框中单击“新建”按钮，在弹出的快捷菜单中选择“站点”命令。2）在“站点名称”文本框中输入站点名称，在“默认文件夹”文本框中选择所创建的站点文件夹。3）在“默认图象文件夹”文本框中选择存放图象的文件夹，完成后单击“确定”按钮，返回“管理站点”对话框。4）在“管理站点”对话框中单击“完成”按钮，站点创建完毕。2.页面图像设置3.1)在“页面属性”对话框中设置页面的背景图像。2)在中南民族大学管理学院学生实验报告页面文档中单击经过鼠标插入图像。3.表格制作1)在文档中，单击表格“”按钮，在对话框中将“单元格间距”设置为“1”。2)选中插入的表格，将“背景颜色”设置为“黑色”（#0000000）。3)在表格中选中所有的单元格，在“属性”面版中将“背景颜色”设置为“白色”（#ffffff）。4)保存页面，按下“f12”键预览。4.创建锚点链接1)在页面中插入1行4列的表格，并在各单元格中输入导航文字。2)分别选中各单元格的文字，单击“”按钮，在弹出的“超级链接”对话框上的“链接”文本框分别输入“#01”“#02”“#03”“#04”。3)在文档中输入文字并设置锚记名称“01”，按下“enter”键换行，输入一篇文章。中南民族大学管理学院学生实验报告4)在文章的结尾处换行，输入文字并设置锚记名称“02”，按下“enter”键换行，输入一篇文章。5)同样的方法在页面下文分别输入文字和命名锚记为“03”和“04”，并输入文章。6)保存页面，按下“f12”键预览。实验结果分析这几天对Dreamweaver的学习已经基本掌握了他的一些简单的操作，可以创建一个简单的网页，适当的加一些文字链接、图片链接、邮件链接和一些超链接等。通过视频的学习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。指导教师批阅：1、实验态度：不认真（），较认真（），认真（）2、实验目的：不明确（），较明确（），明确（）3、实验内容：不完整（），较完整（），完整（）4、实验步骤：混乱（），较清晰（），清晰（）5、实验结果：错误（），基本正确（），正确（）6、实验结果分析：无（），不充分（），较充分（），充分（）7、其它补充：总评成绩：评阅教师（签字）：评阅时间：中南民族大学管理学院学生实验报告实验（三）网页布局操作实验时间：2015.05.07实验目的1、掌握表格的基本使用方法和表格的编辑处理；2、掌握表格布局页面的方法；3、掌握层的操作及参数设置；4、掌握层布局页面的方法；5、掌握框架布局页面的方法。实验内容1.完成书上例子，熟悉使用布局模式创建页面以及布局表格和布局单元格的操作方式，熟悉框架和层的运用。2.完成课上所讲练习“水果世界”3.利用框架完成以下页面的设计4.利用层完成以下页面的设计5.完成课堂所讲利用层来实现拼图游戏实验步骤在老师指导下，完成各项任务。实验结果分析尝试了网页布局这一种新的框架布局页面的方法。中南民族大学管理学院学生实验报告指导教师批阅：1、实验态度：不认真（），较认真（），认真（）2、实验目的：不明确（），较明确（），明确（）3、实验内容：不完整（），较完整（），完整（）4、实验步骤：混乱（），较清晰（），清晰（）5、实验结果：错误（），基本正确（），正确（）6、实验结果分析：无（），不充分（），较充分（），充分（）7、其它补充：总评成绩：评阅教师（签字）：评阅时间：中南民族大学管理学院学生实验报告实验（四）CSS基本操作实验时间：2015.05.14实验目的熟练掌握css的常用属性，并应用在设计中。使得网页设计内容更加丰富实验内容1)了解CSS的属性2)使用不同的方法（HTML属性，JavaScript，CSS）为页面底版设置颜色3)在不同位置设置CSS（直接写在控件中，另外设置样式表），取得相同的结果4)修改控件中字体的尺寸和颜色5)利用CSS设置菜单（展开和隐藏效果）实验步骤1.用html设置页面底板颜色：htmlheadtitle使用BODY属性设置页面颜色/title/headbodybgcolor=#FF0000”页面颜色为红色/body/html2、用JavaScript设置页面底板颜色：htmlheadtitle使用JavaScript设置页面颜色中南民族大学管理学院学生实验报告/title/headbodyscriptlanguage=”javascript”document.bgColor=“FF0000”;/script页面颜色为红色/body/html3、用CSS设置页面底板颜色：htmlheadtitle使用CSS设置页面颜色/title/headbodystyle=”background-color:#ff0000;”页面颜色为红色/body/html4、在不同位置设置css；（1）在控件中：htmlheadtitle使用CSS设置页面颜色/title/headbodystyle=”background-color:#ff0000;”CSS直接写在控件属性中/body/html（2）另外设置样式表：Style-name{Background-color:#00FF00}5、修改控件中字体的尺寸和颜色：htmlheadtitle默认控件中字体的尺寸和颜色/title中南民族大学管理学院学生实验报告/headbodyfontsize=20姓名：/fontinputtype=”textfield”value=”杨晓玉”/body/html实验结果分析利用css来设置使得编辑更加简单，不会有繁琐的代码，使得设置更加方便用div+css也有许多好处使得设计简单方便，节省资源实验设计的效果与每一部分的属性设计关系很大，要熟练掌握设计步骤与过程才能达到所要求的效果。指导教师批阅：1、实验态度：不认真（），较认真（），认真（）2、实验目的：不明确（），较明确（），明确（）3、实验内容：不完整（），较完整（），完整（）4、实验步骤：混乱（），较清晰（），清晰（）5、实验结果：错误（），基本正确（），正确（）6、实验结果分析：无（），不充分（），较充分（），充分（）7、其它补充：总评成绩：评阅教师（签字）：评阅时间：中南民族大学管理学院学生实验报告实验（五）模板和库文件应用实验时间：2015.05.21实验目的能够熟练的在DW中制作模板和库文件实验内容1、制作模板可编辑区域2、制作模板可编辑的可选区域3、制作模板可选区域4、制作库文件实验步骤第一个实验制作模板可编辑区域第一步：建立一个普通页面，并把它另存为模板，如下图。我们给新建的模板起个“dd1”的名称。第二步：点击“保存”将生成“dd1.dwt”模板页，注意它的扩展名为“.dwt”。而且站点内将自动生成“Templates”文件夹，用来放置模板文件。第三步：选中我们要加入可编辑区域的表格，这里我们选择中间淡蓝色区域，所以我们点中下面的“table”标签。第四步：选中常用选项卡→模板→可编辑区域第五步：我们给这个可编辑区域起个“a1”的名称，中南民族大学管理学院学生实验报告点击“确定”第二个实验：制作模板可编辑的可选区域第一步：将光标放入要成为可编辑的可选区域单元格内选中文本，第二步：选中常用选项卡→模板→可编辑的可选区域第三步：在弹出的对话框中输入可编辑的可选区域名称，这里我们是“c1”第四步：点击确定第三个实验：制作模板可选区域第一步：选中要设定为可选区域的部分，这里点下的“td”标签来选中“宝马”单元格。第二步：选中常用选项卡→模板→可选区域第三步：在弹出的窗口中，给可选区域取名，这里我们是“d1”第四步：按照上述方法分别建立“d2”“d3”“d4”三个可选区域。第一步：用dd3建立的第一个页面中，把可编辑的可选区域C1里的“车的世界”改成“德国车”第二步：选中“修改”菜单中的“模板属性”中南民族大学管理学院学生实验报告第三步：将弹出的窗口修改、第四个实验：制作库文件第一步：在“资源”里找到“库”（最后一个图标）然后建立如下图“Untitled3”的库文件。第二步：将光标放在要放入库文件的表格中，再点击库面板下面的“插入”那么库文件就被放到相应的页面中了。实验结果分析模板和库文件都是提高我们做页面效率的非常好的工具，