网页的创立及其基础结构

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