网站设计实验报告解析.doc

南京邮电大学 课内实验报告 课 程 名：网站设计与架构 任课教师： 沈洪洲 专业：信息管理与信息系统 学 号： 姓 名： 二○一五至二○一六年度第 二 学期 南京邮电大学 管理学院 《网站设计与架构》课程实验报告一 实验内容及基本要求： 实验项目名称：（1）网站规划与平台搭建；（2）使用Dreamweaver设计静态网页 实验类型：操作 每组人数：1 实验内容及要求： 内容（1）：掌握Dreamweaver开发平台搭建的方法。 要求：熟悉Dreamweaver软件工具，并学会配置和管理网站站点。 内容（2）：掌握利用Dreamweaver设计和开发静态网页的方法 要求：了解静态网页中各种元素的特征及使用方法，利用Dreamweaver自行动手开发一个个人网站，至少包括4个页面，尝试使用布局、超链接、颜色、表格、图片、表单等HTML技术，学习并掌握CSS的设置和使用。希望能够做出具有自己独特风格的个人网站。 创建站点 (1)选择“菜单”下的“管理站点”对话框。单击“新建”按钮，选择弹出菜单中的“站点”选项。如图1所示： 图1 （2）在打开的对话框上方有“基本”和“高级”两个选项卡，可以在站点向导和高级设置之间切换。选择“基本”选项卡。如图2所示： 图2 （3）在“您打算为您的站点起什么名字？”文本框中输入一个“On the Road”。单击“下一步”按钮。在弹出的界面中询问是否要使用服务器技术。选择“否，我不想使用服务器技术”。如图3所示： 图3 （4）单击“下一步”按钮，在弹出的界面中设置本地站点文件夹的地址，如图4所示： 图4 （5）单击“下一步”按钮，进入站点自定义界面，选择“无”，如图5所示： 图5 （6）单击“完成”按钮，结束“站点定义”对话框的设置，如图6所示： 建立静态网页 (1)搭建站点目录结构与文件管理 创建子页面 1历史 2情侣 3独行 4踏青 制作主页面。 1在主页面中给部分文本插入超级链接， 2在主页面中给部分图片插入运用图片热点工具将图片中的部分内容链接到子页面 链接方法如图所示： 3在含有文本的子页面中运用css样式设置文本格式如图所示： 附:各页面的代码 1主页面 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=gb2312 / title金陵游On the Road/title style type=text/css !-- body { background-image: url(img/e5035efb2272f935be987be492baa07b.jpg); } .STYLE2 {font-size: 18px} .STYLE3 {color: #FFFFFF} .STYLE4 {font-size: 24px; } .STYLE5 {font-size: 16px} .STYLE13 {color: #3AC5A9} .STYLE14 {color: #3AC5A9; font-size: 16px; } .STYLE15 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 36px; } -- /style/head body table width=100% border=0 align=center tr td height=463 valign=top background=img/1b2bc0312e2fd04d277c6904e0a75796.jpgtable width=100% border=0 tr td height=60 background=img/3d550cb442fe45be0547733ca2878cd1.jpgspan class=STYLE15金陵游On the Road /span/td /tr /table table width=100% height=30 border=0 tr tdimg src=img/QQ截图20160412000057.png width=355 hei