网页制作-电子教案-模块1资料

模块1网页设计基础实训1体验HTML文档1.1网页基础知识1.2网站配色方案1.3网站设计常用软件1.4HTML文档入门思考与实训1实训1体验HTML文档myweb1.html的程序代码：htmlheadtitle滚动的字幕/title/headbodymarqueedirection=left大家好！这是我用记事本编写的第一个网页。/marquee/body/html实训1体验HTML文档实训1体验HTML文档myweb2.html代码实训1体验HTML文档myweb3.html程序代码tablewidth=490border=1align=centercellpadding=0cellspacing=0trtdcolspan=3imgsrc=11.JPGwidth=501height=101/td/trtrtdwidth=168ahref=web1.html我的地盘/a/tdtdwidth=168ahref==_blank一听音乐/a/tdtdwidth=146ahref=mailto:[e-mail]与我联系/a/td/trtrtdheight=149colspan=3align=centerformname=form1method=postaction=用户登录br用户姓名inputname=textfield3type=textid=textfield3/br登录密码inputname=textfield3type=passwordid=textfield4/brinputtype=submitname=button2id=button2value=登录/form/td/tr/table实训1体验HTML文档myweb3.html浏览效果1.1网页基础知识1．Internet概述1.1网页基础知识2．网页基础知识3．Web站点和网页1.1网页基础知识4．HTTP和URLHTTP：超文本传输协议，是因特网上应用最为广泛的一种网络协议，它允许将HTML文档从Web服务器传送到浏览器。URL：Internet中的Web服务器数量众多，且每台服务器都包含有多个网页，用户要想在众多的网页中指明要获得的网页，就必须借助于URL进行资源定位。URL由三个部分组成：协议、主机名、路径及文件名。例如：某网页的URL为，其中http:是采用的协议，是主机名，news指网页的路径（存储网页的文件夹），wj1.html是要访问的网页文件名。用户只要在浏览器的地址栏中输入要浏览网页的URL，便可以浏览到该网页。1.2网站配色方案色彩是人的视觉最敏感的东西。网站主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则是“总体协调，局部对比”，也就是说主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。1.2网站配色方案1．色彩的搭配原则（1）色彩的鲜明性如果一个网站的色彩鲜明，很容易引人注意，会给浏览者耳目一新的感觉。（2）色彩的独特性网页的用色必须要有自己独特的风格，这样才能给浏览者留下深刻的印象。（3）色彩的艺术性网站设计是一种艺术活动，因此必须遵循艺术规律。按照内容决定形式的原则，在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。（4）色彩搭配的合理性色彩要根据主题来确定，不同的主题选用不同的色彩。例如，用蓝色体现科技型网站的专业，用粉红色体现女性的柔情等。1.2网站配色方案2．色彩搭配方案色环实质上就是在彩色光谱中所见的长条形的色彩序列，只是将首尾连接在一起，使红色连接到另一端的紫色。一个色环通常包括12种明显不同的颜色。（1）单色方案单色方案指在网站设计中始终使用一种基本颜色。为避免单调，可以通过调整这种基本颜色的灰度和亮度来得到更多的颜色，由于整个颜色方案中事实上只有一种基色，因此这种方案称为单色方案。1.2网站配色方案（2）相似色配色方案相似色配色方案指在色彩圆环上选择彼此相邻的几种颜色构成的配色方案。例如橙色、橙红色，以及橙黄色就可以组成一个相似色方案。由于相似色方案中包含了多种基色，如果再加上亮度和饱和度的变化，可以构成的颜色就非常多。1.2网站配色方案（3）互补色配色方案互补色配色方案指在色彩圆环上沿直径选择相对应的两种颜色构成配色方案。1.2网站配色方案（4）三色配色方案三色配色方案指在色彩圆环中选择一个等边三角形三个顶点上的颜色构成的配色方案。三色方案中使用了三种彼此之间差别明显，对比强烈的颜色，因此页面显得相当不稳定，给人带来另类的感觉，给予浏览者某种紧张感。禅意花园网站：网站设计常用软件1．网站设计开发软件（1）文本编辑器制作网页通常使用HTML语言，HTML文档可以使用多种文本编辑器进行编辑，如记事本、Word写字板、UltraEdit等。（2）FrontPageFrontPage是微软公司出品的一款网页制作入门级软件。FrontPage使用方便简单，会用Word就能做网页，所见即所得是其特点。（3）DreamweaverDreamweaver是由Adobe公司推出一款优秀的网站开发工具，是网页设计师在选择开发工具时一个不错的选择，能更有效地设计、开发和维护基于网站标准化的网站。1.3网站设计常用软件2．网页美化工具软件（1）PhotoshopPhotoshop是由Adobe公司开发的一种的图形图像软件，是目前最好的平面设计软件之一。其功能完善、性能稳定、使用方便，是美化网页的常用工具。（2）FireworksFireworks是一款专为网络图形设计的图形编辑软件，它大大简化了网络图形设计的工作难度，无论是专业设计家还是业余爱好者，使用Fireworks都不仅可以轻松地制作出十分动感的GIF动画，还可以轻易地完成大图切割、动态按钮、动态翻转图等。（3）FlashFlash是专业的矢量图形编辑和动画创作软件，是一种交互式动画设计工具，用它可以将音乐、声效、动画，以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。1.4HTML文档入门1．HTML语言概述HTML（HypertextMarkedLanguage，超文本标记语言）是用于创建Web文档的一种标记语言。在IE浏览器中任意打开一个网页，选择“查看→源文件”命令，系统会启动记事本程序，打开该网页的源程序代码。1.4HTML文档入门2．HTML文档基本结构一个HTML文档是由一系列的元素和标记组成的，HTML用标记来规定元素的属性和它在文件中的位置。1.4HTML文档入门3．HTML文档常用标记（1）标题标记格式：title网页的标题/title说明：该标记在head/head标记中，所包含的文字将出现在浏览器的标题栏上。当用户将此页面添加到收藏夹时，也会默认以该标题为名称。（2）主体标记格式：bodybgcolor=页面背景颜色background=背景图像text=文本颜色主体内容/body说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属性。背景颜色和文本颜色可以使用颜色名（如蓝色：blue）或颜色代码值（如蓝色：#0000FF）来表示。例如：将图像tx.jpg设置为网页背景图像，网页文字颜色为蓝色。bodybackground=tx.jpgtext=#0000FF主体内容/body1.4HTML文档入门3．HTML文档常用标记（3）文字标记格式：fontsize=文字大小face=字体color=文本颜色文本内容/font说明：font标记用于设置网页中文字的字号、字体、颜色等属性。设置字号时，fontsize=1（最小）、fontsize=7（最大）、fontsize=+1（比预设字大一级）、fontsize=-1（比预设字小一级）。例如：将文本“最新通知”设置为楷体_GB2312，大小为4。fontsize=4face=楷体_GB2312最新通知/font（4）段落标记格式：palign=对齐方式段落文本/p说明：由p标记所标识的文字代表同一个段落的文字。其中align属性有left、center和right三个参数，这三个设置分别代表左对齐、居中对齐和右对齐。例如：将标题“会议通知”居中显示。palign=center会议通知/p1.4HTML文档入门3．HTML文档常用标记（5）换行标记格式：br说明：br是个单标记，HTML文件中任何位置只要使用了br标记，当文件显示在浏览器中时，该位置之后的文字将显示于下一行。（6）水平线标记格式：hralign=对齐方式color=颜色width=宽度size=高度noshade说明：在网页中插入一条水平分隔线，将不同的内容信息分开，使文字看起来清晰、明确。noshade用于设置水平为实心线（默认情况下为阴影线）。例如：插入一条宽度800像素的红色水平线，并居中显示。hrwidth=800color=#ff0000align=center1.4HTML文档入门3．HTML文档常用标记（7）图像标记格式：imgsrc=图像地址align=对齐方式width=宽度height=高度alt=替换文字boder=边框宽度说明：在页面中插入一幅图像，图像地址可以在本地计算机，也可以是一个URL地址，但图像必须是GIF、JPG/JPEG或PNG格式的，其他格式的图像不能被插入到网页中。Alt参数用于设置图像的说明信息，当浏览器不能显示图像时，则用该参数指定的文本替换特定的图片。若图片正常显示，则当鼠标指向该图片时也会显示该文字。例如：插入images文件夹中的图像tx.jpg，宽度和高度均为300像素，鼠标指向图像或图像不能正常浏览时提示“风景图片”。imgsrc=images/tx.jpgwidth=300height=300alt=风景图片1.4HTML文档入门3．HTML文档常用标记（8）超链接标记格式：ahref=目标文件的URLtarget=打开窗口的方式文本或图像/a说明：为标记中的文本或图像添加超链接目标，浏览网页时单击可打开指定的目标文件。target用于指定打开目标窗口的方式，默认情况是在当前窗口中打开，如果要在新窗口中打开目标窗口，则可将target的属性值设为_blank。根据链接目标的不同，可将超链接分为以下几项：①内部链接。链接到本地计算机上的文件，例如：ahref=1.html单击查看1.html文件内容/a②外部链接。链接到本地站点以外其他任何一个站点上的文件，例如：ahref=单击打开新浪网/a③E-mail链接。链接到一个电子邮件地址，单击将启动默认E-mail程序发送信件，例如：ahref=mailto:[e-mail]请给我发信/a④锚记链接。在某个Web页面中创建一个被称为“锚点”的标记，让页面上的另外一个位置引用，相当于在某个文件中重要之处做上书签，需要该部分时直接查找书签就能找到此部分。1.4HTML文档入门3．H