网页设计实验报告.docx
- 文档编号:5861146
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:9
- 大小:322.31KB
网页设计实验报告.docx
《网页设计实验报告.docx》由会员分享,可在线阅读,更多相关《网页设计实验报告.docx(9页珍藏版)》请在冰豆网上搜索。
网页设计实验报告
某某学院
实验报告
2011至2012学年度第一学期
课程名称:
网页设计与制作
系别班级:
学号:
姓名:
实验项目一:
创建和管理站点
填写日期:
2011/10/8实验时期:
2011/10/10
一、实验主要内容
(1)建立本地站点
(2)搭建站点结构
(3)管理和维护站点
二、实验目的
(1)掌握站点的总体规划方法
(2)掌握本地站点的定义方法
(3)掌握站点结构的搭建方法
(4)掌握站点的管理与维护方法
三、实验具体操作过程(可以附算法)
建立本地站点:
在D盘上建立“畅想未来”的本地站点,操作步骤如下:
(1)在菜单栏中选择“站点”→“新建站点”命令。
(2)单击“下一步”按钮,选择“否,我不想使用服务器技术”单选按钮。
(3)单击“下一步”按钮,设置站点的编辑方式和存储位置。
(4)单击“下一步”按钮,设置计算机与服务器的链接方式,选择“无”选项。
(5)单击“下一步”按钮,Dreamweaver列出前面设置的各项信息以供用户检查。
(6)在确认无误后,单击“完成”按钮。
系统会在D盘的根目录下自动创建“future”文件夹。
搭建站点结构
(1)在“文件”面板中,单击文件下拉列表框,从中选择“畅想未来”,打开“畅想未来”站点。
(2)右键单击站点根文件,弹出快捷菜单,从中选择“新建文件夹”命令,在本地站点的根文件夹下创件一个新文件夹。
设置网站首页
(1)在“文件”面板中右键单击某个文件,从快捷菜单中选择“设成首页”命令。
(2)在高级选项卡中,选择左侧“分类”列表框中的“站点地图布局”选项。
管理和维护站点
利用Dreamweaver中的“管理站点”对话框,对站点进行多方面的管理和维护,如复制、编辑、删除等操作。
四、实验结果分析
(1)建立一个站点,首先要规划站点结构,考虑站点中各类文件的存放位置,然后使用Dreamweaver创建站点。
同时使用“文件”面板来管理站点中的文件。
(2)有两种方式规划站点:
按照文件类型组织文件;按照主题栏目组织文件。
(3)网站的首页文件必须放在站点的根文件夹中。
(4)网站使用的所有网页和相关文件必须存放在站点的文件夹或子文件夹中,但不要将所有文件都存放在根文件下,以免造成文件管理混乱。
(5)文件夹的层次不要太深,建议不要超过三层,以方便维护管理。
实验项目二:
在网页中建立各种超链接
填写日期:
2011/10/15实验日:
2011/10/14
一、实验主要内容
在本地站点“future”中打开第3章制作的index.html页面,依次按照下述内容在页面中创建各种超链接。
(1)创建内部超链接;
(2)创建内部超链接;
(3)创建空连接和脚本链接;
(4)创建E-mail超链接;
二、实验目的
(1)学会掌握内部、外部链接的创建方法;
(2)学会掌握E-mail连接的创建方法;
(3)学会掌握锚点链接的制作方法;
(4)学会掌握链接颜色的设置方法;
(5)了解图像映射的制作方法;
(6)了解跳转菜单、翻转图像实例、导航条的制作方法。
三、实验具体操作过程
4.2.1创建内部链接
(1)选中文本"未来都市",在文本”属性”面板中单击”浏览”文件按钮,在打开的“选择文件”对话框中选中网页文件ex5_city.html,如下图所示。
2)选中文本“未来旅游”,在文本“属性”面板中单击“指向文件”
,并直接拖动鼠标,移动鼠标到文件面板中所要链接的目标文件ex5_travel.html上。
(3)选中“科幻小说”,在文本“属性”面板上的链接文本框中直接输入被链接文件的相对路径及文件名。
(4)按F12键,保存并预览网页。
4.2.2在新的浏览器窗口中打开链接文件
怎样在打开链接文件的同时保留原开的窗口呢?
这就需要在属性面板上的目标下拉列表框中进行设置,如图
(1)在index.html网页中,选择“未来都市”超链接。
(2)在目标下拉列表框中选择“blank”选项。
(3)预览网页。
效果如图:
(4)同样地,将其他文本的链接目标也设置为“blank”。
4.2.3创建外部链接
(1)在网页index.html文件页脚中,输入“友情链接”文本。
(2)选中“友情链接”文本,在文本“属性”面板上链接文本框中输入完整的网址,如图
(3)在“目标”下拉列表框中选择“blank”。
(4)保存并预览网页。
4.2.4创建空链接和脚本链接
1.创建空链接
(1)在index.html网页中,选中“未来通讯”文本。
(2)在“属性”面板中的“链接”文本框中输入空链接符号“#”,即创立了一个空链接。
2.创建脚本链接
(1)打开“未来都市”网页ex4_city.html.
(2)选中close文本,如图:
(4)预览网页。
4.2.5创建E-mail链接
(1)在网页index.html的页脚中选中“联系我们”文本。
(2)在文本属性面板上的“链接”文本框中输入mailto:
teach_ie@”,如图所示
(3)在浏览器中预览网页。
五、实验结果分析
(1)本实验详细介绍了网页中链接的应用和各种链接的创建方法。
在Dreamweaver中不仅可以把文本制成超链接,还可以把图像制成超链接。
被链接的对象不仅是网页,还可以是其他图像、多媒体文件、E-mail、可供下载的软件以及其他网站等。
超链接有以下几种类型:
●内部链接:
在同一网站文件之间的链接。
●外部链接:
不同网站文件之间的链接。
●锚点链接:
同一网页或不同网页的指定位置的链接。
●E-mail链接:
电子邮件的链接。
对于连接路径,则又分为绝对路径、文档相对路径和根相对路径。
(2)直接输入文件的路径和文件名可能会导致不正确的路径和链接。
所以为保证路径是正确的,最好在“选择文件”对话框中选取所要链接的文件。
(3)在创建外部链接时,输入的网址必须是包含协议类型的绝对路径,否则将会出现“该页无法显示”的信息。
实验项目三:
利用表格设计和制作网页
填写日期:
2011/10/25实验日期2011/10/24
一、实验主要内容
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 实验 报告