网页设计上机操作练习题.docx
- 文档编号:5704959
- 上传时间:2022-12-31
- 格式:DOCX
- 页数:15
- 大小:449.95KB
网页设计上机操作练习题.docx
《网页设计上机操作练习题.docx》由会员分享,可在线阅读,更多相关《网页设计上机操作练习题.docx(15页珍藏版)》请在冰豆网上搜索。
网页设计上机操作练习题
网页设计第一次上机操作练习题
练习一:
网页站点的创建与修改
一、创建本地站点
首先在硬盘的D盘上创建文件夹mywebsite,本书涉及的网站将创建在该文件夹中,如图2.6所示。
新建站点可以通过“文件”面板来完成。
(1)展开“文件”面板组,单击“文件”面板中的“管理站点”超链接,如图2.7所示。
(2)此时将打开“管理站点”对话框,在其中单击“新建”按钮,并从下拉菜单中选择“站点”命令,如图2.8所示。
在打开的对话框中包括两个选项卡:
“基本”和“高级”,如图2.9所示。
(3)这里我们保持默认的“基本”选项卡,并在文本框中输入新建站点的名称mywebsite。
(4)单击“下一步”按钮,在打开的对话框中选择将要采用的服务器技术,如图2.10所示。
(5)继续单击“下一步”按钮,在打开的对话框的顶部包括两个选项。
这里选择第2项,如图2.11所示。
(6)在该对话框中最重要的是选择存放站点文件的位置。
这里在文本框中输入站点文件夹的路径。
用户也可以单击文本框旁边的浏览按钮,在打开的“选择站点mywebsite的本地根文件夹”对话框中,找到将要存放站点文件的文件夹,如图2.12所示。
单击“选择”按钮后,就会将选中文件夹的路径加入到文本框中,如图2.13所示。
(7)单击对话框中的“下一步”按钮进入结束对话框,其中列出了设置中的关键信息。
如果确信没有问题,单击“完成”按钮关闭对话框,如图2.14所示。
(8)此时将返回“管理站点”对话框,其中列出了刚刚创建好的站点名称mywebsite,如图2.15所示。
(9)单击“管理站点”对话框中的“完成”按钮,结束站点的定义。
此时“文件”面板将会显示出本地站点的名称和存储路径,如图2.16所示。
二、修改站点信息
打开站点定义对话框的具体操作步骤如下。
(1)选择菜单命令“站点”|“管理站点”,在打开的“管理站点”对话框中单击“编辑”按钮,此时将重新打开“mywebsite的站点定义为”对话框。
(2)单击其中的“高级”标签,切换到“高级”选项卡,如图2.17所示。
默认情况下,“高级”选项卡显示的是“本地信息”的参数设置
设定默认的图像文件夹路径为D:
\mywebsite\images\,设定HTTP地址为http:
//localhost,如图2.18所示。
三、多站点管理
在“管理站点”对话框中单击“新建”按钮,就可以打开站点定义对话框创建一个新站点。
这里单击“新建”按钮创建另外一个站点mywebsite2,如图2.19所示。
如果要在“文件”面板中显示其他站点的名称,可以先在“管理站点”对话框中选中要显示的站点,然后单击“完成”按钮。
另外,在“文件”面板顶部的下拉列表框中,选择要切换到的站点,也可以在站点之间进行切换,如图2.20所示。
选中要编辑站点的名称,然后单击“编辑”按钮,就可以重新打开站点定义对话框,修改选中站点的属性。
●复制站点
首先选中要复制的源站点的名称,然后单击对话框中的“复制”按钮,就可以产生一个新的站点,如图2.21所示。
●删除站点
先选中要删除的站点名称,然后单击“管理站点”对话框中的“删除”按钮。
四、创建站点目录结构
创建目录结构可以在“文件”面板中的站点窗口进行。
单击“文件”面板中的“展开以显示本地和远端站点”按钮,这样将打开站点管理器,如图2.22所示。
●创建一级目录
(1)在站点管理器的根目录上单击鼠标右键,在打开的快捷菜单中选择“新建文件夹”命令,如图2.23所示。
(2)此时将在站点管理器中创建一个空的文件夹,将其修改为images,以后将用它来存放站点中公用的图片文件,如图2.24所示。
(3)使用同样的方法,在站点根目录中创建出另外一些文件夹,构成一级目录如图2.25所示。
●创建二级目录
由于images文件夹中保存的是整个网站中都可以使用的图片文件,具体的目录名称和用途如表2.1所示。
最终建好的子目录如图2.26所示。
在站点管理器中的根目录上单击鼠标右键,然后选择菜单命令“文件”|“新建文件”,此时将在站点的根目录下生成文件名为untitled.htm的网页文件,如图2.27所示。
修改文件名的具体操作步骤如下。
(1)选中该文件,然后按下键盘上的F2快捷键,或者在右键菜单中选择“编辑”|“重命名”,此时文件名变为可修改状态,如图2.28所示。
(2)修改文件的文件名为index.htm,注意文件名结尾的.htm不能省略,最后按下Enter键确认文件的名称。
(3)如果有其他文件链接到该文件,就会打开“更新文件”对话框,如图2.29所示。
(4)单击其中的“更新”按钮,系统将会自动更改与该文件相关的所有链接。
●移动文件
将文件index.htm移动到errors目录下。
(1)可以在选中文件index.htm后,按住鼠标左键拖动文件到errors文件夹上,如图2.30所示。
(2)松开鼠标后,如果文件index.htm没有在任何页面中被链接过,文件就会被直接移动到errors文件夹中。
如果文件曾被链接,此时将打开“更新文件”对话框。
(3)单击“更新”按钮,Dreamweaver就会自动更新文件中的链接。
如果选择“不更新”,就会出现断链。
练习二:
认识HTML
在DreamweaverCS中使用HTML标记。
标记
类型
名称或意义
作用
备注
文件标记
●
文件宣告
让浏览器知道这是HTML文件
●
开头
提供文件整体信息
●
标题
定义文件标题,将显示于浏览器顶端
●
主体
设计文件格式及内容所在
排版标记
--注解-->
○
说明标记
为文件加上说明,但不被显示
○
段落标记
为字、图、表格等之间留下一空白行
○
换行标记
令字、图、表格显示于下一行
○
水平线
插入一水平线
●
居中
令字、图、表格等显示于中间
反对
●
预设格式
令文件按原代码的排列方式显示
●
定位标记
设定字、图、表格等的摆放位置
●
不换行
令文字不因太长而换行
●
建议换行
预设换行部位
字体标记
●
加重语气
产生字体加粗Bold的效果
●
粗体标记
产生字体加粗的效果
●
强调标记
字体出现斜体效果
●
斜体标记
字体出现斜体效果
●
等宽字体
Courier字体,字母宽度相同
●
加下划线
加下划线
反对
●
一级标题标记
将字体变大,级数越高越小
●
二级标题标记
将字体变大
●
三级标题标记
将字体变大
●
四级标题标记
将字体变大
●
五级标题标记
将字体变大
●
六级标题标记
将字体变大
●
字体标记
设定字体、大小、颜色
反对
○
基准字体标记
设定所有字体、大小、颜色
反对
●
字体加大
令字体稍微变大
●
字体缩小
令字体稍微缩小
●
加删除线
为文字加删除线
反对
●
程式码
字体稍微加宽如
●
键盘字
字体稍微加宽,单一空白
●
范例
字體稍為加寬如
●
变量
斜体效果
●
斜体标记
斜体效果
●
向右缩排
文字向右缩排
●
述语定义
斜体效果
●
地址标记
斜体效果
●
下标字
文字下标
●
上标字
文字上标
清单标记
●
顺序清单
清单项目将以数字、字母顺序排列
●
无序清单
清单项目将以实心圆点作为符号排列
○
清单项目
清单中的项目,一个标记一行
●
定义清单
清单分两层出现
○
定义条目
清单项标题
○
定义内容
清单项内容
表格标记
●
表格标记
设定该表格的各项参数
●
表格标题
做成一打通列以填入表格标题
●
表格列
设定该表格的列
●
表格栏
设定该表格的栏
●
表格标头
相等于
,但其内文字字体会变粗
表单标记