《网页设计》实验讲义

《《网页设计》实验讲义》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验一用Dreamweaver制作简单网页一、实验目的1.熟悉Dreamweaver界面和基本操作2.掌握在Dreamweaver中创建网站、创建空白网页、保存网页的方法3.掌握网页基本元素的插入和设置方法二、预备知识1.文档窗口视图“代码”视图：是一个用于编写和编辑XHTML、JavaScript、ASP、PHP等代码的手工编码环境，可在该视图中直接输入XHTML等代码制作网页。“设计”视图：是一个用于可视化编辑网页的设计环境，在该视图中显示的页面类似于在浏览器中看到的页面。“拆分”视图：将文档窗口一分为二，上面显示“代码”视图，

2、下面显示“设计”视图，以方便对照。2.常用面板“插入”面板：位置紧接在菜单栏下面，包括“常用”、“布局”、“表单”等子面板，可用来在网页光标处插入各种网页元素。相应的功能也可由菜单“插入记录”完成。“属性”面板：位置在网页编辑区下面，用于显示或修改所选中的网页元素的属性，是Dreamweaver中最常用的面板。随着所选对象不同，属性面板呈现的参数也不同。“文件”面板：位置在网页编辑区右边，用于访问和管理网站内容。如图1-1所示。图1-1Dreamweaver界面3.创建站点在Windows资源管理器中创建目录作为站点目录，并在该目录

3、下创建images目录，将所需要的图片等素材文件复制到images目录下。注意：网站中的目录名和文件名应该用英文字母和数字，避免用中文，否则后面创建网页时可能会识别不出来。启动Dreamweaver，选择“站点”菜单→“新建站点”命令，进行设置。4.创建网页及保存选择“文件”菜单→“新建”命令，创建网页。选择“文件”菜单→“保存”命令，保存网页。默认保存位置为站点目录，默认保存类型为“.html”。注意：网页创建后，应该立即保存，这样以后在页面中插入的图片、链接可以以相对路径保存，避免网站上传后找不到图片、链接的情况发生。5.设置页

4、面属性在“属性”面板中单击“页面属性”按钮，可以设置如网页标题、页面文本字体格式、网页背景颜色或图像、链接文字颜色和格式等页面属性。6.插入网页基本元素添加文本：直接输入，可在“属性”面板中设置文本格式。插入表格：选择“插入记录”菜单→“表格”命令，在光标处插入表格。可在“属性”面板中设置表格属性。插入图像：选择“插入记录”菜单→“图像”命令，在光标处插入图像。可在“属性”面板中设置图像属性。添加链接：选择热点文字或图像，在属性面板中单击“链接”文本框右边的，选择站点目录下的文件，即可将热点链接到该文件。三、示例1.启动Dreamw

5、eaver在桌面上双击Dreamweaver图标。2.熟悉Dreamweaver窗口和基本操作操作1：观察Dreamweaver的窗口组成。操作2：显示或隐藏面板界面上未显示的面板，可通过选择“窗口”菜单中相应的面板名显示出来（此时相应命令前有“√”），再执行一次同样的命令则隐藏面板。3.创建网站操作1：在Windows资源管理器中创建目录D:WEBexperiment，作为站点目录；再在该目录下创建images目录，将所需要的图片等素材文件复制到images目录下。操作2：选择“站点”菜单→“新建站点”命令，在对话框中选择“高

6、级”选项卡，如图1-2设置站点，“确定”。完成站点创建。图1-2站点设置4.创建空白网页并保存操作1：选择“文件”菜单→“新建”命令，在打开的对话框中，选“空白页”，“页面类型”选“HTML”，“布局”选“无”，单击“创建”按钮。操作2：选择“文件”菜单→“保存”命令，在打开的对话框中，会发现保存位置已经是站点目录D:WEBexperiment，输入文件名“index”，保存类型默认是“.html”，单击“保存”按钮。此时可在右边的文件面板中看到名为“index.html”的文件（若看不到可选择“窗口”菜单→“文件”命令显示文件

7、面板）。5.观察Dreamweaver文档窗口的三个视图操作1：单击“index.html”文档窗口的“代码”按钮，切换到代码视图，可以看到如图6.1所示的Dreamweaver自动生成的XHTML文档基本结构，可在该视图中直接输入XHTML代码制作网页。操作2：单击“拆分”按钮，切换到拆分视图，可看到文档窗口一分为二，上面显示“代码”视图，下面显示相应的“设计”视图，方便对照。操作3：单击“设计”按钮，切换到设计视图，这是Dreamweaver提供的可视化编辑视图，在Dreamweaver中设计网页主要在该视图进行。6.设置页面属

8、性操作1：在属性面板中单击“页面属性”按钮，打开对话框。操作2：单击“页面字体”右边的按钮，若选项中没有“隶书”，则选择“编辑字体列表”，在“可用字体”中选择“隶书”，单击按钮，可以看到“选择的字体”中出现了“隶书”，单击“确定”按钮