我的博客

Blog
实验目的
1. 熟悉SPD的基本使用
2. 掌握网页开发的基本流程
实验内容
. 我的博客网站开发
博客整体框架
实验步骤
一、素材准备
. 进入个人学习通,将 资料区 → 素材 → 第5章素材.zip 下载到本地并解压到同名文件夹中
. 网站默认位置:C:\User\Administrator\Documents\My Web sites
二、我的博客网站.htm
. 例5-1/p256
"我的博客网站"框架
双击SPD 2007桌面快捷方式图标打开,系统自动创建一个名为xxx网页;如果桌面没有SPD 2007,单击桌面底部的搜索栏,输入SPD,查找并打开
按CTRL + S保存,以"我的博客网站.htm"命名;开发过程中注意经常保存

. 建议创建一个新的文件夹作为网站文件夹;后期所有文件都存放在这个文件夹内

切换进入"设计视图"
设置背景

. 在"网页编辑区"右键单击鼠标,选择"网页属性",在"格式"选项卡中设置网页的背景格式

设置布局

. 选择菜单命令"表格" → "表格布局",在SPD 2007左下打开的任务窗格中选择样式9:页面编辑区被划分为5个区域:上、左、中、右和下

编辑上:播客标题

. 输入"我的博客"

编辑左:个人资料

. 输入"个人资料张三"

. 插入"人"的剪贴画

编辑中:超链接

. 输入"我的第一篇博客"

. 输入"中山大学"并选中,右键选择"超链接属性",指定网址为:http://www.sysu.edu.cn

. 输入"百度搜索"并选中,右键选择"超链接属性",指定网址为:http://www.baidu.com

编辑右:好友信息

. 输入"我的好友"

. 输入若干好友的名字

编辑下:交互式按钮

. 选择菜单命令"插入" → "交互式按钮" → 选择"发光标签1",文字为"博客文章",链接为"博客文章.htm"

. 选择菜单命令"插入" → "交互式按钮" → 选择"发光标签1",文字为"访客留言",链接为"访客留言.htm"

预览网页

. 按F12预览网页

. 或使用菜单命令"文件" → "在浏览器中预览" → 选择 IE浏览器

三、例5-2/p258
插入层

. 任务窗格"层" → "插入层"

. 拖动至页面底部并调整大小合适

插入Web组件

. 菜单命令"插入" → "Web组件",选择组件类型为"动态效果" → "字幕",单击"完成"

. 在"字母属性"中输入文本"欢迎光临本网站,您是第888位访客!"

. 设置方向、速度等其它属性

预览网页

. 按F12预览网页

四、博客文章.htm
. 例5-3/p259
"博客文章"框架
新建网页:框架网页

. 菜单命令"文件" → "新建" → "网页",选择"框架网页" → "横幅和目录"并确定

. 按Ctrl + S保存为"博客文章.htm"

. 切换视图为"代码",编辑<title>的内容为"博客文章",同文件名保持一致,完成后切换回"设计"视图*

设置上方框架 - 横幅

. 单击"新建网页",输入标题文字"博客文章"

. 按Ctrl + S,采用默认名字保存

. 双击打开该网页,切换视图为"代码",编辑<title>的内容为"横幅页",完成后切换回"设计"视图*

设置左侧框架 - 目录导航

. 单击"新建网页",输入目录文字"关于面向对象的系统概念"

. 选中文本,右键选择"超链接",指定网址为:关于面向对象的系统概念.htm

. 目标框架设置为右下:单击右下即可

. 继续输入目录文字"关于医疗信息共享平台"和"信息系统在商业领域的价值",并分别创建到对应网页的超链接和指定目标框架

. 按Ctrl + S,采用默认名字保存

. 双击打开该网页,切换视图为"代码",编辑<title>的内容为"目录页",完成后切换回"设计"视图*

编辑超链接
目标框架
预览网页

. 按F12预览网页,单击目录项,对应的网页会在框架的右侧显示

五、访客留言簿.htm
. 例5-14/p279
"访客留言簿"框架
新建网页:常规HTML

. 菜单命令"文件" → "新建" → "网页" →"常规" → "HTML"并确定

. 按Ctrl + S保存为"访客留言簿.htm"

代码录入

. 切换到"代码"视图

. 参考教材,录入缺失的各标签和属性、内容等

. 编辑过程中,注意根据代码提示选择,不要一个字母一个字母录入

预览网页

. 按F12预览网页

六、网站融合
. 将"博客文章.htm"和"我的博客网站.htm"中的交互式按钮"博客文章"建立连接
. 将"访客留言簿.htm"和"我的博客网站.htm"中的交互式按钮"访客留言"建立连接
七、提交
登录"考核系统",进入实验环节"第567...",选择第一题
打开"答题文件夹",将创建的所有网站文件复制到考试目录中
交卷,查看实验结果
实验要求
所有素材均在下载的素材中的"我的博客网站"文件夹
预览请使用IE浏览器!!!
独立完成
未按要求命名提交视为无效作业,不得分