网页的创立及其基础结构_第1页
网页的创立及其基础结构_第2页
网页的创立及其基础结构_第3页
网页的创立及其基础结构_第4页
网页的创立及其基础结构_第5页
已阅读5页,还剩1页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、实验一网页的创建及其基本结构【实验目的】1. 学会站点的建立、站点内文件夹及网页的创建。2. 熟练掌握网页中导航条、链接、网页文字和图像的应用。3. 熟悉dreamweaver 8网页设计的基本过程。【实验环境】1. 工具软件:dreeimweaver 82. 本实验提供的网页(index.html)和所需的图像,文件名为(“网上商 城”上机实验资料)。【实验内容】1 .熟悉dreamweaver的安装、启动、基本工作环境和操作界面组成。2创建本地站点。3. 按照木实验提供的网页(indcx.html)上的内容和格式,制作一个内容 和格式相同的网页。3. 练习图像的插入、导航栏的制作和网页z间

2、的链接。4. 练习图文混排,实现文字环绕图像的功能。【实验步骤】1. 创建本地站点(1) 在dreamweaver 8中执行【站点】->【新建站点】命令,再选择“基本” 选项卡,把“您打算为您的站点起什么名字? ”项的“未命名站点1”改 为所需要的名字,比如本实验中输入"myweb”作为站点名字。(2) 单击“下一步”按钮,会显示対话框“您是否打算使用服务器技术,如 coldfusion、asp. net> asp jsp或php?”本实验讲解静态网页设计技术, 所以选择笫一项“否,我不想使用服务器技术。”项。(3) 单击“下一步”按钮,会显示对话框“在开发过程小,您打算

3、如何使用 您的文件? ”按默认选项,即选择“编辑我的计算机上的本地副本,完成后 再上传到服务器(推荐)”。单击“您将把文件存储在计算机上的什么位 置? ”右侧的文件夹按钮,设置木地站点。(4) 在打开的“选择站点myweb的本地文件夹”项中,选择本地文件夹位置, 比如e: myweb,选择“myweb”文件夹,单击"打开”按钮,然后再单击 “选择”按钮。(先在e盘卜建立一个名为myweb文件夹(e: myweb),这个文件夹就是你的站点存放位置)。(5) 单击“下一步”按钮,会显示对话框“您如何连接到远程服务器? ”选 择“无”项。(6) 单击“下一步”按钮,出现站点定义的总结信息,

4、包括本地信息、远程 信息、测试服务器信息等所示。(7) 单击“完成”按钮,这样站点定义就完成了。在dreamweaver屏幕右侧 的文件面板屮可以看到刚刚创建的木地站点。2. 在本地站点下创建一个名称为image文件夹,并将本实验提供的图像(在本 实验提供的“实验一材料”文件夹下的“image”文件夹下)全部拷贝到该文 件夹下。3. 在本站点建立一个网站的首页,将首页的标题命名为“网上商城”,同时将网 页的首页保存在本站点下(“e: myweb”),并命名为index, html的文件。 同时在本站点下建立10个网页作链接使用,分别命名为bijiben. html.f uwuqi. html&

5、gt; haocai. html> mp3 .html、 shouji .html、 shexiangtou. html> taishiji html、 touyingji. html> shumaxiangji html 和 guanyuwomen, html。(1) 在bijiben. html网页中输入文字“笔记本”并居中显示。(2) 在fuwuqi.html网页中输入文字“服务器”,并居中显示。(3) 在haocai.html网页中输入文字“耗材”,并居中显示。(4) 在mp3, html网页中输入文字“mp3/4” ,并居中显示。(5) 在shouji.html网页

6、中输入文字“手机”,并居中显示。(6) 在shexiangtou. html网页中输入文字"摄像头”,并居中显示。(7) 在taishi ji. html网页中输入文字“台式机”,并居中显示。(8) 在touyingji. html网页中输入文字“投影机”,并居中显示。(9) 在shumaxiangji.html网页中输入文字“数码相机”,并居中显示。(10) 在guanyuwomen. html网页中输入文字“关于我们”,并居中显示。4. 在主页index, html设计视图窗口屮的按照本实验提供的index, html网页上 的顺序,在设计视图窗口中同一行依次插入三个图像,分别为

7、sc_logo.jpg, sc_banner. gif 和 weather. jpg 文件。5. 在笫二行按照本实验提供的网页上的顺序创建一个导航条。依次在“状态图 像”和“鼠标经过图像”屮单击“浏览”选择图像,其他的图像不选择。在“按 下时,前往的url: ”中单击“浏览”,分别选择与导航条中的元件图像相对 应的网页,即 bi jiben. html > fuwuqi. html > haocai. html > mp3, html > shouji.html> shexiangtou. html> taishiji. html> touyingji

8、. html 和 shumaxiangji. html网页。做完导航条中的一个元件后,单击+按钮,添加下 一个元件,共有9个导航条元件。导航条由一组图像组成,这些图像的显示内容随用户操作而变化。使用 “插入导航条”命令之前,须首先为各个导航条元件的显示状态创建一组图 像。(可将导航条元件视为按钮,因为单击它时,导航条项目将用户带到其 它页面)。选择“插入” f “图像对彖” f “导航条”选项;或直接单击“插入” 面板中“常用”选项的“图像”图标中的“导航条”,弹出“插入导航 条”对话框。图1-1导航条对话框在“项廿名称”文本框中,键入导航栏项目的名称。每一个项目都对应一个按钮,该按钮具有一组

9、状态图像,最多只有四种状态。项口名称在“导 航条项目”列表中显示。单击+按钮添加导航条元件,用箭头按钮向上 或使用在列表屮向下排列项口的导航条屮的位置。单击按钮,依次选择状态图像、鼠标经过状态时显示的图像。6. 在下一行中插入一个名为ws. jpg的图像。7. 在图像右边插入文字。8. 选屮图像,在属性面板屮将图像ws. jpg的属性设置为左对齐,垂直边距为10像素,水平边距为10像素。9. 选中文字,在屈性而板屮将文字的字体大小设置为18像素。字体设置为“宋 体”。即可实现文字环绕图像。10. 空几行。11在居中的位置插入一个“鼠标经过图像”(图像为dltl.gif和dlt2.gif), 依次选择原始图像dltl.gif,鼠标经过图像dlt2.gifo在“按下时,前往的 url: ”中单击“浏览&quo

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论