《网页设计》实验讲义.docx
- 文档编号:25778381
- 上传时间:2023-06-13
- 格式:DOCX
- 页数:37
- 大小:4.58MB
《网页设计》实验讲义.docx
《《网页设计》实验讲义.docx》由会员分享,可在线阅读,更多相关《《网页设计》实验讲义.docx(37页珍藏版)》请在冰豆网上搜索。
《网页设计》实验讲义
实验一用Dreamweaver制作简单网页
一、实验目的
1.熟悉Dreamweaver界面和基本操作
2.掌握在Dreamweaver中创建网站、创建空白网页、保存网页的方法
3.掌握网页基本元素的插入和设置方法
二、预备知识
1.文档窗口视图
“代码”视图:
是一个用于编写和编辑XHTML、JavaScript、ASP、PHP等代码的手工编码环境,可在该视图中直接输入XHTML等代码制作网页。
“设计”视图:
是一个用于可视化编辑网页的设计环境,在该视图中显示的页面类似于在浏览器中看到的页面。
“拆分”视图:
将文档窗口一分为二,上面显示“代码”视图,下面显示“设计”视图,以方便对照。
2.常用面板
“插入”面板:
位置紧接在菜单栏下面,包括“常用”、“布局”、“表单”等子面板,可用来在网页光标处插入各种网页元素。
相应的功能也可由菜单“插入记录”完成。
“属性”面板:
位置在网页编辑区下面,用于显示或修改所选中的网页元素的属性,是Dreamweaver中最常用的面板。
随着所选对象不同,属性面板呈现的参数也不同。
“文件”面板:
位置在网页编辑区右边,用于访问和管理网站内容。
如图1-1所示。
图1-1Dreamweaver界面
3.创建站点
在Windows资源管理器中创建目录作为站点目录,并在该目录下创建images目录,将所需要的图片等素材文件复制到images目录下。
注意:
网站中的目录名和文件名应该用英文字母和数字,避免用中文,否则后面创建网页时可能会识别不出来。
启动Dreamweaver,选择“站点”菜单→“新建站点”命令,进行设置。
4.创建网页及保存
选择“文件”菜单→“新建”命令,创建网页。
选择“文件”菜单→“保存”命令,保存网页。
默认保存位置为站点目录,默认保存类型为“.html”。
注意:
网页创建后,应该立即保存,这样以后在页面中插入的图片、链接可以以相对路径保存,避免网站上传后找不到图片、链接的情况发生。
5.设置页面属性
在“属性”面板中单击“页面属性”按钮,可以设置如网页标题、页面文本字体格式、网页背景颜色或图像、链接文字颜色和格式等页面属性。
6.插入网页基本元素
添加文本:
直接输入,可在“属性”面板中设置文本格式。
插入表格:
选择“插入记录”菜单→“表格”命令,在光标处插入表格。
可在“属性”面板中设置表格属性。
插入图像:
选择“插入记录”菜单→“图像”命令,在光标处插入图像。
可在“属性”面板中设置图像属性。
添加链接:
选择热点文字或图像,在属性面板中单击“链接”文本框右边的
,选择站点目录下的文件,即可将热点链接到该文件。
三、示例
1.启动Dreamweaver
在桌面上双击Dreamweaver图标
。
2.熟悉Dreamweaver窗口和基本操作
操作1:
观察Dreamweaver的窗口组成。
操作2:
显示或隐藏面板
界面上未显示的面板,可通过选择“窗口”菜单中相应的面板名显示出来(此时相应命令前有“√”),再执行一次同样的命令则隐藏面板。
3.创建网站
操作1:
在Windows资源管理器中创建目录D:
\WEB\experiment,作为站点目录;再在该目录下创建images目录,将所需要的图片等素材文件复制到images目录下。
操作2:
选择“站点”菜单→“新建站点”命令,在对话框中选择“高级”选项卡,如图1-2设置站点,“确定”。
完成站点创建。
图1-2站点设置
4.创建空白网页并保存
操作1:
选择“文件”菜单→“新建”命令,在打开的对话框中,选“空白页”,“页面类型”选“HTML”,“布局”选“无”,单击“创建”按钮。
操作2:
选择“文件”菜单→“保存”命令,在打开的对话框中,会发现保存位置已经是站点目录D:
\WEB\experiment,输入文件名“index”,保存类型默认是“.html”,单击“保存”按钮。
此时可在右边的文件面板中看到名为“index.html”的文件(若看不到可选择“窗口”菜单→“文件”命令显示文件面板)。
5.观察Dreamweaver文档窗口的三个视图
操作1:
单击“index.html”文档窗口的“代码”按钮,切换到代码视图,可以看到如图6.1所示的Dreamweaver自动生成的XHTML文档基本结构,可在该视图中直接输入XHTML代码制作网页。
操作2:
单击“拆分”按钮,切换到拆分视图,可看到文档窗口一分为二,上面显示“代码”视图,下面显示相应的“设计”视图,方便对照。
操作3:
单击“设计”按钮,切换到设计视图,这是Dreamweaver提供的可视化编辑视图,在Dreamweaver中设计网页主要在该视图进行。
6.设置页面属性
操作1:
在属性面板中单击“页面属性”按钮,打开对话框。
操作2:
单击“页面字体”右边的
按钮,若选项中没有“隶书”,则选择“编辑字体列表”,在“可用字体”中选择“隶书”,单击
按钮,可以看到“选择的字体”中出现了“隶书”,单击“确定”按钮。
再次单击“页面字体”右边的
按钮,可以看到“隶书”出现在选项中,选择“隶书”。
网页的默认字体设为隶书。
操作3:
“大小”选择24像素,将网页的默认字体大小设为24像素。
操作4:
“文本颜色”选择黑色(#000000),将网页的默认文本颜色设为黑色。
操作5:
单击“背景图像”右边的“浏览”按钮,选择站点images目录下的“greenrabbit.jpg”文件,该图片将作为整个网页的背景。
操作6:
在“分类”中单击“标题/编码”,在“标题”文本框中输入“小白兔幼儿园”,该标题将显示在浏览器标题栏上。
操作7:
单击“确定”按钮,完成页面属性设置。
7.添加网页内容
操作1:
在文档窗口中输入“小白兔幼儿园”,回车,回车。
选中文字“小白兔幼儿园”,在属性面板中单击“居中对齐”按钮,“大小”输入48,回车。
操作2:
在文档窗口中单击“小白兔幼儿园”的下一行,选择“插入记录”菜单→“表格”命令,在打开的对话框中,设置1行4列,“表格宽度”为70%,下面3个文本框全部输入0,单击“确定”按钮。
在属性面板中,“对齐”选“居中对齐”,则表格在页面中水平居中。
操作3:
在表格的4个单元格中,依次输入“教育教学”、“招生信息”、“家园互动”、“联系方式”。
选中4个单元格,在属性面板中单击“居中对齐”按钮,则文字在单元格中居中对齐。
操作4:
添加链接。
选中文字“教育教学”,在属性面板中单击“链接”文本框右边的
,选择站点目录下的“education.html”文件,“确定”。
可以看到“链接”文本框中出现“education.html”文件名,这样就为文字“教育教学”创建了到网页“education.html”的链接。
选中文字“招生信息”,在文件面板中将“recruit.html”文件拖曳到属性面板的“链接”文本框中,回车。
这样就为文字“招生信息”创建了到网页“recruit.html”的链接,这是添加链接的另一种方法。
为文字“家园互动”创建到“interaction.html”的链接。
为文字“联系方式”创建到“communication.html”的链接。
操作5:
单击表格的下一行,选择“插入记录”菜单→“表格”命令,在打开的对话框中,设置1行2列,“表格宽度”为90%,“边框粗细”为0,“单元格边距”为10,“单元格间距”为10,单击“确定”按钮。
在属性面板中,“对齐”选“居中对齐”。
操作6:
单击第一个单元格,选择“插入记录”菜单→“图像”命令,选择站点images目录下的“children.jpg”文件,“确定”,“确定”。
此时图像为原始大小,单元格自动调整宽高以恰好容纳图像。
在属性面板中设宽为240、高为210。
在文档窗口中单击一下,单元格重新调整。
操作7:
在右边单元格中输入并设置幼儿园简介文字。
输入文字“幼儿园简介”,回车。
选中“幼儿园简介”,在属性面板中单击“居中对齐”按钮,“大小”输入30,回车。
在“幼儿园简介”下一行输入以下文字:
小白兔幼儿园位于上海市西南部,建于一九八六年十月,建筑面积4000平方米。
拥有幼儿500余名。
建园以来,我们在上级幼教部门的关怀和领导下,以全国省、市教育工作精神和邓小平同志关于“教育要面向现代、面向世界、面向未来”的思想为指导,以贯彻两个幼教行政法规为依据,以“一切为了孩子”为办园宗旨,本着“幼儿至上、服务第一、团结求实、进取创新”精神,全面实施素质教育,使园所面貌发生了深刻的变化,先后荣获了市先进单位和市示范幼儿园称号。
8.保存网页
选择“文件”菜单→“保存”命令。
9.打开网页
操作1:
按F12键,可在IE浏览器中预览网页。
操作2:
在Windows资源管理器中双击“index.html”文件,打开网页,如图1-3所示。
图1-3实验一示例网页
图1-4实验一二练习网页
四、练习
按照图1-4所示样张完成网页,以文件名“ex621.html”保存。
具体要求如下:
1.网页默认字体“隶书”,默认字体大小24像素,背景图像“police.jpg”,网页标题“交通规则”。
2.文字“欢迎学习交通规则”为白色、48像素、居中对齐。
3.为左边一列各章设置链接。
4.合并中间一列,输入图示文字。
5.合并右边一列,插入图片“safety.jpg”,设宽150、高260。
实验二用Dreamweaver制作表单
一、实验目的
1.了解表单的作用
2.了解Dreamweaver的常用表单项及其属性
3.掌握表单界面的设计方法
二、预备知识
1.表单
表单用于Web服务器和浏览器之间数据的双向流动,服务器通过表单从浏览器端收集信息,交由服务器端CGI(CommonGatewayInterface)程序处理后,将结果返回给浏览器。
在网页中插入表单,就能实现网页的交互作用。
要使表单真正起作用,必须结合服务器端CGI程序一起使用。
本章不涉及编程,所以只是要求掌握表单界面的设计。
2.表单及表单项的插入方法
有两种方法:
选择“插入记录”菜单→“表单”命令,表单及所有的表单项都可以在其中找到。
选择“插入”面板→“表单”子面板,表单及所有的表单项都可以在其中找到。
3.插入表单
光标定位在要插入表单的地方。
选择“插入记录”菜单→“表单”→“表单”命令,在光标处出现一个红色虚线框,这就是表单,可以看到下面的属性面板中出现表单属性。
以后插入的属于这个表单的表单项都必须放在红框中,这样提交时才能作为一个整体提交。
4.插入文本域
选择“插入记录”菜单→“表单”→“文本域”命令。
文本域是一个单行文本框。
5.插入文本区域
选择“插入记录”菜单→“表单”→“文本区域”命令。
文本区域是一个多行文本框。
6.插入复选框
选择“插入记录”菜单→“表单”→“复选框”命令,插入一个复选框。
7.插入单选按钮
选择“插入记录”菜单→“表单”→“单选按钮组”命令,插入一组单选按钮(默认2个)。
由于单选按钮具有组内只能选一个的特性,因此建议用“单选按钮组”命令而不是各自为战的“单选按钮”命令。
8.插入列表/菜单
选择“插入记录”菜单→“表单”→“列表/菜单”命令,插入一个列表框。
“菜单”即下拉式列表框,只占一行,单击下拉按钮
时显示列表选项,只允许选一项;“列表”可以指定占几行(“高度”属性),允许多选。
9.插入按钮
选择“插入记录”菜单→“表单”→“按钮”命令,插入一个按钮(默认为提交按钮)。
一个表单必须包含一个提交按钮,才能将各表单项内容提交给服务器。
10.插入跳转菜单
选择“插入记录”菜单→“表单”→“跳转菜单”命令,插入一个下拉菜单,可以添加菜单命令并指定执行命令后转向的网页。
“跳转菜单”命令可以单独使用。
三、示例
1.在站点目录下新建文件“register.html”,作为小白兔幼儿园的入园报名网页
操作1:
选择“文件”菜单→“新建”命令,在打开的对话框中,选“空白页”,“页面类型”选“HTML”,“布局”选“无”,单击“创建”按钮。
操作2:
选择“文件”菜单→“保存”命令,在打开的对话框中,会发现保存位置已经是站点目录D:
\WEB\experiment,输入文件名“register.html”,单击“保存”按钮。
2.设置页面属性
操作1:
在属性面板中单击“页面属性”按钮,打开对话框。
操作2:
设置“页面字体”为“隶书”,“大小”为24像素,“文本颜色”为墨绿色(#006600)。
操作3:
在“分类”中单击“标题/编码”,输入“标题”为“小白兔幼儿园入园报名”。
操作4:
单击“确定”按钮,完成页面属性设置。
3.添加网页内容
操作1:
在文档窗口中输入“入园报名”,回车。
选中文字,在属性面板中单击“居中对齐”按钮,“大小”输入48,回车。
操作2:
在“入园报名”的下一行,选择“插入记录”菜单→“表单”→“表单”命令,在页面中插入一个空表单。
操作3:
在表单虚线框中,选择“插入记录”菜单→“表格”命令,在打开的对话框中,设置7行3列,“表格宽度”为90%,“边框粗细”为0,“单元格边距”为0,“单元格间距”为10,单击“确定”按钮。
在属性面板中,“对齐”选“居中对齐”。
操作4:
在第一行第一个单元格中,输入“宝宝姓名:
”;第二个单元格中,选择“插入记录”菜单→“表单”→“文本域”命令,在弹出的对话框中单击“取消”按钮。
操作5:
在第二行第一个单元格中,输入“宝宝出生日期:
”;第二个单元格中,选择“插入记录”菜单→“表单”→“文本域”命令,单击“取消”按钮。
操作6:
在第三行第一个单元格中,输入“宝宝性别:
”;第二个单元格中,选择“插入记录”菜单→“表单”→“单选按钮组”命令,在弹出的对话框中将第一行的“标签”和“值”均设为“男”,第二行的“标签”和“值”均设为“女”,单击“确定”按钮。
鼠标在页面上“男”后单击,按Del键,现在两个选项在同一行上。
操作7:
在第四行第一个单元格中,输入“家长姓名:
”;第二个单元格中,选择“插入记录”菜单→“表单”→“文本域”命令,单击“取消”按钮。
操作8:
在第五行第一个单元格中,输入“所属小区:
”;第二个单元格中,选择“插入记录”菜单→“表单”→“列表/菜单”命令,单击“取消”按钮。
在属性面板中单击“列表值”按钮,在如图2-1所示的对话框中,“项目标签”下输入“长桥一村”,单击
,输入“长桥二村”,单击
,输入“罗阳一村”,“确定”。
操作9:
在第六行第一个单元格中,输入“联系电话:
”;第二个单元格中,选择“插入记录”菜单→“表单”→“文本域”命令,单击“取消”按钮。
操作10:
选中第七行前2个单元格,在属性面板上单击单元格合并按钮
。
单击合并后的单元格,选择菜单“插入记录”→“表单”→“按钮”命令,单击“取消”按钮。
光标放到提交按钮右边,输入一个全角空格,选择菜单“插入记录”→“表单”→“按钮”命令,单击“取消”按钮,在属性面板上设置“动作”为“重设表单”。
光标放到重置按钮右边,在属性面板上单击“居中对齐”按钮。
操作11:
鼠标单击“家长姓名”单元格,选择“修改”菜单→“表格”→“插入行”命令,
图2-1所属小区列表值对话框
图2-2实验二示例网页
在“家长姓名”上方插入一行。
在第一个单元格中,输入“宝宝简介:
”;第二个单元格中,选择“插入记录”菜单→“表单”→“文本区域”命令,单击“取消”按钮。
操作12:
选中第三列的前3个单元格,在属性面板上单击单元格合并按钮
,单击合并后的单元格,选择菜单“插入记录”→“图像”命令,选择“catmum.jpg”文件,“确定”,“确定”,在属性面板上设“宽”为180、“高”为150。
选中第三列的中间2个单元格,在属性面板上单击单元格合并按钮
,单击合并后的单元格,选择菜单“插入记录”→“图像”命令,选择“dog1.jpg”文件,“确定”,“确定”,在属性面板上设“宽”为180、“高”为150。
选中第三列的后3个单元格,在属性面板上单击单元格合并按钮
,单击合并后的单元格,选择菜单“插入记录”→“图像”命令,选择“dog2.jpg”文件,“确定”,“确定”,在属性面板上设“宽”为180、“高”为150。
4.保存网页
选择“文件”菜单→“保存”命令。
5.打开网页
按F12键,可在IE浏览器中看到如图2-2所示的网页。
四、练习
按照图2-3所示样张完成网页,以文件名“ex631.html”保存。
具体要求如下:
1.网页默认字体“楷体”,默认字体大小16像素,网页标题“交通规则测试”。
2.文字“交通规则测试”大小为24像素、居中对齐。
3.表单中设置表格(2列),测试题放在表格中。
图2-3实验二练习网页
实验三用Dreamweaver制作框架网页
(一)
一、实验目的
1.了解框架与框架集的定义
2.了解框架的作用
3.掌握用框架进行页面布局的方法
二、预备知识
1.框架与框架集
请看下面的XHTML代码:
这是一个框架集文件的源代码,解释如下:
和作为一个XHTML文档的开始标记和结束标记,浏览器从开始解释,直到遇到为止。
与之间为XHTML文档的头部,其中包含了- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计 网页 设计 实验 讲义