静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例21.docVIP

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例二十一、电脑官方网站 一、案例整体目标及要求 （一）案例目的 通过企业案例培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JavaScript技术，本案例的主题是电脑官方网站。 （二）案例要求 网页以电脑官方网站为主题，采用HTML+CSS+DIV、table来网页布局，它大致分为5个模块。大体结构是上、左、右，网页的head部分和left部分是不动的。right部分来显示不同页面的内容。 二、案例解决方案 1、首页主要内容 分为基本信息、影视看点、剧情介绍、角色介绍、音乐原声、荣誉纪录和调查问卷。 2、首页 效果图: 主题：《花千骨》电视剧介绍 页面：主题为《花千骨》介绍 页面状态栏：从Dreamweaver软件的窗口菜单找到行为栏，添加了标签检查器，以此达到在页面状态栏中显示自己学号和姓名的目的。 开头：通过css样式，设置属性，使文字为红色，背景为粉色，同时也给文字设置了不同的类型。 基本信息：对几位主演进行了超级链接，同时用css样式给文字内容添加了不同类型。 影视看点：用css样式给文字设置不同颜色及类型，对两位主演进行了超级链接。 角色介绍： 添加了表格，在表格中插入主演图像，在图像属性中设置图像宽高 插入图像：在图像属性中设置图像宽高，在对齐中，设置其位置。 音乐：从插入菜单找到媒体，插件，插入了.mp3格式歌曲。 在文件菜单中新建css样式表中，新建一个外部CSS样式文件，对网页的标题进行设置 二级页面效果截图： 内容：霍建华个人介绍 外观：在页面属性中的外观类别中设置了文本颜色和背景颜色。 图像：通过对齐的方式把图像放在合适的位置，图像属性中设置图像大小。 文字：在css样式中插入不同的样式，改变网页内容格式，进行排版。 超级链接:在插入菜单中插入超级链接，让各个页面有更好的关联 音乐：从插入菜单找到媒体，插件，插入了.mp3格式歌曲。 二级页面效果截图： 内容:赵丽颖个人介绍 表单：插入表单，在表单中录入文字内容 图像：插入不同的图像，通过图像属性设置图像大小，进行排版。 内容：在css样式中插入不同的样式，改变网页内容格式，进行文字以及背景排版。 表格:在插入菜单中插入表格，规划布局，阐明重点 超级链接：对相对性的关键字插入超级链接。 音乐：从插入菜单找到媒体，插件，插入了.mp3格式歌曲。 二级页面效果截图 内容：张丹峰个人介绍 外观 ：在页面属性中的外观类别中设置了文本颜色和背景颜色。 内容：在css样式中插入不同的样式，改变网页内容格式，进行文字以及背景排版。 图像：插入不同的图像，通过图像属性设置图像大小，进行排版。通过对齐方式进行页面布局。 超级链接：对相对性的关键字插入超级链接。 音乐：从插入菜单找到媒体，插件，插入了.mp3格式歌曲。 二级页面效果截图： 内容：许嵩个人介绍 外观 ：在页面属性中的外观类别中设置了文本颜色和背景颜色。 表单：插入表单，在表单中插入不同的图像，通过图像属性设置图像大小，进行排版。 超级链接：对相对性的关键字插入超级链接。 内容：在css样式中插入不同的样式，改变网页内容格式，进行文字以及背景排版。 音乐：从插入菜单找到媒体，插件，插入了.mp3格式歌曲。 二级页面效果截图： 内容：问卷调查 外观 ：在页面属性中的外观类别中设置了文本颜色和背景颜色。 表单：插入表单，在表单中录入文字内容 表单元素：插入了单选按钮组、多选按钮组等表单元素，让问卷调查内容丰富 图像：插入不同的图像，通过图像属性设置图像大小，进行排版。通过对齐方式进行页面布局。 三、案例主要技术指标 利用HTML标签完成网页结构的搭建 CSS选择器及盒子模型的灵活运用 CSS+DIV布局 JavaScript实现网页动态效果 四、案例实施进度 进度安排 内容安排 第一天 上午 明确网站主题，应力求简洁，要点明确，要以简单的画面和语言告诉浏览者，站点的主题。收集网页素材，确定栏目，决定网站结构，通过小组讨论，画出网页草图。 下午 确定内容安排，将每个页面的草图设计完成。 相关的文字工作录入完毕，定义好本地站点，将资料保存。 第二天 上午 用Photoshop将网页草图实现，决定网站的配色方案，可以借鉴其他网站。对各个网页可以分工实现。 下午 制作网页中所需要的Flash。将在PS中完成的图片切片，保