计算机网设计基础及基础演示文稿_第1页
计算机网设计基础及基础演示文稿_第2页
计算机网设计基础及基础演示文稿_第3页
计算机网设计基础及基础演示文稿_第4页
计算机网设计基础及基础演示文稿_第5页
已阅读5页，还剩35页未读， 继续免费阅读

下载本文档

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

文档简介

计算机网设计基础及基础演示文稿现在是1页\一共有40页\编辑于星期二计算机网设计基础及基础现在是2页\一共有40页\编辑于星期二一、认识网页与网站

（1）静态网页，也就是HTML静态页面，它是物理存在的文件，这类网页可以由网页浏览器（如：IE、傲游）直接浏览。（2）动态网页，它不能由浏览器直接浏览，而必须经过Web服务器软件解释或编译后，以HTML格式将结果输出到客户端浏览器上。1、网页现在是3页\一共有40页\编辑于星期二一、认识网页与网站

网站是一个复杂的系统，它不仅包括网页、Web应用程序，还包括与之相关的数据库及各类媒体文件，甚至还包括操作系统、Web服务器软件以及承载网站运行的各类硬件设备等。2、网站图1-1奥迪A8网站首页现在是4页\一共有40页\编辑于星期二二、网页的基本元素

文本是网页中运用最为广泛的元素之一，是网页存在的基础。在网页设计中，我们可以通过设置字体、字号、颜色、背景等属性来改变文本的视觉效果。1、文本图1-2以文本为主体的网页现在是5页\一共有40页\编辑于星期二二、网页的基本元素

目前，网页支持的图像格式主要有3种：JPEG（JPG）、GIF和PNG。其中，GIF和PNG图像支持透明背景。2、图像图1-3以图像为主的网页现在是6页\一共有40页\编辑于星期二二、网页的基本元素

目前，在网页设计过程中所使用的动画主要是Flash动画（*.swf）和GIF动画。Flash动画运用最为广泛，而GIF动画则主要用于站标、广告条等组件。3、动画图1-4使用Flash制作的网页现在是7页\一共有40页\编辑于星期二二、网页的基本元素

目前，网页上使用最为广泛的音频格式主要有MP3、MIDI和WAV。MP3文件最大的优点就是能以较小的比特率以及较大的压缩比达到近乎完美的CD音质。MIDI文件的音质较好，浏览器不需要安装任何插件就可以播放。WAV文件也具有较好的音质，但是，由于文件较大，在加载过程中会增加系统资源的开销，不适合用来作为背景音乐。4、音频现在是8页\一共有40页\编辑于星期二二、网页的基本元素

随着网络带宽的不断增加，在网页中使用的视频也越来越多。在网页中添加视频文件可以大大增加站点的可读性，视频的直观性可以给访问者带来很大的视觉冲击。视频和音频一样，都是由与文件类型相适应的插件来进行播放的。目前，网页上使用最为广泛的视频格式包括WMV、RM、ASF、MPEG和AVI。5、视频现在是9页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础超级文本（Hypertext）简称超文本，它是一种使用户与计算机之间能够更加密切交流的文本显示技术，它通过对相关词汇进行索引链接，可以使带链接的词汇或语句指向文本中的其他段落、注解或文本。超文本标记语言（HTML）是一种用来制作网络中超文本的简单标记语言。它在文本文件的基础上加上一系列的标签，用以描述其颜色、字体、文字大小和格式，再加上声音、图像、动画、音频、视频等形成精彩的页面。现在是10页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础

HTML文档由一系列元素组成，用于组织文件的内容和指导文件的输出格式。元素名称不区分大小写，一个元素可以包含多个属性，各个属性用空格分开。元素又是由标签构成，除了极个别标签是单独存在的标签以外，大多数标签是成对出现的，由一个开始标签“<>”和一个结束标签“</>”组成。1、HTML文档现在是11页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础（1）单标签语法结构如下：<标签属性1=属性值1属性2=属性值2……属性N=属性值N>例如：<hrsize=10width=“50%”align=left>1、HTML文档（2）双标签语法结构如下：<标签>内容</标签>例如：现在是12页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础<html><head><title>简单的HTML网页制作</title></head><body><b>欢迎大家来学习网页设计基础!</b><br></body></html>1、HTML文档现在是13页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础（1）文本标签：包括标题标签、文字控制标签和换行标签。2、常用的HTML标签

a、标题标签：用于设置网页中的标题文字，被设置的文字将以黑体或粗体显示在网页中。其语法结构如下：<hnalign=参数>标题内容</hn>例如：现在是14页\一共有40页\编辑于星期二<html><head><title>标题标签</title></head><body>

标题标签范例！

<h1align="center">一级标题</h1><h2align="left">二级标题</h2><h3align="right">三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body></html>现在是15页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础（1）文本标签：包括标题标签、文字控制标签和换行标签。2、常用的HTML标签b、文字控制标签：用于控制文字的字体、大小和颜色。其语法结构如下：<fontface=值1size=值2color=值3>文字</font>例如：现在是16页\一共有40页\编辑于星期二<html><head><title>文字控制标签</title></head><body>

文字控制标签范例！<p><font>默认字体</font><p><fontface="华文中宋"size="+3"color="red">上海世博会欢迎您！</font><p><fontface="隶书"size="+5"color="green">上海世博会欢迎您！</font><p><fontface="华文行楷"size="+7"color="blue">上海世博会欢迎您！</font><p><fontface="楷体_GB2312"size="+9"color="yellow">上海世博会欢迎您！</font></body></html>现在是17页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础（1）文本标签：包括标题标签、文字控制标签和换行标签。2、常用的HTML标签

c、换行标签<br>：是一个单标签，也称空标签，不包含任何内容。在HTML文档中的任何位置只要使用了<br>标签，当用户通过浏览器浏览该文档时，<br>标签后面的内容将显示在下一行。例如：现在是18页\一共有40页\编辑于星期二<html><head><title>换行标签</title></head><body>

换行标签范例！<br><fontface="隶书"size="+3"color="green">新的起航，新的希望！</font><fontface="隶书"size="+3"color="green">没有使用换行标签！</font><br><fontface="华文行楷"size="+3"color="blue">新的起航，新的希望！</font><br><fontface="华文行楷"size="+3"color="blue">使用了换行标签！</font></body></html>现在是19页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础（2）图像标签：通过使用图像标签可以将图像文件插入到页面中。图像标签的语法结构如下：2、常用的HTML标签<imgsrc=值1alt=值2align=值3border=值4vspace=值5hspace=值6width=值7height=值8>例如：现在是20页\一共有40页\编辑于星期二<html><head><title>图像标签</title></head><body>

图像标签范例！<br><divalign="center"><imgsrc="images/001.jpg"alt="黄鹤楼"align="center"border="1"width=400height=273><h2align="center">黄鹤楼送孟浩然之广陵</h2><h3align="center">李白</h3><palign="center">故人西辞黄鹤楼，烟花三月下扬州。</P><palign="center">孤帆远影碧空尽，唯见长江天际流。</P></div></body></html>现在是21页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础（3）表格标签：表格标签在网页的设计过程中主要用来排版，以便使页面变得更加美观。2、常用的HTML标签创建表格时，通常需要用到表格标签<table></table>、表格标题标签<caption></caption>、表格行标签<tr></tr>、以及表格单元格标签<th></tr>和<td></td>。例如：现在是22页\一共有40页\编辑于星期二<html><head><title>表格标签</title></head><body>

表格标签范例！<br><tableborder=“1”><caption>员工信息表</caption>

<tr><th>工号</th><th>姓名</th><th>性别</th><th>出生年月</th><th>所属部门</th></tr><tr><th>0001</th><th>张三</th><th>男</th><th>1990年1月</th><th>人事部</th></tr><tr><th>0002</th><th>李四</th><th>女</th><th>1992年11月</th><th>财务部</th></tr></table></body></html>现在是23页\一共有40页\编辑于星期二三、超文本标记语言（HTML）基础（1）每一个HTML文档都不太大，它能够尽可能快地通过网络传输和显示，不需要加入字体或格式等其他控制信息。3、HTML的优点（2）HTML文档是独立于平台的，它对多平台兼容。（3）虽然HTML是一个标识性的语言，但是它比任何一种计算机语言都简单易学。而且制作时并不需要特殊的软件，只要一个字符编辑器就可以完成。现在是24页\一共有40页\编辑于星期二四、网页设计的基本流程网页设计的基本流程包括前期策划、CI形象设计、栏目与版块规划、确定网站的目录结构、确定网站的整体风格、版面布局及首页设计、网页模板制作、网站测试和发布网站等。（1）前期策划：主要是为了确定网站的主题和名称。主题要明确、精要，名称要切题、有特色且易记住。现在是25页\一共有40页\编辑于星期二四、网页设计的基本流程（2）CI形象设计：包括LOGO、色彩、广告语等可以作为标志性的东西。尽量做到以得体的颜色和图案体现网站的形象。（3）栏目与版块规划：栏目设置应体现网站的主题。版块安排应尽量做到井井有条，避免产生混乱，坚持适度的原则。（4）确定网站的目录结构：尽量要简洁，分支页面内容相对独立，而且要求导航功能完善，能使用户快速到达目的页面。现在是26页\一共有40页\编辑于星期二四、网页设计的基本流程（5）确定网站的整体风格：网站风格的确定主要针对浏览者以及网站的主题。（6）版面布局及首页设计：页面布局的原则是将一定的内容放在特定的可视块上。首页应该切题精练、重点突出，能让网页浏览者快速地了解该网站的大概内容。（7）网页模板制作：网页模板包括所有网页的公共元素，如LOGO、广告语、导航栏、返回首页、站点地图、E-mail地址、版权信息等。现在是27页\一共有40页\编辑于星期二四、网页设计的基本流程（8）网站测试：最方便的测试方法就是在本机上使用Internet浏览器进行浏览测试，包括链接、外观、速度、脚本和程序等内容，同时根据结果及时进行相应的修改。（9）发布网站：可以使用DreamweaverCS5中的“发布站点”功能或者FTP软件，将页面文件上传到指定的网络服务器上。如果自己没有服务器，则需要在网络上申请一个空间来存放网页，同时还必须申请一个域名来指定站点在网络上的位置。现在是28页\一共有40页\编辑于星期二五、通过输入HTML代码制作简单的网页实验前先在“D:\”目录下新建一文件夹，并且将该文件夹重命名为“mysite”；打开mysite，再新建一个文件夹，将该文件夹重命名为“images”，把上机实践文件夹第1课文件夹里面的图片“孔子”复制到刚刚新建的“images”文件夹里。

步骤１单击【开始】|【所有程序】|【附件】|【记事本】命令，打开记事本。

步骤2在记事本中输入以下内容：现在是29页\一共有40页\编辑于星期二<html><head><title>思学苑-欢迎您！</title></head><body>《论语》——孔子<divalign="center"><imgsrc="images/孔子.jpg"alt="孔子"align="center"border="1"width=150height=170><h1align="center">学而第一</h1>子曰：“学而时习之，不亦悦乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？”

<p><tablealign="center"border=“1”><caption>注释</caption><tr><th>原词</th><th>释义</th></tr>现在是30页\一共有40页\编辑于星期二<tr><th>时</th><th>以时、及时</th></tr><tr><th>习</th><th>温习、复习</th></tr><tr><th>悦</th><th>高兴、愉快</th></tr><tr><th>愠</th><th>怨恨、恼怒</th></tr></table></div></body></html>现在是31页\一共有40页\编辑于星期二五、通过输入HTML代码制作简单的网页

步骤3单击【文件】|【保存】命令，弹出【另保为】对话框，在【保存在（I）】窗口中选择文件保存的路径为“D:\mysite”，在“文件名”窗口中输入“index”，点击【保存】按钮保存文本。

步骤4单击【开始】|【控制面板】命令，打开控制面板，双击“文件夹选项”图标，弹出【文件夹选项】对话框，单击【查看】选项卡，将【高级设置】下面的【隐藏已知文件类型的扩展名】前面的勾去掉，点击【确定】按钮完成设置。现在是32页\一共有40页\编辑于星期二五、通过输入HTML代码制作简单的网页

步骤5重命名文件：打开“index”文件所在的目录，右击“index.txt”，再单击【重命名】选项，将原文件重命名为“index.html”，弹出【重命名】提示对话框，单击【是】按钮确定重命名操作。

步骤6网页测试：双击打开“index.html”文件，浏览我们刚刚制作的简单网页。现在是33页\一共有40页\编辑于星期二六、DreamweaverCS5的基本功能

DreamweaverCS5可以通过拖拉的方式来创建页面元素，然后以图形界面的形式去编辑页面元素的属性。1、创建和编辑页面元素

DreamweaverCS5是Adobe公司新推出的一款专业的Web网页、Web站点以及Web应用程序设计编码的开发与管理软件。它具有可视化效果，还可以通过鼠标拖、拉图形界面设置属性来快速地创建网页而无需手工编写代码。现在是34页\一共有40页\编辑于星期二六、DreamweaverCS5的基本功能

DreamweaverCS5可以进行Web站点的创建以及管理，能方便地管理我们的网站以及预览网站中的网页以及调试Web应用程序。3、站点管理

DreamweaverCS5的代码视图工作区提供了编辑html代码的功能，此外在拆分视图中上半个工作区也可以进行html代码的编辑。2、编辑HTML现在是35页\一共有40页\编辑于星期二六、DreamweaverCS5的基本功能

DreamweaverCS5还可以插入媒体文件，如声音、SWF格式视频、FLV格式视频，可以非常方便的编辑这些媒体文件。5、插入和编辑媒体

DreamweaverCS5作为网页设计三剑客工具之一，可以非常方便的插入FireworksCS5文件和FlashCS5动画。4、插入Fireworks文件和Flash动画现在是36页\一共有40页\编辑于星期二七、DreamweaverCS5的工作界面图1-4DreamweaverCS5工作区的

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论