网页制作基础知识-习题课件

第一章 网页制作基础知识;1.1 案例 网页制作学习园地网页;1.1案例:网页制作学习园地网页; 1.1.1 功能要求1.整个网站主要以HTML代码编写的方式完成。页面风格以简单、清晰为 主,网页基本元素由文本和图像组成;2.在主页中,访问者可以获得网站中的主题信息和学习内容列表。点击链 接文本,可以打开介绍相关知识点的页面;3.在页面中设置电子邮件链接,如“联系我们”,提供一个与用户互交的平台;4.为网页设置背景音乐和欢迎字幕。打开网页,有声音传出。当鼠标指针移动到滚动的欢迎字幕上时,文字停止滚动,移下鼠标后继续;5.点击页面中的链接字,在新的浏览器窗口打开一个由上框架、左框架和主框架构成的框架网页。 1.1.2 详细设计网页设计的步骤如下:1.网页总体规划 首先考虑和设计网页的框架结构和艺术风格。可以先画出网站的草图,确定网站中各网页之间的链接关系,这样在创建每个网页时都会有清晰的思路,以免迷失方向,而且以后需要进行重组的可能性较小。; “网页制作学习园地”网站的链接结构如下图:

在本地计算机的硬盘中建一个名为“mysite”的文件夹(此文件夹为空)做为站点,即网站根目录。在制作的过程中将所有创建和编辑的文档,以及用到的网页素材都保存在该文件夹中。 本案例中共需要创建三个网页,“index.htm”为网站首页,单击页面中的超链接:“第一章 网页制作基础知识”,在新的浏览器窗口中打开一个框架网页,此框架网页的文件名为“Frameset.htm”。框架网页中包括上框架(链接网页是topframe.htm)、左框架(链接网页是leftframe.htm)和主框架(链接网页是mainframe.htm)。单击左框架中的超链接:“HTML主要标记”,在主框架中打开介绍HTML文档结构标记的网页“html_tag.htm”。; 在组织站点结构时,应注意以下几个问题: ① 归类站点资源 在同一个文件夹中放置相关的网页,并在需要的时候使用子文件夹。这样的组织方式可以使网站层次清晰,更容易更新、维护。 ② 确定网页素材存放的位置 站点中通常包含图像、声音、动画等多种素材,为了更好的存储资源,一般应在站点根目录下创建多个子文件夹,将用到的网页素材分门别类地存储到相应的文件夹下。必要时,可以创建多级子文件夹。 本案例中将站点命名为“mysite”,根据网站的实际需要,其中建立了“HTML”、“image”、“sound”、“style”四个文件夹,分别用来放置网页、图像、声音和样式表文件。 ③ 网页及网页元素的命名 为页面、图像和其他外部文件设计一个简单且一致的命名系统。根据一般原则,主页命名为“index.htm”,其他页面及相关的网页元素能望名知意。很多Internet服务器使用的是英文操作系统,不能对中文文件名提供很好的支持,故在构建的站点中,建议全部使用英文字母组成文件名。; 2.网页的主题定位 确定为什么要创建这个网页及希望展示的内容。创建此页面的目的是让访问者一打开网页就能发掘学习的内容,同时显示友好的标语欢迎访问者。 3.图片、声音等媒体文件的使用 要让网页更加美观,更具人性化,可在网页中适当添加图片、动画、音/视频等多媒体文件。为了保证网页的传输速度,选择网络上常见的媒体格式,并将它们放置在相应的文件夹中。 4.制作工具的选择 可使用FrontPage、DreamWeaver等网页制作软件。在本案例中,将使用DreamWeaver MX进行“网页制作学习园地”网站的创建。;1.2 理论知识;2.HTML标记的表示; HTML结构包括头部(Head)、主体(Body)两大部分。头部放置文档标题,也可以指明浏览器在显示文档时可能会用到的其他参数;主体放置文档的实际内容,包括要显示的文本和文档的控制标记(标签),这些标记将告诉浏览器该如何显示文本。标签还可以引用特殊效果的文件,包括图像、图形、声音和动画,并指出将文档链接到其他文档的热点。 ;1.2.1.1 HTML文档结构标记;标记;

标记;1.2.1.

制作一个html文件 效果如下图,网页制作基础知识-习题课件.ppt相关推荐

  1. ps快捷图标在哪个文件夹_在PS中制作一个下载文件夹的图标

    在PS中制作一个下载文件夹的图标 出处:多特软件站  时间:2011-03-17  人气:1287我要提问我来说两句 核心提示:在这个教程里,我们将介绍到如何在PS中运用不同的形状和反射制作一个下载文 ...

  2. ae怎么做圆一圈圈扩散效果_轻备学院AE特效基础教程 - 如何制作一个带有动画效果村庄烟雾...

    熟练运用AE软件做几个偏技巧性并且可以举一反三的超简单小动画,教大家如何制作一个带有动画效果村庄烟雾,你学会了这些小动画,不仅可以熟练运用AE软件,还能对动画制作有深入的了解. 第一步:在AI中绘制插 ...

  3. android led闪烁功能,如何在Android应用层中制作一个LED指示灯效果

    如何在Android应用层中制作一个LED指示灯效果 发布时间:2020-12-08 16:12:59 来源:亿速云 阅读:86 作者:Leah 本篇文章给大家分享的是有关如何在Android应用层中 ...

  4. 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...

  5. 【有利可图网】PS教程:巧用PS简单快速设计制作一个发光文字效果

    本篇教大家如何巧用PS简单快速设计制作一个发光文字效果!教程简单易学,感兴趣的小伙伴收走学习! 先上效果图 背景素材 1.打上你需要的字体. 2.按Ctrl+ J复制背景层并拖到字体上方. 3.在拷贝 ...

  6. 记录html+css制作一个上下跳动效果的动画

    需求 想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...

  7. 【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程

    b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE htm ...

  8. linux私房菜 rpm src,如何制作一个 RPM 文件

    它们是包含文件和元数据的档案文件.当安装或卸载 RPM 时,此元数据告诉 RPM 在哪里创建或删除文件.正如你将在上一篇文章中记住的,元数据还包含有关"依赖项"的信息,它可以是&q ...

  9. 【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效,收藏起来肯定用的上~

    b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYP ...

最新文章

  1. Linux下用汇编输出Hello, world
  2. linux c http下载 带确认 进度条
  3. Java JNI简单实现
  4. Qt Creator调试Qt Quick示例应用程序
  5. 【C++】 C++标准模板库(一) Vector
  6. Nuxt.js项目不识别import原因及解决方法
  7. MySQL服务器硬件和操作系统调节
  8. 工作308:uni-设置请求参数
  9. CSS li 一半左浮一半右浮
  10. 树模型——机器学习面试
  11. sql基于聚合结果集取最大值_SQL超入门第三篇:写给产品、运营、分析师的SQL教程...
  12. 【python】时间处理函数以及文件操作
  13. 数电渣渣的一点学习感想(更新中)
  14. 跨服务器导入数据sql
  15. Echarts在同一网页按顺序展示多图
  16. iOS -- SKPhysicsJointSpring类
  17. c语言设计一个自动阅卷功能,基于WEB的C语言编程题自动阅卷系统的设计与实现...
  18. STM32 F103之点亮LED流水灯 (STM32入门学习)
  19. java选中一行快捷键_java常用快捷键
  20. matlab矩阵的白化,白化原理及Matlab实现

热门文章

  1. 2021年中国互联网人才招聘行业发展现状及发展趋势分析[图]
  2. 开发效率提升300%,Vue3新特性已成气候!
  3. java ee7 ejb_使用MyEclipse开发Java EE应用:EJB项目开发初探(上)
  4. 亚信科技java面试题及答案.doc
  5. 信号与系统陈后金matlab,信号与系统(陈后金)_MATLAB.ppt
  6. JAVA架构之路(DDD架构模型)
  7. 现代盐化工杂志现代盐化工杂志社现代盐化工编辑部2023年第1期目录
  8. 2011年10月大盘下跌大股东增持股票
  9. 3月29日工作总结及次日计划
  10. Linux自学笔记 | 10 常用命令 - 压缩解压类