10066013_張德龙_网站设计实验报告.docVIP

院 系： 计算机科学学院 专 业： 网络工程 年 级： 2010级 课程名称： 网站管理与设计 学 号： 姓 名： 张 德 龙 指导教师：周凌云 冯忠双 金佳 2012年 5 月 22 日 实验名称 实验一 Web服务器的配置 实验二 HTML、Dreamweaver、CSS+DIV简单网页制作 实验 类型 设计型 综合型 创新型 √ 实 验 目 的 或 要 求 熟悉Web的工作原理 学习Web服务器的配置（Xampp或者Wamp的配置） 熟悉HTML、CSS、DIV 练习使用Dreamweaver 8制作网页 掌握简单网页设计与制作的方法 实 验 原 理 （ 操 作 步 骤 ） 一、Web服务器的配置（Xampp的配置） 1,Xampp配置原理： Xampp是一个强大的集成强大的软件包，基本的软件包包括系统、编程和服务器软件 Apache，著名的 Web 服务器 按安装过程的步骤，进行安装，直至安装完成。 开始配置服务器。 实 验 原 理 （ 算 法 流 程 ） ?二、HTML、CSS、DIV的简单应用 ? 1，熟悉HTML、CSS、DIV概念 ? 超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言 2，HTML、CSS、DIV的简单应用 用CSS控制的横向列表菜单： ?Web代码设计如下： html head title用CSS控制的横向列表菜单/title style type = “test/css” .test ul{list-style:none;} .test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;} .test a{display:block;text-align:center;height:30px;} .test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;} .test a:visited{color:#666;text-decoration:underline; .testa:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;} /style /head body div class=test ul lia href=1首页/a/li lia href=2产品介绍/a/li lia href=3服务介绍/a/li lia href=4技术支持/a/li lia href=5立刻购买/a/li lia href=6联系我们/a/li /ul /div /body ?/html 实 验 原 理 （ 算 法 流 程 ） 三、Dreamweaver的的使用 ? 如何利用Dreamweaver建立站点？ 步骤如下： ? 1，选择菜单栏中的“站点〉管理站点”命令，弹出“管理站点”对话框，单机“新建”按钮，然后从弹出的列表中选择“站点“选项 ? 2，选择站点”选项，在弹出的“站点定义为”对话框中，切换到“基本”选择卡，在对话框中可以根据网站的需要定义一个站点名称 ? 3，单击“下一步”按钮，出现想到的下一个界面，询问是否要使用服务器技术单击“下一步”按钮，选择要定义（本地站点或服务器上编辑）? ? 5，单击“下一步”按钮，询问是否使用服务器 ? 6，单击“下一步”按钮，将显示站点基本信息概要 ? 7，单击“完成”按钮，弹出“管理站点”对话框，其中显示了新建的站点 ? 8，新建站点完成。 ? 如何管理站点？ ? 操作如下： 1，打开站点，选择菜单栏中的“窗口〉文件”命令，打开文件面板，在文件面板中显示站点中的所有文件。单击文件面板右侧的“展开∥折叠”按钮，即可打开站点管理器窗口，左侧显示远程服务器站点上的文件列表，右侧显示本地站点文件列表编辑站点，选择菜单栏中的“站点〉管理