frontpage 网页设计实验指导
更新时间:2024-03-04 21:17:01 阅读量: 综合文库 文档下载
- frontpage推荐度:
- 相关推荐
实习二 网页设计(2)
一、实习目的
1. 2. 3. 4.
熟悉FrontPage2003 的工作环境; 掌握FrontPage2003 站点管理功能;
掌握FrontPage2003制作网页的基本方法; 掌握网页制作中的常用页面布局方法。
二、实习内容
1. 熟悉FrontPage2003 的工作环境
2. FrontPage2003管理站点功能(个人网站); 3. 制作图文混排的网页; 4. 制作图片展示网页; 5. 制作个人网站首页;
6. 自拟主题制作包含图文混排、图片、表格、主页四个页面的网站。 注:第二次实验完成1至5,第三次实验完成6
三、预备知识
1. 网页制作的基本知识;
2. FrontPage2003 的工作环境及操作方法
四、实习步骤
1.熟悉FrontPage 2003 的工作环境。
启动FrontPage 2003,熟悉FrontPage 2003工作环境。 2.FrontPage管理站点
① 建立站点文件夹:
在D盘根目录下建立myweb文件夹。 如果D盘不存在,在C盘建立。 ② 创建站点
打开“文件“菜单”,单击“新建”,在任务窗格中选择“其他网站模版”,打开网站模板对话框,选择“空白站点”,在指定新站点的位置中,输入D:\\myweb或C:\\myweb(即站点在本地磁盘上的位置),单击“确定”按钮,完成站点的创建。
③ 查看站点目录结构 单击“视图栏”(窗口左侧)中“文件夹”图标,即可查看站点目录结构。FrontPage自动建立了images和_private等文件夹。
注意:不要在如“_private”等以“_”开始的文件夹中存放你的任何文件。 ④ 创建网站其它文件夹 根据要制作的网站的内容,可以建立相应的子文件夹,用以分类存放网站制作中的相关文件。在本站点中,请建立如下文件夹:xiangce和aihao,然后分别在这两个文件夹中建立文件夹images。
注意:网站目录结构一般在网站创建初期就完成,但也可以在制作网站过程中,随时根据要求建立。
3.制作一个图文混排的网页
① 打开“文件“菜单”,单击“新建”,选择“空白网页”,在FrontPage中将出现一个空白的网页。
② 在页面上单击右键,选择“网页属性”,打开页面属性对话框,选择各选项卡进行适当配置。
③ 在网页中输入(粘贴)一段文字(孙悟空自传,作业管理系统共享资源中下载),设置第一段(作为标题)为“黑体、6号(24磅)”,其余文字设置为“宋体、4号(14磅)”。
④ 在网页中插入一张图片(sunwukong.jpg,作业管理系统共享资源中下载),设置图片的对齐属性为“左对齐”。调整位置,如图2-1所示。
⑤ 将保存网页到网站的根目录(d:\\myweb)中,文件名为zizhuan.htm。 注意:1. 本网页所用到图片都要存入d:\\myweb\\images文件夹中。
2. 观察在保存网页时出现的“保存嵌入式文件”对话框(如图2-2),并保存网页中的图片保存到正确的位置。 3.“另存为”文件对话框中,要注意保存网页到指定的位置。
图2-1 zizhuan.htm网页
图2-2“保存嵌入式文件”对话框
4.制作一个图片展示网页
① 打开“文件”,单击“新建”,选择“空白网页”,在FrontPage中将出现一个空白的
网页。
② 在网页中插入一个7行3列的表格,在表格属性中,将表格的边框粗细设置为0,接着再将第1行的3列合并,输入文字“孙悟空的幸福生活”,设置为“标题一”格式。调整单元格行高,如图2-3所示。
图2-3 制作中的xiangche.htm网页
图2-4 完成的xiangce.htm网页
③ 在表格的单元格中,插入图片和文字说明(作业管理系统共享资源中下载)。如图2-4所示。
④ 将保存网页到网站的根目录(d:\\myweb\\xiangce)中,文件名为xiangce.htm。
注意:本网页所用到图片都要存入d:\\myweb\\xiangce\\images文件夹中。 5.制作个人主页(首页)
网页设计时,网页的布局方式将直接影响页面的外观,同时也是体现设计师的水平的一个标准。在设计布局时,通常采用表格的方式。在本网站主页的制作中,我们也将使用表格方式布局。
① 打开“文件”,单击“新建”,选择“空白网页”,在FrontPage中将出现一个空白的网页。
② 在网页中插入一个7行2列的表格(宽:700像素;边框:0),然后将第2列的所有单格合并,如图2-5。
图2-5 第一次布局
图2-6 第二次布局
图2-7 插入图片
图2-8 第三次布局
图2-9 输入文字和插入图片
图2-10 index.htm在IE中的效果
③ 在刚合并完成后单元格中,设置单元格对齐属性为“水平:左对齐;垂直:顶端对齐”,然后在该单元格插入一个4行1列的表格(宽度:100%;边框:0)。完成的布局如图然后调整单元格行高如图2-6所示。
④ 在左边单元格和右边第1行的单元中,插入如图2-7所示的图片(教学资源网下载), ⑤ 将右边第2行拆分为2列。在第3行中,插入一个1行3列的表格(宽:100%;高:100%,边框:0),如图2-8所示。
⑥ 接下来,在单元格中插入图片,输入文字,如图2-9所示。
⑦ 将“悟空自传”图片超链接到前面制作的网页“zizhuan.htm”,“我的相册”图片超链接到“xiangce.htm”,“我的母校”图片边接到“http://www.nwsuaf.edu.cn”,“与我联系”图片超链接到“mailto:sunwukong@tiangong.org”。
⑧ 将网页保存到网站的根目录(d:\\myweb)中,文件名为index.htm。 注意:本网页所用到的图片都要存入d:\\myweb\\images文件夹中。 ⑨ 在浏览器中打开index.htm页面,如图2-10所示。 6.自拟主题制作包含图文混排、图片、表格、主页四个页面的网站 ① 自拟站点主题,规划站点内容,收集相关素材并整理。
实验前自拟站点主题(如“我的班级”、“西安世园会”、“XX旅游景点”等),根据站点类型和特性设计站点各网页内容,规划各网页之间的链接关系及文件的存储位置(文件夹);收集或撰写文字内容,下载或拍摄图片并进行图像处理(,录制音乐和视频),设计表格,填写站点重要数据或信息。
以“我的班级”主题为例
首页采用很经典的文字对专业介绍和班级概况介绍,并插入班级成员合影、专业特色图片,达到主题显明的效果,在首页上再建立三个链接,分别链接到图文混排页面、图片展示页面和表格页面;
图文混排页面以文字为主(班级特点、特长、成绩、成就等)插入1-2张图片配合文字描述;
图片展示页面以表格布局,展示成员照片;
表格页面可以制作成简单的二维表,表头包含:学号、姓名、性别、年龄、籍贯、特长等。
② FrontPage管理站点
⑴ 建立站点文件夹:
在D盘根目录下建立myweb文件夹。 如果D盘不存在,在C盘建立。 ⑵ 创建站点
打开“文件“菜单”,单击“新建”,选择“空白站点”,在“Web站点模版”对话框中选择“空白站点”,在指定新站点的位置中,输入D:\\myweb或C:\\myweb(即站点在本地磁盘上的位置),单击“确定”按钮,完成站点的创建。
⑶ 查看站点目录结构 单击“视图栏”(窗口左侧)中“文件夹”图标,即可查看站点目录结构。FrontPage自动建立了images和_private等文件夹。
⑷ 建网站其它目录
根据要制作的网站的内容,可以建立相应的子文件夹,用以分类存放网站制作中的相关文件。
③ 页面布局规划
首页以表格或导航形式布局;图文混排页面通过对齐方式布局;图片展示网页通过表格布局;表格页面通过表格布局并注意表格属性单元格属性设置。
④ 制作各个页面
⑴ 制作一个图文混排的网页
添加文字,设置字型、字体、段落、对齐方式等,并对页面进行必要的修饰;插入图片,进行图文混排;保存在对应文件夹中。 ⑵ 制作一个图片展示网页
建立表格,第一行合并,输入图片页面主题;第二行3-4张图片,第三行输入对第二行图片的图注;依次类推(展示图片3-4行)。保存在对应文件夹中。
⑶ 制作表格网页
输入表格标题,设置标题格式;建立表格,设置表格格式;添加表头文字和表格内容,设置文字格式和单元格格式。保存在对应文件夹中。 ⑷ 制作站点主页(首页)
添加站点主题;站点概要文字及图片;建立链接图文页面、图片页面、表格页面的超链接;要求页面布局合理、整洁,颜色搭配合理。页面文件保存在站点文件夹中。
注:
1. 以上四个页面篇幅均不超过两页;所有文件夹和文件名不能使用中文; 2.图文页面、图片页面、表格页面,通过链接返回主页; 3.自拟网站压缩包容量小于5M(大于5m视为无效)。
五、实习要求
1. 根据指导书实例和操作步骤,独立完成步骤①至⑤的内容。 2. 自拟主题,完成步骤⑥的任务。
3. 实习报告中对运用FrontPage制作网页进行小结,并对思考题的命题进行简要的论述
(字数500-800)。
4. 提交自拟主题网站的压缩包。
六、思考问题
1. 如何管理网站文件?
2. 如何规划和设计较复杂的主页?
3. 制作网站需要哪几个阶段?各阶段应完成的基本任务是什么?
正在阅读:
frontpage 网页设计实验指导03-04
国家中医药管理局标书08-11
中国移动互联网行业竞争分析报告04-06
2019年关于猜灯谜的作文06-13
荀子的学术性质之我见08-21
2014年天水教师招聘考试每日一练测试题 (38)06-11
酒店实习总结和报告05-25
邮政速递工会工作总结05-21
童话作文范例08-29
- 发电电气运行规程1
- 英文简历
- 最全辅导员招聘考试题库
- 4.3崇明岛的未来的样子
- 2012年上海市普通高校招生二本批次各校投档分数线
- 江苏省如皋中学2017-2018学年第一学期高三第二次阶段测试12月数
- 农业转移人口社会参与机制浅谈
- 2017-2018学年度牛津译林版8B英语初二期中试卷及答案
- 家长委员会上的讲话
- 05继电保护设备检修规程
- 组织行为学考试重点(陈春花)
- 2016年云南省公务员考试《行测》模拟试卷(十七)
- 规避“10号文”红筹系列之案例分析
- 钱寨小学学生读书活动评价方案
- 五大联赛派系
- 国际结算课件新
- 材料科学导论 - 图文
- 领导干部任前廉政法规考试模拟试题
- 汽车综合实训
- 医疗质量管理目录
- frontpage
- 网页设计
- 指导
- 实验
- 体育离不开政治(精)
- 中心卫生院绩效方案
- 第八部份 碾压式土石坝和浆砌石坝工程
- 江苏省张家港市2017-2018学年七年级下学期期末调研测试数学试卷
- 东师范德育原理16秋在线作业3免费答案
- 对河道整治的认识及国内外研究现状
- 医院宣传工作计划与医院宣传科工作计划汇编 doc
- (翻译)由不带蓄热器的太阳能平板集热器驱动的两缸太阳能斯特林
- 历史趣谈:赵云是怎么死的?赵云真正的死因?
- 探矿权申请审批要件
- 《工程建设项目勘察设计招标投标办法》(八部委号令,号令修改)
- 新视野大学英语(第三版)读写教程第三册课后翻译答案
- ISO8000内审考试题目及答案
- 2014大工《机械原理》模拟试卷B及答案
- 伪代码和源代码区别
- 海丰县实验中学2018-2019学年上学期高二数学12月月考试题含解析
- 古代汉语词汇
- 谈谈实验动物分组
- 被动房保温系统一体化解决方案
- 数字高清视频监控优势分析书