怎样用html制作网页？

芯岁网络 2024-12-13 15:24 0 0条评论

默认

一、怎样用html制作网页？

‍ 学生HTML静态网页基础水平制作 ‍ ，页面排版干净简洁。使用HTML+CSS页面布局设计,web大学生网页设计作业源码，这是一个不错的旅游网页制作，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用, 这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

@TOC

一、网站题目 ‍

旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。

二、网站描述✍️

旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的是做出旅游网站独特的风格，更能吸引浏览者的眼球。

三、网站介绍

网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。其中：（1）html文件包含：其中index.html是首页、其他html为二级页面；（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；（3）js文件包含：js实现动态轮播特效, 点击事件等等（个别网页中运用到js代码）。

四、网站效果

网站设计制作的重点是对网页整体设计的布局和对网页整体内容的选题。 网站设计方面：计划实现简洁大气的网页设计效果。 网站功能方面：计划实现各个页面之间的链接跳转功能、鼠标悬停在文字上的变色功能、简单的首页动态图片切换功能、简单的表单提交功能。

在这里插入图片描述

五、网站代码制作部分

（1）网站首页布局确定好各个板块的内容，并使用了DIV+CSS布局。另外首页使用到的知识主要有图片插入、图片动态切换、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（2）页面使用了DIV+CSS布局，使用到的知识主要有图片插入、导航条、利用CSS固定字体、文字大小、文字颜色、背景颜色。

（3）表单部分页面使用了DIV+CSS布局，使用到的知识主要有运用了form表单、input文本框和input提交按钮，完成表单信息收集。利用CSS设置input提交按钮文字大小和颜色。

HTML结构代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>平遥古城</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/changimages.js"></script>
</head>

<body>
<div class="main">
  <div class="top"><img src="images/top.jpg"/></div>
  <div class="menu">
    <ul>
      <li><a href="index.html">首页</a></li>
      <li><a href="about_kf.html">关于平遥</a></li>
      <li><a href="tourism.html">旅游景点</a></li>
      <li><a href="culture_kf.html">平遥文化</a></li>
      <li><a href="food_kf.html">平遥美食</a></li>
    </ul>
  </div>
  <div class="con">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="top"><div class=pic_show>
      <div id=imgADPlayer></div>
      <script> 
                PImgPlayer.addItem( "", "#", "images/pic1.jpg"); 
                PImgPlayer.addItem( "", "#", "images/jd2.jpg"); 
                PImgPlayer.addItem( "", "#", "images/jd3.jpg"); 

        PImgPlayer.init( "imgADPlayer", 650, 400 );   
    </script>
    </div></td>
        <td><p>平遥古城位于山西省中部，始建于周宣王时期，明洪武三年（1370年）扩建，距今已有2700多年的历史。还较为完好地保留着明清时期县城的基本风貌，是中国汉民族地区现存最为完整的古城。山西平遥被称为“保存最为完好的四大古城”之一，也是中国仅有的以整座古城申报世界文化遗产获得成功的两座古城市之一。  平遥古城1997年被列入世界文化遗产名录。2009年，平遥古城被世界纪录协会评为中国现存最完整的古代县城。2015年7月13日，平遥古城成为国家5A级旅游景点。 2017年11月19日，获得年度旅游目的地声誉奖。  第一批全国中小学生研学实践教育基地。</p></td>
      </tr>
    </table>
    <h3 class="title">旅游景点</h3>
    <div class="jd_list">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td valign="top"><p><a href="jd1.html"><img src="images/jd1.jpg"/></a></p>
            <h3>平遥县衙</h3>
            <div class="detail">平遥县衙坐落于平遥古城中心，始建于北魏，定型于元明清，保存下来最早的建筑建于元至正六年（1346年），距今已有六百多年的历史，整座衙署坐北朝南，呈轴对称布局，南北轴线长二百余米..</div></td>
          <td valign="top"><p><a href="#"><img src="images/jd2.jpg"/></a></p>
            <h3>日升昌票号</h3>
            <div class="detail">日升昌票号成立于清道光三年（1823年），由山西省平遥县西达蒲村富商李大金出资与总经理雷履泰共同创办。总号设于山西省平遥县城内繁华街市的西大街路南，占地面积1600多平方米...</div></td>
          <td valign="top"><p><a href="#"><img src="images/jd3.jpg"/></a></p>
            <h3>孔庙</h3>
            <div class="detail">文庙即孔庙，是祭祀孔子的地方。平遥文庙位于平遥县城内东南隅，始建于唐贞观初年，其大成殿为金大定三年（1163年）重建，至今保持原貌，是我国现存各级文庙中历史最久的殿宇。 </div></td>
        </tr>
        <tr>
          <td valign="top"><p><a href="#"><img src="images/jd4.jpg"/></a></p>
            <h3>清虚观</h3>
            <div class="detail">清虚观是古城内最大的道观。按照道东佛西的传统布局安排，坐落于东大街东段路北。清虚观始建于唐显庆二年（657年），原名太平观，宋治平元年（1064年）改为清虚观。...</div></td>
          <td valign="top"><p><a href="#"><img src="images/jd5.jpg"/></a></p>
            <h3>平遥城墙</h3>
            <div class="detail">平遥城墙，始建于西周宣王时期（公元前827年～公元前782年）为夯土城垣。明洪武三年（1370年）重筑，由原“九里十八步”扩为“十二里八分四厘”（6.4公里），变夯土城垣为砖石城墙。</div></td>
          <td valign="top"><p><a href="#"><img src="images/jd6.jpg"/></a></p>
            <h3>瓮城</h3>
            <div class="detail">瓮城，指建在城门外的小城，又叫月城，用以增强城池的防御能力。平遥古城的瓮城城门与大城门的朝向多数呈90°夹角（南门和下东门除外），即便敌军攻破了瓮城城门，还有主城门防御...</div></td>
        </tr>
      </table>
    </div>
  </div>
  <div class="bottom">平遥古城版权所有</div>
</div>
<embed src="images/m.mp3" hidden="true" autostart="true" loop="true">
</body>
</html>

CSS样式代码

@charset "utf-8";
/* CSS Document */

* {
    margin:0;
    padding:0;
}
body {
    font-family:"微软雅黑";
    font-size:14px;
    color:#444;
    line-height:24px;
    background:#444;
}
ul,li{ list-style:none;}
.main {
    width:1100px;
    margin:0 auto;
    background:#fff;
}
.menu{ background:#1c8bcf; height:40px;}
.menu ul{ margin-left:30px;}
.menu ul li{ float:left; text-align:center; margin-right:20px;}
.menu ul li a{ color:#fff; text-decoration:none; display:block; line-height:40px; padding:0px 40px; font-size:16px;}
.menu ul li a:hover{ color:#000; background:#FF0;}
.con {
    padding:30px;
    min-height:500px;
}
.con img {
    margin-right:20px;
}
.title{ font-size:24px; margin-top:30px; margin-bottom:30px;}
.jd_list{ text-align:center;}
.jd_list td{ padding-bottom:30px;}
.jd_list td img{  width:300px; height:200px;}
.jd_list h3{ padding:10px 0;}
.jd_list .detail{  width:260px; margin:0 auto; text-align:left;}
.bottom{ background:#1c8bcf; text-align:center; padding:20px 0; color:#fff;}
.bottom span{ padding-right:20px;}
.title2{font-size:24px; margin-top:30px; margin-bottom:30px; text-align:center; border-bottom:1px solid #ccc; margin-bottom:20px; padding-bottom:30px;}
.title3{ margin:20px 0px;}
.wh p{ text-indent:2em; margin-bottom:10px;

六、遇到问题及如何解决

实训中遇到得困难不少，比如如何收集适合网页的图片素材、如何让网页的配色看着更自然更舒适、如何用PS裁剪大小合适的图片、以及制作表单时候如何设计等等，最后，通过上网查询和请教别人得到了很好的解决。

七、实训总结

通过这次网页设计制作实训，能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver、vscode、hbuider等制作网页更为得心应手。实训过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实训我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很实用的学科，值得我以后进行更深入的学习。这次实训中我也体会到了自己掌握的技巧太少了，以至于很多想法都没能实现，在以后的学习过程中我要对网页制作有更深的了解，做出更为成熟的网页。

八、更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！

2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题欢迎一起交流学习

二、怎样用HTML制作网页？

用记事本写网页代码可以用记事本来输入网页代码，这个方便，系统一般都自带了，不用安装其它的代码编辑器。

html简介HTML 指的是超文本标记语言: HyperText Markup LanguageHTML 不是一种编程语言，而是一种标记语言标记语言是一套标记标签 (markup tag)

html基础HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的

HTML 元素HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容

HTML 属性HTML 元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签

制作简单的网页将的网页代码输入到记事本中即可，如果想加入表格，则输入代码段即可。

扩展资料：

HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等

三、怎样用HTML Help Workshop制作chm文件？

用HTML Help Workshop制作chm文件很方便，下面介绍制作的具体步骤。

一、制作前的准备工作

由于chm帮助文件是基于HTML文件特征的，所以前期编写HTML文件的准备工作很

重要。HTML Help Workshop的角色就像是一个总管，以一个项目控制整个项目的各类

型文件，然后将各类型的文件编译成独立的chm文件。它的每个主题就是一个HTML文

件，它的结构有点类似平常我们所见到的目录树，但是它的主题包括目录及文件。主

题文件可以用任何一个HTML编辑器进行编辑，也可用HTML Help Workshop编辑，唯一

美中不足的是它的编辑器是纯文字模式，对于HTML文件而言不具备所见即所得的效果

。

如果你不会制作网页，没关系，你也可以通过Word 97或Word 2000，将Word格式

的主题文件转换成HTML格式。

二、创建项目文件

第一步：点击HTML Help Workshop菜单栏中的“File/New”命令，这时出现“选

择新建内容”的对话框，选中“Project”。

第二步：，按“OK”按钮后，将“Convert WinHelp Project”这个选项留空，

继续下一步。

第三步：点击“Browse”按钮，设置放置项目文件的目录及项目文件名，完成后

，继续下一步。

第四步：因为我们已经事先建好了html文件，此时请选择“HTML file”，继续

下一步。

第五步：点一下“Add”按钮并加入已经编辑好的主题文件（也就是设置成首页

面的HTML文件），如图4。点击“下一步”，最后点击“完成”按钮，新的项目即已

新增完成。

现在就可以进入HTML Help Workshop工作窗口。在窗口的上方是3个卷标，分别

是“Project（项目）”、“Contents（目录）”、“Index（索引）”。

在“Project”卷标的左侧是7个按钮，它们的功能名称自上而下分别是：

“Change project options（改变项目选项）”、“Add/Remove topic files（添加

/删除主题文件）”、“Add/Modify window definitions（添加/修改窗口定义）”

、“HtmlHelp API information（HTML帮助API信息）”、“View HTML source（校

验HTML源文件）”、“Save Project Contents and Index files（保存项目、目录

和索引文件）”、“Save all file and Compile（保存全部文件并编译）”。

第六步：点击“Project”编辑窗口下方的“Change Project Options”按钮后

，会弹出一个“Options”对话框（图6）。在这个对话框的“General”卷标的

“Title”中输入标题，编译后这个标题将出现在chm文件窗口的标题栏中。在“File

”卷标中选上“Automatically create contents file（.hhc） when compiling”

。

chm文件的“Search（搜索）”选项允许用户在所有主题文件中搜索字、词或短

语，将它们的标题显示出来，而且用醒目的方式显示在主题中。在“Compiler”卷标

中选上“Compiler full－text search information”，即可支持全文检索功能。

第七步：点击“Save project file and compile”按钮，虽然此时已经可以观

看结果了，不过，我们要再多作一项设定让最后的成品再完整些。

四、怎样用html和javascript制作离线手机app？

利用html（HTML5）、CSS（CSS3）以及Javascript、响应式设计、PhoneGap等可以制作混合APP。

1、使用CSS3媒体查询制作响应式页面，以确保在不同的屏幕分辨率下都能很好的显示。或者也可以以remnant（rem）单位，将固定宽高换乘为remnant。

2、远程数据获取，要使用跨域请求。

3、页面特效使用Javascript或是CSS动画实现。

4、使用PhoneGap进行APP打包，将网页应用转化为APP。

五、淮安网站建设与HTML制作技巧

淮安网站建设与HTML制作技巧

在互联网信息爆炸的今天，淮安的企业、个人和组织都不可避免地面临着建设自己的网站的需求。而网站建设的核心技术之一就是HTML制作。本文将带你深入了解淮安网站建设以及HTML制作技巧。

淮安网站建设的意义

淮安作为一个经济发达的城市，拥有大量的企事业单位和个人。建设一个网站对于他们来说具备了重要的意义：

提高企业的知名度和形象：一个精美、专业的网站能够吸引更多的用户关注，提升企业的品牌形象。
扩大市场份额：通过网站，企业可以覆盖更广阔的市场，与更多潜在客户进行交流和合作。
实现电子商务：网站的建设为企业实现线上销售提供了便利，扩大了销售渠道。
提供信息服务：网站可以为用户提供公司、产品、服务等相关信息，方便用户了解和获取所需信息。

HTML制作技巧

HTML是超文本标记语言（HyperText Markup Language）的简称，是构建网页的基础。以下是淮安网站建设中常用的HTML制作技巧：

1. 页面结构设计

在网站建设之前，需要先设计好页面的整体结构。合理的页面结构能够使用户更好地浏览网页内容，并且对搜索引擎友好。

2. 使用语义化的HTML标签

语义化的HTML标签能够使网页更加可读、易于维护，并且有利于SEO。如使用

、

等标题标签，
标签表示段落等。

3. 图片优化

为了加快网页加载速度，减少带宽消耗，需要对网站中的图片进行优化处理，包括图片压缩、使用合适的格式等。

4. 响应式设计

随着移动互联网的普及，响应式设计成为了一种趋势。使用响应式设计可以使网站在不同终端上都能提供良好的用户体验。

5. 使用CSS样式

除了HTML之外，CSS（层叠样式表）也是网站建设不可或缺的一部分。合理使用CSS可以实现更丰富的页面效果，并且使得网站代码更易于维护。

6. 浏览器兼容性

不同浏览器对于网站的解析存在差异，因此在HTML制作中需要考虑各种浏览器的兼容性，确保网站在不同浏览器上能够正常显示。

总结

通过淮安网站建设与HTML制作技巧的学习，你可以更好地建设专业、高效的网站，并以此实现企业形象的宣传与市场拓展。

感谢您阅读本文，希望通过这篇文章能够帮助到您！

六、如何制作HTML文件？

1，使用sublime开发工具新建文件 2，打开文件，点击新建文件，快捷键Ctrl+N3,新建以后保存文件，文件后缀名一定要是.html4，英文状态下输入一个"!",然后按一下TAB键快速生成html骨架5，最后就生成了一个html文件

七、html表格制作教程？

使用webstorm制作网页文件的时候，难免会遇到制作表格的情况，而且关键的布局方式一般都是使用表格完成的。

工具/原料

电脑

webstorm

方法/步骤

1、制作表格我们需要使用标签table在html中输入table标签，然后设置行和列，，tr代表行,td代表列，然后在行和列中输入相关的内容。

2、预览网页我们发现，网页显示格式看起来不像是表格，因为没有框线，这时候我们需要给table标签设置边框，border，如图所示，在table标签中，定义border的值，这样再预览网页我们就可以看到表格样式。

3、图中的表格表头和文本内容显示格式一致，我们可以使用th标签代替td标签作为表格的表头，系统自动将表头内部的文本内容加粗居中显示，这样表头格式就被着重定义出来。

4、可以使用caption标签给表格添加标题，caption是table标签的子标签需要写在table标签内部，将需要定义的标题文本输入到caption中。

5、两行数值一样的话可以设置为rowspan值，如图所示，两行数据一致，直接设置rowspan值为2，下一行的这个数值就不必单独定义了，如果是三行数值一致，那么可以直接设置为3。

6、将多列相同数据一起显示可以使用colspan来进行设置，如图所示，第三列所有的内容都全部显示一致，我们可以设置像表格中的合并效果然后一起显示，这样就不必每一列都输入内容。

八、HTML表格怎么制作？

1、制作表格我们需要使用标签table在html中输入table标签，然后设置行和列，，tr代表行,td代表列，然后在行和列中输入相关的内容。

4、可以使用caption标签给表格添加标题，caption是table标签的子标签需要写在table标签内部，将需要定义的标题文本输入到caption中。

5、两行数值一样的话可以设置为rowspan值，如图所示，两行数据一致，直接设置rowspan值为2，下一行的这个数值就不必单独定义了，如果是三行数值一致，那么可以直接设置为3.

九、html网页制作软件？

Jimdo是一款免费的在线网页制作工具，这款软件可以帮你迅速搭建一个格调颇高的、拥有自定义域名的网页，用最简单的操作，就能完成一个独一无二的个人主页或博客。其网页版就颇受欢迎，而今相继推出了IOS和Android版本的应用，让创建网页的操作更加便捷。

十、html网页制作教程？

本人有多年的网站制作和教学经验，要学好html，必须从两个方面来看待这个问题，把这个问题搞清楚了，思路理顺了，学起来是非常简单的，毫不夸张的说，掌握了方法，10天完全可以搞定html教程。

从宏观方面讲：

html是网站制作的一部分，是web前端设计的一部分，它不是一个单独的存在，如果单独用html做一些东西，实用性相对弱一些。

严格来说html网页，也是需要结合网页美工的，没有好的效果图，html做出来的东西，就没有审美。

从微观方面讲：

只需要掌握了相应的标签、规则、语法，就可以利用html做页面，html相对简单，在学习的时候，最好是边学边用，这样是掌握最快的。

我之前做了一系列的网站制作视频课程，如果你有需要，可以关注我的公众微信 iguopengtao，进行学习观看。

一、怎样用html制作网页？

一、网站题目 ‍

二、网站描述✍️

三、网站介绍

四、网站效果

五、网站代码制作部分

HTML结构代码

CSS样式代码

六、遇到问题及如何解决

七、实训总结

八、更多干货

二、怎样用HTML制作网页？

三、怎样用HTML Help Workshop制作chm文件？

四、怎样用html和javascript制作离线手机app？

五、淮安网站建设与HTML制作技巧

淮安网站建设与HTML制作技巧

淮安网站建设的意义

HTML制作技巧

1. 页面结构设计

2. 使用语义化的HTML标签

、

等标题标签，标签表示段落等。

3. 图片优化

4. 响应式设计

5. 使用CSS样式

6. 浏览器兼容性

总结

六、如何制作HTML文件？

七、html表格制作教程？

八、HTML表格怎么制作？

九、html网页制作软件？

十、html网页制作教程？

等标题标签，
标签表示段落等。