《商务网站设计I》1_第1页
《商务网站设计I》1_第2页
《商务网站设计I》1_第3页
《商务网站设计I》1_第4页
《商务网站设计I》1_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

商务网站设计I何山Teleshanwzj@163.com学什么？怎样学？商务网页设计HTMLJavaScriptCSS课程讲述案例：独立思考与表达作业实验教学选课码：ACWL-5312教材与参考资料教材：

《网页设计基础与上机指导-HTML+CSS+JavaScript》参考网站：

/考试与考核办法

考核方式：闭卷笔试课程总成绩=平时成绩30%+期末考试成绩70%注：平时成绩=课堂出勤及课堂表现（10%）+实验课成绩（20%）第1章网页设计入门本章主要内容：网页设计基础知识网页制作相关技术HTML入门HTML基本语法1.1网页设计基础知识网站是由若干网页构成的，这些网页按照一定的逻辑关系组织在一起。每个网页都包含一定的组成元素，网页的设计与制作就是对这样元素的规划和构建。1.1.1网站和网页网站（Website）是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。网站由域名（domainname），网页和网站空间这三部分组成。网页用某种形式的HTML来编写，多个网页由超级链接联系起来。网站空间由专门的独立服务器或租用的虚拟主机承担，网页需要上传到网站空间中，才能供浏览者访问网站中的内容。网站首页布局示意图LogoBanner导航栏公告栏精彩图书推荐横幅广告位新书快递精品图书高校教材专家书评友情链接版权栏1.1.2网页基本元素文本：文本是网页中最主要的信息载体，浏览者主要通过文字了解各种信息。图片：图片可以使网页看上到更加美观。水平线：在网页中主要起到分隔区域的功能，以使网页的结构更加美观合理。表格：表格是网页设计过程中使用最多的基本元素。首先表格可以显示分类数据，其次使用表格进行网页排版可以达到更好的定位效果。表单：访问者有时要查找一些信息或申请一些服务时需要向网页提交一些信息，这些信息就是通过表单的方式输入到Web服务器，并根据所设置的表单处理程序进行加工处理的。表单中包括输入文本、单选按钮、复选框和下拉菜单等。超链接：超链接是实现网页按照一定逻辑关系进行跳转的元素。动态元素：包括GIF动画、Flash动画、滚动字幕、悬停按钮、广告横幅、网站计数器等。1.2网页制作相关技术早期的网站功能比较简单，单独使用HTML就可以实现前台网页的制作，而现在的网站功能越来越完善，网页的设计与制作要符合Web标准。在Web标准体系下，HTML/XHTML负责页面结构，CSS负责样式表现，JavaScript负责动态行为。1.2.1初识HTMLHTML是英文HypertextMarkedLanguage的缩写，中文意思是超文本标记语言，是一种用来制作超文本文档的简单标记语言。所谓超文本，是指用HTML创建的文档可以加入图片、声音、动画、影视等内容，并且可以实现从一个文件跳转到另一个文件，与世界各地主机的文件连接。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WWW（WorldWideWeb）的信息表示语言，用于描述网页的格式设计和它与WWW上其它网页的链接信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。1.2.1初识HTML1.2.2HTML编辑工具1．记事本记事本是Windows操作系统自带的一个应用程序，使用起来十分方便和简单。2．EditPlusEditPlus是一款功能全面的文本、HTML、程序源代码编辑器。它提供了更加便捷的代码编辑功能，默认支持HTML、CSS、PHP、ASP、Perl、C/C++、Java、JavaScript和VBScript等语法高亮显示；提供了与Internet的无缝连接，可以在EditPlus的工作区域中打开Internet浏览窗口；提供了多工作窗口，不用切换到桌面，便可在工作区域中打开多个文档。3．DreamweaverDreamweaver是一个“所见即所得”的网页制作和网站管理开发工具，利用Dreamweaver可以设计、开发并维护符合Web标准的网站和应用程序。无论网站开发者是喜欢直接编写HTML代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会提供帮助良多的工具，丰富Web创作体验。1.2.3CSS和JavaScript1．CSSCSS（CascadingStyleSheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。CSS是W3C（WorldWideWebConsortium）定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。它可以使网页制作者的工作更加轻松和灵活，现在越来越多的网站采用了CSS技术。由于允许同时控制多重页面的样式和布局，CSS可以称得上Web设计领域的一个突破。网页设计者能够为每个HTML元素定义样式，并将之应用于希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。1.2.3CSS和JavaScript2．JavaScriptJavaScript是目前在网页中广泛使用的脚本语言，它是Netscape公司利用Java的程序概念，将自己原有的Livescript重新进行设计后而产生的脚本语言。JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动、活泼。使用它的目的是与HTML、Java小程序（JavaApplet）一起实现在一个网页中链接多个对象，与网络客户进行交互，从而可以开发客户端的应用程序。一个JavaScript程序其实是一个代码文档，它需要嵌入或者调入到HTML文档进行使用。任何可以编写HTML代码的软件都可以用来编写JavaScript程序。1.3HTML入门<html><head>头部内容，定义标题、样式等</head><body>

主体内容，网页要显示的各种信息，包括文本、超链接、图像、动画等</body></html>1.3.1HTML文档的结构1．头部内容HTML头部内容里包含关于所在网页的信息。头部内容里的信息，主要是被浏览器所用，不会显示在网页的正文内容里。标题是最常用的头部信息，它不是显示在网页的正文内容中，而是显示在浏览器的标题栏中。用<title>标记指定网页标题，即在<title>…</title>之间写上网页标题，如程序1-2所示。<html><head><title>专业的图书网站</title></head><body></body></html>1.3.1HTML文档的结构1.3.1HTML文档的结构<html><head><title>专业的图书网站</title><metaname="generator"content="editplus"/><metaname="author"content="miaoliang"/><metaname="keywords"content="图书,教材,教程,出版社"/><metaname="description"content="这是一个包含大量图书信息的网站"/></head><body></body></html>除了<title>和<meta>标记外，网页的头部内容还有<script>、<link>、<style>等标记。<script>标记用来设定页面中程序脚本的内容；<link>标记用来建立和外部文件的链接，常用的是对CSS外部样式表文件的链接；<style>标记用来设定CSS样式表的内容。1.3.1HTML文档的结构2．主体内容主体内容是网页呈现给浏览器者的信息，是网页的中心和重心所在。主体内容放在标记<body>…</body>之间，包括文字、图片、动画、视频、表格、表单、超级链接等元素。<html><head><title>专业的图书网站</title></head><body><h2>最新教材公告</h2><p>清华大学出版社出版发行了一套经典教材。</p></body></html>1.3.2<！DOCTYPT>标记DOCTYPE是DocumentType（文档类型）的简写，在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">1.4HTML基本语法HTML文档是在普通文件中的文本上加上标记（或者叫标签），使其达到预期的显示效果。当浏览器打开一个HTML文档时，会根据标记的含义显示HTML文档中的内容。1.4.1标记语法1．双标记双标记由开始标记和结束标记两部分构成，它必须成对使用。开始标记告诉浏览器从此处开始执行该标记所表示的功能，结束标记告诉浏览器在这里结束该标记。双标记的基本语法是：<标记名称>内容</标记名称>例如：<h1>网站简介</h1>，其作用就是将“网站简介”这段文本按<h1>标记规定的功能来显示，即以一级标题来显示。而<h1>和</h1>之外的文本不受这组标记的影响。1.4.1标记语法2．单标记标记单独出现，只有开始标记而没有结束标记。这种标记单独使用就可以表达完整的意思。单标记的基本语法是：<标记名称>比如<br>就是一个最常用的单标记，它表示换行。1.4.2属性语法HTML可以为某些标记附件一些信息，这些附件信息被称为属性（attribute）。通过属性可以设置HTML元素的更丰富的信息。属性是在开始标记中设定，它以“名称/值”对的形式出现，比如：name="value"。属性的基本语法是：<标记名称属性名1="属性值"属性名2="属性值">属性应该添加在开始标记内，并且和标记名之间有一个空格分隔。一个标记可以包含多个属性，各属性之间无先后次序，用空格分开。例如：<bodybackground="back_ground.gif"text="red">大家好！</body>这是一个body标记，其中Background属性用来表示HTML文档的背景图片，text属性用来表示文本的颜色。1.4.3注释标记注释标记用于在HTML文档中插入注释。注释内容并不会在浏览器中显示，它会被浏览器忽略。可以使用注释对程序代码进行解释，适当的注释对以后代码的阅读和维护产生很多的帮助。注释标记的基本语法是：<!--注释内容--><body>…<s

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论