【Jsp精品源码栏目提醒】:网学会员鉴于大家对Jsp精品源码十分关注,论文会员在此为大家搜集整理了“实验1 HTML标记的基本语法和Dreamweaver的....swf - 其它资料”一文,供大家参考学习
基本操作实验目的1.了解网页开发中的一些基本概念;2.掌握 IIS 的配置方法;3.掌握网页开发的基本步骤,建立自己的站点;4.了解 HTML 文件的基本结构,并会使用浏览器测试 HTML 文件;5.掌握 HTML 语言的基本结构和常见标记;6.认识 DREAMWEAVER 8 的工作环境;7.掌握页面属性的设置;8.掌握文本、图像等基本元素的插入和属性设置;9.掌握链接的路径概念;10.掌握文本链接、图像链接的方式;11.掌握图像热点链接;12.掌握锚点链接的基本方式。
实验学时2 学时实验内容及步骤1.IIS 的安装与配置(1)安装 IIS若操作系统中还未安装 IIS 服务器,可打开“控制面板” ,然后单击启动 “添加/删除 ,程序” 在弹出如图 1 所示的对话框中选择 “添加/删除 Windows 组件” ,在如图 2 所示 ”的 Windows 组件向导对话框中选中“Internet 信息服务(IIS),然后单击“下一步” ,按向导指示,完成对 IIS 的安装(本例以 Windows XP 操作系统的安装过程为例,其他操作
系统的安装方法大致相同) 。
图 1 添加或删除程序对话框图 2 添加或删除 Windows 组建向导(2)启动 Internet 信息服务(IIS)Internet 信息服务简称为 IIS,单击 Windows 开始菜单→所有程序→管理工具→Internet 信息服务 (IIS)管理器,即可启动“Internet 信息服务”管理工具(如图 3 所示)图 3 Internet 信息服务(IIS)管理器(3)配置 IISIIS 安装后,系统自动创建了一个默认的 Web 站点,该站点的主目录默认为C:Inetpubwww.root。
用鼠标右键单击“默认 Web 站点” ,在弹出的快捷菜单中选择“属性” ,此时就可以打开站点属性设置对话框, (如图 4)在该对话框中,可完成对站点的全部配置。
图 4 默认 Web 站点属性a.设置主页文档单击“文档”标签,可切换到对主页文档的设置页面, (如图 7)主页文档是在浏览器中键入网站域名,而未制定所要访问的网页文件时,系统默认访问的页面文件。
常见的主页文件名有 index.htm、index.html、index.asp 、index.aspx、index.php、index.
jsp、default.htm、default.html、default.asp、default.aspx 等IIS 默认的主页
文档只有 default.htm 和 default.asp, 根据需要, 利用“添加”和“删除”按钮,可为站点设置所能解析的主页
文档。
b.启动与停止 IIS 服务在 Internet 信息服务的工具栏中提供有启动与停止服务的功能。
单击 可启动 IIS 服务器;单击 则停止 IIS 服务器。
(4)创建新的 WEB 服务打开 Internet 信息服务,在 IIS 中选择默认网站,右击默认网站→新建→虚拟目录,如图 5所示,按照提示完成虚拟目录的建立和设置。
图 5 新建虚拟目录建立好的虚拟目录如图 6 所示,显示在 IIS 左侧控制区。
图 6 建立好的虚拟目录如需要对虚拟目录进行新的设置,则右击虚拟目录,选择属性,将弹出如图 7 所示的WEB 属性设置窗口,可进行各项设置。
图 7 WEB 属性设置窗口2.Dreamweaver8.0 的启动与退出Dreamweaver8.0 的启动与退出与一般的 Windows 应用
程序的启动与退出一样,可以通过“开始”菜单启动,也可以将 Dreamweaver8.0 程序以快捷方式放在桌面上,然后双击该图标将其启动; 退出时可以在 “文件” 中选择 “退出” 、 或单击窗口关闭按钮、 或按 “ALTF4”快捷键关闭窗口。
3.熟悉 Dreamweaver8.0 的工作环境使用 Dreamweaver8.0 工作区,默认的界面中,工作区很小,如果要把工作区变大,选择
工作区右侧、下侧的三角形按钮,就可以隐藏面板组和属性面板。
如果要使用面板组,再点击三角形按钮。
图 8 Dreamweaver 8.0 的工作环境4.建立站点用 Dreamweaver8.0 建立一个本地站点,站点名为 Mysite,基本步骤如下:(1)在硬盘上建立一个站点目录如:F:Mysite,文件夹 Mysite 下建立有文件夹 pic、fla、css、db 等,分别用于存放网站中可能用到的图片、动画、样式以及数据库等文件。
(2)打开 Dreamweaver,在菜单栏上,点击站点菜单,选择新建站点,弹出新建站点的窗口。
(3)给站点起一个名字,可以起任意一个名字。
按下一步按钮,选择是否使用服务器技术。
因为实例建立的是一个静态站点,就选择“否,我不想使用服务器技术” 。
按下一步按钮, 因为要传到网上的虚拟主页空间, 就要选择 “编辑我的
计算机上的本地副本,完成后再传到服务器上” 。
按下一步,选择要定义的本地根文件夹,这里选择 Mysite 文件夹。
(4)点“选择”按钮,因为没有使用远程服务器,就选择“无” 。
按下一步,在出现站点相关信息对话框下选择“完成”按钮,一个站点就定义好了。
(5)如需要重新设置已建立的站点的基本属性,则在菜单栏上,点击站点菜单,选择管理站点,弹出管理站点的窗口,如图 9 所示,可对站点重新进行设置。
菜单栏常用工具栏工作区浮动面板标题栏属性面板图 9 管理站点窗口5.了解 HTML 文件的基本结构站点定义好之后,就要开始新建网页文件和文件夹了,在站点中点击右键,选择新建文件,给新建的文件输入名称,如 index.htm。
(1)双击 Mysite 站点中的 index.htm,打开一个空白的页面。
(2)切换 Dreamweaver 到代码视图,清空所有代码。
(3)在代码视图中输入如下的 HTML 代码程序建立一个具有基本结构标记的 HTML文件,然后保存
HTML 文件,并在浏览器中运行,观察其效果。
我的个人主页6.页面设置(1)双击 Mysite 站点中的 index.htm,打开页面。
我们将从这个空白页面开始制作,了解页面属性的设置和作用。
在工作区点鼠标右键,选择页面属性,打开页面属性对话框:图 10 页面属性设置在其中,我们可以设置页面的边距、背景、链接等属性。
设置左边界,顶部边界,边界宽度, 边界高度都为 0, 可以使页面中的表格与背景没有空隙。
用得比较多的还有背景图像,选择一个已经做好的图像,就可以设置成页面的背景图像。
(2)页面大小参数的设定尺寸大小不同的显示器,往往分辨率设置的不同,网页要在每个显示器上显示正常,就要设置恰当的参数,常用的是在页面中插入表格放内容(关于表格的插入方法具体见第 6部分的“建立表格”部分) ,采用象素和百分比两种。
采用象素为单位,是使用最多的显示器为参照的,现在数量最多的显示器是 17 英寸和19 英寸的, 所以页面使用象素为单位时, 是以 17 英寸为标准,
常用 1024×768 的分辨率,设置页面大小的时候,应以此为参考值。
使用百分比,可以在各种显示器上有相同的效果,宽度设置为 100%时,在各种显示器上全屏显示。
(3)页面的版式设计做一个网页,先要规划好版式,通过插入表格可以实现网页版式的布局。
常用的版式是分栏结构,如图 11 所示,图 11 基本的页面版式
设计以上是一个主页的简单结构, 由三个表格组成。
第一个表格, 二行一列, 第一行放 LOGO和 Banner第二行放导航菜单。
中间一个表格,一行二列,里面再分别插入两个表格,左边表格放
导航或者图片,右边表格放网页内容。
典型的二分栏结构。
下面一个表格,一行一列,放
版权声明。
常见的分栏结构,还有三分栏,四分栏,下面是一个三分栏的结构:图 11 三分栏的页面版式设计7.为网页添加各种对象在 Dreamweaver 工作区中,可以插入文字、图片、动画以及一般链接、邮件链接、锚点链接、文件下载等,下面通过实例具体介绍相关操作方法。
(1)双击 Mysite 站点中的 index.htm,在以上程序的基础上添加粗体部分的语句并运行,浏览网页。
我的个人主页我要变大我要更大我要变成红色我要变成蓝色2增加移动字幕在以上基础上,在代码中加入以下粗体部分,保存,在浏览器中运行观察效果。
我的个人主页我要变大我要更大我要变成红色我要变成蓝色静夜思静夜思——李白窗前明月光疑是地上霜举头望明月低头思故乡(3)建立表格在以上基础上,在代码中继续加入以下粗体部分,保存,在浏览器中运行观察效果。
我的个人主页我要变大我要更大我要变成红色我要变成蓝色静夜思静夜思——李白窗前明月光疑是地上霜举头望明月低头思故乡我要建立表格表格标题行第 1 行第 1 列右对齐第 1 行第 2 列右对齐第 2 行第 1 列居中第 2 行第 2 列居中第 3 行第 1 列左对齐第 3 行第 2 列左对齐(4)插入图片在以上基础上,在代码中加入以下粗体部分,保存,在浏览器中运行观察效果。
我的个人主页字体变大字体要更大字体变成兰色字体变成褐色静夜思静夜思——李白窗前明月光疑是地上霜举头望明月低头思故乡我要建立表格表格标题行第 1 行第 1 列右对齐第 1 行第 2 列右对齐第 2 行第 1 列居中第 2 行第 2 列居中第 3 行第 1 列左对齐第 3 行第 2 列左对齐我要插入图片pic.jpg,并和此网页放在同一目录下点击以上图像可以到我们学校主页(5)建立各种链接在以上基础上,在代码中加入以下粗体部分,保存,在浏览器中运行观察效果。
我的个人主页字体变大字体要更大字体变成兰色字体变成褐色静夜思静夜思——李白窗前明月光疑是地上霜举头望明月低头思故乡我要建立表格表格标题行第 1 行第 1 列右对齐第 1 行第 2 列右对齐第 2 行第 1 列居中第 2 行第 2 列居中第 3 行第 1 列左对齐第 3 行第 2 列左对齐我要插入图片pic.jpg,并和此网页放在同一目录下点击以上图像可以到我们学校主页我要链接到中国教育科研网我要链接到自己的主页做一名为 wang.htm 的网页并和此网页放在同一目录下 我要链接到本页的第七行“我要建立表格”(6)改变网页背景图片,加入背景音乐。
①新建一个页面 new1.htm,为页面添加背景音乐和背景图片,代码如下:新背景页面②新建第二个页面new2.htm,实现 20 秒自动跳到我主页(new1.htm),代码如下:欢迎光临我的页面制作完成的简单的网页
演示观察效果。
实验注意事项1.所有 HTML 文件的编辑可以使用 Window 的“记事本”实现。
2. 在 IIS 中建立虚拟目录时,虚拟目录不要采用中文命名,其在磁盘上所对应物理路径中也不要出现中文,否则有可能不能正常显示。
3.按实验内容完成操作,适当的改变粗体语句的属性及参数,使页面效果改变,然后记录调整后网页的
源代码。
实验与思考1.可以将 WORD 文档,POWERPOINT 文档直接转换成 HTML 格式文件。
(1)做一个 1 页的 WORD 文档,将其另存为 HTML 格式文件。
(2)做一个有 5 张幻灯片的 PowerPoint 文档,将其另存为 HTML 格式文件。
在浏览器中,运行上述两个 HTML 文件。
写出转换步骤,并用 Dreamweaver 打开转换的HTML 文件,观察所转换的代码。
2.实验中采用直接书写代码的方式添加各种对象, 请自己尝试利用 Dreamweaver 中的工具栏和菜单栏中所提供的工具进行插入,并将两种方法进行比较。
3.你在调试所编写的 Web 页时遇到了哪些
问题,对你教训最深的是什么?