一个html的作业，最近阳了做不了了，有大佬费心给做一下吗

御坂御坂如此 · 发表于 2023-6-21 09:28:46

网页设计与制作期末作品要求
22-23-2
设计包含一个主页及至少2个链接页面的网站，内容自选，但有一定的主题思想。

1. 内容（10分）
1) 网页内容积极向上、思想健康、符合网站主题，子页面与主页互相链接。10分

2. 结构 (40分)
1）DIV结构清楚合理,页面内容清晰明了。 10分
2) 主页上必须有Logo(要使用相应的图片处理工具处理，可以是PhotoShop等)、网站导航、网站版权等信息。 10分
3) 首页命名为index.html 并将其保存在站点文件夹根目录下。站点内文件及文件夹名称严禁出现中文。 10分
4) 网站中有网站简介子页，包含学号、姓名、院系、专业、班级、电子邮箱、兴趣、爱好、网站简介、栏目设置、网站特色等信息。 10分

3. 版面效果与视觉感受 (50分)
1) 浏览页面时不得出现乱码，无因布局不合理而出现的DIV错位情况。 10分
2) 各网页之间的设计风格统一，需使用不同样式布局（DIV布局等）所有图片、文字等素材与网站主题相符。10分
3) 各网页标题命名合理，没有空链接和错误链接。 10分
4) 使用层叠样式表css对DIV或文字、链接等进行修饰，既能规范效果又可突出主题。 10分
5) 网页整体风格及页面具有较强的个人创意设计。 10分

注：
1) 成果提交形式为电子版：以学号+姓名命名站点根文件夹，例如： 01张三，子文件夹和文件组织合理，命名合理。
2) 对网站互相抄袭或从他人网站抄袭者将给予扣分，完全抄袭者成绩为零分！！！

不二如是 · 发表于 2023-6-21 10:33:09

这里是一个网站设计方案:

内容:
主页内容:网站名称“思想天地”,网站导航(首页、身心健康、学习提高、兴趣爱好)、个人简介、联系方式。表达学习、提高自我、健康生活的主题思想。
子页面:
(1)身心健康:介绍如何通过健康饮食、运动等方式保持身心健康。
(2)学习提高:分享一些学习方法和小技巧,如记忆方法、速读技巧等。
(3)兴趣爱好:分享一些兴趣和爱好,如书法、摄影、旅行等。

结构:
使用DIV结构,页面内容分类清晰。主页有网站LOGO、四项导航、版权信息(网站名称+作者+联系方式)。
主页命名为index.html,子页面命名为health.html、study.html和hobby.html。 filepath全部为小写英文。
个人简介页面包括 requires的内容。

版面效果:
(1)页面没有乱码,DIV布局合理。
(2)页面风格统一简洁大方,文字图片与主题相关。
(3)页面标题合理,无空链接。
(4)通过CSS美化页面,突出主题。如导航栏设置为红色,个人简介框设置阴影效果等。
(5)整体页面设计个性化,如LOGO的绘制、页面配色方案的选择等。

参考代码：

这里是网站代码 index.html 参考:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>思想天地</title>  
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header">
<img src="images/logo.png" alt="logo">  
<div id="nav">  
<a href="index.html">首页</a>  
<a href="health.html">身心健康</a>  
<a href="study.html">学习提高</a>  
<a href="hobby.html">兴趣爱好</a>  
</div>  
</div>  
<div id="content">  
<h2>个人简介</h2>
<p>......</p>   
<h2>网站简介</h2> 
<p>......</p>
</div>
<div id="footer">  
<p>网站名称:思想天地   作者:xxx   联系方式:xxxx@xx.com</p>
</div>
</body>
</html>

health.html
<h1>身心健康</h1>
<p>内容介绍......</p>

study.html
<h1>学习提高</h1>
<p>内容介绍......</p>

hobby.html
<h1>兴趣爱好</h1>
<p>内容介绍......</p>

style.css
为页面设置字体、颜色、导航hover效果等样式。

这个网站实现了一个简单的主页和三个子页面。通过HTML编写页面内容和结构,CSS添加样式,实现教师定义的效果要求。可以作为一个小型主题网站的框架,后续可以添加更丰富的内容。

wp231957 · 发表于 2023-6-21 10:34:44

完全抄袭者成绩为零分！！！呵呵

liuhongrun2022 · 发表于 2023-6-21 14:52:47

不二如是发表于 2023-6-21 10:33
这里是一个网站设计方案:

内容:

GPT？

liuhongrun2022 · 发表于 2023-6-21 15:08:01

wp231957 发表于 2023-6-21 10:34
完全抄袭者成绩为零分！！！呵呵

沐雨尘枫 · 发表于 2023-6-21 16:10:27

liuhongrun2022 发表于 2023-6-21 14:52
GPT？

好像

sfqxx · 发表于 2023-6-21 17:55:17

网站互相抄袭或从他人网站抄袭者将给予扣分，完全抄袭者成绩为零分！！！

咳咳

巅峰老甲鱼1 · 发表于 2023-6-22 00:00:49

包括主页、健康饮食和锻炼建议两个子页面。以下是网站的具体设计：

### 1. 内容

#### 主页
- 网站名称：健康生活
- Logo：用Photoshop设计一个独特的Logo
- 网站导航：健康饮食 | 锻炼建议 | 关于我们
- 网站版权信息：©2023 健康生活。保留所有权利。

#### 健康饮食页面
- 提供健康饮食的知识、建议和食谱

#### 锻炼建议页面
- 提供锻炼方法、锻炼计划和锻炼建议

#### 关于我们页面
- 学号、姓名、院系、专业、班级、电子邮箱、兴趣、爱好、网站简介、栏目设置、网站特色等信息

### 2. 结构

#### 2.1 DIV结构
- 使用清晰的DIV结构，使页面内容易于理解

#### 2.2 主页
- 包含Logo、导航栏和版权信息

#### 2.3 文件命名
- 主页文件名为`index.html`，位于站点文件夹根目录下
- 文件及文件夹名称不包含中文

#### 2.4 关于我们页面
- 包含个人信息、网站简介和栏目设置等内容

### 3. 版面效果与视觉感受

#### 3.1 页面布局
- 页面布局合理，无乱码和DIV错位现象

#### 3.2 设计风格
- 网页设计风格统一，采用DIV布局
- 图片、文字等素材与健康生活主题相符

#### 3.3 页面标题
- 各网页标题命名合理，无空链接和错误链接

#### 3.4 CSS样式
- 使用CSS对DIV、文字和链接进行修饰，突出网站主题

#### 3.5 创意设计
- 网页整体风格和页面具有较强的个性化和创意设计

以下是一个简单的网站代码示例
index.html(主页)

<!DOCTYPE html>
<html>
<head>
  <title>健康生活</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <div class="logo">
      <img src="logo.png" alt="健康生活">
    </div>
    <nav>
      <ul>
        <li><a href="#">健康饮食</a></li>
        <li><a href="#">锻炼建议</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </nav>
  </header>

  <footer>
    <p>©2023 健康生活。保留所有权利。</p>
  </footer>
</body>
</html>

style.css(样式表)

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

header {
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

.logo img {
  width: 200px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

footer {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
}

diet.html（健康饮食页面）

<!DOCTYPE html>
<html>
<head>
  <title>健康饮食 - 健康生活</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <div class="logo">
      <img src="logo.png" alt="健康生活">
    </div>
    <nav>
      <ul>
        <li><a href="#">健康饮食</a></li>
        <li><a href="#">锻炼建议</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </nav>
  </header>

  <h1>健康饮食</h1>
  <p>这里是关于健康饮食的内容。</p>

  <footer>
    <p>©2023 健康生活。保留所有权利。</p>
  </footer>
</body>
</html>

about.html（关于我们页面）

<!DOCTYPE html>
<html>
<head>
  <title>关于我们 - 健康生活</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <header>
    <div class="logo">
      <img src="logo.png" alt="健康生活">
    </div>
    <nav>
      <ul>
        <li><a href="#">健康饮食</a></li>
        <li><a href="#">锻炼建议</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </nav>
  </header>

  <h1>关于我们</h1>
  <p>这里是关于我们的信息。</p>

  <footer>
    <p>©2023 健康生活。保留所有权利。</p>
  </footer>
</body>
</html>

以上代码是一个基本的网站结构，包含了主页、健康饮食页面和关于我们页面的布局和样式。你可以根据自己的需求进行修改和扩展，例如添加更多的内容、样式和交互效果。同时，你需要准备好网站的Logo图像，并将其命名为"logo.png"，放置在与HTML文件相同的目录中。

请注意，这只是一个简单的示例代码，更复杂的网站可能需要更多的HTML结构和CSS样式。

hnchshlily · 发表于 2023-6-23 17:39:53

健康生活

猪猪以都都 · 发表于 2023-6-27 16:01:19

对网站互相抄袭或从他人网站抄袭者将给予扣分，完全抄袭者成绩为零分！！！

sfqxx · 发表于 2023-6-27 18:09:28

巅峰老甲鱼1 发表于 2023-6-22 00:00
包括主页、健康饮食和锻炼建议两个子页面。以下是网站的具体设计：

### 1. 内容

#####

langyawang · 发表于 2023-6-28 15:57:14

不二如是发表于 2023-6-21 10:33
这里是一个网站设计方案:

内容:

肯定是GPT

滑稽光线 · 发表于 2023-6-28 21:11:49

来学习学习

钟鼓馔玉不足贵 · 发表于 2023-7-3 17:05:37

Wei-Yuanzhe · 发表于 2023-7-5 20:47:04

本帖最后由 Wei-Yuanzhe 于 2023-7-5 20:49 编辑

康康

账号		自动登录	找回密码
密码			立即注册