网页的创建及其基本结构.doc

《网页的创建及其基本结构.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验一　网页的创建及其基本结构【实验目的】1．学会站点的建立、站点内文件夹及网页的创建。2．熟练掌握网页中导航条、链接、网页文字和图像的应用。3．熟悉Dreamweaver8网页设计的基本过程。【实验环境】1.工具软件：Dreamweaver82．本实验提供的网页（index.html）和所需的图像，文件名为（“网上商城”上机实验资料）。【实验内容】1．熟悉Dreamweaver的安装、启动、基本工作环境和操作界面组成。2．创建本地站点。3．按照本实验提供的网页（index.html）上的内容和格式，制作一个内容和格式相同的网页。3．

2、练习图像的插入、导航栏的制作和网页之间的链接。4．练习图文混排，实现文字环绕图像的功能。【实验步骤】1．创建本地站点（1）在Dreamweaver8中执行【站点】->【新建站点】命令，再选择“基本”选项卡，把“您打算为您的站点起什么名字？”项的“未命名站点1”改为所需要的名字，比如本实验中输入“myweb”作为站点名字。（2）单击“下一步”按钮，会显示对话框“您是否打算使用服务器技术，如ColdFusion、asp.net、asp、jsp或php?”本实验讲解静态网页设计技术，所以选择第一项“否，我不想使用服务器技术。”项。（3）单击

3、“下一步”按钮，会显示对话框“在开发过程中，您打算如何使用您的文件？”按默认选项，即选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”。单击“您将把文件存储在计算机上的什么位置？”右侧的文件夹按钮，设置本地站点。（4）在打开的“选择站点myweb的本地文件夹”项中，选择本地文件夹位置，比如E:myweb，选择“myweb”文件夹，单击“打开”按钮，然后再单击“选择”按钮。（先在E盘下建立一个名为myweb文件夹（E:myweb），这个文件夹就是你的站点存放位置）。（5）单击“下一步”按钮，会显示对话框“您如何连接到远

4、程服务器？”选择“无”项。（6）单击“下一步”按钮，出现站点定义的总结信息，包括本地信息、远程信息、测试服务器信息等所示。（7）单击“完成”按钮，这样站点定义就完成了。在Dreamweaver屏幕右侧的文件面板中可以看到刚刚创建的本地站点。2．在本地站点下创建一个名称为image文件夹，并将本实验提供的图像（在本实验提供的“实验一材料”文件夹下的“image”文件夹下）全部拷贝到该文件夹下。3.在本站点建立一个网站的首页，将首页的标题命名为“网上商城”，同时将网页的首页保存在本站点下（“E:myweb”），并命名为index.htm

5、l的文件。同时在本站点下建立10个网页作链接使用，分别命名为bijiben.html、fuwuqi.html、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网页中输入文字“耗材”，并居中显示。

6、（4）在mp3.html网页中输入文字“MP3/4”，并居中显示。（5）在shouji.html网页中输入文字“手机”，并居中显示。（6）在shexiangtou.html网页中输入文字“摄像头”，并居中显示。（7）在taishiji.html网页中输入文字“台式机”，并居中显示。（8）在touyingji.html网页中输入文字“投影机”，并居中显示。（9）在shumaxiangji.html网页中输入文字“数码相机”，并居中显示。（10）在guanyuwomen.html网页中输入文字“关于我们”，并居中显示。4．在主页index

7、.html设计视图窗口中的按照本实验提供的index.html网页上的顺序，在设计视图窗口中同一行依次插入三个图像，分别为sc_logo.jpg，sc_banner.gif和weather.jpg文件。5．在第二行按照本实验提供的网页上的顺序创建一个导航条。依次在“状态图像”和“鼠标经过图像”中单击“浏览”选择图像，其他的图像不选择。在“按下时，前往的URL：”中单击“浏览”，分别选择与导航条中的元件图像相对应的网页，即bijiben.html、fuwuqi.html、haocai.html、mp3.html、shouji.html、

8、shexiangtou.html、taishiji.html、touyingji.html和shumaxiangji.html网页。做完导航条中的一个元件后，单击+按钮，添加下一个元件，共有9个导航条元件。导航条由一组图